@happyvertical/smrt-ui 0.55.20 → 0.55.22

package/dist/components/forms/Input.svelte

@@ -213,7 +213,7 @@ export function getElement(): HTMLInputElement | null {
 	aria-label={ariaLabel}
 	aria-describedby={resolvedDescribedBy}
 	aria-invalid={resolvedInvalid}
-	data-density={density} class="input {className}"
+	data-density={density} class="smrt-input__root {className}"
 	data-smrt-control={resolvedControlId}
 	data-smrt-form={controlInteraction?.formId}
 	data-smrt-subject-type={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.type}
@@ -223,66 +223,71 @@ export function getElement(): HTMLInputElement | null {
 
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.structure {
+  .smrt-input__root {
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+  }
+  .smrt-input__root:disabled {
+    cursor: not-allowed;
+  }
+  @media (max-width: 48rem) {
+    .smrt-input__root {
+      min-height: 2.75rem;
+    }
+  }
+  .smrt-input__root[data-density='touch'] {
+    --smrt-input-target-min: var(--smrt-touch-target-min);
+  }
+  .smrt-input__root[data-density='comfortable'] {
+    --smrt-input-target-min: 0px;
+  }
+  .smrt-input__root {
+    min-height: max(var(--smrt-control-height), var(--smrt-input-target-min, var(--smrt-control-target-min)));
+  }
+}
 @layer smrt.theme {
-	.input {
-		box-sizing: border-box;
-		display: block;
-		width: 100%;
-		padding: 0.5rem 0.75rem;
-		font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-		font-weight: var(--smrt-control-weight);
-		line-height: var(--smrt-typography-body-medium-line-height, 1.5);
-		color: var(--smrt-color-on-surface);
-		background-color: var(--smrt-surface-control);
-		border: var(--smrt-hairline-strong);
-		border-radius: var(--smrt-control-radius);
-		transition:
-			border-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease-in-out),
-			box-shadow var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease-in-out);
-	}
-
-	.input:focus {
-		border-color: var(--smrt-color-primary);
-	}
-
-	.input:focus-visible {
-		outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
-		outline-offset: var(--smrt-focus-ring-offset);
-	}
-
-	.input[data-smrt-highlighted='true'] {
-		outline: 3px solid var(--smrt-color-tertiary);
-		outline-offset: 3px;
-		box-shadow: 0 0 0 6px color-mix(in srgb, var(--smrt-color-tertiary) 20%, transparent);
-	}
-
-	.input:disabled {
-		background-color: var(--smrt-color-surface-container-high);
-		cursor: not-allowed;
-		opacity: var(--smrt-state-disabled);
-	}
-
-	.input::placeholder {
-		color: var(--smrt-color-on-surface-variant);
-	}
-
-	/* Phones: 16px text so iOS Safari doesn't zoom the page when the field
-	   gets focus, and a 44px touch target. */
-	@media (max-width: 48rem) {
-		.input {
-			font-size: max(var(--smrt-typography-body-medium-size, 0.875rem), 16px);
-			min-height: 2.75rem;
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.input {
-			transition: none;
-		}
-	}
-
-  .input[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
-  .input[data-density='comfortable'] { --smrt-control-target-min: 0px; }
-  .input { min-height: max(var(--smrt-control-height), var(--smrt-control-target-min, 0px)); }
+  .smrt-input__root {
+    font-size: var(--smrt-typography-body-medium-size);
+    font-weight: var(--smrt-control-weight);
+    line-height: var(--smrt-typography-body-medium-line-height);
+    color: var(--smrt-color-on-surface);
+    background-color: var(--smrt-surface-control);
+    border: var(--smrt-hairline-strong);
+    border-radius: var(--smrt-control-radius);
+    transition: border-color var(--smrt-duration-short2) var(--smrt-easing-standard),
+			box-shadow var(--smrt-duration-short2) var(--smrt-easing-standard);
+  }
+  .smrt-input__root:focus {
+    border-color: var(--smrt-color-primary);
+  }
+  .smrt-input__root:focus-visible {
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
+  }
+  .smrt-input__root[data-smrt-highlighted='true'] {
+    outline: 3px solid var(--smrt-color-tertiary);
+    outline-offset: 3px;
+    box-shadow: 0 0 0 6px color-mix(in srgb, var(--smrt-color-tertiary) 20%, transparent);
+  }
+  .smrt-input__root:disabled {
+    background-color: var(--smrt-color-surface-container-high);
+    opacity: var(--smrt-state-disabled);
+  }
+  .smrt-input__root::placeholder {
+    color: var(--smrt-color-on-surface-variant);
+  }
+  @media (max-width: 48rem) {
+    .smrt-input__root {
+      font-size: max(var(--smrt-typography-body-medium-size), 16px);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .smrt-input__root {
+      transition: none;
+    }
+  }
 }
 </style>

package/dist/components/forms/InputGroup.svelte

@@ -16,7 +16,7 @@ let { prefix, suffix, children, class: className = '' }: Props = $props();
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
-  .input-group { display: flex; align-items: stretch; width: 100%; border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); overflow: hidden; }
+  .input-group { display: flex; align-items: stretch; width: 100%; border: var(--smrt-hairline-strong); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); overflow: hidden; }
   .adornment { display: inline-flex; align-items: center; padding: 0 var(--smrt-spacing-3); background: var(--smrt-color-surface-container-low); color: var(--smrt-color-on-surface-variant); }
   .control { flex: 1; min-width: 0; } .input-group .control :global(input), .input-group .control :global(select), .input-group .control :global(textarea) { border: 0; border-radius: 0; box-shadow: none; }
   .input-group:focus-within { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }

package/dist/components/forms/Listbox.svelte

@@ -165,7 +165,7 @@ useControlRegistration(() => {
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
-  .listbox { display: grid; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); }
+  .listbox { display: grid; padding: var(--smrt-spacing-1); border: var(--smrt-hairline-strong); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); }
   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; cursor: pointer; }
   button[aria-selected='true'] { background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); } button:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   button:disabled { opacity: .5; cursor: not-allowed; } :global(.listbox[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }

package/dist/components/forms/MultiSelect.svelte

@@ -225,8 +225,8 @@ useControlRegistration(() => {
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
   .multi-select { position: relative; display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); } .label { font: var(--smrt-typography-label-large-font); }
-  .trigger { width: 100%; min-height: 2.5rem; 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; text-align: left; }
-  .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); background: var(--smrt-color-surface-container); box-shadow: var(--smrt-elevation-2); }
+  .trigger { width: 100%; min-height: 2.5rem; 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; text-align: left; }
+  .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); background: var(--smrt-color-surface-container); box-shadow: var(--smrt-elevation-2); }
   .options button { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-2); border: 0; background: transparent; color: inherit; text-align: left; } .options button[aria-selected='true'] { background: var(--smrt-color-secondary-container); }
   :global(.multi-select[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
 }

package/dist/components/forms/Radio.svelte

@@ -48,5 +48,14 @@ function handleChange(event: Event & { currentTarget: HTMLInputElement }) {
 
   /* Table cells: grow vertically only, never into a neighbouring cell. */
   :global(:is(td, th)) .radio::before { inline-size: var(--smrt-radio-box); margin-inline-start: calc(var(--smrt-radio-box) / -2); }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .radio__mark { border-color: CanvasText; }
+    .radio__mark::after { background: Highlight; }
+    input:checked + .radio__mark { border-color: Highlight; }
+    .radio.disabled { opacity: 1; color: GrayText; }
+    .radio.disabled .radio__mark, .radio.disabled input:checked + .radio__mark { border-color: GrayText; }
+    .radio.disabled .radio__mark::after { background: GrayText; }
+  }
 }
 </style>

package/dist/components/forms/RangeSlider.svelte

@@ -201,7 +201,7 @@ useControlRegistration(() => {
   .range-slider__track input::-moz-range-thumb { pointer-events: auto; }
   .range-slider__inputs { display: flex; gap: var(--smrt-spacing-3); }
   .range-slider__inputs label { display: grid; gap: var(--smrt-spacing-1); flex: 1; font: var(--smrt-typography-label-small-font); color: var(--smrt-color-on-surface-variant); }
-  .range-slider__inputs input { width: 100%; padding: var(--smrt-spacing-2); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); }
+  .range-slider__inputs input { width: 100%; padding: var(--smrt-spacing-2); border: var(--smrt-hairline-strong); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); }
   input:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   :global(.range-slider[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; border-radius: var(--smrt-radius-small); }
 }

package/dist/components/forms/SegmentedControl.svelte

@@ -252,9 +252,9 @@ useControlRegistration(() => {
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
-  .segmented { display: inline-flex; border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-full); overflow: hidden; }
+  .segmented { display: inline-flex; border: var(--smrt-hairline-strong); border-radius: var(--smrt-radius-full); overflow: hidden; }
   .segmented.full-width { display: flex; width: 100%; }
-  label { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 1; min-height: 2.5rem; padding: 0 var(--smrt-spacing-4); border: 0; border-right: 1px solid var(--smrt-color-outline); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); cursor: pointer; }
+  label { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 1; min-height: 2.5rem; padding: 0 var(--smrt-spacing-4); border: 0; border-right: var(--smrt-hairline-strong); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); cursor: pointer; }
   label:last-child { border-right: 0; } label.selected { background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); }
   label:has(input:focus-visible) { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: calc(var(--smrt-focus-ring-width) * -1); } label.disabled, label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
   :global(.segmented[data-smrt-highlighted='true']) { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
@@ -263,5 +263,10 @@ useControlRegistration(() => {
   .segmented[data-density='comfortable'] { --smrt-control-target-min: 0px; }
   label { min-height: max(2.5rem, var(--smrt-control-target-min, 0px)); min-width: var(--smrt-control-target-min, 0px); }
   input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    label.selected { background: Highlight; color: HighlightText; }
+    label.disabled, label:has(input:disabled), label.selected.disabled, label.selected:has(input:disabled) { opacity: 1; background: Canvas; color: GrayText; }
+  }
 }
 </style>

package/dist/components/forms/Select.svelte

@@ -143,7 +143,7 @@ export function getElement(): HTMLSelectElement | null {
 		aria-label={ariaLabel}
 	aria-describedby={resolvedDescribedBy}
 	aria-invalid={resolvedInvalid}
-		data-density={density} class="select {className}"
+		data-density={density} class="smrt-select__root {className}"
 		data-smrt-control={resolvedControlId}
 		data-smrt-form={controlInteraction?.formId}
 		data-smrt-subject-type={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.type}
@@ -155,67 +155,73 @@ export function getElement(): HTMLSelectElement | null {
 
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.structure {
+  .smrt-select__root {
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
+    padding: 0.5rem 2rem 0.5rem 0.75rem;
+    cursor: pointer;
+  }
+  .smrt-select__root:disabled {
+    cursor: not-allowed;
+  }
+  @media (max-width: 48rem) {
+    .smrt-select__root {
+      min-height: 2.75rem;
+    }
+  }
+  .smrt-select__root[data-density='touch'] {
+    --smrt-select-target-min: var(--smrt-touch-target-min);
+  }
+  .smrt-select__root[data-density='comfortable'] {
+    --smrt-select-target-min: 0px;
+  }
+  .smrt-select__root {
+    min-height: max(var(--smrt-control-height), var(--smrt-select-target-min, var(--smrt-control-target-min)));
+  }
+}
 @layer smrt.theme {
-	.select {
-		box-sizing: border-box;
-		display: block;
-		width: 100%;
-		padding: 0.5rem 2rem 0.5rem 0.75rem;
-		font-size: var(--smrt-typography-body-medium-size, 0.875rem);
-		line-height: var(--smrt-typography-body-medium-line-height, 1.5);
-		color: var(--smrt-color-on-surface);
-		background-color: var(--smrt-surface-control);
-		font-weight: var(--smrt-control-weight);
-		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2379747e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-		background-position: right 0.5rem center;
-		background-repeat: no-repeat;
-		background-size: 1.5em 1.5em;
-		border: var(--smrt-hairline-strong);
-		border-radius: var(--smrt-control-radius);
-		appearance: none;
-		cursor: pointer;
-		transition:
-			border-color 0.15s ease-in-out,
+  .smrt-select__root {
+    font-size: var(--smrt-typography-body-medium-size);
+    line-height: var(--smrt-typography-body-medium-line-height);
+    color: var(--smrt-color-on-surface);
+    background-color: var(--smrt-surface-control);
+    font-weight: var(--smrt-control-weight);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2379747e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 0.5rem center;
+    background-repeat: no-repeat;
+    background-size: 1.5em 1.5em;
+    border: var(--smrt-hairline-strong);
+    border-radius: var(--smrt-control-radius);
+    appearance: none;
+    transition: border-color 0.15s ease-in-out,
 			box-shadow 0.15s ease-in-out;
-	}
-
-	.select:focus {
-		border-color: var(--smrt-color-primary);
-	}
-
-	.select:focus-visible {
-		outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
-		outline-offset: var(--smrt-focus-ring-offset);
-	}
-
-	.select[data-smrt-highlighted='true'] {
-		outline: 3px solid var(--smrt-color-tertiary);
-		outline-offset: 3px;
-	}
-
-	.select:disabled {
-		background-color: var(--smrt-color-surface-container-high);
-		cursor: not-allowed;
-		opacity: var(--smrt-state-disabled);
-	}
-
-	/* Phones: 16px text so iOS Safari doesn't zoom the page when the field
-	   gets focus, and a 44px touch target. */
-	@media (max-width: 48rem) {
-		.select {
-			font-size: max(var(--smrt-typography-body-medium-size, 0.875rem), 16px);
-			min-height: 2.75rem;
-		}
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.select {
-			transition: none;
-		}
-	}
-
-  .select[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
-  .select[data-density='comfortable'] { --smrt-control-target-min: 0px; }
-  .select { min-height: max(var(--smrt-control-height), var(--smrt-control-target-min, 0px)); }
+  }
+  .smrt-select__root:focus {
+    border-color: var(--smrt-color-primary);
+  }
+  .smrt-select__root:focus-visible {
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
+  }
+  .smrt-select__root[data-smrt-highlighted='true'] {
+    outline: 3px solid var(--smrt-color-tertiary);
+    outline-offset: 3px;
+  }
+  .smrt-select__root:disabled {
+    background-color: var(--smrt-color-surface-container-high);
+    opacity: var(--smrt-state-disabled);
+  }
+  @media (max-width: 48rem) {
+    .smrt-select__root {
+      font-size: max(var(--smrt-typography-body-medium-size), 16px);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .smrt-select__root {
+      transition: none;
+    }
+  }
 }
 </style>

package/dist/components/forms/SignaturePad.svelte

@@ -410,7 +410,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/Slider.svelte

@@ -157,7 +157,7 @@ useControlRegistration(() => {
   .slider__header { justify-content: space-between; font: var(--smrt-typography-label-large-font); }
   output { color: var(--smrt-color-primary); font-variant-numeric: tabular-nums; }
   input[type='range'] { flex: 1; min-width: 8rem; accent-color: var(--smrt-color-primary); cursor: pointer; }
-  .slider__number { width: 5.5rem; padding: var(--smrt-spacing-2); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); }
+  .slider__number { width: 5.5rem; padding: var(--smrt-spacing-2); border: var(--smrt-hairline-strong); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); }
   input:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   .slider[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; border-radius: var(--smrt-radius-small); }
 }

package/dist/components/forms/StagedControlReview.svelte

@@ -629,22 +629,22 @@ async function discardAll(event: MouseEvent): Promise<void> {
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
-  .staged-review { margin-block-start: var(--smrt-spacing-5, 1.25rem); padding: var(--smrt-spacing-4, 1rem); color: var(--smrt-color-on-surface); background: var(--smrt-color-surface-container-low); border: 1px solid var(--smrt-color-outline-variant); border-inline-start: 4px solid var(--smrt-color-tertiary); border-radius: var(--smrt-radius-medium, .5rem); }
+  .staged-review { margin-block-start: var(--smrt-spacing-5, 1.25rem); padding: var(--smrt-spacing-4, 1rem); color: var(--smrt-color-on-surface); background: var(--smrt-color-surface-container-low); border: var(--smrt-hairline); border-inline-start: 4px solid var(--smrt-color-tertiary); border-radius: var(--smrt-radius-medium, .5rem); }
   header, .proposal-heading, .batch-actions, .item-actions { display: flex; align-items: center; gap: var(--smrt-spacing-2, .5rem); }
   header { justify-content: space-between; align-items: flex-start; gap: var(--smrt-spacing-4, 1rem); }
   h2, p { margin: 0; } h2 { font: var(--smrt-typography-title-medium-font, 600 1rem/1.4 system-ui); }
   header p, .proposal-heading span, dt { color: var(--smrt-color-on-surface-variant); font-size: .875rem; }
   .proposal-heading strong, .proposal-heading .subject { display: block; }
   ul { display: grid; gap: var(--smrt-spacing-3, .75rem); padding: 0; list-style: none; }
-  li { padding: var(--smrt-spacing-3, .75rem); background: var(--smrt-color-surface); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-small, .375rem); }
+  li { padding: var(--smrt-spacing-3, .75rem); background: var(--smrt-color-surface); border: var(--smrt-hairline); border-radius: var(--smrt-radius-small, .375rem); }
   li.stale, li.invalid { border-color: var(--smrt-color-error); }
   .proposal-heading { justify-content: space-between; }
   dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--smrt-spacing-3, .75rem); }
   dt { font-weight: 600; } dd { margin: .25rem 0 0; overflow-wrap: anywhere; }
-  input, textarea { width: 100%; box-sizing: border-box; padding: .4rem .5rem; color: inherit; background: var(--smrt-color-surface); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small, .375rem); }
+  input, textarea { width: 100%; box-sizing: border-box; padding: .4rem .5rem; color: inherit; background: var(--smrt-color-surface); border: var(--smrt-hairline-strong); border-radius: var(--smrt-radius-small, .375rem); }
   input[type="checkbox"] { width: auto; }
   button { min-height: 2.25rem; padding: .4rem .75rem; color: var(--smrt-color-on-primary); background: var(--smrt-color-primary); border: 1px solid transparent; border-radius: var(--smrt-radius-small, .375rem); cursor: pointer; }
-  button.secondary { color: var(--smrt-color-primary); background: transparent; border-color: var(--smrt-color-outline); }
+  button.secondary { color: var(--smrt-color-primary); background: transparent; border-color: var(--smrt-hairline-strong-color); }
   button:focus-visible, input:focus-visible, textarea:focus-visible { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
   button:disabled { cursor: not-allowed; opacity: .55; }
   .item-actions { margin-block-start: var(--smrt-spacing-3, .75rem); }

package/dist/components/forms/Switch.svelte

@@ -116,44 +116,146 @@ useControlRegistration(() => {
 });
 </script>
 
-<label data-density={density} class="switch switch--{size} {className}" class:switch--disabled={disabled} data-smrt-hit-target data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
+<label data-density={density} class="smrt-switch__root smrt-switch__{size} {className}" class:smrt-switch__disabled={disabled} data-smrt-hit-target data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
   data-smrt-subject-type={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.type}
   data-smrt-subject-id={resolvedInteraction === false ? undefined : resolvedInteraction.subject?.id} data-smrt-component="Switch">
-  {#if label && labelPosition === 'left'}<span class="switch__label">{label}</span>{/if}
-  <span class="switch__control">
+  {#if label && labelPosition === 'left'}<span class="smrt-switch__label" data-smrt-part="label">{label}</span>{/if}
+  <span class="smrt-switch__control" data-smrt-part="control">
     <input bind:this={inputEl} id={resolvedId} type="checkbox" role="switch" {name} {value} {disabled} {required} checked={checked}
       aria-label={ariaLabel ?? label ?? formGroup?.().label} aria-describedby={formGroup?.().describedBy}
-      aria-invalid={formGroup?.().invalid ? 'true' : undefined} onchange={handleChange} {...rest} />
-    <span class="switch__track" aria-hidden="true"><span class="switch__thumb"></span></span>
+      aria-invalid={formGroup?.().invalid ? 'true' : undefined} onchange={handleChange} {...rest} data-smrt-part="input" />
+    <span class="smrt-switch__track" data-smrt-part="track" aria-hidden="true"><span class="smrt-switch__thumb" data-smrt-part="thumb"></span></span>
   </span>
-  {#if label && labelPosition === 'right'}<span class="switch__label">{label}</span>{/if}
+  {#if label && labelPosition === 'right'}<span class="smrt-switch__label" data-smrt-part="label">{label}</span>{/if}
 </label>
 
 <style>
 @layer smrt.reset, smrt.structure, smrt.theme;
-@layer smrt.theme {
-  .switch { display: inline-flex; align-items: center; gap: var(--smrt-spacing-2, .5rem); cursor: pointer; color: var(--smrt-color-on-surface); }
-  .switch--disabled { opacity: .5; cursor: not-allowed; }
-  /* Phones: the whole row (track and label) is at least a 44px touch target. */
-  @media (max-width: 48rem) { .switch { min-block-size: 2.75rem; } }
+@layer smrt.structure {
   /* The 2.75rem-wide track gets a transparent 44px-tall ::before hit area (see Checkbox); the
      track and label sit above every hit area. --smrt-control-hit-size resizes it (0px = off). */
-  .switch__control { --smrt-switch-hit: max(var(--smrt-control-hit-size, 2.75rem), 1.5rem); position: relative; display: inline-flex; }
-  .switch__control::before { content: ''; position: absolute; z-index: 0; inset-block-start: 50%; inset-inline: calc((100% - var(--smrt-switch-hit)) / 2); block-size: var(--smrt-switch-hit); margin-block-start: calc(var(--smrt-switch-hit) / -2); }
-  .switch__label { position: relative; z-index: 1; }
-  input { position: absolute; width: 1px; height: 1px; opacity: 0; }
-  .switch__track { position: relative; z-index: 1; width: 2.75rem; height: 1.5rem; padding: 2px; border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface-container-highest); border: 1px solid var(--smrt-color-outline); transition: background var(--smrt-duration-short2); }
-  .switch__thumb { display: block; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--smrt-color-outline); transition: transform var(--smrt-duration-short2), background var(--smrt-duration-short2); }
-  input:checked + .switch__track { background: var(--smrt-color-primary); border-color: var(--smrt-color-primary); }
-  input:checked + .switch__track .switch__thumb { transform: translateX(1.25rem); background: var(--smrt-color-on-primary); }
-  input:focus-visible + .switch__track { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
-  .switch--sm { font-size: .8rem; transform-origin: left center; }
-  .switch--lg .switch__track { transform: scale(1.15); margin-inline: .2rem; }
-  .switch[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; border-radius: var(--smrt-radius-full); }
-  @media (prefers-reduced-motion: reduce) { .switch__track, .switch__thumb { transition: none; } }
-
-  .switch[data-density='touch'] { --smrt-control-target-min: var(--smrt-touch-target-min); }
-  .switch[data-density='comfortable'] { --smrt-control-target-min: 0px; }
-  .switch { min-height: var(--smrt-control-target-min, 0px); min-width: var(--smrt-control-target-min, 0px); }
+  .smrt-switch__root {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2);
+    cursor: pointer;
+  }
+  .smrt-switch__disabled {
+    cursor: not-allowed;
+  }
+  @media (max-width: 48rem) {
+    .smrt-switch__root {
+      min-block-size: 2.75rem;
+    }
+  }
+  .smrt-switch__control {
+    --smrt-switch-hit: max(var(--smrt-control-hit-size, 2.75rem), 1.5rem);
+    position: relative;
+    display: inline-flex;
+  }
+  .smrt-switch__control::before {
+    content: '';
+    position: absolute;
+    z-index: 0;
+    inset-block-start: 50%;
+    inset-inline: calc((100% - var(--smrt-switch-hit)) / 2);
+    block-size: var(--smrt-switch-hit);
+    margin-block-start: calc(var(--smrt-switch-hit) / -2);
+  }
+  .smrt-switch__label {
+    position: relative;
+    z-index: 1;
+  }
+  input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+  }
+  .smrt-switch__track {
+    position: relative;
+    z-index: 1;
+    width: 2.75rem;
+    height: 1.5rem;
+    padding: 2px;
+  }
+  .smrt-switch__thumb {
+    display: block;
+    width: 1.125rem;
+    height: 1.125rem;
+  }
+  input:checked + .smrt-switch__track .smrt-switch__thumb {
+    transform: translateX(1.25rem);
+  }
+  .smrt-switch__sm {
+    transform-origin: left center;
+  }
+  .smrt-switch__lg .smrt-switch__track {
+    transform: scale(1.15);
+    margin-inline: .2rem;
+  }
+  .smrt-switch__root[data-density='touch'] {
+    --smrt-switch-target-min: var(--smrt-touch-target-min);
+  }
+  .smrt-switch__root[data-density='comfortable'] {
+    --smrt-switch-target-min: 0px;
+  }
+  .smrt-switch__root {
+    min-height: var(--smrt-switch-target-min, var(--smrt-control-target-min));
+    min-width: var(--smrt-switch-target-min, var(--smrt-control-target-min));
+  }
+}
+@layer smrt.theme {
+  .smrt-switch__root {
+    color: var(--smrt-color-on-surface);
+  }
+  .smrt-switch__disabled {
+    opacity: .5;
+  }
+  .smrt-switch__track {
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-surface-container-highest);
+    border: var(--smrt-hairline-strong);
+    transition: background var(--smrt-duration-short2);
+  }
+  .smrt-switch__thumb {
+    border-radius: 50%;
+    background: var(--smrt-color-outline);
+    transition: transform var(--smrt-duration-short2), background var(--smrt-duration-short2);
+  }
+  input:checked + .smrt-switch__track {
+    background: var(--smrt-color-primary);
+    border-color: var(--smrt-color-primary);
+  }
+  input:checked + .smrt-switch__track .smrt-switch__thumb {
+    background: var(--smrt-color-on-primary);
+  }
+  input:focus-visible + .smrt-switch__track {
+    outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color);
+    outline-offset: var(--smrt-focus-ring-offset);
+  }
+  .smrt-switch__sm {
+    font-size: .8rem;
+  }
+  .smrt-switch__root[data-smrt-highlighted='true'] {
+    outline: 3px solid var(--smrt-color-tertiary);
+    outline-offset: 4px;
+    border-radius: var(--smrt-radius-full);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .smrt-switch__track, .smrt-switch__thumb {
+      transition: none;
+    }
+  }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .smrt-switch__track { background: Canvas; border-color: CanvasText; }
+    .smrt-switch__thumb { background: CanvasText; }
+    input:checked + .smrt-switch__track { background: Highlight; border-color: Highlight; }
+    input:checked + .smrt-switch__track .smrt-switch__thumb { background: HighlightText; }
+    .smrt-switch__disabled { opacity: 1; color: GrayText; }
+    .smrt-switch__disabled .smrt-switch__track, .smrt-switch__disabled input:checked + .smrt-switch__track { background: Canvas; border-color: GrayText; }
+    .smrt-switch__disabled .smrt-switch__thumb, .smrt-switch__disabled input:checked + .smrt-switch__track .smrt-switch__thumb { background: GrayText; }
+  }
 }
 </style>

package/dist/components/forms/TagsInput.svelte

@@ -139,7 +139,7 @@ useControlRegistration(() => {
 @layer smrt.reset, smrt.structure, smrt.theme;
 @layer smrt.theme {
   .tags-field { display: grid; gap: var(--smrt-spacing-1); color: var(--smrt-color-on-surface); } label { font: var(--smrt-typography-label-large-font); }
-  .tags { display: flex; flex-wrap: wrap; gap: var(--smrt-spacing-1); min-height: 2.5rem; padding: var(--smrt-spacing-1); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); }
+  .tags { display: flex; flex-wrap: wrap; gap: var(--smrt-spacing-1); min-height: 2.5rem; padding: var(--smrt-spacing-1); border: var(--smrt-hairline-strong); border-radius: var(--smrt-radius-small); background: var(--smrt-color-surface); }
   .tag { display: inline-flex; align-items: center; gap: var(--smrt-spacing-1); padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border-radius: var(--smrt-radius-full); background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); }
   .tag button { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; cursor: pointer; }
   /* Phones and touch screens: the × is a 44px target (the tag grows with it). */

package/dist/components/forms/Toggle.svelte

@@ -223,5 +223,17 @@ const sizeClasses = {
       transition: none;
     }
   }
+  /* Forced colors (#3908): system colours where colour alone carries meaning. */
+  @media (forced-colors: active) {
+    .toggle__thumb, .toggle:not(.toggle--disabled):hover .toggle__thumb { background: Canvas; outline: var(--smrt-hairline-strong); outline-offset: 0; }
+    .toggle__input:checked + .toggle__thumb, .toggle:not(.toggle--disabled):hover .toggle__input:checked + .toggle__thumb { background: Highlight; outline-color: Highlight; }
+    .toggle__thumb::after { background: CanvasText; }
+    .toggle__input:checked + .toggle__thumb::after { background: HighlightText; }
+    .toggle__input:focus-visible + .toggle__thumb { outline: var(--smrt-focus-ring-width) solid var(--smrt-focus-ring-color); outline-offset: var(--smrt-focus-ring-offset); }
+    .toggle--disabled { opacity: 1; color: GrayText; }
+    .toggle--disabled .toggle__label { color: GrayText; }
+    .toggle--disabled .toggle__thumb, .toggle--disabled .toggle__input:checked + .toggle__thumb { background: Canvas; outline-color: GrayText; }
+    .toggle--disabled .toggle__thumb::after, .toggle--disabled .toggle__input:checked + .toggle__thumb::after { background: GrayText; }
+  }
 }
 </style>