@sondor-technology/sondor-components 1.0.9 → 1.0.10

package/src/components/context-menu/context-menu.ts

@@ -0,0 +1,426 @@
+import {LitElement, html, css, nothing} from "lit";
+import {customElement, property, query, state} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import "../icon/icon.js";
+
+export interface MenuItem {
+  /** Text shown for the item. Omit for a separator. */
+  label?: string;
+  /** Identifier returned in `st-menu-select`. Defaults to the label. */
+  value?: string;
+  icon?: string;
+  /** Right-aligned hint such as "Ctrl+C" (display only). */
+  shortcut?: string;
+  disabled?: boolean;
+  /** Styles the item as destructive, e.g. Delete. */
+  danger?: boolean;
+  /** Turns the item into a checkbox item. Update `items` in response to `st-menu-select`. */
+  checked?: boolean;
+  /** Keeps the menu open after selecting, e.g. for toggles. */
+  keepOpen?: boolean;
+  /** Renders a divider line instead of an item. */
+  separator?: boolean;
+}
+
+export type MenuTrigger = "contextmenu" | "click" | "manual";
+
+const VIEWPORT_MARGIN = 8;
+
+/**
+ * A reusable menu styled like a native right-click menu. It renders in the top layer, so it is
+ * never clipped by scrolling containers, flips to stay on screen, and is fully keyboard
+ * operable (arrows, Home/End, type-ahead, Enter/Space, Escape).
+ *
+ * Opening: wrap an element in it (default trigger is right-click, which also covers the
+ * keyboard Menu key and Shift+F10), or call `show(x, y, context)` / `showAt(element, context)`
+ * with `trigger="manual"`.
+ *
+ * Events (bubble, composed): `st-menu-open`, `st-menu-close`, and `st-menu-select` with
+ * `{ item, value, context }`.
+ */
+@customElement("st-context-menu")
+export class StContextMenu extends LitElement {
+  @property({type: Array}) items: MenuItem[] = [];
+  @property({type: String}) trigger: MenuTrigger = "contextmenu";
+  /** Accessible name of the menu. */
+  @property({type: String}) label = "Actions";
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  @state() private _open = false;
+  @state() private _active = -1;
+
+  @query("[popover]") private _menu!: HTMLElement;
+
+  private _context: unknown;
+  private _returnFocus: HTMLElement | null = null;
+  private _clicked: HTMLElement | null = null;
+  private _typeahead = "";
+  private _typeaheadTimer?: number;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: contents;
+      }
+
+      [popover] {
+        position: fixed;
+        inset: auto;
+        margin: 0;
+        min-width: 12rem;
+        max-width: min(24rem, calc(100vw - 16px));
+        max-height: calc(100vh - 16px);
+        overflow-y: auto;
+        padding: var(--st-spacing-xs);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        background: var(--st-color-surface);
+        color: var(--st-color-text);
+        box-shadow: var(--st-shadow-lg);
+        font-size: var(--st-font-size-sm);
+      }
+
+      @media (prefers-reduced-motion: no-preference) {
+        [popover]:popover-open {
+          animation: st-menu-in 0.1s ease-out;
+        }
+        @keyframes st-menu-in {
+          from {
+            opacity: 0;
+            transform: scale(0.97);
+          }
+        }
+      }
+
+      .item {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        width: 100%;
+        padding: var(--st-spacing-xs) var(--st-spacing-sm);
+        border: 0;
+        border-radius: var(--st-radius-sm);
+        background: none;
+        color: inherit;
+        font: inherit;
+        text-align: left;
+        cursor: default;
+      }
+
+      .item:hover:not(:disabled),
+      .item:focus-visible {
+        outline: none;
+        background: var(--st-color-primary-bg);
+        color: var(--st-color-primary-text);
+      }
+
+      .item:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .item.danger {
+        color: var(--st-color-error-text);
+      }
+
+      .item.danger:hover:not(:disabled),
+      .item.danger:focus-visible {
+        background: var(--st-color-error-bg);
+        color: var(--st-color-error-text);
+      }
+
+      .lead {
+        display: inline-flex;
+        flex-shrink: 0;
+        width: 1.25rem;
+        justify-content: center;
+      }
+
+      .label {
+        flex: 1;
+        white-space: nowrap;
+      }
+
+      .shortcut {
+        padding-left: var(--st-spacing-lg);
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-xs);
+      }
+
+      .separator {
+        height: 1px;
+        margin: var(--st-spacing-xs) calc(var(--st-spacing-xs) * -1);
+        background: var(--st-color-border);
+      }
+    `,
+  ];
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("contextmenu", this._onContextMenu);
+    this.addEventListener("click", this._onTriggerClick);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener("contextmenu", this._onContextMenu);
+    this.removeEventListener("click", this._onTriggerClick);
+    this._listen(false);
+    super.disconnectedCallback();
+  }
+
+  /** True while the menu is showing. */
+  get isOpen() {
+    return this._open;
+  }
+
+  private _onContextMenu = (e: MouseEvent) => {
+    if (this.trigger !== "contextmenu" || this.disabled) return;
+    // Let the native menu through on text inputs so users keep copy/paste.
+    const target = e.composedPath()[0] as HTMLElement;
+    if (target?.closest?.("input, textarea, [contenteditable]")) return;
+    e.preventDefault();
+    // Some browsers don't focus a button on right-click, so remember what was clicked.
+    this._clicked = (target?.closest?.("button, a[href], [tabindex]") as HTMLElement | null) ?? null;
+    this.show(e.clientX, e.clientY);
+  };
+
+  private _onTriggerClick = (e: MouseEvent) => {
+    if (this.trigger !== "click" || this.disabled || this._menu?.contains(e.target as Node)) return;
+    this.showAt(this);
+  };
+
+  /** Opens the menu at viewport coordinates. `context` is echoed back in `st-menu-select`. */
+  show(x: number, y: number, context?: unknown) {
+    this._show(x, y, context);
+  }
+
+  private _show(x: number, y: number, context?: unknown, flipY?: number) {
+    if (!this.items.length || this.disabled) return;
+    this._context = context;
+    const focused = this._activeElement();
+    this._returnFocus = focused && focused !== document.body ? focused : this._clicked;
+    this._clicked = null;
+    this._open = true;
+    this.updateComplete.then(() => {
+      const menu = this._menu;
+      if (!menu) return;
+      if (!menu.matches(":popover-open")) menu.showPopover();
+      this._place(x, y, flipY);
+      this._listen(true);
+      this._focusItem(this._nextEnabled(-1, 1));
+      this.dispatchEvent(
+        new CustomEvent("st-menu-open", {detail: {context}, bubbles: true, composed: true}),
+      );
+    });
+  }
+
+  /** Opens the menu below (or above, if there is no room) an element, e.g. a "more" button. */
+  showAt(anchor: HTMLElement, context?: unknown) {
+    const rect = anchor.getBoundingClientRect();
+    // Opens below the anchor, or above it when there is no room.
+    this._show(rect.left, rect.bottom + 4, context, rect.top - 4);
+  }
+
+  /** Closes the menu and restores focus to where it was before opening. */
+  hide() {
+    if (this._menu?.matches(":popover-open")) this._menu.hidePopover();
+    else this._afterClose();
+  }
+
+  private _activeElement(): HTMLElement | null {
+    let el = document.activeElement as HTMLElement | null;
+    while (el?.shadowRoot?.activeElement) el = el.shadowRoot.activeElement as HTMLElement;
+    return el;
+  }
+
+  private _place(x: number, y: number, flipY?: number) {
+    const menu = this._menu;
+    if (!menu) return;
+    // Layout size, so the opening scale animation does not skew the measurement.
+    const {offsetWidth: width, offsetHeight: height} = menu;
+    const maxLeft = window.innerWidth - width - VIEWPORT_MARGIN;
+    const maxTop = window.innerHeight - height - VIEWPORT_MARGIN;
+    const left = x > maxLeft ? Math.max(VIEWPORT_MARGIN, x - width) : x;
+    let top = y;
+    if (y > maxTop) top = flipY !== undefined ? flipY - height : y - height;
+    top = Math.min(Math.max(VIEWPORT_MARGIN, top), Math.max(VIEWPORT_MARGIN, maxTop));
+    menu.style.left = `${Math.max(VIEWPORT_MARGIN, left)}px`;
+    menu.style.top = `${top}px`;
+  }
+
+  /**
+   * Light dismiss is handled here rather than by popover="auto", because browsers that fire
+   * contextmenu on mouse-down (macOS, Linux) would close an auto popover on the mouse-up.
+   */
+  private _listen(on: boolean) {
+    const method = on ? "addEventListener" : "removeEventListener";
+    window[method]("resize", this._closeOnLayoutChange);
+    window[method]("scroll", this._closeOnLayoutChange, true);
+    window[method]("blur", this._dismiss);
+    document[method]("pointerdown", this._onOutsidePointer as EventListener, true);
+    document[method]("keydown", this._onEscape as EventListener, true);
+  }
+
+  private _dismiss = () => this.hide();
+
+  private _onOutsidePointer = (e: PointerEvent) => {
+    if (!e.composedPath().includes(this._menu)) this.hide();
+  };
+
+  private _onEscape = (e: KeyboardEvent) => {
+    if (e.key !== "Escape") return;
+    e.stopPropagation();
+    this.hide();
+  };
+
+  private _closeOnLayoutChange = (e: Event) => {
+    // Scrolling inside the menu itself must not dismiss it.
+    if (e.target instanceof Node && this._menu?.contains(e.target)) return;
+    this.hide();
+  };
+
+  private _onToggle = (e: Event) => {
+    const state = (e as ToggleEvent).newState;
+    if (state === "closed") this._afterClose();
+  };
+
+  private _afterClose() {
+    if (!this._open) return;
+    this._open = false;
+    this._active = -1;
+    this._listen(false);
+    this._returnFocus?.focus?.();
+    this._returnFocus = null;
+    this.dispatchEvent(
+      new CustomEvent("st-menu-close", {detail: {context: this._context}, bubbles: true, composed: true}),
+    );
+  }
+
+  private _isFocusable(item: MenuItem) {
+    return !item.separator && !item.disabled;
+  }
+
+  private _nextEnabled(from: number, step: 1 | -1): number {
+    const n = this.items.length;
+    for (let i = 1; i <= n; i++) {
+      const index = (((from + step * i) % n) + n) % n;
+      if (this._isFocusable(this.items[index])) return index;
+    }
+    return -1;
+  }
+
+  private _focusItem(index: number) {
+    if (index < 0) return;
+    this._active = index;
+    this.updateComplete.then(() => {
+      this.renderRoot.querySelector<HTMLElement>(`[data-index="${index}"]`)?.focus();
+    });
+  }
+
+  private _onKeydown(e: KeyboardEvent) {
+    const last = this.items.length - 1;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        this._focusItem(this._nextEnabled(this._active, 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        this._focusItem(this._nextEnabled(this._active < 0 ? 0 : this._active, -1));
+        break;
+      case "Home":
+        e.preventDefault();
+        this._focusItem(this._nextEnabled(-1, 1));
+        break;
+      case "End":
+        e.preventDefault();
+        this._focusItem(this._nextEnabled(last + 1, -1));
+        break;
+      case "Tab":
+        this.hide();
+        break;
+      default:
+        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) this._typeaheadSearch(e.key);
+    }
+  }
+
+  private _typeaheadSearch(char: string) {
+    window.clearTimeout(this._typeaheadTimer);
+    this._typeahead += char.toLowerCase();
+    this._typeaheadTimer = window.setTimeout(() => (this._typeahead = ""), 600);
+    const start = this._typeahead.length === 1 ? this._active : this._active - 1;
+    const n = this.items.length;
+    for (let i = 1; i <= n; i++) {
+      const index = (((start + i) % n) + n) % n;
+      const item = this.items[index];
+      if (this._isFocusable(item) && item.label?.toLowerCase().startsWith(this._typeahead)) {
+        this._focusItem(index);
+        return;
+      }
+    }
+  }
+
+  private _select(item: MenuItem) {
+    if (!this._isFocusable(item)) return;
+    this.dispatchEvent(
+      new CustomEvent("st-menu-select", {
+        detail: {item, value: item.value ?? item.label, context: this._context},
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    if (!item.keepOpen) this.hide();
+  }
+
+  private _renderItem(item: MenuItem, index: number) {
+    if (item.separator) return html`<div class="separator" role="separator"></div>`;
+    const checkable = item.checked !== undefined;
+    return html`
+      <button
+        class="item ${item.danger ? "danger" : ""}"
+        type="button"
+        role=${checkable ? "menuitemcheckbox" : "menuitem"}
+        aria-checked=${checkable ? String(item.checked) : nothing}
+        ?disabled=${item.disabled}
+        tabindex=${index === this._active ? "0" : "-1"}
+        data-index=${index}
+        @click=${() => this._select(item)}
+        @pointerenter=${(e: PointerEvent) => !item.disabled && (e.currentTarget as HTMLElement).focus()}
+      >
+        <span class="lead" aria-hidden="true">
+          ${checkable
+            ? item.checked
+              ? html`<st-icon name="check" size="sm"></st-icon>`
+              : nothing
+            : item.icon
+              ? html`<st-icon name=${item.icon} size="sm"></st-icon>`
+              : nothing}
+        </span>
+        <span class="label">${item.label}</span>
+        ${item.shortcut ? html`<span class="shortcut" aria-hidden="true">${item.shortcut}</span>` : nothing}
+      </button>
+    `;
+  }
+
+  render() {
+    return html`
+      <slot></slot>
+      <div
+        popover="manual"
+        role="menu"
+        aria-label=${this.label}
+        @toggle=${this._onToggle}
+        @keydown=${this._onKeydown}
+      >
+        ${this._open ? this.items.map((item, index) => this._renderItem(item, index)) : nothing}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-context-menu": StContextMenu;
+  }
+}

package/src/components/cron-builder/cron-builder.ts

@@ -2,6 +2,9 @@ import {LitElement, html, css, PropertyValues} from "lit";
 import {customElement, property, state} from "lit/decorators.js";
 import {resetStyles} from "../../styles/reset";
 
+/** Reads `.value` from a custom form element event target. */
+const targetValue = <T = string>(e: Event) => (e.target as unknown as {value: T}).value;
+
 @customElement("st-cron-builder")
 export class StCronBuilder extends LitElement {
   static formAssociated = true;
@@ -42,7 +45,7 @@ export class StCronBuilder extends LitElement {
         border: 1px solid var(--st-color-border);
         border-radius: var(--st-radius-lg);
         padding: var(--st-spacing-lg);
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        box-shadow: var(--st-shadow-sm);
       }
 
       .builder-grid {
@@ -81,7 +84,7 @@ export class StCronBuilder extends LitElement {
         text-align: center;
         font-size: 11px;
         padding: 4px;
-        background: var(--st-color-surface-muted, #f1f5f9);
+        background: var(--st-color-surface-muted);
         border-radius: var(--st-radius-sm);
         color: var(--st-color-text-muted);
         border: 1px solid var(--st-color-border);
@@ -89,25 +92,25 @@ export class StCronBuilder extends LitElement {
       }
 
       .segment-badge.active {
-        background: var(--st-color-primary, #eff6ff);
+        background: var(--st-color-primary);
         color: var(--st-color-surface);
         border-color: var(--st-color-primary);
         font-weight: 600;
       }
 
       .success-text {
-        color: var(--st-color-success, #16a34a);
+        color: var(--st-color-success);
       }
 
       .error-text {
-        color: var(--st-color-danger, #dc2626);
+        color: var(--st-color-danger);
         font-weight: 500;
       }
 
       .output-preview {
         margin-top: var(--st-spacing-md);
         padding: var(--st-spacing-md);
-        background: var(--st-color-surface-muted, #f8fafc);
+        background: var(--st-color-surface-muted);
         border-radius: var(--st-radius-md);
         border: 1px dashed var(--st-color-border);
       }
@@ -357,8 +360,8 @@ export class StCronBuilder extends LitElement {
     }
   }
 
-  private _handleCustomCronInput(e: any) {
-    const inputEl = e.target;
+  private _handleCustomCronInput(e: Event) {
+    const inputEl = e.target as HTMLInputElement;
     const sanitized = inputEl.value.replace(/[^0-9A-Za-z\s\*\/\-\,]/g, "");
 
     if (inputEl.value !== sanitized) {
@@ -369,8 +372,8 @@ export class StCronBuilder extends LitElement {
     this._generateOutput();
   }
 
-  private _handleFrequencyChange(e: any) {
-    this._frequency = e.target.value;
+  private _handleFrequencyChange(e: Event) {
+    this._frequency = targetValue(e);
     this._generateOutput();
   }
 
@@ -422,8 +425,8 @@ export class StCronBuilder extends LitElement {
                 <st-toggle-group
                   multiple
                   .value=${this._days}
-                  @change=${(e: any) => {
-                    this._days = e.target.value;
+                  @change=${(e: Event) => {
+                    this._days = targetValue(e);
                     this._generateOutput();
                   }}
                 >
@@ -445,8 +448,8 @@ export class StCronBuilder extends LitElement {
                   label="Run on day of month"
                   .options=${monthDayOptions}
                   .value=${this._monthDay}
-                  @change=${(e: any) => {
-                    this._monthDay = e.target.value;
+                  @change=${(e: Event) => {
+                    this._monthDay = targetValue(e);
                     this._generateOutput();
                   }}
                 ></st-select>
@@ -459,8 +462,8 @@ export class StCronBuilder extends LitElement {
                 <label>Execution Date</label>
                 <st-calendar
                   .value=${this._date}
-                  @change=${(e: any) => {
-                    this._date = e.target.value;
+                  @change=${(e: Event) => {
+                    this._date = targetValue(e);
                     this._generateOutput();
                   }}
                 ></st-calendar>
@@ -504,8 +507,8 @@ export class StCronBuilder extends LitElement {
                 <st-time-picker
                   label="Execution Time"
                   .value=${this._time}
-                  @change=${(e: any) => {
-                    this._time = e.target.value;
+                  @change=${(e: Event) => {
+                    this._time = targetValue(e);
                     this._generateOutput();
                   }}
                 ></st-time-picker>

package/src/components/cta/cta.ts

@@ -0,0 +1,64 @@
+import {html, css} from "lit";
+import {customElement, state} from "lit/decorators.js";
+import {StSection} from "../section/section.js";
+
+/**
+ * A closing call to action: one clear message and the buttons that act on it. Highlighted in the
+ * accent colour by default; set `tone` to change that.
+ *
+ * Slots: `eyebrow`, `title`, `lead`, `actions` (buttons) and the default slot for a short note
+ * under the buttons.
+ */
+@customElement("st-cta")
+export class StCta extends StSection {
+  @state() private _hasActions = false;
+
+  constructor() {
+    super();
+    this.tone = "accent";
+    this.width = "md";
+  }
+
+  static styles = [
+    ...StSection.styles,
+    css`
+      .header {
+        margin-bottom: var(--st-spacing-lg);
+      }
+
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--st-spacing-md);
+        justify-content: center;
+      }
+
+      .note {
+        margin-top: var(--st-spacing-md);
+        text-align: center;
+        font-size: var(--st-font-size-sm);
+      }
+    `,
+  ];
+
+  render() {
+    return this.frame(
+      html`
+        <div class="actions" ?hidden=${!this._hasActions}>
+          <slot
+            name="actions"
+            @slotchange=${(e: Event) =>
+              (this._hasActions = (e.target as HTMLSlotElement).assignedNodes().length > 0)}
+          ></slot>
+        </div>
+        <div class="note"><slot></slot></div>
+      `,
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-cta": StCta;
+  }
+}

package/src/components/drawer/drawer.ts

@@ -37,7 +37,7 @@ export class StDrawer extends LitElement {
         left: 0;
         width: 100vw;
         height: 100vh;
-        background-color: rgba(0, 0, 0, 0.5);
+        background-color: var(--st-color-overlay);
         backdrop-filter: blur(2px);
         z-index: 1000;
         display: flex;
@@ -62,7 +62,7 @@ export class StDrawer extends LitElement {
         bottom: 0;
         width: var(--st-drawer-width, 320px);
         max-width: 90vw;
-        background-color: var(--st-color-surface, #ffffff);
+        background-color: var(--st-color-surface);
         display: flex;
         flex-direction: column;
         z-index: 1001;
@@ -79,7 +79,7 @@ export class StDrawer extends LitElement {
 
       :host([open]) .panel {
         visibility: visible;
-        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
+        box-shadow: var(--st-shadow-drawer);
       }
 
       /* Slide from Left */
@@ -105,7 +105,7 @@ export class StDrawer extends LitElement {
         align-items: center;
         justify-content: space-between;
         padding: var(--st-spacing-md) var(--st-spacing-lg);
-        border-bottom: 1px solid var(--st-color-border, #e2e8f0);
+        border-bottom: 1px solid var(--st-color-border);
       }
 
       .title {
@@ -125,12 +125,12 @@ export class StDrawer extends LitElement {
         display: flex;
         align-items: center;
         justify-content: center;
-        border-radius: var(--st-radius-sm, 0.375rem);
+        border-radius: var(--st-radius-sm);
       }
 
       .close-btn:hover {
         color: var(--st-color-text);
-        background-color: var(--st-color-surface-muted, #f1f5f9);
+        background-color: var(--st-color-surface-muted);
       }
 
       .close-btn svg {