npm - @sula-tech/webcomponents - Versions diffs - 0.23.0 → 0.24.0 - Mend

@sula-tech/webcomponents 0.23.0 → 0.24.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 (134) hide show

package/dist/webcomponents/p-68a6d489.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sulaWorkbenchMenuCss","SulaWorkbenchMenu","constructor","hostRef","this","menuTitle","image","width","density","SulaMenuDensity","Default","labelOverflow","SulaMenuLabelOverflow","Wrap","drilldownLevel","items","defaultIcon","profileItems","collapsed","previewExpanded","stack","direction","selectedPath","crumbMenu","open","left","top","profileOpen","hovering","normalizedWidth","value","_a","trim","undefined","hostStyleVariables","Object","assign","componentWillLoad","syncWithItems","nextSelected","findSelectedIds","length","isStillSelectable","rebuildStack","componentDidRender","positionProfile","onDocumentClick","event","path","composedPath","includes","profileEl","userInfoEl","closeProfile","crumbEllipsisEl","crumbDropdownEl","closeCrumbMenu","onDocumentKeydown","key","focus","onWindowResize","getVisibleItems","filter","item","hidden","hasVisibleChildren","children","isDrilled","trail","selected","id","nested","found","findPath","toggleExpanded","map","expanded","next","previous","level","ancestor","match","find","push","isActive","branch","isFaded","active","disabled","emitLevel","levelChanged","emit","toggleInline","enterDrill","markSelected","selectItem","p","itemSelected","handleRowClick","depth","itemClicked","goToDepth","index","slice","toggleCrumbMenu","button","currentTarget","offsetLeft","offsetTop","offsetHeight","toggleMenu","menuToggled","handleMenuMouseEnter","handleMenuMouseLeave","toggleProfile","profileClicked","user","defaultPrevented","requestAnimationFrame","shellEl","gap","inset","anchor","getBoundingClientRect","shell","style","bottom","window","innerHeight","right","handleProfileItemClicked","stopPropagation","profileItemClicked","detail","handleProfileSwitchChanged","current","profileSwitchChanged","renderProfilePopover","expandedView","h","part","role","name","String","tabIndex","ref","el","class","onItemClicked","onSwitchChanged","isValidIcon","icon","test","isSvg","iconOf","hasIcon","renderItemIcon","customClass","size","faded","replace","src","alt","getInitials","split","Boolean","toUpperCase","join","renderUserInfo","type","title","onClick","photo","email","getIconClass","renderCollapseButton","label","renderRootHeader","renderTrail","ancestors","hasHidden","visible","crumbs","forEach","indexOf","nodes","crumb","renderCrumbDropdown","renderDrillHeader","activeParent","backLabel","backButton","renderDrillRow","reserve","renderIconSlot","renderDrillPanel","panelKey","siblingsHaveIcon","getMainIconClass","getMainCaretClass","getSubIconClass","getSubCaretClass","some","sibling","renderMainRow","labelOverflowTruncate","Truncate","renderSubRow","drill","caretIcon","depthOf","rowClass","paddingLeft","renderInlineList","inline","row","submenu","render","drilled","Host","Compact","Comfortable","onMouseEnter","onMouseLeave"],"sources":["src/components/sula-workbench-menu/sula-workbench-menu.scss?tag=sula-workbench-menu&encapsulation=shadow","src/components/sula-workbench-menu/sula-workbench-menu.tsx"],"sourcesContent":["$menu-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);\n$menu-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n\n:host {\n --sula-menu-width: 280px;\n --sula-menu-collapsed-width: 88px;\n --sula-menu-main-item-font-size: 1rem;\n --sula-menu-main-item-line-height: 1.25rem;\n --sula-menu-sub-item-font-size: 0.9375rem;\n --sula-menu-main-item-max-lines: 2;\n --sula-menu-main-item-padding-block: 0.5rem;\n\n display: block;\n height: 100%;\n width: var(--sula-menu-width);\n position: relative;\n overflow: visible;\n transition: width 360ms $menu-ease-emphasized;\n}\n\n:host(.menu-host--density-compact) {\n --sula-menu-main-item-font-size: 0.875rem;\n --sula-menu-main-item-line-height: 1.125rem;\n --sula-menu-sub-item-font-size: 0.8125rem;\n --sula-menu-main-item-padding-block: 0.375rem;\n}\n\n:host(.menu-host--density-comfortable) {\n --sula-menu-main-item-font-size: 1.0625rem;\n --sula-menu-main-item-line-height: 1.5rem;\n --sula-menu-sub-item-font-size: 1rem;\n --sula-menu-main-item-padding-block: 0.625rem;\n}\n\n:host(.menu-host--collapsed) {\n width: var(--sula-menu-collapsed-width);\n}\n\n.menu-shell {\n position: relative;\n padding: 20px 0 12px;\n width: 100%;\n min-height: 100%;\n overflow: hidden;\n transition:\n padding 360ms $menu-ease-emphasized,\n width 360ms $menu-ease-emphasized,\n transform 360ms $menu-ease-emphasized,\n box-shadow 360ms $menu-ease-emphasized,\n border-radius 280ms $menu-ease-standard,\n background-color 220ms $menu-ease-standard;\n}\n\n.menu-shell--expanded {\n width: var(--sula-menu-width);\n padding: 20px 20px 12px;\n box-shadow:\n 0 10px 24px rgba(15, 23, 42, 0.08),\n 0 2px 8px rgba(15, 23, 42, 0.06);\n}\n\n.menu-shell--collapsed {\n box-shadow:\n 0 8px 18px rgba(15, 23, 42, 0.06),\n 0 1px 4px rgba(15, 23, 42, 0.04);\n}\n\n.menu-shell--preview {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: var(--sula-menu-width);\n border-radius: 0 24px 24px 0;\n box-shadow:\n 0 28px 60px rgba(15, 23, 42, 0.18),\n 0 10px 24px rgba(15, 23, 42, 0.12);\n z-index: 2;\n}\n\n.menu-header {\n gap: 0;\n transition: padding 360ms $menu-ease-emphasized;\n}\n\n.menu-group + .menu-group {\n margin-top: 8px;\n}\n\n/* Orange segment on the tree line, next to the selected item. The line is the 1px left border of the\n parent list, so the 2px segment is centered over it. */\n.submenu > li.is-selected {\n position: relative;\n}\n\n.submenu > li.is-selected::before {\n content: '';\n position: absolute;\n top: 6px;\n bottom: 6px;\n left: -9.5px;\n width: 2px;\n border-radius: 2px;\n background: var(--color-brand-primary, #f05223);\n}\n\n/* ---------- collapse button (inside the header) ---------- */\n\n.menu-toggle {\n width: 32px;\n height: 32px;\n margin-left: auto;\n padding: 0;\n border: 1px solid var(--color-line-general, #e5e6e6);\n border-radius: 999px;\n background: var(--color-surface-body, #fff);\n color: var(--color-icon-primary, #6c6e6e);\n cursor: pointer;\n transition:\n color 160ms $menu-ease-standard,\n border-color 160ms $menu-ease-standard,\n background-color 160ms $menu-ease-standard;\n}\n\n.menu-toggle:hover {\n color: var(--color-brand-primary, #f05223);\n border-color: var(--color-brand-primary, #f05223);\n}\n\n.menu-toggle:focus-visible {\n outline: 2px solid var(--color-states-bg-focus, #1355b4);\n outline-offset: 2px;\n}\n\n.menu-shell--collapsed .menu-toggle {\n margin: 16px 0 0;\n}\n\n/* ---------- collapsed rail ---------- */\n\n.menu-shell--collapsed .menu-item {\n margin-inline: 0;\n padding-block: 10px;\n}\n\n.menu-shell--collapsed .item-icon {\n width: 20px;\n height: 20px;\n}\n\n.menu-shell--collapsed .item-icon i {\n font-size: 20px;\n}\n\n/* The profile button spans the same width as the footer divider and the item rows. */\n.menu-shell--expanded .user-info {\n margin-inline: 0;\n}\n\n.menu-shell--collapsed .menu-footer {\n padding-inline: 18px;\n}\n\n.menu-shell--collapsed .menu-nav {\n scrollbar-width: none;\n}\n\n.menu-shell--collapsed .menu-nav::-webkit-scrollbar {\n display: none;\n}\n\n/* A hidden wrapping label must not keep its height in the rail. */\n.menu-copy--hidden.menu-item-label--wrap {\n white-space: nowrap;\n}\n\n.menu-nav {\n transition: padding 360ms $menu-ease-emphasized;\n scrollbar-width: thin;\n scrollbar-color: var(--color-line-general-strong, #bfc0c0) transparent;\n padding-bottom: 16px;\n}\n\n/* The scroll area spans the full menu width so the scrollbar sits on the menu edge,\n not between the labels and the carets. The gutter keeps the right edge stable. */\n.menu-shell--expanded .menu-nav {\n margin-inline: -20px;\n padding-left: 20px;\n padding-right: 14px;\n scrollbar-gutter: stable;\n}\n\n.menu-nav::-webkit-scrollbar {\n width: 6px;\n}\n\n.menu-nav::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.menu-nav::-webkit-scrollbar-thumb {\n border-radius: 999px;\n background: var(--color-line-general-strong, #bfc0c0);\n}\n\n.menu-nav::-webkit-scrollbar-thumb:hover {\n background: var(--color-text-disabled, #949595);\n}\n\n.item-icon {\n width: 16px;\n height: 16px;\n}\n\n/* Long system names wrap; keep icon and caret on the first line. */\n.menu-nav .menu-item,\n.menu-nav .menu-item > div,\n.menu-nav .submenu-item,\n.menu-nav .submenu-item-branch-content,\n.menu-nav .submenu-item-branch-caret {\n align-items: flex-start;\n}\n\n\n.submenu-item .submenu-item-label {\n font-size: var(--sula-menu-sub-item-font-size);\n line-height: 1.25rem;\n}\n\n/* Icon and caret boxes match the first text line, so they stay aligned when labels wrap. */\n.menu-nav .item-icon,\n.menu-nav .menu-item-caret,\n.menu-nav .submenu-item-branch-caret {\n height: 1.25rem;\n}\n\n.menu-shell--expanded .menu-item .item-icon {\n width: 18px;\n}\n\n.menu-shell--expanded .menu-item .item-icon i {\n font-size: 18px;\n}\n\n\n\n.menu-footer {\n transition: padding 360ms $menu-ease-emphasized;\n}\n\n.menu-brand-image {\n flex: 0 0 auto;\n transition:\n margin 320ms $menu-ease-emphasized,\n transform 320ms $menu-ease-emphasized;\n}\n\n.menu-copy {\n display: block;\n min-width: 0;\n max-width: 220px;\n overflow: hidden;\n opacity: 1;\n white-space: nowrap;\n transform: translateX(0);\n transform-origin: left center;\n transition:\n max-width 320ms $menu-ease-emphasized,\n opacity 200ms $menu-ease-standard,\n transform 320ms $menu-ease-emphasized;\n}\n\n.menu-copy--visible {\n max-width: 100%;\n opacity: 1;\n transform: translateX(0);\n pointer-events: auto;\n}\n\n.menu-copy--hidden {\n max-width: 0;\n opacity: 0;\n transform: translateX(-10px);\n pointer-events: none;\n}\n\n.menu-title {\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.menu-title.menu-copy--visible {\n max-width: 100%;\n}\n\n.menu-item-label {\n flex: 1 1 auto;\n font-size: var(--sula-menu-main-item-font-size);\n line-height: var(--sula-menu-main-item-line-height);\n}\n\n.menu-item-label--truncate {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.menu-item-label--wrap {\n display: -webkit-box;\n overflow: hidden;\n text-overflow: initial;\n white-space: normal;\n overflow-wrap: anywhere;\n word-break: break-word;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: var(--sula-menu-main-item-max-lines);\n line-clamp: var(--sula-menu-main-item-max-lines);\n}\n\n.menu-item {\n margin-inline: -8px;\n padding-block: var(--sula-menu-main-item-padding-block);\n transition:\n background-color 200ms $menu-ease-standard,\n color 200ms $menu-ease-standard,\n border-color 240ms $menu-ease-emphasized,\n margin-left 240ms $menu-ease-emphasized,\n padding 320ms $menu-ease-emphasized;\n}\n\n.menu-item-caret {\n max-width: 16px;\n overflow: hidden;\n opacity: 1;\n transition:\n transform 280ms $menu-ease-emphasized,\n opacity 180ms $menu-ease-standard,\n max-width 280ms $menu-ease-emphasized,\n margin-left 280ms $menu-ease-emphasized;\n}\n\n.menu-item-caret--visible {\n opacity: 1;\n max-width: 16px;\n margin-left: 12px;\n}\n\n.menu-item-caret--hidden {\n opacity: 0;\n max-width: 0;\n margin-left: 0;\n transform: translateX(-8px);\n}\n\n.menu-item-caret--expanded {\n transform: rotate(180deg);\n}\n\n.submenu {\n max-height: 0;\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n will-change: max-height, opacity, transform;\n transform: translateY(-6px);\n transform-origin: top left;\n transition:\n max-height 260ms $menu-ease-emphasized,\n opacity 120ms $menu-ease-standard,\n transform 180ms $menu-ease-emphasized;\n}\n\n.submenu--expanded {\n max-height: 999px;\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0);\n}\n\n.submenu-item {\n transition:\n background-color 200ms $menu-ease-standard,\n color 200ms $menu-ease-standard,\n transform 240ms $menu-ease-emphasized;\n}\n\n.submenu-item--branch {\n transition:\n background-color 200ms $menu-ease-standard,\n color 200ms $menu-ease-standard,\n border-color 240ms $menu-ease-emphasized,\n margin-left 240ms $menu-ease-emphasized;\n}\n\n.submenu-item-branch-content {\n min-width: 0;\n}\n\n.submenu-branch {\n transform-origin: top left;\n}\n\n.submenu-grandchild-item {\n transition:\n background-color 200ms $menu-ease-standard,\n color 200ms $menu-ease-standard,\n transform 240ms $menu-ease-emphasized;\n}\n\n.submenu-grandchild-label {\n display: block;\n}\n\n/* ---------- drill-down header ---------- */\n\n.menu-header--drilldown {\n animation: drill-header-in 220ms $menu-ease-standard;\n}\n\n.identity-strip {\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n align-items: center;\n margin: 0 0 0 -8px;\n padding: 6px 8px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: left;\n cursor: pointer;\n transition: background-color 160ms $menu-ease-standard;\n}\n\n.identity-row {\n margin-bottom: 12px;\n}\n\n.identity-strip:hover {\n background: var(--color-surface-on-body, #f3f4f4);\n}\n\n.identity-image {\n flex: none;\n width: 20px;\n height: 20px;\n margin-right: 8px;\n border-radius: 5px;\n overflow: hidden;\n}\n\n.identity-image img {\n display: block;\n width: 100%;\n height: 100%;\n}\n\n.identity-label {\n min-width: 0;\n font-size: 13px;\n font-weight: 500;\n color: var(--color-text-secondary, #6c6e6e);\n}\n\n.breadcrumb-row {\n position: relative;\n display: flex;\n align-items: center;\n min-width: 0;\n margin-bottom: 10px;\n}\n\n.back-btn {\n flex: none;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n margin: 0 2px 0 -6px;\n padding: 0;\n border: none;\n border-radius: 8px;\n background: transparent;\n cursor: pointer;\n transition: background-color 160ms $menu-ease-standard;\n}\n\n.back-btn:hover {\n background: var(--color-surface-on-body, #f3f4f4);\n}\n\n.crumb-trail {\n flex: 1 1 auto;\n min-width: 0;\n gap: 2px;\n}\n\n.crumb-btn {\n flex: 0 1 auto;\n text-align: left;\n min-width: 28px;\n max-width: 120px;\n padding: 3px 4px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--color-text-secondary, #6c6e6e);\n font: inherit;\n font-size: 12px;\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n transition: background-color 160ms $menu-ease-standard, color 160ms $menu-ease-standard;\n}\n\n.crumb-btn:hover {\n background: var(--color-surface-on-body, #f3f4f4);\n color: var(--color-text-primary, #313333);\n}\n\n\n.crumb-btn--ellipsis {\n flex: none;\n max-width: none;\n display: flex;\n align-items: center;\n padding: 3px 5px;\n}\n\n.crumb-sep {\n flex: none;\n color: var(--color-text-disabled, #949595);\n}\n\n.crumb-dropdown {\n position: absolute;\n min-width: 172px;\n max-width: 230px;\n padding: 6px;\n display: flex;\n flex-direction: column;\n gap: 1px;\n border: 1px solid var(--color-line-general, #e5e6e6);\n border-radius: 10px;\n background: var(--color-surface-body, #fff);\n box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);\n z-index: 30;\n}\n\n.crumb-dropdown-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 7px 8px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--color-text-primary, #313333);\n font: inherit;\n font-size: 13px;\n text-align: left;\n cursor: pointer;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.crumb-dropdown-item:hover {\n background: var(--color-surface-on-body, #f3f4f4);\n}\n\n.context-row {\n min-width: 0;\n}\n\n.context-icon {\n width: 20px;\n height: 20px;\n margin-right: 8px;\n}\n\n.context-title {\n min-width: 0;\n}\n\n/* ---------- drill-down panel ---------- */\n\n.menu-panel--forward {\n animation: drill-slide-forward 260ms $menu-ease-emphasized;\n}\n\n.menu-panel--back {\n animation: drill-slide-back 260ms $menu-ease-emphasized;\n}\n\n@keyframes drill-header-in {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes drill-slide-forward {\n from {\n opacity: 0;\n transform: translateX(20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes drill-slide-back {\n from {\n opacity: 0;\n transform: translateX(-20px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n\nsula-icon {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n line-height: 1;\n}\n\nsula-icon > i {\n display: block;\n line-height: 1;\n}\n\n.item-icon > sula-icon,\n.item-icon > .menu-item-image {\n flex: none;\n}\n\n.menu-item-image {\n flex: none;\n display: block;\n object-fit: contain;\n transition: opacity 200ms $menu-ease-standard;\n}\n\n.menu-item-image--sm {\n width: 0.875rem;\n height: 0.875rem;\n}\n\n.menu-item-image--md {\n width: 1rem;\n height: 1rem;\n}\n\n.menu-item-image--lg {\n width: 1.25rem;\n height: 1.25rem;\n}\n\n.menu-item-image.is-faded {\n opacity: 0.5;\n}\n\n/* Inside an icon slot the image follows the slot size (16px sub levels, 18px level 1, 20px rail). */\n.item-icon > .menu-item-image {\n width: 100%;\n height: auto;\n aspect-ratio: 1 / 1;\n}\n\n.menu-item-image--mask {\n background-color: currentColor;\n -webkit-mask: var(--menu-item-image) center / contain no-repeat;\n mask: var(--menu-item-image) center / contain no-repeat;\n}\n\n\n.user-copy {\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n transition:\n max-width 320ms $menu-ease-emphasized,\n opacity 200ms $menu-ease-standard;\n}\n\n.user-copy--visible {\n max-width: 100%;\n opacity: 1;\n transition:\n max-width 320ms $menu-ease-emphasized,\n opacity 200ms $menu-ease-standard 120ms;\n}\n\n.user-copy--hidden {\n max-width: 0;\n opacity: 0;\n}\n\n.user-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.profile-popover {\n position: fixed;\n z-index: 60;\n width: 256px;\n box-sizing: border-box;\n border: 1px solid var(--color-line-general);\n border-radius: 12px;\n background: var(--color-surface-body);\n box-shadow:\n 0 12px 32px rgba(15, 23, 42, 0.12),\n 0 2px 8px rgba(15, 23, 42, 0.06);\n outline: none;\n visibility: hidden;\n opacity: 0;\n transform: translateY(6px) scale(0.98);\n transform-origin: bottom left;\n transition:\n opacity 160ms $menu-ease-standard,\n transform 200ms $menu-ease-emphasized,\n visibility 0s linear 200ms;\n}\n\n.profile-popover--side {\n transform: translateX(-6px) scale(0.98);\n}\n\n.profile-popover--open {\n visibility: visible;\n opacity: 1;\n transform: none;\n transition:\n opacity 160ms $menu-ease-standard,\n transform 200ms $menu-ease-emphasized;\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host,\n .menu-shell,\n .menu-header,\n .menu-nav,\n .menu-footer,\n .menu-brand-image,\n .menu-copy,\n .menu-item,\n .menu-item-caret,\n .submenu,\n .submenu-item,\n .menu-toggle,\n\n\n .menu-header--drilldown,\n .menu-panel--forward,\n .menu-panel--back {\n animation: none;\n }\n\n .menu-item-caret,\n .submenu-item,\n .submenu-grandchild-item,\n .profile-popover {\n transition: none;\n }\n}\n","import { Component, Element, Event, EventEmitter, Host, JSX, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { SulaMenuDensity, SulaMenuLabelOverflow } from '../sula-menu/model/sula-menu.model';\nimport { SulaProfileMenuItem, SulaProfileMenuSwitchChange } from '../sula-profile-menu/model/sula-profile-menu.model';\nimport { SulaWorkbenchMenuDirection, SulaWorkbenchMenuItem, SulaWorkbenchMenuPath, SulaWorkbenchMenuUser } from './model/sula-workbench-menu.model';\n\ntype CrumbMenuState = { open: boolean; left: number; top: number };\n\n/**\n * Navigation menu that combines an inline expandable tree with a drill-down panel.\n * Levels above `drilldownLevel` expand in place, as in `sula-menu`. Items at or below\n * that level with children open a single-level panel with a breadcrumb trail.\n *\n * @part shell - Main visual container of the menu.\n * @part title - Menu title, or the current level title while drilled in.\n * @part main-item-label - Label of each top-level item.\n * @part item-label - Label of each item inside the drill-down panel.\n * @part toggle-label - Label of the collapse/expand control.\n * @slot profile-content - Extra content rendered inside the profile popover.\n * @part profile-popover - Popover opened from the user area.\n * @cssprop --sula-menu-width - Width of the expanded menu. Defaults to 256px.\n * @cssprop --sula-menu-collapsed-width - Width of the collapsed menu. Defaults to 88px.\n */\n@Component({\n tag: 'sula-workbench-menu',\n styleUrl: 'sula-workbench-menu.scss',\n shadow: true,\n})\nexport class SulaWorkbenchMenu {\n @Element() el: HTMLElement;\n\n /**\n * Menu title\n */\n @Prop()\n menuTitle: string = '';\n\n /**\n * Menu image\n */\n @Prop()\n image: string = '';\n\n /**\n * Menu width in expanded state. Use a CSS length that does not depend on the\n * host width, for example: 256px, 20rem or clamp(16rem, 25vw, 24rem).\n */\n @Prop()\n width: string = '';\n\n /**\n * Density applied to menu items.\n */\n @Prop()\n density: SulaMenuDensity = SulaMenuDensity.Default;\n\n /**\n * Overflow behavior for item labels.\n */\n @Prop()\n labelOverflow: SulaMenuLabelOverflow = SulaMenuLabelOverflow.Wrap;\n\n /**\n * Depth (1-based) from which items with children open a drill-down panel instead of expanding in place.\n * With the default of 3, the first two levels expand inline and deeper branches drill down.\n */\n @Prop()\n drilldownLevel: number = 3;\n\n /**\n * Menu items. Each item may use `icon` (icon font class) or `image` (URL or data URI of an image or SVG).\n */\n @Prop({ mutable: true, reflect: true })\n items: SulaWorkbenchMenuItem[] = [];\n\n /**\n * Logged user shown at the bottom of the menu. Without a photo, the initials are shown.\n */\n @Prop()\n user?: SulaWorkbenchMenuUser;\n\n /**\n * Icon used for items without `icon` or `image`. Use an empty string to show no icon.\n */\n @Prop()\n defaultIcon: string = 'ph ph-dot-outline';\n\n /**\n * Options of the profile popover. Use `divider` for a separator and `hasSwitch` + `active` for a toggle row.\n */\n @Prop({ mutable: true })\n profileItems: SulaProfileMenuItem[] = [];\n\n /**\n * Emitted when a leaf item is selected\n */\n @Event()\n itemSelected: EventEmitter<SulaWorkbenchMenuItem>;\n\n /**\n * Emitted when any item is clicked\n */\n @Event()\n itemClicked: EventEmitter<SulaWorkbenchMenuItem>;\n\n /**\n * Emitted when the drill-down level changes, with the ids from the root to the level shown (empty at the root)\n */\n @Event()\n levelChanged: EventEmitter<SulaWorkbenchMenuPath>;\n\n /**\n * Emitted when the user area is clicked. Call `preventDefault()` to keep the profile popover closed.\n */\n @Event({ cancelable: true })\n profileClicked: EventEmitter<SulaWorkbenchMenuUser>;\n\n /**\n * Emitted when a profile popover option without switch is clicked. The popover closes.\n */\n @Event()\n profileItemClicked: EventEmitter<SulaProfileMenuItem>;\n\n /**\n * Emitted when the switch of a profile popover option changes. The popover stays open.\n */\n @Event()\n profileSwitchChanged: EventEmitter<SulaProfileMenuSwitchChange>;\n\n /**\n * Emitted when the menu is toggled between collapsed and expanded states\n * True: Menu is expanded\n * False: Menu is collapsed\n */\n @Event()\n menuToggled: EventEmitter<boolean>;\n\n @State()\n collapsed: boolean = false;\n\n @State()\n previewExpanded: boolean = false;\n\n @State()\n stack: SulaWorkbenchMenuItem[] = [];\n\n @State()\n direction: SulaWorkbenchMenuDirection = 'forward';\n\n @State()\n selectedPath: SulaWorkbenchMenuPath = [];\n\n @State()\n crumbMenu: CrumbMenuState = { open: false, left: 0, top: 0 };\n\n @State()\n profileOpen: boolean = false;\n\n private crumbEllipsisEl?: HTMLElement;\n private crumbDropdownEl?: HTMLElement;\n private shellEl?: HTMLElement;\n private userInfoEl?: HTMLElement;\n private profileEl?: HTMLElement;\n private hovering = false;\n\n private get normalizedWidth() {\n const value = this.width?.trim();\n return value ? value : undefined;\n }\n\n private get hostStyleVariables() {\n return {\n ...(this.normalizedWidth ? { '--sula-menu-width': this.normalizedWidth } : {}),\n };\n }\n\n componentWillLoad() {\n this.syncWithItems(this.items);\n }\n\n @Watch('items')\n syncWithItems(items: SulaWorkbenchMenuItem[]) {\n const nextSelected = this.findSelectedIds(items);\n if (nextSelected) {\n this.selectedPath = nextSelected;\n } else if (!this.selectedPath.length || !this.isStillSelectable(items, this.selectedPath)) {\n this.selectedPath = [];\n }\n this.stack = this.rebuildStack(items, this.stack);\n }\n\n componentDidRender() {\n this.positionProfile();\n }\n\n @Listen('click', { target: 'document' })\n onDocumentClick(event: MouseEvent) {\n const path = event.composedPath();\n if (this.profileOpen && !path.includes(this.profileEl) && !path.includes(this.userInfoEl)) this.closeProfile();\n if (!this.crumbMenu.open) return;\n if (path.includes(this.crumbEllipsisEl) || path.includes(this.crumbDropdownEl)) return;\n this.closeCrumbMenu();\n }\n\n @Listen('keydown', { target: 'document' })\n onDocumentKeydown(event: KeyboardEvent) {\n if (event.key !== 'Escape') return;\n this.closeCrumbMenu();\n if (this.profileOpen) {\n this.closeProfile();\n this.userInfoEl?.focus();\n }\n }\n\n @Listen('resize', { target: 'window' })\n onWindowResize() {\n this.positionProfile();\n }\n\n private getVisibleItems(items?: SulaWorkbenchMenuItem[]) {\n return items?.filter(item => !item.hidden) ?? [];\n }\n\n private hasVisibleChildren(item: Pick<SulaWorkbenchMenuItem, 'children'>) {\n return this.getVisibleItems(item.children).length > 0;\n }\n\n private isDrilled() {\n return this.stack.length >= this.drilldownLevel;\n }\n\n private findSelectedIds(items: SulaWorkbenchMenuItem[], trail: string[] = []): string[] | undefined {\n for (const item of this.getVisibleItems(items)) {\n if (!this.hasVisibleChildren(item)) {\n if (item.selected) return [...trail, item.id];\n continue;\n }\n const nested = this.findSelectedIds(item.children, [...trail, item.id]);\n if (nested) return nested;\n }\n return undefined;\n }\n\n private isStillSelectable(items: SulaWorkbenchMenuItem[], path: string[]) {\n const found = this.findPath(items, path[path.length - 1]);\n return !!found && !this.hasVisibleChildren(found[found.length - 1]);\n }\n\n private toggleExpanded(items: SulaWorkbenchMenuItem[], id: string): SulaWorkbenchMenuItem[] {\n return items.map(item => {\n if (item.id === id) return { ...item, expanded: !item.expanded };\n if (!item.children) return item;\n return { ...item, children: this.toggleExpanded(item.children, id) };\n });\n }\n\n private findPath(items: SulaWorkbenchMenuItem[], id: string, trail: SulaWorkbenchMenuItem[] = []): SulaWorkbenchMenuItem[] | undefined {\n for (const item of this.getVisibleItems(items)) {\n const next = [...trail, item];\n if (item.id === id) return next;\n const nested = this.findPath(item.children ?? [], id, next);\n if (nested) return nested;\n }\n return undefined;\n }\n\n private rebuildStack(items: SulaWorkbenchMenuItem[], previous: SulaWorkbenchMenuItem[]) {\n const next: SulaWorkbenchMenuItem[] = [];\n let level = items;\n\n for (const ancestor of previous) {\n const match = this.getVisibleItems(level).find(item => item.id === ancestor.id);\n if (!match) break;\n next.push(match);\n level = match.children ?? [];\n }\n\n return next;\n }\n\n private isActive(item: SulaWorkbenchMenuItem, branch: boolean) {\n if (branch) return this.selectedPath.includes(item.id);\n return this.selectedPath.length > 0 && this.selectedPath[this.selectedPath.length - 1] === item.id;\n }\n\n private isFaded(item: SulaWorkbenchMenuItem, active: boolean) {\n return !!item.disabled && !active;\n }\n\n private emitLevel() {\n this.levelChanged.emit(this.stack.map(item => item.id));\n }\n\n private toggleInline(id: string) {\n this.items = this.toggleExpanded(this.items, id);\n }\n\n private enterDrill(item: SulaWorkbenchMenuItem) {\n const path = this.findPath(this.items, item.id) ?? [item];\n this.direction = 'forward';\n this.stack = path;\n this.closeCrumbMenu();\n this.emitLevel();\n }\n\n private markSelected(items: SulaWorkbenchMenuItem[], id: string): SulaWorkbenchMenuItem[] {\n return items.map(item => ({\n ...item,\n selected: item.id === id,\n ...(item.children ? { children: this.markSelected(item.children, id) } : {}),\n }));\n }\n\n // Selection lives on the items (like `expanded`), so re-assigning items when a branch is\n // toggled keeps the user's choice instead of falling back to the initially selected item.\n private selectItem(item: SulaWorkbenchMenuItem) {\n const path = this.findPath(this.items, item.id) ?? [item];\n this.items = this.markSelected(this.items, item.id);\n this.selectedPath = path.map(p => p.id);\n this.itemSelected.emit(item);\n }\n\n private handleRowClick(item: SulaWorkbenchMenuItem, depth: number) {\n if (item.disabled) return;\n\n this.itemClicked.emit(item);\n\n if (this.hasVisibleChildren(item)) {\n if (depth < this.drilldownLevel) {\n this.toggleInline(item.id);\n } else {\n this.enterDrill(item);\n }\n return;\n }\n\n this.selectItem(item);\n }\n\n private goToDepth(index: number) {\n this.direction = 'back';\n this.stack = index < 0 ? [] : this.stack.slice(0, index + 1);\n this.closeCrumbMenu();\n this.emitLevel();\n }\n\n private toggleCrumbMenu(event: MouseEvent) {\n if (this.crumbMenu.open) {\n this.closeCrumbMenu();\n return;\n }\n const button = event.currentTarget as HTMLElement;\n this.crumbMenu = {\n open: true,\n left: button.offsetLeft,\n top: button.offsetTop + button.offsetHeight + 6,\n };\n }\n\n private closeCrumbMenu() {\n if (this.crumbMenu.open) this.crumbMenu = { ...this.crumbMenu, open: false };\n }\n\n private toggleMenu() {\n this.closeProfile();\n if (this.collapsed) {\n this.collapsed = false;\n this.previewExpanded = false;\n this.menuToggled.emit(true);\n return;\n }\n\n this.collapsed = true;\n this.menuToggled.emit(false);\n this.previewExpanded = false;\n }\n\n private handleMenuMouseEnter() {\n this.hovering = true;\n if (this.collapsed) this.previewExpanded = true;\n }\n\n // While the popover is open the preview stays expanded, so the popover keeps its anchor.\n private handleMenuMouseLeave() {\n this.hovering = false;\n if (this.collapsed && !this.profileOpen) this.previewExpanded = false;\n }\n\n private toggleProfile() {\n if (this.profileOpen) {\n this.closeProfile();\n return;\n }\n if (this.profileClicked.emit(this.user).defaultPrevented) return;\n this.profileOpen = true;\n requestAnimationFrame(() => this.profileEl?.focus());\n }\n\n private closeProfile() {\n if (!this.profileOpen) return;\n this.profileOpen = false;\n if (this.collapsed && !this.hovering) this.previewExpanded = false;\n }\n\n // Fixed position, so ancestors with overflow hidden do not clip the popover.\n private positionProfile() {\n if (!this.profileOpen || !this.profileEl || !this.userInfoEl || !this.shellEl) return;\n const gap = 8;\n const inset = 12;\n const anchor = this.userInfoEl.getBoundingClientRect();\n const shell = this.shellEl.getBoundingClientRect();\n const style = this.profileEl.style;\n\n if (!this.collapsed || this.previewExpanded) {\n style.left = `${shell.left + inset}px`;\n style.width = `${shell.width - inset * 2}px`;\n style.bottom = `${window.innerHeight - anchor.top + gap}px`;\n return;\n }\n\n style.left = `${shell.right + gap}px`;\n style.width = '';\n style.bottom = `${window.innerHeight - anchor.bottom}px`;\n }\n\n // Inner events are composed; stopping them avoids clashing with this menu's own itemClicked.\n private handleProfileItemClicked(event: CustomEvent<SulaProfileMenuItem>) {\n event.stopPropagation();\n this.closeProfile();\n this.profileItemClicked.emit(event.detail);\n }\n\n private handleProfileSwitchChanged(event: CustomEvent<SulaProfileMenuSwitchChange>) {\n event.stopPropagation();\n const { item } = event.detail;\n this.profileItems = this.profileItems.map(current => (current.id === item.id ? item : current));\n this.profileSwitchChanged.emit(event.detail);\n }\n\n private renderProfilePopover(expandedView: boolean) {\n return (\n <div\n part=\"profile-popover\"\n role=\"dialog\"\n aria-label={`Perfil de ${this.user.name}`}\n aria-hidden={String(!this.profileOpen)}\n tabIndex={-1}\n ref={el => (this.profileEl = el)}\n class={{\n 'profile-popover': true,\n 'profile-popover--open': this.profileOpen,\n 'profile-popover--side': !expandedView,\n }}\n >\n <sula-profile-menu\n user={this.user}\n items={this.profileItems}\n onItemClicked={event => this.handleProfileItemClicked(event)}\n onSwitchChanged={event => this.handleProfileSwitchChanged(event)}\n >\n <slot name=\"profile-content\"></slot>\n </sula-profile-menu>\n </div>\n );\n }\n\n private isValidIcon(icon?: string) {\n return !!icon && /ph-[a-z]/.test(icon);\n }\n\n private isSvg(image: string) {\n return /^data:image\\/svg\\+xml/i.test(image) || /\\.svg(\\?|#|$)/i.test(image);\n }\n\n private iconOf(item: SulaWorkbenchMenuItem) {\n return this.isValidIcon(item.icon) ? item.icon : this.defaultIcon;\n }\n\n private hasIcon(item: SulaWorkbenchMenuItem) {\n return !!item.image || this.isValidIcon(this.iconOf(item));\n }\n\n private renderItemIcon(item: SulaWorkbenchMenuItem, customClass: string, size: 'sm' | 'md' | 'lg', faded = false) {\n if (!this.hasIcon(item)) return null;\n if (item.image && this.isSvg(item.image)) {\n // SVGs are painted with currentColor through a mask, so they follow the same state colors as the icon font.\n return (\n <span\n class={`menu-item-image menu-item-image--mask menu-item-image--${size} ${customClass}`}\n style={{ '--menu-item-image': `url(\"${item.image.replace(/\"/g, '%22')}\")` }}\n aria-hidden=\"true\"\n ></span>\n );\n }\n if (item.image) {\n return (\n <img\n class={{ 'menu-item-image': true, [`menu-item-image--${size}`]: true, 'is-faded': faded }}\n src={item.image}\n alt=\"\"\n />\n );\n }\n return <sula-icon icon={this.iconOf(item)} customClass={customClass}></sula-icon>;\n }\n\n private getInitials(name: string) {\n return name\n .split(' ')\n .filter(Boolean)\n .slice(0, 2)\n .map(part => part[0].toUpperCase())\n .join('');\n }\n\n private renderUserInfo(expandedView: boolean) {\n const user = this.user;\n return (\n <button\n type=\"button\"\n class={{\n 'user-info flex min-w-0 cursor-pointer items-center rounded-xs p-8 text-left hover:bg-states-empty-bg-hover': true,\n 'user-info--active bg-states-empty-bg-hover': this.profileOpen,\n 'w-full': expandedView,\n }}\n title={`Ver perfil de ${user.name}`}\n aria-label={`Ver perfil de ${user.name}`}\n aria-haspopup=\"dialog\"\n aria-expanded={String(this.profileOpen)}\n ref={el => (this.userInfoEl = el)}\n onClick={() => this.toggleProfile()}\n >\n <span class=\"user-avatar flex h-9 w-9 flex-none items-center justify-center overflow-hidden rounded-full bg-brand-primary text-sm font-semibold text-negative-negative-1\">\n {user.photo ? <img src={user.photo} alt={user.name} /> : this.getInitials(user.name)}\n </span>\n <span\n aria-hidden={!expandedView}\n class={{\n 'user-copy': true,\n 'ml-8': true,\n 'user-copy--visible': expandedView,\n 'user-copy--hidden': !expandedView,\n }}\n >\n <span part=\"user-name\" class=\"user-name truncate text-sm font-semibold text-text-primary\">\n {user.name}\n </span>\n {user.email && <span part=\"user-email\" class=\"user-email truncate text-xs text-text-secondary\">{user.email}</span>}\n </span>\n </button>\n );\n }\n\n private getIconClass(active: boolean, faded: boolean, size: string) {\n if (faded) return `text-icon-disabled ${size}`;\n if (active) return `text-brand-primary ${size}`;\n return `text-icon-primary ${size}`;\n }\n\n private renderCollapseButton() {\n const label = this.collapsed ? 'Expandir menu' : 'Recolher menu';\n return (\n <button\n type=\"button\"\n class=\"menu-toggle flex flex-none items-center justify-center\"\n title={label}\n aria-label={label}\n aria-expanded={String(!this.collapsed)}\n onClick={() => this.toggleMenu()}\n >\n <sula-icon icon={`ph-bold ph-caret-${this.collapsed ? 'right' : 'left'}`} customClass=\"text-lg\"></sula-icon>\n </button>\n );\n }\n\n private renderRootHeader(expandedView: boolean) {\n return (\n <div\n class={{\n 'menu-header flex items-center': true,\n 'mb-40': expandedView,\n 'mb-24 flex-col justify-center px-0': !expandedView,\n }}\n >\n {this.image && (\n <div class={{ 'menu-brand-image max-h-10 max-w-10 overflow-hidden': true, 'mr-6': expandedView }}>\n <img src={this.image} alt={this.menuTitle} />\n </div>\n )}\n <div\n aria-hidden={!expandedView}\n title={expandedView ? this.menuTitle : undefined}\n class={{\n 'menu-title menu-copy': true,\n 'menu-copy--visible': expandedView,\n 'menu-copy--hidden': !expandedView,\n }}\n >\n <h1 part=\"title\" class=\"truncate text-2xl font-bold leading-7 text-text-secondary\">\n {this.menuTitle}\n </h1>\n </div>\n {this.renderCollapseButton()}\n </div>\n );\n }\n\n private renderTrail(ancestors: SulaWorkbenchMenuItem[]) {\n const hasHidden = ancestors.length > 2;\n const visible = hasHidden ? ancestors.slice(-2) : ancestors;\n const crumbs: JSX.Element[] = [];\n\n if (hasHidden) {\n crumbs.push(\n <button\n key=\"ellipsis\"\n type=\"button\"\n class=\"crumb-btn crumb-btn--ellipsis\"\n aria-haspopup=\"true\"\n aria-expanded={String(this.crumbMenu.open)}\n title={`${ancestors.length - 2} nível(is) anterior(es)`}\n ref={el => (this.crumbEllipsisEl = el)}\n onClick={event => this.toggleCrumbMenu(event)}\n >\n <sula-icon icon=\"ph-bold ph-dots-three\" customClass=\"text-base text-text-secondary\"></sula-icon>\n </button>,\n );\n }\n\n visible.forEach(ancestor => {\n crumbs.push(\n <button\n key={ancestor.id}\n type=\"button\"\n class=\"crumb-btn\"\n title={ancestor.label}\n onClick={() => this.goToDepth(this.stack.indexOf(ancestor))}\n >\n {ancestor.label}\n </button>,\n );\n });\n\n const nodes: JSX.Element[] = [];\n crumbs.forEach((crumb, index) => {\n if (index > 0) nodes.push(<sula-icon key={`sep-${index}`} icon=\"ph ph-caret-right\" customClass=\"crumb-sep text-xs\"></sula-icon>);\n nodes.push(crumb);\n });\n\n return (\n <nav class=\"crumb-trail flex min-w-0 items-center\" aria-label=\"Caminho de navegação\">\n {nodes}\n </nav>\n );\n }\n\n private renderCrumbDropdown(ancestors: SulaWorkbenchMenuItem[]) {\n if (!this.crumbMenu.open || ancestors.length <= 2) return null;\n const hidden = ancestors.slice(0, -2);\n\n return (\n <div\n class=\"crumb-dropdown\"\n role=\"menu\"\n ref={el => (this.crumbDropdownEl = el)}\n style={{ left: `${this.crumbMenu.left}px`, top: `${this.crumbMenu.top}px` }}\n >\n {hidden.map(ancestor => (\n <button\n key={ancestor.id}\n type=\"button\"\n role=\"menuitem\"\n class=\"crumb-dropdown-item\"\n onClick={() => this.goToDepth(this.stack.indexOf(ancestor))}\n >\n <span class=\"item-icon flex flex-none items-center justify-center\">{this.renderItemIcon(ancestor, 'text-sm text-icon-primary', 'sm')}</span>\n <span class=\"truncate\">{ancestor.label}</span>\n </button>\n ))}\n </div>\n );\n }\n\n private renderDrillHeader(activeParent: SulaWorkbenchMenuItem) {\n const ancestors = this.stack.slice(0, -1);\n const backLabel = ancestors.length ? ancestors[ancestors.length - 1].label : this.menuTitle || 'Início';\n const backButton = (\n <button\n type=\"button\"\n class=\"back-btn\"\n title={`Voltar para ${backLabel}`}\n aria-label={`Voltar para ${backLabel}`}\n onClick={() => this.goToDepth(this.stack.length - 2)}\n >\n <sula-icon icon=\"ph ph-arrow-left\" customClass=\"text-lg text-icon-primary\"></sula-icon>\n </button>\n );\n\n return (\n <div class=\"menu-header menu-header--drilldown mb-16 flex flex-col border-b border-line-general pb-24\">\n <div class=\"identity-row flex items-center\">\n <button type=\"button\" class=\"identity-strip\" title={`Ir para o início de ${this.menuTitle}`} onClick={() => this.goToDepth(-1)}>\n {this.image && (\n <span class=\"identity-image\">\n <img src={this.image} alt=\"\" />\n </span>\n )}\n <span class=\"identity-label truncate\">{this.menuTitle}</span>\n </button>\n {this.renderCollapseButton()}\n </div>\n\n {ancestors.length > 0 && (\n <div class=\"breadcrumb-row\">\n {backButton}\n {this.renderTrail(ancestors)}\n {this.renderCrumbDropdown(ancestors)}\n </div>\n )}\n\n <div class={{ 'context-row flex items-center min-w-0': true, 'mt-8': ancestors.length > 0 }}>\n {ancestors.length === 0 && backButton}\n {this.hasIcon(activeParent) && (\n <span class=\"context-icon flex flex-none items-center justify-center\">\n {this.renderItemIcon(activeParent, 'text-xl text-brand-primary', 'md')}\n </span>\n )}\n <h1 part=\"title\" class=\"context-title truncate text-xl font-semibold leading-tight text-text-primary\">\n {activeParent.label}\n </h1>\n </div>\n </div>\n );\n }\n\n private renderDrillRow(item: SulaWorkbenchMenuItem, reserve: boolean) {\n const branch = this.hasVisibleChildren(item);\n const active = this.isActive(item, branch);\n const faded = this.isFaded(item, active);\n\n return (\n <li class=\"list-none\" key={item.id}>\n <div\n class={{\n 'menu-item flex items-center justify-between rounded-xs px-8': true,\n 'cursor-pointer hover:bg-states-empty-bg-hover': !item.disabled && !active,\n 'cursor-pointer': !item.disabled && active,\n 'cursor-not-allowed': !!item.disabled,\n }}\n aria-disabled={!!item.disabled}\n onClick={() => this.handleRowClick(item, this.stack.length + 1)}\n >\n <span class=\"flex min-w-0 flex-1 items-center gap-8\">\n {this.renderIconSlot(item, this.getIconClass(active, faded, 'text-base'), faded, reserve)}\n <span\n part=\"item-label\"\n class={{\n 'menu-item-label truncate': this.labelOverflow !== SulaMenuLabelOverflow.Wrap,\n 'menu-item-label menu-item-label--wrap': this.labelOverflow === SulaMenuLabelOverflow.Wrap,\n 'font-bold text-text-primary': active,\n 'text-text-disabled': faded,\n 'text-text-secondary': !active && !faded,\n }}\n >\n {item.label}\n </span>\n </span>\n {branch && <sula-icon icon=\"ph ph-caret-right\" customClass={faded ? 'text-text-disabled text-xs' : 'text-text-secondary text-xs'}></sula-icon>}\n </div>\n </li>\n );\n }\n\n private renderDrillPanel() {\n const activeParent = this.stack[this.stack.length - 1];\n const panelKey = this.stack.map(item => item.id).join('/');\n\n return (\n <ul\n key={panelKey}\n class={{\n 'menu-panel flex flex-col': true,\n 'menu-panel--forward': this.direction === 'forward',\n 'menu-panel--back': this.direction === 'back',\n }}\n >\n {this.getVisibleItems(activeParent.children).map(item => this.renderDrillRow(item, this.siblingsHaveIcon(activeParent.children)))}\n </ul>\n );\n }\n\n private getMainIconClass(active: boolean, faded: boolean) {\n if (faded) return 'text-icon-disabled text-base';\n if (active) return 'text-brand-primary text-base';\n return 'text-icon-primary text-base';\n }\n\n private getMainCaretClass(active: boolean, faded: boolean) {\n if (faded) return 'text-text-disabled text-xs';\n if (active) return 'text-text-primary text-xs';\n return 'text-text-secondary text-xs';\n }\n\n private getSubIconClass(faded: boolean, selected = false) {\n if (faded) return 'text-icon-disabled text-base';\n if (selected) return 'text-brand-primary text-base';\n return 'text-icon-primary text-base';\n }\n\n private getSubCaretClass(faded: boolean) {\n return faded ? 'text-icon-disabled text-xs' : 'text-icon-primary text-xs';\n }\n\n private siblingsHaveIcon(items: SulaWorkbenchMenuItem[]) {\n return this.getVisibleItems(items).some(sibling => this.hasIcon(sibling));\n }\n\n private renderIconSlot(item: SulaWorkbenchMenuItem, customClass: string, faded: boolean, reserve = true) {\n if (!reserve && !this.hasIcon(item)) return null;\n return <span class=\"item-icon flex flex-none items-center justify-center\">{this.renderItemIcon(item, customClass, 'lg', faded)}</span>;\n }\n\n private renderMainRow(item: SulaWorkbenchMenuItem, expandedView: boolean, branch: boolean, expanded: boolean, active: boolean, faded: boolean, reserve: boolean) {\n const labelOverflowTruncate = this.labelOverflow === SulaMenuLabelOverflow.Truncate;\n return (\n <div\n class={{\n 'menu-item flex items-center rounded-xs px-8': true,\n 'cursor-pointer hover:bg-states-empty-bg-hover': !item.disabled,\n 'cursor-not-allowed': !!item.disabled,\n 'justify-between': expandedView,\n 'justify-center': !expandedView,\n }}\n title={!expandedView ? item.label : undefined}\n aria-disabled={!!item.disabled}\n onClick={() => this.handleRowClick(item, 1)}\n >\n <div class={{ 'flex items-center': true, 'flex-1 min-w-0 gap-8': expandedView, 'justify-center': !expandedView }}>\n {this.renderIconSlot(item, this.getMainIconClass(active, faded), faded, reserve)}\n <span\n part=\"main-item-label\"\n title={expandedView ? item.label : undefined}\n aria-hidden={!expandedView}\n class={{\n 'menu-item-label menu-copy': true,\n 'menu-item-label--truncate': labelOverflowTruncate,\n 'menu-item-label--wrap': !labelOverflowTruncate,\n 'menu-copy--visible': expandedView,\n 'menu-copy--hidden': !expandedView,\n 'font-bold text-text-primary': active,\n 'text-text-disabled': faded,\n 'text-text-secondary': !active && !faded,\n }}\n >\n {item.label}\n </span>\n </div>\n {branch && (\n <sula-icon\n aria-hidden={!expandedView}\n class={{\n 'menu-item-caret flex items-center justify-center': true,\n 'menu-item-caret--expanded': expanded,\n 'menu-item-caret--visible': expandedView,\n 'menu-item-caret--hidden': !expandedView,\n }}\n icon=\"ph ph-caret-down\"\n customClass={this.getMainCaretClass(active, faded)}\n ></sula-icon>\n )}\n </div>\n );\n }\n\n private renderSubRow(item: SulaWorkbenchMenuItem, expandedView: boolean, branch: boolean, expanded: boolean, active: boolean, faded: boolean, drill: boolean, reserve: boolean) {\n const caretIcon = drill ? 'ph-bold ph-caret-right' : `ph-bold ph-caret-${expanded && expandedView ? 'up' : 'down'}`;\n const onClick = () => this.handleRowClick(item, this.depthOf(item));\n const rowClass = {\n 'submenu-item flex min-w-0 items-center rounded-xs py-8 pr-8 select-none': true,\n 'submenu-item--branch w-full': branch,\n 'cursor-pointer hover:bg-states-empty-bg-hover': !item.disabled,\n 'cursor-not-allowed': !!item.disabled,\n 'font-bold': active && branch,\n };\n const label = (\n <span\n class={{\n 'submenu-item-label min-w-0 flex-1': true,\n 'ml-8': reserve || this.hasIcon(item),\n 'menu-item-label--truncate': this.labelOverflow === SulaMenuLabelOverflow.Truncate,\n 'menu-item-label--wrap': this.labelOverflow !== SulaMenuLabelOverflow.Truncate,\n 'text-text-primary': !faded,\n 'text-text-disabled': faded,\n 'font-bold': active,\n }}\n >\n {item.label}\n </span>\n );\n\n if (!branch) {\n return (\n <a class={rowClass} style={{ paddingLeft: '8px' }} title={item.label} aria-disabled={!!item.disabled} onClick={onClick}>\n {this.renderIconSlot(item, this.getSubIconClass(faded, active && !branch), faded, reserve)}\n {label}\n </a>\n );\n }\n\n return (\n <a class={rowClass} style={{ paddingLeft: '8px' }} title={item.label} aria-disabled={!!item.disabled} onClick={onClick}>\n <div class=\"submenu-item-branch-content flex min-w-0 flex-1 items-center\">\n {this.renderIconSlot(item, this.getSubIconClass(faded, active && !branch), faded, reserve)}\n {label}\n </div>\n <div class=\"submenu-item-branch-caret flex flex-none items-center justify-end pl-8\">\n <sula-icon icon={caretIcon} customClass={this.getSubCaretClass(faded)}></sula-icon>\n </div>\n </a>\n );\n }\n\n private depthOf(item: SulaWorkbenchMenuItem) {\n const path = this.findPath(this.items, item.id);\n return path ? path.length : 1;\n }\n\n private renderInlineList(items: SulaWorkbenchMenuItem[], depth: number, expandedView: boolean) {\n const reserve = this.siblingsHaveIcon(items);\n return this.getVisibleItems(items).map(item => {\n const branch = this.hasVisibleChildren(item);\n const drill = branch && depth >= this.drilldownLevel;\n const inline = branch && !drill;\n const expanded = inline && !!item.expanded;\n const active = this.isActive(item, branch) || expanded;\n const faded = this.isFaded(item, active);\n\n const row =\n depth === 1\n ? this.renderMainRow(item, expandedView, branch, expanded, active, faded, reserve)\n : this.renderSubRow(item, expandedView, branch, expanded, active, faded, drill, reserve);\n\n return (\n <li class={{ 'decoration-none list-none': true, 'menu-group': depth === 1, 'is-selected': depth > 1 && active && !branch }} key={item.id}>\n {row}\n {inline && (\n <ul\n aria-hidden={!expandedView || !expanded}\n class={{\n submenu: true,\n 'submenu--expanded': expandedView && expanded,\n 'ml-[8px] border-l border-line-general pl-8': depth === 1,\n 'submenu-branch ml-[24px] border-l border-line-general pl-8': depth > 1,\n }}\n >\n {this.renderInlineList(item.children, depth + 1, expandedView)}\n </ul>\n )}\n </li>\n );\n });\n }\n\n render() {\n const expandedView = !this.collapsed || this.previewExpanded;\n const drilled = expandedView && this.isDrilled();\n const activeParent = this.stack[this.stack.length - 1];\n\n return (\n <Host\n class={{\n 'menu-host--collapsed': this.collapsed,\n 'menu-host--preview': this.collapsed && this.previewExpanded,\n 'menu-host--density-compact': this.density === SulaMenuDensity.Compact,\n 'menu-host--density-comfortable': this.density === SulaMenuDensity.Comfortable,\n }}\n style={this.hostStyleVariables}\n onMouseEnter={() => this.handleMenuMouseEnter()}\n onMouseLeave={() => this.handleMenuMouseLeave()}\n >\n <aside\n part=\"shell\"\n ref={el => (this.shellEl = el)}\n class={{\n 'menu-shell flex h-full flex-col bg-surface-body shadow-md z-50': true,\n 'menu-shell--collapsed': this.collapsed && !this.previewExpanded,\n 'menu-shell--expanded': expandedView,\n 'menu-shell--preview': this.collapsed && this.previewExpanded,\n }}\n >\n {drilled ? this.renderDrillHeader(activeParent) : this.renderRootHeader(expandedView)}\n\n <nav\n class={{\n 'menu-nav flex h-full flex-col overflow-y-auto overflow-x-hidden': true,\n 'px-12': !expandedView,\n }}\n >\n {drilled ? (\n this.renderDrillPanel()\n ) : (\n <ul class=\"flex flex-col\">{this.renderInlineList(this.items, 1, expandedView)}</ul>\n )}\n </nav>\n\n {this.user && (\n <div class=\"menu-footer border-t border-line-general pt-12\">\n {this.renderUserInfo(expandedView)}\n </div>\n )}\n </aside>\n\n {this.user && this.renderProfilePopover(expandedView)}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/webcomponents/{p-cbb7df72.entry.js → p-705e2424.entry.js} RENAMED Viewed

@@ -2,7 +2,7 @@ import { r as e, c as o, h as t, H as r, a } from "./p-BL15Tt3m.js";
 import { S as i } from "./p-t0X4JATS.js";
-const l = '*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{font-family:Figtree;line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.absolute{position:absolute}.block{display:block}.hidden{display:none}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}:host,:host button,:host input,:host option,:host select,:host textarea{font-family:Figtree,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}:host{display:block;max-width:400px;width:100%}.toast-copy{overflow-wrap:anywhere}.toast-title{display:block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast-message{-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;display:-webkit-box;overflow:hidden}.toast-action{display:block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast-surface{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 12px 48px rgba(25,29,29,.2);max-width:400px}.toast-surface--animated{animation:sula-toast-fade-in .28s cubic-bezier(.2,.8,.2,1),sula-toast-border-settle .72s step-end}.toast-border{height:calc(100% + 2px);inset:-1px;overflow:visible;pointer-events:none;position:absolute;width:calc(100% + 2px)}.toast-surface--animated .toast-border{animation:sula-toast-border-overlay .72s step-end}.toast-border__path{x:.5px;y:.5px;rx:12px;fill:none;stroke:var(--toast-border-color);stroke-width:1px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;height:calc(100% - 1px);width:calc(100% - 1px)}.toast-surface--animated .toast-border__path{animation:sula-toast-border-trace .72s cubic-bezier(.4,0,.2,1)}@keyframes sula-toast-fade-in{0%{opacity:0}to{opacity:1}}@keyframes sula-toast-border-settle{0%{border-color:transparent}to{border-color:var(--toast-border-color)}}@keyframes sula-toast-border-overlay{0%{opacity:1}to{opacity:0}}@keyframes sula-toast-border-trace{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}@supports not (((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))) or (-webkit-backdrop-filter:blur(20px))){.toast-surface.bg-opacity-toast{background-color:var(--color-surface-body)}}@media (prefers-reduced-motion:reduce){.toast-surface--animated{animation:none}.toast-surface--animated .toast-border{display:none}}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#012b15;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#330d00;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#402705;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#401204;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#402301;--color-gray-50:#fff;--color-gray-100:#f3f4f4;--color-gray-200:#e5e6e6;--color-gray-300:#bfc0c0;--color-gray-400:#acaeae;--color-gray-500:#949595;--color-gray-600:#737575;--color-gray-700:#6c6e6e;--color-gray-800:#313333;--color-gray-900:#272929;--color-gray-950:#191d1d;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#071e40;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:rgba(25,29,29,.02);--color-black-opacity-100:rgba(25,29,29,.05);--color-black-opacity-200:rgba(25,29,29,.11);--color-black-opacity-300:rgba(25,29,29,.28);--color-black-opacity-400:rgba(25,29,29,.36);--color-black-opacity-500:rgba(25,29,29,.44);--color-black-opacity-600:rgba(25,29,29,.62);--color-black-opacity-700:rgba(25,29,29,.64);--color-black-opacity-800:rgba(25,29,29,.72);--color-black-opacity-900:rgba(25,29,29,.8);--color-black-opacity-950:rgba(25,29,29,.96);--color-shadow-opacity-50:rgba(0,0,0,.04);--color-shadow-opacity-100:rgba(0,0,0,.06);--color-shadow-opacity-200:rgba(0,0,0,.12);--color-shadow-opacity-300:rgba(0,0,0,.2);--color-shadow-opacity-400:rgba(0,0,0,.32);--color-shadow-opacity-500:rgba(0,0,0,.5);--color-shadow-opacity-600:rgba(0,0,0,.55);--color-shadow-opacity-700:rgba(0,0,0,.64);--color-shadow-opacity-800:rgba(0,0,0,.73);--color-shadow-opacity-900:rgba(0,0,0,.8);--color-shadow-opacity-950:rgba(0,0,0,.91);--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f3f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#313333;--color-text-secondary:#6c6e6e;--color-text-disabled:#949595;--color-text-link:#1355b4;--color-states-empty-bg-hover:rgba(25,29,29,.05);--color-states-empty-bg-pressed:rgba(25,29,29,.11);--color-states-bg-disabled:rgba(25,29,29,.02);--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e5e6e6;--color-states-negative-pressed:#bfc0c0;--color-icon-primary:#6c6e6e;--color-icon-secondary:#fff;--color-icon-tertiary:#b30404;--color-icon-disabled:#acaeae;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f3f4f4;--color-neutral-neutral-3:#acaeae;--color-neutral-neutral-4:#949595;--color-neutral-neutral-5:#737575;--color-neutral-neutral-6:#6c6e6e;--color-neutral-neutral-7:#313333;--color-neutral-neutral-8:#272929;--color-negative-negative-1:#fff;--color-negative-negative-2:#313333;--color-opacity-body:#fffc;--color-opacity-on-body:rgba(25,29,29,.02);--color-opacity-overlay:rgba(25,29,29,.62);--color-opacity-on-overlay:#ffffff1a;--color-opacity-toast:#ffffff45;--color-line-input:#949595;--color-line-general-strong:#bfc0c0;--color-line-general:#e5e6e6;--color-line-hair:rgba(25,29,29,.05);--color-box-shadow-body:#fff;--color-box-shadow-shadow-color-1:rgba(0,0,0,.04);--color-box-shadow-shadow-color-2:rgba(0,0,0,.06)}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.static{position:static}.relative{position:relative}.right-16{right:1rem}.top-16{top:1rem}.isolate{isolation:isolate}.box-border{box-sizing:border-box}.flex{display:flex}.h-24{height:1.5rem}.h-44{height:2.75rem}.w-24{width:1.5rem}.w-44{width:2.75rem}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-12{gap:.75rem}.gap-4{gap:.25rem}.gap-8{gap:.5rem}.self-start{align-self:flex-start}.rounded{border-radius:.25rem}.rounded-sm{border-radius:.75rem}.rounded-xxl{border-radius:18.75rem}.border{border-width:1px}.border-brand-primary{border-color:var(--color-brand-primary)}.border-feedback-alert{border-color:var(--color-feedback-alert)}.border-feedback-error{border-color:var(--color-feedback-error)}.border-feedback-informational{border-color:var(--color-feedback-informational)}.border-feedback-success{border-color:var(--color-feedback-success)}.border-line-general{border-color:var(--color-line-general)}.bg-opacity-toast{background-color:var(--color-opacity-toast)}.bg-surface-on-body{background-color:var(--color-surface-on-body)}.bg-surface-on-body-brand{background-color:var(--color-surface-on-body-brand)}.bg-surface-on-body-feedback-alert{background-color:var(--color-surface-on-body-feedback-alert)}.bg-surface-on-body-feedback-error{background-color:var(--color-surface-on-body-feedback-error)}.bg-surface-on-body-feedback-info{background-color:var(--color-surface-on-body-feedback-info)}.bg-surface-on-body-feedback-success{background-color:var(--color-surface-on-body-feedback-success)}.p-16{padding:1rem}.pr-48{padding-right:3rem}.text-left{text-align:left}.text-2xl{font-size:1.5rem;line-height:2rem}.text-label-medium-bold{font-size:1rem;font-weight:700;letter-spacing:0;line-height:20px}.text-label-medium-regular{font-size:1rem;font-weight:400;letter-spacing:0;line-height:20px}.leading-none{line-height:1}.text-brand-primary{color:var(--color-brand-primary)}.text-feedback-alert{color:var(--color-feedback-alert)}.text-feedback-error{color:var(--color-feedback-error)}.text-feedback-informational{color:var(--color-feedback-informational)}.text-feedback-success{color:var(--color-feedback-success)}.text-icon-primary{color:var(--color-icon-primary)}.text-text-link{color:var(--color-text-link)}.text-text-primary{color:var(--color-text-primary)}.text-text-secondary{color:var(--color-text-secondary)}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.container{width:100%}@media (min-width:22.5rem){.container{max-width:22.5rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.focus-visible\\:outline:focus-visible{outline-style:solid}.focus-visible\\:outline-2:focus-visible{outline-width:2px}.focus-visible\\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\\:outline-feedback-informational:focus-visible{outline-color:var(--color-feedback-informational)}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:300;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Light.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:300;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-LightItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:400;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Regular.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:400;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Italic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:500;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Medium.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:500;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-MediumItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:600;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-SemiBold.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:600;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-SemiBoldItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:700;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Bold.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:700;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-BoldItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:800;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-ExtraBold.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:800;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-ExtraBoldItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:900;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Black.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:900;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-BlackItalic.ttf) format("truetype")}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}';
+const l = '*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{font-family:Figtree;line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.absolute{position:absolute}.block{display:block}.hidden{display:none}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}:host,:host button,:host input,:host option,:host select,:host textarea{font-family:Figtree,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}:host{display:block;max-width:400px;width:100%}.toast-copy{overflow-wrap:anywhere}.toast-title{display:block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast-message{-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;display:-webkit-box;overflow:hidden}.toast-action{display:block;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast-surface{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 12px 48px rgba(25,29,29,.2);max-width:400px}.toast-surface--animated{animation:sula-toast-fade-in .28s cubic-bezier(.2,.8,.2,1),sula-toast-border-settle .72s step-end}.toast-border{height:calc(100% + 2px);inset:-1px;overflow:visible;pointer-events:none;position:absolute;width:calc(100% + 2px)}.toast-surface--animated .toast-border{animation:sula-toast-border-overlay .72s step-end}.toast-border__path{x:.5px;y:.5px;rx:12px;fill:none;stroke:var(--toast-border-color);stroke-width:1px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;height:calc(100% - 1px);width:calc(100% - 1px)}.toast-surface--animated .toast-border__path{animation:sula-toast-border-trace .72s cubic-bezier(.4,0,.2,1)}@keyframes sula-toast-fade-in{0%{opacity:0}to{opacity:1}}@keyframes sula-toast-border-settle{0%{border-color:transparent}to{border-color:var(--toast-border-color)}}@keyframes sula-toast-border-overlay{0%{opacity:1}to{opacity:0}}@keyframes sula-toast-border-trace{0%{stroke-dashoffset:1}to{stroke-dashoffset:0}}@supports not (((-webkit-backdrop-filter:blur(20px)) or (backdrop-filter:blur(20px))) or (-webkit-backdrop-filter:blur(20px))){.toast-surface.bg-opacity-toast{background-color:var(--color-surface-body)}}@media (prefers-reduced-motion:reduce){.toast-surface--animated{animation:none}.toast-surface--animated .toast-border{display:none}}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#012b15;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#330d00;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#402705;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#401204;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#402301;--color-gray-50:#fff;--color-gray-100:#f3f4f4;--color-gray-200:#e5e6e6;--color-gray-300:#bfc0c0;--color-gray-400:#acaeae;--color-gray-500:#949595;--color-gray-600:#737575;--color-gray-700:#6c6e6e;--color-gray-800:#313333;--color-gray-900:#272929;--color-gray-950:#191d1d;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#071e40;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:rgba(25,29,29,.02);--color-black-opacity-100:rgba(25,29,29,.05);--color-black-opacity-200:rgba(25,29,29,.11);--color-black-opacity-300:rgba(25,29,29,.28);--color-black-opacity-400:rgba(25,29,29,.36);--color-black-opacity-500:rgba(25,29,29,.44);--color-black-opacity-600:rgba(25,29,29,.62);--color-black-opacity-700:rgba(25,29,29,.64);--color-black-opacity-800:rgba(25,29,29,.72);--color-black-opacity-900:rgba(25,29,29,.8);--color-black-opacity-950:rgba(25,29,29,.96);--color-shadow-opacity-50:rgba(0,0,0,.04);--color-shadow-opacity-100:rgba(0,0,0,.06);--color-shadow-opacity-200:rgba(0,0,0,.12);--color-shadow-opacity-300:rgba(0,0,0,.2);--color-shadow-opacity-400:rgba(0,0,0,.32);--color-shadow-opacity-500:rgba(0,0,0,.5);--color-shadow-opacity-600:rgba(0,0,0,.55);--color-shadow-opacity-700:rgba(0,0,0,.64);--color-shadow-opacity-800:rgba(0,0,0,.73);--color-shadow-opacity-900:rgba(0,0,0,.8);--color-shadow-opacity-950:rgba(0,0,0,.91);--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f3f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#313333;--color-text-secondary:#6c6e6e;--color-text-disabled:#949595;--color-text-link:#1355b4;--color-states-empty-bg-hover:rgba(25,29,29,.05);--color-states-empty-bg-pressed:rgba(25,29,29,.11);--color-states-bg-disabled:rgba(25,29,29,.02);--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e5e6e6;--color-states-negative-pressed:#bfc0c0;--color-icon-primary:#6c6e6e;--color-icon-secondary:#fff;--color-icon-tertiary:#b30404;--color-icon-disabled:#acaeae;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f3f4f4;--color-neutral-neutral-3:#acaeae;--color-neutral-neutral-4:#949595;--color-neutral-neutral-5:#737575;--color-neutral-neutral-6:#6c6e6e;--color-neutral-neutral-7:#313333;--color-neutral-neutral-8:#272929;--color-negative-negative-1:#fff;--color-negative-negative-2:#313333;--color-opacity-body:#fffc;--color-opacity-on-body:rgba(25,29,29,.02);--color-opacity-overlay:rgba(25,29,29,.62);--color-opacity-on-overlay:#ffffff1a;--color-opacity-toast:#ffffff45;--color-line-input:#949595;--color-line-general-strong:#bfc0c0;--color-line-general:#e5e6e6;--color-line-hair:rgba(25,29,29,.05);--color-box-shadow-body:#fff;--color-box-shadow-shadow-color-1:rgba(0,0,0,.04);--color-box-shadow-shadow-color-2:rgba(0,0,0,.06)}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.static{position:static}.relative{position:relative}.flex{display:flex}.w-full{width:100%}.min-w-0{min-width:0}.shrink-0{flex-shrink:0}.flex-col{flex-direction:column}.gap-12{gap:.75rem}.rounded-sm{border-radius:.75rem}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.focus-visible\\:outline:focus-visible{outline-style:solid}.focus-visible\\:outline-2:focus-visible{outline-width:2px}.focus-visible\\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\\:outline-feedback-informational:focus-visible{outline-color:var(--color-feedback-informational)}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:300;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Light.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:300;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-LightItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:400;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Regular.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:400;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Italic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:500;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Medium.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:500;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-MediumItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:600;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-SemiBold.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:600;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-SemiBoldItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:700;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Bold.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:700;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-BoldItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:800;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-ExtraBold.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:800;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-ExtraBoldItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:900;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Black.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:900;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-BlackItalic.ttf) format("truetype")}.right-16{right:1rem}.top-16{top:1rem}.isolate{isolation:isolate}.box-border{box-sizing:border-box}.h-24{height:1.5rem}.h-44{height:2.75rem}.w-24{width:1.5rem}.w-44{width:2.75rem}.flex-1{flex:1 1 0%}.items-center{align-items:center}.justify-center{justify-content:center}.gap-4{gap:.25rem}.gap-8{gap:.5rem}.self-start{align-self:flex-start}.rounded{border-radius:.25rem}.rounded-xxl{border-radius:18.75rem}.border{border-width:1px}.border-brand-primary{border-color:var(--color-brand-primary)}.border-feedback-alert{border-color:var(--color-feedback-alert)}.border-feedback-error{border-color:var(--color-feedback-error)}.border-feedback-informational{border-color:var(--color-feedback-informational)}.border-feedback-success{border-color:var(--color-feedback-success)}.border-line-general{border-color:var(--color-line-general)}.bg-opacity-toast{background-color:var(--color-opacity-toast)}.bg-surface-on-body{background-color:var(--color-surface-on-body)}.bg-surface-on-body-brand{background-color:var(--color-surface-on-body-brand)}.bg-surface-on-body-feedback-alert{background-color:var(--color-surface-on-body-feedback-alert)}.bg-surface-on-body-feedback-error{background-color:var(--color-surface-on-body-feedback-error)}.bg-surface-on-body-feedback-info{background-color:var(--color-surface-on-body-feedback-info)}.bg-surface-on-body-feedback-success{background-color:var(--color-surface-on-body-feedback-success)}.p-16{padding:1rem}.pr-48{padding-right:3rem}.text-left{text-align:left}.text-2xl{font-size:1.5rem;line-height:2rem}.text-label-medium-bold{font-size:1rem;font-weight:700;letter-spacing:0;line-height:20px}.text-label-medium-regular{font-size:1rem;font-weight:400;letter-spacing:0;line-height:20px}.leading-none{line-height:1}.text-brand-primary{color:var(--color-brand-primary)}.text-feedback-alert{color:var(--color-feedback-alert)}.text-feedback-error{color:var(--color-feedback-error)}.text-feedback-informational{color:var(--color-feedback-informational)}.text-feedback-success{color:var(--color-feedback-success)}.text-icon-primary{color:var(--color-icon-primary)}.text-text-link{color:var(--color-text-link)}.text-text-primary{color:var(--color-text-primary)}.text-text-secondary{color:var(--color-text-secondary)}.underline{text-decoration-line:underline}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.container{width:100%}@media (min-width:22.5rem){.container{max-width:22.5rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}';
 const s = 5e3;
@@ -267,4 +267,4 @@ f.style = l;
 export { f as sula_toast };
 //# sourceMappingURL=sula-toast.entry.esm.js.map
-//# sourceMappingURL=p-cbb7df72.entry.js.map
+//# sourceMappingURL=p-705e2424.entry.js.map

package/dist/webcomponents/p-88e5171a.entry.js ADDED Viewed

@@ -0,0 +1,100 @@
+import { r as o, c as e, h as t, H as r } from "./p-BL15Tt3m.js";
+const a = '*,:after,:before{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;border:0 solid #e5e7eb;box-sizing:border-box}::backdrop{--tw-ring-color:rgba(59,130,246,.5);--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(147,197,253,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{font-family:Figtree;line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.block{display:block}.flex{display:flex}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.border{border-width:1px}.outline{outline-style:solid}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host,:host button,:host input,:host option,:host select,:host textarea{font-family:Figtree,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}:host{display:block}.profile-avatar img{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.profile-divider{background:var(--color-line-general);height:1px;margin:4px 8px}.profile-option{align-items:center;background:none;border:0;border-radius:8px;box-sizing:border-box;display:flex;font:inherit;gap:8px;min-height:40px;padding:0 8px;text-align:left;width:100%}button.profile-option{cursor:pointer;transition:background-color .15s ease-out}button.profile-option:hover:not(.is-disabled){background:var(--color-states-empty-bg-hover)}button.profile-option.is-disabled{cursor:not-allowed}button.profile-option:focus-visible{outline:2px solid var(--color-feedback-informational);outline-offset:-2px}.profile-option sula-icon{display:flex;flex:none;justify-content:center;width:20px}.profile-option sula-switch{flex:none;pointer-events:none;transform:scale(.75);transform-origin:right center}:root{--color-green-50:#f1f9f4;--color-green-100:#e6f4ed;--color-green-200:#cae7d8;--color-green-300:#a0d4b8;--color-green-400:#68bb8e;--color-green-500:#04843f;--color-green-600:#037236;--color-green-700:#03632f;--color-green-800:#035428;--color-green-900:#024521;--color-green-950:#012b15;--color-red-50:#fef6f6;--color-red-100:#fde8e8;--color-red-200:#fad1d1;--color-red-300:#f7abab;--color-red-400:#f17474;--color-red-500:#c80505;--color-red-600:#b30404;--color-red-700:#9f0404;--color-red-800:#860303;--color-red-900:#6d0303;--color-red-950:#330d00;--color-yellow-50:#fdf4e7;--color-yellow-100:#fcedd9;--color-yellow-200:#fae0bd;--color-yellow-300:#f6c788;--color-yellow-400:#f3b159;--color-yellow-500:#ef9928;--color-yellow-600:#e49226;--color-yellow-700:#d17e10;--color-yellow-800:#b46d0e;--color-yellow-900:#93590b;--color-yellow-950:#402705;--color-orange-50:#fef4f1;--color-orange-100:#fde8e2;--color-orange-200:#fbd2c6;--color-orange-300:#f8b4a0;--color-orange-400:#f58e70;--color-orange-500:#f05223;--color-orange-600:#ea4210;--color-orange-700:#d23b0e;--color-orange-800:#b5330c;--color-orange-900:#942a0a;--color-orange-950:#401204;--color-blue-50:#ecf0f9;--color-blue-100:#dde3f4;--color-blue-200:#b2c2e5;--color-blue-300:#7994d2;--color-blue-400:#4066bf;--color-blue-500:#001e64;--color-blue-600:#001c5c;--color-blue-700:#00174c;--color-blue-800:#00123d;--color-blue-900:#000f33;--color-blue-950:#000d2b;--color-ambar-50:#fff6eb;--color-ambar-100:#ffefdc;--color-ambar-200:#fedfb9;--color-ambar-300:#fdca8b;--color-ambar-400:#fdb359;--color-ambar-500:#fc9c26;--color-ambar-600:#ec8403;--color-ambar-700:#d87803;--color-ambar-800:#ba6803;--color-ambar-900:#975402;--color-ambar-950:#402301;--color-gray-50:#fff;--color-gray-100:#f3f4f4;--color-gray-200:#e5e6e6;--color-gray-300:#bfc0c0;--color-gray-400:#acaeae;--color-gray-500:#949595;--color-gray-600:#737575;--color-gray-700:#6c6e6e;--color-gray-800:#313333;--color-gray-900:#272929;--color-gray-950:#191d1d;--color-white-opacity-50:#ffffff0d;--color-white-opacity-100:#ffffff1a;--color-white-opacity-200:#ffffff26;--color-white-opacity-300:#ffffff45;--color-white-opacity-400:#ffffff5c;--color-white-opacity-500:#ffffff80;--color-white-opacity-600:#ffffff8c;--color-white-opacity-700:#ffffffa3;--color-white-opacity-800:#ffffffba;--color-white-opacity-900:#fffc;--color-white-opacity-950:#ffffffe8;--color-ciano-50:#f1f6fe;--color-ciano-100:#dfeafc;--color-ciano-200:#c3d9f9;--color-ciano-300:#90b9f4;--color-ciano-400:#5d98ee;--color-ciano-500:#1769e0;--color-ciano-600:#155fcb;--color-ciano-700:#1355b4;--color-ciano-800:#104899;--color-ciano-900:#0d3b7d;--color-ciano-950:#071e40;--color-extra-color-blue-light:#e7f0f4;--color-extra-color-blue-dark:#162931;--color-black-opacity-50:rgba(25,29,29,.02);--color-black-opacity-100:rgba(25,29,29,.05);--color-black-opacity-200:rgba(25,29,29,.11);--color-black-opacity-300:rgba(25,29,29,.28);--color-black-opacity-400:rgba(25,29,29,.36);--color-black-opacity-500:rgba(25,29,29,.44);--color-black-opacity-600:rgba(25,29,29,.62);--color-black-opacity-700:rgba(25,29,29,.64);--color-black-opacity-800:rgba(25,29,29,.72);--color-black-opacity-900:rgba(25,29,29,.8);--color-black-opacity-950:rgba(25,29,29,.96);--color-shadow-opacity-50:rgba(0,0,0,.04);--color-shadow-opacity-100:rgba(0,0,0,.06);--color-shadow-opacity-200:rgba(0,0,0,.12);--color-shadow-opacity-300:rgba(0,0,0,.2);--color-shadow-opacity-400:rgba(0,0,0,.32);--color-shadow-opacity-500:rgba(0,0,0,.5);--color-shadow-opacity-600:rgba(0,0,0,.55);--color-shadow-opacity-700:rgba(0,0,0,.64);--color-shadow-opacity-800:rgba(0,0,0,.73);--color-shadow-opacity-900:rgba(0,0,0,.8);--color-shadow-opacity-950:rgba(0,0,0,.91);--color-feedback-success:#04843f;--color-feedback-error:#c80505;--color-feedback-informational:#1355b4;--color-feedback-alert:#ef9928;--color-brand-primary:#f05223;--color-brand-secondary:#001c5c;--color-brand-tertiary-1:#1769e0;--color-brand-tertiary-2:#fc9c26;--color-surface-body:#fff;--color-surface-on-body:#f3f4f4;--color-surface-on-body-blue:#e7f0f4;--color-surface-on-body-brand:#fff6eb;--color-surface-on-body-feedback-success:#e6f4ed;--color-surface-on-body-feedback-error:#fde8e8;--color-surface-on-body-feedback-alert:#fdf4e7;--color-surface-on-body-feedback-info:#dfeafc;--color-text-brand:#f05223;--color-text-primary:#313333;--color-text-secondary:#6c6e6e;--color-text-disabled:#949595;--color-text-link:#1355b4;--color-states-empty-bg-hover:rgba(25,29,29,.05);--color-states-empty-bg-pressed:rgba(25,29,29,.11);--color-states-bg-disabled:rgba(25,29,29,.02);--color-states-bg-focus:#1355b4;--color-states-primary-hover:#ea4210;--color-states-primary-pressed:#d23b0e;--color-states-danger-hover:#b30404;--color-states-danger-pressed:#9f0404;--color-states-negative-hover:#e5e6e6;--color-states-negative-pressed:#bfc0c0;--color-icon-primary:#6c6e6e;--color-icon-secondary:#fff;--color-icon-tertiary:#b30404;--color-icon-disabled:#acaeae;--color-neutral-neutral-1:#fff;--color-neutral-neutral-2:#f3f4f4;--color-neutral-neutral-3:#acaeae;--color-neutral-neutral-4:#949595;--color-neutral-neutral-5:#737575;--color-neutral-neutral-6:#6c6e6e;--color-neutral-neutral-7:#313333;--color-neutral-neutral-8:#272929;--color-negative-negative-1:#fff;--color-negative-negative-2:#313333;--color-opacity-body:#fffc;--color-opacity-on-body:rgba(25,29,29,.02);--color-opacity-overlay:rgba(25,29,29,.62);--color-opacity-on-overlay:#ffffff1a;--color-opacity-toast:#ffffff45;--color-line-input:#949595;--color-line-general-strong:#bfc0c0;--color-line-general:#e5e6e6;--color-line-hair:rgba(25,29,29,.05);--color-box-shadow-body:#fff;--color-box-shadow-shadow-color-1:rgba(0,0,0,.04);--color-box-shadow-shadow-color-2:rgba(0,0,0,.06)}.visible{visibility:visible}.static{position:static}.z-50{z-index:50}.mb-16{margin-bottom:1rem}.mb-24{margin-bottom:1.5rem}.mb-40{margin-bottom:2.5rem}.ml-8{margin-left:.5rem}.ml-\\[24px\\]{margin-left:24px}.ml-\\[8px\\]{margin-left:8px}.mr-6{margin-right:1.5rem}.mt-8{margin-top:.5rem}.inline{display:inline}.hidden{display:none}.h-9{height:2.25rem}.h-full{height:100%}.max-h-10{max-height:2.5rem}.w-9{width:2.25rem}.w-full{width:100%}.min-w-0{min-width:0}.max-w-10{max-width:2.5rem}.flex-1{flex:1 1 0%}.flex-none{flex:none}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.resize{resize:both}.list-none{list-style-type:none}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-8{gap:.5rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded-full{border-radius:9999px}.rounded-xs{border-radius:.5rem}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-t{border-top-width:1px}.border-line-general{border-color:var(--color-line-general)}.bg-brand-primary{background-color:var(--color-brand-primary)}.bg-states-empty-bg-hover{background-color:var(--color-states-empty-bg-hover)}.bg-surface-body{background-color:var(--color-surface-body)}.p-8{padding:.5rem}.px-0{padding-left:0;padding-right:0}.px-12{padding-left:.75rem;padding-right:.75rem}.px-8{padding-left:.5rem;padding-right:.5rem}.py-8{padding-bottom:.5rem;padding-top:.5rem}.pb-24{padding-bottom:1.5rem}.pl-8{padding-left:.5rem}.pr-8{padding-right:.5rem}.pt-12{padding-top:.75rem}.text-left{text-align:left}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.leading-7{line-height:1.75rem}.leading-tight{line-height:1.25}.text-brand-primary{color:var(--color-brand-primary)}.text-icon-disabled{color:var(--color-icon-disabled)}.text-icon-primary{color:var(--color-icon-primary)}.text-negative-negative-1{color:var(--color-negative-negative-1)}.text-text-disabled{color:var(--color-text-disabled)}.text-text-primary{color:var(--color-text-primary)}.text-text-secondary{color:var(--color-text-secondary)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\\:bg-states-empty-bg-hover:hover{background-color:var(--color-states-empty-bg-hover)}.h-10{height:2.5rem}.w-10{width:2.5rem}.gap-12{gap:.75rem}.rounded-sm{border-radius:.75rem}.pb-12{padding-bottom:.75rem}.pt-8{padding-top:.5rem}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:300;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Light.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:300;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-LightItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:400;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Regular.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:400;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Italic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:500;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Medium.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:500;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-MediumItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:600;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-SemiBold.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:600;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-SemiBoldItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:700;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Bold.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:700;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-BoldItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:800;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-ExtraBold.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:800;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-ExtraBoldItalic.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:normal;font-weight:900;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-Black.ttf) format("truetype")}@font-face{font-display:swap;font-family:Figtree;font-style:italic;font-weight:900;src:local("Figtree"),url(@sula-tech/tailwind-css-plugin/assets/fonts/Figtree-BlackItalic.ttf) format("truetype")}.mr-16{margin-right:1rem}.h-12{height:.75rem}.h-32{height:2rem}.h-4{height:.25rem}.h-\\[28px\\]{height:28px}.min-h-\\[85px\\]{min-height:85px}.w-12{width:.75rem}.w-56{width:3.5rem}.w-\\[10px\\]{width:10px}.w-\\[280px\\]{width:280px}.w-\\[28px\\]{width:28px}.justify-start{justify-content:flex-start}.space-x-12>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.75rem*var(--tw-space-x-reverse))}.break-words{overflow-wrap:break-word}.rounded-md{border-radius:1.25rem}.rounded-xxl{border-radius:18.75rem}.bg-negative-negative-1{background-color:var(--color-negative-negative-1)}.bg-neutral-neutral-3{background-color:var(--color-neutral-neutral-3)}.bg-neutral-neutral-4{background-color:var(--color-neutral-neutral-4)}.bg-states-bg-disabled{background-color:var(--color-states-bg-disabled)}.bg-surface-on-body{background-color:var(--color-surface-on-body)}.p-2{padding:.125rem}.px-24{padding-left:1.5rem;padding-right:1.5rem}.py-16{padding-bottom:1rem;padding-top:1rem}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.active\\:bg-states-empty-bg-pressed:active{background-color:var(--color-states-empty-bg-pressed)}';
+const i = class {
+  constructor(t) {
+    o(this, t);
+    this.itemClicked = e(this, "itemClicked");
+    this.switchChanged = e(this, "switchChanged");
+    /**
+         * Options of the list. Use `divider` for a separator and `hasSwitch` + `active` for a toggle row.
+         */    this.items = [];
+  }
+  handleClick(o) {
+    if (o.disabled) return;
+    if (!o.hasSwitch) {
+      this.itemClicked.emit(o);
+      return;
+    }
+    const e = !o.active;
+    const t = Object.assign(Object.assign({}, o), {
+      active: e
+    });
+    this.items = this.items.map((e => e.id === o.id ? t : e));
+    this.switchChanged.emit({
+      item: t,
+      active: e
+    });
+  }
+  getInitials(o) {
+    return o.split(" ").filter(Boolean).slice(0, 2).map((o => o[0].toUpperCase())).join("");
+  }
+  renderItem(o) {
+    if (o.divider) return t("div", {
+      key: o.id,
+      part: "divider",
+      class: "profile-divider",
+      role: "separator"
+    });
+    return t("button", {
+      key: o.id,
+      type: "button",
+      part: "option",
+      class: {
+        "profile-option": true,
+        "is-disabled": !!o.disabled
+      },
+      role: o.hasSwitch ? "switch" : undefined,
+      "aria-checked": o.hasSwitch ? String(!!o.active) : undefined,
+      "aria-disabled": o.disabled ? "true" : undefined,
+      onClick: () => this.handleClick(o)
+    }, o.icon && t("sula-icon", {
+      icon: o.icon,
+      customClass: `text-lg ${o.disabled ? "text-icon-disabled" : "text-icon-primary"}`
+    }), t("span", {
+      class: {
+        "profile-option-label min-w-0 flex-1 truncate text-sm": true,
+        "text-text-secondary": !o.disabled,
+        "text-text-disabled": !!o.disabled
+      }
+    }, o.label), o.hasSwitch && t("sula-switch", {
+      active: !!o.active,
+      disabled: !!o.disabled,
+      ref: o => o === null || o === void 0 ? void 0 : o.setAttribute("inert", "")
+    }));
+  }
+  render() {
+    if (!this.user) return t(r, null);
+    const {name: o, email: e, photo: a} = this.user;
+    const i = this.items.filter((o => !o.hidden));
+    return t(r, null, t("div", {
+      part: "card",
+      class: "profile-card flex flex-col rounded-sm bg-surface-body px-8 pb-12 pt-8"
+    }, t("div", {
+      class: "profile-header flex min-w-0 items-center gap-12 p-8"
+    }, t("span", {
+      class: "profile-avatar flex h-10 w-10 flex-none items-center justify-center overflow-hidden rounded-full bg-brand-primary text-sm font-semibold text-negative-negative-1"
+    }, a ? t("img", {
+      src: a,
+      alt: o
+    }) : this.getInitials(o)), t("span", {
+      class: "flex min-w-0 flex-col"
+    }, t("span", {
+      part: "name",
+      class: "profile-name truncate text-sm font-semibold text-text-primary"
+    }, o), e && t("span", {
+      class: "profile-email truncate text-xs text-text-secondary"
+    }, e))), i.length > 0 && !i[0].divider && t("div", {
+      part: "divider",
+      class: "profile-divider",
+      role: "separator"
+    }), i.map((o => this.renderItem(o))), t("slot", null)));
+  }
+};
+i.style = a;
+export { i as sula_profile_menu };
+//# sourceMappingURL=sula-profile-menu.entry.esm.js.map
+//# sourceMappingURL=p-88e5171a.entry.js.map

package/dist/webcomponents/p-88e5171a.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sulaProfileMenuCss","SulaProfileMenu","constructor","hostRef","this","items","handleClick","item","disabled","hasSwitch","itemClicked","emit","active","updated","Object","assign","map","current","id","switchChanged","getInitials","name","split","filter","Boolean","slice","part","toUpperCase","join","renderItem","divider","h","key","class","role","type","undefined","String","onClick","icon","customClass","label","ref","el","setAttribute","render","user","Host","email","photo","hidden","src","alt","length"],"sources":["src/components/sula-profile-menu/sula-profile-menu.scss?tag=sula-profile-menu&encapsulation=shadow","src/components/sula-profile-menu/sula-profile-menu.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.profile-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.profile-divider {\n height: 1px;\n margin: 4px 8px;\n background: var(--color-line-general);\n}\n\n.profile-option {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n min-height: 40px;\n padding: 0 8px;\n box-sizing: border-box;\n border: 0;\n border-radius: 8px;\n background: none;\n font: inherit;\n text-align: left;\n}\n\nbutton.profile-option {\n cursor: pointer;\n transition: background-color 150ms ease-out;\n\n &:hover:not(.is-disabled) {\n background: var(--color-states-empty-bg-hover);\n }\n\n &.is-disabled {\n cursor: not-allowed;\n }\n\n &:focus-visible {\n outline: 2px solid var(--color-feedback-informational);\n outline-offset: -2px;\n }\n}\n\n/* Fixed icon box keeps labels aligned whatever the glyph width. */\n.profile-option sula-icon {\n display: flex;\n flex: none;\n justify-content: center;\n width: 20px;\n}\n\n/* The DS switch is 56x32; scaled down so the row keeps the menu item height. */\n.profile-option sula-switch {\n flex: none;\n pointer-events: none;\n transform: scale(0.75);\n transform-origin: right center;\n}\n","import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { SulaProfileMenuItem, SulaProfileMenuSwitchChange, SulaProfileMenuUser } from './model/sula-profile-menu.model';\n\n/**\n * Profile card with the logged user and a configurable list of options.\n * It has no positioning of its own: place it inside a popover, dropdown or panel.\n * The component only emits events: what each option does is up to the host application.\n *\n * @slot - Extra content rendered after the options.\n * @part card - Card container.\n * @part name - User name.\n * @part option - Each option row.\n * @part divider - Each separator line.\n */\n@Component({\n tag: 'sula-profile-menu',\n styleUrl: 'sula-profile-menu.scss',\n shadow: true,\n})\nexport class SulaProfileMenu {\n /**\n * Logged user. Without a photo, the initials are shown.\n */\n @Prop() user?: SulaProfileMenuUser;\n\n /**\n * Options of the list. Use `divider` for a separator and `hasSwitch` + `active` for a toggle row.\n */\n @Prop({ mutable: true }) items: SulaProfileMenuItem[] = [];\n\n /**\n * Emitted when an option without switch is clicked\n */\n @Event() itemClicked: EventEmitter<SulaProfileMenuItem>;\n\n /**\n * Emitted when the switch of an option changes\n */\n @Event() switchChanged: EventEmitter<SulaProfileMenuSwitchChange>;\n\n private handleClick(item: SulaProfileMenuItem) {\n if (item.disabled) return;\n if (!item.hasSwitch) {\n this.itemClicked.emit(item);\n return;\n }\n const active = !item.active;\n const updated = { ...item, active };\n this.items = this.items.map(current => (current.id === item.id ? updated : current));\n this.switchChanged.emit({ item: updated, active });\n }\n\n private getInitials(name: string) {\n return name\n .split(' ')\n .filter(Boolean)\n .slice(0, 2)\n .map(part => part[0].toUpperCase())\n .join('');\n }\n\n private renderItem(item: SulaProfileMenuItem) {\n if (item.divider) return <div key={item.id} part=\"divider\" class=\"profile-divider\" role=\"separator\"></div>;\n\n return (\n <button\n key={item.id}\n type=\"button\"\n part=\"option\"\n class={{ 'profile-option': true, 'is-disabled': !!item.disabled }}\n role={item.hasSwitch ? 'switch' : undefined}\n aria-checked={item.hasSwitch ? String(!!item.active) : undefined}\n aria-disabled={item.disabled ? 'true' : undefined}\n onClick={() => this.handleClick(item)}\n >\n {item.icon && <sula-icon icon={item.icon} customClass={`text-lg ${item.disabled ? 'text-icon-disabled' : 'text-icon-primary'}`}></sula-icon>}\n <span class={{ 'profile-option-label min-w-0 flex-1 truncate text-sm': true, 'text-text-secondary': !item.disabled, 'text-text-disabled': !!item.disabled }}>\n {item.label}\n </span>\n {/* The row is the switch control; the inner switch is only visual. */}\n {item.hasSwitch && <sula-switch active={!!item.active} disabled={!!item.disabled} ref={el => el?.setAttribute('inert', '')}></sula-switch>}\n </button>\n );\n }\n\n render() {\n if (!this.user) return <Host />;\n const { name, email, photo } = this.user;\n const items = this.items.filter(item => !item.hidden);\n\n return (\n <Host>\n <div part=\"card\" class=\"profile-card flex flex-col rounded-sm bg-surface-body px-8 pb-12 pt-8\">\n <div class=\"profile-header flex min-w-0 items-center gap-12 p-8\">\n <span class=\"profile-avatar flex h-10 w-10 flex-none items-center justify-center overflow-hidden rounded-full bg-brand-primary text-sm font-semibold text-negative-negative-1\">\n {photo ? <img src={photo} alt={name} /> : this.getInitials(name)}\n </span>\n <span class=\"flex min-w-0 flex-col\">\n <span part=\"name\" class=\"profile-name truncate text-sm font-semibold text-text-primary\">\n {name}\n </span>\n {email && <span class=\"profile-email truncate text-xs text-text-secondary\">{email}</span>}\n </span>\n </div>\n\n {items.length > 0 && !items[0].divider && <div part=\"divider\" class=\"profile-divider\" role=\"separator\"></div>}\n {items.map(item => this.renderItem(item))}\n\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":";;AAAA,MAAMA,IAAqB;;MCmBdC,IAAe;EAL5B,WAAAC,CAAAC;;;;;;eAc2BC,KAAKC,QAA0B;AAqFzD;EAzES,WAAAC,CAAYC;IAClB,IAAIA,EAAKC,UAAU;IACnB,KAAKD,EAAKE,WAAW;MACnBL,KAAKM,YAAYC,KAAKJ;MACtB;;IAEF,MAAMK,KAAUL,EAAKK;IACrB,MAAMC,IAAeC,OAAAC,OAAAD,OAAAC,OAAA,IAAAR,IAAM;MAAAK;;IAC3BR,KAAKC,QAAQD,KAAKC,MAAMW,KAAIC,KAAYA,EAAQC,OAAOX,EAAKW,KAAKL,IAAUI;IAC3Eb,KAAKe,cAAcR,KAAK;MAAEJ,MAAMM;MAASD;;;EAGnC,WAAAQ,CAAYC;IAClB,OAAOA,EACJC,MAAM,KACNC,OAAOC,SACPC,MAAM,GAAG,GACTT,KAAIU,KAAQA,EAAK,GAAGC,gBACpBC,KAAK;;EAGF,UAAAC,CAAWtB;IACjB,IAAIA,EAAKuB,SAAS,OAAOC,EAAA;MAAKC,KAAKzB,EAAKW;MAAIQ,MAAK;MAAUO,OAAM;MAAkBC,MAAK;;IAExF,OACEH,EACE;MAAAC,KAAKzB,EAAKW;MACViB,MAAK;MACLT,MAAK;MACLO,OAAO;QAAE,kBAAkB;QAAM,iBAAiB1B,EAAKC;;MACvD0B,MAAM3B,EAAKE,YAAY,WAAW2B;MAAS,gBAC7B7B,EAAKE,YAAY4B,SAAS9B,EAAKK,UAAUwB;MACxC,iBAAA7B,EAAKC,WAAW,SAAS4B;MACxCE,SAAS,MAAMlC,KAAKE,YAAYC;OAE/BA,EAAKgC,QAAQR,EAAW;MAAAQ,MAAMhC,EAAKgC;MAAMC,aAAa,WAAWjC,EAAKC,WAAW,uBAAuB;QACzGuB,EAAM;MAAAE,OAAO;QAAE,wDAAwD;QAAM,wBAAwB1B,EAAKC;QAAU,wBAAwBD,EAAKC;;OAC9ID,EAAKkC,QAGPlC,EAAKE,aAAasB,EAAA;MAAanB,UAAUL,EAAKK;MAAQJ,YAAYD,EAAKC;MAAUkC,KAAKC,KAAMA,MAAE,QAAFA,WAAA,aAAAA,EAAIC,aAAa,SAAS;;;EAK7H,MAAAC;IACE,KAAKzC,KAAK0C,MAAM,OAAOf,EAACgB,GAAI;IAC5B,OAAM1B,MAAEA,GAAI2B,OAAEA,GAAKC,OAAEA,KAAU7C,KAAK0C;IACpC,MAAMzC,IAAQD,KAAKC,MAAMkB,QAAOhB,MAASA,EAAK2C;IAE9C,OACEnB,EAACgB,GAAI,MACHhB,EAAA;MAAKL,MAAK;MAAOO,OAAM;OACrBF,EAAK;MAAAE,OAAM;OACTF,EAAM;MAAAE,OAAM;OACTgB,IAAQlB,EAAA;MAAKoB,KAAKF;MAAOG,KAAK/B;SAAWjB,KAAKgB,YAAYC,KAE7DU,EAAM;MAAAE,OAAM;OACVF,EAAM;MAAAL,MAAK;MAAOO,OAAM;OACrBZ,IAEF2B,KAASjB,EAAA;MAAME,OAAM;OAAsDe,MAI/E3C,EAAMgD,SAAS,MAAMhD,EAAM,GAAGyB,WAAWC,EAAK;MAAAL,MAAK;MAAUO,OAAM;MAAkBC,MAAK;QAC1F7B,EAAMW,KAAIT,KAAQH,KAAKyB,WAAWtB,MAEnCwB,EAAa","ignoreList":[]}