@sondor-technology/sondor-components 1.0.1-develop.13 → 1.0.1-develop.14

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

@@ -1,15 +1,15 @@
-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';
+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;
@@ -18,11 +18,11 @@ interface CodeSnippet {
   highlightedCode: string;
 }
 
-@customElement('st-code-block')
+@customElement("st-code-block")
 export class StCodeBlock extends LitElement {
   // Fallback language if a template doesn't provide one
-  @property({ type: String }) language = 'typescript';
-  
+  @property({type: String}) language = "typescript";
+
   @state() private _snippets: CodeSnippet[] = [];
   @state() private _activeIndex = 0;
   @state() private _copied = false;
@@ -36,7 +36,8 @@ export class StCodeBlock extends LitElement {
         display: block;
         margin: var(--st-spacing-md) 0;
         border-radius: 8px;
-        background-color: var(--st-color-surface);
+        /* 1. Lock background to a deep dark surface */
+        background-color: #161b22;
         border: 1px solid var(--st-color-border);
         overflow: hidden;
       }
@@ -45,8 +46,9 @@ export class StCodeBlock extends LitElement {
         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);
+        /* 2. Lock header to a slightly darker shade */
+        background-color: #0d1117;
+        border-bottom: 1px solid #30363d;
         padding: 0 var(--st-spacing-md);
         min-height: 2.5rem; /* 40px */
       }
@@ -54,7 +56,7 @@ export class StCodeBlock extends LitElement {
       /* Single language label */
       .language-label {
         font-size: var(--st-font-size-xs);
-        color: var(--st-color-text-muted);
+        color: #8b949e;
         text-transform: uppercase;
         letter-spacing: 0.05em;
         font-weight: var(--st-font-weight-bold);
@@ -71,7 +73,7 @@ export class StCodeBlock extends LitElement {
         background: transparent;
         border: none;
         border-bottom: 2px solid transparent;
-        color: var(--st-color-text-muted);
+        color: #8b949e;
         font-size: var(--st-font-size-xs);
         font-weight: var(--st-font-weight-medium);
         padding: var(--st-spacing-xs) 0;
@@ -80,19 +82,20 @@ export class StCodeBlock extends LitElement {
       }
 
       .tab:hover {
-        color: var(--st-color-text);
+        color: #c9d1d9;
       }
 
       .tab.active {
-        color: var(--st-color-primary);
-        border-bottom-color: var(--st-color-primary);
+        /* 3. Hardcode the active tab to a high-contrast blue instead of dynamic primary */
+        color: #79c0ff;
+        border-bottom-color: #79c0ff;
       }
 
       /* Copy Button */
       .copy-button {
         background: transparent;
         border: 1px solid transparent;
-        color: var(--st-color-text-muted);
+        color: #8b949e;
         cursor: pointer;
         display: flex;
         align-items: center;
@@ -105,8 +108,8 @@ export class StCodeBlock extends LitElement {
       }
 
       .copy-button:hover {
-        color: var(--st-color-text);
-        background-color: rgba(255, 255, 255, 0.05);
+        color: #c9d1d9;
+        background-color: rgba(255, 255, 255, 0.1);
       }
 
       .copy-button svg {
@@ -120,17 +123,20 @@ export class StCodeBlock extends LitElement {
       }
 
       .copy-button.copied {
-        color: var(--st-color-success);
+        color: #3fb950; /* High-contrast success green */
       }
 
       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-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);
+        /* 4. Ensure default text stays light */
+        color: #c9d1d9;
       }
 
       .raw-content {
@@ -140,76 +146,130 @@ export class StCodeBlock extends LitElement {
       /* ==========================================================
          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; }
-    `
+      .token.comment,
+      .token.prolog,
+      .token.doctype,
+      .token.cdata {
+        color: #8b949e;
+        font-style: italic;
+      }
+      .token.punctuation {
+        color: #8b949e;
+      }
+      .token.namespace {
+        opacity: 0.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;
+      }
+
+      /* Replaced var(--st-color-text) with #c9d1d9 */
+      .token.operator,
+      .token.entity,
+      .token.url,
+      .language-css .token.string,
+      .style .token.string {
+        color: #c9d1d9;
+      }
+
+      /* Replaced var(--st-color-primary) with #ff7b72 (High-contrast pink/red for keywords) */
+      .token.atrule,
+      .token.attr-value,
+      .token.keyword {
+        color: #ff7b72;
+      }
+
+      .token.function,
+      .token.class-name {
+        color: #d2a8ff;
+      }
+      .token.regex,
+      .token.important,
+      .token.variable {
+        color: #ffa657;
+      }
+    `,
   ];
 
   private _handleSlotChange() {
-    const nodes = this._slot.assignedNodes({ flatten: true });
-    
+    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[];
-    
+    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
+      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 };
+
+        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 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 }];
+        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 lines = text.split("\n");
     const minIndent = lines
-      .filter(line => line.trim().length > 0)
+      .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();
+    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);
+      setTimeout(() => {
+        this._copied = false;
+      }, 2000);
     } catch (err) {
-      console.error('Failed to copy text: ', err);
+      console.error("Failed to copy text: ", err);
     }
   }
 
@@ -218,37 +278,44 @@ export class StCodeBlock extends LitElement {
 
     return html`
       <div class="header">
-        ${this._snippets.length > 1 
+        ${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>
-                `)}
+                ${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`
-          }
+          : 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>
-      ` : ''}
-      
+      ${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>
@@ -260,4 +327,4 @@ declare global {
   interface HTMLElementTagNameMap {
     "st-code-block": StCodeBlock;
   }
-}
+}

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

@@ -1,10 +1,10 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.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';
 
@@ -13,7 +13,6 @@ export class StContentCard extends LitElement {
     css`
       :host {
         display: block;
-        /* Ensures cards stretch to equal heights if placed in a flex/grid container */
         height: 100%; 
       }
 
@@ -27,8 +26,6 @@ export class StContentCard extends LitElement {
         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;
       }
 
@@ -44,13 +41,11 @@ export class StContentCard extends LitElement {
         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);
+        /* 
+          Safari fix: WebKit ignores :host-context. 
+          Set --st-card-shadow-hover in your global dark mode CSS instead! 
+        */
+        box-shadow: var(--st-card-shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.05)); 
       }
 
       /* ==========================================================
@@ -66,14 +61,12 @@ export class StContentCard extends LitElement {
         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;
@@ -105,7 +98,6 @@ export class StContentCard extends LitElement {
   ];
 
   render() {
-    // 1. Define the inner content once to avoid duplication
     const innerContent = html`
       <div class="media">
         <slot name="media"></slot>
@@ -120,9 +112,11 @@ export class StContentCard extends LitElement {
       </div>
     `;
 
-    // 2. Conditionally wrap it in an anchor or a div
+    // 🚀 THE FIX: Conditionally apply security rel if opening in a new tab
+    const secureRel = this.target === '_blank' ? 'noopener noreferrer' : undefined;
+
     return this.href
-      ? html`<a href="${this.href}" target="${this.target}" class="card">${innerContent}</a>`
+      ? html`<a href="${this.href}" target="${this.target}" rel="${ifDefined(secureRel)}" class="card">${innerContent}</a>`
       : html`<div class="card">${innerContent}</div>`;
   }
 }

package/src/components/divider/divider.constants.ts

@@ -0,0 +1,5 @@
+export const dividerDirections = ['horizontal', 'vertical'] as const;
+export type DividerDirection = typeof dividerDirections[number];
+
+export const dividerColors = ['default', 'primary', 'border'] as const;
+export type DividerColor = typeof dividerColors[number];

package/src/components/divider/divider.ts

@@ -1,13 +1,14 @@
 import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { resetStyles } from '../../styles/reset.js';
+import { DividerColor, DividerDirection } from './divider.constants.js';
 
 @customElement('st-divider')
 export class StDivider extends LitElement {
-  @property({ type: String, reflect: true }) direction: 'horizontal' | 'vertical' = 'horizontal';
+  @property({ type: String, reflect: true }) direction: DividerDirection = 'horizontal';
   @property({ type: String }) thickness = '1px';
   @property({ type: String }) margin = '0';
-  @property({ type: String, reflect: true }) color: 'default' | 'primary' | 'border' = 'border';
+  @property({ type: String, reflect: true }) color: DividerColor = 'border';
 
   static styles = [
     resetStyles,
@@ -43,22 +44,32 @@ export class StDivider extends LitElement {
     `
   ];
 
+  connectedCallback() {
+    super.connectedCallback();
+    // Semantic role belongs on the host element
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'separator');
+    }
+  }
+
   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);
+    if (changedProperties.has('thickness') || changedProperties.has('margin')) {
+      this.style.setProperty('--divider-thickness', this.thickness);
+      this.style.setProperty('--divider-margin', this.margin);
+    }
+
+    // Keep native ARIA attributes perfectly synced with our Lit properties
+    if (changedProperties.has('direction')) {
+      this.setAttribute('aria-orientation', this.direction);
+    }
   }
 
   render() {
-    // Accessibility: Set role and aria-orientation
-    return html`
-      <div 
-        role="separator" 
-        aria-orientation="${this.direction === 'horizontal' ? 'horizontal' : 'vertical'}"
-      ></div>
-    `;
+    // The host element itself is the structural divider. No inner DOM bloat needed.
+    return html``;
   }
 }