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

package/src/components/content-card/content-card.ts

@@ -1,134 +1,134 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-
-@customElement('st-content-card')
-export class StContentCard extends LitElement {
-  // Use href to align with native HTML web standards
-  @property({ type: String }) href?: string;
-  @property({ type: String }) target: '_blank' | '_self' = '_self';
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: block;
-        /* Ensures cards stretch to equal heights if placed in a flex/grid container */
-        height: 100%; 
-      }
-
-      .card {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        background-color: var(--st-color-surface);
-        border: 1px solid var(--st-color-border);
-        border-radius: var(--st-radius-md, 0.5rem);
-        overflow: hidden;
-        text-decoration: none;
-        color: inherit;
-        
-        /* Smooth transitions for the hover effects */
-        transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
-      }
-
-      /* ==========================================================
-         Hover Effects (Only applied if it is a link)
-         ========================================================== */
-      a.card {
-        cursor: pointer;
-      }
-
-      a.card:hover,
-      a.card:focus-visible {
-        outline: none;
-        border-color: var(--st-color-primary);
-        transform: translateY(-2px);
-        /* Subtle shadow to lift the card off the background */
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
-      }
-
-      /* Dark mode specific shadow adjustment */
-      :host-context([data-theme="dark"]) a.card:hover {
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-      }
-
-      /* ==========================================================
-         Internal Layout
-         ========================================================== */
-      .media {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        aspect-ratio: 16 / 9;
-        background-color: var(--st-color-bg);
-        border-bottom: 1px solid var(--st-color-border);
-        overflow: hidden;
-      }
-
-      /* Image formatting */
-      ::slotted(img[slot="media"]) {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
-      /* SVG formatting (for the icons we just created) */
-      ::slotted(svg[slot="media"]) {
-        width: 3rem;
-        height: 3rem;
-        color: var(--st-color-primary);
-      }
-
-      .content {
-        display: flex;
-        flex-direction: column;
-        padding: var(--st-spacing-md, 1.25rem);
-        gap: var(--st-spacing-sm, 0.5rem);
-        flex: 1;
-      }
-
-      .title {
-        font-weight: 600;
-        font-size: 1.125rem;
-        color: var(--st-color-text);
-        margin: 0;
-      }
-
-      .body {
-        color: var(--st-color-text-muted);
-        font-size: 0.875rem;
-        margin: 0;
-        line-height: 1.5;
-      }
-    `
-  ];
-
-  render() {
-    // 1. Define the inner content once to avoid duplication
-    const innerContent = html`
-      <div class="media">
-        <slot name="media"></slot>
-      </div>
-      <div class="content">
-        <div class="title">
-          <slot name="title"></slot>
-        </div>
-        <div class="body">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-
-    // 2. Conditionally wrap it in an anchor or a div
-    return this.href
-      ? html`<a href="${this.href}" target="${this.target}" class="card">${innerContent}</a>`
-      : html`<div class="card">${innerContent}</div>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'st-content-card': StContentCard;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+@customElement('st-content-card')
+export class StContentCard extends LitElement {
+  // Use href to align with native HTML web standards
+  @property({ type: String }) href?: string;
+  @property({ type: String }) target: '_blank' | '_self' = '_self';
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        /* Ensures cards stretch to equal heights if placed in a flex/grid container */
+        height: 100%; 
+      }
+
+      .card {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        background-color: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md, 0.5rem);
+        overflow: hidden;
+        text-decoration: none;
+        color: inherit;
+        
+        /* Smooth transitions for the hover effects */
+        transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+      }
+
+      /* ==========================================================
+         Hover Effects (Only applied if it is a link)
+         ========================================================== */
+      a.card {
+        cursor: pointer;
+      }
+
+      a.card:hover,
+      a.card:focus-visible {
+        outline: none;
+        border-color: var(--st-color-primary);
+        transform: translateY(-2px);
+        /* Subtle shadow to lift the card off the background */
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
+      }
+
+      /* Dark mode specific shadow adjustment */
+      :host-context([data-theme="dark"]) a.card:hover {
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+      }
+
+      /* ==========================================================
+         Internal Layout
+         ========================================================== */
+      .media {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        aspect-ratio: 16 / 9;
+        background-color: var(--st-color-bg);
+        border-bottom: 1px solid var(--st-color-border);
+        overflow: hidden;
+      }
+
+      /* Image formatting */
+      ::slotted(img[slot="media"]) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      /* SVG formatting (for the icons we just created) */
+      ::slotted(svg[slot="media"]) {
+        width: 3rem;
+        height: 3rem;
+        color: var(--st-color-primary);
+      }
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        padding: var(--st-spacing-md, 1.25rem);
+        gap: var(--st-spacing-sm, 0.5rem);
+        flex: 1;
+      }
+
+      .title {
+        font-weight: 600;
+        font-size: 1.125rem;
+        color: var(--st-color-text);
+        margin: 0;
+      }
+
+      .body {
+        color: var(--st-color-text-muted);
+        font-size: 0.875rem;
+        margin: 0;
+        line-height: 1.5;
+      }
+    `
+  ];
+
+  render() {
+    // 1. Define the inner content once to avoid duplication
+    const innerContent = html`
+      <div class="media">
+        <slot name="media"></slot>
+      </div>
+      <div class="content">
+        <div class="title">
+          <slot name="title"></slot>
+        </div>
+        <div class="body">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+
+    // 2. Conditionally wrap it in an anchor or a div
+    return this.href
+      ? html`<a href="${this.href}" target="${this.target}" class="card">${innerContent}</a>`
+      : html`<div class="card">${innerContent}</div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-content-card': StContentCard;
+  }
 }

package/src/components/divider/divider.ts

@@ -1,69 +1,69 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset';
-
-@customElement('st-divider')
-export class StDivider extends LitElement {
-  @property({ type: String, reflect: true }) direction: 'horizontal' | 'vertical' = 'horizontal';
-  @property({ type: String }) thickness = '1px';
-  @property({ type: String }) margin = '0';
-  @property({ type: String, reflect: true }) color: 'default' | 'primary' | 'border' = 'border';
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: block;
-        background-color: var(--divider-color, var(--st-color-border));
-        margin: var(--divider-margin, 0);
-      }
-
-      /* Horizontal Layout */
-      :host([direction="horizontal"]) {
-        width: 100%;
-        height: var(--divider-thickness, 1px);
-      }
-
-      /* Vertical Layout */
-      :host([direction="vertical"]) {
-        width: var(--divider-thickness, 1px);
-        height: 100%;
-        display: inline-block;
-        vertical-align: middle;
-      }
-
-      /* Color Variants */
-      :host([color="primary"]) {
-        background-color: var(--st-color-primary);
-      }
-      :host([color="default"]) {
-        background-color: var(--st-color-text);
-        opacity: 0.2;
-      }
-    `
-  ];
-
-  updated(changedProperties: Map<string, any>) {
-    super.updated(changedProperties);
-    
-    // Sync properties to CSS variables for dynamic adjustment
-    this.style.setProperty('--divider-thickness', this.thickness);
-    this.style.setProperty('--divider-margin', this.margin);
-  }
-
-  render() {
-    // Accessibility: Set role and aria-orientation
-    return html`
-      <div 
-        role="separator" 
-        aria-orientation="${this.direction === 'horizontal' ? 'horizontal' : 'vertical'}"
-      ></div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'st-divider': StDivider;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset';
+
+@customElement('st-divider')
+export class StDivider extends LitElement {
+  @property({ type: String, reflect: true }) direction: 'horizontal' | 'vertical' = 'horizontal';
+  @property({ type: String }) thickness = '1px';
+  @property({ type: String }) margin = '0';
+  @property({ type: String, reflect: true }) color: 'default' | 'primary' | 'border' = 'border';
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        background-color: var(--divider-color, var(--st-color-border));
+        margin: var(--divider-margin, 0);
+      }
+
+      /* Horizontal Layout */
+      :host([direction="horizontal"]) {
+        width: 100%;
+        height: var(--divider-thickness, 1px);
+      }
+
+      /* Vertical Layout */
+      :host([direction="vertical"]) {
+        width: var(--divider-thickness, 1px);
+        height: 100%;
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      /* Color Variants */
+      :host([color="primary"]) {
+        background-color: var(--st-color-primary);
+      }
+      :host([color="default"]) {
+        background-color: var(--st-color-text);
+        opacity: 0.2;
+      }
+    `
+  ];
+
+  updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    
+    // Sync properties to CSS variables for dynamic adjustment
+    this.style.setProperty('--divider-thickness', this.thickness);
+    this.style.setProperty('--divider-margin', this.margin);
+  }
+
+  render() {
+    // Accessibility: Set role and aria-orientation
+    return html`
+      <div 
+        role="separator" 
+        aria-orientation="${this.direction === 'horizontal' ? 'horizontal' : 'vertical'}"
+      ></div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-divider': StDivider;
+  }
 }