@sekiui/elements 0.0.49 → 0.0.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/index.js +3 -3
- package/dist/cdn/{p-BLeUUc2-.js → p-bMBhrs0a.js} +29 -4
- package/dist/cdn/seki-button.js +2 -2
- package/dist/cdn/seki-field-description.js +2 -2
- package/dist/cdn/seki-field-error.js +2 -2
- package/dist/cdn/seki-field-group.js +2 -2
- package/dist/cdn/seki-field-label.js +2 -2
- package/dist/cdn/seki-field-legend.js +2 -2
- package/dist/cdn/seki-field.js +2 -2
- package/dist/cdn/seki-fieldset.js +2 -2
- package/dist/cdn/seki-input.js +2 -2
- package/dist/cdn/seki-select-content.d.ts +11 -0
- package/dist/cdn/seki-select-content.js +94 -0
- package/dist/cdn/seki-select-group.d.ts +11 -0
- package/dist/cdn/seki-select-group.js +42 -0
- package/dist/cdn/seki-select-option.d.ts +11 -0
- package/dist/cdn/seki-select-option.js +111 -0
- package/dist/cdn/seki-select-trigger.d.ts +11 -0
- package/dist/cdn/seki-select-trigger.js +149 -0
- package/dist/cdn/seki-select.d.ts +11 -0
- package/dist/cdn/seki-select.js +416 -0
- package/dist/cdn/seki-skeleton.js +3 -3
- package/dist/cjs/{index-BxD7Xe36.js → index-Dd6_-KaR.js} +29 -4
- package/dist/cjs/index.cjs.js +2 -2
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/seki-button.cjs.entry.js +2 -2
- package/dist/cjs/seki-field-description.cjs.entry.js +2 -2
- package/dist/cjs/seki-field-error.cjs.entry.js +2 -2
- package/dist/cjs/seki-field-group.cjs.entry.js +2 -2
- package/dist/cjs/seki-field-label.cjs.entry.js +2 -2
- package/dist/cjs/seki-field-legend.cjs.entry.js +2 -2
- package/dist/cjs/seki-field.cjs.entry.js +2 -2
- package/dist/cjs/seki-fieldset.cjs.entry.js +2 -2
- package/dist/cjs/seki-input.cjs.entry.js +2 -2
- package/dist/cjs/seki-select-content.cjs.entry.js +72 -0
- package/dist/cjs/seki-select-group.cjs.entry.js +21 -0
- package/dist/cjs/seki-select-option.cjs.entry.js +88 -0
- package/dist/cjs/seki-select-trigger.cjs.entry.js +128 -0
- package/dist/cjs/seki-select.cjs.entry.js +364 -0
- package/dist/cjs/seki-skeleton.cjs.entry.js +3 -3
- package/dist/cjs/seki-switch.cjs.entry.js +1 -1
- package/dist/cjs/sekiui.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +5 -0
- package/dist/collection/components/button/seki-button.css +31 -0
- package/dist/collection/components/field/seki-field.css +31 -0
- package/dist/collection/components/field-description/seki-field-description.css +36 -3
- package/dist/collection/components/field-error/seki-field-error.css +36 -4
- package/dist/collection/components/field-group/seki-field-group.css +31 -0
- package/dist/collection/components/field-label/seki-field-label.css +36 -4
- package/dist/collection/components/field-legend/seki-field-legend.css +36 -4
- package/dist/collection/components/fieldset/seki-fieldset.css +31 -0
- package/dist/collection/components/input/seki-input.css +37 -3
- package/dist/collection/components/select/seki-select.css +441 -0
- package/dist/collection/components/select/seki-select.js +865 -0
- package/dist/collection/components/select-content/seki-select-content.css +434 -0
- package/dist/collection/components/select-content/seki-select-content.js +112 -0
- package/dist/collection/components/select-group/seki-select-group.css +428 -0
- package/dist/collection/components/select-group/seki-select-group.js +51 -0
- package/dist/collection/components/select-option/seki-select-option.css +458 -0
- package/dist/collection/components/select-option/seki-select-option.js +188 -0
- package/dist/collection/components/select-trigger/seki-select-trigger.css +514 -0
- package/dist/collection/components/select-trigger/seki-select-trigger.js +140 -0
- package/dist/collection/components/skeleton/seki-skeleton.css +31 -0
- package/dist/collection/components/skeleton/seki-skeleton.js +1 -1
- package/dist/collection/components/switch/seki-switch.css +31 -0
- package/dist/collection/utils/select/index.js +6 -0
- package/dist/collection/utils/select/select-context.js +38 -0
- package/dist/collection/utils/select/types.js +1 -0
- package/dist/components/index.js +3 -3
- package/dist/components/{p-BFmmBW7R.js → p-QhPshhKB.js} +29 -4
- package/dist/components/seki-button.js +2 -2
- package/dist/components/seki-field-description.js +2 -2
- package/dist/components/seki-field-error.js +2 -2
- package/dist/components/seki-field-group.js +2 -2
- package/dist/components/seki-field-label.js +2 -2
- package/dist/components/seki-field-legend.js +2 -2
- package/dist/components/seki-field.js +2 -2
- package/dist/components/seki-fieldset.js +2 -2
- package/dist/components/seki-input.js +2 -2
- package/dist/components/seki-select-content.d.ts +11 -0
- package/dist/components/seki-select-content.js +94 -0
- package/dist/components/seki-select-group.d.ts +11 -0
- package/dist/components/seki-select-group.js +42 -0
- package/dist/components/seki-select-option.d.ts +11 -0
- package/dist/components/seki-select-option.js +111 -0
- package/dist/components/seki-select-trigger.d.ts +11 -0
- package/dist/components/seki-select-trigger.js +149 -0
- package/dist/components/seki-select.d.ts +11 -0
- package/dist/components/seki-select.js +416 -0
- package/dist/components/seki-skeleton.js +3 -3
- package/dist/esm/{index-ByHohxc0.js → index-CuXbV_yz.js} +29 -4
- package/dist/esm/index.js +2 -2
- package/dist/esm/loader.js +3 -3
- package/dist/esm/seki-button.entry.js +2 -2
- package/dist/esm/seki-field-description.entry.js +2 -2
- package/dist/esm/seki-field-error.entry.js +2 -2
- package/dist/esm/seki-field-group.entry.js +2 -2
- package/dist/esm/seki-field-label.entry.js +2 -2
- package/dist/esm/seki-field-legend.entry.js +2 -2
- package/dist/esm/seki-field.entry.js +2 -2
- package/dist/esm/seki-fieldset.entry.js +2 -2
- package/dist/esm/seki-input.entry.js +2 -2
- package/dist/esm/seki-select-content.entry.js +70 -0
- package/dist/esm/seki-select-group.entry.js +19 -0
- package/dist/esm/seki-select-option.entry.js +86 -0
- package/dist/esm/seki-select-trigger.entry.js +126 -0
- package/dist/esm/seki-select.entry.js +362 -0
- package/dist/esm/seki-skeleton.entry.js +3 -3
- package/dist/esm/seki-switch.entry.js +1 -1
- package/dist/esm/sekiui.js +3 -3
- package/dist/sekiui/index.esm.js +1 -1
- package/dist/sekiui/{p-bc921daa.entry.js → p-0e89720a.entry.js} +1 -1
- package/dist/sekiui/{p-1b1a5e38.entry.js → p-0f64a7dd.entry.js} +1 -1
- package/dist/sekiui/p-20eb85c9.entry.js +1 -0
- package/dist/sekiui/{p-128cfe90.entry.js → p-23a61342.entry.js} +1 -1
- package/dist/sekiui/{p-459bb637.entry.js → p-4eef5a47.entry.js} +1 -1
- package/dist/sekiui/{p-d034b071.entry.js → p-5852ad8e.entry.js} +1 -1
- package/dist/sekiui/{p-1c923d08.entry.js → p-62236175.entry.js} +1 -1
- package/dist/sekiui/p-6e238adf.entry.js +1 -0
- package/dist/sekiui/{p-2ecf7587.entry.js → p-93d70750.entry.js} +1 -1
- package/dist/sekiui/{p-70281e83.entry.js → p-9fe07f6e.entry.js} +1 -1
- package/dist/sekiui/p-CuXbV_yz.js +2 -0
- package/dist/sekiui/{p-51f2af94.entry.js → p-aad78e67.entry.js} +1 -1
- package/dist/sekiui/{p-281803dd.entry.js → p-c878de6d.entry.js} +1 -1
- package/dist/sekiui/p-c93edddc.entry.js +1 -0
- package/dist/sekiui/p-d7492f49.entry.js +1 -0
- package/dist/sekiui/{p-3b2d3e96.entry.js → p-eb19f073.entry.js} +1 -1
- package/dist/sekiui/p-eefbc037.entry.js +1 -0
- package/dist/sekiui/sekiui.css +1 -1
- package/dist/sekiui/sekiui.esm.js +1 -1
- package/dist/types/components/select/seki-select.d.ts +92 -0
- package/dist/types/components/select-content/seki-select-content.d.ts +15 -0
- package/dist/types/components/select-group/seki-select-group.d.ts +10 -0
- package/dist/types/components/select-option/seki-select-option.d.ts +30 -0
- package/dist/types/components/select-trigger/seki-select-trigger.d.ts +21 -0
- package/dist/types/components.d.ts +314 -0
- package/dist/types/utils/select/index.d.ts +6 -0
- package/dist/types/utils/select/select-context.d.ts +19 -0
- package/dist/types/utils/select/types.d.ts +109 -0
- package/package.json +4 -1
- package/dist/sekiui/p-ByHohxc0.js +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as n,h as e,H as i,a as s}from"./p-ByHohxc0.js";const r=class{constructor(e){n(this,e),this.orientation="vertical",this.invalid=!1}hasMultipleControls(){const n=this.el.querySelectorAll(":not([slot])");return Array.from(n).filter((n=>{if(n.nodeType!==Node.ELEMENT_NODE)return!1;const e=n.tagName.toLowerCase();return["input","select","textarea","button"].includes(e)||e.startsWith("seki-")})).length>1}render(){const n=this.hasMultipleControls();return e(i,{key:"1583bccc0f87c5c454f73da9d6d8c2729fb4ca0e","data-orientation":this.orientation,"data-invalid":this.invalid?"":void 0,role:n?"group":void 0},e("div",{key:"d463dec6a4858ab4dee8312418d2d9bc0a629bdb",class:"field"},e("div",{key:"a73cceaea5c25151f3ea42a9bfd6b160d886285c",class:"field-label"},e("slot",{key:"b2e5596bf6e3d225611646cdeb1bb885244ef486",name:"label"})),e("div",{key:"9cb6521cf8fd82302bfb0cab5db861ed94f0540d",class:"field-control"},e("slot",{key:"965694631bb131a558e7d7d62bc91f35c4081adb"})),e("div",{key:"aa247a7d7e6c076f4113cf4c71230addee341bda",class:"field-description"},e("slot",{key:"eb7ab7001a1070700aa8d3be8eba2d6ccdcc633b",name:"description"})),e("div",{key:"9dc8970c328b1b24ee7814e73673188c2165252f",class:"field-error"},e("slot",{key:"243f0b2da99821057a374cb2134c29eb7ed2e3e1",name:"error"}))))}get el(){return s(this)}};r.style='/**\n * SekiUI Design Tokens - Index\n * Aggregates all design token files into a single entry point\n *\n * Import this file to get access to all design tokens:\n * @import \'../tokens/index.css\';\n */\n\n/**\n * SekiUI Design Tokens - Colors\n * Based on shadcn/ui color system\n */\n\n/* =============================================================================\n PRIMITIVE COLOR TOKENS (Layer 1: Raw Values)\n ============================================================================= */\n\n:host {\n /* Neutral Scale (50-950) - shadcn/ui inspired */\n --seki-neutral-50: hsl(0, 0%, 98%);\n --seki-neutral-100: hsl(0, 0%, 96.1%);\n --seki-neutral-200: hsl(0, 0%, 89.8%);\n --seki-neutral-300: hsl(0, 0%, 83.1%);\n --seki-neutral-400: hsl(0, 0%, 63.9%);\n --seki-neutral-500: hsl(0, 0%, 45.1%);\n --seki-neutral-600: hsl(0, 0%, 32.2%);\n --seki-neutral-700: hsl(0, 0%, 25.1%);\n --seki-neutral-800: hsl(0, 0%, 14.9%);\n --seki-neutral-900: hsl(0, 0%, 9%);\n --seki-neutral-950: hsl(0, 0%, 3.9%);\n\n /* Primary/Accent Scale (50-950) */\n --seki-primary-50: hsl(210, 100%, 97%);\n --seki-primary-100: hsl(210, 95%, 93%);\n --seki-primary-200: hsl(210, 95%, 85%);\n --seki-primary-300: hsl(210, 90%, 73%);\n --seki-primary-400: hsl(210, 85%, 58%);\n --seki-primary-500: hsl(210, 80%, 48%);\n --seki-primary-600: hsl(210, 75%, 40%);\n --seki-primary-700: hsl(210, 70%, 32%);\n --seki-primary-800: hsl(210, 65%, 25%);\n --seki-primary-900: hsl(210, 60%, 18%);\n --seki-primary-950: hsl(210, 55%, 10%);\n\n /* Semantic Color Primitives */\n --seki-success-500: hsl(142, 71%, 45%);\n --seki-success-600: hsl(142, 71%, 35%);\n --seki-warning-500: hsl(38, 92%, 50%);\n --seki-warning-600: hsl(38, 92%, 40%);\n --seki-destructive-500: hsl(0, 84.2%, 60.2%);\n --seki-destructive-600: hsl(0, 72%, 41%);\n}\n\n/* =============================================================================\n SEMANTIC TOKENS (Layer 2: shadcn/ui Style)\n ============================================================================= */\n\n:host {\n /* Base */\n --seki-background: hsl(0, 0%, 100%);\n --seki-foreground: hsl(0, 0%, 3.9%);\n\n /* Muted */\n --seki-muted: hsl(0, 0%, 96.1%);\n --seki-muted-foreground: hsl(0, 0%, 45.1%);\n\n /* Card */\n --seki-card: hsl(0, 0%, 100%);\n --seki-card-foreground: hsl(0, 0%, 3.9%);\n\n /* Popover */\n --seki-popover: hsl(0, 0%, 100%);\n --seki-popover-foreground: hsl(0, 0%, 3.9%);\n\n /* Border */\n --seki-border: hsl(0, 0%, 89.8%);\n --seki-input: hsl(0, 0%, 89.8%);\n\n /* Primary */\n --seki-primary: hsl(0, 0%, 9%);\n --seki-primary-foreground: hsl(0, 0%, 98%);\n\n /* Secondary */\n --seki-secondary: hsl(0, 0%, 96.1%);\n --seki-secondary-foreground: hsl(0, 0%, 9%);\n\n /* Accent */\n --seki-accent: hsl(0, 0%, 96.1%);\n --seki-accent-foreground: hsl(0, 0%, 9%);\n\n /* Destructive */\n --seki-destructive: hsl(0, 84.2%, 60.2%);\n --seki-destructive-foreground: hsl(0, 0%, 98%);\n\n /* Ring */\n --seki-ring: hsl(0, 0%, 3.9%);\n\n /* Legacy aliases for backward compatibility */\n --seki-bg-primary: var(--seki-background);\n --seki-bg-secondary: var(--seki-muted);\n --seki-bg-tertiary: var(--seki-accent);\n --seki-text-primary: var(--seki-foreground);\n --seki-text-secondary: var(--seki-muted-foreground);\n --seki-text-tertiary: var(--seki-neutral-400);\n --seki-border-default: var(--seki-border);\n --seki-border-emphasis: var(--seki-neutral-300);\n}\n\n/* Dark Mode Semantic Tokens */\n:host([data-theme=\'dark\']) {\n /* Base */\n --seki-background: hsl(0, 0%, 3.9%);\n --seki-foreground: hsl(0, 0%, 98%);\n\n /* Muted */\n --seki-muted: hsl(0, 0%, 14.9%);\n --seki-muted-foreground: hsl(0, 0%, 63.9%);\n\n /* Card */\n --seki-card: hsl(0, 0%, 3.9%);\n --seki-card-foreground: hsl(0, 0%, 98%);\n\n /* Popover */\n --seki-popover: hsl(0, 0%, 3.9%);\n --seki-popover-foreground: hsl(0, 0%, 98%);\n\n /* Border */\n --seki-border: hsl(0, 0%, 14.9%);\n --seki-input: hsl(0, 0%, 14.9%);\n\n /* Primary */\n --seki-primary: hsl(0, 0%, 98%);\n --seki-primary-foreground: hsl(0, 0%, 9%);\n\n /* Secondary */\n --seki-secondary: hsl(0, 0%, 14.9%);\n --seki-secondary-foreground: hsl(0, 0%, 98%);\n\n /* Accent */\n --seki-accent: hsl(0, 0%, 14.9%);\n --seki-accent-foreground: hsl(0, 0%, 98%);\n\n /* Destructive */\n --seki-destructive: hsl(0, 62.8%, 30.6%);\n --seki-destructive-foreground: hsl(0, 0%, 98%);\n\n /* Ring */\n --seki-ring: hsl(0, 0%, 83.1%);\n\n /* Legacy aliases for backward compatibility */\n --seki-bg-primary: var(--seki-background);\n --seki-bg-secondary: var(--seki-muted);\n --seki-bg-tertiary: var(--seki-accent);\n --seki-text-primary: var(--seki-foreground);\n --seki-text-secondary: var(--seki-muted-foreground);\n --seki-text-tertiary: var(--seki-neutral-600);\n --seki-border-default: var(--seki-border);\n --seki-border-emphasis: var(--seki-neutral-700);\n\n /* Button overrides for dark mode */\n --seki-button-primary-hover-bg: hsl(0, 0%, 98%, 0.9);\n --seki-button-secondary-hover-bg: hsl(0, 0%, 14.9%, 0.8);\n}\n\n/* =============================================================================\n COMPONENT TOKENS (Layer 3: Button-Specific - shadcn/ui Style)\n ============================================================================= */\n\n:host {\n /* Button Variant: Primary (default in shadcn/ui) */\n --seki-button-primary-bg: var(--seki-primary);\n --seki-button-primary-text: var(--seki-primary-foreground);\n --seki-button-primary-border: transparent;\n --seki-button-primary-hover-bg: hsl(0, 0%, 9%, 0.9);\n --seki-button-primary-hover-text: var(--seki-primary-foreground);\n --seki-button-primary-hover-border: transparent;\n\n /* Button Variant: Secondary */\n --seki-button-secondary-bg: var(--seki-secondary);\n --seki-button-secondary-text: var(--seki-secondary-foreground);\n --seki-button-secondary-border: transparent;\n --seki-button-secondary-hover-bg: hsl(0, 0%, 96.1%, 0.8);\n --seki-button-secondary-hover-text: var(--seki-secondary-foreground);\n --seki-button-secondary-hover-border: transparent;\n\n /* Button Variant: Outline */\n --seki-button-outline-bg: transparent;\n --seki-button-outline-text: var(--seki-foreground);\n --seki-button-outline-border: var(--seki-input);\n --seki-button-outline-hover-bg: var(--seki-accent);\n --seki-button-outline-hover-text: var(--seki-accent-foreground);\n --seki-button-outline-hover-border: var(--seki-input);\n\n /* Button Variant: Ghost */\n --seki-button-ghost-bg: transparent;\n --seki-button-ghost-text: var(--seki-foreground);\n --seki-button-ghost-border: transparent;\n --seki-button-ghost-hover-bg: var(--seki-accent);\n --seki-button-ghost-hover-text: var(--seki-accent-foreground);\n --seki-button-ghost-hover-border: transparent;\n\n /* Button Variant: Destructive */\n --seki-button-destructive-bg: var(--seki-destructive);\n --seki-button-destructive-text: var(--seki-destructive-foreground);\n --seki-button-destructive-border: transparent;\n --seki-button-destructive-hover-bg: hsl(0, 84.2%, 60.2%, 0.9);\n --seki-button-destructive-hover-border: transparent;\n\n /* Button Sizing: Small */\n --seki-button-sm-padding-x: var(--seki-spacing-3, 0.75rem);\n --seki-button-sm-padding-y: 0.375rem;\n --seki-button-sm-font-size: var(--seki-text-sm, 0.875rem);\n --seki-button-sm-height: 2.25rem; /* Updated from 2rem to match shadcn (36px) */\n\n /* Button Sizing: Medium (default) */\n --seki-button-md-padding-x: var(--seki-spacing-4, 1rem);\n --seki-button-md-padding-y: var(--seki-spacing-2, 0.5rem);\n --seki-button-md-font-size: var(--seki-text-base, 1rem);\n --seki-button-md-height: 2.5rem;\n\n /* Button Sizing: Large */\n --seki-button-lg-padding-x: 2rem; /* Updated from 1.25rem to match shadcn */\n --seki-button-lg-padding-y: 0.5rem;\n --seki-button-lg-font-size: 1rem; /* Updated from 1.125rem to match shadcn */\n --seki-button-lg-height: 2.75rem; /* Updated from 3rem to match shadcn (44px) */\n\n /* Button Sizing: Icon-only (NEW - shadcn compatibility) */\n --seki-button-icon-sm-size: 2rem; /* 32x32px square */\n --seki-button-icon-size: 2.5rem; /* 40x40px square */\n --seki-button-icon-lg-size: 3rem; /* 48x48px square */\n --seki-button-icon-gap: 0.5rem; /* 8px gap between icon and text */\n\n /* Button Variant: Link (NEW - shadcn compatibility) */\n --seki-button-link-bg: transparent;\n --seki-button-link-text: var(--seki-primary);\n --seki-button-link-border: transparent;\n --seki-button-link-hover-bg: transparent;\n --seki-button-link-hover-text: var(--seki-primary);\n --seki-button-link-hover-border: transparent;\n\n /* Button Common */\n --seki-button-radius: var(--seki-radius-md, 0.375rem);\n --seki-button-font-weight: var(--seki-font-medium, 500);\n --seki-button-transition-duration: 150ms;\n --seki-button-transition-timing: ease-in-out;\n --seki-button-shadow: var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));\n --seki-button-shadow-hover: var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));\n --seki-button-disabled-opacity: 0.5;\n\n /* Input Component Colors */\n --seki-input-bg: var(--seki-background);\n --seki-input-border: var(--seki-border);\n --seki-input-text: var(--seki-foreground);\n --seki-input-placeholder: var(--seki-muted-foreground);\n --seki-input-ring: var(--seki-ring);\n --seki-input-invalid-border: var(--seki-destructive);\n --seki-input-invalid-ring: var(--seki-destructive);\n --seki-input-disabled-opacity: 0.5;\n --seki-input-radius: var(--seki-radius-md);\n}\n\n/**\n * SekiUI Design Tokens - Spacing\n * 4px base unit, rem-based scale\n */\n\n:host {\n /* Spacing Scale (4px base unit) */\n --seki-spacing-0: 0;\n --seki-spacing-0-5: 0.125rem; /* 2px */\n --seki-spacing-1: 0.25rem; /* 4px */\n --seki-spacing-1-5: 0.375rem; /* 6px */\n --seki-spacing-2: 0.5rem; /* 8px */\n --seki-spacing-2-5: 0.625rem; /* 10px */\n --seki-spacing-3: 0.75rem; /* 12px */\n --seki-spacing-3-5: 0.875rem; /* 14px */\n --seki-spacing-4: 1rem; /* 16px */\n --seki-spacing-5: 1.25rem; /* 20px */\n --seki-spacing-6: 1.5rem; /* 24px */\n --seki-spacing-8: 2rem; /* 32px */\n --seki-spacing-10: 2.5rem; /* 40px */\n --seki-spacing-12: 3rem; /* 48px */\n --seki-spacing-16: 4rem; /* 64px */\n --seki-spacing-20: 5rem; /* 80px */\n --seki-spacing-24: 6rem; /* 96px */\n\n /* Input Component Tokens */\n --seki-input-height-sm: 2rem; /* 32px */\n --seki-input-height-md: 2.5rem; /* 40px - default */\n --seki-input-height-lg: 3rem; /* 48px */\n --seki-input-padding-x: 0.75rem; /* 12px */\n --seki-input-padding-y: 0.5rem; /* 8px */\n --seki-input-font-size: 0.875rem; /* 14px */\n --seki-input-ring-offset: 2px;\n}\n\n/**\n * SekiUI Design Tokens - Shadows\n * Subtle elevation system\n */\n\n:host {\n /* Shadow Levels */\n --seki-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --seki-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --seki-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n\n/**\n * SekiUI Design Tokens - Typography\n * System font stacks, sizes, weights, line heights\n */\n\n:host {\n /* Font Families */\n --seki-font-sans: -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, \'Helvetica Neue\',\n Arial, sans-serif;\n --seki-font-mono: ui-monospace, SFMono-Regular, \'SF Mono\', Menlo, Consolas, monospace;\n\n /* Font Sizes (rem-based) */\n --seki-text-xs: 0.75rem; /* 12px */\n --seki-text-sm: 0.875rem; /* 14px */\n --seki-text-base: 1rem; /* 16px */\n --seki-text-lg: 1.125rem; /* 18px */\n --seki-text-xl: 1.25rem; /* 20px */\n --seki-text-2xl: 1.5rem; /* 24px */\n --seki-text-3xl: 1.875rem; /* 30px */\n --seki-text-4xl: 2.25rem; /* 36px */\n\n /* Font Weights */\n --seki-font-normal: 400;\n --seki-font-medium: 500;\n --seki-font-semibold: 600;\n --seki-font-bold: 700;\n\n /* Line Heights */\n --seki-leading-tight: 1.25;\n --seki-leading-normal: 1.5;\n --seki-leading-relaxed: 1.75;\n}\n\n/**\n * SekiUI Design Tokens - Border Radius\n * Four-level radius system\n */\n\n:host {\n /* Border Radius Levels */\n --seki-radius-sm: 0.25rem; /* 4px */\n --seki-radius-md: 0.375rem; /* 6px */\n --seki-radius-lg: 0.5rem; /* 8px */\n --seki-radius-xl: 1rem; /* 16px */\n}\n\n\n\n:host {\n display: block;\n}\n\n.field {\n display: grid;\n gap: var(--seki-field-spacing, 0.5rem);\n}\n\n/* Vertical orientation (default) */\n:host([data-orientation="vertical"]) .field {\n grid-template-columns: 1fr;\n grid-template-areas:\n "label"\n "control"\n "description"\n "error";\n}\n\n/* Horizontal orientation */\n:host([data-orientation="horizontal"]) .field {\n grid-template-columns: auto 1fr;\n grid-template-areas:\n "label control"\n "description description"\n "error error";\n gap: var(--seki-field-gap-horizontal, 1rem) var(--seki-field-spacing, 0.5rem);\n align-items: start;\n}\n\n:host([data-orientation="horizontal"]) .field-label {\n padding-top: 0.25rem; /* Align with input */\n}\n\n/* Responsive orientation - uses container queries */\n:host([data-orientation="responsive"]) .field {\n container-type: inline-size;\n grid-template-columns: 1fr;\n grid-template-areas:\n "label"\n "control"\n "description"\n "error";\n}\n\n@container (min-width: 600px) {\n :host([data-orientation="responsive"]) .field {\n grid-template-columns: auto 1fr;\n grid-template-areas:\n "label control"\n "description description"\n "error error";\n gap: var(--seki-field-gap-horizontal, 1rem) var(--seki-field-spacing, 0.5rem);\n }\n\n :host([data-orientation="responsive"]) .field-label {\n padding-top: 0.25rem;\n }\n}\n\n/* Grid areas */\n.field-label {\n grid-area: label;\n}\n\n.field-control {\n grid-area: control;\n}\n\n.field-description {\n grid-area: description;\n}\n\n.field-error {\n grid-area: error;\n}\n\n/* Hide empty slots */\n.field-label:empty,\n.field-description:empty,\n.field-error:empty {\n display: none;\n}\n\n/* Invalid state styling */\n:host([data-invalid]) .field {\n /* Visual indicator for invalid state (handled by individual components) */\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .field {\n transition: none;\n }\n}\n';export{r as seki_field}
|
|
1
|
+
import{r as e,h as n,H as i,a as s}from"./p-CuXbV_yz.js";const r=class{constructor(n){e(this,n),this.orientation="vertical",this.invalid=!1}hasMultipleControls(){const e=this.el.querySelectorAll(":not([slot])");return Array.from(e).filter((e=>{if(e.nodeType!==Node.ELEMENT_NODE)return!1;const n=e.tagName.toLowerCase();return["input","select","textarea","button"].includes(n)||n.startsWith("seki-")})).length>1}render(){const e=this.hasMultipleControls();return n(i,{key:"1583bccc0f87c5c454f73da9d6d8c2729fb4ca0e","data-orientation":this.orientation,"data-invalid":this.invalid?"":void 0,role:e?"group":void 0},n("div",{key:"d463dec6a4858ab4dee8312418d2d9bc0a629bdb",class:"field"},n("div",{key:"a73cceaea5c25151f3ea42a9bfd6b160d886285c",class:"field-label"},n("slot",{key:"b2e5596bf6e3d225611646cdeb1bb885244ef486",name:"label"})),n("div",{key:"9cb6521cf8fd82302bfb0cab5db861ed94f0540d",class:"field-control"},n("slot",{key:"965694631bb131a558e7d7d62bc91f35c4081adb"})),n("div",{key:"aa247a7d7e6c076f4113cf4c71230addee341bda",class:"field-description"},n("slot",{key:"eb7ab7001a1070700aa8d3be8eba2d6ccdcc633b",name:"description"})),n("div",{key:"9dc8970c328b1b24ee7814e73673188c2165252f",class:"field-error"},n("slot",{key:"243f0b2da99821057a374cb2134c29eb7ed2e3e1",name:"error"}))))}get el(){return s(this)}};r.style='/**\n * SekiUI Design Tokens - Index\n * Aggregates all design token files into a single entry point\n *\n * Import this file to get access to all design tokens:\n * @import \'../tokens/index.css\';\n */\n\n/**\n * SekiUI Design Tokens - Colors\n * Based on shadcn/ui color system\n */\n\n/* =============================================================================\n PRIMITIVE COLOR TOKENS (Layer 1: Raw Values)\n ============================================================================= */\n\n:host {\n /* Neutral Scale (50-950) - shadcn/ui inspired */\n --seki-neutral-50: hsl(0, 0%, 98%);\n --seki-neutral-100: hsl(0, 0%, 96.1%);\n --seki-neutral-200: hsl(0, 0%, 89.8%);\n --seki-neutral-300: hsl(0, 0%, 83.1%);\n --seki-neutral-400: hsl(0, 0%, 63.9%);\n --seki-neutral-500: hsl(0, 0%, 45.1%);\n --seki-neutral-600: hsl(0, 0%, 32.2%);\n --seki-neutral-700: hsl(0, 0%, 25.1%);\n --seki-neutral-800: hsl(0, 0%, 14.9%);\n --seki-neutral-900: hsl(0, 0%, 9%);\n --seki-neutral-950: hsl(0, 0%, 3.9%);\n\n /* Primary/Accent Scale (50-950) */\n --seki-primary-50: hsl(210, 100%, 97%);\n --seki-primary-100: hsl(210, 95%, 93%);\n --seki-primary-200: hsl(210, 95%, 85%);\n --seki-primary-300: hsl(210, 90%, 73%);\n --seki-primary-400: hsl(210, 85%, 58%);\n --seki-primary-500: hsl(210, 80%, 48%);\n --seki-primary-600: hsl(210, 75%, 40%);\n --seki-primary-700: hsl(210, 70%, 32%);\n --seki-primary-800: hsl(210, 65%, 25%);\n --seki-primary-900: hsl(210, 60%, 18%);\n --seki-primary-950: hsl(210, 55%, 10%);\n\n /* Semantic Color Primitives */\n --seki-success-500: hsl(142, 71%, 45%);\n --seki-success-600: hsl(142, 71%, 35%);\n --seki-warning-500: hsl(38, 92%, 50%);\n --seki-warning-600: hsl(38, 92%, 40%);\n --seki-destructive-500: hsl(0, 84.2%, 60.2%);\n --seki-destructive-600: hsl(0, 72%, 41%);\n}\n\n/* =============================================================================\n SEMANTIC TOKENS (Layer 2: shadcn/ui Style)\n ============================================================================= */\n\n:host {\n /* Base */\n --seki-background: hsl(0, 0%, 100%);\n --seki-foreground: hsl(0, 0%, 3.9%);\n\n /* Muted */\n --seki-muted: hsl(0, 0%, 96.1%);\n --seki-muted-foreground: hsl(0, 0%, 45.1%);\n\n /* Card */\n --seki-card: hsl(0, 0%, 100%);\n --seki-card-foreground: hsl(0, 0%, 3.9%);\n\n /* Popover */\n --seki-popover: hsl(0, 0%, 100%);\n --seki-popover-foreground: hsl(0, 0%, 3.9%);\n\n /* Border */\n --seki-border: hsl(0, 0%, 89.8%);\n --seki-input: hsl(0, 0%, 89.8%);\n\n /* Primary */\n --seki-primary: hsl(0, 0%, 9%);\n --seki-primary-foreground: hsl(0, 0%, 98%);\n\n /* Secondary */\n --seki-secondary: hsl(0, 0%, 96.1%);\n --seki-secondary-foreground: hsl(0, 0%, 9%);\n\n /* Accent */\n --seki-accent: hsl(0, 0%, 96.1%);\n --seki-accent-foreground: hsl(0, 0%, 9%);\n\n /* Destructive */\n --seki-destructive: hsl(0, 84.2%, 60.2%);\n --seki-destructive-foreground: hsl(0, 0%, 98%);\n\n /* Ring */\n --seki-ring: hsl(0, 0%, 3.9%);\n\n /* Legacy aliases for backward compatibility */\n --seki-bg-primary: var(--seki-background);\n --seki-bg-secondary: var(--seki-muted);\n --seki-bg-tertiary: var(--seki-accent);\n --seki-text-primary: var(--seki-foreground);\n --seki-text-secondary: var(--seki-muted-foreground);\n --seki-text-tertiary: var(--seki-neutral-400);\n --seki-border-default: var(--seki-border);\n --seki-border-emphasis: var(--seki-neutral-300);\n}\n\n/* Dark Mode Semantic Tokens */\n:host([data-theme=\'dark\']) {\n /* Base */\n --seki-background: hsl(0, 0%, 3.9%);\n --seki-foreground: hsl(0, 0%, 98%);\n\n /* Muted */\n --seki-muted: hsl(0, 0%, 14.9%);\n --seki-muted-foreground: hsl(0, 0%, 63.9%);\n\n /* Card */\n --seki-card: hsl(0, 0%, 3.9%);\n --seki-card-foreground: hsl(0, 0%, 98%);\n\n /* Popover */\n --seki-popover: hsl(0, 0%, 3.9%);\n --seki-popover-foreground: hsl(0, 0%, 98%);\n\n /* Border */\n --seki-border: hsl(0, 0%, 14.9%);\n --seki-input: hsl(0, 0%, 14.9%);\n\n /* Primary */\n --seki-primary: hsl(0, 0%, 98%);\n --seki-primary-foreground: hsl(0, 0%, 9%);\n\n /* Secondary */\n --seki-secondary: hsl(0, 0%, 14.9%);\n --seki-secondary-foreground: hsl(0, 0%, 98%);\n\n /* Accent */\n --seki-accent: hsl(0, 0%, 14.9%);\n --seki-accent-foreground: hsl(0, 0%, 98%);\n\n /* Destructive */\n --seki-destructive: hsl(0, 62.8%, 30.6%);\n --seki-destructive-foreground: hsl(0, 0%, 98%);\n\n /* Ring */\n --seki-ring: hsl(0, 0%, 83.1%);\n\n /* Legacy aliases for backward compatibility */\n --seki-bg-primary: var(--seki-background);\n --seki-bg-secondary: var(--seki-muted);\n --seki-bg-tertiary: var(--seki-accent);\n --seki-text-primary: var(--seki-foreground);\n --seki-text-secondary: var(--seki-muted-foreground);\n --seki-text-tertiary: var(--seki-neutral-600);\n --seki-border-default: var(--seki-border);\n --seki-border-emphasis: var(--seki-neutral-700);\n\n /* Button overrides for dark mode */\n --seki-button-primary-hover-bg: hsl(0, 0%, 98%, 0.9);\n --seki-button-secondary-hover-bg: hsl(0, 0%, 14.9%, 0.8);\n}\n\n/* =============================================================================\n COMPONENT TOKENS (Layer 3: Button-Specific - shadcn/ui Style)\n ============================================================================= */\n\n:host {\n /* Button Variant: Primary (default in shadcn/ui) */\n --seki-button-primary-bg: var(--seki-primary);\n --seki-button-primary-text: var(--seki-primary-foreground);\n --seki-button-primary-border: transparent;\n --seki-button-primary-hover-bg: hsl(0, 0%, 9%, 0.9);\n --seki-button-primary-hover-text: var(--seki-primary-foreground);\n --seki-button-primary-hover-border: transparent;\n\n /* Button Variant: Secondary */\n --seki-button-secondary-bg: var(--seki-secondary);\n --seki-button-secondary-text: var(--seki-secondary-foreground);\n --seki-button-secondary-border: transparent;\n --seki-button-secondary-hover-bg: hsl(0, 0%, 96.1%, 0.8);\n --seki-button-secondary-hover-text: var(--seki-secondary-foreground);\n --seki-button-secondary-hover-border: transparent;\n\n /* Button Variant: Outline */\n --seki-button-outline-bg: transparent;\n --seki-button-outline-text: var(--seki-foreground);\n --seki-button-outline-border: var(--seki-input);\n --seki-button-outline-hover-bg: var(--seki-accent);\n --seki-button-outline-hover-text: var(--seki-accent-foreground);\n --seki-button-outline-hover-border: var(--seki-input);\n\n /* Button Variant: Ghost */\n --seki-button-ghost-bg: transparent;\n --seki-button-ghost-text: var(--seki-foreground);\n --seki-button-ghost-border: transparent;\n --seki-button-ghost-hover-bg: var(--seki-accent);\n --seki-button-ghost-hover-text: var(--seki-accent-foreground);\n --seki-button-ghost-hover-border: transparent;\n\n /* Button Variant: Destructive */\n --seki-button-destructive-bg: var(--seki-destructive);\n --seki-button-destructive-text: var(--seki-destructive-foreground);\n --seki-button-destructive-border: transparent;\n --seki-button-destructive-hover-bg: hsl(0, 84.2%, 60.2%, 0.9);\n --seki-button-destructive-hover-border: transparent;\n\n /* Button Sizing: Small */\n --seki-button-sm-padding-x: var(--seki-spacing-3, 0.75rem);\n --seki-button-sm-padding-y: 0.375rem;\n --seki-button-sm-font-size: var(--seki-text-sm, 0.875rem);\n --seki-button-sm-height: 2.25rem; /* Updated from 2rem to match shadcn (36px) */\n\n /* Button Sizing: Medium (default) */\n --seki-button-md-padding-x: var(--seki-spacing-4, 1rem);\n --seki-button-md-padding-y: var(--seki-spacing-2, 0.5rem);\n --seki-button-md-font-size: var(--seki-text-base, 1rem);\n --seki-button-md-height: 2.5rem;\n\n /* Button Sizing: Large */\n --seki-button-lg-padding-x: 2rem; /* Updated from 1.25rem to match shadcn */\n --seki-button-lg-padding-y: 0.5rem;\n --seki-button-lg-font-size: 1rem; /* Updated from 1.125rem to match shadcn */\n --seki-button-lg-height: 2.75rem; /* Updated from 3rem to match shadcn (44px) */\n\n /* Button Sizing: Icon-only (NEW - shadcn compatibility) */\n --seki-button-icon-sm-size: 2rem; /* 32x32px square */\n --seki-button-icon-size: 2.5rem; /* 40x40px square */\n --seki-button-icon-lg-size: 3rem; /* 48x48px square */\n --seki-button-icon-gap: 0.5rem; /* 8px gap between icon and text */\n\n /* Button Variant: Link (NEW - shadcn compatibility) */\n --seki-button-link-bg: transparent;\n --seki-button-link-text: var(--seki-primary);\n --seki-button-link-border: transparent;\n --seki-button-link-hover-bg: transparent;\n --seki-button-link-hover-text: var(--seki-primary);\n --seki-button-link-hover-border: transparent;\n\n /* Button Common */\n --seki-button-radius: var(--seki-radius-md, 0.375rem);\n --seki-button-font-weight: var(--seki-font-medium, 500);\n --seki-button-transition-duration: 150ms;\n --seki-button-transition-timing: ease-in-out;\n --seki-button-shadow: var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));\n --seki-button-shadow-hover: var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));\n --seki-button-disabled-opacity: 0.5;\n\n /* Input Component Colors */\n --seki-input-bg: var(--seki-background);\n --seki-input-border: var(--seki-border);\n --seki-input-text: var(--seki-foreground);\n --seki-input-placeholder: var(--seki-muted-foreground);\n --seki-input-ring: var(--seki-ring);\n --seki-input-invalid-border: var(--seki-destructive);\n --seki-input-invalid-ring: var(--seki-destructive);\n --seki-input-disabled-opacity: 0.5;\n --seki-input-radius: var(--seki-radius-md);\n --seki-input-ring-offset: 2px;\n\n /* Select Component Colors */\n --seki-select-trigger-bg: var(--seki-background);\n --seki-select-trigger-border: 1px solid var(--seki-border);\n --seki-select-trigger-bg-hover: var(--seki-muted);\n --seki-select-trigger-radius: var(--seki-radius-md);\n --seki-select-trigger-min-height: 2.5rem;\n --seki-select-trigger-padding: 0.5rem 0.75rem;\n --seki-select-trigger-gap: 0.5rem;\n\n /* Select Content/Dropdown */\n --seki-select-content-bg: var(--seki-popover);\n --seki-select-content-border: 1px solid var(--seki-border);\n --seki-select-content-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n --seki-select-content-radius: var(--seki-radius-md);\n --seki-select-content-padding: 0.5rem 0;\n\n /* Select Option */\n --seki-select-option-padding: 0.5rem 0.75rem;\n --seki-select-option-gap: 0.5rem;\n --seki-select-option-radius: var(--seki-radius-sm);\n --seki-select-option-bg-hover: var(--seki-muted);\n --seki-select-option-bg-selected: var(--seki-muted);\n\n /* Select Group */\n --seki-select-group-label-padding: 0.5rem 0.75rem;\n --seki-select-group-label-font-size: var(--seki-font-size-xs);\n --seki-select-group-label-font-weight: var(--seki-font-semibold);\n --seki-select-group-label-color: var(--seki-muted-foreground);\n --seki-select-group-separator: 1px solid var(--seki-border);\n}\n\n/**\n * SekiUI Design Tokens - Spacing\n * 4px base unit, rem-based scale\n */\n\n:host {\n /* Spacing Scale (4px base unit) */\n --seki-spacing-0: 0;\n --seki-spacing-0-5: 0.125rem; /* 2px */\n --seki-spacing-1: 0.25rem; /* 4px */\n --seki-spacing-1-5: 0.375rem; /* 6px */\n --seki-spacing-2: 0.5rem; /* 8px */\n --seki-spacing-2-5: 0.625rem; /* 10px */\n --seki-spacing-3: 0.75rem; /* 12px */\n --seki-spacing-3-5: 0.875rem; /* 14px */\n --seki-spacing-4: 1rem; /* 16px */\n --seki-spacing-5: 1.25rem; /* 20px */\n --seki-spacing-6: 1.5rem; /* 24px */\n --seki-spacing-8: 2rem; /* 32px */\n --seki-spacing-10: 2.5rem; /* 40px */\n --seki-spacing-12: 3rem; /* 48px */\n --seki-spacing-16: 4rem; /* 64px */\n --seki-spacing-20: 5rem; /* 80px */\n --seki-spacing-24: 6rem; /* 96px */\n\n /* Input Component Tokens */\n --seki-input-height-sm: 2rem; /* 32px */\n --seki-input-height-md: 2.5rem; /* 40px - default */\n --seki-input-height-lg: 3rem; /* 48px */\n --seki-input-padding-x: 0.75rem; /* 12px */\n --seki-input-padding-y: 0.5rem; /* 8px */\n --seki-input-font-size: 0.875rem; /* 14px */\n --seki-input-ring-offset: 2px;\n}\n\n/**\n * SekiUI Design Tokens - Shadows\n * Subtle elevation system\n */\n\n:host {\n /* Shadow Levels */\n --seki-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --seki-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --seki-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n\n/**\n * SekiUI Design Tokens - Typography\n * System font stacks, sizes, weights, line heights\n */\n\n:host {\n /* Font Families */\n --seki-font-sans: -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, \'Helvetica Neue\',\n Arial, sans-serif;\n --seki-font-mono: ui-monospace, SFMono-Regular, \'SF Mono\', Menlo, Consolas, monospace;\n\n /* Font Sizes (rem-based) */\n --seki-text-xs: 0.75rem; /* 12px */\n --seki-text-sm: 0.875rem; /* 14px */\n --seki-text-base: 1rem; /* 16px */\n --seki-text-lg: 1.125rem; /* 18px */\n --seki-text-xl: 1.25rem; /* 20px */\n --seki-text-2xl: 1.5rem; /* 24px */\n --seki-text-3xl: 1.875rem; /* 30px */\n --seki-text-4xl: 2.25rem; /* 36px */\n\n /* Font Weights */\n --seki-font-normal: 400;\n --seki-font-medium: 500;\n --seki-font-semibold: 600;\n --seki-font-bold: 700;\n\n /* Line Heights */\n --seki-leading-tight: 1.25;\n --seki-leading-normal: 1.5;\n --seki-leading-relaxed: 1.75;\n}\n\n/**\n * SekiUI Design Tokens - Border Radius\n * Four-level radius system\n */\n\n:host {\n /* Border Radius Levels */\n --seki-radius-sm: 0.25rem; /* 4px */\n --seki-radius-md: 0.375rem; /* 6px */\n --seki-radius-lg: 0.5rem; /* 8px */\n --seki-radius-xl: 1rem; /* 16px */\n}\n\n\n\n:host {\n display: block;\n}\n\n.field {\n display: grid;\n gap: var(--seki-field-spacing, 0.5rem);\n}\n\n/* Vertical orientation (default) */\n:host([data-orientation="vertical"]) .field {\n grid-template-columns: 1fr;\n grid-template-areas:\n "label"\n "control"\n "description"\n "error";\n}\n\n/* Horizontal orientation */\n:host([data-orientation="horizontal"]) .field {\n grid-template-columns: auto 1fr;\n grid-template-areas:\n "label control"\n "description description"\n "error error";\n gap: var(--seki-field-gap-horizontal, 1rem) var(--seki-field-spacing, 0.5rem);\n align-items: start;\n}\n\n:host([data-orientation="horizontal"]) .field-label {\n padding-top: 0.25rem; /* Align with input */\n}\n\n/* Responsive orientation - uses container queries */\n:host([data-orientation="responsive"]) .field {\n container-type: inline-size;\n grid-template-columns: 1fr;\n grid-template-areas:\n "label"\n "control"\n "description"\n "error";\n}\n\n@container (min-width: 600px) {\n :host([data-orientation="responsive"]) .field {\n grid-template-columns: auto 1fr;\n grid-template-areas:\n "label control"\n "description description"\n "error error";\n gap: var(--seki-field-gap-horizontal, 1rem) var(--seki-field-spacing, 0.5rem);\n }\n\n :host([data-orientation="responsive"]) .field-label {\n padding-top: 0.25rem;\n }\n}\n\n/* Grid areas */\n.field-label {\n grid-area: label;\n}\n\n.field-control {\n grid-area: control;\n}\n\n.field-description {\n grid-area: description;\n}\n\n.field-error {\n grid-area: error;\n}\n\n/* Hide empty slots */\n.field-label:empty,\n.field-description:empty,\n.field-error:empty {\n display: none;\n}\n\n/* Invalid state styling */\n:host([data-invalid]) .field {\n /* Visual indicator for invalid state (handled by individual components) */\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n .field {\n transition: none;\n }\n}\n';export{r as seki_field}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as e,h as r,H as s,a as i}from"./p-CuXbV_yz.js";const t=class{constructor(r){e(this,r),this.forceUpdate=0,this.handleParentOpenChange=()=>{this.forceUpdate++},this.handleParentValueChange=()=>{this.forceUpdate++},this.handleButtonClick=e=>{e.preventDefault();const r=this.getSelectContext();r&&!r.disabled&&r.onOpenChange(!r.open)},this.handleButtonKeyDown=async e=>{const r=this.getSelectContext();if(null==r?void 0:r.disabled)return;const s=this.el.closest("seki-select");s&&s.handleKeyboard&&(await s.handleKeyboard(e),this.forceUpdate++)}}componentDidLoad(){this.buttonRef&&(this.buttonRef.addEventListener("click",this.handleButtonClick),this.buttonRef.addEventListener("keydown",this.handleButtonKeyDown));const e=this.el.closest("seki-select");e&&(e.addEventListener("sekiOpenChange",this.handleParentOpenChange),e.addEventListener("sekiChange",this.handleParentValueChange))}disconnectedCallback(){this.buttonRef&&(this.buttonRef.removeEventListener("click",this.handleButtonClick),this.buttonRef.removeEventListener("keydown",this.handleButtonKeyDown));const e=this.el.closest("seki-select");e&&(e.removeEventListener("sekiOpenChange",this.handleParentOpenChange),e.removeEventListener("sekiChange",this.handleParentValueChange))}getSelectContext(){const e=this.el.closest("seki-select");return null==e?void 0:e.selectContext}renderPlaceholder(){const e=this.el.closest("seki-select");return r("span",{class:"trigger-placeholder"},(null==e?void 0:e.placeholder)||"Select an option")}renderSingleValue(e){const s=e.getSelectedOptions();return 0===s.length?this.renderPlaceholder():r("span",{class:"trigger-value"},s[0].label)}renderMultiValue(e){const s=e.getSelectedOptions();if(0===s.length)return this.renderPlaceholder();const i=this.el.closest("seki-select"),t=(null==i?void 0:i.maxVisiblePills)||3,o=s.slice(0,t),n=s.length-t;return r("div",{class:"trigger-pills"},o.map((s=>r("span",{class:"trigger-pill",onClick:r=>this.handlePillRemove(r,s.value,e)},s.label,r("button",{type:"button",class:"pill-remove","aria-label":`Remove ${s.label}`},"×")))),n>0&&r("span",{class:"trigger-overflow"},"+",n," more"))}handlePillRemove(e,r,s){e.stopPropagation(),s.onOptionSelect(r)}render(){const e=this.getSelectContext();if(!e)return r(s,null,r("div",null,"Loading..."));const i=e.open,t=e.disabled;return r(s,null,r("button",{ref:e=>this.buttonRef=e,type:"button",class:"trigger-button",role:"combobox","aria-expanded":i?"true":"false","aria-controls":e.contentId,"aria-activedescendant":e.focusedOptionValue?`option-${e.focusedOptionValue}`:void 0,"aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby,"aria-disabled":t?"true":void 0,disabled:t,"data-disabled":t?"true":void 0,"data-state":i?"open":"closed"},e.multiple?this.renderMultiValue(e):this.renderSingleValue(e),r("svg",{class:"trigger-chevron",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},r("path",{d:"M3 4.5L6 7.5L9 4.5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"}))))}get el(){return i(this)}};t.style=":host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%)}:host{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:host([data-theme='dark']){--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md);--seki-input-ring-offset:2px;--seki-select-trigger-bg:var(--seki-background);--seki-select-trigger-border:1px solid var(--seki-border);--seki-select-trigger-bg-hover:var(--seki-muted);--seki-select-trigger-radius:var(--seki-radius-md);--seki-select-trigger-min-height:2.5rem;--seki-select-trigger-padding:0.5rem 0.75rem;--seki-select-trigger-gap:0.5rem;--seki-select-content-bg:var(--seki-popover);--seki-select-content-border:1px solid var(--seki-border);--seki-select-content-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1);--seki-select-content-radius:var(--seki-radius-md);--seki-select-content-padding:0.5rem 0;--seki-select-option-padding:0.5rem 0.75rem;--seki-select-option-gap:0.5rem;--seki-select-option-radius:var(--seki-radius-sm);--seki-select-option-bg-hover:var(--seki-muted);--seki-select-option-bg-selected:var(--seki-muted);--seki-select-group-label-padding:0.5rem 0.75rem;--seki-select-group-label-font-size:var(--seki-font-size-xs);--seki-select-group-label-font-weight:var(--seki-font-semibold);--seki-select-group-label-color:var(--seki-muted-foreground);--seki-select-group-separator:1px solid var(--seki-border)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',\n Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;}:host{display:block}.trigger-button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--seki-select-trigger-min-height);padding:var(--seki-select-trigger-padding);gap:var(--seki-select-trigger-gap);font-family:var(--seki-font-sans);font-size:var(--seki-font-size-base);font-weight:var(--seki-font-normal);line-height:var(--seki-leading-normal);background:var(--seki-select-trigger-bg);border:var(--seki-select-trigger-border);border-radius:var(--seki-select-trigger-radius);cursor:pointer;transition:background-color 0.2s ease, border-color 0.2s ease}.trigger-button:hover:not(:disabled){background:var(--seki-select-trigger-bg-hover)}.trigger-button:focus-visible{outline:2px solid var(--seki-color-ring);outline-offset:2px;border-color:var(--seki-color-ring)}.trigger-button:disabled{cursor:not-allowed;opacity:0.5}.trigger-button[data-disabled=\"true\"]{cursor:not-allowed;opacity:0.5}.trigger-placeholder{color:var(--seki-color-muted-foreground)}.trigger-value{flex:1;text-align:left;color:var(--seki-color-foreground)}.trigger-pills{display:flex;flex-wrap:wrap;gap:0.375rem;flex:1}.trigger-pill{display:inline-flex;align-items:center;gap:0.25rem;padding:0.125rem 0.5rem;background:var(--seki-color-muted);border-radius:var(--seki-radius-sm);font-size:var(--seki-font-size-sm);font-weight:var(--seki-font-normal);line-height:var(--seki-leading-normal);color:var(--seki-color-foreground)}.pill-remove{all:unset;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;border-radius:50%;cursor:pointer;color:var(--seki-color-muted-foreground);transition:background-color 0.15s ease, color 0.15s ease}.pill-remove:hover{background:var(--seki-color-muted-foreground);color:var(--seki-color-background)}.trigger-overflow{color:var(--seki-color-muted-foreground);font-size:var(--seki-font-size-sm);font-weight:var(--seki-font-normal);line-height:var(--seki-leading-normal)}.trigger-chevron{flex-shrink:0;color:var(--seki-color-muted-foreground);transition:transform 0.2s ease}.trigger-button[data-state=\"open\"] .trigger-chevron{transform:rotate(180deg)}[data-theme=\"dark\"] .trigger-button{background:var(--seki-select-trigger-bg);border-color:var(--seki-color-border)}@media (prefers-reduced-motion: reduce){.trigger-button,.trigger-chevron,.pill-remove{transition:none}}";export{t as seki_select_trigger}
|
package/dist/sekiui/sekiui.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
:host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%)}:host{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:host([data-theme='dark']){--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
|
1
|
+
:host{--seki-neutral-50:hsl(0, 0%, 98%);--seki-neutral-100:hsl(0, 0%, 96.1%);--seki-neutral-200:hsl(0, 0%, 89.8%);--seki-neutral-300:hsl(0, 0%, 83.1%);--seki-neutral-400:hsl(0, 0%, 63.9%);--seki-neutral-500:hsl(0, 0%, 45.1%);--seki-neutral-600:hsl(0, 0%, 32.2%);--seki-neutral-700:hsl(0, 0%, 25.1%);--seki-neutral-800:hsl(0, 0%, 14.9%);--seki-neutral-900:hsl(0, 0%, 9%);--seki-neutral-950:hsl(0, 0%, 3.9%);--seki-primary-50:hsl(210, 100%, 97%);--seki-primary-100:hsl(210, 95%, 93%);--seki-primary-200:hsl(210, 95%, 85%);--seki-primary-300:hsl(210, 90%, 73%);--seki-primary-400:hsl(210, 85%, 58%);--seki-primary-500:hsl(210, 80%, 48%);--seki-primary-600:hsl(210, 75%, 40%);--seki-primary-700:hsl(210, 70%, 32%);--seki-primary-800:hsl(210, 65%, 25%);--seki-primary-900:hsl(210, 60%, 18%);--seki-primary-950:hsl(210, 55%, 10%);--seki-success-500:hsl(142, 71%, 45%);--seki-success-600:hsl(142, 71%, 35%);--seki-warning-500:hsl(38, 92%, 50%);--seki-warning-600:hsl(38, 92%, 40%);--seki-destructive-500:hsl(0, 84.2%, 60.2%);--seki-destructive-600:hsl(0, 72%, 41%)}:host{--seki-background:hsl(0, 0%, 100%);--seki-foreground:hsl(0, 0%, 3.9%);--seki-muted:hsl(0, 0%, 96.1%);--seki-muted-foreground:hsl(0, 0%, 45.1%);--seki-card:hsl(0, 0%, 100%);--seki-card-foreground:hsl(0, 0%, 3.9%);--seki-popover:hsl(0, 0%, 100%);--seki-popover-foreground:hsl(0, 0%, 3.9%);--seki-border:hsl(0, 0%, 89.8%);--seki-input:hsl(0, 0%, 89.8%);--seki-primary:hsl(0, 0%, 9%);--seki-primary-foreground:hsl(0, 0%, 98%);--seki-secondary:hsl(0, 0%, 96.1%);--seki-secondary-foreground:hsl(0, 0%, 9%);--seki-accent:hsl(0, 0%, 96.1%);--seki-accent-foreground:hsl(0, 0%, 9%);--seki-destructive:hsl(0, 84.2%, 60.2%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 3.9%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-400);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-300)}:host([data-theme='dark']){--seki-background:hsl(0, 0%, 3.9%);--seki-foreground:hsl(0, 0%, 98%);--seki-muted:hsl(0, 0%, 14.9%);--seki-muted-foreground:hsl(0, 0%, 63.9%);--seki-card:hsl(0, 0%, 3.9%);--seki-card-foreground:hsl(0, 0%, 98%);--seki-popover:hsl(0, 0%, 3.9%);--seki-popover-foreground:hsl(0, 0%, 98%);--seki-border:hsl(0, 0%, 14.9%);--seki-input:hsl(0, 0%, 14.9%);--seki-primary:hsl(0, 0%, 98%);--seki-primary-foreground:hsl(0, 0%, 9%);--seki-secondary:hsl(0, 0%, 14.9%);--seki-secondary-foreground:hsl(0, 0%, 98%);--seki-accent:hsl(0, 0%, 14.9%);--seki-accent-foreground:hsl(0, 0%, 98%);--seki-destructive:hsl(0, 62.8%, 30.6%);--seki-destructive-foreground:hsl(0, 0%, 98%);--seki-ring:hsl(0, 0%, 83.1%);--seki-bg-primary:var(--seki-background);--seki-bg-secondary:var(--seki-muted);--seki-bg-tertiary:var(--seki-accent);--seki-text-primary:var(--seki-foreground);--seki-text-secondary:var(--seki-muted-foreground);--seki-text-tertiary:var(--seki-neutral-600);--seki-border-default:var(--seki-border);--seki-border-emphasis:var(--seki-neutral-700);--seki-button-primary-hover-bg:hsl(0, 0%, 98%, 0.9);--seki-button-secondary-hover-bg:hsl(0, 0%, 14.9%, 0.8)}:host{--seki-button-primary-bg:var(--seki-primary);--seki-button-primary-text:var(--seki-primary-foreground);--seki-button-primary-border:transparent;--seki-button-primary-hover-bg:hsl(0, 0%, 9%, 0.9);--seki-button-primary-hover-text:var(--seki-primary-foreground);--seki-button-primary-hover-border:transparent;--seki-button-secondary-bg:var(--seki-secondary);--seki-button-secondary-text:var(--seki-secondary-foreground);--seki-button-secondary-border:transparent;--seki-button-secondary-hover-bg:hsl(0, 0%, 96.1%, 0.8);--seki-button-secondary-hover-text:var(--seki-secondary-foreground);--seki-button-secondary-hover-border:transparent;--seki-button-outline-bg:transparent;--seki-button-outline-text:var(--seki-foreground);--seki-button-outline-border:var(--seki-input);--seki-button-outline-hover-bg:var(--seki-accent);--seki-button-outline-hover-text:var(--seki-accent-foreground);--seki-button-outline-hover-border:var(--seki-input);--seki-button-ghost-bg:transparent;--seki-button-ghost-text:var(--seki-foreground);--seki-button-ghost-border:transparent;--seki-button-ghost-hover-bg:var(--seki-accent);--seki-button-ghost-hover-text:var(--seki-accent-foreground);--seki-button-ghost-hover-border:transparent;--seki-button-destructive-bg:var(--seki-destructive);--seki-button-destructive-text:var(--seki-destructive-foreground);--seki-button-destructive-border:transparent;--seki-button-destructive-hover-bg:hsl(0, 84.2%, 60.2%, 0.9);--seki-button-destructive-hover-border:transparent;--seki-button-sm-padding-x:var(--seki-spacing-3, 0.75rem);--seki-button-sm-padding-y:0.375rem;--seki-button-sm-font-size:var(--seki-text-sm, 0.875rem);--seki-button-sm-height:2.25rem;--seki-button-md-padding-x:var(--seki-spacing-4, 1rem);--seki-button-md-padding-y:var(--seki-spacing-2, 0.5rem);--seki-button-md-font-size:var(--seki-text-base, 1rem);--seki-button-md-height:2.5rem;--seki-button-lg-padding-x:2rem;--seki-button-lg-padding-y:0.5rem;--seki-button-lg-font-size:1rem;--seki-button-lg-height:2.75rem;--seki-button-icon-sm-size:2rem;--seki-button-icon-size:2.5rem;--seki-button-icon-lg-size:3rem;--seki-button-icon-gap:0.5rem;--seki-button-link-bg:transparent;--seki-button-link-text:var(--seki-primary);--seki-button-link-border:transparent;--seki-button-link-hover-bg:transparent;--seki-button-link-hover-text:var(--seki-primary);--seki-button-link-hover-border:transparent;--seki-button-radius:var(--seki-radius-md, 0.375rem);--seki-button-font-weight:var(--seki-font-medium, 500);--seki-button-transition-duration:150ms;--seki-button-transition-timing:ease-in-out;--seki-button-shadow:var(--seki-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));--seki-button-shadow-hover:var(--seki-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));--seki-button-disabled-opacity:0.5;--seki-input-bg:var(--seki-background);--seki-input-border:var(--seki-border);--seki-input-text:var(--seki-foreground);--seki-input-placeholder:var(--seki-muted-foreground);--seki-input-ring:var(--seki-ring);--seki-input-invalid-border:var(--seki-destructive);--seki-input-invalid-ring:var(--seki-destructive);--seki-input-disabled-opacity:0.5;--seki-input-radius:var(--seki-radius-md);--seki-input-ring-offset:2px;--seki-select-trigger-bg:var(--seki-background);--seki-select-trigger-border:1px solid var(--seki-border);--seki-select-trigger-bg-hover:var(--seki-muted);--seki-select-trigger-radius:var(--seki-radius-md);--seki-select-trigger-min-height:2.5rem;--seki-select-trigger-padding:0.5rem 0.75rem;--seki-select-trigger-gap:0.5rem;--seki-select-content-bg:var(--seki-popover);--seki-select-content-border:1px solid var(--seki-border);--seki-select-content-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1);--seki-select-content-radius:var(--seki-radius-md);--seki-select-content-padding:0.5rem 0;--seki-select-option-padding:0.5rem 0.75rem;--seki-select-option-gap:0.5rem;--seki-select-option-radius:var(--seki-radius-sm);--seki-select-option-bg-hover:var(--seki-muted);--seki-select-option-bg-selected:var(--seki-muted);--seki-select-group-label-padding:0.5rem 0.75rem;--seki-select-group-label-font-size:var(--seki-font-size-xs);--seki-select-group-label-font-weight:var(--seki-font-semibold);--seki-select-group-label-color:var(--seki-muted-foreground);--seki-select-group-separator:1px solid var(--seki-border)}:host{--seki-spacing-0:0;--seki-spacing-0-5:0.125rem;--seki-spacing-1:0.25rem;--seki-spacing-1-5:0.375rem;--seki-spacing-2:0.5rem;--seki-spacing-2-5:0.625rem;--seki-spacing-3:0.75rem;--seki-spacing-3-5:0.875rem;--seki-spacing-4:1rem;--seki-spacing-5:1.25rem;--seki-spacing-6:1.5rem;--seki-spacing-8:2rem;--seki-spacing-10:2.5rem;--seki-spacing-12:3rem;--seki-spacing-16:4rem;--seki-spacing-20:5rem;--seki-spacing-24:6rem;--seki-input-height-sm:2rem;--seki-input-height-md:2.5rem;--seki-input-height-lg:3rem;--seki-input-padding-x:0.75rem;--seki-input-padding-y:0.5rem;--seki-input-font-size:0.875rem;--seki-input-ring-offset:2px}:host{--seki-shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--seki-shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--seki-shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.15), 0 4px 6px -4px rgb(0 0 0 / 0.1)}:host{--seki-font-sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
|
2
2
|
Arial, sans-serif;--seki-font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;--seki-text-xs:0.75rem;--seki-text-sm:0.875rem;--seki-text-base:1rem;--seki-text-lg:1.125rem;--seki-text-xl:1.25rem;--seki-text-2xl:1.5rem;--seki-text-3xl:1.875rem;--seki-text-4xl:2.25rem;--seki-font-normal:400;--seki-font-medium:500;--seki-font-semibold:600;--seki-font-bold:700;--seki-leading-tight:1.25;--seki-leading-normal:1.5;--seki-leading-relaxed:1.75}:host{--seki-radius-sm:0.25rem;--seki-radius-md:0.375rem;--seki-radius-lg:0.5rem;--seki-radius-xl:1rem;}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,g as
|
|
1
|
+
import{p as e,g as a,b as i}from"./p-CuXbV_yz.js";export{s as setNonce}from"./p-CuXbV_yz.js";(()=>{const a=import.meta.url,i={};return""!==a&&(i.resourcesUrl=new URL(".",a).href),e(i)})().then((async e=>(await a(),i([["p-62236175",[[257,"seki-button",{variant:[1],size:[1],disabled:[4],type:[1],ariaLabel:[1,"aria-label"]}]]],["p-eb19f073",[[257,"seki-field",{orientation:[1],invalid:[4]}]]],["p-0e89720a",[[257,"seki-field-description",{descriptorId:[1,"descriptor-id"],componentId:[32],getId:[64]}]]],["p-93d70750",[[257,"seki-field-error",{errorId:[1,"error-id"],visible:[4],componentId:[32],previousVisible:[32],getId:[64],setVisible:[64]},null,{visible:["handleVisibleChange"]}]]],["p-4eef5a47",[[257,"seki-field-group",{gap:[1]}]]],["p-23a61342",[[257,"seki-field-label",{htmlFor:[1,"html-for"],required:[4]}]]],["p-0f64a7dd",[[257,"seki-field-legend"]]],["p-aad78e67",[[257,"seki-fieldset",{disabled:[4]}]]],["p-c878de6d",[[321,"seki-input",{type:[1],value:[1537],placeholder:[1],disabled:[4],readonly:[4],required:[4],name:[1],autocomplete:[1],min:[8],max:[8],step:[8],pattern:[1],minlength:[2],maxlength:[2],size:[1],invalid:[4],ariaLabel:[1,"aria-label"],ariaDescribedby:[1,"aria-describedby"]}]]],["p-c93edddc",[[257,"seki-select",{value:[1032],defaultValue:[8,"default-value"],multiple:[4],placeholder:[1],disabled:[4],required:[4],open:[1028],defaultOpen:[4,"default-open"],name:[1],maxVisiblePills:[2,"max-visible-pills"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],placement:[1],maxHeight:[1,"max-height"],internalValue:[32],isOpen:[32],focusedOptionValue:[32],registeredOptions:[32],hasBeenActivated:[32],searchBuffer:[32],searchActive:[32],openDropdown:[64],closeDropdown:[64],focusTrigger:[64],clearSelection:[64],handleKeyboard:[64]},null,{value:["handleValuePropChange"],open:["handleOpenPropChange"],isOpen:["handleIsOpenChange"],internalValue:["handleInternalValueChange"]}]]],["p-6e238adf",[[257,"seki-select-content",{forceUpdate:[32],scrollToOption:[64]}]]],["p-20eb85c9",[[257,"seki-select-group",{label:[1]}]]],["p-d7492f49",[[257,"seki-select-option",{value:[8],label:[1],disabled:[4]}]]],["p-eefbc037",[[257,"seki-select-trigger",{forceUpdate:[32]}]]],["p-5852ad8e",[[257,"seki-skeleton",{ariaLabel:[1,"aria-label"]}]]],["p-9fe07f6e",[[257,"seki-switch",{checked:[4],defaultChecked:[4,"default-checked"],disabled:[4],required:[4],name:[1],value:[1],ariaLabel:[1,"aria-label"],internalChecked:[32]},[[0,"keydown","handleKeyDown"]]]]]],e))));
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
|
+
import type { SelectValue, SelectChangeEventDetail, SelectOpenChangeEventDetail, SelectValidateEventDetail, SelectOption, SelectContext, SelectPlacement } from '../../utils/select';
|
|
3
|
+
/**
|
|
4
|
+
* @slot - Content containing seki-select-trigger and seki-select-content
|
|
5
|
+
*/
|
|
6
|
+
export declare class SekiSelect {
|
|
7
|
+
el: HTMLElement;
|
|
8
|
+
/** Current selected value (controlled mode) */
|
|
9
|
+
value?: SelectValue;
|
|
10
|
+
/** Initial selected value (uncontrolled mode) */
|
|
11
|
+
defaultValue?: SelectValue;
|
|
12
|
+
/** Enable multi-select mode */
|
|
13
|
+
multiple: boolean;
|
|
14
|
+
/** Placeholder text shown when no selection */
|
|
15
|
+
placeholder: string;
|
|
16
|
+
/** Disable all interactions */
|
|
17
|
+
disabled: boolean;
|
|
18
|
+
/** Mark as required for form validation */
|
|
19
|
+
required: boolean;
|
|
20
|
+
/** Control dropdown open state (controlled mode) */
|
|
21
|
+
open?: boolean;
|
|
22
|
+
/** Initial dropdown open state (uncontrolled mode) */
|
|
23
|
+
defaultOpen: boolean;
|
|
24
|
+
/** Form field name for form submission */
|
|
25
|
+
name?: string;
|
|
26
|
+
/** Maximum visible pills in multi-select mode */
|
|
27
|
+
maxVisiblePills: number;
|
|
28
|
+
/** Accessible label for screen readers */
|
|
29
|
+
ariaLabel?: string;
|
|
30
|
+
/** ID of element that labels this select */
|
|
31
|
+
ariaLabelledby?: string;
|
|
32
|
+
/** ID of element that describes this select */
|
|
33
|
+
ariaDescribedby?: string;
|
|
34
|
+
/** Preferred dropdown placement */
|
|
35
|
+
placement: SelectPlacement;
|
|
36
|
+
/** Maximum dropdown height */
|
|
37
|
+
maxHeight: string;
|
|
38
|
+
/** Emitted when selected value changes */
|
|
39
|
+
sekiChange: EventEmitter<SelectChangeEventDetail>;
|
|
40
|
+
/** Emitted when dropdown open state changes */
|
|
41
|
+
sekiOpenChange: EventEmitter<SelectOpenChangeEventDetail>;
|
|
42
|
+
/** Emitted when validation state changes */
|
|
43
|
+
sekiValidate: EventEmitter<SelectValidateEventDetail>;
|
|
44
|
+
internalValue: SelectValue;
|
|
45
|
+
isOpen: boolean;
|
|
46
|
+
focusedOptionValue: string | number | null;
|
|
47
|
+
registeredOptions: SelectOption[];
|
|
48
|
+
hasBeenActivated: boolean;
|
|
49
|
+
searchBuffer: string;
|
|
50
|
+
searchActive: boolean;
|
|
51
|
+
private contentId;
|
|
52
|
+
private triggerId;
|
|
53
|
+
private searchTimeoutId;
|
|
54
|
+
private searchDebounce;
|
|
55
|
+
private clickOutsideListener?;
|
|
56
|
+
componentWillLoad(): void;
|
|
57
|
+
componentDidLoad(): void;
|
|
58
|
+
componentDidRender(): void;
|
|
59
|
+
disconnectedCallback(): void;
|
|
60
|
+
handleValuePropChange(newValue: SelectValue): void;
|
|
61
|
+
handleOpenPropChange(newOpen: boolean): void;
|
|
62
|
+
handleIsOpenChange(): void;
|
|
63
|
+
handleInternalValueChange(): void;
|
|
64
|
+
private updateContextOnElement;
|
|
65
|
+
private handleClickOutside;
|
|
66
|
+
/** Programmatically open the dropdown */
|
|
67
|
+
openDropdown(): Promise<void>;
|
|
68
|
+
/** Programmatically close the dropdown */
|
|
69
|
+
closeDropdown(): Promise<void>;
|
|
70
|
+
/** Focus the trigger element */
|
|
71
|
+
focusTrigger(): Promise<void>;
|
|
72
|
+
/** Clear all selections */
|
|
73
|
+
clearSelection(): Promise<void>;
|
|
74
|
+
/** Handle keyboard navigation (arrow keys, typeahead, etc.) */
|
|
75
|
+
handleKeyboard(event: KeyboardEvent): Promise<void>;
|
|
76
|
+
private focusNextOption;
|
|
77
|
+
private focusPreviousOption;
|
|
78
|
+
private addToSearchBuffer;
|
|
79
|
+
handleValueChange: (newValue: SelectValue) => void;
|
|
80
|
+
handleOpenChange: (open: boolean) => void;
|
|
81
|
+
handleOptionFocus: (value: string | number) => void;
|
|
82
|
+
handleOptionSelect: (value: string | number) => void;
|
|
83
|
+
isValueSelected: (value: string | number) => boolean;
|
|
84
|
+
getSelectedOptions: () => SelectOption[];
|
|
85
|
+
registerOption: (option: SelectOption) => void;
|
|
86
|
+
unregisterOption: (value: string | number) => void;
|
|
87
|
+
validateRequired: () => void;
|
|
88
|
+
handleValidate: (valid: boolean, errorMessage?: string) => void;
|
|
89
|
+
get selectContext(): SelectContext;
|
|
90
|
+
render(): any;
|
|
91
|
+
private renderHiddenNativeElement;
|
|
92
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @slot - Options and groups
|
|
3
|
+
*/
|
|
4
|
+
export declare class SekiSelectContent {
|
|
5
|
+
el: HTMLElement;
|
|
6
|
+
forceUpdate: number;
|
|
7
|
+
private scrollContainerRef?;
|
|
8
|
+
componentDidLoad(): void;
|
|
9
|
+
disconnectedCallback(): void;
|
|
10
|
+
private handleParentOpenChange;
|
|
11
|
+
/** Scroll to make an option visible */
|
|
12
|
+
scrollToOption(optionId: string): Promise<void>;
|
|
13
|
+
private getSelectContext;
|
|
14
|
+
render(): any;
|
|
15
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { EventEmitter } from '../../stencil-public-runtime';
|
|
2
|
+
/**
|
|
3
|
+
* @slot - Option content
|
|
4
|
+
* @slot selected-indicator - Custom selected indicator
|
|
5
|
+
*/
|
|
6
|
+
export declare class SekiSelectOption {
|
|
7
|
+
el: HTMLElement;
|
|
8
|
+
/** Unique identifier for the option (required) */
|
|
9
|
+
value: string | number;
|
|
10
|
+
/** Display text for the option */
|
|
11
|
+
label?: string;
|
|
12
|
+
/** Whether the option is disabled */
|
|
13
|
+
disabled: boolean;
|
|
14
|
+
/** Emitted when option is selected */
|
|
15
|
+
sekiOptionSelect: EventEmitter<{
|
|
16
|
+
value: string | number;
|
|
17
|
+
}>;
|
|
18
|
+
/** Emitted when option receives focus */
|
|
19
|
+
sekiOptionFocus: EventEmitter<{
|
|
20
|
+
value: string | number;
|
|
21
|
+
}>;
|
|
22
|
+
private optionId;
|
|
23
|
+
componentDidLoad(): void;
|
|
24
|
+
disconnectedCallback(): void;
|
|
25
|
+
private handleOptionClick;
|
|
26
|
+
private handleOptionFocus;
|
|
27
|
+
private handleOptionKeyDown;
|
|
28
|
+
private getSelectContext;
|
|
29
|
+
render(): any;
|
|
30
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @slot - Custom trigger content
|
|
3
|
+
* @slot pill - Custom pill rendering in multi-select mode
|
|
4
|
+
*/
|
|
5
|
+
export declare class SekiSelectTrigger {
|
|
6
|
+
el: HTMLElement;
|
|
7
|
+
forceUpdate: number;
|
|
8
|
+
private buttonRef?;
|
|
9
|
+
componentDidLoad(): void;
|
|
10
|
+
disconnectedCallback(): void;
|
|
11
|
+
private handleParentOpenChange;
|
|
12
|
+
private handleParentValueChange;
|
|
13
|
+
private handleButtonClick;
|
|
14
|
+
private handleButtonKeyDown;
|
|
15
|
+
private getSelectContext;
|
|
16
|
+
private renderPlaceholder;
|
|
17
|
+
private renderSingleValue;
|
|
18
|
+
private renderMultiValue;
|
|
19
|
+
private handlePillRemove;
|
|
20
|
+
render(): any;
|
|
21
|
+
}
|