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

package/src/components/checkbox/checkbox.ts

@@ -0,0 +1,238 @@
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, query} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+
+@customElement("st-checkbox")
+export class StCheckbox extends LitElement {
+  static formAssociated = true;
+  private _internals: ElementInternals;
+
+  @query("input") private _inputEl!: HTMLInputElement;
+
+  @property({type: String, reflect: true}) size: "sm" | "md" | "lg" = "md";
+  @property({type: String, reflect: true}) name = "";
+  // Checkboxes default to 'on' natively if no value is provided
+  @property({type: String}) value = "on";
+
+  @property({type: Boolean, reflect: true}) checked = false;
+  @property({type: Boolean, reflect: true}) indeterminate = false;
+
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) invalid = false;
+  @property({type: Boolean, reflect: true}) required = false;
+
+  @property({attribute: "aria-label"}) ariaLabel = "";
+
+constructor() {
+    super();
+    this._internals = this.attachInternals();
+
+    // 1. Trigger error state if the user clicks away and the field is invalid
+    this.addEventListener('focusout', () => {
+      this.invalid = !this._inputEl.validity.valid;
+    });
+
+    // 2. Trigger error state if the st-form tries to submit and fails
+    this.addEventListener('invalid', () => {
+      this.invalid = true;
+    });
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-block;
+        outline: none;
+        user-select: none;
+        --checkbox-size: 1.25rem;
+        --checkbox-icon-size: 0.875rem;
+      }
+
+      :host([size="sm"]) {
+        --checkbox-size: 1rem;
+        --checkbox-icon-size: 0.75rem;
+      }
+      :host([size="lg"]) {
+        --checkbox-size: 1.5rem;
+        --checkbox-icon-size: 1rem;
+      }
+
+      label {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: var(--st-spacing-sm);
+        cursor: pointer;
+        color: var(--st-color-text);
+        font-size: var(--st-font-size-base);
+      }
+
+      /* Visually hide the native input but keep it in the DOM for focus/screen readers */
+      input {
+        position: absolute;
+        width: var(--checkbox-size);
+        height: var(--checkbox-size);
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border-width: 0;
+      }
+
+      /* Custom Checkbox Box */
+      .control {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--checkbox-size);
+        height: var(--checkbox-size);
+        border: 1px solid var(--st-color-border);
+        border-radius: 4px;
+        background-color: var(--st-color-bg);
+        transition: all 0.2s ease;
+        flex-shrink: 0;
+        /* Aligns the box nicely with standard text line-height */
+        margin-top: 0.125rem;
+      }
+
+      /* Hover State */
+      label:hover .control {
+        border-color: var(--st-color-primary-hover);
+      }
+
+      /* Focus State */
+      input:focus-visible + .control {
+        box-shadow:
+          0 0 0 2px var(--st-color-bg),
+          0 0 0 4px var(--st-color-primary);
+      }
+
+      /* Checked & Indeterminate States */
+      :host([checked]) .control,
+      :host([indeterminate]) .control {
+        border-color: var(--st-color-primary);
+        background-color: var(--st-color-primary);
+      }
+
+      /* SVG Icons */
+      svg {
+        width: var(--checkbox-icon-size);
+        height: var(--checkbox-icon-size);
+        stroke: var(--st-white);
+        stroke-width: 3;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        fill: none;
+        opacity: 0;
+        transform: scale(0.5);
+        transition:
+          transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
+          opacity 0.2s ease;
+      }
+
+      /* Reveal Icons */
+      :host([checked]) svg.icon-check,
+      :host([indeterminate]) svg.icon-minus {
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      /* Disabled State */
+      :host([disabled]) {
+        pointer-events: none;
+      }
+      :host([disabled]) label {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      /* Invalid State */
+      :host([invalid]) .control {
+        border-color: var(--st-color-error);
+      }
+      :host([invalid]) input:focus-visible + .control {
+        box-shadow:
+          0 0 0 2px var(--st-color-bg),
+          0 0 0 4px var(--st-color-error);
+      }
+    `,
+  ];
+
+  override updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has("checked") || changedProperties.has("value")) {
+      // Form API: If checked, submit the value. If unchecked, submit null to remove it from FormData.
+      this._internals.setFormValue(this.checked ? this.value : null);
+      this._syncValidity();
+    }
+
+    if (changedProperties.has("required")) {
+      this._syncValidity();
+    }
+  }
+
+  private _syncValidity() {
+    if (!this._inputEl) return;
+    this._internals.setValidity(
+      this._inputEl.validity,
+      this._inputEl.validationMessage,
+      this._inputEl,
+    );
+  }
+
+  formResetCallback() {
+    this.checked = false;
+    this.indeterminate = false;
+    this._internals.setFormValue(null);
+    this.updateComplete.then(() => this._syncValidity());
+  }
+
+  private _handleChange(e: Event) {
+    e.stopPropagation();
+
+    if (this.disabled) return;
+
+    // Standard native behavior: clicking an indeterminate checkbox unsets the indeterminate state
+    if (this.indeterminate) {
+      this.indeterminate = false;
+    }
+
+    this.checked = this._inputEl.checked;
+    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+  }
+
+  render() {
+    return html`
+      <label>
+        <input
+          type="checkbox"
+          aria-label=${this.ariaLabel || ""}
+          .name=${this.name}
+          .value=${this.value}
+          .checked=${this.checked}
+          .indeterminate=${this.indeterminate}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          @change=${this._handleChange}
+        />
+        <div class="control">
+          <!-- Render both SVGs and use CSS to conditionally reveal them based on host attributes -->
+          ${this.indeterminate
+            ? html`<svg class="icon-minus" viewBox="0 0 24 24"><path d="M5 12h14"></path></svg>`
+            : html`<svg class="icon-check" viewBox="0 0 24 24">
+                <path d="M20 6L9 17l-5-5"></path>
+              </svg>`}
+        </div>
+        <span class="label"><slot></slot></span>
+      </label>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-checkbox": StCheckbox;
+  }
+}

package/src/components/code-block/code-block.ts

@@ -0,0 +1,257 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { resetStyles } from '../../styles/reset.js';
+
+import Prism from 'prismjs';
+import 'prismjs/components/prism-typescript.js';
+import 'prismjs/components/prism-javascript.js';
+import 'prismjs/components/prism-css.js';
+import 'prismjs/components/prism-json.js';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-csharp.js';
+
+interface CodeSnippet {
+  lang: string;
+  label: string;
+  rawCode: string;
+  highlightedCode: string;
+}
+
+@customElement('st-code-block')
+export class StCodeBlock extends LitElement {
+  // Fallback language if a template doesn't provide one
+  @property({ type: String }) language = 'typescript';
+  
+  @state() private _snippets: CodeSnippet[] = [];
+  @state() private _activeIndex = 0;
+  @state() private _copied = false;
+
+  @query('slot[name="raw"]') private _slot!: HTMLSlotElement;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        margin: var(--st-spacing-md) 0;
+        border-radius: 8px;
+        background-color: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        overflow: hidden;
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: rgba(0, 0, 0, 0.2);
+        border-bottom: 1px solid var(--st-color-border);
+        padding: 0 var(--st-spacing-md);
+        min-height: 2.5rem; /* 40px */
+      }
+
+      /* Single language label */
+      .language-label {
+        font-size: var(--st-font-size-xs);
+        color: var(--st-color-text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        font-weight: var(--st-font-weight-bold);
+      }
+
+      /* Multi-language Tabs */
+      .tabs {
+        display: flex;
+        gap: var(--st-spacing-md);
+        height: 100%;
+      }
+
+      .tab {
+        background: transparent;
+        border: none;
+        border-bottom: 2px solid transparent;
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-xs);
+        font-weight: var(--st-font-weight-medium);
+        padding: var(--st-spacing-xs) 0;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+
+      .tab:hover {
+        color: var(--st-color-text);
+      }
+
+      .tab.active {
+        color: var(--st-color-primary);
+        border-bottom-color: var(--st-color-primary);
+      }
+
+      /* Copy Button */
+      .copy-button {
+        background: transparent;
+        border: 1px solid transparent;
+        color: var(--st-color-text-muted);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-xs);
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: var(--st-font-size-xs);
+        transition: all 0.2s ease;
+        margin-left: auto; /* Pushes it to the right */
+      }
+
+      .copy-button:hover {
+        color: var(--st-color-text);
+        background-color: rgba(255, 255, 255, 0.05);
+      }
+
+      .copy-button svg {
+        width: 14px;
+        height: 14px;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .copy-button.copied {
+        color: var(--st-color-success);
+      }
+
+      pre {
+        margin: 0;
+        padding: var(--st-spacing-md);
+        overflow-x: auto;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        font-size: 0.875rem;
+        line-height: 1.5;
+        color: var(--st-color-text);
+      }
+
+      .raw-content {
+        display: none;
+      }
+
+      /* ==========================================================
+         Prism.js Theme Mapping (Space Grey / Purple Aesthetic)
+         ========================================================== */
+      .token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--st-color-text-muted); font-style: italic; }
+      .token.punctuation { color: #8b949e; }
+      .token.namespace { opacity: .7; }
+      .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #79c0ff; }
+      .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #a5d6ff; }
+      .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: var(--st-color-text); }
+      .token.atrule, .token.attr-value, .token.keyword { color: var(--st-color-primary); }
+      .token.function, .token.class-name { color: #d2a8ff; }
+      .token.regex, .token.important, .token.variable { color: #ffa657; }
+    `
+  ];
+
+  private _handleSlotChange() {
+    const nodes = this._slot.assignedNodes({ flatten: true });
+    
+    // Find ALL template tags passed into the slot
+    const templates = nodes.filter(n => n instanceof HTMLTemplateElement) as HTMLTemplateElement[];
+    
+    if (templates.length > 0) {
+      // Map over every template and parse its code and attributes
+      this._snippets = templates.map(template => {
+        const lang = template.getAttribute('data-lang') || this.language;
+        const label = template.getAttribute('data-label') || lang; // Fallback to lang if no label provided
+        const rawCode = this._dedent(template.innerHTML);
+        
+        const grammar = Prism.languages[lang] || Prism.languages.javascript;
+        const highlightedCode = Prism.highlight(rawCode, grammar, lang);
+        
+        return { lang, label, rawCode, highlightedCode };
+      });
+    } else {
+      // Fallback: If no template is used, process raw text just like before
+      const rawText = nodes.map(n => n.textContent).join('');
+      const rawCode = this._dedent(rawText);
+      
+      if (rawCode) {
+        const grammar = Prism.languages[this.language] || Prism.languages.javascript;
+        const highlightedCode = Prism.highlight(rawCode, grammar, this.language);
+        this._snippets = [{ lang: this.language, label: this.language, rawCode, highlightedCode }];
+      }
+    }
+    
+    // Reset to the first tab whenever new code is injected
+    this._activeIndex = 0;
+  }
+
+  private _dedent(text: string): string {
+    const lines = text.split('\n');
+    const minIndent = lines
+      .filter(line => line.trim().length > 0)
+      .reduce((min, line) => {
+        const indent = line.match(/^\s*/)?.[0].length || 0;
+        return Math.min(min, indent);
+      }, Infinity);
+
+    if (minIndent === Infinity || minIndent === 0) return text.trim();
+    return lines.map(line => line.slice(minIndent)).join('\n').trim();
+  }
+
+  private async _copyToClipboard() {
+    // Copy the code from the currently active tab
+    const activeSnippet = this._snippets[this._activeIndex];
+    if (!activeSnippet) return;
+    
+    try {
+      await navigator.clipboard.writeText(activeSnippet.rawCode);
+      this._copied = true;
+      setTimeout(() => { this._copied = false; }, 2000);
+    } catch (err) {
+      console.error('Failed to copy text: ', err);
+    }
+  }
+
+  render() {
+    const activeSnippet = this._snippets[this._activeIndex];
+
+    return html`
+      <div class="header">
+        ${this._snippets.length > 1 
+          ? html`
+              <div class="tabs">
+                ${this._snippets.map((snippet, index) => html`
+                  <button 
+                    class="tab ${index === this._activeIndex ? 'active' : ''}" 
+                    @click=${() => this._activeIndex = index}
+                  >
+                    ${snippet.label}
+                  </button>
+                `)}
+              </div>
+            ` 
+          : html`
+              <span class="language-label">${activeSnippet?.label || this.language}</span>
+            `
+        }
+        
+        <button class="copy-button ${this._copied ? 'copied' : ''}" @click=${this._copyToClipboard}>
+          ${this._copied 
+            ? html`<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg> Copied!`
+            : html`<svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> Copy`
+          }
+        </button>
+      </div>
+      
+      <!-- Render the currently active snippet -->
+      ${activeSnippet ? html`
+        <pre><code class="language-${activeSnippet.lang}">${unsafeHTML(activeSnippet.highlightedCode)}</code></pre>
+      ` : ''}
+      
+      <div class="raw-content">
+        <slot name="raw" @slotchange=${this._handleSlotChange}></slot>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +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;
+  }
+}

package/src/components/divider/divider.ts

@@ -0,0 +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;
+  }
+}