@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/types/components/sui-tag-input/sui-tag-input.d.ts

@@ -0,0 +1,189 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiTagInputSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+/**
+ * `<sui-tag-input>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-tag-input/). Misma API
+ * pública (size/placeholder/disabled/error/errorMessage/rightIcon/
+ * label/sublabel/required/tooltip/hint/commaSeparator/allowDuplicates/maxTags/
+ * addOnBlur/value + eventos tagAdded/tagRemoved), TODAS las variantes/sizes/
+ * states de la matriz Figma, el mismo comportamiento (Enter/coma commitea,
+ * Backspace en vacío quita el último, click en la X quita, click en el field
+ * enfoca el input, addOnBlur) y los mismos VALORES exactos vía tokens del DS
+ * (NO hex). El accent del DS es NARANJA brand (#fa7319), NUNCA el azul de Figma
+ * — aunque este componente, como el tag, trabaja solo con tokens neutros
+ * (soft-200 / strong-950 / weak-50 / error-base) + ring focus, igual que el
+ * Angular original. El naranja no aparece en ninguna variante.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component set "Tag Input [1.1]"
+ *   (frame 428:4860). Matriz: State(6: Default/Hover/Focus/Filled/Disabled/
+ *   Error) x Size(3: Medium 40 / Small 36 / X-Small 32).
+ *
+ * EXACT (verificado pixel/token vs Figma, copiado del .ts/.scss Angular):
+ *   Sizes (input box "Basic"):
+ *   - xsmall (X-Small 32): py=6, pl=10, pr=6, gap=6, radius=8
+ *   - small  (Small 36):   py=8, pl=10, pr=8, gap=8, radius=8
+ *   - medium (Medium 40):  py=10, pl=12, pr=10, gap=8, radius=10 (default)
+ *   - large  (48, extensión SUI 03-10-2026): py=12−1, pl=14, pr=12, gap=10, radius=12
+ *   - xlarge (52, extensión SUI 03-10-2026): py=14−1, pl=16, pr=14, gap=10, radius=12
+ *     (mismos valores que `sui-input` large/xlarge; texto 16/24). En large/xlarge
+ *     los chips acompañan (tag large/xlarge) y el label queda en medium.
+ *
+ * Homologado con el SUI Angular (05-11-2026): sizes large/xlarge, `rightIcon`
+ * string|boolean, ids a11y (label `for`, `aria-describedby`, `aria-invalid`),
+ * strip del `title` nativo del host y placeholder en español. Se omiten
+ * `ControlValueAccessor` y `provideSuiTextos` (Angular-only): los textos van
+ * fijos en español, sobreescribibles con `placeholder`.
+ *
+ *   El alto se deriva del line-height(20) del texto + 2xpy. min-height fija
+ *   el alto canon (32/36/40) para evitar reflow en iOS Safari.
+ *
+ *   State tokens (verified node-by-node):
+ *     Default  -> bg white-0 / border soft-200 / shadow regular-x-small / placeholder soft-400
+ *     Hover    -> bg weak-50  / SIN border        / SIN shadow            / placeholder sub-600
+ *     Focus    -> bg white-0 / border strong-950 / ring 2px white + 4px slate-alpha-16
+ *     Filled   -> bg white-0 / border soft-200 / shadow regular-x-small / texto strong-950
+ *     Disabled -> bg weak-50 / SIN border / texto disabled-300 / cursor not-allowed
+ *     Error    -> bg white-0 / border error-base / shadow / hint en error-base
+ *
+ *   DISTINCION CLAVE vs Input Basic: el hover del Tag Input mueve bg->weak-50 y
+ *   QUITA el border (igual que disabled), mientras que el Input Basic solo
+ *   cambia border-color (soft-200 -> sub-300). No confundir (Figma 428:4920).
+ *
+ *   Tags row (frame "Tags"): fila aparte debajo del input box, pt=4 gap=8,
+ *   wrap a multiples lineas. Cada pill es un <sui-tag tag-style="stroke"
+ *   dismissible> (radius 6, padding propio definido en sui-tag).
+ *
+ *   Trailing icon (Figma rightIcon / pickRight, node 428:4819): cuando
+ *   rightIcon=true, el field renderea un icono 20x20 info-custom-fill coloreado
+ *   text-soft-400 en su posicion trailing. El consumer puede sustituir el
+ *   contenido proyectando markup en el slot `right` (equivalente pickRight).
+ *
+ *   Hint icon (Figma Hint Text node 428:4900): el hint neutral renderea el icono
+ *   16x16 information-fill (sub-600); el error conserva su icono default
+ *   (error-warning-line). Se logra pasando icon='information-fill' a
+ *   sui-form-hint en la variante neutral.
+ *
+ * ── DIVERGENCIAS vs el stack Angular (justificadas) ─────────────────────────
+ *  1. `model<string[]>` + `ControlValueAccessor` no existen en Stencil. Se
+ *     reemplazan por `@Prop({ mutable: true }) value: string[]` (controlled) +
+ *     `@Event() valueChange`. El consumer escucha `valueChange` y reescribe el
+ *     prop `value` (idéntico al modo `[(value)]` del Angular en uso normal).
+ *     El componente igual muta su prop local para feel inmediato (como sui-input).
+ *  2. El `_disabledByForm` del CVA no aplica (sin Forms API). `isDisabled` ==
+ *     `disabled` a secas.
+ *  3. El Angular usa `<ng-content select="[slot=right]">` con fallback. En
+ *     Stencil `scoped` el `<slot name="right">` admite fallback content.
+ *  4. El click-to-focus del field usa `onMouseDown` (espejo de `onFieldPointerDown`)
+ *     con el mismo guard de no robar el click de input/sui-tag.
+ *
+ * `scoped: true` (light DOM, NO shadow): igual que sui-input/sui-tag. Permite
+ * stylear el contenido proyectado (slot right) y que los <sui-tag>/<sui-icon>/
+ * <sui-form-label>/<sui-form-hint> internos hereden tokens/fonts sin pelear con
+ * shadow boundaries. Misma estrategia que el Angular (sin shadow DOM).
+ *
+ * Slots:
+ *  - `right` -> contenido trailing del field cuando rightIcon=true (sustituye al
+ *    info-custom-fill default; equivalente al `pickRight` del Figma).
+ */
+export declare class SuiTagInput {
+    el: HTMLElement;
+    /** Tamaño del field. Default `medium` (40px). */
+    size: SuiTagInputSize;
+    /** Placeholder del input de texto libre. */
+    placeholder: string;
+    /** Deshabilita el control (bg-weak-50, sin border, no editable). Default `false`. */
+    disabled: boolean;
+    /** Activa borde rojo + muestra `errorMessage`. Default `false`. */
+    error: boolean;
+    /** Mensaje de error (se muestra cuando `error`). */
+    errorMessage: string | null;
+    /**
+     * Renderiza el icono trailing del frame "Basic" (Figma `rightIcon`, node
+     * 428:4819). Default: `info-custom-fill` 20x20 coloreado text-soft-400. Para
+     * sustituir el contenido proyectá markup en el slot `right` (equivalente
+     * `pickRight`).
+     */
+    rightIcon: string | boolean;
+    /** Nombre resuelto del icono trailing (null = no se renderiza). */
+    private get rightIconCfg();
+    /** El label no crece con el campo: en large/xlarge queda en medium. */
+    private get labelSize();
+    /** Los chips acompañan al campo grande: large/xlarge → tag large/xlarge; resto medium. */
+    private get tagSize();
+    /** a11y: ids propios por instancia. */
+    private readonly controlId;
+    private readonly hintId;
+    /** Texto del label arriba del field. */
+    label: string | null;
+    /** Sublabel opcional (texto secundario después del label). */
+    sublabel: string | null;
+    /** Muestra asterisco rojo de requerido en el label. Default `false`. */
+    required: boolean;
+    /** Tooltip (ícono info) en el label. Default `null` → sin ícono info. */
+    tooltip: string | null;
+    /** Mensaje de ayuda debajo del field (se oculta cuando hay error). */
+    hint: string | null;
+    /** Permite que la coma además de Enter agregue un tag. Default `false` (solo Enter). */
+    commaSeparator: boolean;
+    /** Permite tags duplicados. Default `false` (dedupe case-sensitive). */
+    allowDuplicates: boolean;
+    /** Máximo de tags. `null` = sin tope. */
+    maxTags: number | null;
+    /** Commitea el texto pendiente como tag al perder el foco. Default `false`. */
+    addOnBlur: boolean;
+    /**
+     * Lista de tags — el value expuesto. Controlled: el consumer escucha
+     * `valueChange` y reescribe este prop. El componente igual lo muta localmente
+     * para feel inmediato (espejo del `model<string[]>` del Angular). El texto
+     * pendiente del input NO forma parte del value hasta commitearse como tag.
+     * Default `[]`.
+     */
+    value: string[];
+    /** Se emite con la lista completa de tags al cambiar (add/remove). */
+    valueChange: EventEmitter<string[]>;
+    /** Se emite con el tag agregado. */
+    tagAdded: EventEmitter<string>;
+    /** Se emite con el tag removido. */
+    tagRemoved: EventEmitter<string>;
+    /** Texto pendiente en el input (no forma parte del value hasta commitearse). */
+    draft: string;
+    private inputEl?;
+    /** `isDisabled` del Angular (sin `_disabledByForm` — Stencil no tiene Forms API). */
+    private get isDisabled();
+    /** True cuando hay al menos un tag (para renderizar la fila de tags). */
+    private get hasTags();
+    private onInput;
+    private onKeydown;
+    private onBlur;
+    /**
+     * Click en el field → focusea el input. UX nativa de tag inputs: tocar
+     * cualquier zona del campo (incluido el padding) lleva el caret al input.
+     * Espejo de `onFieldPointerDown` del Angular.
+     */
+    private onFieldMouseDown;
+    /**
+     * iOS WKWebView: un <div> NO recibe mousedown sintetizado a partir de touch
+     * a menos que tenga un listener de click explícito. onTouchStart replica la
+     * misma lógica de redirección al input para que el focus-on-padding funcione
+     * en mobile. El closeButton de <sui-tag> ya trae sus propios onTouchStart/
+     * onTouchEnd internamente — no hace falta coordinarlos desde acá.
+     */
+    private onFieldTouchStart;
+    /** Commitea el draft actual como tag (trim, dedupe, cap). Limpia el input. */
+    private commitDraft;
+    /** Agrega un tag respetando dedupe y maxTags. Devuelve true si se agregó. */
+    private addTagInternal;
+    /** Quita el tag en `index`. */
+    private removeAtInternal;
+    /** Quita el último tag (usado por Backspace en input vacío). */
+    private removeLast;
+    /** Agrega un tag programáticamente. Devuelve true si se agregó (dedupe/cap). */
+    addTag(tag: string): Promise<boolean>;
+    /** Quita el tag en `index`. */
+    removeAt(index: number): Promise<void>;
+    /** Strip del `title` nativo del host (evita el tooltip gris del OS; regla del DS). */
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/components/sui-textarea/sui-textarea.d.ts

@@ -0,0 +1,157 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Tamaño del campo — los mismos nombres que `sui-input` para que un formulario
+ * pase el mismo `size` a los dos. Cambia el padding y el radio (el alto lo
+ * ponen las `rows`). Extensión SUI (03-10-2026): la guía solo dibuja el medium.
+ */
+export type SuiTextareaSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+/**
+ * `<sui-textarea>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Componente COMPUESTO portado 1:1 desde el Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-textarea/). Reusa los
+ * primitivos ya portados `<sui-form-label>` (label/sublabel/required/tooltip) y
+ * `<sui-form-hint>` (hint/errorMessage). Misma API pública, TODOS los estados
+ * (default · hover · focus · filled · disabled · error · readonly), el
+ * character counter "<n>/<max>", el resize handle de Figma, y mismos VALORES
+ * exactos vía tokens del DS (NO hex). El accent del DS es NARANJA brand
+ * (#fa7319 = --sui-primary-base), NUNCA el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component set "Text Area [1.1]"
+ *   (nodeId 435:5725, 6 states) + "Character Counter [1.1]" (nodeId 435:5712).
+ *
+ * EXACT specs (leídos de Figma MCP por estado):
+ *   - border-radius: var(--sui-radius-12) (12px)
+ *   - padding:       10px 10px 10px 12px (asimétrico, exacto)
+ *   - inner layout:  flex column, gap 8px, justify-center (textarea + counter row)
+ *   - shadow:        regular-shadow/x-small — sólo estado DEFAULT
+ *   - Font (text):   Paragraph/Small (14 / 400 / 20 / -0.6%)
+ *
+ *   State      bg            border               counter color
+ *   ─────────  ────────────  ───────────────────  ──────────────────
+ *   Default    bg-white-0    stroke-soft-200      text-soft-400
+ *   Hover      bg-weak-50    (none)               text-soft-400
+ *   Focus      bg-white-0    stroke-strong-950    text-soft-400
+ *   Disabled   bg-weak-50    (none)               text-disabled-300
+ *   Error      bg-white-0    state-error-base     state-error-base
+ *
+ *   Focus ring: 0 0 0 2px bg-white-0, 0 0 0 4px slate-alpha-16.
+ *   Hover override del placeholder a text/sub-600 (#5c5c5c) — verificado vs 435:7023.
+ *
+ *   Character Counter row (435:5712): flex, gap 6px, justify-end, items-center.
+ *     - "<n>/<max>" Subheading/2X-Small (11 / 500 / 12 / 0.02em), uppercase.
+ *       Render SÓLO cuando [maxLength] está seteado (>0).
+ *     - resize handle: SVG 12×12, DOS diagonales
+ *       (path M9.11111 2L2 9.11111M10 6.44444L6.44444 10), stroke=currentColor.
+ *       Render SIEMPRE que resizable=true, independiente de maxLength (Figma
+ *       muestra el handle en TODOS los estados). El grip nativo del browser se
+ *       suprime via ::-webkit-resizer { display:none } — el textarea sigue
+ *       draggable via native `resize: vertical`.
+ *
+ * ── DIVERGENCIAS vs el stack Angular (justificadas) ─────────────────────────
+ *  1. `model<string>` + `ControlValueAccessor` (NG_VALUE_ACCESSOR) no existen en
+ *     Stencil. Se reemplazan por `@Prop({ mutable: true }) value` (controlled) +
+ *     `@Event() valueChange`. El consumer escucha `valueChange` y reescribe el
+ *     prop `value` (idéntico al `[(value)]` del Angular). El método público
+ *     `writeValue()` se preserva como `@Method()` para parity de la API CVA y
+ *     porque el spec lo ejercita directamente (trunca al maxLength).
+ *  2. El `setDisabledState()` del CVA → `@Method() setDisabledState()` que setea
+ *     un flag interno espejado en el getter `isDisabled`.
+ *  3. El delegado a `<sui-form-label>` / `<sui-form-hint>` se mantiene (ambos ya
+ *     portados en este stack), igual que el Angular original.
+ *
+ * `scoped: true` (light DOM, NO shadow): igual que sui-input/sui-button. Permite
+ * que los selectores `:host([data-sui-*])` + el `<textarea>` y los subcomponentes
+ * proyectados hereden tokens/fonts sin pelear con shadow DOM.
+ */
+export declare class SuiTextarea {
+    el: HTMLElement;
+    /** Filas iniciales del `<textarea>`. Default `4`. */
+    rows: number;
+    /**
+     * 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.
+     */
+    size: SuiTextareaSize;
+    /** Texto placeholder. */
+    placeholder: string;
+    /** Deshabilita el field (bg-weak-50, sin border, no editable). Default `false`. */
+    disabled: boolean;
+    /** Solo lectura (bg-weak-50, border suave, no editable pero seleccionable). Default `false`. */
+    readonly: boolean;
+    /** Activa borde rojo + muestra `errorMessage` + counter rojo. Default `false`. */
+    error: boolean;
+    /** Mensaje de error (se muestra cuando `error`, en lugar del hint). */
+    errorMessage: string | null;
+    /** Texto del label arriba del field. */
+    label: string | null;
+    /** Mensaje de ayuda debajo del field (se oculta cuando hay error). */
+    hint: string | null;
+    /** Valor del attr `autocomplete` del `<textarea>`. */
+    autocomplete: string | 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`.
+     */
+    resizable: boolean;
+    /**
+     * 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`).
+     */
+    maxLength: number | null;
+    /** Texto secundario del label (ej. "Optional"). */
+    sublabel: string | null;
+    /** Muestra asterisco rojo en el label. Default `false`. */
+    required: boolean;
+    /** Tooltip (ícono info) en el label. Default `null` → sin ícono info. */
+    tooltip: string | null;
+    /**
+     * Valor del textarea. Controlled: el consumer escucha `valueChange` y reescribe
+     * este prop (idéntico al `[(value)]` del Angular). Default `''`.
+     */
+    value: string;
+    /**
+     * 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).
+     */
+    private disabledByForm;
+    private textareaEl?;
+    /** a11y: ids propios por instancia — `for` del label y `aria-describedby` del hint/error. */
+    private readonly controlId;
+    private readonly hintId;
+    /** True cuando el field está deshabilitado (prop OR form host). */
+    private get isDisabled();
+    /** maxLength efectivo y normalizado: number > 0 o null. */
+    private get effectiveMax();
+    /** True cuando hay que renderizar el TEXTO del contador (maxLength > 0). */
+    private get showCounter();
+    /** Texto del contador "<n>/<max>". Vacío si no hay maxLength. */
+    private get counterText();
+    /** Trunca un valor al maxLength efectivo (defensa además del attr nativo). */
+    private clampToMax;
+    /**
+     * 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: string): void;
+    /** Se emite con el valor (ya truncado al maxLength) al cambiar el textarea. */
+    valueChange: EventEmitter<string>;
+    /** Se emite en blur (espejo del `onTouched` del CVA Angular). */
+    suiBlur: EventEmitter<void>;
+    /**
+     * Setea el valor desde un form host, truncando al maxLength (espejo de
+     * `writeValue` del ControlValueAccessor). `null` → cadena vacía.
+     */
+    writeValue(v: string | null): Promise<void>;
+    /** Deshabilita/habilita el field desde un form host (espejo de `setDisabledState`). */
+    setDisabledState(isDisabled: boolean): Promise<void>;
+    private onInput;
+    private onBlur;
+    render(): any;
+}

package/dist/types/components/sui-time-picker/sui-time-picker.d.ts

@@ -0,0 +1,191 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiTimeDurationPreset, SuiTimeFormat, SuiTimeValue } from './sui-time-picker.data';
+/**
+ * `<sui-time-picker>` — SUI Design System (SUI Design System 2.0). COMPUESTO + COMPLEJO.
+ *
+ * Portado 1:1 del componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-time-picker/). Misma API
+ * publica (label/sublabel/required/tooltip/hint/errorMessage/error/placeholder/
+ * disabled/size/format/step/durationPresets/inline/showFooter/value), TODAS las
+ * variantes/states/comportamiento (overlay popover + outside-click + Escape,
+ * staged-value + Cancel/Apply, seleccion por columna en 12h/24h, presets de
+ * duracion, lazy mount del panel, mobile) y mismos VALORES exactos (tokens del
+ * DS, no hex). El accent del DS es NARANJA brand (#fa7319), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ *   TimePickerItems          165483:5687  (fila — sub-componente sui-time-picker-item)
+ *   TimePickerSelectDuration 165483:6046  (pill duracion — sui-time-picker-duration)
+ *   TimePickerSelectStatus   165596:41348 (pill estado — sui-time-picker-status)
+ * El panel contenedor no tiene nodo dedicado; se compone aqui a partir de los
+ * sub-componentes + el chrome de popover canon del DS (sui-datepicker). El status
+ * pill NO se monta en este popover por default (es para schedulers/disponibilidad);
+ * el consumer lo usa suelto, igual que <sui-time-picker-item> fuera del picker.
+ *
+ * Arquitectura: trigger (input field) que abre un panel con columnas scrollables
+ * de hora / minuto / (periodo AM-PM en 12h) usando <sui-time-picker-item>, mas
+ * una fila opcional de presets de duracion usando <sui-time-picker-duration>.
+ * Patron staged-value + Cancel/Apply. El modo `inline` renderea el panel inline
+ * (sin trigger ni flotacion).
+ *
+ * DIFERENCIA vs Angular (intencional, equivalente funcional):
+ *   - El Angular delega el overlay a `sui-dropdown-menu` (CDK Overlay con flip
+ *     arriba/abajo). En Stencil no hay CDK; se replica el patron del
+ *     `<sui-datepicker>` ya portado: panel position:absolute con lazy-mount +
+ *     `@Listen('pointerdown', target:'document')` para outside-click y Escape.
+ *     Mismo contrato observable (abre abajo del trigger, cierra al click fuera /
+ *     Escape, esos closes = cancel). El chrome (radius-20, border soft-200,
+ *     shadow-medium) es identico.
+ *   - CVA (ControlValueAccessor) es Angular-only. El contrato equivalente es el
+ *     prop `value` (SuiTimeValue | string | null) + el evento `valueChange`. El
+ *     setter acepta string y lo parsea (preserva el writeValue(string) del CVA).
+ *
+ * `scoped: true` (light DOM): asi `:host([data-sui-*])` reflejan el estado del
+ * host, el outside-click compara `contains(target)` contra el host real, y los
+ * `<sui-*>` internos heredan tokens del global sin pelear con shadow DOM.
+ *
+ * iOS WKWebView :active fix: el host escucha touchstart/touchend en PASIVO (como
+ * SuiToque del SUI Angular); los eventos táctiles del trigger burbujean hasta él
+ * y sui-button, las filas y las pills lo manejan en su propio componente.
+ *
+ * @prop label / sublabel / required / tooltip / hint / errorMessage / error
+ * @prop placeholder / disabled / size
+ * @prop format — '12h' (default, AM/PM) | '24h'
+ * @prop step — incremento de minutos en la lista (default 5)
+ * @prop durationPresets — pills de duracion rapida (default `[]`; pasar DEFAULT_DURATION_PRESETS para 15/30/45/60)
+ * @prop inline — renderea el panel sin trigger ni popover
+ * @prop showFooter — muestra Cancel/Apply (default true)
+ * @prop value — SuiTimeValue | string | null (string se parsea)
+ *
+ * Homologado con el SUI Angular (05-11-2026): sizes large (48) y xlarge (52) con
+ * panel grande (filas de 44, texto 16) y Cancelar/Aplicar en large (también
+ * siempre en mobile ≤767 px), placeholder «Elige una hora», `durationPresets`
+ * vacío por default (BREAKING: antes 15/30/45/60 — se aplicaban como hora desde
+ * la medianoche y rompían la hora), el panel inline se hidrata desde `value`,
+ * las columnas se centran en la selección al abrir y el host borra su `title`.
+ * Se omiten CVA y el CDK Overlay (Angular-only): el panel sigue montado dentro
+ * del host con position:absolute y outside-click/Escape propios.
+ */
+export declare class SuiTimePicker {
+    el: HTMLElement;
+    /** Label superior (mismo slot que sui-input/sui-select). `''` = sin label. */
+    label: string;
+    /** Sublabel del form-label. `''` = sin sublabel. */
+    sublabel: string;
+    /** Marca el campo como requerido (asterisco en el label). Default `false`. */
+    required: boolean;
+    /** Tooltip del form-label. `''` = sin tooltip. */
+    tooltip: string;
+    /** Texto de ayuda bajo el trigger. `''` = sin hint. */
+    hint: string;
+    /** Mensaje de error (reemplaza el hint cuando error=true). `''` = sin mensaje. */
+    errorMessage: string;
+    /** Estado de error (border rojo + errorMessage). Default `false`. */
+    error: boolean;
+    /** Placeholder del trigger cuando no hay valor. Imperativo con tuteo. Default `Elige una hora`. */
+    placeholder: string;
+    /** Deshabilitado: bloquea el trigger. Default `false`. */
+    disabled: boolean;
+    /**
+     * Alto del campo: small 36 · medium 40 (default) · large 48 · xlarge 52
+     * (extensiones SUI para mobile, el alto de sui-input large/xlarge). En
+     * large/xlarge las filas del panel miden 44 y Cancelar/Aplicar van en large.
+     */
+    size: 'small' | 'medium' | 'large' | 'xlarge';
+    /** Formato de display: `12h` (AM/PM) o `24h`. Default `12h`. */
+    format: SuiTimeFormat;
+    /** Incremento de minutos de la lista (1, 5, 15, ...). Default `5`. */
+    step: number;
+    /**
+     * Pills de duracion rapida bajo las columnas (property binding). Default `[]`:
+     * los presets se aplican como «tiempo desde la medianoche» («30 min» → 12:30 AM).
+     * Para mostrarlos, pasar `DEFAULT_DURATION_PRESETS` o una lista propia.
+     */
+    durationPresets: readonly SuiTimeDurationPreset[];
+    /** Renderea el panel inline (sin trigger ni popover). Default `false`. */
+    inline: boolean;
+    /** Muestra Cancel/Apply. Si false, el click en un item aplica directo. Default `true`. */
+    showFooter: boolean;
+    /**
+     * Valor actual (property binding o attr string). SuiTimeValue, un string como
+     * "9:30 PM" / "21:30" (se parsea), o null. Default `null`. El consumer hace el
+     * two-way binding escuchando `valueChange`.
+     */
+    value: SuiTimeValue | string | null;
+    /** Emite el valor confirmado (al Apply, o al click en un item si showFooter=false). */
+    valueChange: EventEmitter<SuiTimeValue | null>;
+    /** Emite cuando el popover se abre. */
+    opened: EventEmitter<void>;
+    /** Emite cuando el popover se cierra (Cancel, outside-click, Escape, Apply). */
+    closed: EventEmitter<void>;
+    /** Popover abierto. */
+    open: boolean;
+    /** Valor canonico resuelto (string parseado o el objeto tal cual). */
+    resolvedValue: SuiTimeValue | null;
+    /** Valor staged (editable en el panel hasta Apply). */
+    staged: SuiTimeValue | null;
+    /** Indice del preset de duracion activo — `null` = ninguno. */
+    activePresetIndex: number | null;
+    /** Mobile (≤767 px): Cancelar/Aplicar siempre en large (se tocan con el dedo). */
+    private isMobile;
+    private mql?;
+    private onMql;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * Al cambiar value desde afuera (estando cerrado), re-sincroniza staged. En
+     * inline `open` es siempre false → también hidrata la selección (antes el
+     * panel inline abría vacío y Aplicar borraba el valor).
+     */
+    onValueChange(): void;
+    private normalizeValue;
+    private get isDisabled();
+    /** sui-form-label/hint no tienen large: quedan en medium (small sigue small). */
+    private get labelSize();
+    /** Panel grande (filas de 44 con texto 16) con el campo large o xlarge. */
+    private get panelLarge();
+    /** Botones del footer: large con el campo large/xlarge y siempre en mobile; small (Figma) si no. */
+    private get footerButtonSize();
+    private get hourItems();
+    private get minuteItems();
+    private get periods();
+    /** En 12h se muestra la columna de periodo. */
+    private get showPeriod();
+    /** Display 12h de la staged (hora 1–12 + periodo). */
+    private get staged12h();
+    /** Texto del trigger. */
+    private get triggerText();
+    private get hintMessage();
+    private get hasHint();
+    private isHourActive;
+    private isMinuteActive;
+    private isPeriodActive;
+    private isPresetActive;
+    private toggle;
+    private openPopover;
+    /**
+     * Centra la opción activa de cada columna (hora / minuto / periodo) en su
+     * viewport, sin animación: el panel aparece ya posicionado. Con un step que
+     * no contiene el minuto exacto (-1) la columna queda en su scroll actual.
+     */
+    private scrollColumnsToSelection;
+    private cancel;
+    private apply;
+    private selectHour;
+    private selectMinute;
+    private selectPeriod;
+    /**
+     * Aplica un preset de duracion. Lo interpreta como "hora del dia = duracion
+     * desde medianoche" (ej. 30 min → 00:30, 1 h → 01:00). Lectura mas directa de
+     * un selector de duracion sin una base externa.
+     */
+    private selectPreset;
+    /** Setea staged y, si no hay footer, aplica directo (UX rapido). */
+    private setStaged;
+    onDocPointerDown(ev: Event): void;
+    onDocKeydown(ev: KeyboardEvent): void;
+    onTouchStart(): void;
+    onTouchEnd(event: TouchEvent): void;
+    private renderPanel;
+    render(): any;
+}

package/dist/types/components/sui-time-picker/sui-time-picker.data.d.ts

@@ -0,0 +1,72 @@
+export type SuiTimeFormat = '12h' | '24h';
+export type SuiTimePeriod = 'AM' | 'PM';
+/** Valor canonico del time picker — siempre se guarda en formato 24h interno. */
+export interface SuiTimeValue {
+    /** Hora 0–23 (formato 24h interno, independiente del display 12h/24h). */
+    hours: number;
+    /** Minuto 0–59. */
+    minutes: number;
+}
+/** Preset de duracion rapida (pill TimePickerSelectDuration). */
+export interface SuiTimeDurationPreset {
+    /** Texto visible — ej. "30 min", "1 h". */
+    label: string;
+    /** Minutos que representa (para resolver el valor relativo a una base). */
+    minutes: number;
+}
+/** Item de una columna scrollable (hora / minuto / periodo). */
+export interface SuiTimeColumnItem {
+    /** Valor numerico subyacente (hora 1–12 o 0–23, minuto 0–59). */
+    raw: number;
+    /** Texto a mostrar (con pad). */
+    label: string;
+}
+export declare const DEFAULT_DURATION_PRESETS: readonly SuiTimeDurationPreset[];
+/** Pad a 2 digitos: 9 → "09". */
+export declare function pad2(n: number): string;
+/**
+ * Convierte una hora 24h (0–23) a su par display (hora 12h 1–12 + periodo).
+ *   0  → { hour12: 12, period: 'AM' }
+ *   13 → { hour12: 1,  period: 'PM' }
+ */
+export declare function to12h(hours24: number): {
+    hour12: number;
+    period: SuiTimePeriod;
+};
+/**
+ * Convierte una hora 12h (1–12) + periodo a hora 24h (0–23).
+ *   (12, 'AM') → 0
+ *   (1,  'PM') → 13
+ */
+export declare function to24h(hour12: number, period: SuiTimePeriod): number;
+/**
+ * Formatea un SuiTimeValue para mostrarlo en el trigger / item.
+ *   - 12h → "09:30 AM"
+ *   - 24h → "21:30"
+ */
+export declare function formatTime(value: SuiTimeValue, format: SuiTimeFormat): string;
+/**
+ * Parsea un string de hora hacia SuiTimeValue. Acepta:
+ *   "9:30 AM", "09:30 am", "21:30", "9:5" → tolerante.
+ * Devuelve null si no se puede interpretar.
+ */
+export declare function parseTime(input: string | null | undefined): SuiTimeValue | null;
+/** Devuelve true si dos valores representan el mismo instante de hora/minuto. */
+export declare function isSameTime(a: SuiTimeValue | null, b: SuiTimeValue | null): boolean;
+/**
+ * Genera la lista de horas a mostrar en la columna scrollable.
+ *   - 12h → [1..12]
+ *   - 24h → [0..23]
+ */
+export declare function buildHourList(format: SuiTimeFormat): number[];
+/**
+ * Genera la lista de minutos segun el step (1, 5, 15, etc.).
+ * step=5 → [0,5,10,...,55].
+ */
+export declare function buildMinuteList(step: number): number[];
+/** Construye los items de la columna de horas (raw + label con pad). */
+export declare function buildHourItems(format: SuiTimeFormat): SuiTimeColumnItem[];
+/** Construye los items de la columna de minutos (raw + label con pad). */
+export declare function buildMinuteItems(step: number): SuiTimeColumnItem[];
+/** Los dos periodos disponibles en formato 12h. */
+export declare const TIME_PERIODS: readonly SuiTimePeriod[];

package/dist/types/components/sui-time-picker-duration/sui-time-picker-duration.d.ts

@@ -0,0 +1,53 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * `<sui-time-picker-duration>` — Pill de duración rápida («30 min») de los presets del panel de sui-time-picker.
+ *
+ * Portado 1:1 del SUI Angular (`sui-time-picker/sui-time-picker-duration.*`).
+ * Misma API publica, todas las variantes/estados y mismos VALORES exactos
+ * (tokens del DS, no hex). El accent del DS es NARANJA brand (#fa7319), NO el
+ * azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Node: 165483:6046 ("TimePickerSelectDuration") — VERIFIED via MCP.
+ *   Variant matrix: State(4: Default/Hover/Active/Disabled) = 4 combos.
+ *
+ * Pill de duracion rapida (ej. "30 min") que vive en la seccion de presets del
+ * panel del time picker. Al activarse muestra un check 12px + texto primary.
+ *
+ * EXACT (Figma 165483:6044 Default + 165483:6042 Active):
+ *   Container: px-10 py-4, radius-8, overflow-clip. Inline-flex centrado.
+ *   Typography: Inter Medium 14/20, ls -0.6% (= -0.084px),
+ *     font-feature-settings 'ss11' 1, 'calt' 0, 'liga' 0.
+ *   Default:  bg white-0 - border stroke-soft-200 - shadow x-small - text sub-600
+ *   Hover:    bg weak-50  - border stroke-soft-200 - (sin shadow) - text sub-600
+ *   Active:   bg primary-alpha-10 - gap-6 - check 12px + text primary-base - sin border
+ *   Disabled: bg weak-50  - (sin border) - text disabled-300
+ *
+ * NOTA brand-override: Active usa primary-alpha-10 (#476cff1a Figma → #fa73191a)
+ * y primary-base (#335cff → #fa7319). Igual que el resto del DS.
+ *
+ * `scoped: true` (light DOM): los selectores `:host([data-sui-*])` reflejan el
+ * estado del host; el `<sui-icon>` interno hereda tokens del global.
+ *
+ * iOS WKWebView :active fix: el host escucha touchstart/touchend.
+ *
+ * @prop label    — texto del pill (ej. "30 min"). Requerido.
+ * @prop active    — estado seleccionado (check + estilo primary)
+ * @prop disabled
+ */
+export declare class SuiTimePickerDuration {
+    el: HTMLElement;
+    /** Texto visible del pill (ej. "30 min"). */
+    label: string;
+    /** Estado seleccionado: check + estilo primary. Default `false`. */
+    active: boolean;
+    /** Deshabilitado: bg weak-50, sin border, texto disabled. Default `false`. */
+    disabled: boolean;
+    /** Click / Enter / Space sobre el pill (si no esta disabled). */
+    clicked: EventEmitter<globalThis.Event>;
+    private onActivate;
+    onKeydown(event: KeyboardEvent): void;
+    onTouchStart(): void;
+    onTouchEnd(): void;
+    render(): any;
+}