@salmexio/ui 1.0.0 → 1.2.0

package/dist/forms/TextInput/TextInput.svelte

@@ -1,7 +1,7 @@
 <!--
   @component TextInput
 
-  Neo-Brutalist Dark — Clean text field with subtle borders and cyan accents.
+  INFRARED — Clean text field with subtle borders and vermilion accents.
   Label, error, hint, prefix/suffix, clearable, password toggle. Full a11y.
 -->
 <script lang="ts">
@@ -326,6 +326,7 @@ function handleKeyDown(e: KeyboardEvent) {
 		border: 0;
 	}
 
+	/* Field wrapper — recessed channel carved into the surface */
 	.sx-input-field-wrapper {
 		position: relative;
 		display: flex;
@@ -334,30 +335,48 @@ function handleKeyDown(e: KeyboardEvent) {
 		border: 1px solid var(--sx-color-border-strong);
 		border-radius: var(--sx-radius-md);
 		transition: border-color var(--sx-transition-fast), box-shadow var(--sx-transition-fast);
+
+		/* Recessed inset — input sits below the surface */
+		box-shadow:
+			inset 0 1px 3px rgba(0, 0, 0, 0.3),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.06);
 	}
 
 	.sx-input-field-wrapper:hover:not(.sx-input-disabled-wrap):not(.sx-input-focused):not(.sx-input-error) {
 		border-color: var(--sx-color-border-hover);
 	}
 
+	/* Focus — forge glow ring replaces flat ring */
 	.sx-input-focused {
-		border-color: var(--sx-color-cyan);
-		box-shadow: 0 0 0 3px var(--sx-color-cyan-ring);
+		border-color: var(--sx-color-primary);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 0 3px var(--sx-color-primary-ring),
+			0 0 12px -4px rgba(255, 107, 53, 0.15);
+		animation: sx-focus-breathe 2s ease-in-out infinite;
 	}
 
 	.sx-input-error {
 		border-color: var(--sx-color-red);
-		box-shadow: 0 0 0 3px var(--sx-color-red-ring);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 0 3px var(--sx-color-red-ring),
+			0 0 10px -4px rgba(220, 38, 38, 0.15);
+		animation: sx-error-shake 300ms ease-out;
 	}
 
 	.sx-input-valid {
 		border-color: var(--sx-color-green);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 8px -4px rgba(74, 222, 128, 0.15);
 	}
 
 	.sx-input-disabled-wrap {
 		opacity: 0.5;
 		cursor: not-allowed;
 		background: var(--sx-color-surface-2);
+		box-shadow: none;
 	}
 
 	.sx-input-prefix,
@@ -476,7 +495,7 @@ function handleKeyDown(e: KeyboardEvent) {
 	.sx-input-loading {
 		display: flex;
 		align-items: center;
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	.sx-input-spinner {
@@ -513,7 +532,7 @@ function handleKeyDown(e: KeyboardEvent) {
 
 	.sx-input-clear:focus-visible,
 	.sx-input-password-toggle:focus-visible {
-		outline: 2px solid var(--sx-color-cyan);
+		outline: 2px solid var(--sx-color-primary);
 		outline-offset: 2px;
 	}
 
@@ -549,12 +568,21 @@ function handleKeyDown(e: KeyboardEvent) {
 	}
 
 	.sx-input-charcount-warn {
-		color: var(--sx-color-gold);
+		color: var(--sx-color-secondary);
 	}
 
 	@media (prefers-reduced-motion: reduce) {
 		.sx-input-spinner {
 			animation: none;
 		}
+
+		.sx-input-focused {
+			animation: none;
+			box-shadow: 0 0 0 3px var(--sx-color-primary-ring);
+		}
+
+		.sx-input-error {
+			animation: none;
+		}
 	}
 </style>

package/dist/forms/TextInput/TextInput.svelte.d.ts

@@ -41,7 +41,7 @@ interface Props extends Omit<HTMLInputAttributes, 'class' | 'size' | 'inputmode'
 /**
  * TextInput
  *
- * Neo-Brutalist Dark — Clean text field with subtle borders and cyan accents.
+ * INFRARED — Clean text field with subtle borders and vermilion accents.
  * Label, error, hint, prefix/suffix, clearable, password toggle. Full a11y.
  */
 declare const TextInput: import("svelte").Component<Props, {}, "value">;

package/dist/forms/Textarea/Textarea.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Textarea
 
-  Neo-Brutalist Dark — Multi-line text input with custom resize handle,
+  INFRARED — Multi-line text input with custom resize handle,
   auto-resize, character count, validation states, and full accessibility.
   Follows TextInput visual patterns.
 
@@ -368,7 +368,7 @@ onMount(() => {
 		border: 0;
 	}
 
-	/* Field wrapper */
+	/* Field wrapper — recessed channel carved into the surface */
 	.sx-textarea-field-wrapper {
 		position: relative;
 		display: flex;
@@ -380,6 +380,11 @@ onMount(() => {
 		transition:
 			border-color var(--sx-transition-fast),
 			box-shadow var(--sx-transition-fast);
+
+		/* Recessed inset */
+		box-shadow:
+			inset 0 1px 3px rgba(0, 0, 0, 0.3),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.06);
 	}
 
 	.sx-textarea-resizable {
@@ -391,23 +396,33 @@ onMount(() => {
 	}
 
 	.sx-textarea-focused {
-		border-color: var(--sx-color-cyan);
-		box-shadow: 0 0 0 3px var(--sx-color-cyan-ring);
+		border-color: var(--sx-color-primary);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 0 3px var(--sx-color-primary-ring),
+			0 0 12px -4px rgba(255, 107, 53, 0.15);
 	}
 
 	.sx-textarea-error-state {
 		border-color: var(--sx-color-red);
-		box-shadow: 0 0 0 3px var(--sx-color-red-ring);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 0 3px var(--sx-color-red-ring),
+			0 0 10px -4px rgba(220, 38, 38, 0.15);
 	}
 
 	.sx-textarea-success-state {
 		border-color: var(--sx-color-green);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 8px -4px rgba(74, 222, 128, 0.15);
 	}
 
 	.sx-textarea-disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
 		background: var(--sx-color-surface-2);
+		box-shadow: none;
 	}
 
 	.sx-textarea-dragging {
@@ -480,7 +495,7 @@ onMount(() => {
 	}
 
 	.sx-textarea-handle-active {
-		color: var(--sx-color-cyan);
+		color: var(--sx-color-primary);
 	}
 
 	/* Vertical: bar along the bottom edge */
@@ -580,7 +595,7 @@ onMount(() => {
 	}
 
 	.sx-textarea-charcount-warning {
-		color: var(--sx-color-gold);
+		color: var(--sx-color-secondary);
 	}
 
 	.sx-textarea-charcount-exceeded {

package/dist/forms/Textarea/Textarea.svelte.d.ts

@@ -32,7 +32,7 @@ interface Props {
 /**
  * Textarea
  *
- * Neo-Brutalist Dark — Multi-line text input with custom resize handle,
+ * INFRARED — Multi-line text input with custom resize handle,
  * auto-resize, character count, validation states, and full accessibility.
  * Follows TextInput visual patterns.
  *

package/dist/forms/Toggle/Toggle.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Toggle
 
-  Neo-Brutalist Dark — Accessible toggle switch with on/off states,
+  INFRARED — Accessible toggle switch with on/off states,
   label positioning, size variants, and keyboard support.
   Uses role="switch" with aria-checked for screen readers.
 
@@ -115,7 +115,7 @@ function toggle() {
 		pointer-events: none;
 	}
 
-	/* Track */
+	/* Track — recessed channel for the physical switch */
 	.sx-toggle-track {
 		position: relative;
 		flex-shrink: 0;
@@ -130,7 +130,13 @@ function toggle() {
 		cursor: pointer;
 		transition:
 			background var(--sx-transition-fast),
-			border-color var(--sx-transition-fast);
+			border-color var(--sx-transition-fast),
+			box-shadow var(--sx-transition-fast);
+
+		/* Recessed inset — the track sits below the surface */
+		box-shadow:
+			inset 0 1px 3px rgba(0, 0, 0, 0.4),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 	}
 
 	.sx-toggle-track:hover:not(:disabled) {
@@ -139,32 +145,80 @@ function toggle() {
 
 	.sx-toggle-track:focus-visible {
 		outline: none;
-		box-shadow: 0 0 0 3px var(--sx-color-cyan-ring);
+		box-shadow:
+			inset 0 1px 3px rgba(0, 0, 0, 0.4),
+			0 0 0 3px var(--sx-color-primary-ring);
 	}
 
+	/* Active track — forge glow fills the channel */
 	.sx-toggle-checked {
-		background: var(--sx-color-cyan);
-		border-color: var(--sx-color-cyan);
+		background:
+			linear-gradient(
+				135deg,
+				#FF6B35 0%,
+				#C8A84E 50%,
+				#3D8B8B 100%
+			);
+		background-size: 200% 200%;
+		border-color: rgba(255, 107, 53, 0.4);
+		animation: sx-toggle-drift 6s ease-in-out infinite;
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 12px -3px rgba(255, 107, 53, 0.3);
 	}
 
 	.sx-toggle-checked:hover:not(:disabled) {
-		border-color: var(--sx-color-cyan);
-		background: var(--sx-color-cyan-bright, var(--sx-color-cyan));
+		border-color: rgba(255, 107, 53, 0.5);
+	}
+
+	@keyframes sx-toggle-drift {
+		0%, 100% { background-position: 0% 50%; }
+		50% { background-position: 100% 50%; }
 	}
 
-	/* Thumb */
+	/* Thumb — physical raised knob with 3D depth */
 	.sx-toggle-thumb {
 		display: block;
 		width: var(--sx-toggle-thumb, 18px);
 		height: var(--sx-toggle-thumb, 18px);
 		border-radius: var(--sx-radius-full);
-		background: var(--sx-color-text);
-		transition: transform var(--sx-transition-fast);
-		box-shadow: var(--sx-shadow-sm);
+		background:
+			linear-gradient(
+				180deg,
+				rgba(255, 255, 255, 0.15) 0%,
+				transparent 50%,
+				rgba(0, 0, 0, 0.1) 100%
+			),
+			var(--sx-gray-200);
+		transition: transform 200ms var(--sx-ease-spring),
+			box-shadow 200ms var(--sx-ease-spring);
+		position: relative;
+
+		/* 3D extrusion — raised knob */
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.2),
+			0 1px 0 0 rgba(0, 0, 0, 0.15),
+			0 2px 0 0 rgba(0, 0, 0, 0.1),
+			0 3px 4px -1px rgba(0, 0, 0, 0.3);
 	}
 
 	.sx-toggle-checked .sx-toggle-thumb {
 		transform: translateX(calc(var(--sx-toggle-w, 44px) - var(--sx-toggle-thumb, 18px) - 6px));
+
+		/* Active knob glows with forge warmth */
+		box-shadow:
+			0 1px 0 0 rgba(255, 200, 150, 0.3),
+			0 1px 0 0 rgba(0, 0, 0, 0.15),
+			0 2px 0 0 rgba(0, 0, 0, 0.1),
+			0 3px 4px -1px rgba(0, 0, 0, 0.3),
+			0 0 8px -2px rgba(255, 107, 53, 0.25);
+	}
+
+	/* Press — knob pushes down */
+	.sx-toggle-track:active:not(:disabled) .sx-toggle-thumb {
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.1),
+			0 1px 2px -1px rgba(0, 0, 0, 0.2);
 	}
 
 	/* Size variants */
@@ -216,6 +270,11 @@ function toggle() {
 		.sx-toggle-thumb {
 			transition: none;
 		}
+
+		.sx-toggle-checked {
+			animation: none;
+			background: var(--sx-color-primary);
+		}
 	}
 
 	@media (forced-colors: active) {

package/dist/forms/Toggle/Toggle.svelte.d.ts

@@ -24,7 +24,7 @@ interface Props {
 /**
  * Toggle
  *
- * Neo-Brutalist Dark — Accessible toggle switch with on/off states,
+ * INFRARED — Accessible toggle switch with on/off states,
  * label positioning, size variants, and keyboard support.
  * Uses role="switch" with aria-checked for screen readers.
  *

package/dist/layout/Card/Card.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Card
 
-  Neo-Brutalist Dark — Glassmorphic panel with frosted background, subtle borders.
+  INFRARED — Glassmorphic panel with frosted background, subtle borders.
   Optional header/footer, semantic element support.
 
   @example
@@ -13,9 +13,12 @@ import type { Snippet } from 'svelte';
 import { cn } from '../../utils/cn.js';
 
 type CardPadding = 'sm' | 'md' | 'lg';
+type CardAccent = 'none' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
 
 interface Props {
 	padding?: CardPadding;
+	/** Left accent border color */
+	accent?: CardAccent;
 	as?: 'div' | 'article' | 'section';
 	id?: string;
 	ariaLabelledby?: string;
@@ -30,6 +33,7 @@ interface Props {
 
 let {
 	padding = 'md',
+	accent = 'none',
 	as = 'div',
 	id,
 	ariaLabelledby,
@@ -82,6 +86,7 @@ const currentPadding = $derived(paddingValues[padding]);
 	class={cn(
 		'sx-card',
 		`sx-card-padding-${padding}`,
+		accent !== 'none' && `sx-card-accent sx-card-accent-${accent}`,
 		onclick && 'sx-card-clickable',
 		className
 	)}
@@ -112,6 +117,30 @@ const currentPadding = $derived(paddingValues[padding]);
 		-webkit-backdrop-filter: var(--sx-glass-blur);
 		transition: var(--sx-transition-base);
 		transition-property: transform, border-color, box-shadow;
+
+		/* 3D extrusion — subtle panel depth */
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.03),
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.15),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3);
+	}
+
+	/* Top-lit bevel — overhead light simulation */
+	.sx-card::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		pointer-events: none;
+		z-index: 0;
+		background:
+			linear-gradient(
+				180deg,
+				rgba(255, 255, 255, 0.04) 0%,
+				transparent 40%,
+				rgba(0, 0, 0, 0.06) 100%
+			);
 	}
 
 	.sx-card-clickable {
@@ -119,16 +148,100 @@ const currentPadding = $derived(paddingValues[padding]);
 	}
 
 	.sx-card-clickable:hover {
-		transform: translateY(-2px);
-		border-color: var(--sx-color-cyan-active);
-		box-shadow: var(--sx-shadow-md);
+		transform: translateY(-3px);
+		border-color: rgba(255, 107, 53, 0.18);
+
+		/* Hover lifts the panel — deeper extrusion + vermilion glow */
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.04),
+			0 1px 0 0 rgba(0, 0, 0, 0.2),
+			0 2px 0 0 rgba(0, 0, 0, 0.15),
+			0 3px 0 0 rgba(0, 0, 0, 0.1),
+			0 8px 20px -4px rgba(0, 0, 0, 0.4),
+			0 0 28px -8px rgba(255, 107, 53, 0.1);
+	}
+
+	.sx-card-clickable:active {
+		transform: translateY(0);
+		box-shadow:
+			0 1px 0 0 rgba(0, 0, 0, 0.15),
+			0 2px 4px -1px rgba(0, 0, 0, 0.2);
+		transition: transform 60ms ease, box-shadow 60ms ease;
 	}
 
 	.sx-card-clickable:focus-visible {
-		outline: 2px solid var(--sx-color-cyan);
+		outline: 2px solid var(--sx-color-primary);
 		outline-offset: 2px;
 	}
 
+	/* ========================================
+	   ACCENT — Left colored border with tinted extrusion
+	   ======================================== */
+
+	.sx-card-accent {
+		border-left: 3px solid var(--sx-color-border-strong);
+	}
+
+	/* Primary — vermilion */
+	.sx-card-accent-primary {
+		border-left-color: var(--sx-color-primary);
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.03),
+			0 1px 0 0 rgba(200, 85, 30, 0.2),
+			0 2px 0 0 rgba(160, 65, 20, 0.12),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3),
+			0 0 8px -4px rgba(255, 107, 53, 0.1);
+	}
+
+	/* Success — green */
+	.sx-card-accent-success {
+		border-left-color: var(--sx-color-green);
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.03),
+			0 1px 0 0 rgba(34, 120, 69, 0.2),
+			0 2px 0 0 rgba(34, 120, 69, 0.12),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3),
+			0 0 8px -4px rgba(34, 197, 94, 0.1);
+	}
+
+	/* Warning — brass */
+	.sx-card-accent-warning {
+		border-left-color: var(--sx-color-secondary);
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.03),
+			0 1px 0 0 rgba(160, 134, 62, 0.2),
+			0 2px 0 0 rgba(130, 108, 50, 0.12),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3),
+			0 0 8px -4px rgba(200, 168, 78, 0.1);
+	}
+
+	/* Error — crimson */
+	.sx-card-accent-error {
+		border-left-color: var(--sx-color-red);
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.03),
+			0 1px 0 0 rgba(180, 30, 30, 0.2),
+			0 2px 0 0 rgba(140, 20, 20, 0.12),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3),
+			0 0 8px -4px rgba(220, 38, 38, 0.1);
+	}
+
+	/* Info — teal */
+	.sx-card-accent-info {
+		border-left-color: var(--sx-color-teal);
+		box-shadow:
+			0 1px 0 0 rgba(255, 255, 255, 0.03),
+			0 1px 0 0 rgba(30, 80, 80, 0.2),
+			0 2px 0 0 rgba(30, 80, 80, 0.12),
+			0 4px 8px -2px rgba(0, 0, 0, 0.3),
+			0 0 8px -4px rgba(61, 139, 139, 0.1);
+	}
+
+	/* Neutral */
+	.sx-card-accent-neutral {
+		border-left-color: var(--sx-color-border-strong);
+	}
+
 	@media (prefers-reduced-motion: reduce) {
 		.sx-card {
 			transition: none;
@@ -137,6 +250,10 @@ const currentPadding = $derived(paddingValues[padding]);
 		.sx-card-clickable:hover {
 			transform: none;
 		}
+
+		.sx-card-clickable:active {
+			transform: none;
+		}
 	}
 
 	.sx-card-padding-sm {
@@ -155,13 +272,19 @@ const currentPadding = $derived(paddingValues[padding]);
 		border-bottom: 1px solid var(--sx-color-border);
 		font-weight: 700;
 		letter-spacing: 0.3px;
+		position: relative;
+		z-index: 1;
 	}
 
 	.sx-card-footer {
 		border-top: 1px solid var(--sx-color-border);
+		position: relative;
+		z-index: 1;
 	}
 
 	.sx-card-content {
 		display: block;
+		position: relative;
+		z-index: 1;
 	}
 </style>

package/dist/layout/Card/Card.svelte.d.ts

@@ -1,7 +1,10 @@
 import type { Snippet } from 'svelte';
 type CardPadding = 'sm' | 'md' | 'lg';
+type CardAccent = 'none' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
 interface Props {
     padding?: CardPadding;
+    /** Left accent border color */
+    accent?: CardAccent;
     as?: 'div' | 'article' | 'section';
     id?: string;
     ariaLabelledby?: string;
@@ -16,7 +19,7 @@ interface Props {
 /**
  * Card
  *
- * Neo-Brutalist Dark — Glassmorphic panel with frosted background, subtle borders.
+ * INFRARED — Glassmorphic panel with frosted background, subtle borders.
  * Optional header/footer, semantic element support.
  *
  * @example

package/dist/layout/Card/Card.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../src/layout/Card/Card.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,UAAU,KAAK;IACd,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAqED;;;;;;;;;GASG;AACH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../src/layout/Card/Card.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtC,KAAK,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAE5F,UAAU,KAAK;IACd,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,EAAE,CAAC,EAAE,KAAK,GAAG,SAAS,GAAG,SAAS,CAAC;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAwED;;;;;;;;;GASG;AACH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/layout/Container/Container.svelte

@@ -1,7 +1,7 @@
 <!--
   @component Container
 
-  Neo-Brutalist Dark — Responsive layout wrapper. Max-width, padding, optional centering.
+  INFRARED — Responsive layout wrapper. Max-width, padding, optional centering.
   Pure layout utility; supports semantic elements.
 -->
 <script lang="ts">

package/dist/layout/Container/Container.svelte.d.ts

@@ -16,7 +16,7 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
 /**
  * Container
  *
- * Neo-Brutalist Dark — Responsive layout wrapper. Max-width, padding, optional centering.
+ * INFRARED — Responsive layout wrapper. Max-width, padding, optional centering.
  * Pure layout utility; supports semantic elements.
  */
 declare const Container: import("svelte").Component<Props, {}, "">;