@sondor-technology/sondor-components 1.0.8 → 1.0.10

package/dist/components/context-menu/context-menu.js

@@ -0,0 +1,414 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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";
+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 }`.
+ */
+let StContextMenu = class StContextMenu extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.trigger = "contextmenu";
+        /** Accessible name of the menu. */
+        this.label = "Actions";
+        this.disabled = false;
+        this._open = false;
+        this._active = -1;
+        this._returnFocus = null;
+        this._clicked = null;
+        this._typeahead = "";
+        this._onContextMenu = (e) => {
+            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];
+            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]") ?? null;
+            this.show(e.clientX, e.clientY);
+        };
+        this._onTriggerClick = (e) => {
+            if (this.trigger !== "click" || this.disabled || this._menu?.contains(e.target))
+                return;
+            this.showAt(this);
+        };
+        this._dismiss = () => this.hide();
+        this._onOutsidePointer = (e) => {
+            if (!e.composedPath().includes(this._menu))
+                this.hide();
+        };
+        this._onEscape = (e) => {
+            if (e.key !== "Escape")
+                return;
+            e.stopPropagation();
+            this.hide();
+        };
+        this._closeOnLayoutChange = (e) => {
+            // Scrolling inside the menu itself must not dismiss it.
+            if (e.target instanceof Node && this._menu?.contains(e.target))
+                return;
+            this.hide();
+        };
+        this._onToggle = (e) => {
+            const state = e.newState;
+            if (state === "closed")
+                this._afterClose();
+        };
+    }
+    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;
+    }
+    /** Opens the menu at viewport coordinates. `context` is echoed back in `st-menu-select`. */
+    show(x, y, context) {
+        this._show(x, y, context);
+    }
+    _show(x, y, context, flipY) {
+        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, context) {
+        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();
+    }
+    _activeElement() {
+        let el = document.activeElement;
+        while (el?.shadowRoot?.activeElement)
+            el = el.shadowRoot.activeElement;
+        return el;
+    }
+    _place(x, y, flipY) {
+        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.
+     */
+    _listen(on) {
+        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, true);
+        document[method]("keydown", this._onEscape, true);
+    }
+    _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 }));
+    }
+    _isFocusable(item) {
+        return !item.separator && !item.disabled;
+    }
+    _nextEnabled(from, step) {
+        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;
+    }
+    _focusItem(index) {
+        if (index < 0)
+            return;
+        this._active = index;
+        this.updateComplete.then(() => {
+            this.renderRoot.querySelector(`[data-index="${index}"]`)?.focus();
+        });
+    }
+    _onKeydown(e) {
+        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);
+        }
+    }
+    _typeaheadSearch(char) {
+        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;
+            }
+        }
+    }
+    _select(item) {
+        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();
+    }
+    _renderItem(item, index) {
+        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) => !item.disabled && e.currentTarget.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>
+    `;
+    }
+};
+StContextMenu.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);
+      }
+    `,
+];
+__decorate([
+    property({ type: Array })
+], StContextMenu.prototype, "items", void 0);
+__decorate([
+    property({ type: String })
+], StContextMenu.prototype, "trigger", void 0);
+__decorate([
+    property({ type: String })
+], StContextMenu.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StContextMenu.prototype, "disabled", void 0);
+__decorate([
+    state()
+], StContextMenu.prototype, "_open", void 0);
+__decorate([
+    state()
+], StContextMenu.prototype, "_active", void 0);
+__decorate([
+    query("[popover]")
+], StContextMenu.prototype, "_menu", void 0);
+StContextMenu = __decorate([
+    customElement("st-context-menu")
+], StContextMenu);
+export { StContextMenu };
+//# sourceMappingURL=context-menu.js.map

package/dist/components/context-menu/context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.js","sourceRoot":"","sources":["../../../src/components/context-menu/context-menu.ts"],"names":[],"mappings":"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"}

package/dist/components/cron-builder/cron-builder.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
 export declare class StCronBuilder extends LitElement {
     static formAssociated: boolean;
     private _internals;
@@ -14,9 +14,12 @@ export declare class StCronBuilder extends LitElement {
     private _customCronError;
     private _customCronText;
     private _defaultValue;
+    private _lastGeneratedOutput;
     constructor();
     static styles: import("lit").CSSResult[];
-    firstUpdated(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    firstUpdated(changedProperties: PropertyValues): void;
+    private _parseIncomingValue;
     private _translateCron;
     private _generateOutput;
     private _handleCustomCronInput;

package/dist/components/cron-builder/cron-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cron-builder.d.ts","sourceRoot":"","sources":["../../../src/components/cron-builder/cron-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA4B,MAAM,KAAK,CAAC;AAI1D,qBACa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAEI,IAAI,SAAM;IACzB,KAAK,SAAM;IACK,QAAQ,UAAS;IAElD,OAAO,CAAC,UAAU,CAAY;IAC9B,OAAO,CAAC,KAAK,CAAW;IACxB,OAAO,CAAC,KAAK,CAAW;IACxB,OAAO,CAAC,SAAS,CAAO;IACxB,OAAO,CAAC,KAAK,CAAM;IAEnB,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,eAAe,CAAM;IAEtC,OAAO,CAAC,aAAa,CAAM;IAE3B,cAOC;IAED,MAAM,CAAC,MAAM,4BAsFX;IAEO,YAAY,SAGpB;IAED,OAAO,CAAC,cAAc;IAiHtB,OAAO,CAAC,eAAe;IA0CvB,OAAO,CAAC,sBAAsB;IAY9B,OAAO,CAAC,sBAAsB;IAKvB,aAAa,YAEnB;IACM,cAAc,YAEpB;IAED,iBAAiB,SAIhB;IAED,MAAM,yCAoIL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"cron-builder.d.ts","sourceRoot":"","sources":["../../../src/components/cron-builder/cron-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAO1D,qBACa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAEI,IAAI,SAAM;IACzB,KAAK,SAAM;IACK,QAAQ,UAAS;IAElD,OAAO,CAAC,UAAU,CAAY;IAC9B,OAAO,CAAC,KAAK,CAAW;IACxB,OAAO,CAAC,KAAK,CAAW;IACxB,OAAO,CAAC,SAAS,CAAO;IACxB,OAAO,CAAC,KAAK,CAAM;IAEnB,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,eAAe,CAAM;IAEtC,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,oBAAoB,CAAM;IAElC,cAOC;IAED,MAAM,CAAC,MAAM,4BAsFX;IAEO,UAAU,CAAC,iBAAiB,EAAE,cAAc,QAQpD;IAEQ,YAAY,CAAC,iBAAiB,EAAE,cAAc,QAStD;IAED,OAAO,CAAC,mBAAmB;IAuD3B,OAAO,CAAC,cAAc;IAiHtB,OAAO,CAAC,eAAe;IA+CvB,OAAO,CAAC,sBAAsB;IAY9B,OAAO,CAAC,sBAAsB;IAKvB,aAAa,YAEnB;IACM,cAAc,YAEpB;IAED,iBAAiB,SAIhB;IAED,MAAM,yCAoIL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/cron-builder/cron-builder.js

@@ -7,6 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { LitElement, html, css } 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 = (e) => e.target.value;
 let StCronBuilder = class StCronBuilder extends LitElement {
     constructor() {
         super();
@@ -22,15 +24,77 @@ let StCronBuilder = class StCronBuilder extends LitElement {
         this._customCronError = "";
         this._customCronText = "";
         this._defaultValue = "";
+        this._lastGeneratedOutput = "";
         this._internals = this.attachInternals();
         const today = new Date();
         const pad = (n) => n.toString().padStart(2, "0");
         this._date = `${today.getFullYear()}-${pad(today.getMonth() + 1)}-${pad(today.getDate())}`;
     }
-    firstUpdated() {
-        this._generateOutput();
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        // Check if value changed, is truthy (not ""), and wasn't generated by the component itself
+        if (changedProperties.has("value") && this.value && this.value !== this._lastGeneratedOutput) {
+            this._parseIncomingValue(this.value);
+            this._generateOutput(true); // true = silent (don't dispatch 'change' event)
+        }
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        // If the component mounted without an external value, generate the default cron string
+        if (!this.value) {
+            this._generateOutput(true);
+        }
         this._defaultValue = this.value;
     }
+    _parseIncomingValue(val) {
+        if (!val)
+            return;
+        // 1. One-Off Checks
+        if (val.includes("T")) {
+            this._frequency = "one-off";
+            const [dateStr, timeStr] = val.split("T");
+            this._date = dateStr;
+            this._time = timeStr;
+            return;
+        }
+        const parts = val.trim().split(/\s+/);
+        if (parts.length !== 5) {
+            this._frequency = "custom";
+            this._customCron = val;
+            return;
+        }
+        // 🚀 THE FIX: Check mathematical validity FIRST.
+        // If it's broken (like DOW 15), force it to Custom so the error UI displays.
+        const analysis = this._translateCron(val);
+        if (!analysis.valid) {
+            this._frequency = "custom";
+            this._customCron = val;
+            return;
+        }
+        // 2. Safe mapping for valid cron strings
+        const [min, hour, dom, mon, dow] = parts;
+        if (/^\d+$/.test(min) && /^\d+$/.test(hour)) {
+            this._time = `${hour.padStart(2, "0")}:${min.padStart(2, "0")}`;
+            if (dom === "*" && mon === "*" && dow === "*") {
+                this._frequency = "daily";
+                return;
+            }
+            // Ensure weekly is only triggered for simple lists (e.g. "1,3,5" or "1"), not steps/ranges
+            else if (dom === "*" && mon === "*" && /^[0-7](,[0-7])*$/.test(dow)) {
+                this._frequency = "weekly";
+                this._days = dow;
+                return;
+            }
+            else if (/^\d+$/.test(dom) && mon === "*" && dow === "*") {
+                this._frequency = "monthly";
+                this._monthDay = dom;
+                return;
+            }
+        }
+        // 3. Fallback for valid but complex expressions (e.g., */15 * * * *)
+        this._frequency = "custom";
+        this._customCron = val;
+    }
     _translateCron(cron) {
         const parts = cron.trim().split(/\s+/);
         if (parts.length !== 5) {
@@ -135,7 +199,7 @@ let StCronBuilder = class StCronBuilder extends LitElement {
         }
         return { valid: true, text: desc + "." };
     }
-    _generateOutput() {
+    _generateOutput(silent = false) {
         let output = "";
         this._customCronError = "";
         this._customCronText = "";
@@ -171,9 +235,13 @@ let StCronBuilder = class StCronBuilder extends LitElement {
                     break;
             }
         }
+        this._lastGeneratedOutput = output;
         this.value = output;
         this._internals.setFormValue(output);
-        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+        // Only dispatch if the user actually clicked/typed something
+        if (!silent) {
+            this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+        }
     }
     _handleCustomCronInput(e) {
         const inputEl = e.target;
@@ -185,7 +253,7 @@ let StCronBuilder = class StCronBuilder extends LitElement {
         this._generateOutput();
     }
     _handleFrequencyChange(e) {
-        this._frequency = e.target.value;
+        this._frequency = targetValue(e);
         this._generateOutput();
     }
     checkValidity() {
@@ -232,7 +300,7 @@ let StCronBuilder = class StCronBuilder extends LitElement {
                   multiple
                   .value=${this._days}
                   @change=${(e) => {
-                this._days = e.target.value;
+                this._days = targetValue(e);
                 this._generateOutput();
             }}
                 >
@@ -255,7 +323,7 @@ let StCronBuilder = class StCronBuilder extends LitElement {
                   .options=${monthDayOptions}
                   .value=${this._monthDay}
                   @change=${(e) => {
-                this._monthDay = e.target.value;
+                this._monthDay = targetValue(e);
                 this._generateOutput();
             }}
                 ></st-select>
@@ -269,7 +337,7 @@ let StCronBuilder = class StCronBuilder extends LitElement {
                 <st-calendar
                   .value=${this._date}
                   @change=${(e) => {
-                this._date = e.target.value;
+                this._date = targetValue(e);
                 this._generateOutput();
             }}
                 ></st-calendar>
@@ -312,7 +380,7 @@ let StCronBuilder = class StCronBuilder extends LitElement {
                   label="Execution Time"
                   .value=${this._time}
                   @change=${(e) => {
-                this._time = e.target.value;
+                this._time = targetValue(e);
                 this._generateOutput();
             }}
                 ></st-time-picker>
@@ -338,7 +406,7 @@ StCronBuilder.styles = [
         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 {
@@ -377,7 +445,7 @@ StCronBuilder.styles = [
         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);
@@ -385,25 +453,25 @@ StCronBuilder.styles = [
       }
 
       .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);
       }