@sondor-technology/sondor-components 1.0.0-1165-initial-setup.11 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sondor-technology/sondor-components",
-  "version": "1.0.0-1165-initial-setup.11",
+  "version": "1.0.0",
   "description": "",
   "main": "src/index.js",
   "types": "dist/index.d.ts",
@@ -187,6 +187,5 @@
     "concurrently": "^10.0.3",
     "esbuild": "^0.28.1",
     "typescript": "^7.0.2"
-  },
-  "readme": "README.md"
+  }
 }

package/src/components/alert/alert.ts

@@ -1,101 +1,101 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-
-export type AlertColor = 'info' | 'success' | 'warning' | 'error';
-
-@customElement('st-alert')
-export class StAlert extends LitElement {
-  @property({ type: String, reflect: true }) color: AlertColor = 'info';
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: flex;
-        gap: var(--st-spacing-md);
-        padding: var(--st-spacing-md);
-        border-radius: 6px;
-        border: 1px solid transparent;
-        font-size: var(--st-font-size-base);
-        line-height: 1.5;
-        
-        /* Default Palette */
-        --_alert-bg: var(--st-color-info-bg);
-        --_alert-border: var(--st-color-info);
-        --_alert-text: var(--st-color-text);
-        --_alert-icon: var(--st-color-info);
-      }
-
-      /* State Modifiers */
-      :host([color="error"]) {
-        --_alert-bg: var(--st-color-error-bg);
-        --_alert-border: var(--st-color-error);
-        --_alert-icon: var(--st-color-error);
-      }
-
-      :host([color="success"]) {
-        --_alert-bg: var(--st-color-success-bg);
-        --_alert-border: var(--st-color-success);
-        --_alert-icon: var(--st-color-success);
-      }
-
-      :host([color="warning"]) {
-        --_alert-bg: var(--st-color-warning-bg);
-        --_alert-border: var(--st-color-warning);
-        --_alert-icon: var(--st-color-warning);
-        /* Amber backgrounds often need forced dark text in light mode, but your tokens handle this */
-      }
-
-      /* Apply the variables */
-      :host {
-        background-color: var(--_alert-bg);
-        border-color: var(--_alert-border);
-        color: var(--_alert-text);
-      }
-
-      /* Icon Slot */
-      .icon-container {
-        display: flex;
-        flex-shrink: 0;
-        color: var(--_alert-icon);
-        /* Align icon with the first line of text */
-        margin-top: 2px; 
-      }
-
-      ::slotted([slot="icon"]) {
-        width: 1.25rem;
-        height: 1.25rem;
-        fill: none;
-        stroke: currentColor;
-        stroke-width: 2;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-      }
-
-      .content {
-        display: flex;
-        flex-direction: column;
-        gap: var(--st-spacing-xs);
-        flex: 1;
-      }
-    `
-  ];
-
-  render() {
-    return html`
-      <div class="icon-container">
-        <slot name="icon"></slot>
-      </div>
-      <div class="content">
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'st-alert': StAlert;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+export type AlertColor = 'info' | 'success' | 'warning' | 'error';
+
+@customElement('st-alert')
+export class StAlert extends LitElement {
+  @property({ type: String, reflect: true }) color: AlertColor = 'info';
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: flex;
+        gap: var(--st-spacing-md);
+        padding: var(--st-spacing-md);
+        border-radius: 6px;
+        border: 1px solid transparent;
+        font-size: var(--st-font-size-base);
+        line-height: 1.5;
+        
+        /* Default Palette */
+        --_alert-bg: var(--st-color-info-bg);
+        --_alert-border: var(--st-color-info);
+        --_alert-text: var(--st-color-text);
+        --_alert-icon: var(--st-color-info);
+      }
+
+      /* State Modifiers */
+      :host([color="error"]) {
+        --_alert-bg: var(--st-color-error-bg);
+        --_alert-border: var(--st-color-error);
+        --_alert-icon: var(--st-color-error);
+      }
+
+      :host([color="success"]) {
+        --_alert-bg: var(--st-color-success-bg);
+        --_alert-border: var(--st-color-success);
+        --_alert-icon: var(--st-color-success);
+      }
+
+      :host([color="warning"]) {
+        --_alert-bg: var(--st-color-warning-bg);
+        --_alert-border: var(--st-color-warning);
+        --_alert-icon: var(--st-color-warning);
+        /* Amber backgrounds often need forced dark text in light mode, but your tokens handle this */
+      }
+
+      /* Apply the variables */
+      :host {
+        background-color: var(--_alert-bg);
+        border-color: var(--_alert-border);
+        color: var(--_alert-text);
+      }
+
+      /* Icon Slot */
+      .icon-container {
+        display: flex;
+        flex-shrink: 0;
+        color: var(--_alert-icon);
+        /* Align icon with the first line of text */
+        margin-top: 2px; 
+      }
+
+      ::slotted([slot="icon"]) {
+        width: 1.25rem;
+        height: 1.25rem;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--st-spacing-xs);
+        flex: 1;
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <div class="icon-container">
+        <slot name="icon"></slot>
+      </div>
+      <div class="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-alert': StAlert;
+  }
 }

package/src/components/badge/badge.ts

@@ -1,97 +1,97 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-
-export type BadgeColor = 'primary' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
-
-@customElement('st-badge')
-export class StBadge extends LitElement {
-  @property({ type: String, reflect: true }) color: BadgeColor = 'neutral';
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0.125rem 0.5rem; /* 2px 8px */
-        font-size: var(--st-font-size-xs);
-        font-weight: var(--st-font-weight-medium);
-        border-radius: 999px; /* Pill shape */
-        line-height: 1.25;
-        white-space: nowrap;
-        
-        /* Base / Neutral Palette */
-        --_badge-bg: var(--st-color-surface);
-        --_badge-text: var(--st-color-text-muted);
-        --_badge-border: var(--st-color-border);
-      }
-
-      /* Base Application */
-      :host {
-        background-color: var(--_badge-bg);
-        color: var(--_badge-text);
-        border: 1px solid var(--_badge-border);
-      }
-
-      /* ==========================================================
-         Soft Semantic Variants
-         ========================================================== */
-      :host([color="primary"]) {
-        --_badge-bg: var(--st-color-primary);
-        --_badge-text: var(--st-white);
-        --_badge-border: transparent;
-      }
-
-      :host([color="success"]) {
-        --_badge-bg: var(--st-color-success-bg);
-        --_badge-text: var(--st-color-success);
-        --_badge-border: transparent;
-      }
-
-      :host([color="warning"]) {
-        --_badge-bg: var(--st-color-warning-bg);
-        --_badge-text: var(--st-color-warning);
-        --_badge-border: transparent;
-      }
-
-      :host([color="error"]) {
-        --_badge-bg: var(--st-color-error-bg);
-        --_badge-text: var(--st-color-error);
-        --_badge-border: transparent;
-      }
-
-      :host([color="info"]) {
-        --_badge-bg: var(--st-color-info-bg);
-        --_badge-text: var(--st-color-info);
-        --_badge-border: transparent;
-      }
-
-      /* Optional icon support inside the badge */
-      ::slotted(svg) {
-        width: 0.75rem;
-        height: 0.75rem;
-        margin-right: 0.25rem;
-        fill: none;
-        stroke: currentColor;
-        stroke-width: 2;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-      }
-    `
-  ];
-
-  render() {
-    return html`
-      <slot name="icon"></slot>
-      <slot></slot>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'st-badge': StBadge;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+export type BadgeColor = 'primary' | 'neutral' | 'success' | 'warning' | 'error' | 'info';
+
+@customElement('st-badge')
+export class StBadge extends LitElement {
+  @property({ type: String, reflect: true }) color: BadgeColor = 'neutral';
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.125rem 0.5rem; /* 2px 8px */
+        font-size: var(--st-font-size-xs);
+        font-weight: var(--st-font-weight-medium);
+        border-radius: 999px; /* Pill shape */
+        line-height: 1.25;
+        white-space: nowrap;
+        
+        /* Base / Neutral Palette */
+        --_badge-bg: var(--st-color-surface);
+        --_badge-text: var(--st-color-text-muted);
+        --_badge-border: var(--st-color-border);
+      }
+
+      /* Base Application */
+      :host {
+        background-color: var(--_badge-bg);
+        color: var(--_badge-text);
+        border: 1px solid var(--_badge-border);
+      }
+
+      /* ==========================================================
+         Soft Semantic Variants
+         ========================================================== */
+      :host([color="primary"]) {
+        --_badge-bg: var(--st-color-primary);
+        --_badge-text: var(--st-white);
+        --_badge-border: transparent;
+      }
+
+      :host([color="success"]) {
+        --_badge-bg: var(--st-color-success-bg);
+        --_badge-text: var(--st-color-success);
+        --_badge-border: transparent;
+      }
+
+      :host([color="warning"]) {
+        --_badge-bg: var(--st-color-warning-bg);
+        --_badge-text: var(--st-color-warning);
+        --_badge-border: transparent;
+      }
+
+      :host([color="error"]) {
+        --_badge-bg: var(--st-color-error-bg);
+        --_badge-text: var(--st-color-error);
+        --_badge-border: transparent;
+      }
+
+      :host([color="info"]) {
+        --_badge-bg: var(--st-color-info-bg);
+        --_badge-text: var(--st-color-info);
+        --_badge-border: transparent;
+      }
+
+      /* Optional icon support inside the badge */
+      ::slotted(svg) {
+        width: 0.75rem;
+        height: 0.75rem;
+        margin-right: 0.25rem;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <slot name="icon"></slot>
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-badge': StBadge;
+  }
 }

package/src/components/breadcrumb/breadcrumb.ts

@@ -1,99 +1,99 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-
-export interface BreadcrumbItem {
-  label: string;
-  href?: string;
-}
-
-@customElement('st-breadcrumb')
-export class StBreadcrumb extends LitElement {
-  /**
-   * Array of breadcrumb items defining the navigation path.
-   */
-  @property({ type: Array }) items: BreadcrumbItem[] = [];
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: block;
-        font-family: var(--st-font-family, inherit);
-      }
-
-      nav {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        font-size: var(--st-font-size-sm, 0.875rem);
-      }
-
-      ol {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-      }
-
-      li {
-        display: flex;
-        align-items: center;
-        color: var(--st-color-text-muted);
-      }
-
-      li:not(:last-child)::after {
-        content: "/";
-        margin: 0 var(--st-spacing-sm, 0.5rem);
-        color: var(--st-color-border);
-      }
-
-      a {
-        color: var(--st-color-text-muted);
-        text-decoration: none;
-        transition: color 0.2s ease;
-      }
-
-      a:hover {
-        color: var(--st-color-primary);
-        text-decoration: underline;
-      }
-
-      li:last-child {
-        color: var(--st-color-text);
-        font-weight: 500;
-      }
-    `
-  ];
-
-  render() {
-    if (!this.items || this.items.length === 0) {
-      return html``;
-    }
-
-    return html`
-      <nav aria-label="Breadcrumb">
-        <ol>
-          ${this.items.map((item, index) => {
-            const isLast = index === this.items.length - 1;
-            return html`
-              <li>
-                ${!isLast && item.href 
-                  ? html`<a href=${item.href}>${item.label}</a>` 
-                  : html`<span>${item.label}</span>`}
-              </li>
-            `;
-          })}
-        </ol>
-      </nav>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'st-breadcrumb': StBreadcrumb;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+@customElement('st-breadcrumb')
+export class StBreadcrumb extends LitElement {
+  /**
+   * Array of breadcrumb items defining the navigation path.
+   */
+  @property({ type: Array }) items: BreadcrumbItem[] = [];
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--st-font-family, inherit);
+      }
+
+      nav {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        font-size: var(--st-font-size-sm, 0.875rem);
+      }
+
+      ol {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      li {
+        display: flex;
+        align-items: center;
+        color: var(--st-color-text-muted);
+      }
+
+      li:not(:last-child)::after {
+        content: "/";
+        margin: 0 var(--st-spacing-sm, 0.5rem);
+        color: var(--st-color-border);
+      }
+
+      a {
+        color: var(--st-color-text-muted);
+        text-decoration: none;
+        transition: color 0.2s ease;
+      }
+
+      a:hover {
+        color: var(--st-color-primary);
+        text-decoration: underline;
+      }
+
+      li:last-child {
+        color: var(--st-color-text);
+        font-weight: 500;
+      }
+    `
+  ];
+
+  render() {
+    if (!this.items || this.items.length === 0) {
+      return html``;
+    }
+
+    return html`
+      <nav aria-label="Breadcrumb">
+        <ol>
+          ${this.items.map((item, index) => {
+            const isLast = index === this.items.length - 1;
+            return html`
+              <li>
+                ${!isLast && item.href 
+                  ? html`<a href=${item.href}>${item.label}</a>` 
+                  : html`<span>${item.label}</span>`}
+              </li>
+            `;
+          })}
+        </ol>
+      </nav>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-breadcrumb': StBreadcrumb;
+  }
 }