@happyvertical/smrt-ui 0.55.20 → 0.55.22

package/dist/components/calendar/DayView.svelte

@@ -330,7 +330,7 @@ function getTypeLabel(type: string): string {
 
   .event-card--link:hover {
     background: var(--smrt-day-view-card-hover);
-    border-color: var(--smrt-color-outline);
+    border-color: var(--smrt-hairline-strong-color);
   }
 
   .event-card--link:hover .event-arrow {

package/dist/components/data/CollectionList.svelte

@@ -112,7 +112,7 @@ function toggle(key: string | number) {
 @layer smrt.theme {
   .collection { display: grid; gap: var(--smrt-spacing-2); margin: 0; padding: 0; list-style: none; }
   .collection--grid { grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
-  li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--smrt-spacing-3); min-width: 0; padding: var(--smrt-spacing-3); border: var(--smrt-card-border, 1px solid var(--smrt-color-outline-variant)); border-radius: var(--smrt-radius-medium); background: var(--smrt-card-background, var(--smrt-color-surface)); color: var(--smrt-color-on-surface); }
+  li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--smrt-spacing-3); min-width: 0; padding: var(--smrt-spacing-3); border: var(--smrt-card-border, var(--smrt-hairline)); border-radius: var(--smrt-radius-medium); background: var(--smrt-card-background, var(--smrt-color-surface)); color: var(--smrt-color-on-surface); }
   li.selected { border-color: var(--smrt-color-primary); background: var(--smrt-color-primary-container); }
   /* The selection box and actions sit above an item's stretched link. */
   .select { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; }

package/dist/components/data/DataTable.svelte

@@ -2351,5 +2351,10 @@ $effect(() => {
   .data-table-container--narrow .data-table { table-layout: fixed; }
   .data-table-container--narrow .data-table__cell { white-space: normal; overflow-wrap: anywhere; }
   .data-table-container--narrow .data-table__sort-button { max-width: 100%; text-align: left; white-space: normal; overflow-wrap: anywhere; }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .data-table__row--selected, .data-table__row--selected .data-table__cell--pinned-start, .data-table__row--selected .data-table__cell--pinned-end { background: Canvas; }
+    .data-table__row--selected { outline: var(--smrt-focus-ring-width) solid Highlight; outline-offset: calc(-1 * var(--smrt-focus-ring-width)); }
+  }
 }
 </style>

package/dist/components/data/ListSortSelect.svelte

@@ -114,7 +114,7 @@ function handleChange(event: Event) {
   .list-sort-select__control {
     min-height: 2.75rem;
     padding: 0.25rem 0.5rem;
-    border: 1px solid var(--smrt-color-outline-variant, currentColor);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-md, 0.375rem);
     background: var(--smrt-color-surface, transparent);
     color: inherit;

package/dist/components/feedback/Alert.svelte

@@ -32,33 +32,99 @@ const role = $derived(
 );
 </script>
 
-<div class="alert alert--{variant} {className}" {role} data-smrt-component="Alert">
-  <span class="marker" aria-hidden="true"></span>
-  <div class="content">
-    {#if title}<strong>{title}</strong>{/if}
-    {#if children}<div class="message">{@render children()}</div>{/if}
+<div class="smrt-alert__root smrt-alert__{variant} {className}" {role} data-smrt-component="Alert">
+  <span class="smrt-alert__marker" data-smrt-part="marker" aria-hidden="true"></span>
+  <div class="smrt-alert__content" data-smrt-part="body">
+    {#if title}<strong data-smrt-part="title">{title}</strong>{/if}
+    {#if children}<div class="smrt-alert__message" data-smrt-part="message">{@render children()}</div>{/if}
   </div>
-  {#if action}<div class="action">{@render action()}</div>{/if}
+  {#if action}<div class="smrt-alert__action" data-smrt-part="actions">{@render action()}</div>{/if}
   {#if dismissible}
-    <button type="button" class="dismiss" aria-label="Dismiss" onclick={ondismiss}>×</button>
+    <button type="button" class="smrt-alert__dismiss" data-smrt-part="close" aria-label="Dismiss" onclick={ondismiss}>×</button>
   {/if}
 </div>
 
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.structure {
+  .smrt-alert__root {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto auto;
+    align-items: start;
+    gap: var(--smrt-spacing-3);
+    padding: var(--smrt-spacing-3) var(--smrt-spacing-4);
+  }
+  .smrt-alert__marker {
+    width: .65rem;
+    height: .65rem;
+    margin-top: .4rem;
+  }
+  .smrt-alert__content {
+    min-width: 0;
+  }
+  strong {
+    display: block;
+  }
+  .smrt-alert__action {
+    align-self: center;
+  }
+  .smrt-alert__dismiss {
+    width: 2rem;
+    height: 2rem;
+    margin: -.35rem;
+    cursor: pointer;
+  }
+}
 @layer smrt.theme {
-  .alert { --smrt-alert-color: var(--smrt-color-primary); display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: start; gap: var(--smrt-spacing-3); padding: var(--smrt-spacing-3) var(--smrt-spacing-4); border: var(--smrt-hairline); border-color: color-mix(in srgb, var(--smrt-alert-color) 35%, var(--smrt-hairline-color)); box-shadow: var(--smrt-inset-highlight); border-radius: var(--smrt-radius-medium); background: color-mix(in srgb, var(--smrt-alert-color) 8%, var(--smrt-surface-panel)); color: var(--smrt-color-on-surface); }
-  .alert--info { --smrt-alert-color: var(--smrt-color-info); }
-  .alert--success { --smrt-alert-color: var(--smrt-color-success); }
-  .alert--warning { --smrt-alert-color: var(--smrt-color-warning); }
-  .alert--error { --smrt-alert-color: var(--smrt-color-error); }
-  .marker { width: .65rem; height: .65rem; margin-top: .4rem; border-radius: 50%; background: var(--smrt-alert-color); }
-  .content { min-width: 0; }
-  strong { display: block; font: var(--smrt-typography-title-small-font); }
-  .message { color: var(--smrt-color-on-surface-variant); }
-  .action { align-self: center; }
-  .dismiss { width: 2rem; height: 2rem; margin: -.35rem; border: 0; border-radius: var(--smrt-radius-full); background: transparent; color: inherit; font-size: 1.25rem; cursor: pointer; }
-  .dismiss:hover { background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent); }
-  .dismiss:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
+  .smrt-alert__root {
+    --smrt-alert-color: var(--smrt-color-primary);
+    border: var(--smrt-hairline);
+    border-color: color-mix(in srgb, var(--smrt-alert-color) 35%, var(--smrt-hairline-color));
+    box-shadow: var(--smrt-inset-highlight);
+    border-radius: var(--smrt-radius-medium);
+    background: color-mix(in srgb, var(--smrt-alert-color) 8%, var(--smrt-surface-panel));
+    color: var(--smrt-color-on-surface);
+  }
+  .smrt-alert__info {
+    --smrt-alert-color: var(--smrt-color-info);
+  }
+  .smrt-alert__success {
+    --smrt-alert-color: var(--smrt-color-success);
+  }
+  .smrt-alert__warning {
+    --smrt-alert-color: var(--smrt-color-warning);
+  }
+  .smrt-alert__error {
+    --smrt-alert-color: var(--smrt-color-error);
+  }
+  .smrt-alert__marker {
+    border-radius: 50%;
+    background: var(--smrt-alert-color);
+  }
+  strong {
+    font: var(--smrt-typography-title-small-font);
+  }
+  .smrt-alert__message {
+    color: var(--smrt-color-on-surface-variant);
+  }
+  .smrt-alert__dismiss {
+    border: 0;
+    border-radius: var(--smrt-radius-full);
+    background: transparent;
+    color: inherit;
+    font-size: 1.25rem;
+  }
+  .smrt-alert__dismiss:hover {
+    background: color-mix(in srgb, currentColor calc(var(--smrt-state-hover) * 100%), transparent);
+  }
+  .smrt-alert__dismiss:focus-visible {
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
+  }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .smrt-alert__root { background: Canvas; border-color: CanvasText; }
+    .smrt-alert__marker { background: CanvasText; }
+  }
 }
 </style>

package/dist/components/feedback/LoadingOverlay.svelte

@@ -261,7 +261,7 @@ function handleKeydown(e: KeyboardEvent) {
 		font-size: var(--smrt-typography-label-large-size, 0.875rem);
 		color: var(--smrt-color-on-surface-variant);
 		background: transparent;
-		border: 1px solid var(--smrt-color-outline);
+		border: var(--smrt-hairline-strong);
 		border-radius: var(--smrt-radius-md);
 		cursor: pointer;
 		transition: all var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
@@ -269,7 +269,7 @@ function handleKeydown(e: KeyboardEvent) {
 
 	.dismiss-btn:hover {
 		background: var(--smrt-color-surface-container-highest);
-		border-color: var(--smrt-color-outline);
+		border-color: var(--smrt-hairline-strong-color);
 	}
 
 	.dismiss-btn:focus-visible {

package/dist/components/feedback/PhoneSheet.svelte

@@ -169,7 +169,7 @@ function onkeydown(event: KeyboardEvent): void {
     min-block-size: 3.5rem;
     padding-block: 0;
     padding-inline: var(--smrt-spacing-4) var(--smrt-spacing-2);
-    border-block-end: 1px solid var(--smrt-color-outline-variant);
+    border-block-end: var(--smrt-hairline);
     touch-action: pan-x;
   }
 

package/dist/components/feedback/Progress.svelte

@@ -68,5 +68,12 @@ const displayValue = $derived(
   .progress--circular > span { position: absolute; font: var(--smrt-typography-label-small-font); }
   @keyframes linear-progress { from { left: -40%; } to { left: 105%; } } @keyframes spin { to { transform: rotate(270deg); } }
   @media (prefers-reduced-motion: reduce) { .progress--linear .indicator, .progress--circular .indicator { transition: none; } .progress--linear.indeterminate .indicator { animation-duration: 2.5s; } }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .progress--linear .track { background: Canvas; border: var(--smrt-hairline-strong); }
+    .progress--linear .indicator { background: Highlight; }
+    .progress--circular .track { stroke: CanvasText; }
+    .progress--circular .indicator { stroke: Highlight; }
+  }
 }
 </style>

package/dist/components/feedback/ToastViewport.svelte

@@ -189,7 +189,7 @@ async function runAction(toast: Toast) {
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
   .viewport { position: fixed; z-index: var(--smrt-z-index-toast, 1200); display: grid; width: min(24rem, calc(var(--smrt-toast-viewport-region-width, 100vw) - 2 * var(--smrt-toast-viewport-inset))); gap: var(--smrt-spacing-2); pointer-events: none; }
-  .viewport :global(.alert) { pointer-events: auto; background: color-mix(in srgb, var(--smrt-alert-color) 8%, var(--smrt-glass-surface-strong)); backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation)); box-shadow: var(--smrt-inset-highlight), var(--smrt-elevation-3); }
+  .viewport :global([data-smrt-component="Alert"]) { pointer-events: auto; background: color-mix(in srgb, var(--smrt-alert-color) 8%, var(--smrt-glass-surface-strong)); backdrop-filter: blur(var(--smrt-glass-blur)) saturate(var(--smrt-glass-saturation)); box-shadow: var(--smrt-inset-highlight), var(--smrt-elevation-3); }
   .viewport--top-start { top: calc(var(--smrt-toast-viewport-top, 0px) + var(--smrt-toast-viewport-inset)); left: calc(var(--smrt-toast-viewport-left, 0px) + var(--smrt-toast-viewport-inset)); }
   .viewport--top-end { top: calc(var(--smrt-toast-viewport-top, 0px) + var(--smrt-toast-viewport-inset)); right: calc(var(--smrt-toast-viewport-right, 0px) + var(--smrt-toast-viewport-inset)); }
   .viewport--bottom-start { bottom: calc(var(--smrt-toast-viewport-bottom, 0px) + var(--smrt-toast-viewport-inset)); left: calc(var(--smrt-toast-viewport-left, 0px) + var(--smrt-toast-viewport-inset)); }

package/dist/components/feedback/WorkingStrip.svelte

@@ -269,7 +269,7 @@ function handleKeydown(event: KeyboardEvent) {
     box-sizing: border-box;
     min-block-size: 2.75rem;
     padding-inline-end: var(--smrt-spacing-2);
-    border-block-start: 1px solid var(--smrt-color-outline-variant);
+    border-block-start: var(--smrt-hairline);
     box-shadow: var(--smrt-elevation-2);
   }
 
@@ -279,14 +279,14 @@ function handleKeydown(event: KeyboardEvent) {
     max-inline-size: min(34rem, calc(100vw - 2rem));
     padding-block: var(--smrt-spacing-1);
     padding-inline-end: var(--smrt-spacing-2);
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-xl, 1.25rem);
     box-shadow: var(--smrt-elevation-3);
   }
 
   .working-strip--inline {
     padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
-    border-block-end: 1px solid var(--smrt-color-outline-variant);
+    border-block-end: var(--smrt-hairline);
   }
 
   .working-strip[data-phase='waiting'] {
@@ -390,7 +390,7 @@ function handleKeydown(event: KeyboardEvent) {
     min-inline-size: 2.75rem;
     min-block-size: 2.75rem;
     padding: 0 var(--smrt-spacing-4);
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-hairline);
     border-radius: var(--smrt-radius-full);
     background: var(--smrt-color-surface);
     color: var(--smrt-color-on-surface);

package/dist/components/forms/CameraCapture.svelte

@@ -583,7 +583,7 @@ useControlRegistration(() => {
     min-width: var(--smrt-touch-target-min);
     min-height: var(--smrt-touch-target-min);
     padding: 0 var(--smrt-spacing-4);
-    border: 1px solid var(--smrt-color-outline);
+    border: var(--smrt-hairline-strong);
     border-radius: var(--smrt-radius-small);
     background: var(--smrt-color-surface);
     color: var(--smrt-color-on-surface);

package/dist/components/forms/Checkbox.svelte

@@ -124,8 +124,8 @@ useControlRegistration(() => {
 </script>
 
 <label
-  data-density={density} class="checkbox {className}"
-  class:checkbox--disabled={disabled}
+  data-density={density} class="smrt-checkbox__root {className}"
+  class:smrt-checkbox__disabled={disabled}
   data-smrt-hit-target
   data-smrt-control={controlId}
   data-smrt-form={interactionContext?.formId}
@@ -145,17 +145,17 @@ useControlRegistration(() => {
     aria-describedby={resolvedDescription}
     aria-invalid={formGroup?.().invalid ? 'true' : undefined}
     onchange={handleChange}
-    {...rest}
+    {...rest} data-smrt-part="input"
   />
-  <span class="checkbox__box" aria-hidden="true">
-    {#if indeterminate}<span class="checkbox__dash"></span>{:else if checked}<span class="checkbox__check">✓</span>{/if}
+  <span class="smrt-checkbox__box" data-smrt-part="box" aria-hidden="true">
+    {#if indeterminate}<span class="smrt-checkbox__dash" data-smrt-part="indicator"></span>{:else if checked}<span class="smrt-checkbox__check" data-smrt-part="indicator">✓</span>{/if}
   </span>
-  {#if label}<span class="checkbox__label">{label}</span>{/if}
+  {#if label}<span class="smrt-checkbox__label" data-smrt-part="label">{label}</span>{/if}
 </label>
 
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
-@layer smrt.theme {
+@layer smrt.structure {
   /* The visible box stays 18px. A transparent 44x44 hit area (WCAG 2.5.8 / M3 touch target) is
      centred on it with ::before, so clicks nearby still land on the wrapping <label>. It adds no
      layout. The box and the label text sit above every hit area (z-index 1 over 0), so one
@@ -164,34 +164,137 @@ useControlRegistration(() => {
      checkbox stands alone in its parent. Beside anything else (a row title, a link, other text)
      it keeps to the box's own column and grows vertically only. Resize it with
      --smrt-control-hit-size (0px turns it off). */
-  .checkbox { --smrt-checkbox-box: 1.125rem; --smrt-checkbox-hit: max(var(--smrt-control-hit-size, 2.75rem), var(--smrt-checkbox-box)); position: relative; display: inline-flex; align-items: center; gap: var(--smrt-spacing-2, .5rem); cursor: pointer; color: var(--smrt-color-on-surface); }
-  .checkbox::before { content: ''; position: absolute; z-index: 0; inset-block-start: 50%; inset-inline-start: calc(var(--smrt-checkbox-box) / 2); inline-size: var(--smrt-checkbox-hit); block-size: var(--smrt-checkbox-hit); margin-block-start: calc(var(--smrt-checkbox-hit) / -2); margin-inline-start: calc(var(--smrt-checkbox-hit) / -2); }
-  .checkbox--disabled { opacity: .5; cursor: not-allowed; }
-  input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
-  .checkbox__box { position: relative; z-index: 1; width: 1.125rem; height: 1.125rem; display: grid; place-items: center; border: 2px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-extra-small); background: var(--smrt-color-surface); transition: background var(--smrt-duration-short2), border-color var(--smrt-duration-short2); }
-  .checkbox__label { position: relative; z-index: 1; }
-  input:checked + .checkbox__box, input:indeterminate + .checkbox__box { background: var(--smrt-color-primary); border-color: var(--smrt-color-primary); color: var(--smrt-color-on-primary); }
-  input:focus-visible + .checkbox__box { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
-  .checkbox__check { font-size: .8rem; font-weight: 800; line-height: 1; }
-  .checkbox__dash { width: .6rem; height: 2px; background: currentColor; }
-  .checkbox:not(:only-child)::before { inline-size: var(--smrt-checkbox-box); margin-inline-start: calc(var(--smrt-checkbox-box) / -2); }
-  .checkbox[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; border-radius: var(--smrt-radius-small); }
-
+  .smrt-checkbox__root {
+    --smrt-checkbox-box: 1.125rem;
+    --smrt-checkbox-hit: max(var(--smrt-control-hit-size, 2.75rem), var(--smrt-checkbox-box));
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2);
+    cursor: pointer;
+  }
+  .smrt-checkbox__root::before {
+    content: '';
+    position: absolute;
+    z-index: 0;
+    inset-block-start: 50%;
+    inset-inline-start: calc(var(--smrt-checkbox-box) / 2);
+    inline-size: var(--smrt-checkbox-hit);
+    block-size: var(--smrt-checkbox-hit);
+    margin-block-start: calc(var(--smrt-checkbox-hit) / -2);
+    margin-inline-start: calc(var(--smrt-checkbox-hit) / -2);
+  }
+  .smrt-checkbox__disabled {
+    cursor: not-allowed;
+  }
+  input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .smrt-checkbox__box {
+    position: relative;
+    z-index: 1;
+    width: 1.125rem;
+    height: 1.125rem;
+    display: grid;
+    place-items: center;
+  }
+  .smrt-checkbox__label {
+    position: relative;
+    z-index: 1;
+  }
+  .smrt-checkbox__dash {
+    width: .6rem;
+    height: 2px;
+  }
+  .smrt-checkbox__root:not(:only-child)::before {
+    inline-size: var(--smrt-checkbox-box);
+    margin-inline-start: calc(var(--smrt-checkbox-box) / -2);
+  }
   /* Table cells: neighbouring cells hold links and other controls, so the hit area never leaves
      the cell's column. It grows vertically only (box wide)... */
-  :global(:is(td, th)) .checkbox::before { inline-size: var(--smrt-checkbox-box); margin-inline-start: calc(var(--smrt-checkbox-box) / -2); }
+  :global(:is(td, th)) .smrt-checkbox__root::before {
+    inline-size: var(--smrt-checkbox-box);
+    margin-inline-start: calc(var(--smrt-checkbox-box) / -2);
+  }
   /* ...unless the checkbox is the cell's only content: then the whole cell, clipped to its own
      edges, is the hit area (the 44px target the header and every row share). The cell only needs
      a containing block, so :where() keeps that rule at zero specificity: a sticky header or a
      pinned column's own position always wins (a sticky cell contains the hit area too). */
-  :global(:where(td:has(> [data-smrt-hit-target]:only-child), th:has(> [data-smrt-hit-target]:only-child))) { position: relative; }
-  :global(:is(td, th):has(> [data-smrt-hit-target]:only-child)) > .checkbox { position: static; }
-  :global(:is(td, th):has(> [data-smrt-hit-target]:only-child)) > .checkbox::before { inset: 0; inline-size: auto; block-size: auto; margin: 0; }
-
-  @media (prefers-reduced-motion: reduce) { .checkbox__box { transition: none; } }
-
-  .checkbox[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
-  .checkbox[data-density='comfortable'] { --smrt-control-target-min: 0px; }
-  .checkbox { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
+  :global(:where(td:has(> [data-smrt-hit-target]:only-child), th:has(> [data-smrt-hit-target]:only-child))) {
+    position: relative;
+  }
+  :global(:is(td, th):has(> [data-smrt-hit-target]:only-child)) > .smrt-checkbox__root {
+    position: static;
+  }
+  :global(:is(td, th):has(> [data-smrt-hit-target]:only-child)) > .smrt-checkbox__root::before {
+    inset: 0;
+    inline-size: auto;
+    block-size: auto;
+    margin: 0;
+  }
+  .smrt-checkbox__root[data-density='touch'] {
+    --smrt-checkbox-target-min: var(--smrt-touch-target-min);
+  }
+  .smrt-checkbox__root[data-density='comfortable'] {
+    --smrt-checkbox-target-min: 0px;
+  }
+  .smrt-checkbox__root {
+    min-height: var(--smrt-checkbox-target-min, var(--smrt-control-target-min));
+    min-width: var(--smrt-checkbox-target-min, var(--smrt-control-target-min));
+  }
+}
+@layer smrt.theme {
+  .smrt-checkbox__root {
+    color: var(--smrt-color-on-surface);
+  }
+  .smrt-checkbox__disabled {
+    opacity: .5;
+  }
+  .smrt-checkbox__box {
+    border: 2px solid var(--smrt-color-outline);
+    border-radius: var(--smrt-radius-extra-small);
+    background: var(--smrt-color-surface);
+    transition: background var(--smrt-duration-short2), border-color var(--smrt-duration-short2);
+  }
+  input:checked + .smrt-checkbox__box, input:indeterminate + .smrt-checkbox__box {
+    background: var(--smrt-color-primary);
+    border-color: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
+  }
+  input:focus-visible + .smrt-checkbox__box {
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
+  }
+  .smrt-checkbox__check {
+    font-size: .8rem;
+    font-weight: 800;
+    line-height: 1;
+  }
+  .smrt-checkbox__dash {
+    background: currentColor;
+  }
+  .smrt-checkbox__root[data-smrt-highlighted='true'] {
+    outline: 3px solid var(--smrt-color-tertiary);
+    outline-offset: 4px;
+    border-radius: var(--smrt-radius-small);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .smrt-checkbox__box {
+      transition: none;
+    }
+  }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .smrt-checkbox__box { background: Canvas; border-color: CanvasText; }
+    input:checked + .smrt-checkbox__box, input:indeterminate + .smrt-checkbox__box { background: Highlight; border-color: Highlight; color: HighlightText; }
+    .smrt-checkbox__dash { background: HighlightText; }
+    .smrt-checkbox__disabled { opacity: 1; color: GrayText; }
+    .smrt-checkbox__disabled .smrt-checkbox__box, .smrt-checkbox__disabled input:checked + .smrt-checkbox__box, .smrt-checkbox__disabled input:indeterminate + .smrt-checkbox__box { background: Canvas; border-color: GrayText; color: GrayText; }
+    .smrt-checkbox__disabled .smrt-checkbox__dash { background: GrayText; }
+  }
 }
 </style>

package/dist/components/forms/Combobox.svelte

@@ -350,8 +350,8 @@ useControlRegistration(() => {
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
   .combobox { position: relative; display: grid; gap: 0; color: var(--smrt-color-on-surface); }
-  input { box-sizing: border-box; width: 100%; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: inherit; }
-  input:focus { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); } .options { position: absolute; z-index: var(--smrt-z-index-dropdown); top: 100%; left: 0; right: 0; display: grid; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface-container); box-shadow: var(--smrt-elevation-2); }
+  input { box-sizing: border-box; width: 100%; padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: var(--smrt-hairline-strong); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: inherit; }
+  input:focus { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); } .options { position: absolute; z-index: var(--smrt-z-index-dropdown); top: 100%; left: 0; right: 0; display: grid; padding: var(--smrt-spacing-1); border: var(--smrt-hairline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface-container); box-shadow: var(--smrt-elevation-2); }
   .options button { padding: var(--smrt-spacing-2) var(--smrt-spacing-3); border: 0; border-radius: var(--smrt-radius-extra-small); background: transparent; color: var(--smrt-color-on-surface); text-align: left; } .options button.active { background: var(--smrt-color-secondary-container); }
   .options.empty { padding: var(--smrt-spacing-2) var(--smrt-spacing-3); color: var(--smrt-color-on-surface-variant); }
   .sr-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

package/dist/components/forms/Fieldset.svelte

@@ -36,7 +36,7 @@ const errorId = $derived(error ? `fieldset-${instanceId}-error` : undefined);
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
-  .fieldset { margin: 0; padding: var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-medium); }
+  .fieldset { margin: 0; padding: var(--smrt-spacing-4); border: var(--smrt-hairline); border-radius: var(--smrt-radius-medium); }
   legend { padding: 0 var(--smrt-spacing-2); color: var(--smrt-color-on-surface); font: var(--smrt-typography-title-small-font); }
   .content--stack { display: grid; gap: var(--smrt-spacing-4); }
   .description, .error { margin: 0 0 var(--smrt-spacing-3); font: var(--smrt-typography-body-small-font); color: var(--smrt-color-on-surface-variant); } .error { margin: var(--smrt-spacing-3) 0 0; color: var(--smrt-color-error); }

package/dist/components/forms/FilePicker.svelte

@@ -118,7 +118,7 @@ useControlRegistration(() => {
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
-  .file-picker { display: inline-flex; flex-direction: column; gap: var(--smrt-spacing-1); padding: var(--smrt-spacing-3) var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); cursor: pointer; }
+  .file-picker { display: inline-flex; flex-direction: column; gap: var(--smrt-spacing-1); padding: var(--smrt-spacing-3) var(--smrt-spacing-4); border: var(--smrt-hairline-strong); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); cursor: pointer; }
   .file-picker.dropzone { width: 100%; min-height: 8rem; align-items: center; justify-content: center; border-style: dashed; text-align: center; }
   .file-picker.dragging { border-color: var(--smrt-color-primary); background: var(--smrt-color-primary-container); }
   .file-picker.disabled { opacity: .5; cursor: not-allowed; } input { position: absolute; width: 1px; height: 1px; opacity: 0; }

package/dist/components/forms/FormActionBar.svelte

@@ -49,7 +49,7 @@ const { t } = useI18n();
     gap: var(--smrt-spacing-3);
     margin-block-start: var(--smrt-spacing-6);
     padding-block-start: var(--smrt-spacing-4);
-    border-block-start: 1px solid var(--smrt-color-outline-variant);
+    border-block-start: var(--smrt-hairline);
   }
 
   .form-action-bar.plain {
@@ -69,7 +69,7 @@ const { t } = useI18n();
       margin: 0;
       padding: var(--smrt-spacing-2) var(--smrt-spacing-4)
         calc(var(--smrt-spacing-2) + env(safe-area-inset-bottom));
-      border-block-start: 1px solid var(--smrt-color-outline-variant);
+      border-block-start: var(--smrt-hairline);
       background: var(--smrt-color-surface);
       box-shadow: var(--smrt-elevation-2);
     }