@luisrodonccs/simplest-ui 0.0.0-stage → 0.1.0

package/dist/components/internal/position.d.ts

@@ -0,0 +1,12 @@
+export type Side = "top" | "bottom";
+export type Align = "start" | "end";
+export type Placement = {
+    side: Side;
+    align: Align;
+};
+/**
+ * Decides how a floating panel should be placed relative to its anchor so it
+ * stays inside the viewport.
+ */
+export declare function computePlacement(anchor: DOMRect, panel: DOMRect, margin?: number): Placement;
+//# sourceMappingURL=position.d.ts.map

package/dist/components/internal/position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../src/components/internal/position.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,IAAI,GAAG,KAAK,GAAG,QAAQ,CAAC;AACpC,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,KAAK,CAAC;AAEpC,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;CACd,CAAC;AAIF;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,OAAO,EACd,MAAM,GAAE,MAAwB,GAC/B,SAAS,CAUX"}

package/dist/components/modal.d.ts

@@ -0,0 +1,40 @@
+import { LitElement, nothing } from "lit";
+import type { PropertyValues } from "lit";
+export declare class SuiModal extends LitElement {
+    private static instanceCount;
+    private static scrollLocks;
+    private static previousOverflow;
+    private readonly uid;
+    static styles: import("lit").CSSResult;
+    open: boolean;
+    /** Accessible name used when no `title` slot content is provided. */
+    label: string;
+    /** Accessible label for the dialog's close button. */
+    closeLabel: string;
+    /** Set to true to keep the modal open when the backdrop is clicked. */
+    disableBackdropClose: boolean;
+    private previouslyFocused;
+    private holdsScrollLock;
+    private get titleId();
+    private get bodyId();
+    protected updated(changed: PropertyValues): void;
+    private static lockScroll;
+    private static unlockScroll;
+    private getFocusable;
+    private focusInitial;
+    private getDeepActiveElement;
+    private handleKeydown;
+    private handleBackdropClick;
+    openModal(): void;
+    close(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private releaseScrollLock;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sui-modal": SuiModal;
+    }
+}
+//# sourceMappingURL=modal.d.ts.map

package/dist/components/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/components/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAErD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1C,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAK;IACjC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAK;IAC/B,OAAO,CAAC,MAAM,CAAC,gBAAgB,CAAM;IACrC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA4B;IAEhD,MAAM,CAAC,MAAM,0BAyEX;IAE0C,IAAI,UAAS;IAEzD,qEAAqE;IACzC,KAAK,SAAM;IAEvC,sDAAsD;IACA,UAAU,SAAW;IAE3E,uEAAuE;IACL,oBAAoB,UAAS;IAE/F,OAAO,CAAC,iBAAiB,CAA4B;IACrD,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,MAAM,GAEjB;IAED,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc;IAiBzC,OAAO,CAAC,MAAM,CAAC,UAAU;IAMzB,OAAO,CAAC,MAAM,CAAC,YAAY;IAQ3B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,aAAa,CA4BnB;IAEF,OAAO,CAAC,mBAAmB,CAGzB;IAEF,SAAS;IAIT,KAAK;IAIL,iBAAiB;IAKjB,oBAAoB;IAMpB,OAAO,CAAC,iBAAiB;IAMzB,MAAM;CA0BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/nav.css

@@ -0,0 +1 @@
+.ui-nav{display:flex;flex-direction:column;gap:var(--sui-space-0-5)}.ui-nav__item{display:flex;align-items:center;gap:var(--sui-space-2);padding:var(--sui-space-2) var(--sui-space-2-5);font-size:var(--sui-font-size-sm);color:var(--sui-color-text);text-decoration:none;border-radius:var(--sui-radius-sm);transition:background var(--sui-duration-fast) var(--sui-easing-standard),color var(--sui-duration-fast) var(--sui-easing-standard);cursor:pointer;border:0;background:transparent;width:100%;text-align:left}.ui-nav__item:not(.ui-nav__item--active):hover{background:var(--sui-color-surface-muted);text-decoration:none}.ui-nav__item--active{background:var(--sui-gradient-primary);color:var(--sui-color-primary-contrast);font-weight:var(--sui-font-weight-medium)}.ui-nav__item[aria-disabled=true],.ui-nav__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ui-nav__item--active:hover,.ui-nav__item--active:focus-visible{color:var(--sui-color-text);border:1px solid transparent;background-image:linear-gradient(var(--sui-color-surface-raised),var(--sui-color-surface-raised)),var(--sui-gradient-primary);background-origin:border-box;background-clip:padding-box,border-box;filter:brightness(1.05);text-decoration:none}.ui-nav__group-title{font-size:var(--sui-font-size-2xs);font-weight:var(--sui-font-weight-semibold);letter-spacing:var(--sui-letter-spacing-wide);text-transform:uppercase;color:var(--sui-color-text-muted);padding:0 var(--sui-space-2-5);margin:var(--sui-space-2-5) 0 var(--sui-space-1)}

package/dist/components/popover.css

@@ -0,0 +1 @@
+.ui-popover{position:relative;display:inline-block}.ui-popover__content{position:absolute;top:calc(100% + var(--sui-space-2));left:0;min-width:var(--sui-popover-min-width, 220px);padding:var(--sui-space-3);background:var(--sui-color-surface-raised);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-md);box-shadow:var(--sui-shadow-floating);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md));display:none;z-index:var(--sui-z-popover)}.ui-popover.open .ui-popover__content{display:block;animation:sui-popover-in var(--sui-duration-normal) var(--sui-easing-standard)}.ui-popover--top .ui-popover__content{top:auto;bottom:calc(100% + var(--sui-space-2))}.ui-popover--end .ui-popover__content{left:auto;right:0}@keyframes sui-popover-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.ui-popover.open .ui-popover__content{animation:none}}

package/dist/components/popover.d.ts

@@ -0,0 +1,30 @@
+/** Accessible, light-DOM popover with click, keyboard and viewport handling. */
+export declare class SuiPopover extends HTMLElement {
+    private static instanceCount;
+    private readonly uid;
+    private readonly observer;
+    private previousOpen;
+    private hasSynced;
+    static get observedAttributes(): string[];
+    get open(): boolean;
+    set open(value: boolean);
+    get label(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private get trigger();
+    private get panel();
+    private upgrade;
+    private sync;
+    private measure;
+    private close;
+    private handleClick;
+    private handleDocumentClick;
+    private handleKeydown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sui-popover": SuiPopover;
+    }
+}
+//# sourceMappingURL=popover.d.ts.map

package/dist/components/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/components/popover.ts"],"names":[],"mappings":"AAGA,gFAAgF;AAChF,qBAAa,UAAW,SAAQ,WAAW;IACzC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAK;IACjC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA8B;IAClD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA8C;IACvE,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,SAAS,CAAS;IAE1B,MAAM,KAAK,kBAAkB,aAE5B;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,iBAAiB;IAUjB,oBAAoB;IAOpB,wBAAwB;IAIxB,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,KAAK,GAEhB;IAED,OAAO,CAAC,OAAO;IAef,OAAO,CAAC,IAAI;IA0BZ,OAAO,CAAC,OAAO;IASf,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,WAAW,CAMjB;IAEF,OAAO,CAAC,mBAAmB,CAEzB;IAEF,OAAO,CAAC,aAAa,CAmBnB;CACH;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/progress.css

@@ -0,0 +1 @@
+.ui-progress{width:100%;height:var(--sui-progress-height, 6px);background:var(--sui-color-surface-muted);border-radius:var(--sui-radius-full);overflow:hidden}.ui-progress__bar{height:100%;background:var(--sui-gradient-primary);border-radius:var(--sui-radius-full);transition:width var(--sui-duration-normal) var(--sui-easing-standard)}.ui-progress--indeterminate .ui-progress__bar{width:40%;animation:sui-progress var(--sui-duration-progress) ease-in-out infinite}@keyframes sui-progress{0%{transform:translate(-100%)}to{transform:translate(300%)}}[data-theme=light] .ui-progress{background:#0f172a1a}[data-theme=dark] .ui-progress{background:#94a3b838}@media (prefers-reduced-motion: reduce){.ui-progress--indeterminate .ui-progress__bar{width:100%;animation:none}}

package/dist/components/radio.css

@@ -0,0 +1 @@
+.ui-radio{display:inline-flex;align-items:center;gap:var(--sui-space-2);font-size:var(--sui-font-size-sm);color:var(--sui-color-text);cursor:pointer;-webkit-user-select:none;user-select:none}.ui-radio input{width:var(--sui-check-size);height:var(--sui-check-size);accent-color:var(--sui-color-primary);cursor:pointer}.ui-radio input:disabled{cursor:not-allowed}.ui-radio--disabled{opacity:.5;cursor:not-allowed}.ui-radio-group{display:flex;flex-direction:column;gap:var(--sui-space-2)}

package/dist/components/select.css

@@ -0,0 +1 @@
+.ui-select{display:block;width:100%;height:var(--sui-field-height);padding:0 var(--sui-space-8) 0 var(--sui-space-3);font-size:var(--sui-font-size-sm);color:var(--sui-color-text);background:var(--sui-color-surface-raised);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-md);backdrop-filter:blur(var(--sui-blur-sm));-webkit-backdrop-filter:blur(var(--sui-blur-sm));outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--sui-space-2-5) center;cursor:pointer;transition:border-color var(--sui-duration-fast) var(--sui-easing-standard),box-shadow var(--sui-duration-fast) var(--sui-easing-standard)}.ui-select:focus{border-color:var(--sui-color-focus);box-shadow:var(--sui-focus-ring)}.ui-select:disabled{background-color:var(--sui-color-surface-muted);cursor:not-allowed;opacity:.7}.ui-select--invalid{border-color:var(--sui-color-danger-border)}.ui-select--invalid:focus{box-shadow:0 0 0 3px var(--sui-color-danger-ring)}

package/dist/components/skeleton.css

@@ -0,0 +1 @@
+.ui-skeleton{background:linear-gradient(90deg,var(--sui-color-surface-muted) 25%,var(--sui-color-surface-raised) 50%,var(--sui-color-surface-muted) 75%);background-size:200% 100%;animation:sui-shimmer var(--sui-duration-shimmer) ease infinite;border-radius:var(--sui-radius-sm)}.ui-skeleton--text{height:var(--sui-space-3);width:100%;margin-bottom:var(--sui-space-1-5)}.ui-skeleton--title{height:var(--sui-space-4-5);width:60%;margin-bottom:var(--sui-space-2-5)}.ui-skeleton--avatar{width:var(--sui-space-10);height:var(--sui-space-10);border-radius:var(--sui-radius-full)}.ui-skeleton--block{height:var(--sui-skeleton-block-height, 120px);width:100%}@keyframes sui-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){.ui-skeleton{animation:none}}

package/dist/components/spinner.css

@@ -0,0 +1 @@
+.ui-spinner{display:inline-block;width:var(--sui-spinner-size, 16px);height:var(--sui-spinner-size, 16px);border:var(--sui-spinner-border, 2px) solid var(--sui-color-border);border-top-color:var(--sui-color-primary);border-radius:50%;animation:sui-spin var(--sui-duration-spinner) linear infinite}.ui-spinner--sm{--sui-spinner-size: 12px;--sui-spinner-border: 1.5px}.ui-spinner--lg{--sui-spinner-size: 24px;--sui-spinner-border: 3px}@keyframes sui-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ui-spinner{animation:none}}

package/dist/components/stat.css

@@ -0,0 +1 @@
+.ui-stat{background:var(--sui-color-surface);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-xl);padding:var(--sui-space-4) var(--sui-space-4-5);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md))}.ui-stat__label{font-size:var(--sui-font-size-2xs);font-weight:var(--sui-font-weight-semibold);letter-spacing:var(--sui-letter-spacing-wide);text-transform:uppercase;color:var(--sui-color-text-muted);margin-bottom:var(--sui-space-1)}.ui-stat__value{font-size:var(--sui-font-size-2xl);font-weight:var(--sui-font-weight-bold);letter-spacing:var(--sui-letter-spacing-tight);background:var(--sui-gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent}.ui-stat__hint{font-size:var(--sui-font-size-xs);color:var(--sui-color-text-muted);margin-top:var(--sui-space-1)}

package/dist/components/switch.css

@@ -0,0 +1 @@
+.ui-switch{position:relative;display:inline-flex;align-items:center;gap:var(--sui-space-2);font-size:var(--sui-font-size-sm);color:var(--sui-color-text);cursor:pointer;-webkit-user-select:none;user-select:none}.ui-switch__track{position:relative;width:var(--sui-switch-width, 36px);height:var(--sui-switch-height, 20px);border-radius:var(--sui-radius-full);background:var(--sui-color-border-strong);transition:background var(--sui-duration-fast) var(--sui-easing-standard),box-shadow var(--sui-duration-fast) var(--sui-easing-standard)}.ui-switch__track:after{content:"";position:absolute;top:var(--sui-switch-offset, 2px);left:var(--sui-switch-offset, 2px);width:var(--sui-switch-knob, 16px);height:var(--sui-switch-knob, 16px);border-radius:var(--sui-radius-full);background:var(--sui-color-control-knob);transition:transform var(--sui-duration-fast) var(--sui-easing-standard)}.ui-switch input:checked+.ui-switch__track{background:var(--sui-gradient-primary)}.ui-switch input:checked+.ui-switch__track:after{transform:translate(calc(var(--sui-switch-width, 36px) - var(--sui-switch-knob, 16px) - var(--sui-switch-offset, 2px) - var(--sui-switch-offset, 2px)))}.ui-switch input:focus-visible+.ui-switch__track{box-shadow:var(--sui-focus-ring)}.ui-switch input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.ui-switch:has(input:disabled){opacity:.5;cursor:not-allowed}

package/dist/components/table.css

@@ -0,0 +1 @@
+.ui-table-wrap{width:100%;overflow-x:auto;overscroll-behavior-inline:contain;border-radius:var(--sui-radius-lg)}.ui-table-wrap:focus-visible{outline:none;box-shadow:var(--sui-focus-ring)}.ui-table-wrap .ui-table{min-width:var(--sui-table-min-width, 36rem)}.ui-table{width:100%;border-collapse:collapse;font-size:var(--sui-font-size-sm);background:var(--sui-color-surface);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md));border-radius:var(--sui-radius-lg);overflow:hidden;border:1px solid var(--sui-color-border)}.ui-table th,.ui-table td{padding:var(--sui-space-2-5) var(--sui-space-3-5);text-align:left;border-bottom:1px solid var(--sui-color-border)}.ui-table th{font-size:var(--sui-font-size-2xs);font-weight:var(--sui-font-weight-semibold);letter-spacing:var(--sui-letter-spacing-wide);text-transform:uppercase;color:var(--sui-color-text-muted);background:var(--sui-color-surface-muted)}.ui-table tbody tr:hover{background:var(--sui-color-surface-muted)}.ui-table tbody tr:last-child td{border-bottom:0}

package/dist/components/tabs.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from "lit";
+import type { PropertyValues } from "lit";
+export declare class SuiTabs extends LitElement {
+    private static instanceCount;
+    private readonly uid;
+    static styles: import("lit").CSSResult;
+    value: string;
+    variant: "pill" | "box";
+    private tabs;
+    private lastSignature;
+    private readonly labelObserver;
+    private get selectedIndex();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    private collectTabs;
+    private applySelection;
+    private select;
+    private handleSlotChange;
+    private handleKeydown;
+    private tabId;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sui-tabs": SuiTabs;
+    }
+}
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAS1C,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAK;IACjC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA2B;IAE/C,MAAM,CAAC,MAAM,0BA8GX;IAE0B,KAAK,SAAM;IACX,OAAO,EAAE,MAAM,GAAG,KAAK,CAAU;IAEpD,OAAO,CAAC,IAAI,CAAiB;IAEtC,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkD;IAEhF,OAAO,KAAK,aAAa,GAExB;IAED,iBAAiB;IAUjB,oBAAoB;IAKpB,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc;IAc5C,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc;IAMzC,OAAO,CAAC,WAAW;IAoCnB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,aAAa,CAgCnB;IAEF,OAAO,CAAC,KAAK;IAIb,MAAM;CA4BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/textarea.css

@@ -0,0 +1 @@
+.ui-textarea{display:block;width:100%;min-height:var(--sui-textarea-min-height, 96px);padding:var(--sui-space-2-5) var(--sui-space-3);font-size:var(--sui-font-size-sm);line-height:var(--sui-line-height-normal);color:var(--sui-color-text);background:var(--sui-color-surface-raised);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-md);backdrop-filter:blur(var(--sui-blur-sm));-webkit-backdrop-filter:blur(var(--sui-blur-sm));resize:vertical;outline:none;transition:border-color var(--sui-duration-fast) var(--sui-easing-standard),box-shadow var(--sui-duration-fast) var(--sui-easing-standard)}.ui-textarea:focus{border-color:var(--sui-color-focus);box-shadow:var(--sui-focus-ring)}.ui-textarea:disabled{background:var(--sui-color-surface-muted);cursor:not-allowed;opacity:.7}.ui-textarea--invalid{border-color:var(--sui-color-danger-border)}.ui-textarea--invalid:focus{box-shadow:0 0 0 3px var(--sui-color-danger-ring)}

package/dist/components/toast.css

@@ -0,0 +1 @@
+.ui-toast-container{position:fixed;top:var(--sui-space-4);right:var(--sui-space-4);display:flex;flex-direction:column;gap:var(--sui-space-2);z-index:var(--sui-z-toast);max-width:var(--sui-toast-max-width, 360px)}.ui-toast{display:flex;gap:var(--sui-space-2-5);padding:var(--sui-space-3) var(--sui-space-3-5);border:1px solid var(--sui-color-border);border-left:3px solid var(--sui-color-primary);border-radius:var(--sui-radius-lg);background:var(--sui-color-surface-raised);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md));font-size:var(--sui-font-size-sm);box-shadow:var(--sui-shadow-floating);animation:sui-toast-in var(--sui-duration-normal) var(--sui-easing-standard)}.ui-toast--success{border-left-color:var(--sui-color-success)}.ui-toast--warning{border-left-color:var(--sui-color-warning)}.ui-toast--danger{border-left-color:var(--sui-color-danger)}.ui-toast__title{font-weight:var(--sui-font-weight-semibold);margin-bottom:var(--sui-space-0-5)}.ui-toast__body{color:var(--sui-color-text-muted)}@keyframes sui-toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.ui-toast{animation:none}}

package/dist/components/toast.d.ts

@@ -0,0 +1,31 @@
+export type ToastVariant = "default" | "success" | "warning" | "danger";
+export type ToastOptions = {
+    title: string;
+    message?: string;
+    variant?: ToastVariant;
+    duration?: number;
+};
+/** Declarative toast, also available as `SuiToast.show(options)`. */
+export declare class SuiToast extends HTMLElement {
+    private dismissTimer;
+    private generated;
+    static get observedAttributes(): string[];
+    get duration(): number;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    dismiss(): void;
+    private render;
+    private scheduleDismiss;
+    static show(options: ToastOptions): SuiToast;
+}
+export declare class SuiToastContainer extends HTMLElement {
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sui-toast": SuiToast;
+        "sui-toast-container": SuiToastContainer;
+    }
+}
+//# sourceMappingURL=toast.d.ts.map

package/dist/components/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/components/toast.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAExE,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,qEAAqE;AACrE,qBAAa,QAAS,SAAQ,WAAW;IACvC,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,SAAS,CAAS;IAE1B,MAAM,KAAK,kBAAkB,aAE5B;IAED,IAAI,QAAQ,IAAI,MAAM,CAGrB;IAED,iBAAiB;IAQjB,oBAAoB;IAIpB,wBAAwB;IAOxB,OAAO;IAMP,OAAO,CAAC,MAAM;IA2Bd,OAAO,CAAC,eAAe;IAOvB,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,GAAG,QAAQ;CAc7C;AAED,qBAAa,iBAAkB,SAAQ,WAAW;IAChD,iBAAiB;CAKlB;AAKD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;QACtB,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/components/tooltip.css

@@ -0,0 +1 @@
+.ui-tooltip{position:relative;display:inline-block}.ui-tooltip__content{position:absolute;bottom:calc(100% + var(--sui-space-1-5));left:50%;transform:translate(-50%);padding:var(--sui-space-1-5) var(--sui-space-2-5);font-size:var(--sui-font-size-xs);color:var(--sui-color-inverse-text);background:var(--sui-color-inverse-surface);border-radius:var(--sui-radius-xs);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--sui-duration-fast) var(--sui-easing-standard);z-index:var(--sui-z-popover)}.ui-tooltip:hover .ui-tooltip__content,.ui-tooltip:focus-within .ui-tooltip__content{opacity:1}

package/dist/components/tooltip.d.ts

@@ -0,0 +1,15 @@
+/** Adds the ARIA relation to the existing CSS-only tooltip pattern. */
+export declare class SuiTooltip extends HTMLElement {
+    private static instanceCount;
+    private readonly uid;
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private upgrade;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sui-tooltip": SuiTooltip;
+    }
+}
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/components/tooltip.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,qBAAa,UAAW,SAAQ,WAAW;IACzC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAK;IACjC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAA8B;IAElD,MAAM,KAAK,kBAAkB,aAE5B;IAED,iBAAiB;IAKjB,wBAAwB;IAIxB,OAAO,CAAC,OAAO;CAiBhB;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/topbar.css

@@ -0,0 +1 @@
+.ui-topbar{position:sticky;top:var(--sui-space-3);z-index:var(--sui-z-popover);display:flex;align-items:center;justify-content:space-between;gap:var(--sui-space-3);padding:var(--sui-space-2) var(--sui-space-2) var(--sui-space-2) var(--sui-space-4);background:var(--sui-color-surface-raised);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-xl);box-shadow:var(--sui-shadow-card);backdrop-filter:blur(var(--sui-blur-lg));-webkit-backdrop-filter:blur(var(--sui-blur-lg))}.ui-topbar__brand{display:inline-flex;align-items:center;gap:var(--sui-space-2);color:var(--sui-color-text);font-weight:var(--sui-font-weight-semibold);text-decoration:none}.ui-topbar__mark{display:grid;width:1.8rem;height:1.8rem;place-items:center;color:var(--sui-color-primary-contrast);background:var(--sui-gradient-primary);border-radius:var(--sui-radius-md);box-shadow:var(--sui-shadow-sm)}.ui-topbar__controls{display:flex;align-items:center;gap:var(--sui-space-2)}.ui-topbar--glass{background:var(--sui-color-surface);backdrop-filter:blur(var(--sui-blur-lg));-webkit-backdrop-filter:blur(var(--sui-blur-lg))}@media (max-width: 620px){.ui-topbar{top:var(--sui-space-1);padding-left:var(--sui-space-2)}.ui-topbar__brand span:last-child{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}}

package/dist/components.css

@@ -0,0 +1 @@
+.ui-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--sui-space-1-5);height:var(--sui-control-height-md);padding:0 var(--sui-space-4);font-size:var(--sui-font-size-sm);font-weight:var(--sui-font-weight-medium);line-height:1;border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-full);background:var(--sui-color-surface-raised);color:var(--sui-color-text);backdrop-filter:blur(var(--sui-blur-sm));-webkit-backdrop-filter:blur(var(--sui-blur-sm));transition:background var(--sui-duration-fast) var(--sui-easing-standard),border-color var(--sui-duration-fast) var(--sui-easing-standard),color var(--sui-duration-fast) var(--sui-easing-standard);cursor:pointer}.ui-button:hover,.ui-button:focus-visible{background:var(--sui-color-surface-muted);border-color:var(--sui-color-primary-hover);color:var(--sui-color-text)}.ui-button:active{border-color:var(--sui-color-primary-active)}.ui-button--primary{background:var(--sui-gradient-primary);color:var(--sui-color-primary-contrast);border:0}.ui-button--primary:hover,.ui-button--primary:focus-visible{filter:brightness(1.05);color:var(--sui-color-text);border:1px solid transparent;background-image:linear-gradient(var(--sui-color-surface-raised),var(--sui-color-surface-raised)),var(--sui-gradient-primary);background-origin:border-box;background-clip:padding-box,border-box}.ui-button--primary:active{filter:brightness(.95)}.ui-button--danger{background:var(--sui-color-danger-surface);color:var(--sui-color-danger-text);border-color:var(--sui-color-danger-border)}.ui-button--danger:hover{background:var(--sui-color-danger-surface-hover);border-color:var(--sui-color-danger);color:var(--sui-color-danger-text)}.ui-button--ghost{background:transparent;border-color:transparent}.ui-button--ghost:hover{background:var(--sui-color-surface-muted);border-color:var(--sui-color-border)}.ui-button--sm{height:var(--sui-control-height-sm);padding:0 var(--sui-space-3);font-size:var(--sui-font-size-xs)}.ui-button:disabled{opacity:.5;cursor:not-allowed}.ui-input{display:block;width:100%;height:var(--sui-field-height);padding:0 var(--sui-space-3);font-size:var(--sui-font-size-sm);line-height:var(--sui-line-height-normal);color:var(--sui-color-text);background:var(--sui-color-surface-raised);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-md);backdrop-filter:blur(var(--sui-blur-sm));-webkit-backdrop-filter:blur(var(--sui-blur-sm));transition:border-color var(--sui-duration-fast) var(--sui-easing-standard),box-shadow var(--sui-duration-fast) var(--sui-easing-standard);outline:none}.ui-input::placeholder{color:var(--sui-color-text-subtle)}.ui-input:focus{border-color:var(--sui-color-focus);box-shadow:var(--sui-focus-ring)}.ui-input:disabled{background:var(--sui-color-surface-muted);cursor:not-allowed;opacity:.7}.ui-input--invalid{border-color:var(--sui-color-danger-border)}.ui-input--invalid:focus{box-shadow:0 0 0 3px var(--sui-color-danger-ring)}.ui-label{display:block;margin-bottom:var(--sui-space-1);font-size:var(--sui-font-size-xs);font-weight:var(--sui-font-weight-medium);color:var(--sui-color-text)}.ui-field{margin-bottom:var(--sui-space-3-5)}.ui-help{margin-top:var(--sui-space-1);font-size:var(--sui-font-size-2xs);color:var(--sui-color-text-muted)}.ui-error{margin-top:var(--sui-space-1);font-size:var(--sui-font-size-2xs);color:var(--sui-color-danger)}.ui-textarea{display:block;width:100%;min-height:var(--sui-textarea-min-height, 96px);padding:var(--sui-space-2-5) var(--sui-space-3);font-size:var(--sui-font-size-sm);line-height:var(--sui-line-height-normal);color:var(--sui-color-text);background:var(--sui-color-surface-raised);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-md);backdrop-filter:blur(var(--sui-blur-sm));-webkit-backdrop-filter:blur(var(--sui-blur-sm));resize:vertical;outline:none;transition:border-color var(--sui-duration-fast) var(--sui-easing-standard),box-shadow var(--sui-duration-fast) var(--sui-easing-standard)}.ui-textarea:focus{border-color:var(--sui-color-focus);box-shadow:var(--sui-focus-ring)}.ui-textarea:disabled{background:var(--sui-color-surface-muted);cursor:not-allowed;opacity:.7}.ui-textarea--invalid{border-color:var(--sui-color-danger-border)}.ui-textarea--invalid:focus{box-shadow:0 0 0 3px var(--sui-color-danger-ring)}.ui-select{display:block;width:100%;height:var(--sui-field-height);padding:0 var(--sui-space-8) 0 var(--sui-space-3);font-size:var(--sui-font-size-sm);color:var(--sui-color-text);background:var(--sui-color-surface-raised);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-md);backdrop-filter:blur(var(--sui-blur-sm));-webkit-backdrop-filter:blur(var(--sui-blur-sm));outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--sui-space-2-5) center;cursor:pointer;transition:border-color var(--sui-duration-fast) var(--sui-easing-standard),box-shadow var(--sui-duration-fast) var(--sui-easing-standard)}.ui-select:focus{border-color:var(--sui-color-focus);box-shadow:var(--sui-focus-ring)}.ui-select:disabled{background-color:var(--sui-color-surface-muted);cursor:not-allowed;opacity:.7}.ui-select--invalid{border-color:var(--sui-color-danger-border)}.ui-select--invalid:focus{box-shadow:0 0 0 3px var(--sui-color-danger-ring)}.ui-checkbox{display:inline-flex;align-items:center;gap:var(--sui-space-2);font-size:var(--sui-font-size-sm);color:var(--sui-color-text);cursor:pointer;-webkit-user-select:none;user-select:none}.ui-checkbox input{width:var(--sui-check-size);height:var(--sui-check-size);accent-color:var(--sui-color-primary);cursor:pointer}.ui-checkbox--disabled{opacity:.5;cursor:not-allowed}.ui-radio{display:inline-flex;align-items:center;gap:var(--sui-space-2);font-size:var(--sui-font-size-sm);color:var(--sui-color-text);cursor:pointer;-webkit-user-select:none;user-select:none}.ui-radio input{width:var(--sui-check-size);height:var(--sui-check-size);accent-color:var(--sui-color-primary);cursor:pointer}.ui-radio input:disabled{cursor:not-allowed}.ui-radio--disabled{opacity:.5;cursor:not-allowed}.ui-radio-group{display:flex;flex-direction:column;gap:var(--sui-space-2)}.ui-switch{position:relative;display:inline-flex;align-items:center;gap:var(--sui-space-2);font-size:var(--sui-font-size-sm);color:var(--sui-color-text);cursor:pointer;-webkit-user-select:none;user-select:none}.ui-switch__track{position:relative;width:var(--sui-switch-width, 36px);height:var(--sui-switch-height, 20px);border-radius:var(--sui-radius-full);background:var(--sui-color-border-strong);transition:background var(--sui-duration-fast) var(--sui-easing-standard),box-shadow var(--sui-duration-fast) var(--sui-easing-standard)}.ui-switch__track:after{content:"";position:absolute;top:var(--sui-switch-offset, 2px);left:var(--sui-switch-offset, 2px);width:var(--sui-switch-knob, 16px);height:var(--sui-switch-knob, 16px);border-radius:var(--sui-radius-full);background:var(--sui-color-control-knob);transition:transform var(--sui-duration-fast) var(--sui-easing-standard)}.ui-switch input:checked+.ui-switch__track{background:var(--sui-gradient-primary)}.ui-switch input:checked+.ui-switch__track:after{transform:translate(calc(var(--sui-switch-width, 36px) - var(--sui-switch-knob, 16px) - var(--sui-switch-offset, 2px) - var(--sui-switch-offset, 2px)))}.ui-switch input:focus-visible+.ui-switch__track{box-shadow:var(--sui-focus-ring)}.ui-switch input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.ui-switch:has(input:disabled){opacity:.5;cursor:not-allowed}.ui-card{background:var(--sui-color-surface);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-xl);box-shadow:var(--sui-shadow-card);padding:var(--sui-space-5);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md));transition:transform var(--sui-duration-normal) var(--sui-easing-standard),box-shadow var(--sui-duration-normal) var(--sui-easing-standard)}.ui-card:hover{transform:translateY(-2px);box-shadow:var(--sui-shadow-card-hover)}.ui-card--raised{background:var(--sui-color-surface-raised)}.ui-card--glass{background:var(--sui-color-surface);backdrop-filter:blur(var(--sui-blur-lg));-webkit-backdrop-filter:blur(var(--sui-blur-lg));box-shadow:var(--sui-shadow-card)}.ui-card--glass:hover{box-shadow:var(--sui-shadow-card-hover)}.ui-card__header{margin-bottom:var(--sui-space-2)}.ui-card__title{font-size:var(--sui-font-size-md);font-weight:var(--sui-font-weight-semibold)}.ui-card__body{color:var(--sui-color-text-muted);font-size:var(--sui-font-size-sm)}.ui-card__footer{margin-top:var(--sui-space-3);padding-top:var(--sui-space-3);border-top:1px solid var(--sui-color-border);display:flex;gap:var(--sui-space-1-5)}.ui-badge{display:inline-flex;align-items:center;height:var(--sui-badge-height, 22px);padding:0 var(--sui-space-2);font-size:var(--sui-font-size-2xs);font-weight:var(--sui-font-weight-medium);border-radius:var(--sui-radius-full);background:var(--sui-color-surface-raised);color:var(--sui-color-text);border:1px solid var(--sui-color-border);backdrop-filter:blur(var(--sui-blur-sm));-webkit-backdrop-filter:blur(var(--sui-blur-sm))}.ui-badge--primary{background:var(--sui-color-info-surface);color:var(--sui-color-primary-text);border-color:transparent}.ui-badge--success{background:var(--sui-color-success-surface);color:var(--sui-color-success-text);border-color:transparent}.ui-badge--warning{background:var(--sui-color-warning-surface);color:var(--sui-color-warning-text);border-color:transparent}.ui-badge--danger{background:var(--sui-color-danger-surface);color:var(--sui-color-danger-text);border-color:transparent}.ui-badge--info{background:var(--sui-color-info-surface);color:var(--sui-color-info-text);border-color:transparent}.ui-badge--outline{background:transparent;color:var(--sui-color-text)}.ui-chip{display:inline-flex;align-items:center;gap:var(--sui-space-1-5);height:var(--sui-chip-height, 26px);padding:0 var(--sui-space-2-5);font-size:var(--sui-font-size-xs);font-weight:var(--sui-font-weight-medium);border-radius:var(--sui-radius-full);background:var(--sui-color-surface-raised);color:var(--sui-color-text-muted);border:1px solid var(--sui-color-border);backdrop-filter:blur(var(--sui-blur-sm));-webkit-backdrop-filter:blur(var(--sui-blur-sm))}.ui-alert{display:flex;gap:var(--sui-space-3);padding:var(--sui-space-3-5) var(--sui-space-4);border:1px solid transparent;border-left:3px solid var(--sui-color-primary);border-radius:var(--sui-radius-xl);font-size:var(--sui-font-size-sm);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md))}.ui-alert--success{background:var(--sui-color-success-surface);color:var(--sui-color-success-text);border-color:var(--sui-color-success-border);border-left-color:var(--sui-color-success)}.ui-alert--warning{background:var(--sui-color-warning-surface);color:var(--sui-color-warning-text);border-color:var(--sui-color-warning-border);border-left-color:var(--sui-color-warning)}.ui-alert--danger{background:var(--sui-color-danger-surface);color:var(--sui-color-danger-text);border-color:var(--sui-color-danger-border);border-left-color:var(--sui-color-danger)}.ui-alert--info{background:var(--sui-color-info-surface);color:var(--sui-color-info-text);border-color:var(--sui-color-info-border);border-left-color:var(--sui-color-info)}.ui-alert__title{font-weight:var(--sui-font-weight-semibold);margin-bottom:var(--sui-space-0-5)}.ui-alert__body{opacity:.85}.ui-alert__close{background:transparent;border:0;color:inherit;font-size:var(--sui-font-size-lg);line-height:1;padding:0;opacity:.6}.ui-spinner{display:inline-block;width:var(--sui-spinner-size, 16px);height:var(--sui-spinner-size, 16px);border:var(--sui-spinner-border, 2px) solid var(--sui-color-border);border-top-color:var(--sui-color-primary);border-radius:50%;animation:sui-spin var(--sui-duration-spinner) linear infinite}.ui-spinner--sm{--sui-spinner-size: 12px;--sui-spinner-border: 1.5px}.ui-spinner--lg{--sui-spinner-size: 24px;--sui-spinner-border: 3px}@keyframes sui-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.ui-spinner{animation:none}}.ui-skeleton{background:linear-gradient(90deg,var(--sui-color-surface-muted) 25%,var(--sui-color-surface-raised) 50%,var(--sui-color-surface-muted) 75%);background-size:200% 100%;animation:sui-shimmer var(--sui-duration-shimmer) ease infinite;border-radius:var(--sui-radius-sm)}.ui-skeleton--text{height:var(--sui-space-3);width:100%;margin-bottom:var(--sui-space-1-5)}.ui-skeleton--title{height:var(--sui-space-4-5);width:60%;margin-bottom:var(--sui-space-2-5)}.ui-skeleton--avatar{width:var(--sui-space-10);height:var(--sui-space-10);border-radius:var(--sui-radius-full)}.ui-skeleton--block{height:var(--sui-skeleton-block-height, 120px);width:100%}@keyframes sui-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){.ui-skeleton{animation:none}}.ui-progress{width:100%;height:var(--sui-progress-height, 6px);background:var(--sui-color-surface-muted);border-radius:var(--sui-radius-full);overflow:hidden}.ui-progress__bar{height:100%;background:var(--sui-gradient-primary);border-radius:var(--sui-radius-full);transition:width var(--sui-duration-normal) var(--sui-easing-standard)}.ui-progress--indeterminate .ui-progress__bar{width:40%;animation:sui-progress var(--sui-duration-progress) ease-in-out infinite}@keyframes sui-progress{0%{transform:translate(-100%)}to{transform:translate(300%)}}[data-theme=light] .ui-progress{background:#0f172a1a}[data-theme=dark] .ui-progress{background:#94a3b838}@media (prefers-reduced-motion: reduce){.ui-progress--indeterminate .ui-progress__bar{width:100%;animation:none}}.ui-toast-container{position:fixed;top:var(--sui-space-4);right:var(--sui-space-4);display:flex;flex-direction:column;gap:var(--sui-space-2);z-index:var(--sui-z-toast);max-width:var(--sui-toast-max-width, 360px)}.ui-toast{display:flex;gap:var(--sui-space-2-5);padding:var(--sui-space-3) var(--sui-space-3-5);border:1px solid var(--sui-color-border);border-left:3px solid var(--sui-color-primary);border-radius:var(--sui-radius-lg);background:var(--sui-color-surface-raised);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md));font-size:var(--sui-font-size-sm);box-shadow:var(--sui-shadow-floating);animation:sui-toast-in var(--sui-duration-normal) var(--sui-easing-standard)}.ui-toast--success{border-left-color:var(--sui-color-success)}.ui-toast--warning{border-left-color:var(--sui-color-warning)}.ui-toast--danger{border-left-color:var(--sui-color-danger)}.ui-toast__title{font-weight:var(--sui-font-weight-semibold);margin-bottom:var(--sui-space-0-5)}.ui-toast__body{color:var(--sui-color-text-muted)}@keyframes sui-toast-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.ui-toast{animation:none}}.ui-tooltip{position:relative;display:inline-block}.ui-tooltip__content{position:absolute;bottom:calc(100% + var(--sui-space-1-5));left:50%;transform:translate(-50%);padding:var(--sui-space-1-5) var(--sui-space-2-5);font-size:var(--sui-font-size-xs);color:var(--sui-color-inverse-text);background:var(--sui-color-inverse-surface);border-radius:var(--sui-radius-xs);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--sui-duration-fast) var(--sui-easing-standard);z-index:var(--sui-z-popover)}.ui-tooltip:hover .ui-tooltip__content,.ui-tooltip:focus-within .ui-tooltip__content{opacity:1}.ui-popover{position:relative;display:inline-block}.ui-popover__content{position:absolute;top:calc(100% + var(--sui-space-2));left:0;min-width:var(--sui-popover-min-width, 220px);padding:var(--sui-space-3);background:var(--sui-color-surface-raised);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-md);box-shadow:var(--sui-shadow-floating);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md));display:none;z-index:var(--sui-z-popover)}.ui-popover.open .ui-popover__content{display:block;animation:sui-popover-in var(--sui-duration-normal) var(--sui-easing-standard)}.ui-popover--top .ui-popover__content{top:auto;bottom:calc(100% + var(--sui-space-2))}.ui-popover--end .ui-popover__content{left:auto;right:0}@keyframes sui-popover-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.ui-popover.open .ui-popover__content{animation:none}}.ui-accordion{display:block;border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-lg);overflow:hidden;background:var(--sui-color-surface);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md))}.ui-accordion__item+.ui-accordion__item{border-top:1px solid var(--sui-color-border)}.ui-accordion__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--sui-space-3) var(--sui-space-4);font-size:var(--sui-font-size-sm);font-weight:var(--sui-font-weight-medium);color:var(--sui-color-text);background:transparent;border:0;cursor:pointer;text-align:left}.ui-accordion__trigger:hover{background:var(--sui-color-surface-muted)}.ui-accordion__trigger:disabled,.ui-accordion__item[aria-disabled=true] .ui-accordion__trigger{opacity:.5;cursor:not-allowed}.ui-accordion__item[aria-disabled=true]{opacity:.6}.ui-accordion__content{padding:0 var(--sui-space-4) var(--sui-space-3);font-size:var(--sui-font-size-sm);color:var(--sui-color-text-muted);display:none}.ui-accordion__item.open .ui-accordion__content{display:block}.ui-nav{display:flex;flex-direction:column;gap:var(--sui-space-0-5)}.ui-nav__item{display:flex;align-items:center;gap:var(--sui-space-2);padding:var(--sui-space-2) var(--sui-space-2-5);font-size:var(--sui-font-size-sm);color:var(--sui-color-text);text-decoration:none;border-radius:var(--sui-radius-sm);transition:background var(--sui-duration-fast) var(--sui-easing-standard),color var(--sui-duration-fast) var(--sui-easing-standard);cursor:pointer;border:0;background:transparent;width:100%;text-align:left}.ui-nav__item:not(.ui-nav__item--active):hover{background:var(--sui-color-surface-muted);text-decoration:none}.ui-nav__item--active{background:var(--sui-gradient-primary);color:var(--sui-color-primary-contrast);font-weight:var(--sui-font-weight-medium)}.ui-nav__item[aria-disabled=true],.ui-nav__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ui-nav__item--active:hover,.ui-nav__item--active:focus-visible{color:var(--sui-color-text);border:1px solid transparent;background-image:linear-gradient(var(--sui-color-surface-raised),var(--sui-color-surface-raised)),var(--sui-gradient-primary);background-origin:border-box;background-clip:padding-box,border-box;filter:brightness(1.05);text-decoration:none}.ui-nav__group-title{font-size:var(--sui-font-size-2xs);font-weight:var(--sui-font-weight-semibold);letter-spacing:var(--sui-letter-spacing-wide);text-transform:uppercase;color:var(--sui-color-text-muted);padding:0 var(--sui-space-2-5);margin:var(--sui-space-2-5) 0 var(--sui-space-1)}.ui-table-wrap{width:100%;overflow-x:auto;overscroll-behavior-inline:contain;border-radius:var(--sui-radius-lg)}.ui-table-wrap:focus-visible{outline:none;box-shadow:var(--sui-focus-ring)}.ui-table-wrap .ui-table{min-width:var(--sui-table-min-width, 36rem)}.ui-table{width:100%;border-collapse:collapse;font-size:var(--sui-font-size-sm);background:var(--sui-color-surface);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md));border-radius:var(--sui-radius-lg);overflow:hidden;border:1px solid var(--sui-color-border)}.ui-table th,.ui-table td{padding:var(--sui-space-2-5) var(--sui-space-3-5);text-align:left;border-bottom:1px solid var(--sui-color-border)}.ui-table th{font-size:var(--sui-font-size-2xs);font-weight:var(--sui-font-weight-semibold);letter-spacing:var(--sui-letter-spacing-wide);text-transform:uppercase;color:var(--sui-color-text-muted);background:var(--sui-color-surface-muted)}.ui-table tbody tr:hover{background:var(--sui-color-surface-muted)}.ui-table tbody tr:last-child td{border-bottom:0}.ui-avatar{display:inline-flex;align-items:center;justify-content:center;width:var(--sui-avatar-size, 36px);height:var(--sui-avatar-size, 36px);border-radius:var(--sui-radius-full);background:var(--sui-gradient-primary);color:var(--sui-color-primary-contrast);font-size:var(--sui-font-size-sm);font-weight:var(--sui-font-weight-semibold);overflow:hidden;flex-shrink:0}.ui-avatar img{width:100%;height:100%;object-fit:cover}.ui-avatar--sm{--sui-avatar-size: 24px;font-size:var(--sui-font-size-3xs)}.ui-avatar--lg{--sui-avatar-size: 48px;font-size:var(--sui-font-size-base)}.ui-avatar-group{display:flex;align-items:center}.ui-avatar-group .ui-avatar{margin-left:calc(var(--sui-space-2) * -1);border:2px solid var(--sui-color-surface-raised)}.ui-avatar-group .ui-avatar:first-child{margin-left:0}.ui-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--sui-space-10) var(--sui-space-5);color:var(--sui-color-text-muted);background:var(--sui-color-surface);border:1px dashed var(--sui-color-border-strong);border-radius:var(--sui-radius-xl);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md))}.ui-empty__title{font-size:var(--sui-font-size-base);font-weight:var(--sui-font-weight-semibold);color:var(--sui-color-text);margin-bottom:var(--sui-space-1)}.ui-empty__body{font-size:var(--sui-font-size-sm);max-width:36ch;margin-bottom:var(--sui-space-3)}.ui-stat{background:var(--sui-color-surface);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-xl);padding:var(--sui-space-4) var(--sui-space-4-5);backdrop-filter:blur(var(--sui-blur-md));-webkit-backdrop-filter:blur(var(--sui-blur-md))}.ui-stat__label{font-size:var(--sui-font-size-2xs);font-weight:var(--sui-font-weight-semibold);letter-spacing:var(--sui-letter-spacing-wide);text-transform:uppercase;color:var(--sui-color-text-muted);margin-bottom:var(--sui-space-1)}.ui-stat__value{font-size:var(--sui-font-size-2xl);font-weight:var(--sui-font-weight-bold);letter-spacing:var(--sui-letter-spacing-tight);background:var(--sui-gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent}.ui-stat__hint{font-size:var(--sui-font-size-xs);color:var(--sui-color-text-muted);margin-top:var(--sui-space-1)}.ui-topbar{position:sticky;top:var(--sui-space-3);z-index:var(--sui-z-popover);display:flex;align-items:center;justify-content:space-between;gap:var(--sui-space-3);padding:var(--sui-space-2) var(--sui-space-2) var(--sui-space-2) var(--sui-space-4);background:var(--sui-color-surface-raised);border:1px solid var(--sui-color-border);border-radius:var(--sui-radius-xl);box-shadow:var(--sui-shadow-card);backdrop-filter:blur(var(--sui-blur-lg));-webkit-backdrop-filter:blur(var(--sui-blur-lg))}.ui-topbar__brand{display:inline-flex;align-items:center;gap:var(--sui-space-2);color:var(--sui-color-text);font-weight:var(--sui-font-weight-semibold);text-decoration:none}.ui-topbar__mark{display:grid;width:1.8rem;height:1.8rem;place-items:center;color:var(--sui-color-primary-contrast);background:var(--sui-gradient-primary);border-radius:var(--sui-radius-md);box-shadow:var(--sui-shadow-sm)}.ui-topbar__controls{display:flex;align-items:center;gap:var(--sui-space-2)}.ui-topbar--glass{background:var(--sui-color-surface);backdrop-filter:blur(var(--sui-blur-lg));-webkit-backdrop-filter:blur(var(--sui-blur-lg))}@media (max-width: 620px){.ui-topbar{top:var(--sui-space-1);padding-left:var(--sui-space-2)}.ui-topbar__brand span:last-child{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}}

package/dist/components.js

@@ -0,0 +1,19 @@
+import { SuiModal as i } from "./modal.js";
+import { SuiDrawer as e } from "./drawer.js";
+import { SuiDropdown as u } from "./dropdown.js";
+import { SuiTabs as f } from "./tabs.js";
+import { SuiAccordion as x } from "./accordion.js";
+import { SuiPopover as n } from "./popover.js";
+import { SuiTooltip as d } from "./tooltip.js";
+import { SuiToast as c, SuiToastContainer as l } from "./toast.js";
+export {
+  x as SuiAccordion,
+  e as SuiDrawer,
+  u as SuiDropdown,
+  i as SuiModal,
+  n as SuiPopover,
+  f as SuiTabs,
+  c as SuiToast,
+  l as SuiToastContainer,
+  d as SuiTooltip
+};

package/dist/drawer.js

@@ -0,0 +1,182 @@
+import { css as u, LitElement as p, nothing as c, html as b } from "lit";
+import { property as a, customElement as h } from "lit/decorators.js";
+import { t as f, l as v, u as y } from "./chunks/a11y-BYNN9rH7.js";
+var m = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (e, o, s, l) => {
+  for (var t = l > 1 ? void 0 : l ? k(o, s) : o, d = e.length - 1, n; d >= 0; d--)
+    (n = e[d]) && (t = (l ? n(o, s, t) : n(t)) || t);
+  return l && t && m(o, s, t), t;
+};
+let r = class extends p {
+  constructor() {
+    super(...arguments), this.uid = ++r.instanceCount, this.previouslyFocused = null, this.holdsScrollLock = !1, this.open = !1, this.label = "", this.closeLabel = "Close", this.disableBackdropClose = !1, this.handleKeydown = (e) => {
+      if (this.open) {
+        if (e.key === "Escape") {
+          e.preventDefault(), this.close();
+          return;
+        }
+        e.key === "Tab" && f(e, this);
+      }
+    }, this.handleBackdropClick = (e) => {
+      e.target !== e.currentTarget || this.disableBackdropClose || this.close();
+    };
+  }
+  get titleId() {
+    return `sui-drawer-title-${this.uid}`;
+  }
+  get bodyId() {
+    return `sui-drawer-body-${this.uid}`;
+  }
+  updated(e) {
+    var o, s;
+    if (e.has("open")) {
+      if (this.open) {
+        this.previouslyFocused = document.activeElement, v(), this.holdsScrollLock = !0, this.dispatchEvent(new CustomEvent("sui-open", { bubbles: !0, composed: !0 })), this.updateComplete.then(() => this.focusInitial());
+        return;
+      }
+      this.releaseScrollLock(), this.dispatchEvent(new CustomEvent("sui-close", { bubbles: !0, composed: !0 })), (s = (o = this.previouslyFocused) == null ? void 0 : o.focus) == null || s.call(o), this.previouslyFocused = null;
+    }
+  }
+  focusInitial() {
+    const e = this.renderRoot.querySelector(".close");
+    e == null || e.focus();
+  }
+  openDrawer() {
+    this.open = !0;
+  }
+  close() {
+    this.open = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("keydown", this.handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("keydown", this.handleKeydown), this.releaseScrollLock();
+  }
+  releaseScrollLock() {
+    this.holdsScrollLock && (y(), this.holdsScrollLock = !1);
+  }
+  render() {
+    if (!this.open) return c;
+    const e = this.label ? c : this.titleId;
+    return b`
+      <div class="backdrop" @click=${this.handleBackdropClick}>
+        <aside
+          class="panel"
+          role="dialog"
+          aria-modal="true"
+          aria-label=${this.label || c}
+          aria-labelledby=${e}
+          aria-describedby=${this.bodyId}
+          tabindex="-1"
+        >
+          <div class="header">
+            <div class="title" id=${this.titleId}><slot name="title"></slot></div>
+            <button class="close" type="button" aria-label=${this.closeLabel} @click=${() => this.close()}>×</button>
+          </div>
+          <div class="body" id=${this.bodyId}><slot></slot></div>
+          <div class="footer"><slot name="footer"></slot></div>
+        </aside>
+      </div>
+    `;
+  }
+};
+r.instanceCount = 0;
+r.styles = u`
+    :host { display: none; }
+    :host([open]) { display: block; }
+
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      display: flex;
+      justify-content: flex-end;
+      background: var(--sui-color-backdrop);
+      backdrop-filter: blur(var(--sui-blur-backdrop));
+      -webkit-backdrop-filter: blur(var(--sui-blur-backdrop));
+      z-index: var(--sui-z-drawer-backdrop);
+    }
+
+    .panel {
+      display: flex;
+      flex-direction: column;
+      width: var(--sui-drawer-width, 320px);
+      max-width: 100%;
+      height: 100%;
+      color: var(--sui-color-text);
+      background: var(--sui-color-surface-raised);
+      border-left: 1px solid var(--sui-color-border);
+      box-shadow: var(--sui-shadow-drawer);
+      backdrop-filter: blur(var(--sui-blur-lg));
+      -webkit-backdrop-filter: blur(var(--sui-blur-lg));
+      outline: none;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      .panel { animation: sui-drawer-enter var(--sui-duration-normal) var(--sui-easing-standard); }
+      @keyframes sui-drawer-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--sui-space-3);
+      padding: var(--sui-space-4);
+      border-bottom: 1px solid var(--sui-color-border);
+    }
+
+    .title {
+      min-width: 0;
+      font-size: var(--sui-font-size-md);
+      font-weight: var(--sui-font-weight-semibold);
+    }
+
+    .close {
+      flex: none;
+      padding: var(--sui-space-0-5);
+      color: var(--sui-color-text-muted);
+      background: transparent;
+      border: 0;
+      border-radius: var(--sui-radius-xs);
+      font-size: var(--sui-font-size-xl);
+      line-height: 1;
+      cursor: pointer;
+    }
+
+    .close:hover { color: var(--sui-color-text); }
+    .close:focus-visible { outline: none; box-shadow: var(--sui-focus-ring); }
+
+    .body {
+      flex: 1;
+      padding: var(--sui-space-4);
+      overflow: auto;
+      color: var(--sui-color-text-muted);
+      font-size: var(--sui-font-size-sm);
+    }
+
+    .footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--sui-space-2);
+      padding: var(--sui-space-4);
+      border-top: 1px solid var(--sui-color-border);
+    }
+  `;
+i([
+  a({ type: Boolean, reflect: !0 })
+], r.prototype, "open", 2);
+i([
+  a({ type: String })
+], r.prototype, "label", 2);
+i([
+  a({ type: String, attribute: "close-label" })
+], r.prototype, "closeLabel", 2);
+i([
+  a({ type: Boolean, attribute: "disable-backdrop-close" })
+], r.prototype, "disableBackdropClose", 2);
+r = i([
+  h("sui-drawer")
+], r);
+export {
+  r as SuiDrawer
+};