atomicuilibrary 0.0.1 → 0.1.3

package/dist/cjs/ui-label.cjs.entry.js

@@ -0,0 +1,473 @@
+'use strict';
+
+var index = require('./index-C32cWsm5.js');
+
+const labelCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;--ui-label-color:var(--label-color, var(--text-primary, #0f172a));--ui-label-muted-color:var(--label-subtitle-color, var(--text-secondary, #64748b));--ui-label-primary-color:var(--color-primary, #22c55e);--ui-label-secondary-color:var(--text-secondary, #64748b);--ui-label-success-color:var(--color-success, #10b981);--ui-label-warning-color:var(--color-warning, #f59e0b);--ui-label-danger-color:var(--color-danger, #ef4444);--ui-label-info-color:var(--color-info, #3b82f6);--ui-label-font-size:0.875rem;--ui-label-font-weight:500;--ui-label-line-height:1.4;--ui-label-letter-spacing:0;--ui-label-gap:4px;--ui-label-icon-gap:6px;--ui-label-tooltip-gap:6px;--ui-label-required-color:var(--color-danger, #ef4444);--ui-label-required-font-size:0.875em;--ui-label-disabled-opacity:0.45;--ui-label-error-color:var(--color-danger, #ef4444);--ui-label-success-color-msg:var(--color-success, #10b981);--ui-label-hint-color:var(--label-subtitle-color, var(--text-muted, #94a3b8));--ui-label-skeleton-bg:var(--border-default, #e2e8f0);--ui-label-skeleton-shine:var(--bg-primary, #f8fafc);--ui-label-tooltip-bg:var(--bg-primary, #1e293b);--ui-label-tooltip-color:var(--text-primary, #f8fafc);--ui-label-tooltip-radius:8px;--ui-label-tooltip-shadow:0 4px 16px rgba(0, 0, 0, 0.15);--ui-label-copy-color:var(--text-muted, #94a3b8);--ui-label-copy-hover-color:var(--color-primary, #22c55e)}:host-context(.dark),:host-context([data-theme=dark]),:host-context([data-theme=violet]),:host-context([data-theme=pink]),:host-context([data-theme=blue]),:host-context([data-theme=green]){--ui-label-color:var(--label-color, #f1f5f9);--ui-label-muted-color:var(--label-subtitle-color, #94a3b8);--ui-label-hint-color:var(--label-subtitle-color, #94a3b8);--ui-label-skeleton-bg:var(--border-default, #334155);--ui-label-skeleton-shine:var(--bg-secondary, #1e293b)}:host(.is-inline){display:inline}:host(.is-block){display:block;width:100%}.label-root{display:inline-flex;align-items:center;gap:var(--ui-label-icon-gap);color:var(--ui-label-color);font-size:var(--ui-label-font-size);font-weight:var(--ui-label-font-weight);line-height:var(--ui-label-line-height);letter-spacing:var(--ui-label-letter-spacing);cursor:default;user-select:none;white-space:nowrap;box-sizing:border-box;max-width:100%;position:relative;margin:0}.label-align-start{justify-content:flex-start}.label-align-center{justify-content:center}.label-align-end{justify-content:flex-end}.label-align-between{justify-content:space-between;width:100%}.label-orientation-vertical{flex-direction:row}.label-orientation-horizontal{flex-direction:row}.label-size-xxs{--ui-label-font-size:0.5rem}.label-size-xs{--ui-label-font-size:0.625rem}.label-size-sm{--ui-label-font-size:0.75rem}.label-size-md{--ui-label-font-size:0.875rem}.label-size-lg{--ui-label-font-size:1rem}.label-size-xl{--ui-label-font-size:1.125rem}.label-size-xxl{--ui-label-font-size:1.25rem}.label-size-xxxl{--ui-label-font-size:1.5rem}.label-size-jumbo{--ui-label-font-size:2rem}.label-weight-light{--ui-label-font-weight:300}.label-weight-normal{--ui-label-font-weight:400}.label-weight-medium{--ui-label-font-weight:500}.label-weight-semibold{--ui-label-font-weight:600}.label-weight-bold{--ui-label-font-weight:700}.label-variant-default{color:var(--ui-label-color)}.label-variant-muted{color:var(--ui-label-muted-color)}.label-variant-primary{color:var(--ui-label-primary-color)}.label-variant-secondary{color:var(--ui-label-secondary-color)}.label-variant-success{color:var(--ui-label-success-color)}.label-variant-warning{color:var(--ui-label-warning-color)}.label-variant-danger{color:var(--ui-label-danger-color)}.label-variant-info{color:var(--ui-label-info-color)}.label-truncate .label-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}.label-multiline{white-space:normal}.label-multiline .label-text{white-space:normal}.label-root.label-block,.label-root.label-align-between{display:flex;width:100%}.label-inline{display:inline-flex}.label-text{flex:1 1 auto;min-width:0}.label-icon{display:inline-flex;align-items:center;flex-shrink:0;font-size:1em;color:inherit;opacity:0.7}.label-icon-start{order:-1}.label-icon-end{order:1}.label-required{color:var(--ui-label-required-color);font-size:var(--ui-label-required-font-size);font-weight:700;margin-inline-start:2px;line-height:1;flex-shrink:0;cursor:default}.label-optional{font-size:0.75em;font-weight:400;color:var(--ui-label-muted-color);margin-inline-start:4px;flex-shrink:0}.label-selectable{user-select:text;cursor:text}.label-clickable{cursor:pointer;transition:color 0.2s ease, opacity 0.2s ease}.label-clickable:hover{color:var(--ui-label-primary-color);text-decoration:underline;text-decoration-skip-ink:auto}.label-clickable:active{opacity:0.8}.label-root:focus-visible{outline:2px solid var(--ui-label-primary-color);outline-offset:2px;border-radius:2px}.label-disabled{opacity:var(--ui-label-disabled-opacity);pointer-events:none;cursor:not-allowed}.label-readonly{opacity:0.75;cursor:default}.label-invalid{color:var(--ui-label-error-color)}.label-invalid .label-required{color:var(--ui-label-error-color)}.label-focused{color:var(--ui-label-primary-color)}.label-icon-only .label-text .visually-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.label-skeleton{display:inline-block;width:8em;line-height:inherit;vertical-align:middle}.label-skeleton-bar{display:block;height:0.9em;border-radius:4px;background:var(--ui-label-skeleton-bg);position:relative;overflow:hidden}.label-skeleton-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent 0%, var(--ui-label-skeleton-shine) 50%, transparent 100%);animation:label-shimmer 1.4s ease-in-out infinite}@keyframes label-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.label-tooltip-trigger{background:transparent;border:none;padding:0;margin:0;margin-inline-start:var(--ui-label-tooltip-gap);cursor:pointer;font-size:0.9em;color:var(--ui-label-muted-color);line-height:1;display:inline-flex;align-items:center;border-radius:50%;flex-shrink:0;transition:color 0.2s ease}.label-tooltip-trigger:hover,.label-tooltip-trigger.is-open{color:var(--ui-label-primary-color)}.label-tooltip-trigger:focus-visible{outline:2px solid var(--ui-label-primary-color);outline-offset:2px}.label-tooltip{position:absolute;z-index:100;background:var(--ui-label-tooltip-bg);color:var(--ui-label-tooltip-color);padding:8px 12px;border-radius:var(--ui-label-tooltip-radius);font-size:0.75rem;font-weight:400;line-height:1.4;max-width:240px;white-space:normal;pointer-events:none;box-shadow:var(--ui-label-tooltip-shadow);animation:label-tooltip-in 0.15s ease}@keyframes label-tooltip-in{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}.label-tooltip-top{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%)}.label-tooltip-top::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ui-label-tooltip-bg)}.label-tooltip-bottom{top:calc(100% + 8px);left:50%;transform:translateX(-50%)}.label-tooltip-bottom::after{content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-bottom-color:var(--ui-label-tooltip-bg)}.label-tooltip-left{right:calc(100% + 8px);top:50%;transform:translateY(-50%)}.label-tooltip-left::after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left-color:var(--ui-label-tooltip-bg)}.label-tooltip-right{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}.label-tooltip-right::after{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:var(--ui-label-tooltip-bg)}.label-copy-btn{background:transparent;border:none;padding:2px;margin:0;margin-inline-start:4px;cursor:pointer;color:var(--ui-label-copy-color);display:inline-flex;align-items:center;border-radius:3px;opacity:0;transition:opacity 0.2s ease, color 0.2s ease;flex-shrink:0}.label-copy-btn:hover{color:var(--ui-label-copy-hover-color)}.label-copy-btn:focus-visible{outline:2px solid var(--ui-label-primary-color);outline-offset:2px;opacity:1}.label-copyable:hover .label-copy-btn,.label-copyable:focus-within .label-copy-btn{opacity:1}.label-sub{margin-top:var(--ui-label-gap);display:flex;flex-direction:column;gap:2px}.label-hint-text{font-size:0.75rem;font-weight:400;color:var(--ui-label-hint-color);line-height:1.4}.label-error-text{font-size:0.75rem;font-weight:500;color:var(--ui-label-error-color);line-height:1.4;display:flex;align-items:center;gap:4px}.label-success-text{font-size:0.75rem;font-weight:500;color:var(--ui-label-success-color-msg);line-height:1.4;display:flex;align-items:center;gap:4px}.label-sub-icon{flex-shrink:0;font-style:normal;font-size:0.9em}.label-responsive{--ui-label-font-size:clamp(0.75rem, 0.5rem + 0.5vw, 1rem)}@media (max-width: 640px){.label-mobile-stack{flex-direction:column;align-items:flex-start;gap:4px}}.label-rtl,:host([dir=rtl]) .label-root{direction:rtl}.label-rtl .label-icon-start,:host([dir=rtl]) .label-root .label-icon-start{order:1}.label-rtl .label-icon-end,:host([dir=rtl]) .label-root .label-icon-end{order:-1}@media (forced-colors: active){.label-root{forced-color-adjust:auto}.label-required{color:LinkText}.label-error-text{color:Mark}.label-disabled{opacity:1;color:GrayText}}`;
+
+const UILabel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.labelClick = index.createEvent(this, "labelClick");
+        this.labelFocus = index.createEvent(this, "labelFocus");
+        this.labelBlur = index.createEvent(this, "labelBlur");
+        this.labelCopy = index.createEvent(this, "labelCopy");
+    }
+    get el() { return index.getElement(this); }
+    /** Tracks whether the associated control is currently focused (managed externally or via the focused prop). */
+    _isFocused = false;
+    /** Toggle state for tooltip open/close. */
+    _tooltipOpen = false;
+    // ─── Form Association ────────────────────────────────────────────────────
+    /**
+     * ID of the form control this label is associated with.
+     * Renders as a native `for` attribute on the underlying `<label>` element.
+     * Supports all standard form controls as well as custom web components.
+     */
+    htmlFor;
+    /**
+     * Alias for `htmlFor`.  `controlId` takes precedence if both are supplied.
+     */
+    controlId;
+    /**
+     * Deprecated alias kept for back-compat.  Prefer `htmlFor`.
+     */
+    target;
+    // ─── Content ────────────────────────────────────────────────────────────
+    /**
+     * Plain-text label.  Use the default slot for rich/HTML content instead.
+     */
+    label = '';
+    // ─── Typography ─────────────────────────────────────────────────────────
+    /**
+     * Semantic size token.
+     * @default 'md'
+     */
+    size = 'md';
+    /**
+     * Font-weight scale.
+     * @default 'medium'
+     */
+    weight = 'medium';
+    /**
+     * CSS text-transform value.
+     * @default 'none'
+     */
+    transform = 'none';
+    /**
+     * Single-line truncation with ellipsis.
+     */
+    truncate = false;
+    /**
+     * Allow text to wrap across multiple lines (disables truncation).
+     */
+    multiline = false;
+    /**
+     * Clamp to N visible lines (CSS `line-clamp`).  Requires `multiline` to be true.
+     */
+    lineClamp = 0;
+    // ─── Variant ────────────────────────────────────────────────────────────
+    /**
+     * Colour variant.
+     * @default 'default'
+     */
+    variant = 'default';
+    // ─── Form States ─────────────────────────────────────────────────────────
+    /**
+     * Marks the associated field as required.
+     * Shows a required indicator (asterisk by default) and sets `aria-required` on the
+     * linked control if possible.
+     */
+    required = false;
+    /**
+     * Shows "(optional)" hint text next to the label.
+     * Mutually exclusive with `required` — `required` wins if both are set.
+     */
+    optional = false;
+    /**
+     * Applies disabled styling and prevents interaction.
+     */
+    disabled = false;
+    /**
+     * Applies read-only styling (dimmed, no pointer events).
+     */
+    readonly = false;
+    /**
+     * Applies invalid / error styling to the label.
+     */
+    invalid = false;
+    /**
+     * Mirrors the focused state of the associated control so the label can react visually.
+     */
+    focused = false;
+    /**
+     * Shows a loading skeleton overlaid on the label text.
+     */
+    loading = false;
+    // ─── Validation messaging ────────────────────────────────────────────────
+    /**
+     * Error message shown below the label when `invalid` is true.
+     */
+    errorText = '';
+    /**
+     * Success message shown below the label when the field is valid and this text is set.
+     */
+    successText = '';
+    /**
+     * Helper / hint text shown below the label.
+     */
+    helperText = '';
+    // ─── Accessibility ───────────────────────────────────────────────────────
+    /**
+     * Sets `aria-label` on the root element.
+     */
+    ariaLabel = '';
+    /**
+     * IDs of elements that describe this label (space-separated).
+     */
+    ariaDescribedby = '';
+    /**
+     * Live-region politeness for dynamic content announcements.
+     * @default 'off'
+     */
+    ariaLive = 'off';
+    // ─── Layout ─────────────────────────────────────────────────────────────
+    /**
+     * Stack direction when used alongside a form control.
+     * @default 'vertical'
+     */
+    orientation = 'vertical';
+    /**
+     * Horizontal alignment of label content.
+     * @default 'start'
+     */
+    align = 'start';
+    /**
+     * Renders as an inline-level element.
+     */
+    inline = false;
+    /**
+     * Forces 100 % width block layout (useful inside flex/grid parents).
+     */
+    block = false;
+    // ─── Spacing ─────────────────────────────────────────────────────────────
+    /**
+     * Gap between the label row and the hint / error message.
+     * Accepts any valid CSS length (e.g. `'4px'`, `'0.5rem'`).
+     * Maps to `--ui-label-gap`.
+     */
+    gap = '';
+    /**
+     * External margin override (CSS shorthand string).
+     */
+    margin = '';
+    /**
+     * External padding override (CSS shorthand string).
+     */
+    padding = '';
+    // ─── Icons ───────────────────────────────────────────────────────────────
+    /**
+     * Icon name rendered before the label text.
+     * Uses the same icon library as the rest of the design system.
+     */
+    startIcon = '';
+    /**
+     * Icon name rendered after the label text.
+     */
+    endIcon = '';
+    /**
+     * When true, only icons are shown — label text is visually hidden.
+     */
+    iconOnly = false;
+    /**
+     * Icon name or URL for the tooltip trigger button.
+     * Defaults to an 'ⓘ' info glyph.
+     */
+    tooltipIcon = 'ⓘ';
+    // ─── Tooltip ─────────────────────────────────────────────────────────────
+    /**
+     * Plain-text tooltip content.  Use the `tooltip` slot for rich markup.
+     */
+    tooltip = '';
+    /**
+     * Preferred position for the tooltip callout.
+     * @default 'top'
+     */
+    tooltipPosition = 'top';
+    // ─── Interaction ─────────────────────────────────────────────────────────
+    /**
+     * Makes the label itself clickable (fires `labelClick`).
+     */
+    clickable = false;
+    /**
+     * Enables text-selection on the label (disabled by default for form labels).
+     */
+    selectable = false;
+    /**
+     * Shows a copy-to-clipboard button on hover and fires `labelCopy`.
+     */
+    copyable = false;
+    // ─── Responsive ──────────────────────────────────────────────────────────
+    /**
+     * Enable responsive font-size scaling via fluid typography.
+     */
+    responsive = false;
+    /**
+     * On narrow viewports, switches from `horizontal` to `vertical` orientation.
+     */
+    mobileStack = false;
+    // ─── Internationalisation ─────────────────────────────────────────────────
+    /**
+     * Text direction.
+     * @default 'ltr'
+     */
+    labelDir = 'ltr';
+    /**
+     * BCP-47 language tag (e.g. `'en'`, `'ar'`, `'fr'`).
+     */
+    labelLang = '';
+    // ─── Enterprise attributes ────────────────────────────────────────────────
+    /**
+     * DOM `id` for the root element.  Auto-generated if not provided.
+     */
+    labelId = '';
+    /**
+     * Logical name (maps to `name` attribute on the inner label).
+     */
+    name = '';
+    /**
+     * `data-testid` attribute for automated testing.
+     */
+    testId = '';
+    /**
+     * `data-automation-id` attribute for RPA / automation tooling.
+     */
+    automationId = '';
+    // ─── Events ───────────────────────────────────────────────────────────────
+    /**
+     * Fired when the label element is clicked (requires `clickable` or naturally via `for`).
+     */
+    labelClick;
+    /**
+     * Fired when the label receives focus (passes through from the native label).
+     */
+    labelFocus;
+    /**
+     * Fired when the label loses focus.
+     */
+    labelBlur;
+    /**
+     * Fired after text is successfully copied to the clipboard (`copyable` must be true).
+     */
+    labelCopy;
+    // ─── Watchers ─────────────────────────────────────────────────────────────
+    onFocusedChanged(val) {
+        this._isFocused = val;
+    }
+    // ─── Lifecycle ────────────────────────────────────────────────────────────
+    componentWillLoad() {
+        // Sync prop → state so imperative updates also trigger re-render.
+        this._isFocused = this.focused;
+        // Auto-generate a stable ID when none is supplied (needed for aria-describedby linkage).
+        if (!this.labelId) {
+            this.labelId = `ui-label-${Math.random().toString(36).slice(2, 9)}`;
+        }
+    }
+    // ─── Public API (Methods) ─────────────────────────────────────────────────
+    /**
+     * Programmatically focus the label element.
+     * Useful when the owning form-field component proxies focus behaviour.
+     */
+    async setFocus() {
+        this.el.shadowRoot?.querySelector('.label-root')?.focus();
+    }
+    /**
+     * Programmatically trigger the copy-to-clipboard action.
+     */
+    async copyText() {
+        await this._handleCopy();
+    }
+    // ─── Private helpers ─────────────────────────────────────────────────────
+    /** Resolve the `for`/`htmlFor` target ID with fallback chain. */
+    get _forId() {
+        return this.controlId || this.htmlFor || this.target || undefined;
+    }
+    /** Build the `aria-describedby` string used by the inner label. */
+    get _describedBy() {
+        const parts = [];
+        if (this.ariaDescribedby)
+            parts.push(this.ariaDescribedby);
+        if (this.helperText)
+            parts.push(`${this.labelId}-hint`);
+        if (this.invalid && this.errorText)
+            parts.push(`${this.labelId}-error`);
+        if (this.successText && !this.invalid)
+            parts.push(`${this.labelId}-success`);
+        return parts.join(' ');
+    }
+    /** Resolved label text — prefer the `label` prop, child text is handled via slot. */
+    get _text() {
+        return this.label || '';
+    }
+    _handleClick = (e) => {
+        if (this.disabled)
+            return;
+        this.labelClick.emit({
+            originalEvent: e,
+            text: this._text || this.el.textContent?.trim() || '',
+            targetId: this._forId,
+        });
+    };
+    _handleFocus = () => {
+        this._isFocused = true;
+        this.labelFocus.emit();
+    };
+    _handleBlur = () => {
+        this._isFocused = false;
+        this.labelBlur.emit();
+    };
+    _handleCopy = async () => {
+        const text = this._text || this.el.textContent?.trim() || '';
+        if (!text)
+            return;
+        try {
+            await navigator.clipboard.writeText(text);
+            this.labelCopy.emit({ text });
+        }
+        catch {
+            // Clipboard API unavailable — silent failure.
+        }
+    };
+    _toggleTooltip = () => {
+        this._tooltipOpen = !this._tooltipOpen;
+    };
+    _closeTooltip = () => {
+        this._tooltipOpen = false;
+    };
+    // ─── CSS class helpers ────────────────────────────────────────────────────
+    _rootClasses() {
+        return {
+            'label-root': true,
+            [`label-size-${this.size}`]: true,
+            [`label-weight-${this.weight}`]: true,
+            [`label-variant-${this.variant}`]: true,
+            [`label-align-${this.align}`]: true,
+            [`label-orientation-${this.orientation}`]: true,
+            'label-truncate': this.truncate && !this.multiline,
+            'label-multiline': this.multiline,
+            'label-inline': this.inline,
+            'label-block': this.block,
+            'label-disabled': this.disabled,
+            'label-readonly': this.readonly,
+            'label-invalid': this.invalid,
+            'label-focused': this._isFocused,
+            'label-loading': this.loading,
+            'label-clickable': this.clickable,
+            'label-selectable': this.selectable,
+            'label-copyable': this.copyable,
+            'label-icon-only': this.iconOnly,
+            'label-responsive': this.responsive,
+            'label-mobile-stack': this.mobileStack,
+            'label-rtl': this.labelDir === 'rtl',
+        };
+    }
+    // ─── Sub-renders ──────────────────────────────────────────────────────────
+    _renderRequiredIndicator() {
+        // Custom slot wins
+        const slotContent = this.el.querySelector('[slot="required-indicator"]');
+        if (slotContent) {
+            return index.h("slot", { name: "required-indicator" });
+        }
+        return (index.h("span", { class: "label-required", "aria-hidden": "true", title: "Required field" }, "*"));
+    }
+    _renderOptionalBadge() {
+        return (index.h("span", { class: "label-optional", "aria-hidden": "true" }, "(optional)"));
+    }
+    _renderIcon(name, position) {
+        return (index.h("span", { class: `label-icon label-icon-${position}`, "aria-hidden": "true", innerHTML: name }));
+    }
+    _renderTooltipTrigger() {
+        const hasTooltip = this.tooltip || this.el.querySelector('[slot="tooltip"]');
+        if (!hasTooltip)
+            return null;
+        return (index.h("button", { type: "button", class: `label-tooltip-trigger${this._tooltipOpen ? ' is-open' : ''}`, "aria-label": "More information", "aria-expanded": this._tooltipOpen ? 'true' : 'false', "aria-haspopup": "true", onClick: this._toggleTooltip, onBlur: this._closeTooltip }, index.h("span", { "aria-hidden": "true" }, this.tooltipIcon)));
+    }
+    _renderTooltipCallout() {
+        if (!this._tooltipOpen)
+            return null;
+        return (index.h("div", { role: "tooltip", class: `label-tooltip label-tooltip-${this.tooltipPosition}`, id: `${this.labelId}-tooltip` }, this.tooltip ? (index.h("span", { class: "label-tooltip-text" }, this.tooltip)) : (index.h("slot", { name: "tooltip" }))));
+    }
+    _renderCopyButton() {
+        return (index.h("button", { type: "button", class: "label-copy-btn", "aria-label": "Copy to clipboard", onClick: this._handleCopy, tabIndex: -1 }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", width: "14", height: "14", "aria-hidden": "true" }, index.h("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }), index.h("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" }))));
+    }
+    _renderSubText() {
+        const showError = this.invalid && this.errorText;
+        const showSuccess = !this.invalid && this.successText;
+        const showHelper = !showError && !showSuccess && this.helperText;
+        const hasHintSlot = !!this.el.querySelector('[slot="hint"]');
+        if (!showError && !showSuccess && !showHelper && !hasHintSlot)
+            return null;
+        return (index.h("div", { class: "label-sub" }, showError && (index.h("span", { id: `${this.labelId}-error`, class: "label-error-text", role: "alert", "aria-live": "assertive" }, index.h("span", { class: "label-sub-icon", "aria-hidden": "true" }, "\u2715"), this.errorText)), showSuccess && (index.h("span", { id: `${this.labelId}-success`, class: "label-success-text" }, index.h("span", { class: "label-sub-icon", "aria-hidden": "true" }, "\u2713"), this.successText)), showHelper && (index.h("span", { id: `${this.labelId}-hint`, class: "label-hint-text" }, this.helperText)), hasHintSlot && (index.h("span", { id: `${this.labelId}-hint`, class: "label-hint-text" }, index.h("slot", { name: "hint" })))));
+    }
+    _renderLoadingSkeleton() {
+        return (index.h("span", { class: "label-skeleton", "aria-hidden": "true" }, index.h("span", { class: "label-skeleton-bar" })));
+    }
+    // ─── Inline styles ────────────────────────────────────────────────────────
+    _hostStyle() {
+        const s = {};
+        if (this.gap)
+            s['--ui-label-gap'] = this.gap;
+        if (this.margin)
+            s['margin'] = this.margin;
+        if (this.padding)
+            s['padding'] = this.padding;
+        return s;
+    }
+    _lineClampStyle() {
+        if (this.multiline && this.lineClamp > 0) {
+            return {
+                '-webkit-line-clamp': String(this.lineClamp),
+                'line-clamp': String(this.lineClamp),
+                'display': '-webkit-box',
+                '-webkit-box-orient': 'vertical',
+                'overflow': 'hidden',
+            };
+        }
+        return undefined;
+    }
+    // ─── Render ───────────────────────────────────────────────────────────────
+    render() {
+        const labelFor = this._forId;
+        const describedBy = this._describedBy;
+        const labelProps = {
+            class: this._rootClasses(),
+            id: this.labelId || undefined,
+            for: labelFor,
+            'aria-label': this.ariaLabel || undefined,
+            'aria-describedby': describedBy || undefined,
+            'aria-live': this.ariaLive !== 'off' ? this.ariaLive : undefined,
+            'aria-disabled': this.disabled ? 'true' : undefined,
+            'data-testid': this.testId || undefined,
+            'data-automation-id': this.automationId || undefined,
+            onClick: this._handleClick,
+            onFocus: this._handleFocus,
+            onBlur: this._handleBlur,
+        };
+        if (this.name)
+            labelProps['name'] = this.name;
+        if (this.labelLang)
+            labelProps['lang'] = this.labelLang;
+        return (index.h(index.Host, { key: 'b67618ecbef75ae6ead3a609ff206a36b11de621', dir: this.labelDir, style: this._hostStyle(), class: {
+                'ui-label-host': true,
+                'is-inline': this.inline,
+                'is-block': this.block,
+            } }, index.h("label", { key: 'dc257dd21c76648e75c1e14204668a19e1baf662', ...labelProps }, index.h("slot", { key: 'c6932b813c6b1f83ea7e56101214cc7c55405fae', name: "start" }), this.startIcon && !this.iconOnly && this._renderIcon(this.startIcon, 'start'), index.h("span", { key: '30a20e30976ba791ebcf4f0644c3ebf0987970a6', class: "label-text", style: this._lineClampStyle() }, this.loading ? (this._renderLoadingSkeleton()) : (index.h("span", { class: this.iconOnly ? 'visually-hidden' : undefined }, this._text, index.h("slot", null)))), this.required && !this.disabled && this._renderRequiredIndicator(), this.optional && !this.required && this._renderOptionalBadge(), this.endIcon && this._renderIcon(this.endIcon, 'end'), index.h("slot", { key: '2ac12fa6019e520ad11ceead3d3f1b08dd29482d', name: "end" }), this._renderTooltipTrigger(), this.copyable && this._renderCopyButton()), this._renderTooltipCallout(), this._renderSubText()));
+    }
+    static get watchers() { return {
+        "focused": [{
+                "onFocusedChanged": 0
+            }]
+    }; }
+};
+UILabel.style = labelCss();
+
+exports.ui_label = UILabel;

package/dist/cjs/ui-library.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-ClkOYpT8.js');
+var index = require('./index-C32cWsm5.js');
 
 const componentsData = [
     // Foundation & Layout
@@ -126,7 +126,7 @@ const Library = class {
     render() {
         const filteredByCategory = this.getFilteredComponents();
         const totalComponents = componentsData.length;
-        return (index.h(index.Host, { key: 'beac989569c0ca806ae655da242ec9904445d39f' }, index.h("div", { key: '959612c2d98c7daca8a4ac1f35cf3df93ae7b2c7', class: "library-container" }, index.h("header", { key: '27e8009daad08c4b07d52e64881c29b87e3b9c40', class: "library-header" }, index.h("div", { key: 'b07dcdd2b87367c4c2d83f00b0a739e3b3713c7a', class: "header-content" }, index.h("div", { key: 'da37733ca7ee6888845f17acc3636efa8119300c', class: "logo-section" }, index.h("div", { key: 'f621cc915750bcf3ede6518baa6aceb6ca8d39a5', class: "logo" }, index.h("span", { key: 'bd201dccfd00236e31789149190244b08d38a005', class: "logo-icon" }, "\uD83C\uDFA8"), index.h("span", { key: 'eb94d775fce9a5d47127b19eb5d512857cfb0de0', class: "logo-text" }, "App UI")), index.h("span", { key: '225b246368e5e6fe765387ed2d03fdb3722fe463', class: "version-badge" }, "v0.1.0")), index.h("div", { key: '961bed93bdb2e56ec60b1dae9a5389c1a75e067f', class: "search-container" }, index.h("ui-input", { key: 'feda70660a055323076630917b0e7a49afcb0a8a', class: "search-input", placeholder: "Search components...", value: this.searchQuery, onInputChange: (e) => this.searchQuery = e.detail, "prefix-icon": "search", "icon-library": "lucide", clearable: true })), index.h("div", { key: '592f3d4fe0f19a5bc1a33f8cd6ffc2f98766b13c', class: "header-stats" }, index.h("span", { key: 'edfe4fe44fc73aa922883f30ee2c50abcd407aa0', class: "stat" }, totalComponents, " components"), index.h("span", { key: '1271653612b2d1e56327e4eb043ef1848be9e7ae', class: "stat" }, categories.length, " categories")))), index.h("nav", { key: 'd5e1be2e568e66c317362e85baa4f8b184b2ad05', class: "category-nav" }, index.h("ui-button", { key: 'a43178b8702bda6441c706d7b27d7d5268b1017e', label: "All", variant: this.selectedCategory === null ? 'filled' : 'ghost', color: "primary", size: "md", onClick: () => this.handleCategoryClick(null), style: { borderRadius: '20px' } }), categories.map(cat => (index.h("ui-button", { key: cat, label: `${this.getCategoryIcon(cat)} ${cat}`, variant: this.selectedCategory === cat ? 'filled' : 'ghost', color: "primary", size: "md", onClick: () => this.handleCategoryClick(cat), style: { borderRadius: '20px' } })))), index.h("main", { key: '011117cd9c223602cc8dc11af1f8a058b8b25a5a', class: "library-content" }, Object.keys(filteredByCategory).length === 0 ? (index.h("div", { class: "no-results" }, index.h("ui-icon", { name: "search", library: "lucide", size: "2em", class: "no-results-icon" }), index.h("h3", null, "No components found"), index.h("p", null, "Try adjusting your search or filter criteria"))) : (Object.entries(filteredByCategory).map(([category, components]) => (index.h("category-section", { key: category, "category-name": category, "category-icon": this.getCategoryIcon(category), components: components, mode: this.mode }))))), index.h("footer", { key: 'fd993854e47f108c29bda48371866c5ab43935a5', class: "library-footer" }, index.h("p", { key: '78fbe5d2283722f32297cc99446e37b8b366d045' }, "Built with \u2764\uFE0F using Stencil.js"), index.h("div", { key: '0be6641e6a4f57e02a0070311eceeab0fff6136a', class: "footer-links" }, index.h("a", { key: 'e166e252d8367239b62ab1904cddef9425dcb7c1', href: "#", class: "footer-link" }, "Documentation"), index.h("a", { key: 'fdcd853536091767eefcdc8d28a231972f573a51', href: "#", class: "footer-link" }, "GitHub"), index.h("a", { key: 'a8d34f3e11ed0aa47aa82f074530d774f6982635', href: "#", class: "footer-link" }, "Changelog"))))));
+        return (index.h(index.Host, { key: '7af3d689184e46c3bd02292ea4f22f5ca9945764' }, index.h("div", { key: 'f41481a5c1883d92bcb031ad2ad870fb986af516', class: "library-container" }, index.h("header", { key: '1e8e42ce418dfff3bb91c83e14420dedffdf3cbc', class: "library-header" }, index.h("div", { key: '49f0832b98cbe019ef9a258cbef8616efbb865e9', class: "header-content" }, index.h("div", { key: 'f7461ed7219a059a49e4049a8f17dd0b93688f05', class: "logo-section" }, index.h("div", { key: 'd4ab4bcb3909ed5a3af30ae89f0e4d58b5eb35ae', class: "logo" }, index.h("span", { key: '9513f4ceb1723af068920240c5dd4fc99e736911', class: "logo-icon" }, "\uD83C\uDFA8"), index.h("span", { key: '8bc28122c5e22e0f4c5f912fcd4d653065c47c16', class: "logo-text" }, "App UI")), index.h("span", { key: '81f34ec0b03d9a5ab174c8fc7cc28b48da656c77', class: "version-badge" }, "v0.1.0")), index.h("div", { key: '3b3ef085d16c1efbc8cfe3ccdc72b0ebc57e4666', class: "search-container" }, index.h("ui-input", { key: '5adcc741e1ed654686012689e9a92e8f6dfc22ac', class: "search-input", placeholder: "Search components...", value: this.searchQuery, onInputChange: (e) => this.searchQuery = e.detail, "prefix-icon": "search", "icon-library": "lucide", clearable: true })), index.h("div", { key: '61baaadd9b86a0c20c3a6b81fd1614a5089b3554', class: "header-stats" }, index.h("span", { key: '046d0fd0c233314bb30bf75d469e5a9c496647fa', class: "stat" }, totalComponents, " components"), index.h("span", { key: '455a288e2b0553687ea61c88b6b4728bc02860dc', class: "stat" }, categories.length, " categories")))), index.h("nav", { key: '2cedaba54c9a0d8dae53d8c04c82e21ac233fc9a', class: "category-nav" }, index.h("ui-button", { key: 'a20b92b2c7f5fa8366457f3a6721bfa81ee62bab', label: "All", variant: this.selectedCategory === null ? 'filled' : 'ghost', color: "primary", size: "md", onClick: () => this.handleCategoryClick(null), style: { borderRadius: '20px' } }), categories.map(cat => (index.h("ui-button", { key: cat, label: `${this.getCategoryIcon(cat)} ${cat}`, variant: this.selectedCategory === cat ? 'filled' : 'ghost', color: "primary", size: "md", onClick: () => this.handleCategoryClick(cat), style: { borderRadius: '20px' } })))), index.h("main", { key: '25b1de0ed093c1bf9593c959ab6e4d69cde3f2b3', class: "library-content" }, Object.keys(filteredByCategory).length === 0 ? (index.h("div", { class: "no-results" }, index.h("ui-icon", { name: "search", library: "lucide", size: "2em", class: "no-results-icon" }), index.h("h3", null, "No components found"), index.h("p", null, "Try adjusting your search or filter criteria"))) : (Object.entries(filteredByCategory).map(([category, components]) => (index.h("category-section", { key: category, "category-name": category, "category-icon": this.getCategoryIcon(category), components: components, mode: this.mode }))))), index.h("footer", { key: '479b967ddb3281c318b60300da1c4b9eb3976189', class: "library-footer" }, index.h("p", { key: 'f1832bdca4a507ea2f74c4332b2936a6a37b33ab' }, "Built with \u2764\uFE0F using Stencil.js"), index.h("div", { key: 'f2b462bb1a0ae1133ec02a246cbfcfd27ec0d501', class: "footer-links" }, index.h("a", { key: '0780dd9f9a59efcd69d21910551cbd2ce25eafbc', href: "#", class: "footer-link" }, "Documentation"), index.h("a", { key: '224e2da3c34d7362ee42f8a207a9f64e556bb0bc', href: "#", class: "footer-link" }, "GitHub"), index.h("a", { key: '82c37c06125ddafcd54246b5df31dfe213538853', href: "#", class: "footer-link" }, "Changelog"))))));
     }
 };
 Library.style = libraryCss();