@ajuarezso/sui-design-system 0.8.1 → 0.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/ajuarezso-sui-design-system.mjs +337 -1
  2. package/fesm2022/ajuarezso-sui-design-system.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/ajuarezso-sui-design-system.d.ts +317 -2
package/fesm2022/ajuarezso-sui-design-system.mjs CHANGED
@@ -18325,11 +18325,347 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
18325
18325
  }, template: "@for (pos of positions; track pos) {\n @if (toastsByPosition()[pos].length > 0) {\n <div\n class=\"sui-toast-stack\"\n [attr.data-sui-position]=\"pos\"\n [attr.data-expanded]=\"isExpanded(pos) ? 'true' : 'false'\"\n [style.--sui-toast-count]=\"toastsByPosition()[pos].length\"\n (mouseenter)=\"onStackEnter(pos)\"\n (mouseleave)=\"onStackLeave(pos)\"\n (touchstart)=\"onStackEnter(pos)\"\n aria-live=\"polite\"\n aria-label=\"Notificaciones\"\n >\n @for (toast of toastsByPosition()[pos]; track trackById($index, toast)) {\n <div\n #slot\n class=\"sui-toast-slot\"\n [class.sui-toast-slot--leaving]=\"isLeaving(toast.id)\"\n [class.sui-toast-slot--manual-dismiss]=\"isManuallyDismissed(toast.id)\"\n role=\"status\"\n [attr.data-toast-id]=\"toast.id\"\n [attr.data-toast-style]=\"toast.style\"\n [style.--toast-index]=\"computeVisualIndex(toast)\"\n [style.--toast-offset.px]=\"computeExpandOffset(toast)\"\n [attr.data-front]=\"computeVisualIndex(toast) === 0 ? 'true' : 'false'\"\n >\n <sui-alert\n [variant]=\"toast.variant\"\n [variantStyle]=\"toast.style\"\n size=\"large\"\n [title]=\"toast.title\"\n [description]=\"toast.description ?? null\"\n [dismissible]=\"false\"\n >\n @if (toast.action; as act) {\n <sui-link-button\n slot=\"action\"\n variant=\"modifiable\"\n size=\"medium\"\n [underline]=\"true\"\n (clicked)=\"onAction(toast)\"\n >{{ act.label }}</sui-link-button>\n }\n </sui-alert>\n @if (toast.dismissible) {\n <!-- Cierre = COMPONENTE sui-compact-button (variantStyle modifiable \u2192\n el icono hereda el currentColor que el slot wrapper setea seg\u00FAn\n [data-toast-style]), NO un <button> maqueta. El outlet SIGUE\n siendo due\u00F1o del X (dispara dismissManual con su flow de\n fade-out CSS) \u2014 solo cambia el markup del bot\u00F3n, no el\n comportamiento (timers/stacking/animaci\u00F3n intactos). -->\n <sui-compact-button\n class=\"sui-toast-slot__close\"\n icon=\"close-line\"\n variantStyle=\"modifiable\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"dismissManual(toast)\"\n />\n }\n </div>\n }\n </div>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-toast-stack{position:fixed;z-index:9000;pointer-events:none;max-width:360px;width:calc(100vw - 40px);min-height:90px;--toast-gap: 10px}.sui-toast-stack[data-sui-position=top-left]{top:max(20px,env(safe-area-inset-top,20px));left:20px}.sui-toast-stack[data-sui-position=top-center]{top:max(20px,env(safe-area-inset-top,20px));left:50%;transform:translate(-50%)}.sui-toast-stack[data-sui-position=top-right]{top:max(20px,env(safe-area-inset-top,20px));right:20px}.sui-toast-stack[data-sui-position=bottom-left]{bottom:max(12px,env(safe-area-inset-bottom,12px));left:20px}.sui-toast-stack[data-sui-position=bottom-center]{bottom:max(12px,env(safe-area-inset-bottom,12px));left:50%;transform:translate(-50%)}.sui-toast-stack[data-sui-position=bottom-right]{bottom:max(12px,env(safe-area-inset-bottom,12px));right:20px}@media(max-width:767px){.sui-toast-stack{max-width:none;width:auto;left:12px;right:12px;transform:none}.sui-toast-stack[data-sui-position^=top-]{top:max(12px,env(safe-area-inset-top,12px));bottom:auto;left:12px;right:12px;transform:none}.sui-toast-stack[data-sui-position^=bottom-]{bottom:max(12px,env(safe-area-inset-bottom,12px));top:auto;left:12px;right:12px;transform:none}}:host(.sui-toast-outlet--native-tab) .sui-toast-stack[data-sui-position^=bottom-]{bottom:var(--sui-toast-bottom-offset, 20px)}.sui-toast-slot{position:absolute;width:100%;pointer-events:auto;z-index:calc(100 - var(--toast-index, 0));bottom:0;--offset-y: calc(var(--toast-index, 0) * -10px);--scale: calc(1 - var(--toast-index, 0) * .05);transform:translateY(var(--offset-y)) scale(var(--scale));transform-origin:bottom center;opacity:1}.sui-toast-slot:nth-child(n+4){opacity:0;pointer-events:none}.sui-toast-slot{transition:opacity .2s ease-out,transform .5s cubic-bezier(.22,1,.36,1)}@starting-style{.sui-toast-slot{opacity:0;transform:translateY(100%) scale(.94)}}.sui-toast-slot.sui-toast-slot--leaving{opacity:0;transform:translateY(40%) scale(.9);pointer-events:none}.sui-toast-slot.sui-toast-slot--leaving[data-front=true],.sui-toast-slot.sui-toast-slot--leaving.sui-toast-slot--manual-dismiss{transform:translateY(100%) scale(1)}.sui-toast-slot>sui-alert{display:block;box-shadow:var(--sui-custom-shadow-small);border-radius:var(--sui-radius-12)}.sui-toast-slot__close{position:absolute;top:12px;right:12px;color:var(--sui-text-strong-950, #171717);opacity:.48;transition:opacity .15s ease-out;-webkit-tap-highlight-color:transparent}.sui-toast-slot__close:hover{opacity:.78}.sui-toast-slot[data-toast-style=filled] .sui-toast-slot__close,.sui-toast-slot[data-toast-style=stroke-dark] .sui-toast-slot__close{color:var(--sui-static-white, #ffffff);opacity:.72}.sui-toast-slot[data-toast-style=filled] .sui-toast-slot__close:hover,.sui-toast-slot[data-toast-style=stroke-dark] .sui-toast-slot__close:hover{opacity:.92}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving{transform:translateY(-40%) scale(.9)}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving[data-front=true],.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot--leaving.sui-toast-slot--manual-dismiss{transform:translateY(-100%) scale(1)}@starting-style{.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot{opacity:0;transform:translateY(-100%) scale(.94)}}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot{bottom:auto;top:0;--offset-y: calc(var(--toast-index, 0) * 10px);transform-origin:top center}.sui-toast-stack[data-sui-position^=top-] .sui-toast-slot[data-front=true]{animation-name:sui-toast-enter-top}.sui-toast-stack[data-sui-position^=bottom-]:hover .sui-toast-slot,.sui-toast-stack[data-sui-position^=bottom-][data-expanded=true] .sui-toast-slot{--offset-y: calc(var(--toast-offset, 0px) * -1);--scale: 1;opacity:1}.sui-toast-stack[data-sui-position^=top-]:hover .sui-toast-slot,.sui-toast-stack[data-sui-position^=top-][data-expanded=true] .sui-toast-slot{--offset-y: var(--toast-offset, 0px);--scale: 1;opacity:1}@media(prefers-reduced-motion:reduce){.sui-toast-slot{transition:none}}\n"] }]
18326
18326
  }], propDecorators: { slotRefs: [{ type: i0.ViewChildren, args: ['slot', { isSignal: true }] }] } });
18327
18327
 
18328
+ /**
18329
+ * SUI Topbar Button — SUI Design System 2.0
18330
+ *
18331
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
18332
+ * Component: Topbar Item Button [Topbar] [1.0] — set 3814:25156
18333
+ * - State=Default → 3814:25157 (bg white-0, icon sub-600)
18334
+ * - State=Hover → 3814:25164 (bg weak-50)
18335
+ * - State=Active → 3814:25171 (bg weak-50, icon primary-base)
18336
+ *
18337
+ * EXACT (pulled via get_design_context + get_variable_defs, 2026-07-23):
18338
+ * - 40×40: padding 10 + icon 20×20, radius-10.
18339
+ * - Icon color: sub-600 (#5c5c5c); active → accent (Figma bindea
18340
+ * primary-base #335cff → remap naranja --sui-primary-base, igual que
18341
+ * sui-topbar-item; azul opt-in via accent='information').
18342
+ * - Notification dot (Figma notification=true): 4×4 state/error-base
18343
+ * (#fb3748) en top 12 / right 12, con ring blanco (el asset del Ellipse
18344
+ * en Figma expande ±100% = stroke de separación sobre el icono).
18345
+ * - Default bg white-0 → transparent aquí (superficie del topbar).
18346
+ *
18347
+ * NO es un sui-compact-button: tamaño (40 vs 24), radius (10 vs 6) y estados
18348
+ * (weak-50 + accent) son propios del set [Topbar].
18349
+ *
18350
+ * Usage:
18351
+ * <sui-topbar-button icon="flashlight-line" ariaLabel="Acciones rápidas" />
18352
+ * <sui-topbar-button icon="notification-3-line" ariaLabel="Notificaciones" [dot]="true" />
18353
+ */
18354
+ class SuiTopbarButton {
18355
+ /** RemixIcon 20×20 (ej. 'flashlight-line', 'notification-3-line'). */
18356
+ icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
18357
+ /** aria-label del botón (icon-only ⇒ obligatorio, patrón sui-compact-button). */
18358
+ ariaLabel = input.required(...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
18359
+ /** Notification dot rojo top-right (Figma notification=true). */
18360
+ dot = input(false, ...(ngDevMode ? [{ debugName: "dot" }] : /* istanbul ignore next */ []));
18361
+ /** Estado activo (Figma State=Active). */
18362
+ active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
18363
+ /** Color del icono activo — ver REMAP en sui-topbar-item. */
18364
+ accent = input('brand', ...(ngDevMode ? [{ debugName: "accent" }] : /* istanbul ignore next */ []));
18365
+ clicked = output();
18366
+ onClick() {
18367
+ this.clicked.emit();
18368
+ }
18369
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTopbarButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
18370
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTopbarButton, isStandalone: true, selector: "sui-topbar-button", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: true, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-active": "active() ? \"\" : null", "attr.data-sui-accent": "accent()" } }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"sui-topbar-button__el\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-pressed]=\"active() ? 'true' : null\"\n (click)=\"onClick()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n>\n <sui-icon class=\"sui-topbar-button__icon\" [name]=\"icon()\" [size]=\"20\" />\n @if (dot()) {\n <span class=\"sui-topbar-button__dot\" aria-hidden=\"true\"></span>\n }\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-shrink:0}.sui-topbar-button__el{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:10px;border:none;border-radius:var(--sui-radius-10, 10px);background:transparent;cursor:pointer;box-sizing:border-box;transition:background-color .2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-button__el:hover{background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-active]) .sui-topbar-button__el{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-topbar-button__icon{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c);transition:color .2s ease}:host([data-sui-active][data-sui-accent=brand]) .sui-topbar-button__icon{color:var(--sui-primary-base, #fa7319)}:host([data-sui-active][data-sui-accent=information]) .sui-topbar-button__icon{color:var(--sui-state-information-base, #335cff)}.sui-topbar-button__dot{position:absolute;top:12px;right:12px;width:4px;height:4px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-state-error-base, #fb3748);box-shadow:0 0 0 2px var(--sui-bg-white-0, #ffffff)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
18371
+ }
18372
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTopbarButton, decorators: [{
18373
+ type: Component,
18374
+ args: [{ selector: 'sui-topbar-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon], host: {
18375
+ '[attr.data-sui-active]': 'active() ? "" : null',
18376
+ '[attr.data-sui-accent]': 'accent()',
18377
+ }, template: "<button\n type=\"button\"\n class=\"sui-topbar-button__el\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-pressed]=\"active() ? 'true' : null\"\n (click)=\"onClick()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n>\n <sui-icon class=\"sui-topbar-button__icon\" [name]=\"icon()\" [size]=\"20\" />\n @if (dot()) {\n <span class=\"sui-topbar-button__dot\" aria-hidden=\"true\"></span>\n }\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-shrink:0}.sui-topbar-button__el{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:10px;border:none;border-radius:var(--sui-radius-10, 10px);background:transparent;cursor:pointer;box-sizing:border-box;transition:background-color .2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-button__el:hover{background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-active]) .sui-topbar-button__el{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-topbar-button__icon{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c);transition:color .2s ease}:host([data-sui-active][data-sui-accent=brand]) .sui-topbar-button__icon{color:var(--sui-primary-base, #fa7319)}:host([data-sui-active][data-sui-accent=information]) .sui-topbar-button__icon{color:var(--sui-state-information-base, #335cff)}.sui-topbar-button__dot{position:absolute;top:12px;right:12px;width:4px;height:4px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-state-error-base, #fb3748);box-shadow:0 0 0 2px var(--sui-bg-white-0, #ffffff)}\n"] }]
18378
+ }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: true }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
18379
+
18380
+ /**
18381
+ * SUI Topbar Item — SUI Design System 2.0
18382
+ *
18383
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
18384
+ * Component: Topbar Items [Topbar] [1.0] — set 3802:24588
18385
+ * - State=Default → 3802:24589 (bg white-0, label sub-600)
18386
+ * - State=Hover → 3802:24605 (bg weak-50, label sub-600)
18387
+ * - State=Active → 3802:24621 (bg weak-50, label strong-950, icon primary-base)
18388
+ *
18389
+ * EXACT (pulled via get_design_context + get_variable_defs, 2026-07-23):
18390
+ * - Container: flex items-center, gap 8, radius-8.
18391
+ * Padding: py 8; sin leftIcon → pl 12; con leftIcon → pl 8; con rightIcon
18392
+ * (chevron) → pr 8; sin rightIcon → pr 12.
18393
+ * - Label: Inter Medium 14/20, letter-spacing -0.084px, sub-600 (#5c5c5c);
18394
+ * active → strong-950 (#171717). Gap label↔badge = 4.
18395
+ * - Left/right icon: 20×20, color sub-600; active → accent.
18396
+ * - Hover / Active bg: weak-50 (#f7f7f7). Default bg: white-0 — aquí
18397
+ * transparent (el topbar padre ya es white-0; transparent lo hace reusable
18398
+ * sobre cualquier superficie clara sin cambiar el render de Figma).
18399
+ * - Badge "NEW" (Figma Badge [1.1] warning/light): se compone con <sui-badge>
18400
+ * (defaults orange/light/small). Notification count (Figma "2" rojo):
18401
+ * <sui-badge type="number" variant="filled" color="red">.
18402
+ *
18403
+ * REMAP DE MARCA (verificado con get_variable_defs del variant Active
18404
+ * 3802:24621): el color del icono activo está bound a `primary-base`
18405
+ * (#335cff azul en el Figma). NO es `state/information`. Por la regla de
18406
+ * remap del proyecto, primary → naranja --sui-primary-base (#fa7319), igual
18407
+ * que el indicator del sui-sidebar (DECISIONES.md §1). El azul Figma queda
18408
+ * opt-in vía accent='information' (--sui-state-information-base #335cff).
18409
+ *
18410
+ * API: átomo con props planas (regla sui-avatar). `href` → renderiza <a>;
18411
+ * sin href → <button>. El active lo decide el consumer/organism ([active]).
18412
+ *
18413
+ * Usage:
18414
+ * <sui-topbar-item label="Dashboard" icon="layout-grid-line" [active]="true" />
18415
+ * <sui-topbar-item label="Others" rightIcon="arrow-down-s-line" (clicked)="..." />
18416
+ * <sui-topbar-item label="Inbox" badge="NEW" [count]="2" />
18417
+ */
18418
+ class SuiTopbarItem {
18419
+ label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
18420
+ /** RemixIcon a la izquierda (Figma leftIcon, ej. 'layout-grid-line'). */
18421
+ icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
18422
+ /** RemixIcon a la derecha (Figma rightIcon, típico 'arrow-down-s-line'). */
18423
+ rightIcon = input(null, ...(ngDevMode ? [{ debugName: "rightIcon" }] : /* istanbul ignore next */ []));
18424
+ /**
18425
+ * Badge junto al label (Figma badge=true, "NEW"). Config presente = visible.
18426
+ * String shorthand = label del badge con defaults orange/light/small.
18427
+ */
18428
+ badge = input(null, ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
18429
+ /** Notification count (Figma notification=true, "2" rojo). null → oculto. */
18430
+ count = input(null, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
18431
+ /** Estado activo (Figma State=Active). */
18432
+ active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
18433
+ /**
18434
+ * Color del icono activo: 'brand' (default, naranja --sui-primary-base) |
18435
+ * 'information' (azul Figma canon #335cff). Ver REMAP en el JSDoc.
18436
+ */
18437
+ accent = input('brand', ...(ngDevMode ? [{ debugName: "accent" }] : /* istanbul ignore next */ []));
18438
+ /** Con href el item renderiza <a>; sin href, <button>. */
18439
+ href = input(null, ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
18440
+ /** target del anchor (solo aplica con href). rel auto con _blank. */
18441
+ target = input(null, ...(ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []));
18442
+ clicked = output();
18443
+ /** Badge normalizado — shorthand string renderiza idéntico al objeto. */
18444
+ badgeCfg = computed(() => {
18445
+ const b = this.badge();
18446
+ if (b === null || b === '')
18447
+ return null;
18448
+ const cfg = typeof b === 'string' ? { label: b } : b;
18449
+ return {
18450
+ label: cfg.label,
18451
+ color: cfg.color ?? 'orange',
18452
+ variant: cfg.variant ?? 'light',
18453
+ size: cfg.size ?? 'small',
18454
+ };
18455
+ }, ...(ngDevMode ? [{ debugName: "badgeCfg" }] : /* istanbul ignore next */ []));
18456
+ /** rel auto noopener noreferrer con target _blank (canon SuiLinkConfig). */
18457
+ rel = computed(() => this.target() === '_blank' ? 'noopener noreferrer' : null, ...(ngDevMode ? [{ debugName: "rel" }] : /* istanbul ignore next */ []));
18458
+ onClick() {
18459
+ this.clicked.emit();
18460
+ }
18461
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTopbarItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
18462
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTopbarItem, isStandalone: true, selector: "sui-topbar-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, rightIcon: { classPropertyName: "rightIcon", publicName: "rightIcon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-active": "active() ? \"\" : null", "attr.data-sui-accent": "accent()" } }, ngImport: i0, template: "@if (href(); as h) {\n <a\n class=\"sui-topbar-item\"\n [class.sui-topbar-item--with-icon]=\"icon()\"\n [class.sui-topbar-item--with-right]=\"rightIcon()\"\n [href]=\"h\"\n [attr.target]=\"target()\"\n [attr.rel]=\"rel()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n (click)=\"onClick()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n </a>\n} @else {\n <button\n type=\"button\"\n class=\"sui-topbar-item\"\n [class.sui-topbar-item--with-icon]=\"icon()\"\n [class.sui-topbar-item--with-right]=\"rightIcon()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n (click)=\"onClick()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n </button>\n}\n\n<ng-template #body>\n @if (icon(); as ic) {\n <sui-icon class=\"sui-topbar-item__icon\" [name]=\"ic\" [size]=\"20\" />\n }\n <span class=\"sui-topbar-item__text\">\n <span class=\"sui-topbar-item__label\">{{ label() }}</span>\n @if (badgeCfg(); as b) {\n <sui-badge\n class=\"sui-topbar-item__badge\"\n [color]=\"b.color!\"\n [variant]=\"b.variant!\"\n [size]=\"b.size!\"\n >{{ b.label }}</sui-badge>\n }\n </span>\n @if (count() !== null) {\n <sui-badge\n class=\"sui-topbar-item__count\"\n type=\"number\"\n variant=\"filled\"\n color=\"red\"\n size=\"small\"\n >{{ count() }}</sui-badge>\n }\n @if (rightIcon(); as ri) {\n <sui-icon class=\"sui-topbar-item__right-icon\" [name]=\"ri\" [size]=\"20\" />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-shrink:0}.sui-topbar-item{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:none;border-radius:var(--sui-radius-8, 8px);background:transparent;cursor:pointer;text-decoration:none;box-sizing:border-box;transition:background-color .2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-item--with-icon{padding-left:8px}.sui-topbar-item--with-right{padding-right:8px}.sui-topbar-item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-active]) .sui-topbar-item{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-topbar-item__text{display:inline-flex;align-items:center;gap:4px}.sui-topbar-item__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;transition:color .2s ease}:host([data-sui-active]) .sui-topbar-item__label{color:var(--sui-text-strong-950, #171717)}.sui-topbar-item__icon,.sui-topbar-item__right-icon{display:inline-flex;flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:color .2s ease}:host([data-sui-active][data-sui-accent=brand]) .sui-topbar-item__icon{color:var(--sui-primary-base, #fa7319)}:host([data-sui-active][data-sui-accent=information]) .sui-topbar-item__icon{color:var(--sui-state-information-base, #335cff)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
18463
+ }
18464
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTopbarItem, decorators: [{
18465
+ type: Component,
18466
+ args: [{ selector: 'sui-topbar-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, SuiIcon, SuiBadge], host: {
18467
+ '[attr.data-sui-active]': 'active() ? "" : null',
18468
+ '[attr.data-sui-accent]': 'accent()',
18469
+ }, template: "@if (href(); as h) {\n <a\n class=\"sui-topbar-item\"\n [class.sui-topbar-item--with-icon]=\"icon()\"\n [class.sui-topbar-item--with-right]=\"rightIcon()\"\n [href]=\"h\"\n [attr.target]=\"target()\"\n [attr.rel]=\"rel()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n (click)=\"onClick()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n </a>\n} @else {\n <button\n type=\"button\"\n class=\"sui-topbar-item\"\n [class.sui-topbar-item--with-icon]=\"icon()\"\n [class.sui-topbar-item--with-right]=\"rightIcon()\"\n [attr.aria-current]=\"active() ? 'page' : null\"\n (click)=\"onClick()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n >\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n </button>\n}\n\n<ng-template #body>\n @if (icon(); as ic) {\n <sui-icon class=\"sui-topbar-item__icon\" [name]=\"ic\" [size]=\"20\" />\n }\n <span class=\"sui-topbar-item__text\">\n <span class=\"sui-topbar-item__label\">{{ label() }}</span>\n @if (badgeCfg(); as b) {\n <sui-badge\n class=\"sui-topbar-item__badge\"\n [color]=\"b.color!\"\n [variant]=\"b.variant!\"\n [size]=\"b.size!\"\n >{{ b.label }}</sui-badge>\n }\n </span>\n @if (count() !== null) {\n <sui-badge\n class=\"sui-topbar-item__count\"\n type=\"number\"\n variant=\"filled\"\n color=\"red\"\n size=\"small\"\n >{{ count() }}</sui-badge>\n }\n @if (rightIcon(); as ri) {\n <sui-icon class=\"sui-topbar-item__right-icon\" [name]=\"ri\" [size]=\"20\" />\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-shrink:0}.sui-topbar-item{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:none;border-radius:var(--sui-radius-8, 8px);background:transparent;cursor:pointer;text-decoration:none;box-sizing:border-box;transition:background-color .2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-item--with-icon{padding-left:8px}.sui-topbar-item--with-right{padding-right:8px}.sui-topbar-item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}:host([data-sui-active]) .sui-topbar-item{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-topbar-item__text{display:inline-flex;align-items:center;gap:4px}.sui-topbar-item__label{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;transition:color .2s ease}:host([data-sui-active]) .sui-topbar-item__label{color:var(--sui-text-strong-950, #171717)}.sui-topbar-item__icon,.sui-topbar-item__right-icon{display:inline-flex;flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:color .2s ease}:host([data-sui-active][data-sui-accent=brand]) .sui-topbar-item__icon{color:var(--sui-primary-base, #fa7319)}:host([data-sui-active][data-sui-accent=information]) .sui-topbar-item__icon{color:var(--sui-state-information-base, #335cff)}\n"] }]
18470
+ }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], rightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightIcon", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], target: [{ type: i0.Input, args: [{ isSignal: true, alias: "target", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
18471
+
18472
+ /**
18473
+ * SUI Topbar User — SUI Design System 2.0
18474
+ *
18475
+ * Chip de usuario del topbar (avatar + nombre + chevron de dropdown).
18476
+ *
18477
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
18478
+ * Component: User Profile [Topbar] [1.0] — set 3814:24667
18479
+ * - State=Default → 3814:24668 (bg white-0 + border soft-200, chevron down)
18480
+ * - State=Hover → 3814:24675 (bg weak-50 sin border, chevron down)
18481
+ * - State=Active → 3814:24682 (bg weak-50 sin border, chevron UP = abierto)
18482
+ *
18483
+ * EXACT (pulled via get_design_context, 2026-07-23):
18484
+ * - Container: flex items-center, pl 4 / pr 8 / py 4, gap 6 (bloque↔chevron),
18485
+ * radius-10. Default: border 1px stroke-soft-200 + bg white-0.
18486
+ * Hover/Active: bg weak-50, sin border (aquí border transparent para no
18487
+ * mover el layout 1px).
18488
+ * - Avatar 32×32 (sui-avatar size md).
18489
+ * - Gap avatar↔nombre 8; gap nombre↔verified 2.
18490
+ * - Nombre: Inter Medium 14/20, ls -0.084px, strong-950.
18491
+ * - Verified (Figma verified=true): badge 20×20 — igual que sui-sidebar se
18492
+ * usa RemixIcon verified-badge-fill color state-verified-base #47c2ff.
18493
+ * - Chevron: arrow-down-s-fill 20; open=true → arrow-up-s-fill (Figma Active).
18494
+ *
18495
+ * CRITERIO (por qué componente propio y no slot del topbar): en Figma es un
18496
+ * component set independiente namespaced [Topbar] con estados propios
18497
+ * (default/hover/open) — reusable en headers fuera del organism (igual que
18498
+ * el patrón sidebar↔profile). El organism sui-topbar lo compone via config.
18499
+ *
18500
+ * Usage:
18501
+ * <sui-topbar-user name="Sophia" [avatar]="{ initials: 'S', color: 'yellow' }" />
18502
+ * <sui-topbar-user name="Arthur" avatar="https://..." [verified]="true" [open]="menuOpen()" />
18503
+ */
18504
+ class SuiTopbarUser {
18505
+ /** Nombre visible (Figma editName). Vacío → chip solo-avatar (Figma name=false). */
18506
+ name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
18507
+ /**
18508
+ * Avatar (32×32). Config presente = visible. String shorthand = src directo;
18509
+ * objeto = SuiAvatarConfig { src?, initials?, color? }.
18510
+ */
18511
+ avatar = input(null, ...(ngDevMode ? [{ debugName: "avatar" }] : /* istanbul ignore next */ []));
18512
+ /** Verified badge junto al nombre (Figma verified=true). */
18513
+ verified = input(false, ...(ngDevMode ? [{ debugName: "verified" }] : /* istanbul ignore next */ []));
18514
+ /** Dropdown abierto (Figma State=Active): bg weak-50 + chevron up. */
18515
+ open = input(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
18516
+ clicked = output();
18517
+ /** Avatar normalizado — shorthand string renderiza idéntico al objeto. */
18518
+ avatarCfg = computed(() => {
18519
+ const a = this.avatar();
18520
+ if (a === null)
18521
+ return {};
18522
+ return typeof a === 'string' ? { src: a } : a;
18523
+ }, ...(ngDevMode ? [{ debugName: "avatarCfg" }] : /* istanbul ignore next */ []));
18524
+ onClick() {
18525
+ this.clicked.emit();
18526
+ }
18527
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTopbarUser, deps: [], target: i0.ɵɵFactoryTarget.Component });
18528
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTopbarUser, isStandalone: true, selector: "sui-topbar-user", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null }, verified: { classPropertyName: "verified", publicName: "verified", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-sui-open": "open() ? \"\" : null" } }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"sui-topbar-user\"\n [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\n aria-haspopup=\"menu\"\n (click)=\"onClick()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n>\n <span class=\"sui-topbar-user__main\">\n <sui-avatar\n class=\"sui-topbar-user__avatar\"\n size=\"md\"\n [src]=\"avatarCfg().src ?? null\"\n [initials]=\"avatarCfg().initials ?? ''\"\n [color]=\"avatarCfg().color ?? 'slate'\"\n [alt]=\"name()\"\n />\n @if (name()) {\n <span class=\"sui-topbar-user__name-row\">\n <span class=\"sui-topbar-user__name\">{{ name() }}</span>\n @if (verified()) {\n <!-- Figma usa verified-fill (glyph propio SUI); match RemixIcon =\n verified-badge-fill (mismo criterio que sui-sidebar). -->\n <sui-icon\n class=\"sui-topbar-user__verified\"\n name=\"verified-badge-fill\"\n [size]=\"20\"\n aria-label=\"Verificado\"\n />\n }\n </span>\n }\n </span>\n <sui-icon\n class=\"sui-topbar-user__chevron\"\n [name]=\"open() ? 'arrow-up-s-fill' : 'arrow-down-s-fill'\"\n [size]=\"20\"\n />\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-shrink:0}.sui-topbar-user{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);cursor:pointer;box-sizing:border-box;transition:background-color .2s ease,border-color .2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-user:hover{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent}:host([data-sui-open]) .sui-topbar-user{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent}.sui-topbar-user__main{display:inline-flex;align-items:center;gap:8px}.sui-topbar-user__name-row{display:inline-flex;align-items:center;gap:2px}.sui-topbar-user__name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950, #171717);white-space:nowrap}.sui-topbar-user__verified{display:inline-flex;flex-shrink:0;color:var(--sui-state-verified-base, #47c2ff)}.sui-topbar-user__chevron{display:inline-flex;flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
18529
+ }
18530
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTopbarUser, decorators: [{
18531
+ type: Component,
18532
+ args: [{ selector: 'sui-topbar-user', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon, SuiAvatar], host: {
18533
+ '[attr.data-sui-open]': 'open() ? "" : null',
18534
+ }, template: "<button\n type=\"button\"\n class=\"sui-topbar-user\"\n [attr.aria-expanded]=\"open() ? 'true' : 'false'\"\n aria-haspopup=\"menu\"\n (click)=\"onClick()\"\n (touchstart)=\"$event.currentTarget\"\n (touchend)=\"$any($event.currentTarget).blur()\"\n>\n <span class=\"sui-topbar-user__main\">\n <sui-avatar\n class=\"sui-topbar-user__avatar\"\n size=\"md\"\n [src]=\"avatarCfg().src ?? null\"\n [initials]=\"avatarCfg().initials ?? ''\"\n [color]=\"avatarCfg().color ?? 'slate'\"\n [alt]=\"name()\"\n />\n @if (name()) {\n <span class=\"sui-topbar-user__name-row\">\n <span class=\"sui-topbar-user__name\">{{ name() }}</span>\n @if (verified()) {\n <!-- Figma usa verified-fill (glyph propio SUI); match RemixIcon =\n verified-badge-fill (mismo criterio que sui-sidebar). -->\n <sui-icon\n class=\"sui-topbar-user__verified\"\n name=\"verified-badge-fill\"\n [size]=\"20\"\n aria-label=\"Verificado\"\n />\n }\n </span>\n }\n </span>\n <sui-icon\n class=\"sui-topbar-user__chevron\"\n [name]=\"open() ? 'arrow-up-s-fill' : 'arrow-down-s-fill'\"\n [size]=\"20\"\n />\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;flex-shrink:0}.sui-topbar-user{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);cursor:pointer;box-sizing:border-box;transition:background-color .2s ease,border-color .2s ease;-webkit-tap-highlight-color:transparent}.sui-topbar-user:hover{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent}:host([data-sui-open]) .sui-topbar-user{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent}.sui-topbar-user__main{display:inline-flex;align-items:center;gap:8px}.sui-topbar-user__name-row{display:inline-flex;align-items:center;gap:2px}.sui-topbar-user__name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950, #171717);white-space:nowrap}.sui-topbar-user__verified{display:inline-flex;flex-shrink:0;color:var(--sui-state-verified-base, #47c2ff)}.sui-topbar-user__chevron{display:inline-flex;flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c)}\n"] }]
18535
+ }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }], verified: [{ type: i0.Input, args: [{ isSignal: true, alias: "verified", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
18536
+
18537
+ /**
18538
+ * SUI Topbar — SUI Design System 2.0
18539
+ *
18540
+ * Barra de navegación superior: logo + nav items + search + acciones + chip
18541
+ * de usuario. Organism que COMPONE los átomos de la familia: sui-topbar-item,
18542
+ * sui-topbar-button, sui-topbar-user y sui-kbd (shortcut del search).
18543
+ *
18544
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
18545
+ * Component: Topbar [Navigation] [1.1] — frame 3814:25274, 4 ejemplos:
18546
+ * - 3814:25221 Type=Default, HR Management (nav sin iconos, search input)
18547
+ * - 3814:27109 Type=With Icon, HR Management (nav con iconos, search botón)
18548
+ * - 3814:27468 Type=Default, Finance & Banking
18549
+ * - 3814:27485 Type=With Icon, Finance & Banking
18550
+ *
18551
+ * EXACT (pulled via get_design_context, 2026-07-23 — node 3814:25221):
18552
+ * - Container: bg white-0, border-b 1px stroke-soft-200, padding 20px 44px,
18553
+ * gap 16, height total 80 (20+40+20). Width del frame (1440) es del
18554
+ * EJEMPLO: el host es block full-width.
18555
+ * - Left (flex-1): logo 40×40 + gap 24 + nav (gap 4 entre items).
18556
+ * - Search expandido (Figma Text Input [1.1], w 232): border soft-200,
18557
+ * radius-10, shadow regular-shadow-x-small, pl 12 / pr 10 / py 10, gap 8,
18558
+ * icon search-2-line 20 soft-400, placeholder 14/20 regular soft-400,
18559
+ * shortcut pill = <sui-kbd> (match exacto del "Shortcut" de Figma).
18560
+ * - Right: gap 16 entre Actions (gap 4) y user chip.
18561
+ *
18562
+ * CRITERIOS de composición (documentados a pedido):
18563
+ * - Nav item / icon button / user chip = componentes propios: en Figma son
18564
+ * component sets independientes namespaced [Topbar] con estados propios —
18565
+ * reusables fuera del organism.
18566
+ * - Search expandido = pieza INTERNA del organism (no componente): en Figma
18567
+ * es una instancia de Text Input [1.1] sin estados propios del topbar; el
18568
+ * pill se resuelve con sui-kbd. No se ve reusable como pieza suelta.
18569
+ * - Logo = slot <ng-content select="[topbar-logo]"> (la marca varía por
18570
+ * consumer; en Figma es un logo de ejemplo Synergy/Apex).
18571
+ * - Navegación: los items NO usan RouterLink (el átomo encapsula su <a>/
18572
+ * <button> interno). El active se resuelve con [activeValue] y el consumer
18573
+ * navega en (itemClicked) — diferencia deliberada vs sui-sidebar.
18574
+ *
18575
+ * REMAP DE MARCA: el accent del item/botón activo está bound a primary-base
18576
+ * (#335cff azul en Figma) → naranja --sui-primary-base por default; azul
18577
+ * opt-in con accent='information' (ver sui-topbar-item).
18578
+ *
18579
+ * Usage:
18580
+ * <sui-topbar
18581
+ * [items]="items" activeValue="dashboard"
18582
+ * [search]="{ placeholder: 'Buscar...', shortcut: '⌘1' }"
18583
+ * [actions]="[{ value: 'quick', icon: 'flashlight-line' },
18584
+ * { value: 'notifications', icon: 'notification-3-line', dot: true }]"
18585
+ * [user]="{ name: 'Sophia', avatar: { initials: 'S', color: 'yellow' } }"
18586
+ * (itemClicked)="..." (actionClicked)="..." (userClicked)="...">
18587
+ * <img topbar-logo src="..." alt="Logo" />
18588
+ * </sui-topbar>
18589
+ */
18590
+ class SuiTopbar {
18591
+ // ── Nav ─────────────────────────────────────────────────────────────────
18592
+ items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
18593
+ /** value del item activo (bg weak-50 + label strong-950 + icon accent). */
18594
+ activeValue = input(null, ...(ngDevMode ? [{ debugName: "activeValue" }] : /* istanbul ignore next */ []));
18595
+ /** Color del accent activo — 'brand' naranja (default) | 'information' azul Figma. */
18596
+ accent = input('brand', ...(ngDevMode ? [{ debugName: "accent" }] : /* istanbul ignore next */ []));
18597
+ // ── Search ──────────────────────────────────────────────────────────────
18598
+ /**
18599
+ * Search:
18600
+ * - false / null (default): sin search
18601
+ * - true: input expandido con defaults
18602
+ * - objeto { placeholder?, shortcut?, compact? }: configurado.
18603
+ * compact=true → icon button en Actions en vez del input.
18604
+ */
18605
+ search = input(false, ...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
18606
+ /** Valor del input de búsqueda (2-way). */
18607
+ searchValue = model('', ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
18608
+ // ── Right ───────────────────────────────────────────────────────────────
18609
+ actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
18610
+ /** dot=true en la acción con este value se puede togglear directo desde actions. */
18611
+ user = input(null, ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
18612
+ /** Estado abierto del dropdown del user chip (chevron up + bg weak-50). */
18613
+ userOpen = input(false, ...(ngDevMode ? [{ debugName: "userOpen" }] : /* istanbul ignore next */ []));
18614
+ // ── Outputs ─────────────────────────────────────────────────────────────
18615
+ itemClicked = output();
18616
+ actionClicked = output();
18617
+ userClicked = output();
18618
+ /** Click en el search compacto (icon button). */
18619
+ searchClicked = output();
18620
+ /** Enter en el input expandido — emite el valor actual. */
18621
+ searchSubmitted = output();
18622
+ /** Search normalizado: null → sin search. */
18623
+ searchCfg = computed(() => {
18624
+ const s = this.search();
18625
+ if (!s)
18626
+ return null;
18627
+ const cfg = s === true ? {} : s;
18628
+ return {
18629
+ placeholder: cfg.placeholder ?? 'Buscar...',
18630
+ shortcut: cfg.shortcut ?? null,
18631
+ compact: cfg.compact ?? false,
18632
+ };
18633
+ }, ...(ngDevMode ? [{ debugName: "searchCfg" }] : /* istanbul ignore next */ []));
18634
+ /** User normalizado — shorthand string = name. */
18635
+ userCfg = computed(() => {
18636
+ const u = this.user();
18637
+ if (u === null)
18638
+ return null;
18639
+ return typeof u === 'string' ? { name: u } : u;
18640
+ }, ...(ngDevMode ? [{ debugName: "userCfg" }] : /* istanbul ignore next */ []));
18641
+ onItemClick(item) {
18642
+ this.itemClicked.emit(item);
18643
+ }
18644
+ onActionClick(action) {
18645
+ this.actionClicked.emit(action);
18646
+ }
18647
+ onSearchInput(value) {
18648
+ this.searchValue.set(value);
18649
+ }
18650
+ onSearchSubmit() {
18651
+ this.searchSubmitted.emit(this.searchValue());
18652
+ }
18653
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTopbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
18654
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTopbar, isStandalone: true, selector: "sui-topbar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeValue: { classPropertyName: "activeValue", publicName: "activeValue", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, userOpen: { classPropertyName: "userOpen", publicName: "userOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchValue: "searchValueChange", itemClicked: "itemClicked", actionClicked: "actionClicked", userClicked: "userClicked", searchClicked: "searchClicked", searchSubmitted: "searchSubmitted" }, host: { attributes: { "role": "banner" }, properties: { "attr.data-sui-accent": "accent()" } }, ngImport: i0, template: "<!-- \u2500\u2500 Left: logo + nav \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<div class=\"sui-topbar__left\">\n <div class=\"sui-topbar__logo\">\n <ng-content select=\"[topbar-logo]\"></ng-content>\n </div>\n @if (items().length > 0) {\n <nav class=\"sui-topbar__nav\" aria-label=\"Principal\">\n @for (item of items(); track item.value) {\n <sui-topbar-item\n [label]=\"item.label\"\n [icon]=\"item.icon ?? null\"\n [rightIcon]=\"item.rightIcon ?? null\"\n [badge]=\"item.badge ?? null\"\n [count]=\"item.count ?? null\"\n [href]=\"item.href ?? null\"\n [target]=\"item.target ?? null\"\n [active]=\"activeValue() === item.value\"\n [accent]=\"accent()\"\n (clicked)=\"onItemClick(item)\"\n />\n }\n </nav>\n }\n</div>\n\n<!-- \u2500\u2500 Search expandido (Figma Type=Default, w 232) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (searchCfg(); as s) {\n @if (!s.compact) {\n <div class=\"sui-topbar__search\">\n <sui-icon class=\"sui-topbar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n <input\n class=\"sui-topbar__search-input\"\n type=\"text\"\n [placeholder]=\"s.placeholder\"\n [value]=\"searchValue()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown.enter)=\"onSearchSubmit()\"\n />\n @if (s.shortcut) {\n <sui-kbd class=\"sui-topbar__search-shortcut\">{{ s.shortcut }}</sui-kbd>\n }\n </div>\n }\n}\n\n<!-- \u2500\u2500 Right: actions + user chip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<div class=\"sui-topbar__right\">\n @if (searchCfg()?.compact || actions().length > 0) {\n <div class=\"sui-topbar__actions\">\n @if (searchCfg(); as s) {\n @if (s.compact) {\n <sui-topbar-button\n icon=\"search-2-line\"\n [ariaLabel]=\"s.placeholder\"\n [accent]=\"accent()\"\n (clicked)=\"searchClicked.emit()\"\n />\n }\n }\n @for (action of actions(); track action.value) {\n <sui-topbar-button\n [icon]=\"action.icon\"\n [ariaLabel]=\"action.ariaLabel ?? action.value\"\n [dot]=\"action.dot ?? false\"\n [accent]=\"accent()\"\n (clicked)=\"onActionClick(action)\"\n />\n }\n </div>\n }\n @if (userCfg(); as u) {\n <sui-topbar-user\n [name]=\"u.name ?? ''\"\n [avatar]=\"u.avatar ?? null\"\n [verified]=\"u.verified ?? false\"\n [open]=\"userOpen()\"\n (clicked)=\"userClicked.emit()\"\n />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:16px;padding:20px 44px;background:var(--sui-bg-white-0, #ffffff);border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);box-sizing:border-box}.sui-topbar__left{display:flex;align-items:center;gap:24px;flex:1 0 0;min-width:1px}.sui-topbar__logo{display:inline-flex;align-items:center;flex-shrink:0}.sui-topbar__logo ::ng-deep>img{width:40px;height:40px;border-radius:var(--sui-radius-full, 999px);object-fit:cover;display:block}.sui-topbar__nav{display:flex;align-items:flex-start;gap:4px;min-width:1px;overflow-x:auto;scrollbar-width:none}.sui-topbar__nav::-webkit-scrollbar{display:none}.sui-topbar__search{display:flex;align-items:center;gap:8px;width:232px;flex-shrink:0;padding:10px 10px 10px 12px;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-topbar__search-icon{display:inline-flex;flex-shrink:0;color:var(--sui-text-soft-400, #a3a3a3)}.sui-topbar__search-input{flex:1 0 0;min-width:1px;border:none;outline:none;padding:0;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950, #171717)}.sui-topbar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-topbar__right{display:flex;align-items:center;gap:16px;flex-shrink:0}.sui-topbar__actions{display:flex;align-items:center;gap:4px}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiKbd, selector: "sui-kbd", inputs: ["variant"] }, { kind: "component", type: SuiTopbarItem, selector: "sui-topbar-item", inputs: ["label", "icon", "rightIcon", "badge", "count", "active", "accent", "href", "target"], outputs: ["clicked"] }, { kind: "component", type: SuiTopbarButton, selector: "sui-topbar-button", inputs: ["icon", "ariaLabel", "dot", "active", "accent"], outputs: ["clicked"] }, { kind: "component", type: SuiTopbarUser, selector: "sui-topbar-user", inputs: ["name", "avatar", "verified", "open"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
18655
+ }
18656
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTopbar, decorators: [{
18657
+ type: Component,
18658
+ args: [{ selector: 'sui-topbar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [SuiIcon, SuiKbd, SuiTopbarItem, SuiTopbarButton, SuiTopbarUser], host: {
18659
+ 'role': 'banner',
18660
+ '[attr.data-sui-accent]': 'accent()',
18661
+ }, template: "<!-- \u2500\u2500 Left: logo + nav \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<div class=\"sui-topbar__left\">\n <div class=\"sui-topbar__logo\">\n <ng-content select=\"[topbar-logo]\"></ng-content>\n </div>\n @if (items().length > 0) {\n <nav class=\"sui-topbar__nav\" aria-label=\"Principal\">\n @for (item of items(); track item.value) {\n <sui-topbar-item\n [label]=\"item.label\"\n [icon]=\"item.icon ?? null\"\n [rightIcon]=\"item.rightIcon ?? null\"\n [badge]=\"item.badge ?? null\"\n [count]=\"item.count ?? null\"\n [href]=\"item.href ?? null\"\n [target]=\"item.target ?? null\"\n [active]=\"activeValue() === item.value\"\n [accent]=\"accent()\"\n (clicked)=\"onItemClick(item)\"\n />\n }\n </nav>\n }\n</div>\n\n<!-- \u2500\u2500 Search expandido (Figma Type=Default, w 232) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (searchCfg(); as s) {\n @if (!s.compact) {\n <div class=\"sui-topbar__search\">\n <sui-icon class=\"sui-topbar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n <input\n class=\"sui-topbar__search-input\"\n type=\"text\"\n [placeholder]=\"s.placeholder\"\n [value]=\"searchValue()\"\n (input)=\"onSearchInput($any($event.target).value)\"\n (keydown.enter)=\"onSearchSubmit()\"\n />\n @if (s.shortcut) {\n <sui-kbd class=\"sui-topbar__search-shortcut\">{{ s.shortcut }}</sui-kbd>\n }\n </div>\n }\n}\n\n<!-- \u2500\u2500 Right: actions + user chip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<div class=\"sui-topbar__right\">\n @if (searchCfg()?.compact || actions().length > 0) {\n <div class=\"sui-topbar__actions\">\n @if (searchCfg(); as s) {\n @if (s.compact) {\n <sui-topbar-button\n icon=\"search-2-line\"\n [ariaLabel]=\"s.placeholder\"\n [accent]=\"accent()\"\n (clicked)=\"searchClicked.emit()\"\n />\n }\n }\n @for (action of actions(); track action.value) {\n <sui-topbar-button\n [icon]=\"action.icon\"\n [ariaLabel]=\"action.ariaLabel ?? action.value\"\n [dot]=\"action.dot ?? false\"\n [accent]=\"accent()\"\n (clicked)=\"onActionClick(action)\"\n />\n }\n </div>\n }\n @if (userCfg(); as u) {\n <sui-topbar-user\n [name]=\"u.name ?? ''\"\n [avatar]=\"u.avatar ?? null\"\n [verified]=\"u.verified ?? false\"\n [open]=\"userOpen()\"\n (clicked)=\"userClicked.emit()\"\n />\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;gap:16px;padding:20px 44px;background:var(--sui-bg-white-0, #ffffff);border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);box-sizing:border-box}.sui-topbar__left{display:flex;align-items:center;gap:24px;flex:1 0 0;min-width:1px}.sui-topbar__logo{display:inline-flex;align-items:center;flex-shrink:0}.sui-topbar__logo ::ng-deep>img{width:40px;height:40px;border-radius:var(--sui-radius-full, 999px);object-fit:cover;display:block}.sui-topbar__nav{display:flex;align-items:flex-start;gap:4px;min-width:1px;overflow-x:auto;scrollbar-width:none}.sui-topbar__nav::-webkit-scrollbar{display:none}.sui-topbar__search{display:flex;align-items:center;gap:8px;width:232px;flex-shrink:0;padding:10px 10px 10px 12px;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-10, 10px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-topbar__search-icon{display:inline-flex;flex-shrink:0;color:var(--sui-text-soft-400, #a3a3a3)}.sui-topbar__search-input{flex:1 0 0;min-width:1px;border:none;outline:none;padding:0;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.084px;color:var(--sui-text-strong-950, #171717)}.sui-topbar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-topbar__right{display:flex;align-items:center;gap:16px;flex-shrink:0}.sui-topbar__actions{display:flex;align-items:center;gap:4px}\n"] }]
18662
+ }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], activeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeValue", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], userOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "userOpen", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], actionClicked: [{ type: i0.Output, args: ["actionClicked"] }], userClicked: [{ type: i0.Output, args: ["userClicked"] }], searchClicked: [{ type: i0.Output, args: ["searchClicked"] }], searchSubmitted: [{ type: i0.Output, args: ["searchSubmitted"] }] } });
18663
+
18328
18664
  /* Public API Surface of sui-design-system — generado del catálogo SUI. */
18329
18665
 
18330
18666
  /**
18331
18667
  * Generated bundle index. Do not edit.
18332
18668
  */
18333
18669
 
18334
- export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_CHART_LEGEND_COLORS, SUI_CHART_LEGEND_HEX, SUI_CHART_SERIES_COLORS, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_PASSWORD_STRENGTH_DEFAULT_CONDITIONS, SUI_PASSWORD_STRENGTH_DEFAULT_LEVEL_LABELS, SUI_PAYMENT_ICON_TYPES, SUI_PRODUCT_FALLBACK_COLORS, SUI_TAB_BAR, SuiAccordion, SuiAccordionContent, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiChartLegend, SuiChartLegendDot, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiContentLabel, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiImgRetry, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalFooter, SuiModalHeader, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPasswordStrength, SuiPaymentIcon, SuiPeriodRange, SuiPopover, SuiProductCard, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRadioLabel, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSegmentedControl, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTabMenuHorizontal, SuiTabMenuVertical, SuiTable, SuiTableCellDirective, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
18670
+ export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_CHART_LEGEND_COLORS, SUI_CHART_LEGEND_HEX, SUI_CHART_SERIES_COLORS, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_PASSWORD_STRENGTH_DEFAULT_CONDITIONS, SUI_PASSWORD_STRENGTH_DEFAULT_LEVEL_LABELS, SUI_PAYMENT_ICON_TYPES, SUI_PRODUCT_FALLBACK_COLORS, SUI_TAB_BAR, SuiAccordion, SuiAccordionContent, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiChartLegend, SuiChartLegendDot, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiContentLabel, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiImgRetry, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalFooter, SuiModalHeader, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPasswordStrength, SuiPaymentIcon, SuiPeriodRange, SuiPopover, SuiProductCard, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRadioLabel, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSegmentedControl, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTabMenuHorizontal, SuiTabMenuVertical, SuiTable, SuiTableCellDirective, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, SuiTopbar, SuiTopbarButton, SuiTopbarItem, SuiTopbarUser, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
18335
18671
  //# sourceMappingURL=ajuarezso-sui-design-system.mjs.map