@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/esm/sui-textarea.entry.js

@@ -0,0 +1,177 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+const suiTextareaCss = () => `@charset "UTF-8";.sc-sui-textarea-h{display:block;font-family:var(--sui-font-sans)}.sui-textarea__label-host.sc-sui-textarea{display:block;margin-bottom:4px}.sui-textarea__field.sc-sui-textarea{display:flex;flex-direction:column;gap:8px;justify-content:center;width:100%;box-sizing:border-box;padding:10px 10px 10px 12px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12);box-shadow:var(--sui-regular-shadow-x-small);overflow:clip;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-textarea__field.sc-sui-textarea:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-textarea__field.sc-sui-textarea:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):hover .sui-textarea__control.sc-sui-textarea::placeholder{color:var(--sui-text-sub-600)}.sui-textarea__field.sc-sui-textarea:not(.sui-textarea__field--disabled):not(.sui-textarea__field--readonly):not(.sui-textarea__field--error):focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-slate-alpha-16)}.sui-textarea__field--error.sc-sui-textarea{border-color:var(--sui-state-error-base);box-shadow:none}.sui-textarea__field--error.sc-sui-textarea:not(.sui-textarea__field--disabled):hover{border-color:var(--sui-state-error-base)}.sui-textarea__field--error.sc-sui-textarea:not(.sui-textarea__field--disabled):focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 3px var(--sui-red-alpha-10)}.sui-textarea__field--disabled.sc-sui-textarea{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-textarea__field--readonly.sc-sui-textarea{background:var(--sui-bg-weak-50);border-color:var(--sui-stroke-soft-200);box-shadow:none}[data-sui-size=xsmall].sc-sui-textarea-h .sui-textarea__field.sc-sui-textarea{padding:6px 6px 6px 8px;border-radius:var(--sui-radius-8)}[data-sui-size=small].sc-sui-textarea-h .sui-textarea__field.sc-sui-textarea{padding:8px 8px 8px 10px;border-radius:var(--sui-radius-10)}[data-sui-size=large].sc-sui-textarea-h .sui-textarea__field.sc-sui-textarea{padding:12px 12px 12px 14px;border-radius:var(--sui-radius-12)}[data-sui-size=xlarge].sc-sui-textarea-h .sui-textarea__field.sc-sui-textarea{padding:14px 14px 14px 16px;border-radius:var(--sui-radius-12)}.sui-textarea__control.sc-sui-textarea{flex:1 1 auto;min-width:0;min-height:0;width:100%;border:none;outline:none;background:transparent;padding:0;margin:0;box-sizing:border-box;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950);-webkit-appearance:none;appearance:none}@media (max-width: 767px){.sui-textarea__control.sc-sui-textarea{font-size:var(--sui-type-paragraph-md-size, 16px);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -0.011em)}}[data-sui-size=large].sc-sui-textarea-h .sui-textarea__control.sc-sui-textarea,[data-sui-size=xlarge].sc-sui-textarea-h .sui-textarea__control.sc-sui-textarea{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -0.011em)}[data-sui-resizable].sc-sui-textarea-h .sui-textarea__control.sc-sui-textarea{resize:vertical}.sc-sui-textarea-h:not([data-sui-resizable]) .sui-textarea__control.sc-sui-textarea{resize:none}.sui-textarea__control.sc-sui-textarea::-webkit-resizer{display:none}.sui-textarea__control.sc-sui-textarea::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-textarea__control.sc-sui-textarea:disabled{color:var(--sui-text-disabled-300);cursor:not-allowed;-webkit-text-fill-color:var(--sui-text-disabled-300);resize:none}.sui-textarea__control.sc-sui-textarea:disabled::placeholder{color:var(--sui-text-disabled-300);-webkit-text-fill-color:var(--sui-text-disabled-300)}.sui-textarea__control[readonly].sc-sui-textarea{color:var(--sui-text-sub-600);cursor:default;resize:none}.sui-textarea__control.sc-sui-textarea:focus{outline:none}.sui-textarea__counter.sc-sui-textarea{display:flex;align-items:center;justify-content:flex-end;gap:6px;width:100%;flex:0 0 auto;color:var(--sui-text-soft-400)}.sui-textarea__field--error.sc-sui-textarea .sui-textarea__counter.sc-sui-textarea{color:var(--sui-state-error-base)}.sui-textarea__field--disabled.sc-sui-textarea .sui-textarea__counter.sc-sui-textarea{color:var(--sui-text-disabled-300)}.sui-textarea__counter-text.sc-sui-textarea{font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);text-transform:uppercase;text-align:right;white-space:nowrap;color:inherit}.sui-textarea__resize-icon.sc-sui-textarea{flex-shrink:0;width:12px;height:12px;display:block;color:inherit}.sui-textarea__hint-host.sc-sui-textarea{display:block;margin-top:4px}`;
+
+/** Contador por instancia para los ids de label/hint (a11y, 04-10-2026). */
+let nextId = 0;
+const SuiTextarea = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange");
+        this.suiBlur = createEvent(this, "suiBlur");
+        // ── Core props (espejan los @Input del Angular) ──────────────────────────
+        /** Filas iniciales del `<textarea>`. Default `4`. */
+        this.rows = 4;
+        /**
+         * Padding y radio del campo, con los mismos nombres que `sui-input`:
+         * medium (default, el de la guía) 10/12 · large 12/14 · xlarge 14/16 ·
+         * small 8/10 · xsmall 6/8. En large/xlarge (y en mobile) el texto sube a 16/24.
+         */
+        this.size = 'medium';
+        /** Texto placeholder. */
+        this.placeholder = '';
+        /** Deshabilita el field (bg-weak-50, sin border, no editable). Default `false`. */
+        this.disabled = false;
+        /** Solo lectura (bg-weak-50, border suave, no editable pero seleccionable). Default `false`. */
+        this.readonly = false;
+        /** Activa borde rojo + muestra `errorMessage` + counter rojo. Default `false`. */
+        this.error = false;
+        /** Mensaje de error (se muestra cuando `error`, en lugar del hint). */
+        this.errorMessage = null;
+        /** Texto del label arriba del field. */
+        this.label = null;
+        /** Mensaje de ayuda debajo del field (se oculta cuando hay error). */
+        this.hint = null;
+        /** Valor del attr `autocomplete` del `<textarea>`. */
+        this.autocomplete = null;
+        /**
+         * Resize vertical (`true`) / none (`false`). Cuando `true`, muestra el resize
+         * handle de Figma en la esquina inferior derecha SIEMPRE (haya o no contador
+         * de texto); cuando `false`, no hay handle ni drag. Default `true`.
+         */
+        this.resizable = true;
+        /**
+         * Si se setea (>0), limita la cantidad de caracteres y renderiza el contador
+         * "<n>/<max>" dentro del field (bottom-right). `null`/0/negativo = sin contador
+         * ni límite. NO controla el resize handle (eso lo decide `resizable`).
+         */
+        this.maxLength = null;
+        // ── Label extras (espejan los @Input nuevos del Angular) ─────────────────
+        /** Texto secundario del label (ej. "Optional"). */
+        this.sublabel = null;
+        /** Muestra asterisco rojo en el label. Default `false`. */
+        this.required = false;
+        /** Tooltip (ícono info) en el label. Default `null` → sin ícono info. */
+        this.tooltip = null;
+        /**
+         * Valor del textarea. Controlled: el consumer escucha `valueChange` y reescribe
+         * este prop (idéntico al `[(value)]` del Angular). Default `''`.
+         */
+        this.value = '';
+        /**
+         * Flag de disabled inyectado por un form host (espeja `setDisabledState` del
+         * CVA Angular). El field queda deshabilitado si `disabled` OR este flag.
+         * `@State` para que `setDisabledState(true)` dispare re-render y el
+         * `<textarea disabled={...}>` se actualice (sin esto quedaba interactivo).
+         */
+        this.disabledByForm = false;
+        /** a11y: ids propios por instancia — `for` del label y `aria-describedby` del hint/error. */
+        this.controlId = `sui-textarea-${++nextId}`;
+        this.hintId = `${this.controlId}-hint`;
+        // ── Event handlers ───────────────────────────────────────────────────────
+        this.onInput = (e) => {
+            if (this.isDisabled)
+                return;
+            const el = e.target;
+            let v = el.value;
+            // Hard limit cuando maxLength está seteado (defensa además del [maxlength]
+            // nativo, que un paste podría bypassear en algunos UAs).
+            const clamped = this.clampToMax(v);
+            if (clamped !== v) {
+                v = clamped;
+                el.value = v;
+            }
+            this.value = v;
+            this.valueChange.emit(v);
+        };
+        this.onBlur = () => {
+            this.suiBlur.emit();
+        };
+    }
+    // ── Computeds (getters — espejan los `computed` del Angular) ─────────────
+    /** True cuando el field está deshabilitado (prop OR form host). */
+    get isDisabled() {
+        return this.disabled || this.disabledByForm;
+    }
+    /** maxLength efectivo y normalizado: number > 0 o null. */
+    get effectiveMax() {
+        const max = this.maxLength;
+        return typeof max === 'number' && max > 0 ? max : null;
+    }
+    /** True cuando hay que renderizar el TEXTO del contador (maxLength > 0). */
+    get showCounter() {
+        return this.effectiveMax !== null;
+    }
+    /** Texto del contador "<n>/<max>". Vacío si no hay maxLength. */
+    get counterText() {
+        var _a;
+        const max = this.effectiveMax;
+        if (max === null)
+            return '';
+        return `${((_a = this.value) !== null && _a !== void 0 ? _a : '').length}/${max}`;
+    }
+    /** Trunca un valor al maxLength efectivo (defensa además del attr nativo). */
+    clampToMax(v) {
+        const max = this.effectiveMax;
+        if (max !== null && v.length > max)
+            return v.slice(0, max);
+        return v;
+    }
+    // ── Watch ────────────────────────────────────────────────────────────────
+    /**
+     * Si el `value` cambia desde fuera y excede el maxLength, lo trunca (espeja el
+     * clamp del `writeValue` Angular para sets programáticos). Guard: no toca el
+     * valor mientras el user está typeando (el clamp del input ya corre en onInput).
+     */
+    onValueChange(next) {
+        if (this.textareaEl && document.activeElement === this.textareaEl)
+            return;
+        const clamped = this.clampToMax(next !== null && next !== void 0 ? next : '');
+        if (clamped !== next)
+            this.value = clamped;
+    }
+    // ── Public methods (parity con la API CVA del Angular) ───────────────────
+    /**
+     * Setea el valor desde un form host, truncando al maxLength (espejo de
+     * `writeValue` del ControlValueAccessor). `null` → cadena vacía.
+     */
+    async writeValue(v) {
+        this.value = this.clampToMax(v !== null && v !== void 0 ? v : '');
+    }
+    /** Deshabilita/habilita el field desde un form host (espejo de `setDisabledState`). */
+    async setDisabledState(isDisabled) {
+        // Solo mutamos el `@State`; el re-render reescribe `<textarea disabled>` y el
+        // binding `data-sui-disabled` del Host (vía el getter `isDisabled`).
+        this.disabledByForm = isDisabled;
+    }
+    // ── Render ─────────────────────────────────────────────────────────────
+    render() {
+        var _a, _b, _c, _d;
+        const disabled = this.isDisabled;
+        const hintMessage = this.error ? this.errorMessage : this.hint;
+        return (h(Host, { key: '29be66ae3a8a0b3dcb4ade70dd41e7499d1f46aa', "data-sui-error": this.error ? '' : null, "data-sui-disabled": disabled ? '' : null, "data-sui-readonly": this.readonly ? '' : null, "data-sui-resizable": this.resizable ? '' : null, "data-sui-size": this.size }, this.label && (h("sui-form-label", { key: '385347aad3335c093ec93f189c2cefa83307d60c', class: "sui-textarea__label-host", label: this.label, sublabel: (_a = this.sublabel) !== null && _a !== void 0 ? _a : undefined, required: this.required, tooltip: (_b = this.tooltip) !== null && _b !== void 0 ? _b : undefined, size: "medium", htmlFor: this.controlId })), h("div", { key: 'e70b4bcf6fa42f11f8a7fe497ec267c0a1f218a6', class: {
+                'sui-textarea__field': true,
+                'sui-textarea__field--error': this.error,
+                'sui-textarea__field--disabled': disabled,
+                'sui-textarea__field--readonly': this.readonly,
+            } }, h("textarea", { key: 'ce3139817ba2d7a3160e92d1f5e760dd3fab88ec', class: "sui-textarea__control", id: this.controlId, "aria-invalid": this.error ? 'true' : null, "aria-describedby": hintMessage ? this.hintId : null, ref: (el) => (this.textareaEl = el), rows: this.rows, value: this.value, placeholder: this.placeholder, disabled: disabled, readOnly: this.readonly, autocomplete: (_c = this.autocomplete) !== null && _c !== void 0 ? _c : undefined, maxLength: (_d = this.effectiveMax) !== null && _d !== void 0 ? _d : undefined, onInput: this.onInput, onBlur: this.onBlur }), (this.showCounter || this.resizable) && (h("div", { key: 'a7136952eb4ba54f0a713b85cf2d3601b815d306', class: "sui-textarea__counter", "aria-hidden": "true" }, this.showCounter && (h("span", { key: 'a63bbca5a4336177518e858f4394fc79126a8267', class: "sui-textarea__counter-text" }, this.counterText)), this.resizable && (
+        // Resize handle — Figma 435:5715 (12×12, currentColor). DOS
+        // diagonales (SUI v1.2: mismo path en Default/Error/Disabled,
+        // solo cambia el stroke color). stroke-width=1 == valor literal
+        // del export Figma + linecap/linejoin round para anti-alias limpio.
+        h("svg", { key: 'b6b7b323777a847a542ba7c70fe4cc083f0c3b43', class: "sui-textarea__resize-icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '731ee35df89c689a9fc04ac0f62680b56a29a6b1', d: "M9.11111 2L2 9.11111M10 6.44444L6.44444 10", stroke: "currentColor", "stroke-width": "1", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), hintMessage && (
+        // Hint Text [1.1] — Figma 435:5731 (neutral) / 435:7200 (error). Ambos
+        // estados usan `information-fill` 16×16 como ícono. El override fuerza
+        // information-fill en los dos casos; el color sigue del variant.
+        h("sui-form-hint", { key: '3788d27f1214f127e4f09eb7612588a7b4d8ee8d', class: "sui-textarea__hint-host", id: this.hintId, message: hintMessage, variant: this.error ? 'error' : 'neutral', icon: "information-fill" }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+SuiTextarea.style = suiTextareaCss();
+
+export { SuiTextarea as sui_textarea };

package/dist/esm/sui-time-picker-duration_2.entry.js

@@ -0,0 +1,101 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+const suiTimePickerDurationCss = () => `@charset "UTF-8";.sc-sui-time-picker-duration-h{display:inline-flex;align-items:center;justify-content:center;gap:0;box-sizing:border-box;padding:4px 10px;border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-8, 8px);background:var(--sui-bg-white-0, #fff);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));cursor:pointer;user-select:none;outline:none;overflow:hidden;font-family:var(--sui-font-sans, sans-serif);transition:background-color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1)), border-color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1))}.sui-time-picker-duration__label.sc-sui-time-picker-duration{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-0.084px;white-space:nowrap;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sc-sui-time-picker-duration-h:hover:not([disabled]):not([active]),.sc-sui-time-picker-duration-h:focus-visible:not([disabled]):not([active]){background:var(--sui-bg-weak-50, #f7f7f7);border-color:var(--sui-stroke-soft-200, #ebebeb);box-shadow:none}[active].sc-sui-time-picker-duration-h{gap:6px;border:1px solid transparent;background:var(--sui-primary-alpha-10, rgba(250, 115, 25, 0.1019607843));box-shadow:none}[active].sc-sui-time-picker-duration-h .sui-time-picker-duration__label.sc-sui-time-picker-duration{color:var(--sui-primary-base, #fa7319)}.sui-time-picker-duration__check.sc-sui-time-picker-duration{flex-shrink:0;display:inline-flex;color:var(--sui-primary-base, #fa7319)}[disabled].sc-sui-time-picker-duration-h{border:1px solid transparent;background:var(--sui-bg-weak-50, #f7f7f7);box-shadow:none;cursor:not-allowed;pointer-events:none}[disabled].sc-sui-time-picker-duration-h .sui-time-picker-duration__label.sc-sui-time-picker-duration{color:var(--sui-text-disabled-300, #d1d1d1)}`;
+
+const SuiTimePickerDuration = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clicked = createEvent(this, "clicked");
+        /** Texto visible del pill (ej. "30 min"). */
+        this.label = '';
+        /** Estado seleccionado: check + estilo primary. Default `false`. */
+        this.active = false;
+        /** Deshabilitado: bg weak-50, sin border, texto disabled. Default `false`. */
+        this.disabled = false;
+        this.onActivate = (event) => {
+            if (this.disabled) {
+                event.stopPropagation();
+                event.preventDefault();
+                return;
+            }
+            this.clicked.emit(event);
+        };
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+            event.preventDefault();
+            this.onActivate(event);
+        }
+    }
+    /* ── iOS :active fix ── */
+    onTouchStart() {
+        /* no-op a proposito; engage del touch pipeline iOS. */
+    }
+    onTouchEnd() {
+        this.el.blur();
+    }
+    render() {
+        return (h(Host, { key: '43f5bb764d2861b8962ee03a5b9e7db233a9711a', role: "button", tabindex: this.disabled ? '-1' : '0', "aria-pressed": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onActivate }, this.active && !this.disabled && (h("sui-icon", { key: 'dfe3320cdb7b5c53cb789896a11fc47d5ecc37d7', class: "sui-time-picker-duration__check", name: "checkbox-circle-fill", size: 12 })), h("span", { key: '34f64d367f7e3a5360033d07b87222bbc8029581', class: "sui-time-picker-duration__label" }, this.label)));
+    }
+    get el() { return getElement(this); }
+};
+SuiTimePickerDuration.style = suiTimePickerDurationCss();
+
+const suiTimePickerItemCss = () => `@charset "UTF-8";.sc-sui-time-picker-item-h{display:flex;align-items:center;gap:10px;box-sizing:border-box;width:100%;height:36px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);background:var(--sui-bg-white-0, #fff);overflow:hidden;cursor:pointer;user-select:none;outline:none;font-family:var(--sui-font-sans, sans-serif);transition:background-color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1))}.sc-sui-time-picker-item-h:hover,[highlighted].sc-sui-time-picker-item-h,.sc-sui-time-picker-item-h:focus-visible,[active].sc-sui-time-picker-item-h{background:var(--sui-bg-weak-50, #f7f7f7)}[disabled].sc-sui-time-picker-item-h{background:var(--sui-bg-white-0, #fff);cursor:not-allowed;pointer-events:none}.sui-time-picker-item__left.sc-sui-time-picker-item,.sui-time-picker-item__right.sc-sui-time-picker-item{display:flex;flex:1 1 0;min-width:0;align-items:center;gap:3px}.sui-time-picker-item__right.sc-sui-time-picker-item{justify-content:flex-end}.sui-time-picker-item__time.sc-sui-time-picker-item,.sui-time-picker-item__meridiem.sc-sui-time-picker-item{flex-shrink:0;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-0.084px;white-space:nowrap;font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-time-picker-item__time.sc-sui-time-picker-item{color:var(--sui-text-sub-600, #5c5c5c)}.sui-time-picker-item__meridiem.sc-sui-time-picker-item{color:var(--sui-text-soft-400, #a3a3a3)}[active].sc-sui-time-picker-item-h .sui-time-picker-item__time.sc-sui-time-picker-item{color:var(--sui-text-strong-950, #171717)}[disabled].sc-sui-time-picker-item-h .sui-time-picker-item__time.sc-sui-time-picker-item,[disabled].sc-sui-time-picker-item-h .sui-time-picker-item__meridiem.sc-sui-time-picker-item{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-time-picker-item__check.sc-sui-time-picker-item{flex-shrink:0;display:inline-flex;color:var(--sui-primary-base, #fa7319)}.sui-time-picker__panel--large.sc-sui-time-picker-item-h .sui-time-picker-item__time.sc-sui-time-picker-item,.sui-time-picker__panel--large .sc-sui-time-picker-item-h .sui-time-picker-item__time.sc-sui-time-picker-item,.sui-time-picker__panel--large.sc-sui-time-picker-item-h .sui-time-picker-item__meridiem.sc-sui-time-picker-item,.sui-time-picker__panel--large .sc-sui-time-picker-item-h .sui-time-picker-item__meridiem.sc-sui-time-picker-item{font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -0.011em)}`;
+
+const SuiTimePickerItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clicked = createEvent(this, "clicked");
+        /** Texto principal del bloque izquierdo (ej. "09:30"). */
+        this.time = '';
+        /** Sufijo AM/PM del bloque izquierdo. `''` = sin meridiem (formato 24h). */
+        this.meridiem = '';
+        /** Texto principal del bloque derecho. `''` = sin bloque derecho. */
+        this.rightTime = '';
+        /** Sufijo AM/PM del bloque derecho. `''` = sin meridiem derecho. */
+        this.rightMeridiem = '';
+        /** `'right'` (check al final) | `'center'` (check entre bloques). Default `right`. */
+        this.direction = 'right';
+        /** Estado seleccionado: muestra el check + texto strong. Default `false`. */
+        this.active = false;
+        /** Keyboard-hover (el mouse hover se maneja por CSS :hover). Default `false`. */
+        this.highlighted = false;
+        /** Deshabilitado: texto disabled-300, no interactivo. Default `false`. */
+        this.disabled = false;
+        this.onActivate = (event) => {
+            if (this.disabled) {
+                event.stopPropagation();
+                event.preventDefault();
+                return;
+            }
+            this.clicked.emit(event);
+        };
+    }
+    /** El bloque "Right" solo se renderiza cuando hay rightTime (RightText=true). */
+    get hasRight() {
+        return !!this.rightTime;
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+            event.preventDefault();
+            this.onActivate(event);
+        }
+    }
+    /* ── iOS :active fix (presencia del binding engage el touch pipeline) ── */
+    onTouchStart() {
+        /* no-op a proposito; la presencia del listener engage el touch pipeline iOS. */
+    }
+    onTouchEnd() {
+        this.el.blur();
+    }
+    render() {
+        const showCenterCheck = this.direction === 'center' && this.active;
+        const showRightCheck = this.direction === 'right' && this.active;
+        return (h(Host, { key: '042386b38b2be559b5da1678d02289a89418d990', role: "option", tabindex: this.disabled ? '-1' : '0', "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onActivate }, h("span", { key: '3f7d3b189264325df32c77e1206bae8c3ae52f65', class: "sui-time-picker-item__left" }, h("span", { key: '64a6129c4cdb8eaf99714105134ab64ab0c7e2b9', class: "sui-time-picker-item__time" }, this.time), this.meridiem && (h("span", { key: '6b74c6a459980ff2fc8258b19b0e404b47aa0eb2', class: "sui-time-picker-item__meridiem" }, this.meridiem))), showCenterCheck && (h("sui-icon", { key: '4e7e907872733ef21a12775ba289f678af730f9c', class: "sui-time-picker-item__check", name: "checkbox-circle-fill", size: 14 })), this.hasRight && (h("span", { key: '3166c58107500e48bb6fb8774a9fb9514897836b', class: "sui-time-picker-item__right" }, h("span", { key: '9f9c355da7e711ee87aa94947d7d90ce1a2c69c0', class: "sui-time-picker-item__time" }, this.rightTime), this.rightMeridiem && (h("span", { key: '44abc7e70c89b2eec3e3c3e021f08f44fd0a3b5f', class: "sui-time-picker-item__meridiem" }, this.rightMeridiem)))), showRightCheck && (h("sui-icon", { key: '0cb36f87e23cf542b0fd3d8e71eb96ed4d37f99b', class: "sui-time-picker-item__check", name: "checkbox-circle-fill", size: 14 }))));
+    }
+    get el() { return getElement(this); }
+};
+SuiTimePickerItem.style = suiTimePickerItemCss();
+
+export { SuiTimePickerDuration as sui_time_picker_duration, SuiTimePickerItem as sui_time_picker_item };

package/dist/esm/sui-time-picker-status.entry.js

@@ -0,0 +1,64 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+const suiTimePickerStatusCss = () => `@charset "UTF-8";.sc-sui-time-picker-status-h{display:inline-flex;align-items:center;justify-content:center;gap:4px;box-sizing:border-box;padding:4px 10px 4px 6px;border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-8, 8px);background:var(--sui-bg-white-0, #fff);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));cursor:pointer;user-select:none;outline:none;overflow:hidden;font-family:var(--sui-font-sans, sans-serif);transition:background-color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1)), border-color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1))}.sui-time-picker-status__dot.sc-sui-time-picker-status{display:block;flex-shrink:0;width:16px;height:16px;background-image:radial-gradient(circle at center, currentColor 0, currentColor 3px, transparent 3.5px)}.sui-time-picker-status__label.sc-sui-time-picker-status{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-0.084px;white-space:nowrap;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}[type=available].sc-sui-time-picker-status-h .sui-time-picker-status__dot.sc-sui-time-picker-status{color:var(--sui-state-success-base, #1fc16b)}[type=busy].sc-sui-time-picker-status-h .sui-time-picker-status__dot.sc-sui-time-picker-status{color:var(--sui-state-error-base, #fb3748)}[type=in-meeting].sc-sui-time-picker-status-h .sui-time-picker-status__dot.sc-sui-time-picker-status{color:var(--sui-state-warning-base, #fa7319)}[type=offline].sc-sui-time-picker-status-h .sui-time-picker-status__dot.sc-sui-time-picker-status{color:var(--sui-state-faded-base, #7b7b7b)}.sc-sui-time-picker-status-h:hover:not([disabled]):not([selected]),.sc-sui-time-picker-status-h:focus-visible:not([disabled]):not([selected]){background:var(--sui-bg-weak-50, #f7f7f7);border-color:var(--sui-stroke-soft-200, #ebebeb);box-shadow:none}[selected].sc-sui-time-picker-status-h{border:1px solid transparent;box-shadow:none}[selected][type=available].sc-sui-time-picker-status-h{background:var(--sui-state-success-lighter, #e3f7ec)}[selected][type=available].sc-sui-time-picker-status-h .sui-time-picker-status__label.sc-sui-time-picker-status{color:var(--sui-state-success-dark, #0b4627)}[selected][type=busy].sc-sui-time-picker-status-h{background:var(--sui-state-error-lighter, #ffebec)}[selected][type=busy].sc-sui-time-picker-status-h .sui-time-picker-status__label.sc-sui-time-picker-status{color:var(--sui-state-error-dark, #681219)}[selected][type=in-meeting].sc-sui-time-picker-status-h{background:var(--sui-state-warning-lighter, #fff3eb)}[selected][type=in-meeting].sc-sui-time-picker-status-h .sui-time-picker-status__label.sc-sui-time-picker-status{color:var(--sui-state-warning-dark, #71330a)}[selected][type=offline].sc-sui-time-picker-status-h{background:var(--sui-state-faded-lighter, #f5f5f5)}[selected][type=offline].sc-sui-time-picker-status-h .sui-time-picker-status__label.sc-sui-time-picker-status{color:var(--sui-state-faded-dark, #262626)}[disabled].sc-sui-time-picker-status-h{border:1px solid transparent;background:var(--sui-bg-weak-50, #f7f7f7);box-shadow:none;cursor:not-allowed;pointer-events:none}[disabled].sc-sui-time-picker-status-h .sui-time-picker-status__label.sc-sui-time-picker-status{color:var(--sui-text-disabled-300, #d1d1d1)}[disabled].sc-sui-time-picker-status-h .sui-time-picker-status__dot.sc-sui-time-picker-status{color:var(--sui-icon-disabled-300, #d1d1d1)}`;
+
+const SuiTimePickerStatus = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clicked = createEvent(this, "clicked");
+        /** Tipo de disponibilidad. Default `available`. */
+        this.type = 'available';
+        /** Override del texto. `''` = label canon del type. Default `''`. */
+        this.label = '';
+        /** Estado seleccionado: bg + texto semantico del type. Default `false`. */
+        this.selected = false;
+        /** Deshabilitado: bg weak-50, sin border/shadow, dot disabled-300. Default `false`. */
+        this.disabled = false;
+        this.onActivate = (event) => {
+            if (this.disabled) {
+                event.stopPropagation();
+                event.preventDefault();
+                return;
+            }
+            this.clicked.emit(event);
+        };
+    }
+    /** Copy canon de cada type, en español como el SUI Angular (sui-textos `fecha.*`). */
+    get defaultLabel() {
+        switch (this.type) {
+            case 'busy':
+                return 'Ocupado';
+            case 'in-meeting':
+                return 'En reunión';
+            case 'offline':
+                return 'Desconectado';
+            case 'available':
+            default:
+                return 'Disponible';
+        }
+    }
+    /** Texto a mostrar: override del consumer o el copy canon del type. */
+    get displayLabel() {
+        return this.label || this.defaultLabel;
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+            event.preventDefault();
+            this.onActivate(event);
+        }
+    }
+    /* ── iOS :active fix ── */
+    onTouchStart() {
+        /* no-op a proposito; engage del touch pipeline iOS. */
+    }
+    onTouchEnd() {
+        this.el.blur();
+    }
+    render() {
+        return (h(Host, { key: '37e7ede383f5b5833974cd1f0c3b2618ebaf36cf', role: "button", tabindex: this.disabled ? '-1' : '0', "aria-pressed": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onActivate }, h("span", { key: '07829ee4dad2841acd35e0eaff08dedf63541da2', class: "sui-time-picker-status__dot", "aria-hidden": "true" }), h("span", { key: 'e7fb06f15987bfc3a8edcb3c4c388cf66be1f670', class: "sui-time-picker-status__label" }, this.displayLabel)));
+    }
+    get el() { return getElement(this); }
+};
+SuiTimePickerStatus.style = suiTimePickerStatusCss();
+
+export { SuiTimePickerStatus as sui_time_picker_status };