@spectral_labs/ui 1.1.2 → 1.2.1

package/dist/components/accordion/__tests__/AccordionTest.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import AccordionContent from '../components/accordion-content.svelte'
   import AccordionItem from '../components/accordion-item.svelte'
   import AccordionRoot from '../components/accordion-root.svelte'
@@ -16,15 +16,15 @@
 </script>
 
 <AccordionRoot bind:value {type} {disabled}>
-  <AccordionItem value='item-1'>
+  <AccordionItem value="item-1">
     <AccordionTrigger>Trigger 1</AccordionTrigger>
     <AccordionContent>Content 1</AccordionContent>
   </AccordionItem>
-  <AccordionItem value='item-2'>
+  <AccordionItem value="item-2">
     <AccordionTrigger>Trigger 2</AccordionTrigger>
     <AccordionContent>Content 2</AccordionContent>
   </AccordionItem>
-  <AccordionItem value='item-3' disabled={true}>
+  <AccordionItem value="item-3" disabled={true}>
     <AccordionTrigger>Trigger 3</AccordionTrigger>
     <AccordionContent>Content 3</AccordionContent>
   </AccordionItem>

package/dist/components/accordion/components/accordion-content.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { AccordionContentProps } from '../types.js'
   import { getAccordionItemContext } from '../accordion.svelte.js'
 
@@ -8,8 +8,8 @@
 </script>
 
 {#if item.isOpen}
-  <div class="sp-accordion-content {className ?? ''}" role='region' data-state='open'>
-    <div class='sp-accordion-content-inner'>
+  <div class="sp-accordion-content {className ?? ''}" role="region" data-state="open">
+    <div class="sp-accordion-content-inner">
       {#if children}{@render children()}{/if}
     </div>
   </div>

package/dist/components/accordion/components/accordion-item.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { AccordionItemProps } from '../types.js'
   import { getAccordionContext, setAccordionItemContext } from '../accordion.svelte.js'
 

package/dist/components/accordion/components/accordion-root.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { AccordionProps } from '../types.js'
   import { setAccordionContext } from '../accordion.svelte.js'
 
@@ -18,14 +18,12 @@
   }
 
   function toggle(itemValue: string) {
-    if (disabled)
-      return
+    if (disabled) return
     if (type === 'multiple' && Array.isArray(value)) {
       value = value.includes(itemValue)
-        ? value.filter(v => v !== itemValue)
+        ? value.filter((v) => v !== itemValue)
         : [...value, itemValue]
-    }
-    else {
+    } else {
       value = value === itemValue ? '' : itemValue
     }
   }
@@ -39,7 +37,7 @@
   })
 </script>
 
-<div class="sp-accordion {className ?? ''}" data-orientation='vertical'>
+<div class="sp-accordion {className ?? ''}" data-orientation="vertical">
   {#if children}{@render children()}{/if}
 </div>
 

package/dist/components/accordion/components/accordion-root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/accordion/components/accordion-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAoDjD,QAAA,MAAM,aAAa,yDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"accordion-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/accordion/components/accordion-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAkDjD,QAAA,MAAM,aAAa,yDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/accordion/components/accordion-trigger.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { AccordionTriggerProps } from '../types.js'
   import { getAccordionContext, getAccordionItemContext } from '../accordion.svelte.js'
 
@@ -8,10 +8,10 @@
   const item = getAccordionItemContext()
 </script>
 
-<h3 class='sp-accordion-header'>
+<h3 class="sp-accordion-header">
   <button
     class="sp-accordion-trigger {className ?? ''}"
-    type='button'
+    type="button"
     aria-expanded={item.isOpen}
     disabled={item.disabled}
     data-state={item.isOpen ? 'open' : 'closed'}
@@ -19,16 +19,16 @@
   >
     {#if children}{@render children()}{/if}
     <svg
-      class='sp-accordion-chevron'
-      viewBox='0 0 24 24'
-      fill='none'
-      stroke='currentColor'
-      stroke-width='2'
-      stroke-linecap='round'
-      stroke-linejoin='round'
-      aria-hidden='true'
+      class="sp-accordion-chevron"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
     >
-      <polyline points='6 9 12 15 18 9'></polyline>
+      <polyline points="6 9 12 15 18 9"></polyline>
     </svg>
   </button>
 </h3>

package/dist/components/alert-dialog/__tests__/AlertDialogTest.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import AlertDialogAction from '../components/alert-dialog-action.svelte'
   import AlertDialogCancel from '../components/alert-dialog-cancel.svelte'
   import AlertDialogContent from '../components/alert-dialog-content.svelte'
@@ -8,7 +8,10 @@
   import AlertDialogTitle from '../components/alert-dialog-title.svelte'
   import AlertDialogTrigger from '../components/alert-dialog-trigger.svelte'
 
-  let { open = $bindable(false), portalTo = undefined }: { open?: boolean, portalTo?: HTMLElement | string } = $props()
+  let {
+    open = $bindable(false),
+    portalTo = undefined,
+  }: { open?: boolean; portalTo?: HTMLElement | string } = $props()
 </script>
 
 <AlertDialogRoot bind:open>
@@ -17,7 +20,7 @@
   <AlertDialogContent {portalTo}>
     <AlertDialogTitle>Are you sure?</AlertDialogTitle>
     <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
-    <div class='sp-alert-dialog-actions'>
+    <div class="sp-alert-dialog-actions">
       <AlertDialogCancel>Cancel</AlertDialogCancel>
       <AlertDialogAction>Confirm</AlertDialogAction>
     </div>

package/dist/components/alert-dialog/__tests__/alert-dialog.a11y.test.js

@@ -5,7 +5,11 @@ import * as matchers from 'vitest-axe/matchers';
 import AlertDialogTest from './AlertDialogTest.svelte';
 expect.extend(matchers);
 const axe = configureAxe({
-    rules: { 'region': { enabled: false }, 'page-has-heading-one': { enabled: false }, 'landmark-one-main': { enabled: false } },
+    rules: {
+        region: { enabled: false },
+        'page-has-heading-one': { enabled: false },
+        'landmark-one-main': { enabled: false },
+    },
 });
 describe('alert-dialog a11y', () => {
     let cleanup;
@@ -24,7 +28,10 @@ describe('alert-dialog a11y', () => {
     it('has no axe violations when open', async () => {
         const container = document.createElement('div');
         document.body.appendChild(container);
-        const instance = mount(AlertDialogTest, { target: container, props: { open: true } });
+        const instance = mount(AlertDialogTest, {
+            target: container,
+            props: { open: true },
+        });
         const results = await axe(container);
         cleanup = () => {
             unmount(instance);

package/dist/components/alert-dialog/components/alert-dialog-action.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { AlertDialogActionProps } from '../types.js'
   import { getAlertDialogContext } from '../alert-dialog.svelte.js'
 
@@ -6,7 +6,7 @@
   const ctx = getAlertDialogContext()
 </script>
 
-<button class="sp-alert-dialog-action {className ?? ''}" type='button' onclick={() => ctx.close()}>
+<button class="sp-alert-dialog-action {className ?? ''}" type="button" onclick={() => ctx.close()}>
   {#if children}{@render children()}{/if}
 </button>
 

package/dist/components/alert-dialog/components/alert-dialog-cancel.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { AlertDialogCancelProps } from '../types.js'
   import { getAlertDialogContext } from '../alert-dialog.svelte.js'
 
@@ -6,7 +6,7 @@
   const ctx = getAlertDialogContext()
 </script>
 
-<button class="sp-alert-dialog-cancel {className ?? ''}" type='button' onclick={() => ctx.close()}>
+<button class="sp-alert-dialog-cancel {className ?? ''}" type="button" onclick={() => ctx.close()}>
   {#if children}{@render children()}{/if}
 </button>
 

package/dist/components/alert-dialog/components/alert-dialog-content.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { AlertDialogContentProps } from '../types.js'
   import { EscapeLayerState } from '../../../internal/escape-layer/index.js'
   import { FocusScopeState } from '../../../internal/focus-scope/index.js'
@@ -22,16 +22,19 @@
   let contentEl: HTMLElement | undefined = $state()
 
   const presence = new PresenceLayerState({
-    get present() { return ctx.open },
-    get forceMount() { return forceMount },
+    get present() {
+      return ctx.open
+    },
+    get forceMount() {
+      return forceMount
+    },
   })
 
   const escapeLayer = new EscapeLayerState({
     enabled: true,
     onEscapeKeydown(event) {
       onEscapeKeydown?.(event)
-      if (!event.defaultPrevented)
-        ctx.close()
+      if (!event.defaultPrevented) ctx.close()
     },
   })
 
@@ -43,8 +46,7 @@
   $effect(() => {
     if (ctx.open && isBrowser) {
       escapeLayer.mount()
-      if (preventScroll)
-        scrollLock.lock()
+      if (preventScroll) scrollLock.lock()
       if (trapFocus && contentEl) {
         focusScope.setElement(contentEl)
         focusScope.mount()
@@ -72,8 +74,8 @@
       bind:this={contentEl}
       class="sp-alert-dialog-content {className ?? ''}"
       id={ctx.contentId}
-      role='alertdialog'
-      aria-modal='true'
+      role="alertdialog"
+      aria-modal="true"
       aria-labelledby={ctx.titleId}
       aria-describedby={ctx.descriptionId}
       data-state={ctx.open ? 'open' : 'closed'}
@@ -101,8 +103,10 @@
     );
     border-radius: var(--sp-comp-dialog-container-shape, var(--sp-sys-shape-corner-xl, 24px));
     box-shadow: var(--sp-comp-dialog-container-elevation, var(--sp-sys-elevation-3));
-    transition: transform var(--sp-sys-motion-duration-medium3, 350ms) var(--sp-sys-motion-easing-emphasized, ease),
-                opacity var(--sp-sys-motion-duration-medium2, 300ms) var(--sp-sys-motion-easing-effects, ease);
+    transition:
+      transform var(--sp-sys-motion-duration-medium3, 350ms)
+        var(--sp-sys-motion-easing-emphasized, ease),
+      opacity var(--sp-sys-motion-duration-medium2, 300ms) var(--sp-sys-motion-easing-effects, ease);
   }
 
   .sp-alert-dialog-content[data-state='closed'] {

package/dist/components/alert-dialog/components/alert-dialog-content.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/alert-dialog/components/alert-dialog-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AAyF1D,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"alert-dialog-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/alert-dialog/components/alert-dialog-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AA2F1D,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/alert-dialog/components/alert-dialog-description.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { AlertDialogDescriptionProps } from '../types.js'
   import { getAlertDialogContext } from '../alert-dialog.svelte.js'
 

package/dist/components/alert-dialog/components/alert-dialog-overlay.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import { PresenceLayerState } from '../../../internal/presence-layer/index.js'
   import { getAlertDialogContext } from '../alert-dialog.svelte.js'
 
@@ -6,14 +6,15 @@
   const ctx = getAlertDialogContext()
 
   const presence = new PresenceLayerState({
-    get present() { return ctx.open },
+    get present() {
+      return ctx.open
+    },
   })
 
   let overlayEl: HTMLElement | undefined = $state()
 
   $effect(() => {
-    if (overlayEl)
-      presence.setElement(overlayEl)
+    if (overlayEl) presence.setElement(overlayEl)
   })
 </script>
 
@@ -22,7 +23,7 @@
     bind:this={overlayEl}
     class="sp-alert-dialog-overlay {className ?? ''}"
     data-state={ctx.open ? 'open' : 'closed'}
-    aria-hidden='true'
+    aria-hidden="true"
   ></div>
 {/if}
 
@@ -33,7 +34,8 @@
     z-index: 50;
     background-color: var(--sp-comp-dialog-overlay-color, var(--sp-sys-color-scrim));
     opacity: var(--sp-comp-dialog-overlay-opacity, 0.32);
-    transition: opacity var(--sp-sys-motion-duration-medium2, 300ms) var(--sp-sys-motion-easing-effects, ease);
+    transition: opacity var(--sp-sys-motion-duration-medium2, 300ms)
+      var(--sp-sys-motion-easing-effects, ease);
   }
 
   .sp-alert-dialog-overlay[data-state='closed'] {

package/dist/components/alert-dialog/components/alert-dialog-overlay.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-overlay.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/alert-dialog/components/alert-dialog-overlay.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AA4B7C,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"alert-dialog-overlay.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/alert-dialog/components/alert-dialog-overlay.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AA6B7C,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/alert-dialog/components/alert-dialog-root.svelte

@@ -1,8 +1,13 @@
-<script lang='ts'>
+<script lang="ts">
   import type { AlertDialogProps } from '../types.js'
   import { createAlertDialogIds, setAlertDialogContext } from '../alert-dialog.svelte.js'
 
-  let { open = $bindable(false), onOpenChange, class: className, children }: AlertDialogProps = $props()
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    class: className,
+    children,
+  }: AlertDialogProps = $props()
 
   const ids = createAlertDialogIds()
 

package/dist/components/alert-dialog/components/alert-dialog-root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/alert-dialog/components/alert-dialog-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAiCnD,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"alert-dialog-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/alert-dialog/components/alert-dialog-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAsCnD,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/alert-dialog/components/alert-dialog-title.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { AlertDialogTitleProps } from '../types.js'
   import { getAlertDialogContext } from '../alert-dialog.svelte.js'
 
@@ -6,7 +6,11 @@
   const ctx = getAlertDialogContext()
 </script>
 
-<svelte:element this={`h${level}` as const} class="sp-alert-dialog-title {className ?? ''}" id={ctx.titleId}>
+<svelte:element
+  this={`h${level}` as const}
+  class="sp-alert-dialog-title {className ?? ''}"
+  id={ctx.titleId}
+>
   {#if children}{@render children()}{/if}
 </svelte:element>
 

package/dist/components/alert-dialog/components/alert-dialog-trigger.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { AlertDialogTriggerProps } from '../types.js'
   import { getAlertDialogContext } from '../alert-dialog.svelte.js'
 
@@ -8,8 +8,8 @@
 
 <button
   class="sp-alert-dialog-trigger {className ?? ''}"
-  type='button'
-  aria-haspopup='dialog'
+  type="button"
+  aria-haspopup="dialog"
   aria-expanded={ctx.open}
   aria-controls={ctx.contentId}
   onclick={() => ctx.toggle()}

package/dist/components/app-bar/app-bar.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { AppBarProps } from './types.js'
 
   const {
@@ -15,21 +15,21 @@
 
 <header class="sp-app-bar {size} {className ?? ''}" class:scrolled data-size={size}>
   {#if size === 'small'}
-    <div class='sp-app-bar-row'>
-      {#if leading}<div class='sp-app-bar-leading'>{@render leading()}</div>{/if}
-      {#if title}<h1 class='sp-app-bar-title'>{title}</h1>{/if}
+    <div class="sp-app-bar-row">
+      {#if leading}<div class="sp-app-bar-leading">{@render leading()}</div>{/if}
+      {#if title}<h1 class="sp-app-bar-title">{title}</h1>{/if}
       {#if children}{@render children()}{/if}
-      {#if trailing}<div class='sp-app-bar-trailing'>{@render trailing()}</div>{/if}
+      {#if trailing}<div class="sp-app-bar-trailing">{@render trailing()}</div>{/if}
     </div>
   {:else}
-    <div class='sp-app-bar-row'>
-      {#if leading}<div class='sp-app-bar-leading'>{@render leading()}</div>{/if}
-      <div class='sp-app-bar-spacer'></div>
-      {#if trailing}<div class='sp-app-bar-trailing'>{@render trailing()}</div>{/if}
+    <div class="sp-app-bar-row">
+      {#if leading}<div class="sp-app-bar-leading">{@render leading()}</div>{/if}
+      <div class="sp-app-bar-spacer"></div>
+      {#if trailing}<div class="sp-app-bar-trailing">{@render trailing()}</div>{/if}
     </div>
-    <div class='sp-app-bar-headline'>
-      {#if title}<h1 class='sp-app-bar-title'>{title}</h1>{/if}
-      {#if subtitle}<p class='sp-app-bar-subtitle'>{subtitle}</p>{/if}
+    <div class="sp-app-bar-headline">
+      {#if title}<h1 class="sp-app-bar-title">{title}</h1>{/if}
+      {#if subtitle}<p class="sp-app-bar-subtitle">{subtitle}</p>{/if}
       {#if children}{@render children()}{/if}
     </div>
   {/if}

package/dist/components/aspect-ratio/aspect-ratio.svelte

@@ -1,10 +1,10 @@
-<script lang='ts'>
+<script lang="ts">
   import type { AspectRatioProps } from './types.js'
 
   const { ratio = 1, class: className, children }: AspectRatioProps = $props()
 </script>
 
-<div class="sp-aspect-ratio {className ?? ''}" style='aspect-ratio: {ratio};'>
+<div class="sp-aspect-ratio {className ?? ''}" style="aspect-ratio: {ratio};">
   {#if children}{@render children()}{/if}
 </div>
 

package/dist/components/avatar/avatar.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { AvatarProps } from './types.js'
 
   const { src, alt = '', size = 'md', class: className, children }: AvatarProps = $props()
@@ -24,16 +24,16 @@
 
 <span class="sp-avatar {size} {className ?? ''}" data-status={status} data-size={size}>
   {#if status === 'loaded' && src}
-    <img class='sp-avatar-image' {src} {alt} />
+    <img class="sp-avatar-image" {src} {alt} />
   {:else if children}
-    <span class='sp-avatar-fallback'>
+    <span class="sp-avatar-fallback">
       {@render children()}
     </span>
   {:else}
-    <span class='sp-avatar-fallback' aria-label={alt || 'avatar'}>
-      <svg viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'>
+    <span class="sp-avatar-fallback" aria-label={alt || 'avatar'}>
+      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
         <path
-          d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'
+          d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
         />
       </svg>
     </span>

package/dist/components/badge/badge.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { BadgeProps } from './types.js'
 
   const {
@@ -30,8 +30,14 @@
     line-height: 1;
     --sp-comp-badge-filled-bg: var(--sp-ref-palette-primary-40, var(--sp-sys-color-primary));
     --sp-comp-badge-filled-fg: var(--sp-ref-palette-primary-100, var(--sp-sys-color-on-primary));
-    --sp-comp-badge-tonal-bg: var(--sp-ref-palette-primary-90, var(--sp-sys-color-primary-container));
-    --sp-comp-badge-tonal-fg: var(--sp-ref-palette-primary-10, var(--sp-sys-color-on-primary-container));
+    --sp-comp-badge-tonal-bg: var(
+      --sp-ref-palette-primary-90,
+      var(--sp-sys-color-primary-container)
+    );
+    --sp-comp-badge-tonal-fg: var(
+      --sp-ref-palette-primary-10,
+      var(--sp-sys-color-on-primary-container)
+    );
     --sp-comp-badge-outline-fg: var(--sp-sys-color-primary);
     --sp-comp-badge-outline-border: var(--sp-sys-color-outline);
   }
@@ -59,17 +65,25 @@
     color: var(--sp-comp-badge-filled-fg);
   }
 
-  /* ── Outlined ── */
+  /* ── Outlined ──
+   * Themes may override `--sp-comp-badge-outlined-color` from the outer
+   * cascade to replace the foreground without fighting the local
+   * `--sp-comp-badge-outline-fg` tokens declared on `.sp-badge` (custom
+   * property scope rules: ancestors can't override descendants that
+   * re-declare the same name). `carbon` dark uses this to ship a WCAG AA
+   * pair (#a4b4ff on #3c3c3c ≈ 5.5:1) without breaking the existing per-
+   * colour mapping (`secondary`, `tertiary`, …).
+   */
   .sp-badge.outlined {
     background-color: transparent;
     border: 1px solid var(--sp-comp-badge-outline-border);
-    color: var(--sp-comp-badge-outline-fg);
+    color: var(--sp-comp-badge-outlined-color, var(--sp-comp-badge-outline-fg));
   }
 
   /* ── Ghost ── */
   .sp-badge.ghost {
     background-color: transparent;
-    color: var(--sp-comp-badge-outline-fg);
+    color: var(--sp-comp-badge-outlined-color, var(--sp-comp-badge-outline-fg));
   }
 
   /* ── Tonal ── */
@@ -81,37 +95,67 @@
   /* ── Color overrides ── */
   .sp-badge.secondary {
     --sp-comp-badge-filled-bg: var(--sp-ref-palette-secondary-40, var(--sp-sys-color-secondary));
-    --sp-comp-badge-filled-fg: var(--sp-ref-palette-secondary-100, var(--sp-sys-color-on-secondary));
-    --sp-comp-badge-tonal-bg: var(--sp-ref-palette-secondary-90, var(--sp-sys-color-secondary-container));
-    --sp-comp-badge-tonal-fg: var(--sp-ref-palette-secondary-10, var(--sp-sys-color-on-secondary-container));
+    --sp-comp-badge-filled-fg: var(
+      --sp-ref-palette-secondary-100,
+      var(--sp-sys-color-on-secondary)
+    );
+    --sp-comp-badge-tonal-bg: var(
+      --sp-ref-palette-secondary-90,
+      var(--sp-sys-color-secondary-container)
+    );
+    --sp-comp-badge-tonal-fg: var(
+      --sp-ref-palette-secondary-10,
+      var(--sp-sys-color-on-secondary-container)
+    );
     --sp-comp-badge-outline-fg: var(--sp-sys-color-secondary);
   }
   .sp-badge.tertiary {
     --sp-comp-badge-filled-bg: var(--sp-ref-palette-tertiary-40, var(--sp-sys-color-tertiary));
     --sp-comp-badge-filled-fg: var(--sp-ref-palette-tertiary-100, var(--sp-sys-color-on-tertiary));
-    --sp-comp-badge-tonal-bg: var(--sp-ref-palette-tertiary-90, var(--sp-sys-color-tertiary-container));
-    --sp-comp-badge-tonal-fg: var(--sp-ref-palette-tertiary-10, var(--sp-sys-color-on-tertiary-container));
+    --sp-comp-badge-tonal-bg: var(
+      --sp-ref-palette-tertiary-90,
+      var(--sp-sys-color-tertiary-container)
+    );
+    --sp-comp-badge-tonal-fg: var(
+      --sp-ref-palette-tertiary-10,
+      var(--sp-sys-color-on-tertiary-container)
+    );
     --sp-comp-badge-outline-fg: var(--sp-sys-color-tertiary);
   }
   .sp-badge.success {
     --sp-comp-badge-filled-bg: var(--sp-ref-palette-success-40, var(--sp-sys-color-success));
     --sp-comp-badge-filled-fg: var(--sp-ref-palette-success-100, var(--sp-sys-color-on-primary));
-    --sp-comp-badge-tonal-bg: var(--sp-ref-palette-success-90, var(--sp-sys-color-primary-container));
-    --sp-comp-badge-tonal-fg: var(--sp-ref-palette-success-10, var(--sp-sys-color-on-primary-container));
+    --sp-comp-badge-tonal-bg: var(
+      --sp-ref-palette-success-90,
+      var(--sp-sys-color-primary-container)
+    );
+    --sp-comp-badge-tonal-fg: var(
+      --sp-ref-palette-success-10,
+      var(--sp-sys-color-on-primary-container)
+    );
     --sp-comp-badge-outline-fg: var(--sp-sys-color-success);
   }
   .sp-badge.warning {
     --sp-comp-badge-filled-bg: var(--sp-ref-palette-warning-40, var(--sp-sys-color-warning));
     --sp-comp-badge-filled-fg: var(--sp-ref-palette-warning-100, var(--sp-sys-color-on-primary));
-    --sp-comp-badge-tonal-bg: var(--sp-ref-palette-warning-90, var(--sp-sys-color-primary-container));
-    --sp-comp-badge-tonal-fg: var(--sp-ref-palette-warning-10, var(--sp-sys-color-on-primary-container));
+    --sp-comp-badge-tonal-bg: var(
+      --sp-ref-palette-warning-90,
+      var(--sp-sys-color-primary-container)
+    );
+    --sp-comp-badge-tonal-fg: var(
+      --sp-ref-palette-warning-10,
+      var(--sp-sys-color-on-primary-container)
+    );
     --sp-comp-badge-outline-fg: var(--sp-sys-color-warning);
   }
   .sp-badge.error {
     --sp-comp-badge-filled-bg: var(--sp-ref-palette-error-40, var(--sp-sys-color-error));
     --sp-comp-badge-filled-fg: var(--sp-ref-palette-error-100, var(--sp-sys-color-on-error));
     --sp-comp-badge-tonal-bg: var(--sp-ref-palette-error-90, var(--sp-sys-color-error-container));
-    --sp-comp-badge-tonal-fg: var(--sp-ref-palette-error-10, var(--sp-sys-color-on-error-container));
+    --sp-comp-badge-tonal-fg: var(
+      --sp-ref-palette-error-10,
+      var(--sp-sys-color-on-error-container)
+    );
     --sp-comp-badge-outline-fg: var(--sp-sys-color-error);
   }
   .sp-badge.surface {

package/dist/components/badge/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAA;AACpE,MAAM,MAAM,UAAU,GAChB,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,CAAA;AACf,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE1C,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAA;AACpE,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,CAAA;AACb,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE1C,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}