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

package/src/components/table/table.ts

@@ -1,154 +1,154 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-
-export type TableMode = 'horizontal' | 'vertical';
-
-export interface TableColumn {
-  header: string;
-  key: string;
-}
-
-@customElement('st-table')
-export class StTable extends LitElement {
-  @property({ type: Array }) columns: TableColumn[] = [];
-  @property({ type: Array }) data: Record<string, any>[] = [];
-  
-  @property({ type: String, reflect: true }) mode: TableMode = 'horizontal';
-  @property({ type: Boolean, reflect: true }) striped = false;
-  @property({ type: Boolean, reflect: true }) hoverable = false;
-  @property({ type: Boolean, reflect: true }) dense = false;
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: block;
-        width: 100%;
-      }
-
-      .table-wrapper {
-        width: 100%;
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-      }
-
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        text-align: left;
-        font-size: var(--st-font-size-base, 1rem);
-        color: var(--st-color-text);
-      }
-
-      th {
-        font-weight: 600;
-        padding: var(--st-spacing-md) var(--st-spacing-lg);
-        border-bottom: 2px solid var(--st-color-border);
-        color: var(--st-color-text-muted);
-        white-space: nowrap;
-      }
-
-      td {
-        padding: var(--st-spacing-md) var(--st-spacing-lg);
-        border-bottom: 1px solid var(--st-color-border);
-      }
-
-      /* Modifiers */
-      :host([dense]) th,
-      :host([dense]) td {
-        padding: var(--st-spacing-sm) var(--st-spacing-md);
-      }
-
-      :host([striped]) tbody tr:nth-of-type(odd) {
-        background-color: var(--st-color-surface-muted);
-      }
-
-      :host([hoverable]) tbody tr:hover {
-        background-color: var(--st-color-surface-hover);
-      }
-
-      /* ==========================================================
-         Vertical Mode (Responsive Stacked Cards)
-         ========================================================== */
-      :host([mode="vertical"]) table,
-      :host([mode="vertical"]) tbody,
-      :host([mode="vertical"]) tr,
-      :host([mode="vertical"]) td {
-        display: block;
-        width: 100%;
-      }
-
-      /* Visually hide header but keep for screen readers */
-      :host([mode="vertical"]) thead {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border: 0;
-      }
-
-      :host([mode="vertical"]) tr {
-        margin-bottom: var(--st-spacing-md);
-        border: 1px solid var(--st-color-border);
-        border-radius: var(--st-radius-md);
-        background-color: var(--st-color-surface);
-        overflow: hidden;
-      }
-
-      :host([mode="vertical"]) td {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-bottom: 1px solid var(--st-color-border);
-        text-align: right;
-      }
-
-      :host([mode="vertical"]) td:last-child {
-        border-bottom: none;
-      }
-
-      /* Inject the header name on the left */
-      :host([mode="vertical"]) td::before {
-        content: attr(data-label);
-        font-weight: 600;
-        text-align: left;
-        padding-right: var(--st-spacing-md);
-        color: var(--st-color-text-muted);
-      }
-    `
-  ];
-
-  render() {
-    return html`
-      <div class="table-wrapper">
-        <table>
-          <thead>
-            <tr>
-              ${this.columns.map(col => html`<th scope="col">${col.header}</th>`)}
-            </tr>
-          </thead>
-          <tbody>
-            ${this.data.map(row => html`
-              <tr>
-                ${this.columns.map(col => html`
-                  <td data-label=${col.header}>${row[col.key]}</td>
-                `)}
-              </tr>
-            `)}
-          </tbody>
-        </table>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'st-table': StTable;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+export type TableMode = 'horizontal' | 'vertical';
+
+export interface TableColumn {
+  header: string;
+  key: string;
+}
+
+@customElement('st-table')
+export class StTable extends LitElement {
+  @property({ type: Array }) columns: TableColumn[] = [];
+  @property({ type: Array }) data: Record<string, any>[] = [];
+  
+  @property({ type: String, reflect: true }) mode: TableMode = 'horizontal';
+  @property({ type: Boolean, reflect: true }) striped = false;
+  @property({ type: Boolean, reflect: true }) hoverable = false;
+  @property({ type: Boolean, reflect: true }) dense = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      .table-wrapper {
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        text-align: left;
+        font-size: var(--st-font-size-base, 1rem);
+        color: var(--st-color-text);
+      }
+
+      th {
+        font-weight: 600;
+        padding: var(--st-spacing-md) var(--st-spacing-lg);
+        border-bottom: 2px solid var(--st-color-border);
+        color: var(--st-color-text-muted);
+        white-space: nowrap;
+      }
+
+      td {
+        padding: var(--st-spacing-md) var(--st-spacing-lg);
+        border-bottom: 1px solid var(--st-color-border);
+      }
+
+      /* Modifiers */
+      :host([dense]) th,
+      :host([dense]) td {
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+      }
+
+      :host([striped]) tbody tr:nth-of-type(odd) {
+        background-color: var(--st-color-surface-muted);
+      }
+
+      :host([hoverable]) tbody tr:hover {
+        background-color: var(--st-color-surface-hover);
+      }
+
+      /* ==========================================================
+         Vertical Mode (Responsive Stacked Cards)
+         ========================================================== */
+      :host([mode="vertical"]) table,
+      :host([mode="vertical"]) tbody,
+      :host([mode="vertical"]) tr,
+      :host([mode="vertical"]) td {
+        display: block;
+        width: 100%;
+      }
+
+      /* Visually hide header but keep for screen readers */
+      :host([mode="vertical"]) thead {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+      }
+
+      :host([mode="vertical"]) tr {
+        margin-bottom: var(--st-spacing-md);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        background-color: var(--st-color-surface);
+        overflow: hidden;
+      }
+
+      :host([mode="vertical"]) td {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid var(--st-color-border);
+        text-align: right;
+      }
+
+      :host([mode="vertical"]) td:last-child {
+        border-bottom: none;
+      }
+
+      /* Inject the header name on the left */
+      :host([mode="vertical"]) td::before {
+        content: attr(data-label);
+        font-weight: 600;
+        text-align: left;
+        padding-right: var(--st-spacing-md);
+        color: var(--st-color-text-muted);
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <div class="table-wrapper">
+        <table>
+          <thead>
+            <tr>
+              ${this.columns.map(col => html`<th scope="col">${col.header}</th>`)}
+            </tr>
+          </thead>
+          <tbody>
+            ${this.data.map(row => html`
+              <tr>
+                ${this.columns.map(col => html`
+                  <td data-label=${col.header}>${row[col.key]}</td>
+                `)}
+              </tr>
+            `)}
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-table': StTable;
+  }
 }

package/src/components/tabs/tab-panel.ts

@@ -1,31 +1,31 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-
-@customElement('st-tab-panel')
-export class StTabPanel extends LitElement {
-  @property({ type: String, reflect: true }) name = '';
-  @property({ type: Boolean, reflect: true }) active = false;
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: block;
-        padding: var(--st-spacing-md) 0;
-      }
-
-      :host(:not([active])) {
-        display: none;
-      }
-    `
-  ];
-
-  render() {
-    return html`
-      <div role="tabpanel" aria-hidden=${this.active ? 'false' : 'true'}>
-        <slot></slot>
-      </div>
-    `;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+@customElement('st-tab-panel')
+export class StTabPanel extends LitElement {
+  @property({ type: String, reflect: true }) name = '';
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        padding: var(--st-spacing-md) 0;
+      }
+
+      :host(:not([active])) {
+        display: none;
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <div role="tabpanel" aria-hidden=${this.active ? 'false' : 'true'}>
+        <slot></slot>
+      </div>
+    `;
+  }
 }

package/src/components/tabs/tab.ts

@@ -1,77 +1,77 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-
-@customElement('st-tab')
-export class StTab extends LitElement {
-  @property({ type: String, reflect: true }) panel = '';
-  @property({ type: Boolean, reflect: true }) active = false;
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: inline-block;
-      }
-
-      button {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--st-spacing-sm);
-        background: transparent;
-        border: none;
-        border-bottom: 2px solid transparent;
-        padding: var(--st-spacing-sm) var(--st-spacing-md);
-        color: var(--st-color-text-muted);
-        font-size: var(--st-font-size-sm);
-        font-weight: var(--st-font-weight-medium);
-        cursor: pointer;
-        transition: all 0.2s ease;
-        white-space: nowrap;
-      }
-
-      button:hover {
-        color: var(--st-color-text);
-      }
-
-      button:focus-visible {
-        outline: none;
-        background-color: var(--st-color-surface);
-        border-radius: 4px 4px 0 0;
-      }
-
-      /* Active State */
-      :host([active]) button {
-        color: var(--st-color-primary);
-        border-bottom-color: var(--st-color-primary);
-      }
-
-      ::slotted(svg) {
-        width: 1.125rem;
-        height: 1.125rem;
-        fill: currentColor;
-      }
-    `
-  ];
-
-  private _handleClick() {
-    this.dispatchEvent(new CustomEvent('st-tab-select', {
-      detail: { panel: this.panel },
-      bubbles: true,
-      composed: true
-    }));
-  }
-
-  render() {
-    return html`
-      <button 
-        role="tab" 
-        aria-selected=${this.active ? 'true' : 'false'}
-        tabindex=${this.active ? '0' : '-1'}
-        @click=${this._handleClick}
-      >
-        <slot></slot>
-      </button>
-    `;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+@customElement('st-tab')
+export class StTab extends LitElement {
+  @property({ type: String, reflect: true }) panel = '';
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-block;
+      }
+
+      button {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        background: transparent;
+        border: none;
+        border-bottom: 2px solid transparent;
+        padding: var(--st-spacing-sm) var(--st-spacing-md);
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-medium);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        white-space: nowrap;
+      }
+
+      button:hover {
+        color: var(--st-color-text);
+      }
+
+      button:focus-visible {
+        outline: none;
+        background-color: var(--st-color-surface);
+        border-radius: 4px 4px 0 0;
+      }
+
+      /* Active State */
+      :host([active]) button {
+        color: var(--st-color-primary);
+        border-bottom-color: var(--st-color-primary);
+      }
+
+      ::slotted(svg) {
+        width: 1.125rem;
+        height: 1.125rem;
+        fill: currentColor;
+      }
+    `
+  ];
+
+  private _handleClick() {
+    this.dispatchEvent(new CustomEvent('st-tab-select', {
+      detail: { panel: this.panel },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  render() {
+    return html`
+      <button 
+        role="tab" 
+        aria-selected=${this.active ? 'true' : 'false'}
+        tabindex=${this.active ? '0' : '-1'}
+        @click=${this._handleClick}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
 }