@sky.ui/core 0.0.1

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

@@ -0,0 +1,111 @@
+import { LitElement, TemplateResult } from "lit";
+export interface BreadcrumbItem {
+    title: string;
+    route: string;
+    active?: boolean;
+}
+export type SkyBreadcrumbHomeMode = "auto" | "always" | "never";
+/**
+ * @element sky-breadcrumb
+ *
+ * @summary Accessible breadcrumb navigation with optional “Home” item and overflow handling.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/breadcrumb
+ * @dependency sky-icon
+ *
+ * @slot - (none) This component does not accept slotted children; use the `items` property.
+ *
+ * @property {BreadcrumbItem[]} items - Breadcrumb items from root to leaf.
+ * @property {string} separator - Separator string shown between items (for example `/` or `›`).
+ * @property {SkyBreadcrumbHomeMode} showHome - Home rendering mode: `auto | always | never`.
+ * @property {number} visibleItems - Number of trailing items shown inline before overflow collapse.
+ * @property {boolean} shadow - When true, applies glass background, border, and elevation on the trail list; default is a clean inline trail.
+ * @method openOverflow Opens overflow menu when collapsed items are present.
+ * @method closeOverflow Closes overflow menu.
+ *
+ * @fires {CustomEvent<BreadcrumbItem>} route-change - Fired when a breadcrumb item is activated.
+ *
+ * @csspart list - The `<ul>` container element for the breadcrumb.
+ * @csspart item - Each `<li>` breadcrumb item wrapper.
+ * @csspart link - The clickable link inside each breadcrumb item.
+ * @csspart separator - The separator element shown between breadcrumb items.
+ * @csspart dropdown - The overflow toggle button that opens the collapsed items dropdown.
+ * @csspart overflow-menu - The popover menu containing collapsed breadcrumb items.
+ * @csspart home - The breadcrumb item wrapper for the "Home" link.
+ * @csspart current - The active/current page breadcrumb item.
+ *
+ * @Behavior
+ * - Renders a root-to-leaf breadcrumb trail.
+ * - Collapses older items into overflow when items exceed `visibleItems`.
+ * - Dispatches `route-change` on item activation; consumer controls navigation.
+ * - Uses `<nav aria-label="breadcrumb">` with non-link rendering for current page.
+ *
+ * @example
+ * ```html
+ * <sky-breadcrumb separator="›" visible-items="3"></sky-breadcrumb>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-breadcrumb separator="›" visible-items="3"></sky-breadcrumb>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return <sky-breadcrumb separator="›" visible-items="3"></sky-breadcrumb>;
+ * }
+ * ```
+ */
+export declare class SkyBreadcrumb extends LitElement {
+    static dependencies: Record<string, CustomElementConstructor>;
+    /** The breadcrumb items to display, in order from root to leaf. */
+    items: BreadcrumbItem[];
+    /** The separator string shown between items (e.g., "/", "›"). */
+    separator: string;
+    /**
+     * Controls how the "Home" link behaves.
+     * - `"auto"`: adds Home only if not present (default)
+     * - `"always"`: always prepends Home
+     * - `"never"`: never adds Home
+     */
+    showHome: SkyBreadcrumbHomeMode;
+    /**
+     * How many trailing items to show inline.
+     * Items beyond this count collapse into the overflow dropdown.
+     */
+    visibleItems: number;
+    /**
+     * Glass pill styling on the trail (`background`, `border`, `box-shadow`, backdrop).
+     * `false` (default) keeps the list minimal for inline page headers.
+     */
+    shadow: boolean;
+    private dropdownOpen;
+    private overflowTriggerEl?;
+    private overflowPopoverEl?;
+    private overflowPopover;
+    static styles: import("lit").CSSResult;
+    /**
+     * Dispatches a `route-change` event when a breadcrumb item is clicked.
+     * @param item - The clicked breadcrumb item.
+     * @param event - The originating click event.
+     * @returns {void}
+     */
+    private handleBreadcrumbClick;
+    /**
+     * Opens overflow menu when collapsed items are present.
+     *
+     * @returns {void}
+     */
+    openOverflow(): void;
+    /**
+     * Closes overflow menu.
+     *
+     * @returns {void}
+     */
+    closeOverflow(): void;
+    /** Opens or closes the overflow dropdown. */
+    private toggleOverflow;
+    render(): TemplateResult;
+}

package/dist/sky-breadcrumb/sky-breadcrumb.js

@@ -0,0 +1,230 @@
+import{__decorate as r,__metadata as e}from"tslib";import{LitElement as o,css as t,html as a,nothing as s}from"lit";import{property as i,state as n,query as l,customElement as p}from"lit/decorators.js";import{when as d}from"lit/directives/when.js";import{repeat as c}from"lit/directives/repeat.js";import{classMap as v}from"lit/directives/class-map.js";import{PopoverController as m}from"../helper/controllers/popover-controller.js";import{SkyIcon as y}from"../sky-icon/sky-icon.js";let b=class extends o{constructor(){super(...arguments),this.items=[],this.separator="/",this.showHome="auto",this.visibleItems=3,this.shadow=!1,this.dropdownOpen=!1,this.overflowPopover=new m(this,{getAnchor:()=>this.overflowTriggerEl??null,getPopover:()=>this.overflowPopoverEl??null,cssVarLeft:"--sky-bc-left",cssVarTop:"--sky-bc-top",cssVarWidth:"--sky-bc-width",placement:"bottom",align:"start",gap:4,padding:8,matchAnchorWidth:!1,maxWidthToViewport:!0,maxWidthMode:"cap",closeOnEscape:!0,closeOnOutside:!0,restoreFocusOnClose:!0,onOpenChange:r=>{this.dropdownOpen=r}})}static{this.dependencies={"sky-icon":y}}static{this.styles=t`
+    :host {
+      display: block;
+      overflow: visible;
+      font-family: var(--sky-font);
+    }
+
+    .breadcrumb {
+      list-style: none;
+      padding: 0;
+      display: flex;
+      gap: var(--sky-space-2);
+      flex-wrap: wrap;
+      margin: 0;
+      align-items: center;
+    }
+
+    :host([shadow]) .breadcrumb {
+      padding: var(--sky-space-2) var(--sky-space-4);
+      border-radius: inherit;
+      position: relative;
+      background: var(--sky-glass-primary);
+      z-index: 0;
+      box-shadow: var(--sky-box-shadow-primary);
+      border: var(--sky-border-primary);
+    }
+
+    :host([shadow]) .breadcrumb::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      z-index: -1;
+      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);
+    }
+
+    .breadcrumb li {
+      display: flex;
+      align-items: center;
+      position: relative;
+    }
+
+    .breadcrumb a {
+      text-decoration: none;
+      color: var(--sky-text-primary);
+      font-weight: var(--sky-font-weight-semibold);
+      font-size: var(--sky-font-size-sm);
+      cursor: pointer;
+      transition: color var(--sky-duration-normal, 0.2s) var(--sky-ease-default, ease);
+    }
+
+    .breadcrumb a:hover {
+      color: var(--sky-text-primary-hover);
+    }
+
+    .breadcrumb .separator {
+      margin: 0 var(--sky-space-2);
+      color: var(--sky-text-secondary);
+      font-size: var(--sky-font-size-sm);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .breadcrumb a,
+      .breadcrumb .overflow-trigger,
+      .overflow-dropdown a,
+      .overflow-dropdown button.overflow-item {
+        transition: none;
+      }
+    }
+
+    .breadcrumb .active {
+      color: var(--sky-active-primary);
+      font-weight: var(--sky-font-weight-semibold);
+      font-size: var(--sky-font-size-sm);
+    }
+
+    .breadcrumb .overflow-trigger {
+      display: flex;
+      margin-inline-end: var(--sky-space-2);
+      align-items: center;
+      cursor: pointer;
+      user-select: none;
+      border: none;
+      background: transparent;
+      padding: var(--sky-space-1);
+      border-radius: var(--sky-radius-secondary);
+      color: var(--sky-text-primary);
+      transition: background var(--sky-duration-normal, 0.2s) var(--sky-ease-default, ease),
+        color var(--sky-duration-normal, 0.2s) var(--sky-ease-default, ease);
+      -webkit-tap-highlight-color: transparent;
+    }
+
+    .breadcrumb .overflow-trigger:focus-visible {
+      outline: none;
+      box-shadow: var(--sky-focus-ring);
+    }
+
+    .breadcrumb .overflow-trigger:hover {
+      background: var(--sky-bg-hover, rgba(0, 0, 0, 0.06));
+      color: var(--sky-text-primary-hover);
+    }
+
+    .breadcrumb .overflow-trigger sky-icon {
+      width: 1em;
+      height: 1em;
+    }
+
+    .overflow-dropdown {
+      position: fixed;
+      left: var(--sky-bc-left, 0px);
+      top: var(--sky-bc-top, 0px);
+      width: var(--sky-bc-width, max-content);
+      min-width: 120px;
+      max-height: 280px;
+      overflow: auto;
+      margin: 0;
+      padding: var(--sky-space-1);
+      background: var(--sky-glass-primary);
+      border: var(--sky-border-primary);
+      border-radius: var(--sky-radius-secondary);
+      box-shadow: var(--sky-box-shadow-primary);
+      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);
+    }
+
+    .overflow-dropdown a,
+    .overflow-dropdown button.overflow-item {
+      display: block;
+      width: 100%;
+      text-align: start;
+      padding: var(--sky-space-2) var(--sky-space-3);
+      border: none;
+      border-radius: var(--sky-radius-secondary);
+      background: transparent;
+      color: var(--sky-text-primary);
+      font-size: var(--sky-font-size-sm);
+      font-weight: var(--sky-font-weight-semibold);
+      cursor: pointer;
+      text-decoration: none;
+      font-family: var(--sky-font);
+      transition: background var(--sky-duration-normal, 0.2s) var(--sky-ease-default, ease),
+        color var(--sky-duration-normal, 0.2s) var(--sky-ease-default, ease);
+    }
+
+    .overflow-dropdown button.overflow-item:focus-visible {
+      outline: none;
+      box-shadow: var(--sky-focus-ring);
+    }
+
+    .overflow-dropdown a:hover,
+    .overflow-dropdown button.overflow-item:hover {
+      background: var(--sky-bg-hover, rgba(0, 0, 0, 0.06));
+      color: var(--sky-text-primary-hover);
+    }
+  `}handleBreadcrumbClick(r,e){e.preventDefault(),this.dispatchEvent(new CustomEvent("route-change",{detail:r,bubbles:!0,composed:!0}))}openOverflow(){this.overflowPopover.openPopover()}closeOverflow(){this.overflowPopover.closePopover("api")}toggleOverflow(){this.overflowPopover.toggle()}render(){const r=this.items.some(r=>"/"===r.route||"home"===r.title.trim().toLowerCase()),e="always"===this.showHome||"auto"===this.showHome&&!r,o=e?[{title:"Home",route:"/"},...this.items]:[...this.items];let t=null,i=[],n=[];if(e)t=o[0];else{const r=o.find(r=>"/"===r.route||"home"===r.title.trim().toLowerCase());r&&(t=r)}const l=t?o.filter(r=>r!==t):[...o],p=t?Math.max(this.visibleItems-1,0):this.visibleItems;l.length>p?(i=l.slice(0,-p),n=l.slice(-p)):n=l;const m=()=>a`<span class="separator" part="separator">${this.separator}</span>`;return a`
+      <nav aria-label="breadcrumb">
+        <ul class="breadcrumb" part="list">
+          ${d(t,()=>a`
+              <li part="item home">
+                <a
+                  part="link home"
+                  href="${t.route}"
+                  @click=${r=>this.handleBreadcrumbClick(t,r)}
+                  >${t.title}</a
+                >
+                ${m()}
+              </li>
+            `)}
+          ${d(i.length>0,()=>a`
+              <li part="item dropdown">
+                <button
+                  type="button"
+                  class="overflow-trigger"
+                  part="dropdown"
+                  aria-expanded=${this.dropdownOpen}
+                  aria-haspopup="menu"
+                  aria-label="Show more breadcrumb links"
+                  @click=${this.toggleOverflow}
+                >
+                  <sky-icon icon="ic:outline-more-horiz"></sky-icon>
+                </button>
+
+                <div
+                  class="overflow-dropdown"
+                  part="overflow-menu"
+                  popover="manual"
+                  role="menu"
+                  @toggle=${this.overflowPopover.onToggle}
+                  @click=${r=>r.stopPropagation()}
+                >
+                  ${c(i,(r,e)=>`${r.route}-${e}`,r=>a`
+                      <button
+                        type="button"
+                        class="overflow-item"
+                        role="menuitem"
+                        @click=${e=>{this.handleBreadcrumbClick(r,e),this.overflowPopover.closePopover("api")}}
+                      >
+                        ${r.title}
+                      </button>
+                    `)}
+                </div>
+
+                ${m()}
+              </li>
+            `)}
+          ${c(n,(r,e)=>`${r.route}-${r.title}-${e}`,(r,e)=>{const o=e===n.length-1,t=!!r.active||o;return a`
+                <li
+                  class=${v({active:t})}
+                  part=${t?"item current":"item"}
+                >
+                  ${d(o,()=>a`<span part="current">${r.title}</span>`,()=>a`
+                      <a
+                        part="link"
+                        href="${r.route}"
+                        @click=${e=>this.handleBreadcrumbClick(r,e)}
+                        >${r.title}</a
+                      >
+                    `)}
+                  ${d(!o,()=>m(),()=>s)}
+                </li>
+              `})}
+        </ul>
+      </nav>
+    `}};r([i({type:Array}),e("design:type",Array)],b.prototype,"items",void 0),r([i({type:String}),e("design:type",String)],b.prototype,"separator",void 0),r([i({type:String}),e("design:type",String)],b.prototype,"showHome",void 0),r([i({type:Number}),e("design:type",Number)],b.prototype,"visibleItems",void 0),r([i({type:Boolean,reflect:!0}),e("design:type",Object)],b.prototype,"shadow",void 0),r([n(),e("design:type",Object)],b.prototype,"dropdownOpen",void 0),r([l(".overflow-trigger"),e("design:type",HTMLElement)],b.prototype,"overflowTriggerEl",void 0),r([l(".overflow-dropdown"),e("design:type",HTMLElement)],b.prototype,"overflowPopoverEl",void 0),b=r([p("sky-breadcrumb")],b);export{b as SkyBreadcrumb};
+//# sourceMappingURL=sky-breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sky-breadcrumb.js","sources":["../../src/sky-breadcrumb/sky-breadcrumb.ts"],"sourcesContent":[null],"names":["SkyBreadcrumb","LitElement","constructor","this","items","separator","showHome","visibleItems","shadow","dropdownOpen","overflowPopover","PopoverController","getAnchor","overflowTriggerEl","getPopover","overflowPopoverEl","cssVarLeft","cssVarTop","cssVarWidth","placement","align","gap","padding","matchAnchorWidth","maxWidthToViewport","maxWidthMode","closeOnEscape","closeOnOutside","restoreFocusOnClose","onOpenChange","open","dependencies","SkyIcon","styles","css","handleBreadcrumbClick","item","event","preventDefault","dispatchEvent","CustomEvent","detail","bubbles","composed","openOverflow","openPopover","closeOverflow","closePopover","toggleOverflow","toggle","render","hasHomeItem","some","route","title","trim","toLowerCase","shouldPrependHome","allItems","homeItem","middleItems","homeCandidate","find","remainingItems","filter","remainingVisibleCount","Math","max","length","slice","sep","html","when","e","onToggle","stopPropagation","repeat","i","index","isLast","isActive","active","classMap","nothing","__decorate","property","type","Array","prototype","String","Number","Boolean","reflect","state","query","HTMLElement","customElement"],"mappings":"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"}

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

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

package/dist/sky-button/index.js

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

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

@@ -0,0 +1,118 @@
+import { LitElement } from "lit";
+export type SkyButtonVariant = "solid" | "faded" | "bordered" | "transparent" | "flat" | "ghost" | "relief" | "gradient" | "shadow" | "link";
+export type SkyButtonType = "button" | "submit" | "reset";
+export type SkyButtonAnimation = "auto" | "none" | "lift" | "push" | "scale" | "rotate" | "custom";
+/**
+ * @element sky-button
+ *
+ * @summary Styled button supporting variants, icons, loading state, ripple feedback, and form-associated behavior.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/button
+ * @dependency sky-icon
+ *
+ * @slot - Default slot for the button label (replaces `label` property if used).
+ *
+ * @csspart button - The native `<button>` element.
+ * @csspart icon - The optional left/right icons.
+ * @csspart loading-overlay - Overlay displayed when loading.
+ * @csspart spinner - Spinner displayed when loading.
+ *
+ * @property {SkyButtonVariant} variant - Visual variant of the button. Use `"link"` for text-only control with underline on hover. Default: `"solid"`.
+ * @property {string} color - Base color token or custom CSS color. Default: `"primary"`.
+ * @property {SkyButtonType} type - Button type attribute. Default: `"button"`.
+ * @property {string} form - Associated form ID for custom submit handling.
+ * @property {string} size - Preset size token (`xs…xl`) or CSS size (e.g., `"15px"`, `"1rem"`). Default: `"md"`.
+ * @property {string} radius - Preset radius token (`none…full`) or CSS radius (e.g., `"12px"`). Default: `"md"`.
+ * @property {string} label - Text label for the button. Ignored if default slot is used. Default: `"Button"`.
+ * @property {boolean} disabled - Whether the button is disabled. Default: `false`.
+ * @property {boolean} loading - Shows a loading overlay when true. Default: `false`.
+ * @property {string} iconL - Optional left-side icon (Iconify name). Default: `""`.
+ * @property {string} iconR - Optional right-side icon (Iconify name). Default: `""`.
+ * @property {boolean} iconOnly - Square padding for icon-only buttons; hides label text. Default: `false`.
+ * @property {string} colors - Comma-separated color stops for gradient variant. Default: `""`.
+ * @property {SkyButtonAnimation} animation - Transform animation style. Default: `"auto"`.
+ * @method focusButton Focuses the internal native button.
+ * @method clickButton Triggers a click on the internal native button when enabled.
+ *
+ * @example
+ * ```html
+ * <sky-button variant="gradient" colors="linear@90deg: primary, secondary" iconl="ion:add" label="Create"></sky-button>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-button variant="gradient" colors="linear@90deg: primary, secondary" iconl="ion:add" label="Create"></sky-button>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return <sky-button variant="gradient" colors="linear@90deg: primary, secondary" iconl="ion:add" label="Create"></sky-button>;
+ * }
+ * ```
+ */
+export declare class SkyButton extends LitElement {
+    static dependencies: Record<string, CustomElementConstructor>;
+    static formAssociated: boolean;
+    private internals;
+    /** Visual variant of the button. */
+    variant: SkyButtonVariant;
+    /** Accepts preset tokens OR any valid CSS color (e.g., #0af, rgb(), var(--x)). */
+    color: string;
+    /** Button type attribute. */
+    type: SkyButtonType;
+    /** Associated form ID for custom form handling. */
+    form: string;
+    /** Preset tokens (`xs…xl`) OR CSS size like `"15px"`. */
+    size: string;
+    /** Preset tokens (`none…full`) OR any CSS border radius. */
+    radius: string;
+    /** Text label for the button. */
+    label: string;
+    /** Disables the button. */
+    disabled: boolean;
+    /** Shows a loading spinner overlay. */
+    loading: boolean;
+    /** Left-side icon (Iconify icon name). */
+    iconL: string;
+    /** Right-side icon (Iconify icon name). */
+    iconR: string;
+    /** Square padding and compact layout when the button shows only an icon. */
+    iconOnly: boolean;
+    /** Colors for gradient variant. */
+    colors: string;
+    /** Animation style for hover/active transforms. */
+    animation: SkyButtonAnimation;
+    /** @internal Set by `sky-button-group` to flatten grouped button visuals. */
+    inGroup: boolean;
+    private _hasMeaningfulSlot;
+    /** Inline CSS variable cache. */
+    private _styleVars;
+    static styles: import("lit").CSSResult;
+    constructor();
+    private _slotHasMeaningfulContent;
+    private _onSlotChange;
+    /** Uses vertical padding for equal sides (icon-only square control). */
+    private _toSquarePadding;
+    private _resolveSize;
+    protected willUpdate(changedProperties: Map<string, unknown>): void;
+    /**
+     * Focuses the internal native button.
+     *
+     * @returns {void}
+     */
+    focusButton(): void;
+    /**
+     * Triggers a click on the internal native button when enabled.
+     *
+     * @returns {void}
+     */
+    clickButton(): void;
+    private _createRipple;
+    formDisabledCallback(disabled: boolean): void;
+    get formOwner(): HTMLFormElement | null;
+    private _handleClick;
+    private _iconOnlyName;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/sky-button/sky-button.js

@@ -0,0 +1,172 @@
+import{__decorate as t,__metadata as e}from"tslib";import{LitElement as o,css as r,html as n,nothing as i}from"lit";import{property as a,state as s,eventOptions as l,customElement as d}from"lit/decorators.js";import{when as p}from"lit/directives/when.js";import{styleMap as h}from"lit/directives/style-map.js";import{resolveColor as c,resolveTextColorForToken as b,createGradient as v,tuneSurfaceVariantForDefaultColor as g,darkShade as y,fadeMix as u,skyBorderPrimaryShorthand as m,hoverShade as f}from"../helper/utils/color-resolver.js";import{resolveRadius as x}from"../helper/utils/size-resolver.js";import{ifDefined as k}from"lit/directives/if-defined.js";import{SkyIcon as w}from"../sky-icon/sky-icon.js";let S=class extends o{static{this.dependencies={"sky-icon":w}}static{this.formAssociated=!0}static{this.styles=r`
+    :host {
+      display: inline-block;
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    :host([in-group]) {
+      align-self: stretch;
+    }
+
+    :host([iconOnly]) button {
+      width: auto;
+      min-width: var(--btn-min-width, auto);
+      aspect-ratio: 1;
+      gap: 0;
+    }
+
+    :host([variant="link"]) button {
+      width: auto;
+      border-radius: 0;
+      text-decoration: none;
+      background-color: transparent;
+      background-image: linear-gradient(currentColor, currentColor);
+      background-position: 0 100%;
+      background-repeat: no-repeat;
+      background-size: 0% 1px;
+      transition:
+        background-size 0.2s ease,
+        color 0.25s ease,
+        box-shadow 0.25s ease,
+        border 0.25s ease,
+        transform 0.25s ease;
+    }
+    :host([variant="link"]) button:hover:not(:disabled),
+    :host([variant="link"]) button:focus-visible:not(:disabled) {
+      background-color: transparent;
+      background-image: linear-gradient(currentColor, currentColor);
+      background-position: 0 100%;
+      background-repeat: no-repeat;
+      background-size: 100% 1px;
+    }
+
+    button {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      border-radius: var(--btn-radius, var(--sky-radius-primary));
+      font: inherit;
+      cursor: pointer;
+      transition: all 0.25s ease;
+      box-sizing: border-box;
+      outline: none;
+      border: var(--btn-border, none);
+      background: var(--btn-bg);
+      color: var(--btn-color);
+      box-shadow: var(--btn-shadow, none);
+      transform: var(--btn-transform, none);
+      gap: var(--btn-gap, 5px);
+      padding: var(--btn-padding, 8px 14px);
+      font-size: var(--btn-font-size, 16px);
+      font-family: var(--sky-font);
+      white-space: nowrap;
+      text-align: center;
+      text-decoration: var(--btn-text-decoration, none);
+      width: 100%;
+      height: auto;
+      min-height: var(--btn-min-height, auto);
+
+      /* Ensure button doesn't shrink */
+      flex-shrink: 0;
+    }
+    button:hover:not(:disabled),
+    button:focus-visible:not(:disabled) {
+      background: var(--btn-bg-hover, var(--btn-bg));
+      color: var(--btn-color-hover, var(--btn-color));
+      box-shadow: var(--btn-shadow-hover, var(--btn-shadow));
+      border: var(--btn-border-hover, var(--btn-border));
+      text-decoration: var(
+        --btn-text-decoration-hover,
+        var(--btn-text-decoration, none)
+      );
+      transform: var(--btn-transform-hover, var(--btn-transform, none));
+      height: auto;
+      min-height: var(--btn-min-height, auto);
+    }
+    button:active:not(:disabled) {
+      transform: var(
+        --btn-transform-active,
+        var(--btn-transform-hover, var(--btn-transform, none))
+      );
+    }
+    button:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    .ripple {
+      position: absolute;
+      border-radius: 50%;
+      background: rgba(255, 255, 255, 0.5);
+      transform: scale(0);
+      animation: ripple-animation 0.6s linear;
+      pointer-events: none;
+    }
+    @keyframes ripple-animation {
+      to {
+        transform: scale(4);
+        opacity: 0;
+      }
+    }
+    sky-icon {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      font-size: var(--icon-size, 18px);
+    }
+    .loading-overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: var(--sky-overlay-primary);
+      visibility: hidden;
+    }
+    button[loading] .loading-overlay {
+      visibility: visible;
+    }
+    .spinner {
+      width: var(--spinner-size, 18px);
+      height: var(--spinner-size, 18px);
+      border: 2px solid currentColor;
+      border-top-color: transparent;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  `}constructor(){super(),this.variant="solid",this.color="primary",this.type="button",this.form="",this.size="md",this.radius="md",this.label="Button",this.disabled=!1,this.loading=!1,this.iconL="",this.iconR="",this.iconOnly=!1,this.colors="",this.animation="auto",this.inGroup=!1,this._hasMeaningfulSlot=!1,this._styleVars={},this._onSlotChange=t=>{const e=t.target,o=this._slotHasMeaningfulContent(e);o!==this._hasMeaningfulSlot&&(this._hasMeaningfulSlot=o)},this.internals=this.attachInternals()}_slotHasMeaningfulContent(t){return t.assignedNodes({flatten:!0}).some(t=>t.nodeType===Node.ELEMENT_NODE||(t.textContent??"").trim().length>0)}_toSquarePadding(t){const e=parseFloat(t.trim().split(/\s+/)[0]);return`${Number.isFinite(e)?e:8}px`}_resolveSize(t){const e={xs:{padding:"3px 7px",fontSize:"12px",gap:"3px",icon:"14px",spinner:"14px"},sm:{padding:"5px 9px",fontSize:"14px",gap:"4px",icon:"16px",spinner:"16px"},md:{padding:"8px 14px",fontSize:"16px",gap:"5px",icon:"18px",spinner:"18px"},lg:{padding:"10px 18px",fontSize:"18px",gap:"6px",icon:"20px",spinner:"20px"},xl:{padding:"14px 24px",fontSize:"20px",gap:"8px",icon:"24px",spinner:"24px"}};if(e[t])return e[t];const o=String(t).trim().match(/^([\d.]+)(px|rem|em)?$/i),r=o?.[2]||"px",n=o?parseFloat(o[1]):16,i=`${n}${r}`,a=t=>`${Math.round(100*t)/100}${r}`,s=(t,e,o)=>Math.max(e,Math.min(o,t)),l=s(.55*n,4,18),d=s(.9*n,8,28),p=s(.3*n,3,10),h=s(1.125*n,12,28),c=h;return{padding:`${a(l)} ${a(d)}`,fontSize:i,gap:a(p),icon:a(h),spinner:a(c)}}willUpdate(t){if(!["color","variant","size","radius","animation","inGroup","disabled","loading","colors","iconOnly"].some(e=>t.has(e))&&Object.keys(this._styleVars).length>0)return;const e=c(this.color),o=b(this.color),r={solid:{bg:e,color:o,border:"none",shadow:"none",hoverBg:e,hoverColor:o,hoverShadow:`0 10px 20px -10px ${e}`},faded:{bg:"var(--sky-hover-tertiary)",color:e,border:"1px solid var(--sky-text-tertiary)",shadow:"none",hoverBg:"var(--sky-hover-secondary)",hoverColor:e,hoverShadow:"none",hoverBorder:"1px solid var(--sky-text-secondary)"},bordered:{bg:"transparent",color:e,border:`2px solid ${e}`,shadow:"none",hoverBg:"transparent",hoverColor:e,hoverShadow:"none",hoverBorder:`2px solid ${f(e,25)}`},transparent:{bg:"transparent",color:e,border:"none",shadow:"none",hoverBg:u(e,15),hoverColor:e,hoverShadow:"none"},flat:{bg:u(e,20),color:f(e,30),border:"none",shadow:"none",hoverBg:u(e,25),hoverColor:f(e,35),hoverShadow:"none"},ghost:{bg:"transparent",color:e,border:`2px solid ${e}`,shadow:"none",hoverBg:e,hoverColor:o,hoverShadow:"none"},shadow:{bg:"var(--sky-glass-primary)",color:"var(--sky-text-primary)",border:m(),shadow:"var(--sky-box-shadow-primary)",hoverBg:"var(--sky-glass-primary)",hoverColor:e,hoverShadow:"var(--sky-box-shadow-secondary)",hoverBorder:m()},relief:{bg:e,color:o,border:"none",shadow:`\n        inset 0 1px 0 rgba(255,255,255,0.4),\n        0 3px 0 ${y(e,40)},\n        0 4px 6px -1px ${u(e,40)}\n      `,hoverBg:e,hoverColor:o,hoverShadow:"none"},gradient:{bg:v(this.colors,e),color:o,border:"none",shadow:"none",hoverBg:v(this.colors,e),hoverColor:o,hoverShadow:"none"},link:{bg:"transparent",color:e,border:"none",shadow:"none",hoverBg:"transparent",hoverColor:e,hoverShadow:"none"}},n=this.variant in r?this.variant:"solid",i=g(this.color,n,r[n]),a=this.inGroup?"none":this.animation,s="auto"===a?{solid:{hover:"translateY(-3px)",active:"translateY(-3px)"},faded:{},bordered:{},transparent:{},flat:{},ghost:{},shadow:{hover:"translateY(-3px)",active:"translateY(-3px)"},gradient:{},relief:{hover:"translateY(2px)",active:"translateY(2px)"},link:{}}[n]:(t=>{switch(t){case"none":return{hover:"none",active:"none"};case"lift":return{hover:"translateY(-2px)",active:"translateY(-1px)"};case"push":return{hover:"translateY(2px)",active:"translateY(2px)"};case"scale":return{hover:"scale(1.05)",active:"scale(1.02)"};case"rotate":return{hover:"rotate(3deg)",active:"rotate(2deg)"};case"custom":return{hover:"var(--btn-hover-transform, none)",active:"var(--btn-active-transform, var(--btn-hover-transform, none))"};default:return{}}})(a),l=s.hover??"none",d=s.active??l??"none",p=this._resolveSize(this.size),h=this.iconOnly?this._toSquarePadding(p.padding):p.padding,k=this.iconOnly?"0":p.gap;let w=0;const S="bordered"===this.variant||"ghost"===this.variant,$="faded"===this.variant||"shadow"===this.variant;if(S)w=2;else if($)w=1;else if(i.border&&i.border.includes("px")){const t=i.border.match(/(\d+)px/);w=t?parseInt(t[1]):0}let C=w;if(i.hoverBorder&&i.hoverBorder.includes("px")){const t=i.hoverBorder.match(/(\d+)px/);C=t?parseInt(t[1]):w}let z="link"===this.variant?"0":h;if(w>0){const t=h.split(" ");if(1===t.length){const e=parseFloat(t[0]);z=`${Math.max(e-w,2)}px`}else if(2===t.length){const e=parseFloat(t[0]),o=parseFloat(t[1]),r=Math.max(e-w,2);z=this.iconOnly?`${r}px`:`${r}px ${o}px`}else if(4===t.length){const e=parseFloat(t[0]),o=parseFloat(t[1]),r=parseFloat(t[2]),n=parseFloat(t[3]);z=`${Math.max(e-w,2)}px ${o}px ${Math.max(r-w,2)}px ${n}px`}}const B=parseFloat(p.fontSize),O=parseFloat(p.icon);let _,j;if("link"===this.variant)_="auto";else if(this.iconOnly){const t=2*(parseFloat(z)||0)+O+2*w;_=`${t}px`,j=`${t}px`}else{const t=z.split(" ");_=`${(t.length>=2?parseFloat(t[0])+parseFloat(t[2]||t[0]):2*parseFloat(t[0])||16)+B+4+2*w}px`}const F={"--btn-bg":i.bg,"--btn-color":i.color,"--btn-border":i.border,"--btn-shadow":i.shadow,"--btn-radius":"link"===this.variant?"0":x(this.radius),"--btn-bg-hover":i.hoverBg,"--btn-color-hover":i.hoverColor,"--btn-shadow-hover":i.hoverShadow,"--btn-transform":"none","--btn-transform-hover":l,"--btn-transform-active":d,"--btn-padding":z,"--btn-font-size":p.fontSize,"--btn-gap":k,"--icon-size":p.icon,"--spinner-size":p.spinner,"--btn-min-height":_,...j?{"--btn-min-width":j}:{},"--btn-border-width":`${w}px`,"--btn-border-width-hover":`${C}px`};i.hoverBorder?F["--btn-border-hover"]=i.hoverBorder:delete F["--btn-border-hover"],this.inGroup&&("gradient"===this.variant?(F["--btn-bg"]="transparent",F["--btn-bg-hover"]="color-mix(in srgb, white 8%, transparent)"):F["--btn-bg-hover"]=F["--btn-bg"],F["--btn-color-hover"]=F["--btn-color"],F["--btn-border-hover"]=F["--btn-border"],F["--btn-shadow-hover"]="none","relief"===this.variant?(F["--btn-transform-hover"]="translateY(2px)",F["--btn-transform-active"]="translateY(2px)"):(F["--btn-transform-hover"]="none",F["--btn-transform-active"]="none")),this._styleVars=F}focusButton(){this.renderRoot.querySelector("button")?.focus()}clickButton(){this.disabled||this.loading||this.renderRoot.querySelector("button")?.click()}_createRipple(t){const e=t.currentTarget,o=e.getBoundingClientRect(),r=document.createElement("span"),n=Math.max(e.offsetWidth,e.offsetHeight),i=t.clientX-o.left-n/2,a=t.clientY-o.top-n/2;r.style.width=r.style.height=`${n}px`,r.style.left=`${i}px`,r.style.top=`${a}px`;const s=getComputedStyle(e).backgroundColor||"",l=s.includes("255, 255, 255")||s.includes("rgba(0, 0, 0, 0)");r.style.background=l?"rgba(0, 0, 0, 0.2)":"rgba(255, 255, 255, 0.3)",r.className="ripple";const d=e.querySelectorAll(".ripple");d.length>=3&&d[0]&&d[0].remove(),e.appendChild(r),r.addEventListener("animationend",()=>r.remove())}formDisabledCallback(t){this.disabled=t}get formOwner(){if("undefined"==typeof document)return null;const t="string"==typeof this.form?this.form.trim():"";return this.internals.form||(t?document.getElementById(t):null)||this.closest("form")}_handleClick(t){if(this.disabled||this.loading)return void t.preventDefault();"button"===this.type&&t.preventDefault(),this._createRipple(t);const e=this.formOwner;"submit"!==this.type?"reset"!==this.type||e?.reset():e?.requestSubmit()}_iconOnlyName(){return this.iconL||this.iconR}render(){const t=this._iconOnlyName(),e=this.iconOnly&&(this.label||t)?this.label||t:void 0;return n`
+      <button
+        style=${h(this._styleVars)}
+        type=${this.type}
+        form=${k(this.form??void 0)}
+        aria-label=${k(e)}
+        ?disabled=${this.disabled||this.loading}
+        ?loading=${this.loading}
+        @click=${this._handleClick}
+      >
+        ${p(this.iconOnly,()=>p(t,()=>n`<sky-icon part="icon" icon="${t}"></sky-icon>`),()=>n`
+            ${p(this.iconL,()=>n`<sky-icon part="icon" icon="${this.iconL}"></sky-icon>`)}
+            <slot @slotchange=${this._onSlotChange}></slot>
+            ${this._hasMeaningfulSlot?i:this.label}
+            ${p(this.iconR,()=>n`<sky-icon part="icon" icon="${this.iconR}"></sky-icon>`)}
+          `)}
+        ${p(this.loading,()=>n`
+            <div class="loading-overlay" part="loading-overlay">
+              <div class="spinner" part="spinner"></div>
+            </div>
+          `)}
+      </button>
+    `}};t([a({type:String,reflect:!0}),e("design:type",String)],S.prototype,"variant",void 0),t([a({type:String}),e("design:type",String)],S.prototype,"color",void 0),t([a({type:String}),e("design:type",String)],S.prototype,"type",void 0),t([a({type:String}),e("design:type",Object)],S.prototype,"form",void 0),t([a({type:String}),e("design:type",String)],S.prototype,"size",void 0),t([a({type:String}),e("design:type",String)],S.prototype,"radius",void 0),t([a({type:String}),e("design:type",Object)],S.prototype,"label",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Object)],S.prototype,"disabled",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Object)],S.prototype,"loading",void 0),t([a({type:String}),e("design:type",Object)],S.prototype,"iconL",void 0),t([a({type:String}),e("design:type",Object)],S.prototype,"iconR",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Object)],S.prototype,"iconOnly",void 0),t([a({type:String}),e("design:type",String)],S.prototype,"colors",void 0),t([a({type:String,reflect:!0}),e("design:type",String)],S.prototype,"animation",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Object)],S.prototype,"inGroup",void 0),t([s(),e("design:type",Object)],S.prototype,"_hasMeaningfulSlot",void 0),t([l({passive:!1}),e("design:type",Function),e("design:paramtypes",[MouseEvent]),e("design:returntype",void 0)],S.prototype,"_handleClick",null),S=t([d("sky-button"),e("design:paramtypes",[])],S);export{S as SkyButton};
+//# sourceMappingURL=sky-button.js.map