@sondor-technology/sondor-components 1.0.1-develop.13 → 1.0.1-develop.15

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,293 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from "lit";
+import { customElement, property, state, queryAssignedElements } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { resetStyles } from "../../styles/reset.js";
+let StTooltip = class StTooltip extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.content = "";
+        this.position = "top";
+        this.variant = "default";
+        this.delay = 200;
+        this.disabled = false;
+        this._isVisible = false;
+        this._tooltipId = `st-tooltip-${Math.random().toString(36).substring(2, 9)}`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._a11yNode = document.createElement("span");
+        this._a11yNode.id = this._tooltipId;
+        this._a11yNode.role = "tooltip";
+        this._a11yNode.style.display = "none";
+        this._a11yNode.textContent = this.content;
+        this.appendChild(this._a11yNode);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._a11yNode && this.contains(this._a11yNode)) {
+            this.removeChild(this._a11yNode);
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has("content") && this._a11yNode) {
+            this._a11yNode.textContent = this.content;
+        }
+    }
+    _handleSlotChange() {
+        if (this._slottedElements.length > 0) {
+            this._slottedElements.forEach((el) => {
+                el.setAttribute("aria-describedby", this._tooltipId);
+            });
+        }
+    }
+    _handleMouseEnter() {
+        if (this.disabled || !this.content)
+            return;
+        clearTimeout(this._hideTimeout);
+        this._showTimeout = window.setTimeout(() => {
+            this._isVisible = true;
+        }, this.delay);
+    }
+    _handleMouseLeave() {
+        clearTimeout(this._showTimeout);
+        this._hideTimeout = window.setTimeout(() => {
+            this._isVisible = false;
+        }, 100);
+    }
+    _handleFocusIn() {
+        if (this.disabled || !this.content)
+            return;
+        this._isVisible = true;
+    }
+    _handleFocusOut() {
+        this._isVisible = false;
+    }
+    _handleKeyDown(e) {
+        if (e.key === "Escape" && this._isVisible) {
+            e.stopPropagation();
+            this._isVisible = false;
+        }
+    }
+    render() {
+        return html `
+      <div
+        class="tooltip-target"
+        @mouseenter=${this._handleMouseEnter}
+        @mouseleave=${this._handleMouseLeave}
+        @focusin=${this._handleFocusIn}
+        @focusout=${this._handleFocusOut}
+        @keydown=${this._handleKeyDown}
+      >
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
+
+      <div
+        class=${classMap({
+            "tooltip-popup": true,
+            [`position-${this.position}`]: true,
+            [`variant-${this.variant}`]: true,
+            "is-visible": this._isVisible,
+        })}
+        aria-hidden="true"
+      >
+        ${this.content}
+      </div>
+    `;
+    }
+};
+StTooltip.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+
+      .tooltip-target {
+        display: inline-block;
+      }
+
+      .tooltip-popup {
+        position: absolute;
+        z-index: 1000;
+        background: var(--st-color-surface);
+        color: var(--st-color-text);
+        border: 1px solid var(--st-color-border);
+        padding: var(--st-spacing-xs) var(--st-spacing-sm);
+        border-radius: var(--st-radius-sm);
+        font-size: var(--st-font-size-xs);
+        font-weight: 500;
+        white-space: nowrap;
+        pointer-events: none;
+        opacity: 0;
+        visibility: hidden;
+        transition:
+          opacity 0.2s ease,
+          transform 0.2s ease,
+          visibility 0.2s;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      }
+
+      .tooltip-popup::before {
+        content: "";
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        background: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        transform: rotate(45deg);
+        box-sizing: border-box;
+      }
+
+      .is-visible {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      /* ==========================================
+         VARIANTS
+         ========================================== */
+
+      .variant-info {
+        background: var(--st-color-info, #3b82f6);
+        border-color: var(--st-color-info, #3b82f6);
+        color: var(--st-color-on-info, #ffffff);
+      }
+      .variant-info::before {
+        background: var(--st-color-info, #3b82f6);
+        border-color: var(--st-color-info, #3b82f6);
+      }
+
+      .variant-success {
+        background: var(--st-color-success, #16a34a);
+        border-color: var(--st-color-success, #16a34a);
+        color: var(--st-color-on-success, #ffffff);
+      }
+      .variant-success::before {
+        background: var(--st-color-success, #16a34a);
+        border-color: var(--st-color-success, #16a34a);
+      }
+
+      .variant-warning {
+        background: var(--st-color-warning, #f59e0b);
+        border-color: var(--st-color-warning, #f59e0b);
+        /* Warning usually needs dark text for contrast */
+        color: var(--st-color-on-warning, #1e293b);
+      }
+      .variant-warning::before {
+        background: var(--st-color-warning, #f59e0b);
+        border-color: var(--st-color-warning, #f59e0b);
+      }
+
+      .variant-danger {
+        background: var(--st-color-danger, #dc2626);
+        border-color: var(--st-color-danger, #dc2626);
+        color: var(--st-color-on-danger, #ffffff);
+      }
+      .variant-danger::before {
+        background: var(--st-color-danger, #dc2626);
+        border-color: var(--st-color-danger, #dc2626);
+      }
+
+      /* ==========================================
+         POSITIONS
+         ========================================== */
+
+      .position-top {
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-10px);
+      }
+      .position-top.is-visible {
+        transform: translateX(-50%) translateY(-6px);
+      }
+      .position-top::before {
+        bottom: -5px;
+        left: 50%;
+        margin-left: -4px;
+        border-top: none;
+        border-left: none;
+      }
+
+      .position-bottom {
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%) translateY(10px);
+      }
+      .position-bottom.is-visible {
+        transform: translateX(-50%) translateY(6px);
+      }
+      .position-bottom::before {
+        top: -5px;
+        left: 50%;
+        margin-left: -4px;
+        border-bottom: none;
+        border-right: none;
+      }
+
+      .position-left {
+        right: 100%;
+        top: 50%;
+        transform: translateY(-50%) translateX(-10px);
+      }
+      .position-left.is-visible {
+        transform: translateY(-50%) translateX(-6px);
+      }
+      .position-left::before {
+        right: -5px;
+        top: 50%;
+        margin-top: -4px;
+        border-bottom: none;
+        border-left: none;
+      }
+
+      .position-right {
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%) translateX(10px);
+      }
+      .position-right.is-visible {
+        transform: translateY(-50%) translateX(6px);
+      }
+      .position-right::before {
+        left: -5px;
+        top: 50%;
+        margin-top: -4px;
+        border-top: none;
+        border-right: none;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], StTooltip.prototype, "content", void 0);
+__decorate([
+    property({ type: String })
+], StTooltip.prototype, "position", void 0);
+__decorate([
+    property({ type: String })
+], StTooltip.prototype, "variant", void 0);
+__decorate([
+    property({ type: Number })
+], StTooltip.prototype, "delay", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StTooltip.prototype, "disabled", void 0);
+__decorate([
+    state()
+], StTooltip.prototype, "_isVisible", void 0);
+__decorate([
+    queryAssignedElements()
+], StTooltip.prototype, "_slottedElements", void 0);
+StTooltip = __decorate([
+    customElement("st-tooltip")
+], StTooltip);
+export { StTooltip };
+//# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.ts"],"names":[],"mappings":"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"}

package/dist/components/vertical-nav/vertical-nav-group.d.ts

@@ -1,15 +1,18 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from "lit";
 export declare class StNavGroup extends LitElement {
     label: string;
     open: boolean;
     depth: number;
+    private _drawerContent;
     static styles: import("lit").CSSResult[];
     private _toggle;
+    private _updateChildDepths;
+    updated(changedProperties: PropertyValues): void;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'st-vertical-nav-group': StNavGroup;
+        "st-vertical-nav-group": StNavGroup;
     }
 }
 //# sourceMappingURL=vertical-nav-group.d.ts.map

package/dist/components/vertical-nav/vertical-nav-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vertical-nav-group.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,UAAW,SAAQ,UAAU;IACZ,KAAK,SAAM;IACK,IAAI,UAAS;IAC7B,KAAK,SAAK;IAEtC,MAAM,CAAC,MAAM,4BA8EX;IAEF,OAAO,CAAC,OAAO;IAIf,MAAM,yCAcL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,UAAU,CAAC;KACrC;CACF"}
+{"version":3,"file":"vertical-nav-group.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAI1D,qBACa,UAAW,SAAQ,UAAU;IACd,KAAK,SAAM;IACK,IAAI,UAAS;IAC7B,KAAK,SAAK;IAEV,OAAO,CAAC,cAAc,CAAe;IAE/D,MAAM,CAAC,MAAM,4BAoFX;IAEF,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,kBAAkB;IAQjB,OAAO,CAAC,iBAAiB,EAAE,cAAc,QAKjD;IAED,MAAM,yCAuBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,UAAU,CAAC;KACrC;CACF"}

package/dist/components/vertical-nav/vertical-nav-group.js

@@ -4,30 +4,56 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
+import { LitElement, html, css } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
 let StNavGroup = class StNavGroup extends LitElement {
     constructor() {
         super(...arguments);
-        this.label = '';
+        this.label = "";
         this.open = false;
         this.depth = 0;
     }
     _toggle() {
         this.open = !this.open;
+        this.dispatchEvent(new CustomEvent("st-group-toggle", {
+            detail: { open: this.open, label: this.label },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _updateChildDepths() {
+        // Query 'this' (Light DOM) instead of the Shadow DOM
+        const childItems = this.querySelectorAll("st-vertical-nav-item, st-vertical-nav-group");
+        childItems.forEach((item) => {
+            item.depth = this.depth + 1;
+        });
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has("depth")) {
+            this._updateChildDepths();
+        }
     }
     render() {
+        const groupId = `nav-group-${this.label.toLowerCase().replace(/\s+/g, "-")}`;
         return html `
-      <button @click=${this._toggle} aria-expanded=${this.open} style="--nav-depth: ${this.depth}">
+      <button
+        @click=${this._toggle}
+        aria-expanded=${this.open}
+        aria-controls=${groupId}
+        style="--nav-depth: ${this.depth}"
+      >
         <slot name="icon"></slot>
         <span class="label">${this.label}</span>
-        <svg class="chevron" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>
+        <svg class="chevron" aria-hidden="true" viewBox="0 0 24 24">
+          <path d="M6 9l6 6 6-6"></path>
+        </svg>
       </button>
-      
-      <div class="drawer">
+
+      <div id=${groupId} class="drawer" role="region" aria-label=${this.label}>
         <div class="drawer-content">
-          <slot></slot>
+          <slot @slotchange=${this._updateChildDepths}></slot>
         </div>
       </div>
     `;
@@ -56,14 +82,20 @@ StNavGroup.styles = [
         font-size: var(--st-font-size-sm);
         font-weight: var(--st-font-weight-semibold);
         cursor: pointer;
-        transition: background-color 0.2s ease, color 0.2s ease;
+        transition:
+          background-color 0.2s ease,
+          color 0.2s ease;
       }
 
       button:hover {
-        background-color: var(--st-color-surface-hover, rgba(0,0,0,0.03));
+        background-color: var(--st-color-surface-hover, rgba(0, 0, 0, 0.03));
+      }
+
+      button:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: -2px;
       }
 
-      /* Styles for slotted icons */
       ::slotted([slot="icon"]) {
         width: 1rem;
         height: 1rem;
@@ -110,7 +142,7 @@ StNavGroup.styles = [
         display: flex;
         flex-direction: column;
       }
-    `
+    `,
 ];
 __decorate([
     property({ type: String })
@@ -121,7 +153,11 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], StNavGroup.prototype, "depth", void 0);
+__decorate([
+    query(".drawer-content")
+], StNavGroup.prototype, "_drawerContent", void 0);
 StNavGroup = __decorate([
-    customElement('st-vertical-nav-group')
+    customElement("st-vertical-nav-group")
 ], StNavGroup);
 export { StNavGroup };
+//# sourceMappingURL=vertical-nav-group.js.map

package/dist/components/vertical-nav/vertical-nav-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-nav-group.js","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAiB,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAG3C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QACqB,UAAK,GAAG,EAAE,CAAC;QACK,SAAI,GAAG,KAAK,CAAC;QAC7B,UAAK,GAAG,CAAC,CAAC;IA4ItC,CAAC;IAlDS,OAAO;QACb,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QACvB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,iBAAiB,EAAE;YACjC,MAAM,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC;YAC5C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,kBAAkB;QACxB,qDAAqD;QACrD,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,CAAC,6CAA6C,CAAC,CAAC;QACxF,UAAU,CAAC,OAAO,CAAC,CAAC,IAAS,EAAE,EAAE;YAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QAC9B,CAAC,CAAC,CAAC;IACL,CAAC;IAEQ,OAAO,CAAC,iBAAiC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,aAAa,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;QAE7E,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,OAAO;wBACL,IAAI,CAAC,IAAI;wBACT,OAAO;8BACD,IAAI,CAAC,KAAK;;;8BAGV,IAAI,CAAC,KAAK;;;;;;gBAMxB,OAAO,4CAA4C,IAAI,CAAC,KAAK;;8BAE/C,IAAI,CAAC,kBAAkB;;;KAGhD,CAAC;IACJ,CAAC;CACF,CAAA;AAxIQ,iBAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiFF;CACF,AApFY,CAoFX;AA1FwB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;yCAAY;AACK;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wCAAc;AAC7B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;yCAAW;AAEF;IAAjC,KAAK,CAAC,iBAAiB,CAAC;kDAAsC;AALpD,UAAU;IADtB,aAAa,CAAC,uBAAuB,CAAC;GAC1B,UAAU,CA+ItB"}

package/dist/components/vertical-nav/vertical-nav-item.d.ts

@@ -1,14 +1,15 @@
-import { LitElement } from 'lit';
+import { LitElement } from "lit";
 export declare class StNavItem extends LitElement {
     href: string;
     active: boolean;
     depth: number;
     static styles: import("lit").CSSResult[];
+    private _handleClick;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'st-vertical-nav-item': StNavItem;
+        "st-vertical-nav-item": StNavItem;
     }
 }
 //# sourceMappingURL=vertical-nav-item.d.ts.map

package/dist/components/vertical-nav/vertical-nav-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vertical-nav-item.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,SAAU,SAAQ,UAAU;IACX,IAAI,SAAO;IACK,MAAM,UAAS;IAC/B,KAAK,SAAK;IAEtC,MAAM,CAAC,MAAM,4BA8CX;IAEF,MAAM,yCAOL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,SAAS,CAAC;KACnC;CACF"}
+{"version":3,"file":"vertical-nav-item.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAI1C,qBACa,SAAU,SAAQ,UAAU;IACb,IAAI,SAAO;IACK,MAAM,UAAS;IAC/B,KAAK,SAAK;IAEpC,MAAM,CAAC,MAAM,4BAmDX;IAEF,OAAO,CAAC,YAAY;IAYpB,MAAM,yCAaL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,SAAS,CAAC;KACnC;CACF"}

package/dist/components/vertical-nav/vertical-nav-item.js

@@ -4,19 +4,35 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
 let StNavItem = class StNavItem extends LitElement {
     constructor() {
         super(...arguments);
-        this.href = '#';
+        this.href = "#";
         this.active = false;
         this.depth = 0;
     }
+    _handleClick(e) {
+        // Dispatch a custom event so single-page apps can catch internal route clicks if desired
+        const event = new CustomEvent("st-nav-click", {
+            detail: { href: this.href },
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+        });
+        this.dispatchEvent(event);
+    }
     render() {
         return html `
-      <a href=${this.href} part="link" style="--nav-depth: ${this.depth}">
+      <a
+        href=${this.href}
+        part="link"
+        style="--nav-depth: ${this.depth}"
+        aria-current=${this.active ? "page" : "false"}
+        @click=${this._handleClick}
+      >
         <slot name="icon"></slot>
         <slot></slot>
       </a>
@@ -52,7 +68,12 @@ StNavItem.styles = [
 
       a:hover {
         color: var(--st-color-text);
-        background-color: var(--st-color-surface-hover, rgba(0,0,0,0.03));
+        background-color: var(--st-color-surface-hover, rgba(0, 0, 0, 0.03));
+      }
+
+      a:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: -2px;
       }
 
       ::slotted([slot="icon"]) {
@@ -68,7 +89,7 @@ StNavItem.styles = [
         font-weight: var(--st-font-weight-bold);
         background-color: var(--st-color-primary-light, rgba(98, 0, 238, 0.05));
       }
-    `
+    `,
 ];
 __decorate([
     property({ type: String })
@@ -80,6 +101,7 @@ __decorate([
     property({ type: Number })
 ], StNavItem.prototype, "depth", void 0);
 StNavItem = __decorate([
-    customElement('st-vertical-nav-item')
+    customElement("st-vertical-nav-item")
 ], StNavItem);
 export { StNavItem };
+//# sourceMappingURL=vertical-nav-item.js.map

package/dist/components/vertical-nav/vertical-nav-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-nav-item.js","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAG3C,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACqB,SAAI,GAAG,GAAG,CAAC;QACK,WAAM,GAAG,KAAK,CAAC;QAC/B,UAAK,GAAG,CAAC,CAAC;IAiFtC,CAAC;IA1BS,YAAY,CAAC,CAAa;QAChC,yFAAyF;QACzF,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,cAAc,EAAE;YAC5C,MAAM,EAAE,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAC;YACzB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;QAEH,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,IAAI;;8BAEM,IAAI,CAAC,KAAK;uBACjB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;iBACpC,IAAI,CAAC,YAAY;;;;;KAK7B,CAAC;IACJ,CAAC;CACF,CAAA;AA/EQ,gBAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgDF;CACF,AAnDY,CAmDX;AAvDwB;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;uCAAY;AACK;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yCAAgB;AAC/B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;wCAAW;AAHzB,SAAS;IADrB,aAAa,CAAC,sBAAsB,CAAC;GACzB,SAAS,CAoFrB"}

package/dist/styles/index.css

@@ -1,11 +1,14 @@
 /* src/styles/globals.css */
 :root {
-  --st-purple-50: #faf5ff;
   --st-purple-100: #f3e8ff;
+  --st-purple-200: #e9d5ff;
+  --st-purple-300: #d8b4fe;
   --st-purple-400: #c084fc;
   --st-purple-500: #a855f7;
-  --st-purple-600: #6d28d9;
-  --st-purple-700: #5b21b6;
+  --st-purple-600: #9333ea;
+  --st-purple-700: #7e22ce;
+  --st-purple-800: #6b21a8;
+  --st-purple-900: #581c87;
   --st-white: #ffffff;
   --st-gray-50: #f9fafb;
   --st-gray-100: #f3f4f6;
@@ -14,20 +17,40 @@
   --st-gray-800: #27272a;
   --st-gray-900: #18181b;
   --st-red-100: #fee2e2;
+  --st-red-200: #fecaca;
+  --st-red-300: #fca5a5;
+  --st-red-400: #f87171;
   --st-red-500: #ef4444;
   --st-red-600: #dc2626;
+  --st-red-700: #b91c1c;
+  --st-red-800: #991b1b;
   --st-red-900: #7f1d1d;
   --st-green-100: #dcfce7;
+  --st-green-200: #bbf7d0;
+  --st-green-300: #86efac;
+  --st-green-400: #4ade80;
   --st-green-500: #22c55e;
   --st-green-600: #16a34a;
+  --st-green-700: #15803d;
+  --st-green-800: #166534;
   --st-green-900: #14532d;
   --st-amber-100: #fef3c7;
+  --st-amber-200: #fde68a;
+  --st-amber-300: #fcd34d;
+  --st-amber-400: #fbbf24;
   --st-amber-500: #f59e0b;
   --st-amber-600: #d97706;
+  --st-amber-700: #b45309;
+  --st-amber-800: #92400e;
   --st-amber-900: #78350f;
   --st-blue-100: #dbeafe;
+  --st-blue-200: #bfdbfe;
+  --st-blue-300: #93c5fd;
+  --st-blue-400: #60a5fa;
   --st-blue-500: #3b82f6;
   --st-blue-600: #2563eb;
+  --st-blue-700: #1d4ed8;
+  --st-blue-800: #1e40af;
   --st-blue-900: #1e3a8a;
   --st-spacing-xs: 0.25rem;
   --st-spacing-sm: 0.5rem;
@@ -74,16 +97,20 @@
   --st-color-border: var(--st-gray-200);
   --st-color-text: var(--st-gray-900);
   --st-color-text-muted: var(--st-gray-700);
-  --st-color-primary: var(--st-purple-600);
-  --st-color-primary-hover: var(--st-purple-700);
-  --st-color-error: var(--st-red-600);
+  --st-color-primary: var(--st-purple-700);
+  --st-color-primary-text: var(--st-purple-700);
+  --st-color-error: var(--st-red-700);
+  --st-color-error-text: var(--st-red-800);
+  --st-color-success: var(--st-green-800);
+  --st-color-warning: var(--st-amber-800);
+  --st-color-info: var(--st-blue-700);
+  --st-color-info-text: var(--st-blue-800);
+  --st-color-primary-bg: var(--st-purple-100);
   --st-color-error-bg: var(--st-red-100);
-  --st-color-success: var(--st-green-600);
   --st-color-success-bg: var(--st-green-100);
-  --st-color-warning: var(--st-amber-600);
   --st-color-warning-bg: var(--st-amber-100);
-  --st-color-info: var(--st-blue-600);
   --st-color-info-bg: var(--st-blue-100);
+  --st-hover-brightness: 0.9;
 }
 :root:not([data-theme=light]),
 :root[data-theme=dark] {
@@ -93,17 +120,22 @@
   --st-color-surface-hover: color-mix(in srgb, var(--st-color-surface), white 10%);
   --st-color-border: var(--st-gray-700);
   --st-color-text: var(--st-gray-50);
-  --st-color-text-muted: var(--st-gray-200);
-  --st-color-primary: var(--st-purple-400);
-  --st-color-primary-hover: var(--st-purple-600);
-  --st-color-error: var(--st-red-500);
+  --st-color-text-muted: var(--st-gray-300);
+  --st-color-primary: var(--st-purple-300);
+  --st-color-primary-text: var(--st-color-primary);
+  --st-color-error: var(--st-red-300);
+  --st-color-error-text: var(--st-color-error);
+  --st-color-success: var(--st-green-400);
+  --st-color-warning: var(--st-amber-400);
+  --st-color-info: var(--st-blue-300);
+  --st-color-info-text: var(--st-color-info);
+  --st-color-primary-bg: rgba(147, 51, 234, 0.15);
   --st-color-error-bg: #451a1a;
-  --st-color-success: var(--st-green-500);
   --st-color-success-bg: #143620;
-  --st-color-warning: var(--st-amber-500);
   --st-color-warning-bg: #422a14;
-  --st-color-info: var(--st-blue-500);
-  --st-color-info-bg: #172a54;
+  --st-color-info-bg: #1e3a8a;
+  --st-hover-brightness: 1.3;
+  --st-icon-filter: invert(1);
 }
 
 /* src/styles/index.css */

package/dist/styles/reset.js

@@ -48,3 +48,4 @@ export const resetStyles = css `
     padding: 0;
   }
 `;
+//# sourceMappingURL=reset.js.map

package/dist/styles/reset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reset.js","sourceRoot":"","sources":["../../src/styles/reset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgD7B,CAAC"}