@sekiui/elements 0.0.87 → 0.1.0

package/dist/types/components/sheet/seki-sheet.d.ts

@@ -19,10 +19,19 @@ import { EventEmitter } from '../../stencil-public-runtime';
  */
 export declare class SekiSheet {
     el: HTMLElement;
+    /**
+     * Controlled open state. Also readable/writable as the `open` attribute, so
+     * `<seki-sheet open>` renders open with no script involved.
+     */
+    open: boolean;
+    /**
+     * Initial open state for uncontrolled usage
+     */
+    defaultOpen: boolean;
     /**
      * Internal state for sheet open/closed
      */
-    isOpen: boolean;
+    _isOpen: boolean;
     /**
      * Emitted when the sheet opens
      */
@@ -31,20 +40,27 @@ export declare class SekiSheet {
      * Emitted when the sheet closes
      */
     sheetClose: EventEmitter<void>;
+    /**
+     * Emitted whenever the open state changes. Matches the dialog/popover/collapsible
+     * event shape so a consumer can listen to one event name across every overlay.
+     */
+    sekiOpenChange: EventEmitter<boolean>;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    handleOpenPropChange(newValue: boolean): void;
     /**
      * Opens the sheet
      */
-    open(): Promise<void>;
+    openSheet(): Promise<void>;
     /**
      * Closes the sheet
      */
-    close(): Promise<void>;
-    private updateContext;
-    componentDidLoad(): void;
+    closeSheet(): Promise<void>;
     /**
      * Toggles the sheet
      */
-    toggle(): Promise<void>;
+    toggleSheet(): Promise<void>;
+    private updateContext;
     handleTriggerClick(): void;
     handleCloseSheet(): void;
     handleKeydown(ev: KeyboardEvent): void;

package/dist/types/components/slider/seki-slider.d.ts

@@ -27,7 +27,11 @@ export declare class SekiSlider {
      */
     step: number;
     /**
-     * Controlled value. When provided, component operates in controlled mode.
+     * Current value. In HTML this attribute is the *initial* value (as with
+     * `<input type="range" value="…">`) and the component keeps it in step with
+     * dragging. Assigning the property at any time drives the value, so a host
+     * framework can still fully control the slider — including vetoing a drag by
+     * writing the previous value back in its `sekiInput`/`sekiChange` handler.
      */
     value?: number;
     /**
@@ -71,7 +75,12 @@ export declare class SekiSlider {
         value: number;
     }>;
     componentWillLoad(): void;
-    handleValueChange(): void;
+    /**
+     * Mirror an externally-assigned `value` onto the rendered value. This is what
+     * keeps controlled usage working: a consumer writing `el.value = n` (or writing
+     * the old value back to reject a drag) always wins.
+     */
+    handleValueChange(newValue: number | undefined): void;
     handleDisabledChange(): void;
     /**
      * Mirror the current value into the associated form via ElementInternals.

package/dist/types/components/switch/seki-switch.d.ts

@@ -11,7 +11,11 @@ import { EventEmitter } from '../../stencil-public-runtime';
 export declare class SekiSwitch {
     el: HTMLElement;
     /**
-     * @description Controlled checked state. When provided, component operates in controlled mode.
+     * @description Checked state. In HTML this attribute is the *initial* state (as
+     * with `<input checked>`), and the component keeps it in step with user
+     * interaction. Assigning the property at any time drives the state, so a host
+     * framework can still fully control the switch — including vetoing a user
+     * toggle by writing the previous value back in its `sekiChange` handler.
      */
     checked?: boolean;
     /**
@@ -39,7 +43,8 @@ export declare class SekiSwitch {
      */
     ariaLabel?: string;
     /**
-     * @description Internal checked state for uncontrolled mode.
+     * @description Rendered checked state. Seeded from `checked` (or `defaultChecked`)
+     * and thereafter the single source of truth for rendering.
      */
     internalChecked: boolean;
     /**
@@ -49,11 +54,17 @@ export declare class SekiSwitch {
         checked: boolean;
     }>;
     /**
-     * Initialize internal checked state from defaultChecked
+     * Seed internal state from `checked` when authored, else from `defaultChecked`.
      */
     componentWillLoad(): void;
     /**
-     * Get current checked state (controlled vs uncontrolled)
+     * Mirror externally-assigned `checked` onto the rendered state. This is what
+     * keeps controlled usage working: a consumer writing `el.checked = x` (or
+     * writing the old value back to reject a toggle) always wins.
+     */
+    checkedChanged(newValue: boolean | undefined): void;
+    /**
+     * Get current checked state
      */
     private get isChecked();
     /**

package/dist/types/components/toggle/seki-toggle.d.ts

@@ -81,6 +81,13 @@ export declare class SekiToggle {
      * Get current pressed state (from group context or local state)
      */
     private get isPressed();
+    /**
+     * Mirror an externally-assigned `pressed` onto the rendered state. This is what
+     * keeps controlled usage working: a consumer writing `el.pressed = x` (or
+     * writing the old value back to reject a toggle) always wins. Ignored inside a
+     * toggle group, where the group owns the pressed state.
+     */
+    pressedChanged(newValue: boolean | undefined): void;
     /**
      * Toggle pressed state and emit event
      */

package/dist/types/components/tooltip/seki-tooltip.d.ts

@@ -52,6 +52,17 @@ export declare class SekiTooltip {
      * @min 0
      */
     offset: number;
+    /**
+     * Controlled open state. Reflects to the `open` attribute, so
+     * `<seki-tooltip open>` renders visible with no script involved.
+     * @default false
+     */
+    open: boolean;
+    /**
+     * Initial open state for uncontrolled usage
+     * @default false
+     */
+    defaultOpen: boolean;
     /**
      * Internal state: whether tooltip is currently visible
      */
@@ -142,7 +153,9 @@ export declare class SekiTooltip {
      * Remove event listeners from trigger
      */
     private detachTriggerListeners;
+    componentWillLoad(): void;
     componentDidLoad(): void;
+    openChanged(newValue: boolean): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;

package/dist/types/components.d.ts

@@ -1070,7 +1070,7 @@ export namespace Components {
          */
         "ariaLabel"?: string;
         /**
-          * Controlled checked state. When provided, component operates in controlled mode.
+          * Checked state. In HTML this attribute is the *initial* state (as with `<input checked>`) and the component keeps it in step with user interaction. Assigning the property at any time drives the state, so a host framework can still fully control the checkbox — including vetoing a user toggle by writing the previous value back in its `sekiChange` handler.
          */
         "checked"?: boolean;
         /**
@@ -1347,9 +1347,9 @@ export namespace Components {
          */
         "shortcut"?: string;
         /**
-          * Unique value emitted on select
+          * Unique value emitted on select. Optional: when omitted it falls back to the item's own text, so plain-HTML usage (`<seki-command-item>Profile</…>`) emits something meaningful instead of `undefined`.
          */
-        "value": string;
+        "value"?: string;
     }
     /**
      * Command list - scrollable container for items and groups
@@ -1552,7 +1552,12 @@ export namespace Components {
         /**
           * Close the date picker popover
          */
-        "close": () => Promise<void>;
+        "closeDatePicker": () => Promise<void>;
+        /**
+          * Initial open state for uncontrolled usage
+          * @default false
+         */
+        "defaultOpen": boolean;
         /**
           * Whether the date picker is disabled
           * @default false
@@ -1580,10 +1585,15 @@ export namespace Components {
           * Form field name
          */
         "name"?: string;
+        /**
+          * Controlled open state of the popover. Also readable/writable as the `open` attribute, so `<seki-date-picker open>` renders open with no script involved.
+          * @default false
+         */
+        "open": boolean;
         /**
           * Open the date picker popover
          */
-        "open": () => Promise<void>;
+        "openDatePicker": () => Promise<void>;
         /**
           * Placeholder text when no date is selected
           * @default 'Pick a date'
@@ -1605,7 +1615,7 @@ export namespace Components {
         /**
           * Toggle the date picker popover
          */
-        "toggle": () => Promise<void>;
+        "toggleDatePicker": () => Promise<void>;
         /**
           * Currently selected date (for single mode)
          */
@@ -1722,11 +1732,21 @@ export namespace Components {
         /**
           * Closes the drawer
          */
-        "close": () => Promise<void>;
+        "closeDrawer": () => Promise<void>;
+        /**
+          * Initial open state for uncontrolled usage
+          * @default false
+         */
+        "defaultOpen": boolean;
+        /**
+          * Controlled open state. Also readable/writable as the `open` attribute, so `<seki-drawer open>` renders open with no script involved.
+          * @default false
+         */
+        "open": boolean;
         /**
           * Opens the drawer
          */
-        "open": () => Promise<void>;
+        "openDrawer": () => Promise<void>;
         /**
           * Snaps to a specific point (0-1)
          */
@@ -1734,7 +1754,7 @@ export namespace Components {
         /**
           * Toggles the drawer
          */
-        "toggle": () => Promise<void>;
+        "toggleDrawer": () => Promise<void>;
     }
     /**
      * seki-drawer-content: Container for drawer content with gesture support
@@ -2038,16 +2058,34 @@ export namespace Components {
           * @default 300
          */
         "closeDelay": number;
+        /**
+          * Close the hover card immediately, skipping `closeDelay`
+         */
+        "closeHoverCard": () => Promise<void>;
+        /**
+          * Initial open state for uncontrolled usage
+          * @default false
+         */
+        "defaultOpen": boolean;
         /**
           * Disable hover card interactions
           * @default false
          */
         "disabled": boolean;
+        /**
+          * Controlled open state. Reflects to the `open` attribute, so `<seki-hover-card open>` renders open with no script involved.
+          * @default false
+         */
+        "open": boolean;
         /**
           * Milliseconds to delay before opening the hover card
           * @default 200
          */
         "openDelay": number;
+        /**
+          * Open the hover card immediately, skipping `openDelay`
+         */
+        "openHoverCard": () => Promise<void>;
         /**
           * Preferred side for hover card content placement
           * @default 'bottom'
@@ -2462,9 +2500,9 @@ export namespace Components {
      */
     interface SekiMenubarMenu {
         /**
-          * Unique identifier for this menu
+          * Unique identifier for this menu. Optional: when omitted, one is generated and reflected onto the host. Requiring the author to supply it made every plain-HTML menubar inert, because the trigger resolves its menu through `closest('seki-menubar-menu').getAttribute('menu-id')` and bailed on null.
          */
-        "menuId": string;
+        "menuId"?: string;
     }
     /**
      * Menubar radio item - single-select option
@@ -3541,15 +3579,25 @@ export namespace Components {
         /**
           * Closes the sheet
          */
-        "close": () => Promise<void>;
+        "closeSheet": () => Promise<void>;
+        /**
+          * Initial open state for uncontrolled usage
+          * @default false
+         */
+        "defaultOpen": boolean;
+        /**
+          * Controlled open state. Also readable/writable as the `open` attribute, so `<seki-sheet open>` renders open with no script involved.
+          * @default false
+         */
+        "open": boolean;
         /**
           * Opens the sheet
          */
-        "open": () => Promise<void>;
+        "openSheet": () => Promise<void>;
         /**
           * Toggles the sheet
          */
-        "toggle": () => Promise<void>;
+        "toggleSheet": () => Promise<void>;
     }
     /**
      * seki-sheet-close: Close button for the sheet
@@ -3824,7 +3872,7 @@ export namespace Components {
          */
         "step": number;
         /**
-          * Controlled value. When provided, component operates in controlled mode.
+          * Current value. In HTML this attribute is the *initial* value (as with `<input type="range" value="…">`) and the component keeps it in step with dragging. Assigning the property at any time drives the value, so a host framework can still fully control the slider — including vetoing a drag by writing the previous value back in its `sekiInput`/`sekiChange` handler.
          */
         "value"?: number;
     }
@@ -3874,7 +3922,7 @@ export namespace Components {
          */
         "ariaLabel"?: string;
         /**
-          * @description Controlled checked state. When provided, component operates in controlled mode.
+          * @description Checked state. In HTML this attribute is the *initial* state (as with `<input checked>`), and the component keeps it in step with user interaction. Assigning the property at any time drives the state, so a host framework can still fully control the switch — including vetoing a user toggle by writing the previous value back in its `sekiChange` handler.
          */
         "checked"?: boolean;
         /**
@@ -4244,6 +4292,11 @@ export namespace Components {
      * ```
      */
     interface SekiTooltip {
+        /**
+          * Initial open state for uncontrolled usage
+          * @default false
+         */
+        "defaultOpen": boolean;
         /**
           * Milliseconds to delay before showing tooltip on hover
           * @default 0
@@ -4267,6 +4320,11 @@ export namespace Components {
           * @min 0
          */
         "offset": number;
+        /**
+          * Controlled open state. Reflects to the `open` attribute, so `<seki-tooltip open>` renders visible with no script involved.
+          * @default false
+         */
+        "open": boolean;
         /**
           * Show tooltip programmatically
           * @returns Promise resolves when tooltip is visible
@@ -5576,6 +5634,7 @@ declare global {
     };
     interface HTMLSekiCommandItemElementEventMap {
         "sekiCommandSelect": string;
+        "sekiCommandHighlight": void;
     }
     /**
      * Command item - selectable option in the command list
@@ -5692,6 +5751,7 @@ declare global {
         "sekiChange": Date | DateRange1;
         "sekiOpen": void;
         "sekiClose": void;
+        "sekiOpenChange": boolean;
     }
     /**
      * seki-date-picker: A date picker component with popover calendar
@@ -5866,6 +5926,7 @@ declare global {
         "drawerOpen": void;
         "drawerClose": void;
         "drawerSnap": { point: number };
+        "sekiOpenChange": boolean;
     }
     /**
      * seki-drawer: Mobile-friendly drawer component with swipe gestures
@@ -7325,6 +7386,7 @@ declare global {
     interface HTMLSekiSheetElementEventMap {
         "sheetOpen": void;
         "sheetClose": void;
+        "sekiOpenChange": boolean;
     }
     /**
      * seki-sheet: Root sheet component (slide-out panel)
@@ -9197,7 +9259,7 @@ declare namespace LocalJSX {
          */
         "ariaLabel"?: string;
         /**
-          * Controlled checked state. When provided, component operates in controlled mode.
+          * Checked state. In HTML this attribute is the *initial* state (as with `<input checked>`) and the component keeps it in step with user interaction. Assigning the property at any time drives the state, so a host framework can still fully control the checkbox — including vetoing a user toggle by writing the previous value back in its `sekiChange` handler.
          */
         "checked"?: boolean;
         /**
@@ -9473,6 +9535,10 @@ declare namespace LocalJSX {
           * Additional search terms (space-separated)
          */
         "keywords"?: string;
+        /**
+          * Emitted when the pointer moves onto this item, asking seki-command to move its highlight here. seki-command identifies the item from the event target.
+         */
+        "onSekiCommandHighlight"?: (event: SekiCommandItemCustomEvent<void>) => void;
         /**
           * Emitted when this item is selected
          */
@@ -9482,9 +9548,9 @@ declare namespace LocalJSX {
          */
         "shortcut"?: string;
         /**
-          * Unique value emitted on select
+          * Unique value emitted on select. Optional: when omitted it falls back to the item's own text, so plain-HTML usage (`<seki-command-item>Profile</…>`) emits something meaningful instead of `undefined`.
          */
-        "value": string;
+        "value"?: string;
     }
     /**
      * Command list - scrollable container for items and groups
@@ -9682,6 +9748,11 @@ declare namespace LocalJSX {
           * ARIA label for accessibility
          */
         "ariaLabel"?: string;
+        /**
+          * Initial open state for uncontrolled usage
+          * @default false
+         */
+        "defaultOpen"?: boolean;
         /**
           * Whether the date picker is disabled
           * @default false
@@ -9721,6 +9792,15 @@ declare namespace LocalJSX {
           * Emitted when the popover opens
          */
         "onSekiOpen"?: (event: SekiDatePickerCustomEvent<void>) => void;
+        /**
+          * Emitted whenever the open state changes. Matches the dialog/popover/collapsible event shape so a consumer can listen to one event name across every overlay.
+         */
+        "onSekiOpenChange"?: (event: SekiDatePickerCustomEvent<boolean>) => void;
+        /**
+          * Controlled open state of the popover. Also readable/writable as the `open` attribute, so `<seki-date-picker open>` renders open with no script involved.
+          * @default false
+         */
+        "open"?: boolean;
         /**
           * Placeholder text when no date is selected
           * @default 'Pick a date'
@@ -9852,6 +9932,11 @@ declare namespace LocalJSX {
      * </seki-drawer>
      */
     interface SekiDrawer {
+        /**
+          * Initial open state for uncontrolled usage
+          * @default false
+         */
+        "defaultOpen"?: boolean;
         /**
           * Emitted when the drawer closes
          */
@@ -9864,6 +9949,15 @@ declare namespace LocalJSX {
           * Emitted when the drawer snaps to a point
          */
         "onDrawerSnap"?: (event: SekiDrawerCustomEvent<{ point: number }>) => void;
+        /**
+          * Emitted whenever the open state changes. Matches the dialog/popover/collapsible event shape so a consumer can listen to one event name across every overlay.
+         */
+        "onSekiOpenChange"?: (event: SekiDrawerCustomEvent<boolean>) => void;
+        /**
+          * Controlled open state. Also readable/writable as the `open` attribute, so `<seki-drawer open>` renders open with no script involved.
+          * @default false
+         */
+        "open"?: boolean;
     }
     /**
      * seki-drawer-content: Container for drawer content with gesture support
@@ -10180,6 +10274,11 @@ declare namespace LocalJSX {
           * @default 300
          */
         "closeDelay"?: number;
+        /**
+          * Initial open state for uncontrolled usage
+          * @default false
+         */
+        "defaultOpen"?: boolean;
         /**
           * Disable hover card interactions
           * @default false
@@ -10189,6 +10288,11 @@ declare namespace LocalJSX {
           * Emitted when open state changes
          */
         "onSekiOpenChange"?: (event: SekiHoverCardCustomEvent<{ open: boolean }>) => void;
+        /**
+          * Controlled open state. Reflects to the `open` attribute, so `<seki-hover-card open>` renders open with no script involved.
+          * @default false
+         */
+        "open"?: boolean;
         /**
           * Milliseconds to delay before opening the hover card
           * @default 200
@@ -10680,9 +10784,9 @@ declare namespace LocalJSX {
      */
     interface SekiMenubarMenu {
         /**
-          * Unique identifier for this menu
+          * Unique identifier for this menu. Optional: when omitted, one is generated and reflected onto the host. Requiring the author to supply it made every plain-HTML menubar inert, because the trigger resolves its menu through `closest('seki-menubar-menu').getAttribute('menu-id')` and bailed on null.
          */
-        "menuId": string;
+        "menuId"?: string;
     }
     /**
      * Menubar radio item - single-select option
@@ -11750,6 +11854,15 @@ declare namespace LocalJSX {
      * </seki-sheet>
      */
     interface SekiSheet {
+        /**
+          * Initial open state for uncontrolled usage
+          * @default false
+         */
+        "defaultOpen"?: boolean;
+        /**
+          * Emitted whenever the open state changes. Matches the dialog/popover/collapsible event shape so a consumer can listen to one event name across every overlay.
+         */
+        "onSekiOpenChange"?: (event: SekiSheetCustomEvent<boolean>) => void;
         /**
           * Emitted when the sheet closes
          */
@@ -11758,6 +11871,11 @@ declare namespace LocalJSX {
           * Emitted when the sheet opens
          */
         "onSheetOpen"?: (event: SekiSheetCustomEvent<void>) => void;
+        /**
+          * Controlled open state. Also readable/writable as the `open` attribute, so `<seki-sheet open>` renders open with no script involved.
+          * @default false
+         */
+        "open"?: boolean;
     }
     /**
      * seki-sheet-close: Close button for the sheet
@@ -12060,7 +12178,7 @@ declare namespace LocalJSX {
          */
         "step"?: number;
         /**
-          * Controlled value. When provided, component operates in controlled mode.
+          * Current value. In HTML this attribute is the *initial* value (as with `<input type="range" value="…">`) and the component keeps it in step with dragging. Assigning the property at any time drives the value, so a host framework can still fully control the slider — including vetoing a drag by writing the previous value back in its `sekiInput`/`sekiChange` handler.
          */
         "value"?: number;
     }
@@ -12110,7 +12228,7 @@ declare namespace LocalJSX {
          */
         "ariaLabel"?: string;
         /**
-          * @description Controlled checked state. When provided, component operates in controlled mode.
+          * @description Checked state. In HTML this attribute is the *initial* state (as with `<input checked>`), and the component keeps it in step with user interaction. Assigning the property at any time drives the state, so a host framework can still fully control the switch — including vetoing a user toggle by writing the previous value back in its `sekiChange` handler.
          */
         "checked"?: boolean;
         /**
@@ -12512,6 +12630,11 @@ declare namespace LocalJSX {
      * ```
      */
     interface SekiTooltip {
+        /**
+          * Initial open state for uncontrolled usage
+          * @default false
+         */
+        "defaultOpen"?: boolean;
         /**
           * Milliseconds to delay before showing tooltip on hover
           * @default 0
@@ -12542,6 +12665,11 @@ declare namespace LocalJSX {
           * Event emitted when tooltip becomes visible
          */
         "onShowTooltip"?: (event: SekiTooltipCustomEvent<TooltipShowDetail>) => void;
+        /**
+          * Controlled open state. Reflects to the `open` attribute, so `<seki-tooltip open>` renders visible with no script involved.
+          * @default false
+         */
+        "open"?: boolean;
         /**
           * Preferred positioning side for tooltip 'auto' uses intelligent repositioning based on viewport space
           * @default 'auto'

package/dist/types/utils/positioning.d.ts

@@ -32,3 +32,15 @@ export interface AnchoredPosition {
     side: Side;
 }
 export declare function computeAnchoredPosition(triggerRect: DOMRect, contentRect: Size, options: AnchoredPositionOptions): AnchoredPosition;
+/**
+ * Measure an anchor element that may be a `display: contents` custom-element host.
+ *
+ * Several trigger components (seki-menubar-trigger, seki-menubar-sub-trigger, …)
+ * set `:host { display: contents }`, which means the host generates no box of its
+ * own and `getBoundingClientRect()` returns an all-zero rect. Anchoring a popup to
+ * that rect pins it to the viewport origin instead of to the trigger — the menubar
+ * dropdown rendered in the top-left corner of the page because of exactly this.
+ *
+ * Falls through to the first laid-out element inside the host's shadow root.
+ */
+export declare function getAnchorRect(anchor: Element | null | undefined): DOMRect | null;

package/dist/types/utils/select/index.d.ts

@@ -4,3 +4,4 @@
  */
 export * from './types';
 export * from './select-context';
+export * from './option-id';

package/dist/types/utils/select/option-id.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Deterministic, per-select-instance option id.
+ *
+ * seki-select's `contentId` (see `SelectContext.contentId` in
+ * `src/utils/select/types.ts`) is randomized once per `<seki-select>`
+ * instance. Prefixing the option id with it keeps ids collision-free across
+ * multiple `<seki-select>` instances on the same page that happen to share
+ * an option `value` — this only matters now that seki-select-option renders
+ * in scoped (non-shadow) mode and its `id` is a real, page-scoped DOM id
+ * assistive tech can actually resolve (see #300). Exported so both
+ * seki-select-option (which sets the id) and seki-select-trigger (which
+ * references it via aria-activedescendant) compute the exact same string.
+ */
+export declare function buildOptionId(contentId: string, value: string | number): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sekiui/elements",
-  "version": "0.0.87",
+  "version": "0.1.0",
   "description": "Modern, accessible Web Components with shadcn/ui-inspired design",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -45,6 +45,8 @@
     "test:e2e": "playwright test",
     "generate": "stencil generate",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "sitemap": "node --disable-warning=MODULE_TYPELESS_PACKAGE_JSON scripts/generate-sitemap.mjs",
+    "sitemap:check": "node --disable-warning=MODULE_TYPELESS_PACKAGE_JSON scripts/generate-sitemap.mjs --check",
     "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
     "storybook": "npm run build && storybook dev -p 6006",
     "build-storybook": "npm run build && storybook build",