contain-css-svelte 0.0.14 → 0.0.16

package/dist/controls/Button.svelte

@@ -89,6 +89,11 @@ button:disabled {
   transform: var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none)));
   filter: var(--button-disabled-filter, var(--clickable-disabled-filter, var(--disabled-filter, grayscale(0.5))));
 }
+button:focus-visible {
+  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
+  outline-offset: var(--focus-outline-offset, 2px);
+  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+}
 
 button.primary {
   background: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));

package/dist/controls/Checkbox.svelte

@@ -1,6 +1,4 @@
 <script>export let checked;
-export let value;
-export let group;
 /* Styling properties */
 import { injectVars } from "../util";
 export let bg = null;
@@ -15,8 +13,11 @@ let style = injectVars($$props, "checkbox", [
     "width",
     "height",
 ]);
+export let value = undefined;
+// default group to an empty array so code that calls group.indexOf(...) won't throw
+export let group = [];
 let ref;
-let labelContent;
+let labelContent = "";
 $: {
     if (ref) {
         labelContent = ref.innerHTML;
@@ -26,12 +27,23 @@ $: {
 
 <div class="label-sizing-box">
   <label class="checkbox-item">
-    <input type="checkbox" bind:checked
-    {...$$restProps} />
+    <input
+      type="checkbox"
+      bind:checked
+      bind:group
+      {value}
+      on:change
+      on:click
+      on:blur
+      on:focus
+      on:focusin
+      on:focusout
+      {...$$restProps}
+    />
     <span bind:this={ref}><slot /></span>
   </label>
   <label class="invisible">
-    <input type="checkbox" checked="true" />
+    <input type="checkbox" checked={true} />
     <span>{@html labelContent}</span>
   </label>
 </div>
@@ -97,7 +109,6 @@ label {
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
-  user-select: none;
   gap: var(--checkbox-space, var(--toggle-space, var(--space-md)));
   cursor: var(--checkbox-cursor, var(--clickable-cursor, var(--cursor, pointer)));
   transition: filter, transform var(--checkbox-transition, var(--clickable-transition, var(--transition, 300ms)));
@@ -125,7 +136,21 @@ label:has(input:checked) {
 }
 
 input[type=checkbox] {
-  display: none;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: insert(50%);
+  border: 0;
+}
+
+label:has(input:focus-visible) {
+  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
+  outline-offset: var(--focus-outline-offset, 2px);
+  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
 }
 
 label::before {

package/dist/controls/Checkbox.svelte.d.ts

@@ -3,15 +3,22 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         checked: boolean;
-        value: any;
-        group: string;
         bg?: string | null | undefined;
         fg?: string | null | undefined;
         padding?: string | null | undefined;
         width?: string | null | undefined;
         height?: string | null | undefined;
+        value?: any;
+        group?: any;
     };
     events: {
+        change: Event;
+        click: MouseEvent;
+        blur: FocusEvent;
+        focus: FocusEvent;
+        focusin: FocusEvent;
+        focusout: FocusEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/dist/controls/Input.svelte

@@ -2,8 +2,14 @@
 export let placeholder = "";
 </script>
 
-<input {placeholder} bind:value on:input on:change on:blur on:focus 
-{...$$restProps}
+<input
+  {placeholder}
+  bind:value
+  on:input
+  on:change
+  on:blur
+  on:focus
+  {...$$restProps}
 />
 
 <style>/* Warning: because we define a fallback
@@ -41,4 +47,9 @@ input {
   --link-bg: var(--input-link-bg, var(--ui-link-bg, var(--ui-link-bg, inherit)));
   --link-fg: var(--input-link-fg, var(--ui-link-fg, var(--ui-link-fg, inherit)));
   width: var(--input-width);
+}
+input:focus-visible {
+  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
+  outline-offset: var(--focus-outline-offset, 2px);
+  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
 }</style>

package/dist/controls/MiniButton.svelte

@@ -90,6 +90,11 @@ button:disabled {
   transform: var(--mini-button-disabled-transform, var(--button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none))));
   filter: var(--mini-button-disabled-filter, var(--button-disabled-filter, var(--clickable-disabled-filter, var(--disabled-filter, grayscale(0.5)))));
 }
+button:focus-visible {
+  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
+  outline-offset: var(--focus-outline-offset, 2px);
+  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+}
 
 button.primary {
   background: var(--primary-bg, var(--button-bg, var(--control-bg, var(--bg, unset))));

package/dist/controls/RadioButton.svelte

@@ -25,11 +25,12 @@ $: {
 
 <div class="label-sizing-box">
   <label class="radio-item">
-    <input {value} type="radio" bind:group 
-    {...$$restProps}/>
+    <input {value} type="radio" bind:group {...$$restProps} />
     <span bind:this={ref}><slot /></span>
   </label>
-  <label class="invisible">
+  <!-- Hidden label determines how much space we occupy -- that way we can apply e.g. bold font without 
+   reflowing the UI when checked/unchecked -->
+  <label class="invisible radio-item">
     <input type="radio" checked="true" />
     <span>{@html labelContent}</span>
   </label>
@@ -90,7 +91,7 @@ label {
   position: absolute;
 }
 
-label {
+label.radio-item {
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
@@ -100,33 +101,48 @@ label {
   cursor: var(--radio-button-cursor, var(--clickable-cursor, var(--cursor, pointer)));
   transition: filter, transform var(--radio-button-transition, var(--clickable-transition, var(--transition, 300ms)));
 }
-label:hover {
+label.radio-item:hover {
   filter: var(--radio-button-hover-filter, var(--clickable-hover-filter, var(--hover-filter, brightness(1.4))));
   transform: var(--radio-button-hover-transform, var(--clickable-hover-transform, var(--hover-transform, none)));
 }
-label:active {
+label.radio-item:active {
   filter: var(--radio-button-active-filter, var(--clickable-active-filter, var(--active-filter, brightness(0.9))));
   transform: var(--radio-button-active-transform, var(--clickable-active-transform, var(--active-transform, none)));
 }
-label:disabled {
+label.radio-item:disabled {
   cursor: var(--radio-button-disabled-cursor, var(--clickable-disabled-cursor, var(--disabled-cursor, not-allowed)));
   transform: var(--radio-button-disabled-transform, var(--clickable-disabled-transform, var(--disabled-transform, none)));
   filter: var(--radio-button-disabled-filter, var(--clickable-disabled-filter, var(--disabled-filter, grayscale(0.5))));
 }
 
-label span {
+label.radio-item span {
   width: var(--label-width);
 }
 
-label:has(input:checked) {
+label.radio-item:has(input:checked) {
   font-weight: var(--radio-button-checked-weight, var(--checked-weight, var(--weight, active)));
 }
 
 input[type=radio] {
-  display: none;
+  /* visually hidden but still accessible */
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: insert(50%);
+  border: 0;
+}
+
+label.radio-item:has(input:focus-visible) {
+  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
+  outline-offset: var(--focus-outline-offset, 2px);
+  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
 }
 
-label::before {
+label.radio-item::before {
   transition: all var(--radio-button-transition, var(--transition, control));
   display: inline-grid;
   place-content: center;
@@ -143,7 +159,7 @@ label::before {
   margin-left: var(--radio-button-padding, var(--padding));
 }
 
-label:has(input:checked)::before {
+label.radio-item:has(input:checked)::before {
   background: var(--radio-button-checked-bg, var(--toggle-on-bg, var(--primary-bg, var(--bg, unset))));
   color: var(--radio-button-checked-fg, var(--toggle-on-fg, var(--primary-fg, var(--fg, unset))));
   --link-bg: var(--radio-button-checked-link-bg, var(--toggle-on-link-bg, var(--primary-link-bg, var(--primary-link-bg, inherit))));

package/dist/controls/Select.svelte

@@ -17,10 +17,12 @@ onMount(async () => {
             }
         });
     });
-    observer.observe(selectElement, { childList: true });
+    if (selectElement) {
+        observer.observe(selectElement, { childList: true });
+    }
     // Observe size changes in option buttons
     resizeObserver = new ResizeObserver(() => updateTargetWidth());
-    optionButtons.forEach(button => resizeObserver.observe(button));
+    optionButtons.forEach((button) => resizeObserver.observe(button));
     return () => {
         observer.disconnect();
         resizeObserver.disconnect();
@@ -137,6 +139,12 @@ select,
   font-variant: var(--select-font-variant, var(--input-font-variant, var(--ui-font-variant, var(--font-variant, unset))));
   text-align: var(--select-text-align, var(--input-text-align, var(--ui-text-align, var(--text-align, unset))));
 }
+select:focus-visible,
+.dropdown-wrapper > :global(.dropdown-menu > button):focus-visible {
+  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
+  outline-offset: var(--focus-outline-offset, 2px);
+  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+}
 
 .select-dropdown-label {
   overflow: hidden;

package/dist/controls/Slider.svelte

@@ -5,42 +5,51 @@
   export let step = 1;
 </script>
 
-<input type="range" bind:value {min} {max} {step} 
-{...$$restProps}/>
+<input type="range" bind:value {min} {max} {step} {...$$restProps} />
 
-<style>
-  :root {
-    --slider-button-color: var(--primary-bg);
-    --slider-button-radius: 50%;
-    --slider-line-color: var(--fg);
-    /* Add more variables and styles as needed */
-  }
+<style>/* Warning: because we define a fallback
+  media query, the media query can override the container
+  if we stack a bunch of these in a row and aren't thoughtful about the order.
+  Put min-width queries *after* max-width queries so that smaller
+  container queries don't get their styles overridden by large media queries.
+  */
+/* Convenience groupings */
+:root {
+  --slider-button-color: var(--primary-bg);
+  --slider-button-radius: 50%;
+  --slider-line-color: var(--fg);
+  /* Add more variables and styles as needed */
+}
 
-  input[type="range"] {
-    /* Apply your custom styles here */
-    background: transparent;
-  }
+input[type=range] {
+  /* Apply your custom styles here */
+  background: transparent;
+}
+input[type=range]:focus-visible {
+  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
+  outline-offset: var(--focus-outline-offset, 2px);
+  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+}
 
-  /* Slider Thumb */
-  input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    background: var(--slider-button-color);
-    border-radius: 3px;
-    width: 18px;
-    /* More styles for the thumb */
-  }
+/* Slider Thumb */
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  background: var(--slider-button-color);
+  border-radius: 3px;
+  width: 18px;
+  /* More styles for the thumb */
+}
 
-  input[type="range"]::-moz-range-thumb {
-    /* Styles for Firefox */
-  }
+input[type=range]::-moz-range-thumb {
+  /* Styles for Firefox */
+}
 
-  /* Slider Track */
-  input[type="range"]::-webkit-slider-runnable-track {
-    background: var(--slider-line-color);
-    /* More styles for the track */
-  }
+/* Slider Track */
+input[type=range]::-webkit-slider-runnable-track {
+  background: var(--slider-line-color);
+  /* More styles for the track */
+}
 
-  input[type="range"]::-moz-range-track {
-    /* Styles for Firefox */
-  }
-</style>
+input[type=range]::-moz-range-track {
+  /* Styles for Firefox */
+}</style>

package/dist/controls/TabItem.svelte

@@ -54,6 +54,12 @@ div > :global(div > button) {
   border-radius: var(--tab-border-radius, var(--border-radius) var(--border-radius) 0 0);
   margin: 0;
 }
+div > :global(button):focus-visible,
+div > :global(div > button):focus-visible {
+  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
+  outline-offset: var(--focus-outline-offset, 2px);
+  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+}
 
 div.active > :global(button),
 div.active > :global(div > button) {

package/dist/dropdowns/DropdownMenu.svelte

@@ -176,6 +176,11 @@ button:disabled {
   transform: var(--menu-disabled-transform, var(--button-disabled-transform, var(--control-disabled-transform, var(--disabled-transform, none))));
   filter: var(--menu-disabled-filter, var(--button-disabled-filter, var(--control-disabled-filter, var(--disabled-filter, grayscale(0.5)))));
 }
+button:focus-visible {
+  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
+  outline-offset: var(--focus-outline-offset, 2px);
+  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+}
 
 .menu {
   background: var(--menu-bg, var(--container-bg, var(--bg, unset)));
@@ -220,6 +225,11 @@ button:disabled {
   transform: var(--menu-disabled-transform, var(--button-disabled-transform, var(--control-disabled-transform, var(--disabled-transform, none))));
   filter: var(--menu-disabled-filter, var(--button-disabled-filter, var(--control-disabled-filter, var(--disabled-filter, grayscale(0.5)))));
 }
+.menu:focus-visible {
+  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
+  outline-offset: var(--focus-outline-offset, 2px);
+  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+}
 
 .dropdown-menu {
   font-family: var(--menu-font-family, var(--container-font-family, var(--font-family, unset)));

package/dist/index.d.ts

@@ -25,11 +25,17 @@ import Code from "./misc/Code.svelte";
 import TextLayout from "./typography/TextLayout.svelte";
 import Sidebar from "./layout/Sidebar.svelte";
 import Dialog from "./overlays/Dialog.svelte";
+import Progress from "./misc/Progress.svelte";
+import Tooltip from "./overlays/Tooltip.svelte";
+import Table from "./layout/Table.svelte";
+import Accordion from "./layout/Accordion.svelte";
 export { Hero };
 export { TabItem };
 export { Button, Checkbox, Input, Slider, RadioButton, MiniButton, Select };
 export { Bar, Container, GridLayout, MenuList, Page, ResponsiveText, TabBar };
-export { TextLayout, Code };
+export { TextLayout, Code, Accordion };
 export { Card, Tile, FormItem };
 export { Row, Column, Columns, SplitPane, Sidebar };
 export { Dialog };
+export { Progress, Tooltip };
+export { Table };

package/dist/index.js

@@ -26,11 +26,17 @@ import Code from "./misc/Code.svelte";
 import TextLayout from "./typography/TextLayout.svelte";
 import Sidebar from "./layout/Sidebar.svelte";
 import Dialog from "./overlays/Dialog.svelte";
+import Progress from "./misc/Progress.svelte";
+import Tooltip from "./overlays/Tooltip.svelte";
+import Table from "./layout/Table.svelte";
+import Accordion from "./layout/Accordion.svelte";
 export { Hero };
 export { TabItem };
 export { Button, Checkbox, Input, Slider, RadioButton, MiniButton, Select };
 export { Bar, Container, GridLayout, MenuList, Page, ResponsiveText, TabBar };
-export { TextLayout, Code };
+export { TextLayout, Code, Accordion };
 export { Card, Tile, FormItem };
 export { Row, Column, Columns, SplitPane, Sidebar };
 export { Dialog };
+export { Progress, Tooltip };
+export { Table };

package/dist/layout/Accordion.svelte

@@ -0,0 +1,215 @@
+<script>import { onMount } from "svelte";
+export let highlanderMode = true;
+let wrapper;
+function onAccordionClicked(e) {
+    if (!highlanderMode) {
+        return;
+    }
+    const target = e.target;
+    // Ensure the click is within the current accordion wrapper
+    if (target.closest(".accordion-wrapper") !== wrapper) {
+        return;
+    }
+    // Check if the clicked element is a <summary>
+    if (target.tagName === "SUMMARY") {
+        const details = target.parentElement;
+        // Check if this <details> is nested inside another <details>
+        const parentDetails = details.parentElement?.closest("details");
+        if (parentDetails &&
+            parentDetails.closest(".accordion-wrapper") === wrapper) {
+            return;
+        }
+        // Close all other <details> within the same wrapper
+        const allDetails = wrapper.querySelectorAll("details");
+        allDetails.forEach((d) => {
+            if (d !== details) {
+                if (d.closest(".accordion-wrapper") === wrapper) {
+                    d.open = false;
+                }
+            }
+        });
+    }
+}
+</script>
+
+<div
+  class="accordion-wrapper"
+  on:click={onAccordionClicked}
+  bind:this={wrapper}
+>
+  <slot />
+</div>
+
+<style>/* Warning: because we define a fallback
+  media query, the media query can override the container
+  if we stack a bunch of these in a row and aren't thoughtful about the order.
+  Put min-width queries *after* max-width queries so that smaller
+  container queries don't get their styles overridden by large media queries.
+  */
+/* Convenience groupings */
+div {
+  background: var(--accordion-bg, var(--container-bg, var(--bg, unset)));
+  color: var(--accordion-fg, var(--container-fg, var(--fg, unset)));
+  --link-bg: var(--accordion-link-bg, var(--container-link-bg, var(--container-link-bg, inherit)));
+  --link-fg: var(--accordion-link-fg, var(--container-link-fg, var(--container-link-fg, inherit)));
+  font-family: var(--accordion-font-family, var(--header-font-family, var(--font-family, unset)));
+  text-transform: var(--accordion-text-transform, var(--header-text-transform, var(--text-transform, unset)));
+  text-decoration: var(--accordion-text-decoration, var(--header-text-decoration, var(--text-decoration, unset)));
+  font-size: var(--accordion-font-size, var(--header-font-size, var(--font-size, unset)));
+  font-weight: var(--accordion-font-weight, var(--header-font-weight, var(--font-weight, unset)));
+  line-height: var(--accordion-line-height, var(--header-line-height, var(--line-height, unset)));
+  letter-spacing: var(--accordion-letter-spacing, var(--header-letter-spacing, var(--letter-spacing, unset)));
+  margin-top: var(--accordion-margin, var(--header-margin, var(--margin, unset)));
+  margin-top: var(--accordion-margin-top, var(--header-margin-top, var(--margin-top, unset)));
+  margin-bottom: var(--accordion-margin, var(--header-margin, var(--margin, unset)));
+  margin-bottom: var(--accordion-margin-bottom, var(--header-margin-bottom, var(--margin-bottom, unset)));
+  text-indent: var(--accordion-indent, var(--header-indent, var(--indent, unset)));
+  font-variant: var(--accordion-font-variant, var(--header-font-variant, var(--font-variant, unset)));
+  text-align: var(--accordion-text-align, var(--header-text-align, var(--text-align, unset)));
+  box-sizing: border-box;
+  border: var(--accordion-wrapper-border, var(--container-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg)))));
+  /* border-top: fn.var-with-fallbacks(--border-top,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-right: fn.var-with-fallbacks(--border-right,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-bottom: fn.var-with-fallbacks(--border-bottom,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-left: fn.var-with-fallbacks(--border-left,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  padding: var(--accordion-wrapper-padding, var(--container-padding, var(--padding, 4px)));
+  border-radius: var(--accordion-wrapper-square-radius, var(--container-square-radius, var(--square-radius, 0)));
+  display: flex;
+  flex-direction: column;
+  gap: var(--accordion-gap, var(--gap));
+}
+
+div :global(details > summary) {
+  background: var(--accordion-summary-bg, var(--secondary-bg, var(--bg, unset)));
+  color: var(--accordion-summary-fg, var(--secondary-fg, var(--fg, unset)));
+  --link-bg: var(--accordion-summary-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
+  --link-fg: var(--accordion-summary-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
+  box-sizing: border-box;
+  border: var(--accordion-summary-border, var(--container-border, var(--border, var(--border-width, 1px) var(--border-style, solid) var(--border-color, var(--fg)))));
+  /* border-top: fn.var-with-fallbacks(--border-top,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-right: fn.var-with-fallbacks(--border-right,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-bottom: fn.var-with-fallbacks(--border-bottom,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  /* border-left: fn.var-with-fallbacks(--border-left,
+    append($prefixes,          
+      fn.var-with-fallbacks(--border,$prefixes...)
+    )...) */
+  padding: var(--accordion-summary-padding, var(--container-padding, var(--padding, 4px)));
+  border-radius: var(--accordion-summary-square-radius, var(--container-square-radius, var(--square-radius, 0)));
+  cursor: var(--accordion-cursor, var(--cursor, pointer));
+  transition: filter, transform var(--accordion-transition, var(--transition, 300ms));
+  cursor: pointer;
+  font-family: var(--accordion-summary-font-family, var(--accordion-summary-font-family, inherit));
+  text-transform: var(--accordion-summary-text-transform, var(--accordion-summary-text-transform, inherit));
+  text-decoration: var(--accordion-summary-text-decoration, var(--accordion-summary-text-decoration, inherit));
+  font-size: var(--accordion-summary-font-size, var(--accordion-summary-font-size, inherit));
+  font-weight: var(--accordion-summary-font-weight, var(--accordion-summary-font-weight, inherit));
+  line-height: var(--accordion-summary-line-height, var(--accordion-summary-line-height, inherit));
+  letter-spacing: var(--accordion-summary-letter-spacing, var(--accordion-summary-letter-spacing, inherit));
+  text-indent: var(--accordion-summary-indent, var(--accordion-summary-indent, inherit));
+  font-variant: var(--accordion-summary-font-variant, var(--accordion-summary-font-variant, inherit));
+  text-align: var(--accordion-summary-text-align, var(--accordion-summary-text-align, inherit));
+}
+div :global(details > summary):hover {
+  filter: var(--accordion-hover-filter, var(--hover-filter, brightness(1.4)));
+  transform: var(--accordion-hover-transform, var(--hover-transform, none));
+}
+div :global(details > summary):active {
+  filter: var(--accordion-active-filter, var(--active-filter, brightness(0.9)));
+  transform: var(--accordion-active-transform, var(--active-transform, none));
+}
+div :global(details > summary):disabled {
+  cursor: var(--accordion-disabled-cursor, var(--disabled-cursor, not-allowed));
+  transform: var(--accordion-disabled-transform, var(--disabled-transform, none));
+  filter: var(--accordion-disabled-filter, var(--disabled-filter, grayscale(0.5)));
+}
+div :global(details > summary):focus-visible {
+  outline: var(--focus-color, -webkit-focus-ring-color) auto 1px;
+  outline-offset: var(--focus-outline-offset, 2px);
+  box-shadow: var(--focus-ring-box-shadow, 0 0 0 3px var(--focus-shadow-color, rgba(100, 150, 250, 0.5)));
+}
+
+div :global(details[open] > summary) {
+  background: var(--accordion-summary-open-bg, var(--primary-bg, var(--bg, unset)));
+  color: var(--accordion-summary-open-fg, var(--primary-fg, var(--fg, unset)));
+  --link-bg: var(--accordion-summary-open-link-bg, var(--primary-link-bg, var(--primary-link-bg, inherit)));
+  --link-fg: var(--accordion-summary-open-link-fg, var(--primary-link-fg, var(--primary-link-fg, inherit)));
+  font-family: var(--accordion-summary-open-font-family, var(--accordion-summary-font-family, var(--accordion-summary-font-family, inherit)));
+  text-transform: var(--accordion-summary-open-text-transform, var(--accordion-summary-text-transform, var(--accordion-summary-text-transform, inherit)));
+  text-decoration: var(--accordion-summary-open-text-decoration, var(--accordion-summary-text-decoration, var(--accordion-summary-text-decoration, inherit)));
+  font-size: var(--accordion-summary-open-font-size, var(--accordion-summary-font-size, var(--accordion-summary-font-size, inherit)));
+  font-weight: var(--accordion-summary-open-font-weight, var(--accordion-summary-font-weight, var(--accordion-summary-font-weight, inherit)));
+  line-height: var(--accordion-summary-open-line-height, var(--accordion-summary-line-height, var(--accordion-summary-line-height, inherit)));
+  letter-spacing: var(--accordion-summary-open-letter-spacing, var(--accordion-summary-letter-spacing, var(--accordion-summary-letter-spacing, inherit)));
+  text-indent: var(--accordion-summary-open-indent, var(--accordion-summary-indent, var(--accordion-summary-indent, inherit)));
+  font-variant: var(--accordion-summary-open-font-variant, var(--accordion-summary-font-variant, var(--accordion-summary-font-variant, inherit)));
+  text-align: var(--accordion-summary-open-text-align, var(--accordion-summary-text-align, var(--accordion-summary-text-align, inherit)));
+}
+
+div :global(details) {
+  interpolate-size: allow-keywords;
+}
+
+div :global(details::details-content) {
+  opacity: 0;
+  block-size: 0;
+  box-sizing: border-box;
+  overflow-y: clip;
+  transition: var(--details-transition, content-visibility 300ms allow-discrete, opacity 300ms, block-size 300ms);
+}
+
+div :global(details[open]::details-content) {
+  opacity: 1;
+  block-size: auto;
+}
+
+div :global(details::placeholder) {
+  display: none;
+}
+
+div :global(summary) {
+  list-style: var(--details-list-style, none);
+  background: var(--accordion-summary-bg, var(--secondary-bg, var(--bg, unset)));
+  color: var(--accordion-summary-fg, var(--secondary-fg, var(--fg, unset)));
+  --link-bg: var(--accordion-summary-link-bg, var(--secondary-link-bg, var(--secondary-link-bg, inherit)));
+  --link-fg: var(--accordion-summary-link-fg, var(--secondary-link-fg, var(--secondary-link-fg, inherit)));
+  box-sizing: border-box;
+  border: var(--accordion-summary-border, var(--container-border, var(--border, inherit)));
+  border-top: var(--accordion-summary-border-top, var(--container-border-top, var(--border-top, var(--accordion-summary-border, var(--container-border, var(--border, none))))));
+  border-right: var(--accordion-summary-border-right, var(--container-border-right, var(--border-right, var(--accordion-summary-border, var(--container-border, var(--border, none))))));
+  border-bottom: var(--accordion-summary-border-bottom, var(--container-border-bottom, var(--border-bottom, var(--accordion-summary-border, var(--container-border, var(--border, none))))));
+  border-left: var(--accordion-summary-border-left, var(--container-border-left, var(--border-left, var(--accordion-summary-border, var(--container-border, var(--border, none))))));
+  padding: var(--accordion-summary-padding, var(--container-padding, var(--padding, 4px)));
+  border-radius: var(--accordion-summary-square-radius, var(--container-square-radius, var(--square-radius, 0)));
+}
+
+div :global(summary::after) {
+  content: var(--accordion-icon, "+");
+  float: right;
+  transition: transform 0.3s;
+}
+
+div :global(details[open] > summary::after) {
+  transform: var(--accordion-icon-transform, rotateZ(45deg));
+  content: var(--accordion-open-icon, var(--accordion-icon, "+"));
+}</style>