@salmexio/ui 0.2.0 → 0.3.0

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

@@ -0,0 +1,68 @@
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectGroup {
+    label: string;
+    options: SelectOption[];
+}
+type SelectSize = 'sm' | 'md' | 'lg';
+interface Props {
+    /** Visible label (required for a11y) */
+    label: string;
+    /** Flat list of options */
+    options?: SelectOption[];
+    /** Grouped options (mutually exclusive with options) */
+    groups?: SelectGroup[];
+    /** Selected value (single mode) */
+    value?: string;
+    /** Selected values (multi mode) */
+    values?: string[];
+    /** Enable multi-select with checkboxes */
+    multiple?: boolean;
+    /** Placeholder when nothing selected */
+    placeholder?: string;
+    /** Error message */
+    error?: string;
+    /** Hint text */
+    hint?: string;
+    /** Size variant */
+    size?: SelectSize;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Required field */
+    required?: boolean;
+    /** Hide label visually (still accessible) */
+    hideLabel?: boolean;
+    /** Additional CSS class */
+    class?: string;
+    /** Called when value changes (single mode) */
+    onchange?: (value: string) => void;
+    /** Called when values change (multi mode) */
+    onchangemulti?: (values: string[]) => void;
+    /** Test ID */
+    testId?: string;
+}
+/**
+ * Select
+ *
+ * Win2K × Basquiat — Dropdown select with sunken trigger field, raised panel,
+ * keyboard-first navigation, type-ahead search, option groups, and multi-select.
+ *
+ * Follows WAI-ARIA APG Select-Only Combobox pattern: DOM focus stays on
+ * the trigger button; visual focus in the listbox is communicated via
+ * aria-activedescendant. The dropdown is portaled to document.body via
+ * $effect to escape transforms/overflow on ancestor elements.
+ *
+ * @example
+ * <Select
+ *   label="Country"
+ *   options={[{ value: 'us', label: 'United States' }, { value: 'uk', label: 'United Kingdom' }]}
+ *   bind:value={selectedCountry}
+ * />
+ */
+declare const Select: import("svelte").Component<Props, {}, "value" | "values">;
+type Select = ReturnType<typeof Select>;
+export default Select;
+//# sourceMappingURL=Select.svelte.d.ts.map

package/dist/forms/Select/Select.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/Select/Select.svelte.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,YAAY;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;CACxB;AAQD,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,UAAU,KAAK;IACd,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,wDAAwD;IACxD,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,6CAA6C;IAC7C,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC3C,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAudD;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,MAAM,2DAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/forms/Select/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Select } from './Select.svelte';
+export type { SelectOption, SelectGroup } from './Select.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/forms/Select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/forms/Select/index.js

@@ -0,0 +1 @@
+export { default as Select } from './Select.svelte';

package/dist/forms/index.d.ts

@@ -1,3 +1,5 @@
 export { TextInput } from './TextInput/index.js';
 export { Checkbox } from './Checkbox/index.js';
+export { Select } from './Select/index.js';
+export type { SelectOption, SelectGroup } from './Select/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/forms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/forms/index.js

@@ -1,2 +1,3 @@
 export { TextInput } from './TextInput/index.js';
 export { Checkbox } from './Checkbox/index.js';
+export { Select } from './Select/index.js';

package/dist/layout/Card/Card.svelte

@@ -2,26 +2,20 @@
   @component Card
 
   Win2K × Basquiat — Panel with canvas background, bold 3px borders, flat shadow.
-  Optional header/footer, interactive mode, semantic element support.
+  Optional header/footer, semantic element support.
 
   @example
   <Card><p>Content</p></Card>
-  <Card variant="accent" accentColor="success" header={...} footer={...} />
+  <Card header={headerSnippet} footer={footerSnippet}>Body</Card>
 -->
 <script lang="ts">
 import type { Snippet } from 'svelte';
 import { cn } from '../../utils/cn.js';
 
-type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
-type CardVariant = 'default' | 'elevated' | 'outlined' | 'accent';
-type AccentColor = 'primary' | 'success' | 'warning' | 'error' | 'info';
+type CardPadding = 'sm' | 'md' | 'lg';
 
 interface Props {
-	variant?: CardVariant;
 	padding?: CardPadding;
-	accentColor?: AccentColor;
-	interactive?: boolean;
-	asButton?: boolean;
 	as?: 'div' | 'article' | 'section';
 	id?: string;
 	ariaLabelledby?: string;
@@ -35,11 +29,7 @@ interface Props {
 }
 
 let {
-	variant = 'default',
 	padding = 'md',
-	accentColor = 'primary',
-	interactive = false,
-	asButton = false,
 	as = 'div',
 	id,
 	ariaLabelledby,
@@ -53,22 +43,12 @@ let {
 }: Props = $props();
 
 const paddingValues: Record<CardPadding, string> = {
-	none: '0',
 	sm: 'var(--salmex-space-4)',
 	md: 'var(--salmex-space-6)',
-	lg: 'var(--salmex-space-8)',
-	xl: 'var(--salmex-space-10)'
+	lg: 'var(--salmex-space-8)'
 };
 
 const currentPadding = $derived(paddingValues[padding]);
-
-function handleKeydown(e: KeyboardEvent) {
-	if (e.key === 'Enter' || e.key === ' ') {
-		e.preventDefault();
-		(e.currentTarget as HTMLElement).click();
-	}
-	onkeydown?.(e);
-}
 </script>
 
 {#snippet cardContent()}
@@ -95,86 +75,34 @@ function handleKeydown(e: KeyboardEvent) {
 	{/if}
 {/snippet}
 
-{#if asButton}
-	<button
-		type="button"
-		{id}
-		class={cn(
-			'salmex-card',
-			`salmex-card-${variant}`,
-			`salmex-card-padding-${padding}`,
-			interactive && 'salmex-card-interactive',
-			variant === 'accent' && `salmex-card-accent-${accentColor}`,
-			className
-		)}
-		aria-labelledby={ariaLabelledby}
-		data-testid={testId}
-		onclick={onclick}
-		onkeydown={handleKeydown}
-	>
-		{@render cardContent()}
-	</button>
-{:else if interactive || onclick}
-	<svelte:element
-		this={as}
-		{id}
-		class={cn(
-			'salmex-card',
-			`salmex-card-${variant}`,
-			`salmex-card-padding-${padding}`,
-			'salmex-card-interactive',
-			variant === 'accent' && `salmex-card-accent-${accentColor}`,
-			className
-		)}
-		role="button"
-		tabindex={0}
-		aria-labelledby={ariaLabelledby}
-		data-testid={testId}
-		onclick={onclick}
-		onkeydown={handleKeydown}
-	>
-		{@render cardContent()}
-	</svelte:element>
-{:else}
-	<svelte:element
-		this={as}
-		{id}
-		class={cn(
-			'salmex-card',
-			`salmex-card-${variant}`,
-			`salmex-card-padding-${padding}`,
-			variant === 'accent' && `salmex-card-accent-${accentColor}`,
-			className
-		)}
-		aria-labelledby={ariaLabelledby}
-		data-testid={testId}
-	>
-		{@render cardContent()}
-	</svelte:element>
-{/if}
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<svelte:element
+	this={as}
+	{id}
+	class={cn(
+		'salmex-card',
+		`salmex-card-padding-${padding}`,
+		className
+	)}
+	aria-labelledby={ariaLabelledby}
+	data-testid={testId}
+	{onclick}
+	{onkeydown}
+>
+	{@render cardContent()}
+</svelte:element>
 
 <style>
 	.salmex-card {
 		position: relative;
 		overflow: hidden;
 		border-radius: var(--salmex-radius-none);
-		transition: transform var(--salmex-transition-base), box-shadow var(--salmex-transition-base);
+		background: rgb(var(--salmex-window-surface));
 		/* Bold 3px border, flat shadow — Win2K × Basquiat */
 		border: 3px solid rgb(var(--salmex-border-dark));
 		box-shadow: var(--salmex-shadow-lg);
 	}
 
-	button.salmex-card {
-		width: 100%;
-		text-align: left;
-		font: inherit;
-		cursor: pointer;
-	}
-
-	.salmex-card-padding-none {
-		padding: 0;
-	}
-
 	.salmex-card-padding-sm {
 		padding: var(--salmex-space-4);
 	}
@@ -187,73 +115,6 @@ function handleKeydown(e: KeyboardEvent) {
 		padding: var(--salmex-space-8);
 	}
 
-	.salmex-card-padding-xl {
-		padding: var(--salmex-space-10);
-	}
-
-	/* Default — canvas/paper surface */
-	.salmex-card-default {
-		background: rgb(var(--salmex-window-surface));
-	}
-
-	.salmex-card-elevated {
-		background: rgb(var(--salmex-bg-primary));
-		box-shadow: var(--salmex-shadow-lg), 0 6px 0 rgb(0 0 0 / 0.15);
-	}
-
-	.salmex-card-outlined {
-		background: transparent;
-		border-width: 3px;
-	}
-
-	.salmex-card-accent-primary,
-	.salmex-card-accent-success,
-	.salmex-card-accent-warning,
-	.salmex-card-accent-error,
-	.salmex-card-accent-info {
-		border-left-width: 6px;
-		background: rgb(var(--salmex-window-surface));
-	}
-
-	.salmex-card-accent-primary {
-		border-left-color: rgb(var(--salmex-electric-blue));
-	}
-
-	.salmex-card-accent-success {
-		border-left-color: rgb(var(--salmex-urban-green));
-	}
-
-	.salmex-card-accent-warning {
-		border-left-color: rgb(var(--salmex-spray-orange));
-	}
-
-	.salmex-card-accent-error {
-		border-left-color: rgb(var(--salmex-street-red));
-	}
-
-	.salmex-card-accent-info {
-		border-left-color: rgb(var(--salmex-info));
-	}
-
-	.salmex-card-interactive:hover {
-		transform: translateY(-2px);
-		box-shadow: 5px 7px 0 rgb(0 0 0 / 0.35);
-	}
-
-	.salmex-card-interactive:active {
-		transform: translate(2px, 2px);
-		box-shadow: 3px 3px 0 rgb(0 0 0 / 0.4);
-	}
-
-	.salmex-card-interactive:focus-visible {
-		outline: none;
-		box-shadow: 5px 7px 0 rgb(0 0 0 / 0.35), 0 0 0 2px rgb(var(--salmex-midnight-black)), 0 0 0 5px rgb(var(--salmex-crown-yellow));
-	}
-
-	:global([data-theme='dark']) .salmex-card-interactive:focus-visible {
-		box-shadow: 5px 7px 0 rgb(0 0 0 / 0.35), 0 0 0 3px rgb(var(--salmex-crown-yellow));
-	}
-
 	.salmex-card-header {
 		border-bottom: 2px solid rgb(var(--salmex-border-default));
 		font-weight: 700;
@@ -269,15 +130,14 @@ function handleKeydown(e: KeyboardEvent) {
 		display: block;
 	}
 
-	@media (prefers-reduced-motion: reduce) {
-		.salmex-card {
-			transition: none;
-		}
-		.salmex-card-interactive:hover {
-			transform: none;
-		}
-		.salmex-card-interactive:active {
-			transform: none;
+	/* Dark mode — heavier shadow (flat shadow on near-black bg is invisible) */
+	:global([data-theme='dark']) .salmex-card {
+		box-shadow: 5px 5px 0 rgb(0 0 0 / 0.7);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:global(:root:not([data-theme='light'])) .salmex-card {
+			box-shadow: 5px 5px 0 rgb(0 0 0 / 0.7);
 		}
 	}
 </style>

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

@@ -1,13 +1,7 @@
 import type { Snippet } from 'svelte';
-type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
-type CardVariant = 'default' | 'elevated' | 'outlined' | 'accent';
-type AccentColor = 'primary' | 'success' | 'warning' | 'error' | 'info';
+type CardPadding = 'sm' | 'md' | 'lg';
 interface Props {
-    variant?: CardVariant;
     padding?: CardPadding;
-    accentColor?: AccentColor;
-    interactive?: boolean;
-    asButton?: boolean;
     as?: 'div' | 'article' | 'section';
     id?: string;
     ariaLabelledby?: string;
@@ -23,11 +17,11 @@ interface Props {
  * Card
  *
  * Win2K × Basquiat — Panel with canvas background, bold 3px borders, flat shadow.
- * Optional header/footer, interactive mode, semantic element support.
+ * Optional header/footer, semantic element support.
  *
  * @example
  * <Card><p>Content</p></Card>
- * <Card variant="accent" accentColor="success" header={...} footer={...} />
+ * <Card header={headerSnippet} footer={footerSnippet}>Body</Card>
  */
 declare const Card: import("svelte").Component<Props, {}, "">;
 type Card = ReturnType<typeof Card>;

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,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACtD,KAAK,WAAW,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;AAClE,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAExE,UAAU,KAAK;IACd,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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;AAuGD;;;;;;;;;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;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;AA8DD;;;;;;;;;GASG;AACH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}