@sky.ui/core 0.0.1

package/dist/sky-accordion/sky-accordion.js

@@ -0,0 +1,85 @@
+import{__decorate as e,__metadata as t}from"tslib";import{LitElement as r,css as s,nothing as o,html as i}from"lit";import{property as a,eventOptions as n,customElement as d}from"lit/decorators.js";import{SkyAccordionItem as l}from"../sky-accordion-item/sky-accordion-item.js";let c=class extends r{constructor(){super(...arguments),this.singleOpen=!1,this.variant="solid",this.disabled=!1,this.label="",this._itemsCache=null,this.handleSlotChange=()=>{this._itemsCache=null,this.requestUpdate()}}static{this.styles=s`
+    :host {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+      overflow: hidden;
+      border-radius: var(--sky-radius-secondary);
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: var(--sky-opacity-disabled, 0.6);
+    }
+
+    ::slotted(sky-accordion-item:not(:last-child)) {
+      border-bottom: 1px solid var(--sky-border-light);
+    }
+
+    :host([variant="solid"]) {
+      background-color: transparent;
+      position: relative;
+      box-shadow: var(--sky-box-shadow-primary);
+    }
+
+    :host([variant="solid"])::before {
+      inset: 0;
+      position: absolute;
+      content: "";
+      background-color: var(--sky-glass-primary);
+      border-radius: inherit;
+      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
+        var(--sky-saturation-primary);
+      -webkit-backdrop-filter: var(--sky-blur-primary)
+        var(--sky-brightness-primary) var(--sky-saturation-primary);
+      z-index: -1;
+    }
+
+    :host([variant="bordered"]) {
+      border: 1px solid var(--sky-border-light);
+    }
+
+    :host([variant="splitted"]) ::slotted(sky-accordion-item) {
+      background-color: transparent;
+      overflow: hidden;
+      position: relative;
+      box-shadow: var(--sky-box-shadow-primary);
+      border-radius: var(--sky-radius-secondary);
+      border-bottom: unset;
+      margin-bottom: var(--sky-space-3, 12px);
+    }
+
+    :host([variant="splitted"]) ::slotted(sky-accordion-item) {
+      --acc-bg: var(--sky-glass-primary);
+      --acc-header-hover: var(--sky-glass-secondary);
+      --acc-header-active: var(--sky-glass-secondary);
+      background-color: var(--sky-glass-primary);
+    }
+
+    :host([variant="solid"]) ::slotted(sky-accordion-item) {
+      --acc-bg: var(--sky-glass-primary);
+      --acc-header-hover: var(--sky-glass-secondary);
+      --acc-header-active: var(--sky-glass-secondary);
+    }
+
+    :host([variant="splitted"]) ::slotted(sky-accordion-item)::before {
+      inset: 0;
+      position: absolute;
+      content: "";
+      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
+        var(--sky-saturation-primary);
+      -webkit-backdrop-filter: var(--sky-blur-primary)
+        var(--sky-brightness-primary) var(--sky-saturation-primary);
+      z-index: -1;
+      border-radius: inherit;
+    }
+  `}connectedCallback(){super.connectedCallback(),this.addEventListener("accordion-toggle",this.handleItemToggle,{capture:!0}),this.addEventListener("keydown",this.handleKeydown,{capture:!0})}disconnectedCallback(){this.removeEventListener("accordion-toggle",this.handleItemToggle,{capture:!0}),this.removeEventListener("keydown",this.handleKeydown,{capture:!0}),super.disconnectedCallback()}expandAll(){const e=this.items;0!==e.length&&(this.singleOpen?e.forEach((e,t)=>{e.open=0===t}):e.forEach(e=>{e.open=!0}))}collapseAll(){this.items.forEach(e=>{e.open=!1})}openItem(e){const t=this.items,r=t[e];return!!r&&(this.singleOpen?(t.forEach(e=>{e.open=e===r}),!0):(r.open=!0,!0))}closeItem(e){const t=this.items[e];return!!t&&(t.open=!1,!0)}toggleItem(e){const t=this.items[e];return!!t&&(t.open?(t.open=!1,!0):this.openItem(e))}openFirst(){return this.openItem(0)}openLast(){const e=this.items.length-1;return!(e<0)&&this.openItem(e)}focusItem(e){const t=this.items[e];if(!t)return!1;const r=t.shadowRoot?.querySelector('[part="header"]');return!!r&&(r.focus(),!0)}focusFirst(){return this.focusItem(0)}focusLast(){const e=this.items.length-1;return!(e<0)&&this.focusItem(e)}getItems(){return[...this.items]}handleItemToggle(e){const t=e;if(!this.singleOpen||!t.detail?.open)return;const r=t.target;r&&this.items.includes(r)&&this.items.forEach(e=>{e!==r&&(e.open=!1)})}handleKeydown(e){const t=e.key;if(!("ArrowDown"===t||"ArrowRight"===t||"ArrowUp"===t||"ArrowLeft"===t||"Home"===t||"End"===t))return;const r=this.items;if(0===r.length)return;let s,o=e.target,i=-1;for(;o&&o!==this;){if(o instanceof l&&r.includes(o)){i=r.indexOf(o);break}const e=o.parentNode;o=e instanceof ShadowRoot?e.host:e}if(i<0)return;if(s="ArrowDown"===t||"ArrowRight"===t?Math.min(i+1,r.length-1):"ArrowUp"===t||"ArrowLeft"===t?Math.max(i-1,0):"Home"===t?0:r.length-1,s===i)return;const a=r[s].shadowRoot?.querySelector('[part="header"]');a&&(e.preventDefault(),a.focus())}get items(){return this._itemsCache||(this._itemsCache=Array.from(this.children).filter(e=>e instanceof l)),this._itemsCache}render(){return i`
+      <div
+        part="group"
+        role="group"
+        aria-label=${this.label||o}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `}};e([a({type:Boolean}),t("design:type",Object)],c.prototype,"singleOpen",void 0),e([a({type:String,reflect:!0}),t("design:type",String)],c.prototype,"variant",void 0),e([a({type:Boolean,reflect:!0}),t("design:type",Object)],c.prototype,"disabled",void 0),e([a({type:String}),t("design:type",Object)],c.prototype,"label",void 0),e([n({capture:!0}),t("design:type",Function),t("design:paramtypes",[Event]),t("design:returntype",void 0)],c.prototype,"handleItemToggle",null),e([n({capture:!0}),t("design:type",Function),t("design:paramtypes",[KeyboardEvent]),t("design:returntype",void 0)],c.prototype,"handleKeydown",null),c=e([d("sky-accordion")],c);export{c as SkyAccordion};
+//# sourceMappingURL=sky-accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sky-accordion.js","sources":["../../src/sky-accordion/sky-accordion.ts"],"sourcesContent":[null],"names":["SkyAccordion","LitElement","constructor","this","singleOpen","variant","disabled","label","_itemsCache","handleSlotChange","requestUpdate","styles","css","connectedCallback","super","addEventListener","handleItemToggle","capture","handleKeydown","disconnectedCallback","removeEventListener","expandAll","items","length","forEach","item","index","open","collapseAll","openItem","target","closeItem","toggleItem","openFirst","openLast","lastIndex","focusItem","header","shadowRoot","querySelector","focus","focusFirst","focusLast","getItems","e","event","detail","includes","key","newIndex","node","currentIndex","SkyAccordionItem","indexOf","parent","parentNode","ShadowRoot","host","Math","min","max","preventDefault","Array","from","children","filter","render","html","nothing","__decorate","property","type","Boolean","prototype","String","reflect","eventOptions","Event","KeyboardEvent","customElement"],"mappings":"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"}

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

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

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

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

package/dist/sky-accordion-item/sky-accordion-item.d.ts

@@ -0,0 +1,161 @@
+import { LitElement } from "lit";
+export type SkyAccordionItemAnimationStyle = "rotate" | "fade" | "spring" | "flip" | "scale" | "none";
+export type SkyAccordionItemToggleEventDetail = {
+    open: boolean;
+};
+/**
+ * @element sky-accordion-item
+ *
+ * @summary Interactive accordion item with a header trigger, accessible semantics, and collapsible content.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/accordion
+ * @dependency sky-icon
+ *
+ * @uiVModel open accordion-toggle detail=open
+ *
+ * @slot title - Primary header content.
+ * @slot sub-title - Optional secondary header content.
+ * @slot content - Collapsible body content.
+ *
+ * @property {boolean} open - Indicates whether the item is expanded.
+ * @property {boolean} disabled - Prevents interaction and state changes.
+ * @property {SkyAccordionItemAnimationStyle} animationStyle - Icon animation preset used during expand/collapse transitions.
+ * @property {string} expandIcon - Icon displayed while the item is collapsed.
+ * @property {string} collapseIcon - Icon displayed while the item is expanded.
+ * @method expand Expands the item and emits `accordion-toggle` when state changes.
+ * @method collapse Collapses the item and emits `accordion-toggle` when state changes.
+ * @method toggle Toggles the open state and emits `accordion-toggle`.
+ *
+ * @fires {CustomEvent<SkyAccordionItemToggleEventDetail>} accordion-toggle - Emitted after a toggle; bubbles and is composed so parent accordions can coordinate state across shadow boundaries.
+ *
+ * @csspart item - Item root wrapper.
+ * @csspart header - Interactive header trigger.
+ * @csspart title - Primary title wrapper.
+ * @csspart sub-title - Secondary title wrapper.
+ * @csspart icon - Expand/collapse icon wrapper.
+ * @csspart content - Collapsible content body container.
+ *
+ * @cssprop --acc-bg - Background color applied to header and content areas.
+ * @cssprop --acc-header-hover - Header background on hover (default: `var(--sky-hover-primary)`).
+ * @cssprop --acc-header-active - Header background on active/pressed state (default: `var(--sky-hover-secondary)`).
+ *
+ * @Behavior
+ * - Header click toggles state when the component is enabled.
+ * - `Enter` and `Space` toggle state when the header has focus.
+ * - Header exposes `role="button"`, `aria-expanded`, and `aria-controls`.
+ * - Content region exposes `role="region"` and `aria-labelledby`.
+ *
+ * @example
+ * ```html
+ * <sky-accordion-item open animation-style="rotate" expand-icon="ion:add" collapse-icon="ion:remove">
+ *   <span slot="title">Shipping</span>
+ *   <span slot="sub-title">2-3 business days</span>
+ *   <div slot="content">Express shipping available at checkout.</div>
+ * </sky-accordion-item>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-accordion-item open animation-style="rotate" expand-icon="ion:add" collapse-icon="ion:remove">
+ *     <span slot="title">Shipping</span>
+ *     <span slot="sub-title">2-3 business days</span>
+ *     <div slot="content">Express shipping available at checkout.</div>
+ *   </sky-accordion-item>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return (
+ *     <sky-accordion-item open animation-style="rotate" expand-icon="ion:add" collapse-icon="ion:remove">
+ *       <span slot="title">Shipping</span>
+ *       <span slot="sub-title">2-3 business days</span>
+ *       <div slot="content">Express shipping available at checkout.</div>
+ *     </sky-accordion-item>
+ *   );
+ * }
+ * ```
+ */
+export declare class SkyAccordionItem extends LitElement {
+    static dependencies: Record<string, CustomElementConstructor>;
+    /**
+     * Controls expanded/collapsed state.
+     * @default false
+     */
+    open: boolean;
+    /**
+     * Disables interaction and prevents toggling.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Icon animation preset for state transitions.
+     * `fade`, `spring`, and `none` are treated as non-transform modes.
+     * @default "rotate"
+     */
+    animationStyle: SkyAccordionItemAnimationStyle;
+    /**
+     * Icon rendered when collapsed.
+     * @default "ion:chevron-back"
+     */
+    expandIcon: string;
+    /**
+     * Icon rendered when expanded.
+     * @default "ion:chevron-back"
+     */
+    collapseIcon: string;
+    /** Reference to the icon wrapper for WAAPI animations. */
+    private iconRef;
+    /** Reference to the content body used by fade animations. */
+    private contentBodyRef;
+    /** Monotonic counter used to generate unique ARIA ids. */
+    private static _idCounter;
+    /** Unique numeric id for this item instance. */
+    private _panelNum;
+    /** Header id used by `aria-labelledby`. */
+    private _headerId;
+    /** Content id used by `aria-controls`. */
+    private _contentId;
+    /** Shared animation controller for content and icon transitions. */
+    private animation;
+    /** Active icon animation handle, if one is running. */
+    private _iconAnimation;
+    /** Detects user preference for reduced motion. */
+    private static get prefersReducedMotion();
+    static styles: import("lit").CSSResult;
+    /** Runs open/close transitions after state updates. */
+    updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Expands the item if it is currently collapsed.
+     *
+     * @returns {void}
+     */
+    expand(): void;
+    /**
+     * Collapses the item if it is currently expanded.
+     *
+     * @returns {void}
+     */
+    collapse(): void;
+    /**
+     * Toggles open state and emits `accordion-toggle`.
+     *
+     * @returns {void}
+     */
+    toggle(): void;
+    /**
+     * Dispatches `accordion-toggle` with the current open state.
+     * Event bubbles and is composed for parent-level coordination.
+     */
+    private dispatchToggleEvent;
+    /** Handles keyboard activation for the header trigger. */
+    private handleHeaderKeydown;
+    /**
+     * Runs icon transform animation based on `animationStyle`.
+     */
+    private runIconAnimation;
+    /** Returns icon transform keyframes for current state and animation style. */
+    private getIconKeyframes;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/sky-accordion-item/sky-accordion-item.js

@@ -0,0 +1,191 @@
+import{__decorate as t,__metadata as e}from"tslib";import{LitElement as n,css as i,html as o}from"lit";import{property as a,customElement as s}from"lit/decorators.js";import{when as r}from"lit/directives/when.js";import{createRef as d,ref as l}from"lit/directives/ref.js";import{AnimationController as c}from"../helper/controllers/animation-controller.js";import{SkyIcon as p}from"../sky-icon/sky-icon.js";var h;let m=class extends n{constructor(){super(...arguments),this.open=!1,this.disabled=!1,this.animationStyle="rotate",this.expandIcon="ion:chevron-back",this.collapseIcon="ion:chevron-back",this.iconRef=d(),this.contentBodyRef=d(),this._panelNum=h._idCounter++,this._headerId=`sky-acc-${this._panelNum}-h`,this._contentId=`sky-acc-${this._panelNum}-c`,this.animation=new c(this,{defaultDuration:200,defaultEasing:"ease-out",defaultFill:"forwards"}),this._iconAnimation=null}static{h=this}static{this.dependencies={"sky-icon":p}}static{this._idCounter=0}static get prefersReducedMotion(){return!("undefined"==typeof window||!window.matchMedia)&&window.matchMedia("(prefers-reduced-motion: reduce)").matches}static{this.styles=i`
+    :host {
+      display: block;
+      width: 100%;
+      position: relative;
+      box-sizing: border-box;
+    }
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: var(--sky-opacity-disabled, 0.6);
+    }
+
+    .accordion-item {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .header {
+      position: relative;
+      padding: var(--sky-space-3, 12px) var(--sky-space-4, 16px);
+      min-height: 44px;
+      box-sizing: border-box;
+      cursor: pointer;
+      display: flex;
+      text-align: start;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--sky-space-3, 12px);
+      background-color: var(--acc-bg, transparent);
+      transition: background var(--sky-duration-normal, 200ms) var(--sky-ease-default, ease),
+        opacity var(--sky-duration-normal, 200ms) var(--sky-ease-default, ease);
+      user-select: none;
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    .header:hover:not(:disabled) {
+      background-color: var(--acc-header-hover, transparent);
+    }
+
+    .header:active:not(:disabled) {
+      background-color: var(--acc-header-active, transparent);
+    }
+
+    .header::after {
+      content: "";
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      height: 2px;
+      width: 100%;
+      background-color: var(--sky-border-light);
+      transform: scaleX(0);
+      transform-origin: center;
+      transition: transform var(--sky-duration-slow, 300ms) var(--sky-ease-default, ease);
+    }
+
+    :host([open]) .header::after {
+      transform: scaleX(1);
+    }
+
+    .header:focus-visible {
+      outline: none;
+      box-shadow: var(--sky-focus-ring);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .header,
+      .header::after {
+        transition: none;
+      }
+      .content {
+        transition: none;
+      }
+      .content-body {
+        transition: none;
+      }
+    }
+
+    .title-group {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+
+    .title {
+      flex: 1;
+      font-size: var(--sky-font-size-md, 1rem);
+      font-weight: var(--sky-font-weight-semibold, 600);
+      line-height: var(--sky-line-height-snug, 1.25);
+      letter-spacing: var(--sky-letter-spacing-normal, 0);
+      font-family: var(--sky-font);
+      color: var(--sky-text-primary);
+      transition: var(--sky-transition-default, all 200ms ease);
+    }
+
+    .sub-title {
+      flex: 1;
+      font-size: var(--sky-font-size-sm, 0.875rem);
+      font-weight: var(--sky-font-weight-normal, 400);
+      line-height: var(--sky-line-height-normal, 1.5);
+      letter-spacing: var(--sky-letter-spacing-normal, 0);
+      font-family: var(--sky-font);
+      color: var(--sky-text-secondary);
+      transition: var(--sky-transition-default, all 200ms ease);
+    }
+
+    .content {
+      display: grid;
+      grid-template-rows: 0fr;
+      overflow: hidden;
+      transition: grid-template-rows var(--sky-duration-normal, 200ms) var(--sky-ease-default, ease);
+      will-change: grid-template-rows;
+      contain: layout paint style;
+    }
+
+    :host([open]) .content {
+      grid-template-rows: 1fr;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .content {
+        will-change: auto;
+      }
+    }
+
+    .content-clip {
+      min-height: 0;
+      overflow: hidden;
+      background-color: var(--acc-bg, transparent);
+    }
+
+    .content-body {
+      padding: var(--sky-space-2, 8px);
+      transition: padding var(--sky-duration-fast, 120ms) var(--sky-ease-default, ease);
+    }
+
+    :host(:not([open])) .content-body {
+      padding: 0;
+      opacity: 0;
+    }
+
+    .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      margin-inline-start: auto;
+    }
+  `}updated(t){if(super.updated?.(t),!t.has("open"))return;const e=void 0===t.get("open"),n=h.prefersReducedMotion;if(!e){const t=this.contentBodyRef.value;t&&!n&&(this.open?this.animation.fadeIn(t,{duration:200}):this.animation.fadeOut(t,{duration:150}))}e&&!this.open||n||this.runIconAnimation()}expand(){this.disabled||this.open||(this.open=!0,this.dispatchToggleEvent())}collapse(){!this.disabled&&this.open&&(this.open=!1,this.dispatchToggleEvent())}toggle(){this.disabled||(this.open=!this.open,this.dispatchToggleEvent())}dispatchToggleEvent(){this.dispatchEvent(new CustomEvent("accordion-toggle",{bubbles:!0,composed:!0,detail:{open:this.open}}))}handleHeaderKeydown(t){"Enter"!==t.key&&" "!==t.key||(" "===t.key&&t.preventDefault(),this.toggle())}runIconAnimation(){const t=this.iconRef.value;if(!t||"none"===this.animationStyle||"fade"===this.animationStyle||"spring"===this.animationStyle)return;this._iconAnimation&&(this._iconAnimation.cancel(),this._iconAnimation=null);const e=this.getIconKeyframes();e&&(this._iconAnimation=this.animation.animate(t,e,{duration:300,easing:"ease-out",fill:"forwards"}),this._iconAnimation&&this._iconAnimation.finished.then(()=>{this._iconAnimation=null}).catch(()=>{this._iconAnimation=null}))}getIconKeyframes(){const t=this.open;switch(this.animationStyle){case"rotate":return t?[{transform:"rotate(0deg)"},{transform:"rotate(90deg)"}]:[{transform:"rotate(90deg)"},{transform:"rotate(0deg)"}];case"flip":return t?[{transform:"rotateX(0deg)"},{transform:"rotateX(180deg)"}]:[{transform:"rotateX(180deg)"},{transform:"rotateX(0deg)"}];case"scale":return t?[{transform:"scale(1)"},{transform:"scale(1.2)"}]:[{transform:"scale(1.2)"},{transform:"scale(1)"}];default:return null}}render(){return o`
+      <div class="accordion-item" part="item">
+        <div
+          class="header"
+          part="header"
+          id=${this._headerId}
+          aria-expanded=${this.open}
+          aria-controls=${this._contentId}
+          role="button"
+          tabindex=${this.disabled?"-1":"0"}
+          @click=${this.toggle}
+          @keydown=${this.handleHeaderKeydown}
+        >
+          <div class="title-group">
+            <span class="title" part="title">
+              <slot name="title"></slot>
+            </span>
+            <span class="sub-title" part="sub-title">
+              <slot name="sub-title"></slot>
+            </span>
+          </div>
+
+          <span class="icon" part="icon" ${l(this.iconRef)}>
+            ${r(this.open,()=>o`<sky-icon icon=${this.collapseIcon}></sky-icon>`,()=>o`<sky-icon icon=${this.expandIcon}></sky-icon>`)}
+          </span>
+        </div>
+
+        <div
+          class="content"
+          id=${this._contentId}
+          role="region"
+          aria-labelledby=${this._headerId}
+        >
+          <div class="content-clip">
+            <div class="content-body" part="content" ${l(this.contentBodyRef)}>
+              <slot name="content"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `}};t([a({type:Boolean,reflect:!0}),e("design:type",Object)],m.prototype,"open",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Object)],m.prototype,"disabled",void 0),t([a({type:String,reflect:!0}),e("design:type",String)],m.prototype,"animationStyle",void 0),t([a({type:String}),e("design:type",Object)],m.prototype,"expandIcon",void 0),t([a({type:String}),e("design:type",Object)],m.prototype,"collapseIcon",void 0),m=h=t([s("sky-accordion-item")],m);export{m as SkyAccordionItem};
+//# sourceMappingURL=sky-accordion-item.js.map

package/dist/sky-accordion-item/sky-accordion-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sky-accordion-item.js","sources":["../../src/sky-accordion-item/sky-accordion-item.ts"],"sourcesContent":[null],"names":["SkyAccordionItem","LitElement","constructor","this","open","disabled","animationStyle","expandIcon","collapseIcon","iconRef","createRef","contentBodyRef","_panelNum","SkyAccordionItem_1","_idCounter","_headerId","_contentId","animation","AnimationController","defaultDuration","defaultEasing","defaultFill","_iconAnimation","dependencies","SkyIcon","prefersReducedMotion","window","matchMedia","matches","styles","css","updated","changedProperties","super","has","isFirstOpenChange","undefined","get","reduceMotion","contentEl","value","fadeIn","duration","fadeOut","runIconAnimation","expand","dispatchToggleEvent","collapse","toggle","dispatchEvent","CustomEvent","bubbles","composed","detail","handleHeaderKeydown","e","key","preventDefault","el","cancel","keyframes","getIconKeyframes","animate","easing","fill","finished","then","catch","transform","render","html","ref","when","__decorate","property","type","Boolean","reflect","prototype","String","customElement"],"mappings":"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"}

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

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

package/dist/sky-alert/index.js

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

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

@@ -0,0 +1,136 @@
+import { LitElement, PropertyValues } from "lit";
+export type SkyAlertClosedEventDetail = {
+    title: string;
+    message: string;
+};
+export type SkyAlertStrip = "start" | "end" | "both" | "none";
+export type SkyAlertVariant = "flat" | "bordered" | "light" | "faded" | "solid";
+export type SkyAlertRoleType = "alert" | "alertdialog";
+/**
+ * @element sky-alert
+ *
+ * @summary Status alert banner with variants, optional icon, strip accents, actions, dismiss behavior, and loading state.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/alert
+ * @dependency sky-icon
+ *
+ * @slot - Custom message content (used when `message` is empty).
+ * @slot actions - Action buttons or links displayed on the trailing side.
+ *
+ * @property {string} title - Title text shown above the message.
+ * @property {string} message - Message text rendered inside the alert.
+ * @property {boolean} removable - Shows a dismiss button when enabled.
+ * @property {string} color - Base color token or CSS color used by the alert.
+ * @property {string} size - Preset size token (`xs | sm | md | lg | xl`) or CSS length.
+ * @property {string} radius - Radius token or CSS length.
+ * @property {string | null} icon - Optional leading icon name for `<sky-icon>`.
+ * @property {SkyAlertStrip} strip - Strip accent placement.
+ * @property {string} stripColor - Strip accent color token or CSS color.
+ * @property {SkyAlertVariant} variant - Visual style variant.
+ * @property {boolean} loading - Shows a loading overlay.
+ * @property {SkyAlertRoleType} roleType - ARIA role for the alert container.
+ * @method close Dispatches `alert-closed` and removes the alert from the DOM.
+ *
+ * @fires {CustomEvent<SkyAlertClosedEventDetail>} alert-closed - Fired when the alert is dismissed via the close button; bubbles and is composed.
+ *
+ * @csspart alert - The outer alert container.
+ * @csspart icon - The optional leading icon.
+ * @csspart content - The content container (title + message/slot).
+ * @csspart title - The title text element.
+ * @csspart message - The message text element (when `message` is provided).
+ * @csspart actions - The trailing actions container.
+ * @csspart close-button - The dismiss button (when `removable`).
+ * @csspart loading-overlay - Overlay shown when `loading` is true.
+ * @csspart loading-spinner - Spinner element shown inside the loading overlay.
+ *
+ * @Behavior
+ * - `message` content takes priority over default-slot message content.
+ * - Dismissing a removable alert dispatches `alert-closed` and removes the element.
+ * - `strip` controls accent placement (`start`, `end`, `both`, `none`).
+ * - `role-type="alert"` maps to `aria-live="assertive"`; `alertdialog` maps to `aria-live="polite"`.
+ * - Respects reduced motion preferences for entry, button hover rotation, and spinner animation.
+ *
+ * @example
+ * ```html
+ * <sky-alert title="Upload Complete" message="Your file is now available." variant="bordered" strip="start" removable>
+ *   <button slot="actions">View</button>
+ * </sky-alert>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-alert title="Upload Complete" message="Your file is now available." variant="bordered" strip="start" removable>
+ *     <button slot="actions">View</button>
+ *   </sky-alert>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return (
+ *     <sky-alert title="Upload Complete" message="Your file is now available." variant="bordered" strip="start" removable>
+ *       <button slot="actions">View</button>
+ *     </sky-alert>
+ *   );
+ * }
+ * ```
+ */
+export declare class SkyAlert extends LitElement {
+    static dependencies: Record<string, CustomElementConstructor>;
+    /** Title text displayed above the message. @default "" */
+    title: string;
+    /** Message text displayed inside the alert. @default "" */
+    message: string;
+    /** Shows a close button that dismisses the alert. @default false */
+    removable: boolean;
+    /** Base color token or CSS color. @default "primary" */
+    color: string;
+    /** Size token (`xs | sm | md | lg | xl`) or CSS length. @default "md" */
+    size: string;
+    /** Radius token or CSS length. @default "md" */
+    radius: string;
+    /** Optional leading icon name for `<sky-icon>`. @default null */
+    icon: string | null;
+    /** Strip accent position. @default "none" */
+    strip: SkyAlertStrip;
+    /** Strip accent color. @default "currentColor" */
+    stripColor: string;
+    /** Visual style variant. @default "solid" */
+    variant: SkyAlertVariant;
+    /** Shows a loading overlay. @default false */
+    loading: boolean;
+    /** ARIA role applied to the alert container. @default "alert" */
+    roleType: SkyAlertRoleType;
+    /** Internal style variables */
+    private _styleVars;
+    /** Cached result of _resolveSize for the last `size` value (avoids recomputing when only color/variant change). */
+    private _sizeCache;
+    /** True when the actions slot has assigned content (used to show separator only when needed). */
+    private _hasActionsSlotContent;
+    static styles: import("lit").CSSResult;
+    /**
+     * Resolves size to get padding, font sizes, and other metrics.
+     * Result is memoized by `size` to avoid recomputing when only color/variant/radius change.
+     */
+    private _resolveSize;
+    /** Recomputes style variables when visual inputs change. */
+    willUpdate(changedProperties: PropertyValues): void;
+    /** Initializes actions-slot presence state after first render. */
+    firstUpdated(): void;
+    /** Computes CSS custom properties from current variant, size, and color inputs. */
+    private _updateStyleVars;
+    /**
+     * Dispatches `alert-closed` and removes the alert from the DOM.
+     *
+     * @returns {void}
+     */
+    close(): void;
+    /** Returns the ARIA role applied to the alert container. */
+    private getAriaRole;
+    /** Checks whether the actions slot currently has meaningful assigned content. */
+    private _checkActionsSlot;
+    /** Updates action-slot state when the slot assignment changes. */
+    private _onActionsSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}