@sky.ui/core 0.0.1

package/dist/sky-drawer/sky-drawer.js

@@ -0,0 +1,177 @@
+import{__decorate as e,__metadata as t}from"tslib";import{LitElement as o,css as r,html as s}from"lit";import{property as i,customElement as a}from"lit/decorators.js";import{resolveRadius as n}from"../helper/utils/size-resolver.js";let p=class extends o{constructor(){super(...arguments),this.open=!1,this.side="left",this.width="320px",this.height="100%",this.radius="md",this.overlay=!0,this.persistent=!0,this.closeOnEsc=!1,this.scope="viewport",this.separator=!1,this._onKeydown=e=>{this.open&&"Escape"===e.key&&this.closeOnEsc&&!this.persistent&&this.close()},this._onOverlayClick=()=>{this.persistent||(this.close(),this.dispatchEvent(new CustomEvent("drawer-overlay-click",{detail:{side:this.side,scope:this.scope},bubbles:!0,composed:!0})))}}static{this.styles=r`
+    :host {
+      display: block;
+      pointer-events: none;
+    }
+
+    :host([open]) {
+      pointer-events: auto;
+    }
+
+    :host([scope="viewport"]) {
+      position: fixed;
+      inset: 0;
+      z-index: 1000;
+    }
+
+    :host([scope="parent"]) {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    :host([scope="parent"][open]) {
+      z-index: 10;
+    }
+
+    /* Overlay */
+    .overlay {
+      position: absolute;
+      inset: 0;
+      background: var(--sky-overlay-primary);
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
+
+    :host([open][overlay]) .overlay {
+      opacity: 1;
+    }
+
+    :host(:not([overlay])) .overlay {
+      display: none;
+    }
+
+    /* Drawer panel */
+    .panel {
+      position: absolute;
+      top: 0;
+      height: var(--_height);
+      width: var(--_width);
+      background: var(--sky-glass-primary);
+      color: var(--sky-text-primary);
+      border-radius: var(--_radius);
+      box-shadow: none;
+      transform: translateX(var(--_tx));
+      transition: transform 0.28s ease;
+      will-change: transform;
+      display: flex;
+      flex-direction: column;
+     
+    }
+
+    .panel::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      backdrop-filter: var(--sky-blur-primary) var(--sky-saturation-primary) var(--sky-brightness-primary);
+      -webkit-backdrop-filter: var(--sky-blur-primary) var(--sky-saturation-primary) var(--sky-brightness-primary);
+      border-radius: inherit;
+      z-index: -1;
+    }
+
+    :host([side="left"]) .panel {
+      left: 0;
+      border-left: none;
+      border-right: var(--sky-border-primary);
+      --_tx: -100%;
+    }
+
+    :host([side="right"]) .panel {
+      right: 0;
+      border-right: none;
+      border-left: var(--sky-border-primary);
+      --_tx: 100%;
+    }
+
+    :host([open]) .panel {
+      transform: translateX(0);
+    }
+
+    /* Header and footer */
+    .header,
+    .footer {
+      flex: 0 0 auto;
+    }
+
+    ::slotted([slot="header"]) {
+      padding: var(--sky-space-3) var(--sky-space-4);
+      box-sizing: border-box;
+      border-bottom: none;
+    }
+
+    ::slotted([slot="footer"]) {
+      padding: var(--sky-space-3) var(--sky-space-4);
+      box-sizing: border-box;
+      border-top: none;
+    }
+
+    /* Optional per-slot control: put separator on the slotted node itself */
+    ::slotted([slot="header"][separator]) {
+      border-bottom: 1px solid var(--sky-border-light);
+    }
+
+    ::slotted([slot="footer"][separator]) {
+      border-top: 1px solid var(--sky-border-light);
+    }
+
+    .header-content {
+      display: flex;
+      align-items: center;
+    }
+
+    .content {
+      flex: 1 1 auto;
+      overflow: auto;
+      box-sizing: border-box;
+      padding: var(--sky-space-3) var(--sky-space-4);
+    }
+
+    sky-icon {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+    }
+
+    /* RTL support */
+    :host([dir="rtl"][side="left"]) .panel {
+      left: auto;
+      right: 0;
+      border-left: var(--sky-border-primary);
+      border-right: none;
+      --_tx: 100%;
+    }
+
+    :host([dir="rtl"][side="right"]) .panel {
+      right: auto;
+      left: 0;
+      border-right: var(--sky-border-primary);
+      border-left: none;
+      --_tx: -100%;
+    }
+  `}openDrawer(){this.open=!0}close(){this.open=!1}toggle(){this.open=!this.open}connectedCallback(){super.connectedCallback(),this._applyDims(),window.addEventListener("keydown",this._onKeydown)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this._onKeydown)}updated(e){(e.has("width")||e.has("height")||e.has("radius"))&&this._applyDims(),e.has("open")&&this.dispatchEvent(new CustomEvent("drawer-change",{detail:{open:this.open},bubbles:!0,composed:!0}))}_applyDims(){this.style.setProperty("--_width",this.width),this.style.setProperty("--_height",this.height),this.style.setProperty("--_radius",n(this.radius))}_stop(e){e.stopPropagation()}render(){return s`
+      <div
+        class="overlay"
+        part="overlay"
+        @click=${this._onOverlayClick}
+        @keydown=${this._stop}
+        tabindex="-1"
+        aria-hidden="true"
+      ></div>
+
+      <div class="panel" part="panel" @click=${this._stop}>
+        <div class="header" part="header">
+          <slot name="header"></slot>
+        </div>
+
+        <div class="content" part="content">
+          <slot></slot>
+        </div>
+
+        <div class="footer" part="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `}};e([i({type:Boolean,reflect:!0}),t("design:type",Object)],p.prototype,"open",void 0),e([i({type:String,reflect:!0}),t("design:type",String)],p.prototype,"side",void 0),e([i({type:String}),t("design:type",Object)],p.prototype,"width",void 0),e([i({type:String}),t("design:type",Object)],p.prototype,"height",void 0),e([i({type:String}),t("design:type",Object)],p.prototype,"radius",void 0),e([i({type:Boolean,reflect:!0}),t("design:type",Object)],p.prototype,"overlay",void 0),e([i({type:Boolean,reflect:!0}),t("design:type",Object)],p.prototype,"persistent",void 0),e([i({type:Boolean}),t("design:type",Object)],p.prototype,"closeOnEsc",void 0),e([i({type:String,reflect:!0}),t("design:type",String)],p.prototype,"scope",void 0),e([i({type:Boolean}),t("design:type",Object)],p.prototype,"separator",void 0),p=e([a("sky-drawer")],p);export{p as SkyDrawer};
+//# sourceMappingURL=sky-drawer.js.map

package/dist/sky-drawer/sky-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sky-drawer.js","sources":["../../src/sky-drawer/sky-drawer.ts"],"sourcesContent":[null],"names":["SkyDrawer","LitElement","constructor","this","open","side","width","height","radius","overlay","persistent","closeOnEsc","scope","separator","_onKeydown","e","key","close","_onOverlayClick","dispatchEvent","CustomEvent","detail","bubbles","composed","styles","css","openDrawer","toggle","connectedCallback","super","_applyDims","window","addEventListener","disconnectedCallback","removeEventListener","updated","changed","has","style","setProperty","resolveRadius","_stop","stopPropagation","render","html","__decorate","property","type","Boolean","reflect","prototype","String","customElement"],"mappings":"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"}

package/dist/sky-dropdown/index.d.ts

@@ -0,0 +1 @@
+export * from "./sky-dropdown";

package/dist/sky-dropdown/index.js

@@ -0,0 +1 @@
+export * from './sky-dropdown.js';

package/dist/sky-dropdown/sky-dropdown.d.ts

@@ -0,0 +1,252 @@
+import { LitElement, PropertyValues } from "lit";
+export type SkyDropdownTrigger = "click" | "hover";
+export type SkyDropdownPlacement = "bottom" | "top" | "left" | "right";
+export type SkyDropdownAlign = "start" | "center" | "end";
+export type SkyDropdownSelectDetail = {
+    value: string;
+    text: string;
+    item: HTMLElement;
+};
+/** Payload for controlled open state (`v-model:open`). */
+export type SkyDropdownOpenChangeDetail = {
+    open: boolean;
+};
+/**
+ * @element sky-dropdown
+ *
+ * @summary Accessible dropdown menu with trigger slot, smart positioning, keyboard navigation, and collision-aware popover behavior.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/dropdown
+ *
+ * @uiVModel value dropdown-select detail=value
+ * @uiVModel open open-change detail=open
+ *
+ * @slot trigger - The clickable/hoverable trigger content (e.g., a button).
+ * @slot - Default slot for menu content; typically `<sky-dropdown-item>` or any element with `role="menuitem"`.
+ *
+ * @csspart trigger - Wrapper around the slotted trigger content.
+ * @csspart content - The positioned popup container.
+ * @csspart content-inner - Scrollable inner wrapper that constrains max height.
+ *
+ * @fires {CustomEvent<void>} open - Dispatched when the dropdown is opened.
+ * @fires {CustomEvent<void>} close - Dispatched when the dropdown is closed.
+ * @fires {CustomEvent<SkyDropdownOpenChangeDetail>} open-change - Dispatched whenever open state changes (includes payload for `v-model:open`).
+ * @fires {CustomEvent<SkyDropdownSelectDetail>} dropdown-select - Dispatched when an item is activated.
+ *
+ * @property {SkyDropdownTrigger} trigger - How the dropdown opens.
+ * @property {SkyDropdownPlacement} placement - Preferred side; flips if needed.
+ * @property {SkyDropdownAlign} align - Alignment relative to trigger edge.
+ * @property {boolean} open - Whether the dropdown is open.
+ * @property {string} value - Last selected item value from `dropdown-select` (controlled selection mirror). Default: `""`.
+ * @property {"auto"|"trigger"|string} width - Popup width strategy or CSS length.
+ * @property {boolean} closeOnClick - Close when clicking an item.
+ * @property {boolean} closeOnEsc - Close on Escape.
+ * @property {number} hoverOpenDelay - Delay in milliseconds before opening on hover.
+ * @property {number} hoverCloseDelay - Delay in milliseconds before closing on hover-out.
+ * @property {number} offset - Gap in pixels between trigger and popup.
+ * @property {boolean} flip - Automatically flip placement when space is limited.
+ * @property {number} viewportPadding - Viewport edge padding for collision logic.
+ * @property {string} maxHeight - Max height CSS length for popup scroll area.
+ * @property {string} animateType - Animation preset used by popover controller.
+ * @method toggle Toggles dropdown open state.
+ * @method openDropdown Opens dropdown.
+ * @method close Closes dropdown.
+ * @method focusTrigger Focuses trigger wrapper.
+ *
+ * @Behavior
+ * - Uses `PopoverController` for intelligent positioning and collision detection
+ * - Supports both click and hover triggers with configurable delays
+ * - Automatically flips placement when insufficient viewport space
+ * - Provides keyboard navigation with roving focus
+ * - Manages accessibility attributes automatically
+ * - **click**: Opens on click, closes on click outside or Escape
+ * - **hover**: Opens on mouse enter with delay, closes on mouse leave with delay
+ * - Both modes support keyboard interaction (Space/Enter on trigger)
+ * - Trigger receives `role="button"`, `aria-expanded`, `aria-controls`
+ * - Dropdown uses `role="menu"` for screen readers
+ * - Keyboard navigation with Arrow keys, Home, End, Escape
+ * - Roving focus within menu items
+ * - Proper focus management on open/close
+ * - Respects reduced motion preferences
+ * - Supports any content with proper ARIA roles
+ * - When rendering menu items from an array, use Lit's `repeat()` with a stable key (e.g. item id or index).
+ * - Do not remove or replace the trigger slot content while the dropdown is open; positioning relies on the trigger element reference.
+ *
+ * @example
+ * ```html
+ * <sky-dropdown trigger="click" placement="bottom" align="start">
+ *   <button slot="trigger">Open Menu</button>
+ *   <sky-dropdown-item value="a">Alpha</sky-dropdown-item>
+ *   <sky-dropdown-item value="b">Beta</sky-dropdown-item>
+ *   <sky-dropdown-item value="c" disabled>Gamma (disabled)</sky-dropdown-item>
+ * </sky-dropdown>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-dropdown trigger="click" placement="bottom" align="start">
+ *     <button slot="trigger">Open Menu</button>
+ *     <sky-dropdown-item value="a">Alpha</sky-dropdown-item>
+ *     <sky-dropdown-item value="b">Beta</sky-dropdown-item>
+ *     <sky-dropdown-item value="c" disabled>Gamma (disabled)</sky-dropdown-item>
+ *   </sky-dropdown>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return (
+ *     <sky-dropdown trigger="click" placement="bottom" align="start">
+ *       <button slot="trigger">Open Menu</button>
+ *       <sky-dropdown-item value="a">Alpha</sky-dropdown-item>
+ *       <sky-dropdown-item value="b">Beta</sky-dropdown-item>
+ *       <sky-dropdown-item value="c" disabled>Gamma (disabled)</sky-dropdown-item>
+ *     </sky-dropdown>
+ *   );
+ * }
+ * ```
+ */
+export declare class SkyDropdown extends LitElement {
+    /** @public How the dropdown opens. */
+    trigger: SkyDropdownTrigger;
+    /** @public Preferred side; flips if needed. */
+    placement: SkyDropdownPlacement;
+    /** @public Alignment relative to the trigger edge. */
+    align: SkyDropdownAlign;
+    /** @public Whether the dropdown is open. */
+    open: boolean;
+    /** @public Last activated menu value (mirrors `dropdown-select` detail.value). */
+    value: string;
+    /** @public Width of the dropdown. */
+    width: "auto" | "trigger" | string;
+    /** @public Close when clicking an item. */
+    closeOnClick: boolean;
+    /** @public Close on Escape. */
+    closeOnEsc: boolean;
+    /** @public Delay (ms) before opening on hover. */
+    hoverOpenDelay: number;
+    /** @public Delay (ms) before closing after hover-out. */
+    hoverCloseDelay: number;
+    /** @public Gap in px between trigger and dropdown. */
+    offset: number;
+    /** @public Automatically flip to an available side. */
+    flip: boolean;
+    /** @public Padding from viewport edges used by collision logic. */
+    viewportPadding: number;
+    /** @public Max height (CSS length) for the popup's inner scroll area. */
+    maxHeight: string;
+    /** @public Animation preset for open/close transitions. */
+    animateType: string;
+    /** @private Reference to the trigger element. */
+    private _triggerEl;
+    /** @private Reference to the content element. */
+    private _contentEl;
+    /** Non-reactive; hover-close logic only (avoids Lit change-in-update). */
+    private _isHoveringTrigger;
+    /** Non-reactive; hover-close logic only (avoids Lit change-in-update). */
+    private _isHoveringContent;
+    /** @private Timeout ID for opening on hover. */
+    private _openTimeout;
+    /** @private Timeout ID for closing on hover out. */
+    private _closeTimeout;
+    /** @private True after firstUpdated when targets exist. */
+    private _ready;
+    /** @private Guard to avoid open<->controller loop. */
+    private _syncingFromController;
+    /** @private Popover controller instance. */
+    private dropdownPopover;
+    static styles: import("lit").CSSResult;
+    /** @protected */
+    protected firstUpdated(_changed: PropertyValues): void;
+    /** @protected */
+    updated(changed: PropertyValues): void;
+    /** @protected */
+    connectedCallback(): void;
+    /** @protected */
+    disconnectedCallback(): void;
+    /**
+     * Applies the open state to the popover controller.
+     * @param previousOpen - Previous open state
+     * @private
+     */
+    private _applyOpenToController;
+    /**
+     * Clears all pending timeouts.
+     * @private
+     */
+    private _clearTimeouts;
+    /**
+     * Synchronizes accessibility attributes on the trigger.
+     * @private
+     */
+    private _syncTriggerA11y;
+    /**
+     * Handles mouse enter on trigger for hover mode.
+     * @private
+     */
+    private _onTriggerMouseEnter;
+    /**
+     * Handles mouse leave from trigger for hover mode.
+     * @private
+     */
+    private _onTriggerMouseLeave;
+    /**
+     * Handles mouse enter on content for hover mode.
+     * @private
+     */
+    private _onContentMouseEnter;
+    /**
+     * Handles mouse leave from content for hover mode.
+     * @private
+     */
+    private _onContentMouseLeave;
+    /**
+     * Schedules closing for hover mode.
+     * @private
+     */
+    private _scheduleClose;
+    /**
+     * Toggles the dropdown open/closed.
+     * @public
+     */
+    toggle(): void;
+    /**
+     * Opens the dropdown.
+     * @public
+     */
+    openDropdown(): void;
+    /**
+     * Closes the dropdown.
+     * @public
+     */
+    close(): void;
+    /**
+     * Focuses the dropdown trigger.
+     * @public
+     */
+    focusTrigger(): void;
+    /**
+     * Handles trigger click for click mode.
+     * @param e - Mouse event
+     * @private
+     */
+    private _onTriggerClick;
+    /**
+     * Handles item clicks within the dropdown.
+     * @param e - Click event
+     * @private
+     */
+    private _onItemClick;
+    /** Slotted `sky-dropdown-item` nodes bubble `dropdown-item-click` to this host. */
+    private _onDropdownItemClick;
+    private _resolveItemValue;
+    /**
+     * Activates a dropdown item.
+     * @param item - The item element to activate
+     * @private
+     */
+    private _activateItem;
+    /** @protected */
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/sky-dropdown/sky-dropdown.js

@@ -0,0 +1,58 @@
+import{__decorate as e,__metadata as t}from"tslib";import{LitElement as o,css as i,html as s}from"lit";import{property as r,query as n,customElement as p}from"lit/decorators.js";import{PopoverController as d}from"../helper/controllers/popover-controller.js";let h=class extends o{constructor(){super(...arguments),this.trigger="click",this.placement="bottom",this.align="center",this.open=!1,this.value="",this.width="auto",this.closeOnClick=!0,this.closeOnEsc=!0,this.hoverOpenDelay=120,this.hoverCloseDelay=160,this.offset=8,this.flip=!0,this.viewportPadding=8,this.maxHeight="auto",this.animateType="fade",this._isHoveringTrigger=!1,this._isHoveringContent=!1,this._openTimeout=null,this._closeTimeout=null,this._ready=!1,this._syncingFromController=!1,this.dropdownPopover=new d(this,{getAnchor:()=>this._triggerEl,getPopover:()=>this._contentEl,cssVarLeft:"--sky-dd-left",cssVarTop:"--sky-dd-top",cssVarWidth:"--sky-dd-width",getPlacement:()=>this.placement,getAlign:()=>this.align,getGap:()=>this.offset,getPadding:()=>this.viewportPadding,getMatchAnchorWidth:()=>"trigger"===this.width,getFlip:()=>this.flip,getPreset:()=>this.animateType,getCloseOnEscape:()=>this.closeOnEsc,getCloseOnOutside:()=>!0,getRestoreFocusOnClose:()=>!0,maxWidthToViewport:!0,maxWidthMode:"cap",flipOrder:["bottom","top","right","left"],animateReposition:!0,repositionMs:160,sideAttr:"data-side",respectReducedMotion:!0,onOpenChange:e=>{const t=this.open!==e;t&&(this._syncingFromController=!0,this.open=e,this._syncingFromController=!1),t&&(this.dispatchEvent(new CustomEvent(e?"open":"close",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("open-change",{detail:{open:e},bubbles:!0,composed:!0}))),e||(this._isHoveringTrigger=!1,this._isHoveringContent=!1,this._clearTimeouts()),t&&this._syncTriggerA11y()}}),this._onTriggerMouseEnter=()=>{"hover"===this.trigger&&(this._isHoveringTrigger=!0,this._clearTimeouts(),this._openTimeout=window.setTimeout(()=>{this.open||this.openDropdown()},this.hoverOpenDelay))},this._onTriggerMouseLeave=()=>{"hover"===this.trigger&&(this._isHoveringTrigger=!1,this._isHoveringContent||this._scheduleClose())},this._onContentMouseEnter=()=>{"hover"===this.trigger&&(this._isHoveringContent=!0,this._clearTimeouts())},this._onContentMouseLeave=()=>{"hover"===this.trigger&&(this._isHoveringContent=!1,this._isHoveringTrigger||this._scheduleClose())},this._onTriggerClick=e=>{"click"===this.trigger&&(e.stopPropagation(),this.toggle())},this._onItemClick=e=>{const t=e.composedPath().find(e=>e instanceof HTMLElement&&("sky-dropdown-item"===e.tagName.toLowerCase()||"menuitem"===e.role));t&&this._activateItem(t)},this._onDropdownItemClick=e=>{const t=e.composedPath().find(e=>e instanceof HTMLElement&&"sky-dropdown-item"===e.tagName.toLowerCase());t&&this._activateItem(t)}}static{this.styles=i`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    .dropdown-trigger {
+      cursor: pointer;
+      outline: none;
+    }
+
+    .dropdown-content {
+      position: fixed;
+      left: var(--sky-dd-left, 0px);
+      top: var(--sky-dd-top, 0px);
+      background: var(--sky-glass-primary);
+      border: var(--sky-border-primary);
+      border-radius: var(--sky-radius-secondary);
+      box-shadow: var(--sky-box-shadow-primary);
+      padding: 0.25rem;
+      box-sizing: border-box;
+      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
+        var(--sky-saturation-primary);
+      outline: none;
+     
+    }
+
+    .dropdown-content-inner {
+      overflow-y: auto;
+      max-height: var(--dropdown-max-h, 320px);
+    }
+  `}firstUpdated(e){super.firstUpdated(e),this._ready=!0,this.style.setProperty("--dropdown-max-h",this.maxHeight),this.dropdownPopover.refreshTargets(),this._syncTriggerA11y(),this._applyOpenToController(!1)}updated(e){if(super.updated(e),e.has("maxHeight")&&this.style.setProperty("--dropdown-max-h",this.maxHeight),e.has("trigger")&&(this._isHoveringTrigger=!1,this._isHoveringContent=!1,this._clearTimeouts()),this._ready&&this.open&&(e.has("placement")||e.has("align")||e.has("offset")||e.has("viewportPadding")||e.has("flip")||e.has("width")||e.has("animateType"))&&this.dropdownPopover.refreshTargets(),e.has("open")){const t=Boolean(e.get("open"));this._applyOpenToController(t)}}connectedCallback(){super.connectedCallback(),this.addEventListener("dropdown-item-click",this._onDropdownItemClick)}disconnectedCallback(){this.removeEventListener("dropdown-item-click",this._onDropdownItemClick),super.disconnectedCallback(),this._clearTimeouts();try{this.dropdownPopover.open&&this.dropdownPopover.closePopover("api")}catch{}this._ready=!1}_applyOpenToController(e){this._ready&&(this._syncingFromController||(!this.open||this.dropdownPopover.open?this.open||!e&&!this.dropdownPopover.open||this.dropdownPopover.closePopover("api"):this.dropdownPopover.openPopover()))}_clearTimeouts(){this._openTimeout&&(clearTimeout(this._openTimeout),this._openTimeout=null),this._closeTimeout&&(clearTimeout(this._closeTimeout),this._closeTimeout=null)}_syncTriggerA11y(){const e=this._triggerEl;e&&(e.setAttribute("role","button"),e.setAttribute("aria-expanded",String(this.open)),e.setAttribute("aria-haspopup","menu"),this._contentEl?.id?e.setAttribute("aria-controls",this._contentEl.id):this._contentEl&&(this._contentEl.id||=`sky-dd-${crypto?.randomUUID?.()??Math.random().toString(16).slice(2)}`,e.setAttribute("aria-controls",this._contentEl.id)))}_scheduleClose(){this._clearTimeouts(),this._closeTimeout=window.setTimeout(()=>{!this.open||"hover"!==this.trigger||this._isHoveringTrigger||this._isHoveringContent||this.close()},this.hoverCloseDelay)}toggle(){this.dropdownPopover.open?this.dropdownPopover.closePopover("toggle"):this.dropdownPopover.openPopover()}openDropdown(){this.open=!0}close(){this.open=!1,this._clearTimeouts()}focusTrigger(){this._triggerEl&&this._triggerEl.focus()}_resolveItemValue(e){const t=e,o=t.value?.trim();if(o)return o;const i=e.getAttribute("value")?.trim();return i||(t.label??"").trim()}_activateItem(e){const t=this._resolveItemValue(e);if(e.disabled??!1)return;const o=(e.textContent??"").trim();this.value=t,this.dispatchEvent(new CustomEvent("dropdown-select",{detail:{value:t,text:o,item:e},bubbles:!0,composed:!0})),this.closeOnClick&&this.close()}render(){return s`
+      <div
+        class="dropdown-trigger"
+        part="trigger"
+        @click=${this._onTriggerClick}
+        @mouseenter=${this._onTriggerMouseEnter}
+        @mouseleave=${this._onTriggerMouseLeave}
+      >
+        <slot name="trigger" @slotchange=${this._syncTriggerA11y}></slot>
+      </div>
+
+      <div
+        class="dropdown-content"
+        part="content"
+        popover="manual"
+        role="menu"
+        @toggle=${this.dropdownPopover.onToggle}
+        @click=${this._onItemClick}
+        @mouseenter=${this._onContentMouseEnter}
+        @mouseleave=${this._onContentMouseLeave}
+      >
+        <div class="dropdown-content-inner" part="content-inner">
+          <slot></slot>
+        </div>
+      </div>
+    `}};e([r({type:String,reflect:!0}),t("design:type",String)],h.prototype,"trigger",void 0),e([r({type:String,reflect:!0}),t("design:type",String)],h.prototype,"placement",void 0),e([r({type:String,reflect:!0}),t("design:type",String)],h.prototype,"align",void 0),e([r({type:Boolean,reflect:!0}),t("design:type",Object)],h.prototype,"open",void 0),e([r({type:String}),t("design:type",Object)],h.prototype,"value",void 0),e([r({type:String}),t("design:type",String)],h.prototype,"width",void 0),e([r({type:Boolean}),t("design:type",Object)],h.prototype,"closeOnClick",void 0),e([r({type:Boolean}),t("design:type",Object)],h.prototype,"closeOnEsc",void 0),e([r({type:Number}),t("design:type",Object)],h.prototype,"hoverOpenDelay",void 0),e([r({type:Number}),t("design:type",Object)],h.prototype,"hoverCloseDelay",void 0),e([r({type:Number}),t("design:type",Object)],h.prototype,"offset",void 0),e([r({type:Boolean}),t("design:type",Object)],h.prototype,"flip",void 0),e([r({type:Number}),t("design:type",Object)],h.prototype,"viewportPadding",void 0),e([r({type:String}),t("design:type",Object)],h.prototype,"maxHeight",void 0),e([r({type:String}),t("design:type",String)],h.prototype,"animateType",void 0),e([n(".dropdown-trigger"),t("design:type",HTMLElement)],h.prototype,"_triggerEl",void 0),e([n(".dropdown-content"),t("design:type",HTMLElement)],h.prototype,"_contentEl",void 0),h=e([p("sky-dropdown")],h);export{h as SkyDropdown};
+//# sourceMappingURL=sky-dropdown.js.map

package/dist/sky-dropdown/sky-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sky-dropdown.js","sources":["../../src/sky-dropdown/sky-dropdown.ts"],"sourcesContent":[null],"names":["SkyDropdown","LitElement","constructor","this","trigger","placement","align","open","value","width","closeOnClick","closeOnEsc","hoverOpenDelay","hoverCloseDelay","offset","flip","viewportPadding","maxHeight","animateType","_isHoveringTrigger","_isHoveringContent","_openTimeout","_closeTimeout","_ready","_syncingFromController","dropdownPopover","PopoverController","getAnchor","_triggerEl","getPopover","_contentEl","cssVarLeft","cssVarTop","cssVarWidth","getPlacement","getAlign","getGap","getPadding","getMatchAnchorWidth","getFlip","getPreset","getCloseOnEscape","getCloseOnOutside","getRestoreFocusOnClose","maxWidthToViewport","maxWidthMode","flipOrder","animateReposition","repositionMs","sideAttr","respectReducedMotion","onOpenChange","openChanged","dispatchEvent","CustomEvent","bubbles","composed","detail","_clearTimeouts","_syncTriggerA11y","_onTriggerMouseEnter","window","setTimeout","openDropdown","_onTriggerMouseLeave","_scheduleClose","_onContentMouseEnter","_onContentMouseLeave","_onTriggerClick","e","stopPropagation","toggle","_onItemClick","item","composedPath","find","n","HTMLElement","tagName","toLowerCase","role","_activateItem","_onDropdownItemClick","styles","css","firstUpdated","_changed","super","style","setProperty","refreshTargets","_applyOpenToController","updated","changed","has","prev","Boolean","get","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","closePopover","previousOpen","openPopover","clearTimeout","t","setAttribute","String","id","crypto","randomUUID","Math","random","toString","slice","close","focusTrigger","focus","_resolveItemValue","withFields","fromProp","trim","fromAttr","getAttribute","label","disabled","text","textContent","render","html","onToggle","__decorate","property","type","reflect","prototype","Number","query","customElement"],"mappings":"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"}

package/dist/sky-dropdown-item/index.d.ts

@@ -0,0 +1 @@
+export * from "./sky-dropdown-item";

package/dist/sky-dropdown-item/index.js

@@ -0,0 +1 @@
+export * from './sky-dropdown-item.js';