@sondor-technology/sondor-components 1.0.8 → 1.0.10

package/src/components/toggle-group/toggle-group.ts

@@ -1,29 +1,32 @@
-import { LitElement, html, css, PropertyValues } from "lit";
-import { customElement, property, queryAssignedElements } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { resetStyles } from "../../styles/reset.js";
-import type { StToggleButton } from "./toggle-button.js";
-import "./toggle-button.js"; 
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, queryAssignedElements, state, query} from "lit/decorators.js";
+import {ifDefined} from "lit/directives/if-defined.js";
+import {classMap} from "lit/directives/class-map.js";
+import {resetStyles} from "../../styles/reset.js";
+import type {StToggleButton} from "./toggle-button.js";
+import "./toggle-button.js";
 
 @customElement("st-toggle-group")
 export class StToggleGroup extends LitElement {
   static formAssociated = true;
   private _internals: ElementInternals;
+  private _resizeObserver!: ResizeObserver;
 
-  @queryAssignedElements({ selector: "st-toggle-button" })
+  @query(".group-container") private _container!: HTMLElement;
+
+  @queryAssignedElements({selector: "st-toggle-button"})
   private _buttons!: StToggleButton[];
 
-  @property({ type: String, reflect: true }) name = "";
-  
-  // A comma-separated list of values if multiple=true, or a single value if false
-  @property({ type: String }) value = "";
-  
-  @property({ type: Boolean }) multiple = false;
-  @property({ type: Boolean, reflect: true }) disabled = false;
-  @property({ type: Boolean, reflect: true }) required = false;
-  
-  // ARIA Support
-  @property({ attribute: "aria-label" }) ariaLabel = "";
+  @property({type: String, reflect: true}) name = "";
+  @property({type: String}) value = "";
+  @property({type: Boolean}) multiple = false;
+  @property({type: Boolean, reflect: true}) disabled = false;
+  @property({type: Boolean, reflect: true}) required = false;
+  @property({attribute: "aria-label"}) ariaLabel = "";
+
+  // 🚀 NEW: State properties for dynamic shadows
+  @state() private _canScrollLeft = false;
+  @state() private _canScrollRight = false;
 
   private _defaultValue = "";
 
@@ -38,47 +41,146 @@ export class StToggleGroup extends LitElement {
     css`
       :host {
         display: inline-flex;
+        max-width: 100%;
+        min-width: 0;
+      }
+
+      .scroll-wrapper {
+        position: relative;
+        display: inline-flex;
+        max-width: 100%;
+        min-width: 0;
+      }
+
+      /* 🚀 FIX: Widened to 40px, boosted z-index to 10, and darkened the opacity */
+      .scroll-wrapper::before,
+      .scroll-wrapper::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 40px;
+        pointer-events: none;
+        z-index: 10;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+      }
+      
+      .scroll-wrapper::before {
+        left: 0;
+        background: linear-gradient(
+          to right,
+          var(--st-color-scroll-shadow) 0%,
+          transparent 100%
+        );
+        border-top-left-radius: var(--st-radius-md);
+        border-bottom-left-radius: var(--st-radius-md);
+      }
+
+      .scroll-wrapper::after {
+        right: 0;
+        background: linear-gradient(
+          to left,
+          var(--st-color-scroll-shadow) 0%,
+          transparent 100%
+        );
+        border-top-right-radius: var(--st-radius-md);
+        border-bottom-right-radius: var(--st-radius-md);
+      }
+
+      .scroll-wrapper.can-scroll-left::before {
+        opacity: 1;
+      }
+
+      .scroll-wrapper.can-scroll-right::after {
+        opacity: 1;
+      }
+
+      /* 🚀 FIX: Dialed up to 0.5 for dark mode */
+      :host([data-theme="dark"]) .scroll-wrapper::before {
+        background: linear-gradient(to right, var(--st-color-overlay) 0%, transparent 100%);
+      }
+      :host([data-theme="dark"]) .scroll-wrapper::after {
+        background: linear-gradient(to left, var(--st-color-overlay) 0%, transparent 100%);
       }
 
       .group-container {
         display: inline-flex;
+        max-width: 100%;
+        min-width: 0;
         background-color: var(--st-color-border);
-        /* 🚀 FIX: This 1px gap perfectly acts as the inner border between children */
         gap: 1px;
         border: 1px solid var(--st-color-border);
         border-radius: var(--st-radius-md);
-        overflow: hidden; /* Clips the child buttons exactly to the border radius */
+
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+      }
+
+      .group-container::-webkit-scrollbar {
+        display: none;
+      }
+
+      ::slotted(*) {
+        flex-shrink: 0;
       }
 
       :host([disabled]) .group-container {
         opacity: 0.5;
         pointer-events: none;
       }
-    `
+    `,
   ];
 
   override firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     this._defaultValue = this.value;
+
+    // 🚀 NEW: Observe the container. If the user rotates their phone,
+    // we need to recalculate if shadows are still needed.
+    this._resizeObserver = new ResizeObserver(() => this._checkScroll());
+    if (this._container) {
+      this._resizeObserver.observe(this._container);
+    }
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+    }
   }
 
   override updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
-    
+
     if (changedProperties.has("value")) {
       this._internals.setFormValue(this.value || null);
       this._syncButtons();
       this._syncValidity();
     }
-    
+
     if (changedProperties.has("disabled")) {
-      this._buttons.forEach(btn => btn.disabled = this.disabled);
+      this._buttons.forEach((btn) => (btn.disabled = this.disabled));
     }
   }
 
+  // 🚀 NEW: Mathematically determine if we are at the edges of the scroll box
+  private _checkScroll = () => {
+    if (!this._container) return;
+    const {scrollLeft, scrollWidth, clientWidth} = this._container;
+
+    // Use a 1px buffer to prevent fractional pixel rounding errors on high-DPI screens
+    this._canScrollLeft = scrollLeft > 1;
+    this._canScrollRight = Math.ceil(scrollLeft + clientWidth) < scrollWidth - 1;
+  };
+
   private _syncButtons() {
     const values = this.multiple && this.value ? this.value.split(",") : [this.value];
-    this._buttons.forEach(btn => {
+    this._buttons.forEach((btn) => {
       btn.selected = values.includes(btn.value);
     });
   }
@@ -86,30 +188,31 @@ export class StToggleGroup extends LitElement {
   private _handleSlotChange() {
     this._syncButtons();
     if (this.disabled) {
-      this._buttons.forEach(btn => btn.disabled = true);
+      this._buttons.forEach((btn) => (btn.disabled = true));
     }
+    // Calculate shadows after slots render
+    setTimeout(() => this._checkScroll(), 50);
   }
 
-  private _handleToggle(e: CustomEvent<{ value: string }>) {
+  private _handleToggle(e: CustomEvent<{value: string}>) {
     e.stopPropagation();
     const toggledValue = e.detail.value;
 
     if (this.multiple) {
       let values = this.value ? this.value.split(",") : [];
       if (values.includes(toggledValue)) {
-        values = values.filter(v => v !== toggledValue); // Deselect
+        values = values.filter((v) => v !== toggledValue);
       } else {
-        values.push(toggledValue); // Select
+        values.push(toggledValue);
       }
       this.value = values.join(",");
     } else {
-      // Single select behavior (radio button style: clicking active doesn't deselect)
       if (this.value !== toggledValue) {
         this.value = toggledValue;
       }
     }
 
-    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
   }
 
   formResetCallback() {
@@ -118,24 +221,37 @@ export class StToggleGroup extends LitElement {
 
   private _syncValidity() {
     if (this.required && !this.value) {
-      this._internals.setValidity({ valueMissing: true }, "Please select an option.");
+      this._internals.setValidity({valueMissing: true}, "Please select an option.");
     } else {
       this._internals.setValidity({});
     }
   }
 
-  public checkValidity() { return this._internals.checkValidity(); }
-  public reportValidity() { return this._internals.reportValidity(); }
+  public checkValidity() {
+    return this._internals.checkValidity();
+  }
+  public reportValidity() {
+    return this._internals.reportValidity();
+  }
 
   render() {
+    const wrapperClasses = classMap({
+      "scroll-wrapper": true,
+      "can-scroll-left": this._canScrollLeft,
+      "can-scroll-right": this._canScrollRight,
+    });
+
     return html`
-      <div 
-        class="group-container" 
-        role="group" 
-        aria-label=${ifDefined(this.ariaLabel || undefined)}
-        aria-required=${this.required ? "true" : "false"}
-      >
-        <slot @slotchange=${this._handleSlotChange}></slot>
+      <div class=${wrapperClasses}>
+        <div
+          class="group-container"
+          role="group"
+          aria-label=${ifDefined(this.ariaLabel || undefined)}
+          aria-required=${this.required ? "true" : "false"}
+          @scroll=${this._checkScroll}
+        >
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </div>
       </div>
     `;
   }
@@ -145,4 +261,4 @@ declare global {
   interface HTMLElementTagNameMap {
     "st-toggle-group": StToggleGroup;
   }
-}
+}

package/src/components/tooltip/tooltip.ts

@@ -54,7 +54,7 @@ export class StTooltip extends LitElement {
           opacity 0.2s ease,
           transform 0.2s ease,
           visibility 0.2s;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        box-shadow: var(--st-shadow-md);
       }
 
       .tooltip-popup::before {
@@ -78,44 +78,44 @@ export class StTooltip extends LitElement {
          ========================================== */
 
       .variant-info {
-        background: var(--st-color-info, #3b82f6);
-        border-color: var(--st-color-info, #3b82f6);
-        color: var(--st-color-on-info, #ffffff);
+        background: var(--st-color-info);
+        border-color: var(--st-color-info);
+        color: var(--st-color-on-info);
       }
       .variant-info::before {
-        background: var(--st-color-info, #3b82f6);
-        border-color: var(--st-color-info, #3b82f6);
+        background: var(--st-color-info);
+        border-color: var(--st-color-info);
       }
 
       .variant-success {
-        background: var(--st-color-success, #16a34a);
-        border-color: var(--st-color-success, #16a34a);
-        color: var(--st-color-on-success, #ffffff);
+        background: var(--st-color-success);
+        border-color: var(--st-color-success);
+        color: var(--st-color-on-success);
       }
       .variant-success::before {
-        background: var(--st-color-success, #16a34a);
-        border-color: var(--st-color-success, #16a34a);
+        background: var(--st-color-success);
+        border-color: var(--st-color-success);
       }
 
       .variant-warning {
-        background: var(--st-color-warning, #f59e0b);
-        border-color: var(--st-color-warning, #f59e0b);
+        background: var(--st-color-warning);
+        border-color: var(--st-color-warning);
         /* Warning usually needs dark text for contrast */
-        color: var(--st-color-on-warning, #1e293b);
+        color: var(--st-color-on-warning);
       }
       .variant-warning::before {
-        background: var(--st-color-warning, #f59e0b);
-        border-color: var(--st-color-warning, #f59e0b);
+        background: var(--st-color-warning);
+        border-color: var(--st-color-warning);
       }
 
       .variant-danger {
-        background: var(--st-color-danger, #dc2626);
-        border-color: var(--st-color-danger, #dc2626);
-        color: var(--st-color-on-danger, #ffffff);
+        background: var(--st-color-danger);
+        border-color: var(--st-color-danger);
+        color: var(--st-color-on-danger);
       }
       .variant-danger::before {
-        background: var(--st-color-danger, #dc2626);
-        border-color: var(--st-color-danger, #dc2626);
+        background: var(--st-color-danger);
+        border-color: var(--st-color-danger);
       }
 
       /* ==========================================

package/src/components/vertical-nav/vertical-nav-group.ts

@@ -22,13 +22,13 @@ export class StNavGroup extends LitElement {
       button {
         display: flex;
         align-items: center;
-        gap: var(--st-spacing-sm, 8px);
+        gap: var(--st-spacing-sm);
         width: 100%;
         box-sizing: border-box;
         background: transparent;
         border: none;
         padding: var(--st-spacing-sm) var(--st-spacing-xl);
-        padding-left: calc(var(--st-spacing-xl, 24px) + (var(--nav-depth, 0) * 16px));
+        padding-left: calc(var(--st-spacing-xl) + (var(--nav-depth, 0) * 16px));
         color: var(--st-color-text);
         font-size: var(--st-font-size-sm);
         font-weight: var(--st-font-weight-semibold);
@@ -39,7 +39,7 @@ export class StNavGroup extends LitElement {
       }
 
       button:hover {
-        background-color: var(--st-color-surface-hover, rgba(0, 0, 0, 0.03));
+        background-color: var(--st-color-surface-hover);
       }
 
       button:focus-visible {

package/src/components/vertical-nav/vertical-nav-item.ts

@@ -19,11 +19,11 @@ export class StNavItem extends LitElement {
       a {
         display: flex;
         align-items: center;
-        gap: var(--st-spacing-sm, 8px);
+        gap: var(--st-spacing-sm);
         width: 100%;
         box-sizing: border-box;
         padding: 8px var(--st-spacing-xl);
-        padding-left: calc(var(--st-spacing-xl, 24px) + (var(--nav-depth, 0) * 16px));
+        padding-left: calc(var(--st-spacing-xl) + (var(--nav-depth, 0) * 16px));
         color: var(--st-color-text-muted);
         font-size: var(--st-font-size-sm);
         text-decoration: none;
@@ -37,7 +37,7 @@ export class StNavItem extends LitElement {
 
       a:hover {
         color: var(--st-color-text);
-        background-color: var(--st-color-surface-hover, rgba(0, 0, 0, 0.03));
+        background-color: var(--st-color-surface-hover);
       }
 
       a:focus-visible {
@@ -56,7 +56,7 @@ export class StNavItem extends LitElement {
         color: var(--st-color-primary);
         border-left-color: var(--st-color-primary);
         font-weight: var(--st-font-weight-bold);
-        background-color: var(--st-color-primary-light, rgba(98, 0, 238, 0.05));
+        background-color: var(--st-color-primary-light);
       }
     `,
   ];

package/src/components/video-embed/video-embed.ts

@@ -0,0 +1,162 @@
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+
+const ID_PATTERN = /^[\w-]+$/;
+
+/**
+ * Shows a poster and a play button, and only loads the video player (an iframe, which is heavy
+ * and sets third-party cookies) once someone presses play. Pages stay fast and visitors are not
+ * tracked before they choose to watch.
+ *
+ * Give it a `youtube` or `vimeo` id, or an `https` embed address in `src`. Slot your own poster
+ * as `<img slot="poster" alt="">`: no third-party request is made until play is pressed.
+ *
+ * Events: `st-play` (bubbles, composed) when the player is loaded.
+ */
+@customElement("st-video-embed")
+export class StVideoEmbed extends LitElement {
+  /** A YouTube video id. Uses the privacy-enhanced youtube-nocookie.com player. */
+  @property({type: String}) youtube = "";
+  /** A Vimeo video id. Asks Vimeo not to track the viewer. */
+  @property({type: String}) vimeo = "";
+  /** Any other player, as an https embed address. */
+  @property({type: String}) src = "";
+  /** Name of the video. Used for the play button and the player's accessible title. */
+  @property({type: String}) label = "Video";
+  @property({type: String}) ratio = "16/9";
+  /** True once the player has been loaded. Setting it to true loads the player. */
+  @property({type: Boolean, reflect: true}) playing = false;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+        overflow: hidden;
+        aspect-ratio: var(--_ratio, 16 / 9);
+        background: var(--st-color-surface-muted);
+        border-radius: var(--st-image-radius, var(--st-radius-md));
+      }
+
+      .facade {
+        position: relative;
+        display: grid;
+        place-items: center;
+        width: 100%;
+        height: 100%;
+        padding: 0;
+        border: 0;
+        background: none;
+        cursor: pointer;
+      }
+
+      ::slotted([slot="poster"]) {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .play {
+        position: relative;
+        display: grid;
+        place-items: center;
+        width: 4.5rem;
+        height: 4.5rem;
+        border-radius: 50%;
+        background: var(--st-color-primary);
+        color: var(--st-color-on-primary);
+        box-shadow: var(--st-shadow-lg);
+        transition: transform 0.2s ease;
+      }
+
+      .play svg {
+        width: 1.75rem;
+        height: 1.75rem;
+        margin-left: 0.2rem;
+        fill: currentColor;
+      }
+
+      .facade:hover .play {
+        transform: scale(1.08);
+      }
+
+      .facade:focus-visible {
+        outline: 3px solid var(--st-color-primary);
+        outline-offset: -3px;
+      }
+
+      iframe {
+        width: 100%;
+        height: 100%;
+        border: 0;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .play {
+          transition: none;
+        }
+      }
+    `,
+  ];
+
+  /** The player address, or an empty string when nothing valid was given. */
+  private get _playerUrl(): string {
+    if (this.youtube && ID_PATTERN.test(this.youtube)) {
+      return `https://www.youtube-nocookie.com/embed/${this.youtube}?autoplay=1&rel=0`;
+    }
+    if (this.vimeo && ID_PATTERN.test(this.vimeo)) {
+      return `https://player.vimeo.com/video/${this.vimeo}?autoplay=1&dnt=1`;
+    }
+    try {
+      const url = new URL(this.src); // no base: relative addresses must be rejected
+      return this.src && url.protocol === "https:" ? url.href : "";
+    } catch {
+      return "";
+    }
+  }
+
+  /** Loads the player. */
+  play() {
+    if (!this._playerUrl || this.playing) return;
+    this.playing = true;
+  }
+
+  protected updated(changed: PropertyValues<this>) {
+    if (this.ratio) this.style.setProperty("--_ratio", this.ratio);
+    if (changed.has("playing") && changed.get("playing") === false && this.playing) {
+      this.dispatchEvent(new CustomEvent("st-play", {bubbles: true, composed: true}));
+      this.renderRoot.querySelector("iframe")?.focus();
+    }
+  }
+
+  render() {
+    const url = this._playerUrl;
+    if (this.playing && url) {
+      return html`<iframe
+        src=${url}
+        title=${this.label}
+        allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
+        allowfullscreen
+        referrerpolicy="strict-origin-when-cross-origin"
+      ></iframe>`;
+    }
+    return html`
+      <button class="facade" type="button" ?disabled=${!url} aria-label=${`Play video: ${this.label}`} @click=${this.play}>
+        <slot name="poster"></slot>
+        <span class="play" aria-hidden="true">
+          <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
+        </span>
+      </button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-video-embed": StVideoEmbed;
+  }
+}