@waggylabs/yumekit 0.2.1 → 0.2.2

package/dist/components/y-progress.js

@@ -34,6 +34,7 @@ class YumeProgress extends HTMLElement {
         }
     }
 
+    /** Current progress value, or null if unset. */
     get value() {
         const val = parseFloat(this.getAttribute("value"));
         return Number.isNaN(val) ? null : val;
@@ -47,6 +48,7 @@ class YumeProgress extends HTMLElement {
         }
     }
 
+    /** Minimum value (default 0). */
     get min() {
         return parseFloat(this.getAttribute("min")) || 0;
     }
@@ -55,6 +57,7 @@ class YumeProgress extends HTMLElement {
         this.setAttribute("min", String(val));
     }
 
+    /** Maximum value (default 100). */
     get max() {
         return parseFloat(this.getAttribute("max")) || 100;
     }
@@ -63,6 +66,7 @@ class YumeProgress extends HTMLElement {
         this.setAttribute("max", String(val));
     }
 
+    /** Step increment for snapping, or null if continuous. */
     get step() {
         const s = parseFloat(this.getAttribute("step"));
         return Number.isNaN(s) || s <= 0 ? null : s;
@@ -76,6 +80,7 @@ class YumeProgress extends HTMLElement {
         }
     }
 
+    /** Bar thickness: "small" | "medium" | "large" (default "medium"). */
     get size() {
         return this.getAttribute("size") || "medium";
     }
@@ -84,6 +89,7 @@ class YumeProgress extends HTMLElement {
         this.setAttribute("size", val);
     }
 
+    /** Color theme for the progress bar (default "primary"). */
     get color() {
         return this.getAttribute("color") || "primary";
     }
@@ -92,6 +98,7 @@ class YumeProgress extends HTMLElement {
         this.setAttribute("color", val);
     }
 
+    /** Whether to show the value label on the bar (default true). */
     get labelDisplay() {
         return this.getAttribute("label-display") !== "false";
     }
@@ -100,6 +107,7 @@ class YumeProgress extends HTMLElement {
         this.setAttribute("label-display", val ? "true" : "false");
     }
 
+    /** Label format: "percent" | "value" | "fraction" (default "percent"). */
     get labelFormat() {
         return this.getAttribute("label-format") || "percent";
     }
@@ -108,6 +116,7 @@ class YumeProgress extends HTMLElement {
         this.setAttribute("label-format", val);
     }
 
+    /** Whether the progress bar shows an indeterminate animation. */
     get indeterminate() {
         return this.hasAttribute("indeterminate");
     }
@@ -117,6 +126,7 @@ class YumeProgress extends HTMLElement {
         else this.removeAttribute("indeterminate");
     }
 
+    /** Whether the progress bar is disabled. */
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -144,6 +154,7 @@ class YumeProgress extends HTMLElement {
         this.value = Math.max(this.value - s, this.min);
     }
 
+    /** Computed fill percentage (0–100), accounting for min, max, and step. */
     get percentage() {
         if (this.value === null) return 0;
         const range = this.max - this.min;
@@ -303,7 +314,9 @@ class YumeProgress extends HTMLElement {
     _autoHideHeader() {
         const header = this.shadowRoot.querySelector(".progress-header");
         const slot = header?.querySelector("slot");
+
         if (!slot || !header) return;
+
         const update = () => {
             const hasContent = slot
                 .assignedNodes({ flatten: true })
@@ -316,6 +329,7 @@ class YumeProgress extends HTMLElement {
                 );
             header.style.display = hasContent ? "" : "none";
         };
+
         slot.addEventListener("slotchange", update);
         update();
     }

package/dist/components/y-radio.d.ts

@@ -6,10 +6,19 @@ export class YumeRadio extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
     set value(val: string);
+    /** @type {string} The currently selected radio value. */
     get value(): string;
+    /** @type {string} The form name of the radio group. */
     get name(): string;
-    set options(val: any);
-    get options(): any;
+    set options(val: Array<{
+        value: string;
+        label: string;
+    }>);
+    /** @type {Array<{value: string, label: string}>} The radio options parsed from the "options" attribute. */
+    get options(): Array<{
+        value: string;
+        label: string;
+    }>;
     updateChecked(): void;
     handleKey(e: any, index: any, radios: any): void;
     render(): void;

package/dist/components/y-radio.js

@@ -28,6 +28,7 @@ class YumeRadio extends HTMLElement {
         }
     }
 
+    /** @type {string} The currently selected radio value. */
     get value() {
         return this._value;
     }
@@ -39,10 +40,12 @@ class YumeRadio extends HTMLElement {
         this.updateChecked();
     }
 
+    /** @type {string} The form name of the radio group. */
     get name() {
         return this.getAttribute("name") || "";
     }
 
+    /** @type {Array<{value: string, label: string}>} The radio options parsed from the "options" attribute. */
     get options() {
         try {
             return JSON.parse(this.getAttribute("options") || "[]");

package/dist/components/y-select.d.ts

@@ -7,13 +7,27 @@ export class YumeSelect extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
-    set value(val: any);
-    get value(): any;
-    _value: any;
-    getOptions(): any;
-    getDisplayText(): any;
+    set value(val: string);
+    /** @type {string} The current selected value, or comma-separated values when multiple. */
+    get value(): string;
+    _value: string;
+    /**
+     * Returns the parsed options array from the "options" attribute.
+     * @returns {Array<{value: string, label: string}>}
+     */
+    getOptions(): Array<{
+        value: string;
+        label: string;
+    }>;
+    /**
+     * Returns the display text for the current selection.
+     * @returns {string}
+     */
+    getDisplayText(): string;
+    /** Toggles the dropdown open or closed. */
     toggleDropdown(): void;
     _onScrollOrResize: any;
+    /** Closes the dropdown. */
     closeDropdown(): void;
     _positionDropdown(): void;
     queryRefs(): void;

package/dist/components/y-select.js

@@ -42,6 +42,7 @@ class YumeSelect extends HTMLElement {
         if (!this.hasAttribute("label-position")) {
             this.setAttribute("label-position", "top");
         }
+
         this.updateValidation();
         this._internals.setFormValue(this.value);
     }
@@ -52,7 +53,9 @@ class YumeSelect extends HTMLElement {
 
     _onDocumentClick(e) {
         if (this.getAttribute("close-on-click-outside") === "false") return;
+
         const path = e.composedPath();
+
         if (!path.includes(this) && this.dropdown?.classList.contains("open")) {
             this.closeDropdown();
         }
@@ -86,6 +89,7 @@ class YumeSelect extends HTMLElement {
         }
     }
 
+    /** @type {string} The current selected value, or comma-separated values when multiple. */
     get value() {
         if (this.hasAttribute("multiple")) {
             return Array.from(this.selectedValues).join(",");
@@ -112,6 +116,10 @@ class YumeSelect extends HTMLElement {
         this.updateSelectedStyles();
     }
 
+    /**
+     * Returns the parsed options array from the "options" attribute.
+     * @returns {Array<{value: string, label: string}>}
+     */
     getOptions() {
         try {
             return JSON.parse(this.getAttribute("options") || "[]");
@@ -120,6 +128,10 @@ class YumeSelect extends HTMLElement {
         }
     }
 
+    /**
+     * Returns the display text for the current selection.
+     * @returns {string}
+     */
     getDisplayText() {
         const options = this.getOptions();
         const isMulti = this.hasAttribute("multiple");
@@ -146,6 +158,7 @@ class YumeSelect extends HTMLElement {
         }
     }
 
+    /** Toggles the dropdown open or closed. */
     toggleDropdown() {
         const isOpen = this.dropdown.classList.contains("open");
         if (isOpen) {
@@ -155,16 +168,19 @@ class YumeSelect extends HTMLElement {
             this.selectContainer.classList.add("open");
             this._positionDropdown();
             this._onScrollOrResize = this._positionDropdown.bind(this);
+
             window.addEventListener("scroll", this._onScrollOrResize, true);
             window.addEventListener("resize", this._onScrollOrResize);
             document.addEventListener("click", this._onDocumentClick, true);
         }
     }
 
+    /** Closes the dropdown. */
     closeDropdown() {
         this.dropdown?.classList.remove("open");
         this.selectContainer?.classList.remove("open");
         document.removeEventListener("click", this._onDocumentClick, true);
+
         if (this._onScrollOrResize) {
             window.removeEventListener("scroll", this._onScrollOrResize, true);
             window.removeEventListener("resize", this._onScrollOrResize);
@@ -175,11 +191,13 @@ class YumeSelect extends HTMLElement {
     _positionDropdown() {
         const rect = this.selectContainer.getBoundingClientRect();
         const gap = 4;
+
         this.dropdown.style.left = `${rect.left}px`;
         this.dropdown.style.width = `${rect.width}px`;
 
         const spaceBelow = window.innerHeight - rect.bottom - gap;
         const maxH = 200;
+
         if (spaceBelow >= maxH || spaceBelow >= rect.top) {
             this.dropdown.style.top = `${rect.bottom + gap}px`;
             this.dropdown.style.bottom = "auto";
@@ -247,6 +265,7 @@ class YumeSelect extends HTMLElement {
     renderTags() {
         const isMulti = this.hasAttribute("multiple");
         const isTagMode = this.getAttribute("display-mode") === "tag";
+
         if (!isMulti || !isTagMode || !this.displayElement) return;
 
         const options = this.getOptions();

package/dist/components/y-slider.d.ts

@@ -6,21 +6,30 @@ export class YumeSlider extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     set value(val: number);
+    /** @type {number} The current slider value, clamped between min and max. */
     get value(): number;
     set min(val: number);
+    /** @type {number} The minimum allowed value. Defaults to 0. */
     get min(): number;
     set max(val: number);
+    /** @type {number} The maximum allowed value. Defaults to 100. */
     get max(): number;
-    set step(val: number);
-    get step(): number;
+    set step(val: number | null);
+    /** @type {number|null} The step increment, or null for continuous. */
+    get step(): number | null;
     set size(val: string);
+    /** @type {string} The size variant ("small", "medium", or "large"). */
     get size(): string;
     set color(val: string);
+    /** @type {string} The color theme for the slider track and thumb. */
     get color(): string;
     set disabled(val: boolean);
+    /** @type {boolean} Whether the slider is disabled. */
     get disabled(): boolean;
     set orientation(val: string);
+    /** @type {string} The slider orientation ("horizontal" or "vertical"). */
     get orientation(): string;
+    /** @type {number} The current value as a percentage of the min-max range. */
     get percentage(): number;
     _snapToStep(val: any): any;
     getTrackColor(color: any): any;

package/dist/components/y-slider.js

@@ -54,6 +54,7 @@ class YumeSlider extends HTMLElement {
         }
     }
 
+    /** @type {number} The current slider value, clamped between min and max. */
     get value() {
         const val = parseFloat(this.getAttribute("value"));
         return Number.isNaN(val) ? 0 : val;
@@ -65,6 +66,7 @@ class YumeSlider extends HTMLElement {
         this.setAttribute("value", String(stepped));
     }
 
+    /** @type {number} The minimum allowed value. Defaults to 0. */
     get min() {
         return parseFloat(this.getAttribute("min")) || 0;
     }
@@ -73,6 +75,7 @@ class YumeSlider extends HTMLElement {
         this.setAttribute("min", String(val));
     }
 
+    /** @type {number} The maximum allowed value. Defaults to 100. */
     get max() {
         return parseFloat(this.getAttribute("max")) || 100;
     }
@@ -81,6 +84,7 @@ class YumeSlider extends HTMLElement {
         this.setAttribute("max", String(val));
     }
 
+    /** @type {number|null} The step increment, or null for continuous. */
     get step() {
         const s = parseFloat(this.getAttribute("step"));
         return Number.isNaN(s) || s <= 0 ? null : s;
@@ -94,6 +98,7 @@ class YumeSlider extends HTMLElement {
         }
     }
 
+    /** @type {string} The size variant ("small", "medium", or "large"). */
     get size() {
         return this.getAttribute("size") || "medium";
     }
@@ -102,6 +107,7 @@ class YumeSlider extends HTMLElement {
         this.setAttribute("size", val);
     }
 
+    /** @type {string} The color theme for the slider track and thumb. */
     get color() {
         return this.getAttribute("color") || "primary";
     }
@@ -110,6 +116,7 @@ class YumeSlider extends HTMLElement {
         this.setAttribute("color", val);
     }
 
+    /** @type {boolean} Whether the slider is disabled. */
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -119,6 +126,7 @@ class YumeSlider extends HTMLElement {
         else this.removeAttribute("disabled");
     }
 
+    /** @type {string} The slider orientation ("horizontal" or "vertical"). */
     get orientation() {
         return this.getAttribute("orientation") || "horizontal";
     }
@@ -127,6 +135,7 @@ class YumeSlider extends HTMLElement {
         this.setAttribute("orientation", val);
     }
 
+    /** @type {number} The current value as a percentage of the min-max range. */
     get percentage() {
         const range = this.max - this.min;
         if (range <= 0) return 0;
@@ -259,6 +268,7 @@ class YumeSlider extends HTMLElement {
             Math.min(1, (e.clientX - rect.left) / rect.width),
         );
         const rawValue = this.min + ratio * (this.max - this.min);
+
         this.value = rawValue;
         this.dispatchEvent(
             new Event("input", { bubbles: true, composed: true }),

package/dist/components/y-switch.d.ts

@@ -5,9 +5,12 @@ declare class YumeSwitch extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     set checked(val: boolean);
+    /** @type {boolean} Whether the switch is on. */
     get checked(): boolean;
     set value(val: string);
+    /** @type {string} The form value submitted when checked. Defaults to "on". */
     get value(): string;
+    /** Toggles the checked state and dispatches a "change" event. */
     toggle(): void;
     labelTag(pos: any): "" | "<label class=\"label-wrapper\"><slot name=\"label\"></slot></label>";
     _autoHideLabel(): void;

package/dist/components/y-switch.js

@@ -44,6 +44,7 @@ class YumeSwitch extends HTMLElement {
         }
     }
 
+    /** @type {boolean} Whether the switch is on. */
     get checked() {
         return this.hasAttribute("checked");
     }
@@ -54,6 +55,7 @@ class YumeSwitch extends HTMLElement {
         this.update();
     }
 
+    /** @type {string} The form value submitted when checked. Defaults to "on". */
     get value() {
         return this.getAttribute("value") || "on";
     }
@@ -63,8 +65,10 @@ class YumeSwitch extends HTMLElement {
         this.update();
     }
 
+    /** Toggles the checked state and dispatches a "change" event. */
     toggle() {
         if (this.hasAttribute("disabled")) return;
+
         this.checked = !this.checked;
         this.dispatchEvent(
             new Event("change", { bubbles: true, composed: true }),
@@ -84,9 +88,10 @@ class YumeSwitch extends HTMLElement {
 
     _autoHideLabel() {
         const slot = this.shadowRoot.querySelector('slot[name="label"]');
-        if (!slot) return;
         const wrapper = slot.closest(".label-wrapper");
-        if (!wrapper) return;
+
+        if (!slot || !wrapper) return;
+
         const update = () => {
             const hasContent = slot
                 .assignedNodes({ flatten: true })
@@ -99,6 +104,7 @@ class YumeSwitch extends HTMLElement {
                 );
             wrapper.style.display = hasContent ? "" : "none";
         };
+
         slot.addEventListener("slotchange", update);
         update();
     }

package/dist/components/y-table.d.ts

@@ -7,10 +7,13 @@ export class YumeTable extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
     set columns(val: string);
+    /** Column definitions as a JSON string or array of { field, header?, sortable? } objects. */
     get columns(): string;
     set data(val: string);
+    /** Row data as a JSON string or array of objects keyed by column field names. */
     get data(): string;
     set striped(val: boolean);
+    /** Whether to show alternating row backgrounds. */
     get striped(): boolean;
     set size(val: string);
     /**

package/dist/components/y-table.js

@@ -29,7 +29,7 @@ class YumeTable extends HTMLElement {
         super();
         this.attachShadow({ mode: "open" });
         this._sortField = null;
-        this._sortDir = "none"; // "none" | "asc" | "desc"
+        this._sortDir = "none";
         this._parsedData = [];
         this._parsedColumns = [];
     }
@@ -45,6 +45,7 @@ class YumeTable extends HTMLElement {
         this.render();
     }
 
+    /** Column definitions as a JSON string or array of { field, header?, sortable? } objects. */
     get columns() {
         return this.getAttribute("columns");
     }
@@ -55,6 +56,7 @@ class YumeTable extends HTMLElement {
         );
     }
 
+    /** Row data as a JSON string or array of objects keyed by column field names. */
     get data() {
         return this.getAttribute("data");
     }
@@ -65,6 +67,7 @@ class YumeTable extends HTMLElement {
         );
     }
 
+    /** Whether to show alternating row backgrounds. */
     get striped() {
         return this.hasAttribute("striped");
     }

package/dist/components/y-tabs.d.ts

@@ -3,13 +3,20 @@ export class YumeTabs extends HTMLElement {
     _activeTab: string;
     connectedCallback(): void;
     attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
-    set options(val: any);
-    get options(): any;
-    set size(val: string);
-    get size(): string;
-    set position(val: string);
-    get position(): string;
-    activateTab(id: any): void;
+    set options(val: Array<any>);
+    /** @type {Array<Object>} Tab definitions with id, label, slot, and optional disabled flag. */
+    get options(): Array<any>;
+    set size(val: "small" | "medium" | "large");
+    /** @type {"small"|"medium"|"large"} Controls tab button padding and gap. */
+    get size(): "small" | "medium" | "large";
+    set position(val: "top" | "bottom" | "left" | "right");
+    /** @type {"top"|"bottom"|"left"|"right"} Which edge the tab strip is placed on. */
+    get position(): "top" | "bottom" | "left" | "right";
+    /**
+     * Activates a tab by its id.
+     * @param {string} id - The id of the tab to activate.
+     */
+    activateTab(id: string): void;
     _setupEvents(): void;
     _handleTabKeydown(e: any, buttons: any): void;
     _findSiblingButton(buttons: any, fromIndex: any, direction: any): any;

package/dist/components/y-tabs.js

@@ -25,6 +25,7 @@ class YumeTabs extends HTMLElement {
         }
     }
 
+    /** @type {Array<Object>} Tab definitions with id, label, slot, and optional disabled flag. */
     get options() {
         try {
             return JSON.parse(this.getAttribute("options") || "[]");
@@ -38,6 +39,7 @@ class YumeTabs extends HTMLElement {
         this.render();
     }
 
+    /** @type {"small"|"medium"|"large"} Controls tab button padding and gap. */
     get size() {
         const sz = this.getAttribute("size");
         return ["small", "medium", "large"].includes(sz) ? sz : "medium";
@@ -49,6 +51,7 @@ class YumeTabs extends HTMLElement {
         else this.setAttribute("size", "medium");
     }
 
+    /** @type {"top"|"bottom"|"left"|"right"} Which edge the tab strip is placed on. */
     get position() {
         const pos = this.getAttribute("position");
         return ["top", "bottom", "left", "right"].includes(pos) ? pos : "top";
@@ -60,6 +63,10 @@ class YumeTabs extends HTMLElement {
         else this.setAttribute("position", "top");
     }
 
+    /**
+     * Activates a tab by its id.
+     * @param {string} id - The id of the tab to activate.
+     */
     activateTab(id) {
         const tab = this.options.find((t) => t.id === id);
         if (!tab || tab.disabled) return;
@@ -208,6 +215,7 @@ class YumeTabs extends HTMLElement {
         const isActive = tab.id === this._activeTab;
         const isDisabled = !!tab.disabled;
         const btn = document.createElement("button");
+
         btn.id = `tab-${tab.id}`;
         btn.setAttribute("role", "tab");
         btn.setAttribute("part", "tab");
@@ -251,6 +259,7 @@ class YumeTabs extends HTMLElement {
         const contentSlot = document.createElement("slot");
         contentSlot.name = slotName;
         panel.appendChild(contentSlot);
+
         return panel;
     }
 

package/dist/components/y-theme.d.ts

@@ -3,8 +3,13 @@ export class YumeTheme extends HTMLElement {
     connectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     _applyTheme(): Promise<void>;
-    applyVariablesToHost(cssText: any): void;
+    /**
+     * Parses CSS custom properties from the given text and sets them on the host element.
+     * @param {string} cssText - Raw CSS containing custom property declarations.
+     */
+    applyVariablesToHost(cssText: string): void;
     _themeProps: any[];
+    /** Removes all theme custom properties previously applied to the host element. */
     clearThemeProperties(): void;
     _injectPageStyles(): void;
 }