fix(Accordion): added class identifiers

N00nDay · Oct 2, 2023 · 7d5e57b · 7d5e57b
1 parent 85706f5
commit 7d5e57b
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 5 deletions.
diff --git a/src/lib/components/accordion/Accordion.svelte b/src/lib/components/accordion/Accordion.svelte
@@ -6,7 +6,7 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	const defaultClass = 'rounded-md divide-y divide-border border border-border';
+	const defaultClass = 'rounded-md divide-y divide-border border border-border stwui-accordion';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/accordion/Content.svelte b/src/lib/components/accordion/Content.svelte
@@ -7,7 +7,7 @@
 	import { twMerge } from 'tailwind-merge';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	const defaultClass = 'border-t border-border text-secondary-content';
+	const defaultClass = 'border-t border-border text-secondary-content stwui-accordion-content';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/accordion/Item.svelte b/src/lib/components/accordion/Item.svelte
@@ -14,7 +14,7 @@
 	$: itemOpen.set(open);
 
 	const defaultClass =
-		'bg-surface first-of-type:rounded-t-md last-of-type:rounded-b-md overflow-hidden outline-none focus:outline-none';
+		'bg-surface first-of-type:rounded-t-md last-of-type:rounded-b-md overflow-hidden outline-none focus:outline-none stwui-accordion-item';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 
 	setContext('accordion-open', itemOpen);

diff --git a/src/lib/components/accordion/Title.svelte b/src/lib/components/accordion/Title.svelte
@@ -13,7 +13,7 @@
 	const open: Writable<boolean> = getContext('accordion-open');
 
 	const defaultClass =
-		'relative flex items-center w-full py-4 px-5 text-base text-content hover:text-primary text-left bg-surface border-0 rounded-none justify-between outline-none focus:outline-none';
+		'relative flex items-center w-full py-4 px-5 text-base text-content hover:text-primary text-left bg-surface border-0 rounded-none justify-between outline-none focus:outline-none stwui-accordion-title';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
@@ -26,7 +26,10 @@
 	{...exclude($$props, ['use', 'class'])}
 >
 	<slot />
-	<span class="transition-transform duration-300" class:-rotate-180={$open}>
+	<span
+		class="transition-transform duration-300 stwui-accordion-chevron-container"
+		class:-rotate-180={$open}
+	>
 		<Icon data={chevron_down} />
 	</span>
 </button>