@happyvertical/smrt-ui 0.55.16 → 0.55.18

package/dist/components/ui/Button.svelte

@@ -129,12 +129,12 @@ function handleClick(event: MouseEvent) {
     aria-disabled={isDisabled}
     aria-busy={loading}
     onclick={handleClick as HTMLAnchorAttributes['onclick']}
-    {...linkProps()}
+    {...linkProps()} data-smrt-component="Button"
   >
     {#if loading}
-      <span class="spinner" aria-hidden="true"></span>
+      <span class="spinner" aria-hidden="true" data-smrt-part="spinner"></span>
     {/if}
-    <span class="content" class:loading>
+    <span class="content" class:loading data-smrt-part="label">
       {@render children?.()}
     </span>
   </a>
@@ -147,33 +147,65 @@ function handleClick(event: MouseEvent) {
     class:full-width={fullWidth}
     class:loading
     onclick={handleClick}
-    {...rest}
+    {...rest} data-smrt-component="Button"
   >
     {#if loading}
-      <span class="spinner" aria-hidden="true"></span>
+      <span class="spinner" aria-hidden="true" data-smrt-part="spinner"></span>
     {/if}
-    <span class="content" class:loading>
+    <span class="content" class:loading data-smrt-part="label">
       {@render children?.()}
     </span>
   </button>
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--smrt-spacing-2);
-    font-weight: var(--smrt-typography-body-medium-weight);
-    border-radius: var(--smrt-radius-medium);
+    position: relative;
+    font-weight: var(--smrt-control-weight);
+    border-radius: var(--smrt-control-radius);
     transition: all var(--smrt-duration-short2) var(--smrt-easing-standard);
     cursor: pointer;
     text-decoration: none;
     border: 1px solid transparent;
   }
 
+  /* One state layer for every variant: currentColor mixed at the theme's
+     state opacity. Per-variant tweaks use --smrt-button-state-* names. */
+  .button::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: transparent;
+    pointer-events: none;
+    transition: background-color var(--smrt-duration-short2) var(--smrt-easing-standard);
+  }
+
+  .button:hover:not(:disabled):not(.disabled)::after {
+    background: color-mix(
+      in srgb,
+      currentColor calc(var(--smrt-state-hover) * 100%),
+      transparent
+    );
+  }
+
+  .button:active:not(:disabled):not(.disabled)::after {
+    background: color-mix(
+      in srgb,
+      currentColor calc(var(--smrt-state-pressed) * 100%),
+      transparent
+    );
+  }
+
   /* Sizes */
   .sm {
+    border-radius: var(--smrt-control-radius-small);
     padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     font-size: var(--smrt-typography-body-medium-size);
   }
@@ -194,47 +226,25 @@ function handleClick(event: MouseEvent) {
     color: var(--smrt-color-on-primary);
   }
 
-  /* M3 hover state layer: 8% of the on-color blended over the base, so the
-     button visibly darkens on hover instead of repeating its base color. */
-  .primary:hover:not(:disabled):not(.disabled) {
-    background: color-mix(
-      in srgb,
-      var(--smrt-color-on-primary) 8%,
-      var(--smrt-color-primary)
-    );
-  }
 
   .secondary {
-    background: var(--smrt-color-surface);
+    background: var(--smrt-surface-control);
     color: var(--smrt-color-primary);
     border-color: var(--smrt-color-primary);
   }
 
-  .secondary:hover:not(:disabled):not(.disabled) {
-    background: var(--smrt-color-primary-container);
-  }
 
   .ghost {
     background: transparent;
     color: var(--smrt-color-primary);
   }
 
-  .ghost:hover:not(:disabled):not(.disabled) {
-    background: var(--smrt-color-primary-container);
-  }
 
   .danger {
     background: var(--smrt-color-error);
     color: var(--smrt-color-on-error);
   }
 
-  .danger:hover:not(:disabled):not(.disabled) {
-    background: color-mix(
-      in srgb,
-      var(--smrt-color-on-error) 8%,
-      var(--smrt-color-error)
-    );
-  }
 
   /* Full width */
   .full-width {
@@ -255,7 +265,7 @@ function handleClick(event: MouseEvent) {
     height: 1em;
     border: 2px solid currentColor;
     border-right-color: transparent;
-    border-radius: var(--smrt-radius-full, 9999px);
+    border-radius: var(--smrt-radius-full);
     animation: spin 0.75s linear infinite;
   }
 
@@ -287,15 +297,15 @@ function handleClick(event: MouseEvent) {
   /* Disabled state */
   .button:disabled,
   .button.disabled {
-    opacity: 0.5;
+    opacity: var(--smrt-state-disabled);
     cursor: not-allowed;
     pointer-events: none;
   }
 
   /* Focus state */
   .button:focus-visible {
-    outline: 2px solid var(--smrt-color-primary);
-    outline-offset: 2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
 
   /* Phones: every size is at least a 44px touch target. */
@@ -312,7 +322,9 @@ function handleClick(event: MouseEvent) {
     }
   }
 
-  .button[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min, 48px); }
+  .button[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
   .button[data-density='comfortable'] { --smrt-control-target-min: 0px; }
-  .button { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
+  .button { min-height: max(var(--smrt-control-height), var(--smrt-control-target-min, 0px)); min-width: var(--smrt-control-target-min, 0px); }
+  .button.sm { min-height: max(var(--smrt-control-height-small), var(--smrt-control-target-min, 0px)); }
+}
 </style>

package/dist/components/ui/Card.svelte

@@ -32,26 +32,28 @@ const {
 <div
   class="card {variant} padding-{padding}"
   class:hoverable
-  {...rest}
+  {...rest} data-smrt-component="Card"
 >
   {#if header}
-    <div class="card-header">
+    <div class="card-header" data-smrt-part="header">
       {@render header()}
     </div>
   {/if}
 
-  <div class="card-content">
+  <div class="card-content" data-smrt-part="body">
     {@render children?.()}
   </div>
 
   {#if footer}
-    <div class="card-footer">
+    <div class="card-footer" data-smrt-part="footer">
       {@render footer()}
     </div>
   {/if}
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   /*
    * Themeable look (app-level custom properties; defaults keep the stock look):
    *   --smrt-card-border      edge of default and elevated cards
@@ -61,29 +63,30 @@ const {
    * The `outlined` variant always draws its outline.
    */
   .card {
-    background: var(--smrt-card-background, var(--smrt-color-surface));
+    background: var(--smrt-card-background, var(--smrt-surface-panel));
     border-radius: var(--smrt-radius-medium);
     transition: all var(--smrt-duration-short2) var(--smrt-easing-standard);
   }
 
   /* Variants */
   .default {
-    border: var(--smrt-card-border, 1px solid var(--smrt-color-outline-variant));
-    box-shadow: var(--smrt-card-shadow, none);
+    border: var(--smrt-card-border, var(--smrt-hairline));
+    box-shadow: var(--smrt-card-shadow, var(--smrt-inset-highlight));
   }
 
   .outlined {
-    border: 2px solid var(--smrt-color-outline);
+    border: var(--smrt-hairline-strong);
+    box-shadow: var(--smrt-inset-highlight);
   }
 
   .elevated {
-    border: var(--smrt-card-border, 1px solid var(--smrt-color-outline-variant));
-    box-shadow: var(--smrt-elevation-2);
+    border: var(--smrt-card-border, var(--smrt-hairline));
+    box-shadow: var(--smrt-inset-highlight), var(--smrt-elevation-2);
   }
 
   /* Hoverable state */
   .hoverable:hover {
-    box-shadow: var(--smrt-elevation-3);
+    box-shadow: var(--smrt-inset-highlight), var(--smrt-elevation-3);
     transform: translateY(-2px);
   }
 
@@ -107,7 +110,7 @@ const {
   /* Header */
   .card-header {
     padding: var(--smrt-spacing-6);
-    border-bottom: var(--smrt-card-divider, 1px solid var(--smrt-color-outline-variant));
+    border-bottom: var(--smrt-card-divider, var(--smrt-hairline));
   }
 
   .padding-sm .card-header {
@@ -121,8 +124,8 @@ const {
   /* Footer */
   .card-footer {
     padding: var(--smrt-spacing-6);
-    border-top: var(--smrt-card-divider, 1px solid var(--smrt-color-outline-variant));
-    background: var(--smrt-color-surface-container-low);
+    border-top: var(--smrt-card-divider, var(--smrt-hairline));
+    background: var(--smrt-surface-sunken);
     border-bottom-left-radius: var(--smrt-radius-medium);
     border-bottom-right-radius: var(--smrt-radius-medium);
   }
@@ -134,4 +137,5 @@ const {
   .padding-lg .card-footer {
     padding: var(--smrt-spacing-8);
   }
+}
 </style>

package/dist/components/ui/Chip.svelte

@@ -49,7 +49,7 @@ const {
   class:selected
   class:disabled
   class:selectable
-  class:closeable
+  class:closeable data-smrt-component="Chip"
 >
   {#if selectable}
     <button
@@ -93,23 +93,49 @@ const {
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .chip {
+    position: relative;
     display: inline-flex;
     align-items: center;
-    gap: var(--smrt-spacing-1, 4px);
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-surface-container-high);
+    gap: var(--smrt-spacing-1);
+    border-radius: var(--smrt-control-radius);
+    background: var(--smrt-surface-control);
     color: var(--smrt-color-on-surface);
-    border: 1px solid var(--smrt-color-outline-variant, #cac4d0);
+    border: var(--smrt-hairline);
+    font-weight: var(--smrt-control-weight);
     max-width: 100%;
   }
 
+  /* State layer: currentColor mixed at the theme's state opacity. */
+  .chip::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: transparent;
+    pointer-events: none;
+  }
+
+  .chip.selectable:hover::after {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
+  }
+
+  .chip.selectable:active::after {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-pressed) * 100%), transparent);
+  }
+
   .chip.sm {
-    padding: 0 var(--smrt-spacing-1, 4px);
+    padding: 0 var(--smrt-spacing-1);
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
   }
+  .chip.sm {
+    border-radius: var(--smrt-control-radius-small);
+  }
   .chip.md {
-    padding: 0 var(--smrt-spacing-2, 8px);
+    min-block-size: var(--smrt-control-height-small);
+    padding: 0 var(--smrt-spacing-2);
     font-size: var(--smrt-typography-label-large-size, 0.875rem);
   }
 
@@ -120,7 +146,7 @@ const {
   }
 
   .chip.disabled {
-    opacity: 0.5;
+    opacity: var(--smrt-state-disabled);
     pointer-events: none;
   }
 
@@ -130,7 +156,7 @@ const {
     border: none;
     color: inherit;
     font: inherit;
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-1, 4px);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-1);
     cursor: default;
     white-space: nowrap;
     overflow: hidden;
@@ -150,18 +176,19 @@ const {
     border: none;
     color: inherit;
     cursor: pointer;
-    padding: var(--smrt-spacing-1, 4px);
-    border-radius: var(--smrt-radius-full, 9999px);
+    padding: var(--smrt-spacing-1);
+    border-radius: var(--smrt-radius-full);
     opacity: 0.7;
   }
   .chip__close:hover {
     opacity: 1;
-    background: color-mix(in srgb, currentColor 12%, transparent);
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
   }
 
   .chip__body:focus-visible,
   .chip__close:focus-visible {
-    outline: 2px solid var(--smrt-color-primary);
-    outline-offset: 1px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
+}
 </style>

package/dist/components/ui/Disclosure.svelte

@@ -36,7 +36,7 @@ function handleToggle(event: Event) {
 }
 </script>
 
-<details class="disclosure {className}" bind:open ontoggle={handleToggle}>
+<details class="disclosure {className}" bind:open ontoggle={handleToggle} data-smrt-component="Disclosure">
   <summary aria-disabled={disabled} onclick={(event) => disabled && event.preventDefault()}>
     <span>{title}</span><span class="chevron" aria-hidden="true">⌄</span>
   </summary>
@@ -44,13 +44,16 @@ function handleToggle(event: Event) {
 </details>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .disclosure { border-bottom: 1px solid var(--smrt-color-outline-variant); color: var(--smrt-color-on-surface); }
   summary { display: flex; justify-content: space-between; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-3) 0; font: var(--smrt-typography-title-small-font); cursor: pointer; list-style: none; }
   summary::-webkit-details-marker { display: none; }
-  summary:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
+  summary:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   summary[aria-disabled='true'] { opacity: .5; cursor: not-allowed; }
   .chevron { transition: transform var(--smrt-duration-short4) var(--smrt-easing-standard); }
   details[open] .chevron { transform: rotate(180deg); }
   .content { padding: 0 0 var(--smrt-spacing-4); color: var(--smrt-color-on-surface-variant); }
   @media (prefers-reduced-motion: reduce) { .chevron { transition: none; } }
+}
 </style>

package/dist/components/ui/Dropdown.svelte

@@ -147,7 +147,7 @@ $effect(() => {
 });
 </script>
 
-<span class="dropdown" bind:this={wrapEl}>
+<span class="dropdown" bind:this={wrapEl} data-smrt-component="Dropdown">
   <button
     bind:this={triggerEl}
     type="button"
@@ -193,6 +193,8 @@ $effect(() => {
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .dropdown {
     position: relative;
     display: inline-flex;
@@ -202,15 +204,16 @@ $effect(() => {
     appearance: none;
     font: inherit;
     cursor: pointer;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    border-radius: var(--smrt-radius-medium, 8px);
-    border: 1px solid var(--smrt-color-outline, #79747e);
-    background: var(--smrt-color-surface);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border-radius: var(--smrt-control-radius);
+    border: var(--smrt-hairline-strong);
+    background: var(--smrt-surface-control);
     color: var(--smrt-color-on-surface);
+    font-weight: var(--smrt-control-weight);
   }
   .dropdown__trigger:focus-visible {
-    outline: 2px solid var(--smrt-color-primary);
-    outline-offset: 2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
   /* Icon trigger: a 44px round "more" button in the surrounding text colour. */
   .dropdown__trigger--icon {
@@ -222,16 +225,16 @@ $effect(() => {
     block-size: 2.75rem;
     padding: 0;
     border: none;
-    border-radius: var(--smrt-radius-full, 999px);
+    border-radius: var(--smrt-radius-full);
     background: transparent;
     color: inherit;
   }
   .dropdown__trigger--icon:hover:not(:disabled),
   .dropdown__trigger--icon[aria-expanded='true'] {
-    background: color-mix(in srgb, currentColor 10%, transparent);
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
   }
   .dropdown__trigger:disabled {
-    opacity: 0.5;
+    opacity: var(--smrt-state-disabled);
     cursor: not-allowed;
   }
 
@@ -239,15 +242,16 @@ $effect(() => {
     position: absolute;
     z-index: var(--smrt-z-index-dropdown, 1000);
     min-width: 10rem;
-    margin: var(--smrt-spacing-1, 4px) 0;
-    padding: var(--smrt-spacing-1, 4px);
+    margin: var(--smrt-spacing-1) 0;
+    padding: var(--smrt-spacing-1);
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-1, 4px);
-    border-radius: var(--smrt-radius-medium, 8px);
-    background: var(--smrt-color-surface-container, #f3edf7);
-    border: 1px solid var(--smrt-color-outline-variant, #cac4d0);
-    box-shadow: var(--smrt-elevation-2, 0 2px 6px rgba(0, 0, 0, 0.15));
+    gap: var(--smrt-spacing-1);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-glass-surface-strong);
+    backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation));
+    border: var(--smrt-hairline);
+    box-shadow: var(--smrt-inset-highlight), var(--smrt-elevation-3);
   }
 
   .dropdown__menu--bottom-start {
@@ -271,16 +275,16 @@ $effect(() => {
     appearance: none;
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     /* A touch target: menu rows are at least 44px tall. */
     min-block-size: 2.75rem;
     box-sizing: border-box;
     font: inherit;
     text-align: left;
     cursor: pointer;
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
     border: none;
-    border-radius: var(--smrt-radius-small, 4px);
+    border-radius: var(--smrt-radius-small);
     background: none;
     color: var(--smrt-color-on-surface);
     white-space: nowrap;
@@ -291,7 +295,10 @@ $effect(() => {
     color: var(--smrt-color-on-surface-variant);
   }
   .dropdown__item:hover:not(:disabled) {
-    background: var(--smrt-color-surface-container-high);
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
+  }
+  .dropdown__item:active:not(:disabled) {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-pressed) * 100%), transparent);
   }
   /* Keyboard focus needs its own indicator: the hover background alone is a
      ~1.1:1 change against the menu surface in every preset (1.00:1 in glass
@@ -299,12 +306,13 @@ $effect(() => {
      sits inside the item's padding box rather than overlapping the neighbouring
      item or the menu's edge (#2322). */
   .dropdown__item:focus-visible {
-    background: var(--smrt-color-surface-container-high);
-    outline: 2px solid var(--smrt-color-primary);
-    outline-offset: -2px;
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: calc(var(--smrt-focus-ring-width) * -1);
   }
   .dropdown__item:disabled {
-    opacity: 0.5;
+    opacity: var(--smrt-state-disabled);
     cursor: not-allowed;
   }
+}
 </style>

package/dist/components/ui/IconToggle.svelte

@@ -24,7 +24,7 @@ export interface Props
   pressed?: boolean;
   /** Optional count badge; included in the accessible name and tooltip. */
   count?: number;
-  /** A CSS colour (a token such as `var(--status-draft)` or a value) shown when the toggle is pressed. */
+  /** A CSS colour (a token such as `var(--smrt-color-primary)` or a value) shown when the toggle is pressed. */
   tone?: string;
   /** The icon. Decorative: it is hidden from assistive technology. */
   children: Snippet;
@@ -58,7 +58,7 @@ const name = $derived(count === undefined ? label : `${label} (${count})`);
     class="icon-toggle {className}"
     class:pressed
     class:toned={tone !== undefined}
-    style:--icon-toggle-tone={tone}
+    style:--smrt-icon-toggle-tone={tone}
     aria-pressed={pressed}
     aria-label={name}
   >
@@ -68,6 +68,8 @@ const name = $derived(count === undefined ? label : `${label} (${count})`);
 </Tooltip>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .icon-toggle {
     position: relative;
     display: inline-flex;
@@ -78,7 +80,7 @@ const name = $derived(count === undefined ? label : `${label} (${count})`);
     min-height: 2.75rem;
     padding: 0;
     border: 1px solid var(--smrt-color-outline-variant, var(--smrt-color-outline));
-    border-radius: var(--smrt-radius-full, 999px);
+    border-radius: var(--smrt-radius-full);
     background: var(--smrt-color-surface-container, var(--smrt-color-surface));
     color: var(--smrt-color-on-surface);
     font: inherit;
@@ -100,13 +102,13 @@ const name = $derived(count === undefined ? label : `${label} (${count})`);
     color: var(--smrt-color-on-surface-variant, var(--smrt-color-on-surface));
   }
   .icon-toggle.toned.pressed {
-    background: color-mix(in srgb, var(--icon-toggle-tone) 16%, var(--smrt-color-surface));
-    color: var(--icon-toggle-tone);
-    box-shadow: inset 0 0 0 2px var(--icon-toggle-tone);
+    background: color-mix(in srgb, var(--smrt-icon-toggle-tone) 16%, var(--smrt-color-surface));
+    color: var(--smrt-icon-toggle-tone);
+    box-shadow: inset 0 0 0 2px var(--smrt-icon-toggle-tone);
   }
   .icon-toggle:focus-visible {
-    outline: 2px solid var(--smrt-color-primary);
-    outline-offset: 2px;
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
   }
   .icon-toggle:disabled {
     opacity: 0.5;
@@ -123,7 +125,7 @@ const name = $derived(count === undefined ? label : `${label} (${count})`);
     box-sizing: border-box;
     min-width: 1.15rem;
     padding: 0 0.3rem;
-    border-radius: var(--smrt-radius-full, 999px);
+    border-radius: var(--smrt-radius-full);
     /* Outlined, not filled: a surface-coloured face (so the button's edge does
        not show through where the badge overlaps it), a 1px theme outline and
        neutral text, readable on light and dark themes alike. */
@@ -136,4 +138,5 @@ const name = $derived(count === undefined ? label : `${label} (${count})`);
     text-align: center;
     font-variant-numeric: tabular-nums;
   }
+}
 </style>

package/dist/components/ui/IconToggle.svelte.d.ts

@@ -17,7 +17,7 @@ export interface Props extends Omit<HTMLButtonAttributes, 'class' | 'children' |
     pressed?: boolean;
     /** Optional count badge; included in the accessible name and tooltip. */
     count?: number;
-    /** A CSS colour (a token such as `var(--status-draft)` or a value) shown when the toggle is pressed. */
+    /** A CSS colour (a token such as `var(--smrt-color-primary)` or a value) shown when the toggle is pressed. */
     tone?: string;
     /** The icon. Decorative: it is hidden from assistive technology. */
     children: Snippet;

package/dist/components/ui/IconToggle.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconToggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/IconToggle.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAI5D,MAAM,WAAW,KACf,SAAQ,IAAI,CACV,oBAAoB,EACpB,OAAO,GAAG,UAAU,GAAG,YAAY,GAAG,cAAc,GAAG,OAAO,CAC/D;IACD,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wGAAwG;IACxG,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,QAAQ,EAAE,OAAO,CAAC;IAClB,+BAA+B;IAC/B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoCD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"IconToggle.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/IconToggle.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAI5D,MAAM,WAAW,KACf,SAAQ,IAAI,CACV,oBAAoB,EACpB,OAAO,GAAG,UAAU,GAAG,YAAY,GAAG,cAAc,GAAG,OAAO,CAC/D;IACD,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8GAA8G;IAC9G,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,QAAQ,EAAE,OAAO,CAAC;IAClB,+BAA+B;IAC/B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoCD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/ui/IconToggleGroup.svelte

@@ -21,11 +21,13 @@ export interface Props {
 const { label, children, class: className = '' }: Props = $props();
 </script>
 
-<div class="icon-toggle-group {className}" role="group" aria-label={label}>
+<div class="icon-toggle-group {className}" role="group" aria-label={label} data-smrt-component="IconToggleGroup">
   {@render children()}
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .icon-toggle-group {
     display: inline-flex;
     flex-wrap: wrap;
@@ -41,16 +43,17 @@ const { label, children, class: className = '' }: Props = $props();
     margin-inline-start: -1px;
   }
   .icon-toggle-group > :global(:first-child .icon-toggle) {
-    border-start-start-radius: var(--smrt-radius-full, 999px);
-    border-end-start-radius: var(--smrt-radius-full, 999px);
+    border-start-start-radius: var(--smrt-radius-full);
+    border-end-start-radius: var(--smrt-radius-full);
   }
   .icon-toggle-group > :global(:last-child .icon-toggle) {
-    border-start-end-radius: var(--smrt-radius-full, 999px);
-    border-end-end-radius: var(--smrt-radius-full, 999px);
+    border-start-end-radius: var(--smrt-radius-full);
+    border-end-end-radius: var(--smrt-radius-full);
   }
   /* The pressed one sits above its neighbours so its tint is not clipped by them. */
   .icon-toggle-group :global(.icon-toggle.pressed),
   .icon-toggle-group :global(.icon-toggle:focus-visible) {
     z-index: 1;
   }
+}
 </style>