@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.2

package/src/components/button/button.ts

@@ -1,281 +1,281 @@
-import {LitElement, html, css, nothing} from "lit";
-import {customElement, property} from "lit/decorators.js";
-import {resetStyles} from "../../styles/reset.js";
-
-export type ButtonVariant = "primary" | "secondary" | "outline";
-export type ButtonSize = "sm" | "md" | "lg";
-export type ButtonColor = "primary" | "error" | "success" | "warning" | "info";
-
-@customElement("st-button")
-export class StButton extends LitElement {
-  @property({type: String}) href?: string;
-  @property({type: String}) target: "_blank" | "_self" = "_self";
-  @property({type: Boolean, reflect: true}) disabled = false;
-  @property({type: Boolean, reflect: true}) loading = false;
-  @property({type: String, reflect: true}) variant: ButtonVariant = "primary";
-  @property({type: String, reflect: true}) size: ButtonSize = "md";
-  @property({type: String, reflect: true}) color: ButtonColor = "primary";
-  @property({ type: Boolean, reflect: true }) active = false;
-  @property({ type: String, attribute: 'aria-label' }) ariaLabel: string | null = null;
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        /* ==========================================================
-           1. Base Palette (Defaults to Primary Theme)
-           ========================================================== */
-        --_palette-base: var(--st-color-primary);
-        --_palette-hover: var(--st-color-primary-hover);
-        --_palette-surface: var(--st-color-surface);
-        --_palette-surface-hover: var(--st-color-border);
-
-        --_palette-text-on-base: var(--st-color-surface);
-        --_palette-text-on-surface: var(--st-color-text);
-
-        /* Sizing Tokens */
-        --_btn-padding: var(--st-spacing-sm) var(--st-spacing-md);
-        --_btn-font-size: var(--st-font-size-sm);
-        --_btn-radius: 4px;
-        --_btn-gap: var(--st-spacing-sm);
-
-        display: inline-block;
-      }
-
-      /* ==========================================================
-         2. Semantic Color Overrides (Swaps the active palette)
-         ========================================================== */
-      :host([color="error"]) {
-        --_palette-base: var(--st-color-error);
-        --_palette-hover: color-mix(in srgb, var(--st-color-error), black 15%);
-        --_palette-surface: var(--st-color-error-bg);
-        --_palette-surface-hover: color-mix(in srgb, var(--st-color-error-bg), black 10%);
-        --_palette-text-on-base: var(--st-white); /* Force white text */
-        --_palette-text-on-surface: var(--st-color-error);
-      }
-
-      :host([color="success"]) {
-        --_palette-base: var(--st-color-success);
-        --_palette-hover: color-mix(in srgb, var(--st-color-success), black 15%);
-        --_palette-surface: var(--st-color-success-bg);
-        --_palette-surface-hover: color-mix(in srgb, var(--st-color-success-bg), black 10%);
-        --_palette-text-on-base: var(--st-white);
-        --_palette-text-on-surface: var(--st-color-success);
-      }
-
-      :host([color="warning"]) {
-        --_palette-base: var(--st-color-warning);
-        --_palette-hover: color-mix(in srgb, var(--st-color-warning), black 15%);
-        --_palette-surface: var(--st-color-warning-bg);
-        --_palette-surface-hover: color-mix(in srgb, var(--st-color-warning-bg), black 10%);
-        --_palette-text-on-base: var(--st-gray-900); /* Amber needs dark text for contrast */
-        --_palette-text-on-surface: var(--st-color-warning);
-      }
-
-      :host([color="info"]) {
-        --_palette-base: var(--st-color-info);
-        --_palette-hover: color-mix(in srgb, var(--st-color-info), black 15%);
-        --_palette-surface: var(--st-color-info-bg);
-        --_palette-surface-hover: color-mix(in srgb, var(--st-color-info-bg), black 10%);
-        --_palette-text-on-base: var(--st-white);
-        --_palette-text-on-surface: var(--st-color-info);
-      }
-
-      /* ==========================================================
-         3. Visual Variants (Consumes the active palette)
-         ========================================================== */
-
-      /* Base (Primary / Solid) */
-      :host {
-        --_btn-bg: var(--_palette-base);
-        --_btn-bg-hover: var(--_palette-hover);
-        --_btn-text: var(--_palette-text-on-base);
-        --_btn-border: transparent;
-      }
-
-      /* Secondary Variant */
-      :host([variant="secondary"]) {
-        --_btn-bg: var(--_palette-surface);
-        --_btn-bg-hover: var(--_palette-surface-hover);
-        --_btn-text: var(--_palette-text-on-surface);
-        --_btn-border: transparent;
-      }
-
-      /* Outline Variant */
-      :host([variant="outline"]) {
-        --_btn-bg: transparent;
-        --_btn-bg-hover: var(--_palette-surface);
-        --_btn-text: var(--_palette-base);
-        --_btn-border: var(--_palette-base);
-      }
-
-      /* ==========================================================
-         4. Size Variants
-         ========================================================== */
-      :host([size="sm"]) {
-        --_btn-padding: var(--st-spacing-xs) var(--st-spacing-sm);
-        --_btn-font-size: var(--st-font-size-xs);
-        --_btn-radius: 2px;
-        --_btn-gap: var(--st-spacing-xs);
-      }
-
-      :host([size="lg"]) {
-        --_btn-padding: var(--st-spacing-md) var(--st-spacing-lg);
-        --_btn-font-size: var(--st-font-size-base);
-        --_btn-radius: 6px;
-        --_btn-gap: var(--st-spacing-sm);
-      }
-
-      /* ==========================================================
-         5. Base Button Rules
-         ========================================================== */
-      .btn {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: var(--_btn-gap);
-
-        background-color: var(--_btn-bg);
-        color: var(--_btn-text);
-        border: 1px solid var(--_btn-border);
-        padding: var(--_btn-padding);
-        font-size: var(--_btn-font-size);
-        border-radius: var(--_btn-radius);
-        line-height: 1;
-
-        cursor: pointer;
-        font-weight: var(--st-font-weight-medium);
-        transition: all 0.2s ease;
-        padding: 0.5rem 1rem;
-
-        /* 1. Split the border radius into 4 independent corners */
-        border-radius: var(--btn-radius-tl, var(--st-radius-md, 0.5rem))
-          var(--btn-radius-tr, var(--st-radius-md, 0.5rem))
-          var(--btn-radius-br, var(--st-radius-md, 0.5rem))
-          var(--btn-radius-bl, var(--st-radius-md, 0.5rem));
-
-        /* 2. Add a hook for the group wrapper to inject a divider line */
-        box-shadow: var(--btn-divider, none);
-
-        font-weight: 500;
-        text-decoration: none;
-        border: 1px solid transparent;
-      }
-
-      .btn:hover {
-        color: var(--_btn-text);
-        background-color: var(--_btn-bg-hover);
-      }
-
-      /* ==========================================================
-         Logical Active States (Selected/Toggled)
-         ========================================================== */
-      :host([active]) .btn {
-        filter: brightness(0.9);
-        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
-        border-color: transparent;
-        color: var(--_btn-text);
-        background-color: var(--_btn-bg-hover);
-      }
-
-      :host([active]) .btn[color="primary"] {
-        filter: brightness(0.85);
-        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* Inset shadow gives a pressed look */
-      }
-
-      /* ==========================================================
-         Focus State (Accessibility)
-         ========================================================== */
-      /* focus-visible ensures this only shows for keyboard navigation, not mouse clicks */
-      .btn:focus-visible {
-        outline: 2px solid var(--st-color-primary);
-        outline-offset: 2px;
-        z-index: 1; /* Pulls the focused button forward if it's in a button group */
-      }
-
-      /* ==========================================================
-         Physical Active State (Mouse down)
-         ========================================================== */
-      .btn:active {
-        transform: scale(0.98);
-      }
-
-      /* Disabled & Loading */
-      :host([disabled]),
-      :host([loading]) {
-        pointer-events: none;
-      }
-
-      :host([disabled]) button {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-
-      :host([loading]) button {
-        opacity: 0.8;
-      }
-
-      /* Icons & Spinner */
-      ::slotted(svg),
-      svg.spinner {
-        width: 1.25em;
-        height: 1.25em;
-        fill: currentColor;
-        flex-shrink: 0;
-      }
-
-      svg.spinner {
-        animation: st-spin 1s linear infinite;
-      }
-
-      @keyframes st-spin {
-        from {
-          transform: rotate(0deg);
-        }
-        to {
-          transform: rotate(360deg);
-        }
-      }
-    `,
-  ];
-
-  render() {
-    const content = html`<slot></slot>`;
-
-    if (this.href) {
-      return html`<a href="${this.href}" target="${this.target}" class="btn" color="${this.color}" aria-label=${this.ariaLabel || nothing}
-        >${content}</a
-      >`;
-    }
-
-    return html`
-      <button class="btn" ?disabled=${this.disabled || this.loading}>
-        ${this.loading
-          ? html`
-              <svg class="spinner" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                <path
-                  opacity="0.2"
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-                  fill="currentColor"
-                />
-                <path
-                  d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z"
-                  fill="currentColor"
-                />
-              </svg>
-            `
-          : html`<slot name="prefix"></slot>`}
-        ${content}
-        <slot name="suffix"></slot>
-      </button>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "st-button": StButton;
-  }
-}
+import {LitElement, html, css, nothing} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+
+export type ButtonVariant = "primary" | "secondary" | "outline";
+export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonColor = "primary" | "error" | "success" | "warning" | "info";
+
+@customElement("st-button")
+export class StButton extends LitElement {
+  @property({type: String}) href?: string;
+  @property({type: String}) target: "_blank" | "_self" = "_self";
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) loading = false;
+  @property({type: String, reflect: true}) variant: ButtonVariant = "primary";
+  @property({type: String, reflect: true}) size: ButtonSize = "md";
+  @property({type: String, reflect: true}) color: ButtonColor = "primary";
+  @property({ type: Boolean, reflect: true }) active = false;
+  @property({ type: String, attribute: 'aria-label' }) ariaLabel: string | null = null;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        /* ==========================================================
+           1. Base Palette (Defaults to Primary Theme)
+           ========================================================== */
+        --_palette-base: var(--st-color-primary);
+        --_palette-hover: var(--st-color-primary-hover);
+        --_palette-surface: var(--st-color-surface);
+        --_palette-surface-hover: var(--st-color-border);
+
+        --_palette-text-on-base: var(--st-color-surface);
+        --_palette-text-on-surface: var(--st-color-text);
+
+        /* Sizing Tokens */
+        --_btn-padding: var(--st-spacing-sm) var(--st-spacing-md);
+        --_btn-font-size: var(--st-font-size-sm);
+        --_btn-radius: 4px;
+        --_btn-gap: var(--st-spacing-sm);
+
+        display: inline-block;
+      }
+
+      /* ==========================================================
+         2. Semantic Color Overrides (Swaps the active palette)
+         ========================================================== */
+      :host([color="error"]) {
+        --_palette-base: var(--st-color-error);
+        --_palette-hover: color-mix(in srgb, var(--st-color-error), black 15%);
+        --_palette-surface: var(--st-color-error-bg);
+        --_palette-surface-hover: color-mix(in srgb, var(--st-color-error-bg), black 10%);
+        --_palette-text-on-base: var(--st-white); /* Force white text */
+        --_palette-text-on-surface: var(--st-color-error);
+      }
+
+      :host([color="success"]) {
+        --_palette-base: var(--st-color-success);
+        --_palette-hover: color-mix(in srgb, var(--st-color-success), black 15%);
+        --_palette-surface: var(--st-color-success-bg);
+        --_palette-surface-hover: color-mix(in srgb, var(--st-color-success-bg), black 10%);
+        --_palette-text-on-base: var(--st-white);
+        --_palette-text-on-surface: var(--st-color-success);
+      }
+
+      :host([color="warning"]) {
+        --_palette-base: var(--st-color-warning);
+        --_palette-hover: color-mix(in srgb, var(--st-color-warning), black 15%);
+        --_palette-surface: var(--st-color-warning-bg);
+        --_palette-surface-hover: color-mix(in srgb, var(--st-color-warning-bg), black 10%);
+        --_palette-text-on-base: var(--st-gray-900); /* Amber needs dark text for contrast */
+        --_palette-text-on-surface: var(--st-color-warning);
+      }
+
+      :host([color="info"]) {
+        --_palette-base: var(--st-color-info);
+        --_palette-hover: color-mix(in srgb, var(--st-color-info), black 15%);
+        --_palette-surface: var(--st-color-info-bg);
+        --_palette-surface-hover: color-mix(in srgb, var(--st-color-info-bg), black 10%);
+        --_palette-text-on-base: var(--st-white);
+        --_palette-text-on-surface: var(--st-color-info);
+      }
+
+      /* ==========================================================
+         3. Visual Variants (Consumes the active palette)
+         ========================================================== */
+
+      /* Base (Primary / Solid) */
+      :host {
+        --_btn-bg: var(--_palette-base);
+        --_btn-bg-hover: var(--_palette-hover);
+        --_btn-text: var(--_palette-text-on-base);
+        --_btn-border: transparent;
+      }
+
+      /* Secondary Variant */
+      :host([variant="secondary"]) {
+        --_btn-bg: var(--_palette-surface);
+        --_btn-bg-hover: var(--_palette-surface-hover);
+        --_btn-text: var(--_palette-text-on-surface);
+        --_btn-border: transparent;
+      }
+
+      /* Outline Variant */
+      :host([variant="outline"]) {
+        --_btn-bg: transparent;
+        --_btn-bg-hover: var(--_palette-surface);
+        --_btn-text: var(--_palette-base);
+        --_btn-border: var(--_palette-base);
+      }
+
+      /* ==========================================================
+         4. Size Variants
+         ========================================================== */
+      :host([size="sm"]) {
+        --_btn-padding: var(--st-spacing-xs) var(--st-spacing-sm);
+        --_btn-font-size: var(--st-font-size-xs);
+        --_btn-radius: 2px;
+        --_btn-gap: var(--st-spacing-xs);
+      }
+
+      :host([size="lg"]) {
+        --_btn-padding: var(--st-spacing-md) var(--st-spacing-lg);
+        --_btn-font-size: var(--st-font-size-base);
+        --_btn-radius: 6px;
+        --_btn-gap: var(--st-spacing-sm);
+      }
+
+      /* ==========================================================
+         5. Base Button Rules
+         ========================================================== */
+      .btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--_btn-gap);
+
+        background-color: var(--_btn-bg);
+        color: var(--_btn-text);
+        border: 1px solid var(--_btn-border);
+        padding: var(--_btn-padding);
+        font-size: var(--_btn-font-size);
+        border-radius: var(--_btn-radius);
+        line-height: 1;
+
+        cursor: pointer;
+        font-weight: var(--st-font-weight-medium);
+        transition: all 0.2s ease;
+        padding: 0.5rem 1rem;
+
+        /* 1. Split the border radius into 4 independent corners */
+        border-radius: var(--btn-radius-tl, var(--st-radius-md, 0.5rem))
+          var(--btn-radius-tr, var(--st-radius-md, 0.5rem))
+          var(--btn-radius-br, var(--st-radius-md, 0.5rem))
+          var(--btn-radius-bl, var(--st-radius-md, 0.5rem));
+
+        /* 2. Add a hook for the group wrapper to inject a divider line */
+        box-shadow: var(--btn-divider, none);
+
+        font-weight: 500;
+        text-decoration: none;
+        border: 1px solid transparent;
+      }
+
+      .btn:hover {
+        color: var(--_btn-text);
+        background-color: var(--_btn-bg-hover);
+      }
+
+      /* ==========================================================
+         Logical Active States (Selected/Toggled)
+         ========================================================== */
+      :host([active]) .btn {
+        filter: brightness(0.9);
+        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
+        border-color: transparent;
+        color: var(--_btn-text);
+        background-color: var(--_btn-bg-hover);
+      }
+
+      :host([active]) .btn[color="primary"] {
+        filter: brightness(0.85);
+        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* Inset shadow gives a pressed look */
+      }
+
+      /* ==========================================================
+         Focus State (Accessibility)
+         ========================================================== */
+      /* focus-visible ensures this only shows for keyboard navigation, not mouse clicks */
+      .btn:focus-visible {
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 2px;
+        z-index: 1; /* Pulls the focused button forward if it's in a button group */
+      }
+
+      /* ==========================================================
+         Physical Active State (Mouse down)
+         ========================================================== */
+      .btn:active {
+        transform: scale(0.98);
+      }
+
+      /* Disabled & Loading */
+      :host([disabled]),
+      :host([loading]) {
+        pointer-events: none;
+      }
+
+      :host([disabled]) button {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      :host([loading]) button {
+        opacity: 0.8;
+      }
+
+      /* Icons & Spinner */
+      ::slotted(svg),
+      svg.spinner {
+        width: 1.25em;
+        height: 1.25em;
+        fill: currentColor;
+        flex-shrink: 0;
+      }
+
+      svg.spinner {
+        animation: st-spin 1s linear infinite;
+      }
+
+      @keyframes st-spin {
+        from {
+          transform: rotate(0deg);
+        }
+        to {
+          transform: rotate(360deg);
+        }
+      }
+    `,
+  ];
+
+  render() {
+    const content = html`<slot></slot>`;
+
+    if (this.href) {
+      return html`<a href="${this.href}" target="${this.target}" class="btn" color="${this.color}" aria-label=${this.ariaLabel || nothing}
+        >${content}</a
+      >`;
+    }
+
+    return html`
+      <button class="btn" ?disabled=${this.disabled || this.loading}>
+        ${this.loading
+          ? html`
+              <svg class="spinner" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  opacity="0.2"
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M2 12C2 6.47715 6.47715 2 12 2V5C8.13401 5 5 8.13401 5 12H2Z"
+                  fill="currentColor"
+                />
+              </svg>
+            `
+          : html`<slot name="prefix"></slot>`}
+        ${content}
+        <slot name="suffix"></slot>
+      </button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-button": StButton;
+  }
+}