@vielzeug/refine 2.3.0 → 3.0.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.
- package/README.md +5 -18
- package/dist/accordion-item.cjs +1 -1
- package/dist/accordion-item.cjs.map +1 -1
- package/dist/accordion-item.js +1 -1
- package/dist/accordion-item.js.map +1 -1
- package/dist/accordion.cjs.map +1 -1
- package/dist/accordion.js.map +1 -1
- package/dist/async.cjs +1 -1
- package/dist/async.cjs.map +1 -1
- package/dist/async.js +3 -3
- package/dist/async.js.map +1 -1
- package/dist/box.cjs.map +1 -1
- package/dist/box.js.map +1 -1
- package/dist/card.cjs +1 -1
- package/dist/card.cjs.map +1 -1
- package/dist/card.js +3 -3
- package/dist/card.js.map +1 -1
- package/dist/chat-message.cjs +1 -1
- package/dist/chat-message.cjs.map +1 -1
- package/dist/chat-message.js +1 -1
- package/dist/chat-message.js.map +1 -1
- package/dist/checkbox-group.cjs +1 -1
- package/dist/checkbox-group.cjs.map +1 -1
- package/dist/checkbox-group.js +1 -1
- package/dist/checkbox-group.js.map +1 -1
- package/dist/combobox.cjs +10 -8
- package/dist/combobox.cjs.map +1 -1
- package/dist/combobox.js +62 -51
- package/dist/combobox.js.map +1 -1
- package/dist/command-palette.cjs +1 -1
- package/dist/command-palette.cjs.map +1 -1
- package/dist/command-palette.js +6 -2
- package/dist/command-palette.js.map +1 -1
- package/dist/content/card/card.css.cjs +1 -1
- package/dist/content/card/card.css.cjs.map +1 -1
- package/dist/content/card/card.css.js +1 -1
- package/dist/content/card/card.css.js.map +1 -1
- package/dist/content/card/card.d.ts +2 -2
- package/dist/content/card/card.d.ts.map +1 -1
- package/dist/content/index.d.ts +2 -0
- package/dist/content/index.d.ts.map +1 -1
- package/dist/content/list/list-item.css.cjs +1 -1
- package/dist/content/list/list-item.css.cjs.map +1 -1
- package/dist/content/list/list-item.css.js +1 -1
- package/dist/content/list/list-item.css.js.map +1 -1
- package/dist/content/list/list-item.d.ts +9 -0
- package/dist/content/list/list-item.d.ts.map +1 -1
- package/dist/content/pagination/pagination.css.cjs +1 -1
- package/dist/content/pagination/pagination.css.cjs.map +1 -1
- package/dist/content/pagination/pagination.css.js +1 -1
- package/dist/content/pagination/pagination.css.js.map +1 -1
- package/dist/content/stats/stats.css.cjs +2 -0
- package/dist/content/stats/stats.css.cjs.map +1 -0
- package/dist/content/stats/stats.css.js +6 -0
- package/dist/content/stats/stats.css.js.map +1 -0
- package/dist/content/stats/stats.d.ts +72 -0
- package/dist/content/stats/stats.d.ts.map +1 -0
- package/dist/core/auto-resize.cjs +1 -1
- package/dist/core/auto-resize.cjs.map +1 -1
- package/dist/core/auto-resize.js +1 -1
- package/dist/core/auto-resize.js.map +1 -1
- package/dist/core/field-base.cjs +1 -1
- package/dist/core/field-base.cjs.map +1 -1
- package/dist/core/field-base.d.ts +1 -1
- package/dist/core/field-base.js +1 -1
- package/dist/core/field-base.js.map +1 -1
- package/dist/core/nav.cjs +1 -1
- package/dist/core/nav.cjs.map +1 -1
- package/dist/core/nav.d.ts +4 -1
- package/dist/core/nav.d.ts.map +1 -1
- package/dist/core/nav.js +41 -28
- package/dist/core/nav.js.map +1 -1
- package/dist/core/option-list.cjs +1 -1
- package/dist/core/option-list.cjs.map +1 -1
- package/dist/core/option-list.d.ts.map +1 -1
- package/dist/core/option-list.js +30 -28
- package/dist/core/option-list.js.map +1 -1
- package/dist/core/slider.cjs +1 -1
- package/dist/core/slider.cjs.map +1 -1
- package/dist/core/slider.js +1 -1
- package/dist/core/slider.js.map +1 -1
- package/dist/core/spinner.cjs +1 -1
- package/dist/core/spinner.cjs.map +1 -1
- package/dist/core/spinner.js +1 -1
- package/dist/core/spinner.js.map +1 -1
- package/dist/custom-elements.json +5471 -4977
- package/dist/datagrid.cjs +219 -199
- package/dist/datagrid.cjs.map +1 -1
- package/dist/datagrid.js +415 -302
- package/dist/datagrid.js.map +1 -1
- package/dist/disclosure/accordion/accordion.css.cjs +1 -1
- package/dist/disclosure/accordion/accordion.css.cjs.map +1 -1
- package/dist/disclosure/accordion/accordion.css.js +1 -1
- package/dist/disclosure/accordion/accordion.css.js.map +1 -1
- package/dist/disclosure/accordion/accordion.d.ts +5 -5
- package/dist/disclosure/accordion/accordion.d.ts.map +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.cjs +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.cjs.map +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.js +1 -1
- package/dist/disclosure/accordion-item/accordion-item.css.js.map +1 -1
- package/dist/disclosure/accordion-item/accordion-item.d.ts +3 -3
- package/dist/disclosure/accordion-item/accordion-item.d.ts.map +1 -1
- package/dist/disclosure/tab-item/tab-item.css.cjs +1 -1
- package/dist/disclosure/tab-item/tab-item.css.cjs.map +1 -1
- package/dist/disclosure/tab-item/tab-item.css.js +1 -1
- package/dist/disclosure/tab-item/tab-item.css.js.map +1 -1
- package/dist/disclosure/tab-item/tab-item.d.ts +6 -3
- package/dist/disclosure/tab-item/tab-item.d.ts.map +1 -1
- package/dist/disclosure/tabs/tabs.css.cjs +1 -1
- package/dist/disclosure/tabs/tabs.css.cjs.map +1 -1
- package/dist/disclosure/tabs/tabs.css.js +1 -1
- package/dist/disclosure/tabs/tabs.css.js.map +1 -1
- package/dist/disclosure/tabs/tabs.d.ts +9 -5
- package/dist/disclosure/tabs/tabs.d.ts.map +1 -1
- package/dist/drawer.cjs +1 -1
- package/dist/drawer.cjs.map +1 -1
- package/dist/drawer.js +1 -1
- package/dist/drawer.js.map +1 -1
- package/dist/feedback/toast/toast.d.ts.map +1 -1
- package/dist/file-input.cjs +1 -1
- package/dist/file-input.cjs.map +1 -1
- package/dist/file-input.js +2 -2
- package/dist/file-input.js.map +1 -1
- package/dist/frameworks/elements.d.ts +4 -85
- package/dist/frameworks/react.d.ts +5 -4
- package/dist/frameworks/vue.d.ts +4 -4
- package/dist/grid.cjs +2 -2
- package/dist/grid.cjs.map +1 -1
- package/dist/grid.js +21 -18
- package/dist/grid.js.map +1 -1
- package/dist/icon.cjs +1 -1
- package/dist/icon.cjs.map +1 -1
- package/dist/icon.js +1 -1
- package/dist/icon.js.map +1 -1
- package/dist/input.cjs +5 -4
- package/dist/input.cjs.map +1 -1
- package/dist/input.js +14 -8
- package/dist/input.js.map +1 -1
- package/dist/inputs/combobox/combobox-options.cjs +1 -1
- package/dist/inputs/combobox/combobox-options.cjs.map +1 -1
- package/dist/inputs/combobox/combobox-options.d.ts.map +1 -1
- package/dist/inputs/combobox/combobox-options.js +1 -0
- package/dist/inputs/combobox/combobox-options.js.map +1 -1
- package/dist/inputs/combobox/combobox.css.cjs +1 -1
- package/dist/inputs/combobox/combobox.css.cjs.map +1 -1
- package/dist/inputs/combobox/combobox.css.js +1 -1
- package/dist/inputs/combobox/combobox.css.js.map +1 -1
- package/dist/inputs/combobox/combobox.d.ts +13 -1
- package/dist/inputs/combobox/combobox.d.ts.map +1 -1
- package/dist/inputs/combobox/combobox.types.d.ts +7 -0
- package/dist/inputs/combobox/combobox.types.d.ts.map +1 -1
- package/dist/inputs/datagrid/datagrid-model.cjs +1 -1
- package/dist/inputs/datagrid/datagrid-model.cjs.map +1 -1
- package/dist/inputs/datagrid/datagrid-model.d.ts +17 -3
- package/dist/inputs/datagrid/datagrid-model.d.ts.map +1 -1
- package/dist/inputs/datagrid/datagrid-model.js +93 -70
- package/dist/inputs/datagrid/datagrid-model.js.map +1 -1
- package/dist/inputs/datagrid/datagrid.css.cjs +1 -1
- package/dist/inputs/datagrid/datagrid.css.cjs.map +1 -1
- package/dist/inputs/datagrid/datagrid.css.js +1 -1
- package/dist/inputs/datagrid/datagrid.css.js.map +1 -1
- package/dist/inputs/datagrid/datagrid.d.ts +78 -36
- package/dist/inputs/datagrid/datagrid.d.ts.map +1 -1
- package/dist/inputs/file-input/file-input-upload.cjs +1 -1
- package/dist/inputs/file-input/file-input-upload.cjs.map +1 -1
- package/dist/inputs/file-input/file-input-upload.js +1 -1
- package/dist/inputs/file-input/file-input-upload.js.map +1 -1
- package/dist/inputs/index.d.ts +3 -4
- package/dist/inputs/index.d.ts.map +1 -1
- package/dist/inputs/input/input.css.cjs +1 -1
- package/dist/inputs/input/input.css.cjs.map +1 -1
- package/dist/inputs/input/input.css.js +1 -1
- package/dist/inputs/input/input.css.js.map +1 -1
- package/dist/inputs/input/input.d.ts +3 -0
- package/dist/inputs/input/input.d.ts.map +1 -1
- package/dist/inputs/select/select.css.cjs +1 -1
- package/dist/inputs/select/select.css.cjs.map +1 -1
- package/dist/inputs/select/select.css.js +1 -1
- package/dist/inputs/select/select.css.js.map +1 -1
- package/dist/inputs/select/select.d.ts +5 -0
- package/dist/inputs/select/select.d.ts.map +1 -1
- package/dist/inputs/shared/field-binding.cjs +1 -1
- package/dist/inputs/shared/field-binding.cjs.map +1 -1
- package/dist/inputs/shared/field-binding.js +6 -6
- package/dist/inputs/shared/field-binding.js.map +1 -1
- package/dist/layout/box/box.css.cjs +1 -1
- package/dist/layout/box/box.css.cjs.map +1 -1
- package/dist/layout/box/box.css.js +1 -1
- package/dist/layout/box/box.css.js.map +1 -1
- package/dist/layout/box/box.d.ts +3 -3
- package/dist/layout/box/box.d.ts.map +1 -1
- package/dist/layout/grid/grid.d.ts.map +1 -1
- package/dist/layout/navbar/navbar.css.cjs +1 -1
- package/dist/layout/navbar/navbar.css.cjs.map +1 -1
- package/dist/layout/navbar/navbar.css.js +1 -1
- package/dist/layout/navbar/navbar.css.js.map +1 -1
- package/dist/layout/navbar/navbar.d.ts +3 -1
- package/dist/layout/navbar/navbar.d.ts.map +1 -1
- package/dist/layout/sidebar/sidebar.css.cjs +1 -1
- package/dist/layout/sidebar/sidebar.css.cjs.map +1 -1
- package/dist/layout/sidebar/sidebar.css.js +1 -1
- package/dist/layout/sidebar/sidebar.css.js.map +1 -1
- package/dist/layout/sidebar/sidebar.d.ts +8 -0
- package/dist/layout/sidebar/sidebar.d.ts.map +1 -1
- package/dist/list-item.cjs +6 -5
- package/dist/list-item.cjs.map +1 -1
- package/dist/list-item.js +23 -17
- package/dist/list-item.js.map +1 -1
- package/dist/list.cjs +1 -1
- package/dist/list.cjs.map +1 -1
- package/dist/list.js +1 -1
- package/dist/list.js.map +1 -1
- package/dist/menu.cjs +1 -1
- package/dist/menu.cjs.map +1 -1
- package/dist/menu.js +7 -7
- package/dist/menu.js.map +1 -1
- package/dist/navbar.cjs +2 -2
- package/dist/navbar.cjs.map +1 -1
- package/dist/navbar.js +91 -87
- package/dist/navbar.js.map +1 -1
- package/dist/navigation-menu.cjs +1 -1
- package/dist/navigation-menu.cjs.map +1 -1
- package/dist/navigation-menu.js +2 -2
- package/dist/navigation-menu.js.map +1 -1
- package/dist/number-input.cjs +1 -1
- package/dist/number-input.cjs.map +1 -1
- package/dist/number-input.js +1 -1
- package/dist/number-input.js.map +1 -1
- package/dist/overlay/popover/popover.css.cjs +1 -1
- package/dist/overlay/popover/popover.css.cjs.map +1 -1
- package/dist/overlay/popover/popover.css.js +1 -1
- package/dist/overlay/popover/popover.css.js.map +1 -1
- package/dist/overlay/popover/popover.d.ts +1 -0
- package/dist/overlay/popover/popover.d.ts.map +1 -1
- package/dist/overlay/shared/use-dialog.cjs +1 -1
- package/dist/overlay/shared/use-dialog.cjs.map +1 -1
- package/dist/overlay/shared/use-dialog.js +1 -1
- package/dist/overlay/shared/use-dialog.js.map +1 -1
- package/dist/overlay/shared/use-floating-trigger.cjs +1 -1
- package/dist/overlay/shared/use-floating-trigger.cjs.map +1 -1
- package/dist/overlay/shared/use-floating-trigger.js +1 -1
- package/dist/overlay/shared/use-floating-trigger.js.map +1 -1
- package/dist/overlay/tooltip/tooltip.d.ts.map +1 -1
- package/dist/popover.cjs +1 -1
- package/dist/popover.cjs.map +1 -1
- package/dist/popover.js +6 -6
- package/dist/popover.js.map +1 -1
- package/dist/radio-group.cjs +1 -1
- package/dist/radio-group.cjs.map +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/radio-group.js.map +1 -1
- package/dist/radio.cjs +1 -1
- package/dist/radio.cjs.map +1 -1
- package/dist/radio.js +15 -13
- package/dist/radio.js.map +1 -1
- package/dist/rating.cjs +1 -1
- package/dist/rating.cjs.map +1 -1
- package/dist/rating.js +2 -2
- package/dist/rating.js.map +1 -1
- package/dist/refine.cjs +373 -324
- package/dist/refine.cjs.map +1 -1
- package/dist/refine.iife.js +382 -333
- package/dist/refine.iife.js.map +1 -1
- package/dist/refine.js +417 -368
- package/dist/refine.js.map +1 -1
- package/dist/select.cjs +16 -14
- package/dist/select.cjs.map +1 -1
- package/dist/select.js +118 -112
- package/dist/select.js.map +1 -1
- package/dist/shared/types.d.ts +0 -2
- package/dist/shared/types.d.ts.map +1 -1
- package/dist/sidebar.cjs +28 -23
- package/dist/sidebar.cjs.map +1 -1
- package/dist/sidebar.js +143 -108
- package/dist/sidebar.js.map +1 -1
- package/dist/skeleton.cjs +1 -1
- package/dist/skeleton.cjs.map +1 -1
- package/dist/skeleton.js +11 -9
- package/dist/skeleton.js.map +1 -1
- package/dist/slider.cjs +1 -1
- package/dist/slider.cjs.map +1 -1
- package/dist/slider.js +21 -21
- package/dist/slider.js.map +1 -1
- package/dist/stats.cjs +18 -0
- package/dist/stats.cjs.map +1 -0
- package/dist/stats.js +88 -0
- package/dist/stats.js.map +1 -0
- package/dist/stepper.cjs +1 -1
- package/dist/stepper.cjs.map +1 -1
- package/dist/stepper.js +1 -1
- package/dist/stepper.js.map +1 -1
- package/dist/styles/mixins/animation.css.cjs +2 -0
- package/dist/styles/mixins/animation.css.cjs.map +1 -1
- package/dist/styles/mixins/animation.css.d.ts.map +1 -1
- package/dist/styles/mixins/animation.css.js +2 -0
- package/dist/styles/mixins/animation.css.js.map +1 -1
- package/dist/tab-item.cjs +1 -1
- package/dist/tab-item.cjs.map +1 -1
- package/dist/tab-item.js +3 -2
- package/dist/tab-item.js.map +1 -1
- package/dist/tabs.cjs +1 -1
- package/dist/tabs.cjs.map +1 -1
- package/dist/tabs.js +3 -1
- package/dist/tabs.js.map +1 -1
- package/dist/toast.cjs +8 -8
- package/dist/toast.cjs.map +1 -1
- package/dist/toast.js +32 -33
- package/dist/toast.js.map +1 -1
- package/dist/tooltip.cjs +1 -1
- package/dist/tooltip.cjs.map +1 -1
- package/dist/tooltip.js +2 -2
- package/dist/tooltip.js.map +1 -1
- package/dist/types/elements.d.ts +207 -0
- package/package.json +70 -62
package/dist/menu.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import { restoreFocus } from '@vielzeug/focus';\nimport type { Placement } from '@vielzeug/orbit';\nimport {\n bind,\n createStableId,\n define,\n getHost,\n html,\n onCleanup,\n onMounted,\n prop,\n useEmit,\n useSlots,\n watchEffect,\n} from '@vielzeug/ore';\nimport { computed, watch as rippleWatch, signal } from '@vielzeug/ripple';\nimport {\n createDropdownPositioner,\n createInteraction,\n createListControl,\n createOutsidePointerDismissal,\n type DropdownCloseReason,\n lifecycleSignal,\n type OverlayOpenChangeDetail,\n type OverlayOpenReason,\n} from '../../core';\nimport { disablableBundle, MENU_SIZE_PRESET, sizableBundle } from '../../shared';\nimport { colorThemeMixin, forcedColorsMixin, sizeVariantMixin } from '../../styles';\nimport type { ComponentSize } from '../../types';\nimport componentStyles from './menu.css?inline';\nimport menuItemStyles from './menu-item.css?inline';\nimport menuSeparatorStyles from './menu-separator.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\nexport interface MenuSelectDetail {\n checked?: boolean;\n value: string;\n}\n\nexport type OreMenuItemType = 'checkbox' | 'radio';\n\nexport type OreMenuEvents = {\n 'open-change': OverlayOpenChangeDetail;\n select: MenuSelectDetail;\n};\n\nexport type OreMenuItemProps = {\n checked?: boolean;\n disabled?: boolean;\n type?: OreMenuItemType;\n value?: string;\n};\n\nexport type OreMenuProps = {\n /** Initial uncontrolled open state. Ignored when `open` is set. */\n 'default-open'?: boolean;\n disabled?: boolean;\n /** Controlled open state. */\n open?: boolean;\n placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n size?: ComponentSize;\n};\n\n// ── Styles ─────────────────────────────────────────────────────────────\n\n// ── Menu Item Component ─────────────────────────────────────────────────────────────\n\n/**\n * A selectable action item used inside `<ore-menu>`.\n *\n * @element ore-menu-item\n *\n * @attr {boolean} checked - Checked state for `checkbox` and `radio` item types\n * @attr {boolean} disabled - Disables selection and pointer interaction\n * @attr {'checkbox'|'radio'} type - Optional checkable menu item mode\n * @attr {string} value - Value emitted by parent menu on selection\n *\n * @slot - Item label/content\n * @slot icon - Optional leading icon content\n *\n * @cssprop --menu-item-hover-bg - Background on hover\n * @cssprop --menu-item-focus-color - Text color when keyboard-focused\n * @cssprop --menu-item-focus-bg - Background when keyboard-focused\n * @cssprop --menu-item-selection-bg - Background for checkbox/radio items (unselected)\n * @cssprop --menu-item-checked-color - Text color when checked\n * @cssprop --menu-item-checked-bg - Background when checked\n *\n * @part item - Root item container element.\n * @part item-label - Label text container.\n * @part icon-slot - Leading icon slot container.\n *\n * @example\n * ```html\n * <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n * <ore-menu-item value=\"delete\" disabled>Delete</ore-menu-item>\n * <ore-menu-item type=\"checkbox\" value=\"wrap\" checked>Word wrap</ore-menu-item>\n * <ore-menu-item type=\"radio\" value=\"left\">Align left</ore-menu-item>\n * ```\n */\nexport const MENU_ITEM_TAG = 'ore-menu-item' as const;\ndefine<OreMenuItemProps>(MENU_ITEM_TAG, {\n props: {\n checked: prop.bool(false),\n disabled: prop.bool(false),\n type: prop.string<OreMenuItemType>(),\n value: prop.string(),\n },\n setup(props) {\n const isCheckable = () => props.type.value === 'checkbox' || props.type.value === 'radio';\n const isChecked = () => isCheckable() && props.checked.value;\n const itemRole = () => {\n if (props.type.value === 'checkbox') return 'menuitemcheckbox';\n\n if (props.type.value === 'radio') return 'menuitemradio';\n\n return 'menuitem';\n };\n const itemClass = () => {\n const type = props.type.value;\n\n return [\n 'item',\n type === 'checkbox' ? 'is-checkbox' : '',\n type === 'radio' ? 'is-radio' : '',\n isChecked() ? 'is-checked' : '',\n ]\n .filter(Boolean)\n .join(' ');\n };\n\n return isCheckable()\n ? html`\n <div\n class=\"${itemClass}\"\n tabindex=\"-1\"\n role=\"${itemRole}\"\n aria-checked=\"${() => String(isChecked())}\"\n aria-disabled=\"${props.disabled}\">\n <span class=\"item-check\" aria-hidden=\"true\"></span>\n <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n <span class=\"item-label\"><slot></slot></span>\n </div>\n `\n : html`\n <div class=\"item\" tabindex=\"-1\" role=\"menuitem\" aria-disabled=\"${props.disabled}\">\n <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n <span class=\"item-label\"><slot></slot></span>\n </div>\n `;\n },\n styles: [colorThemeMixin, menuItemStyles],\n});\n\n// ── Menu Separator ─────────────────────────────────────────────────────────────\n\n/**\n * Visual separator used to group menu items inside `<ore-menu>`.\n *\n * @element ore-menu-separator\n *\n * @example\n * ```html\n * <ore-menu-item value=\"cut\">Cut</ore-menu-item>\n * <ore-menu-separator></ore-menu-separator>\n * <ore-menu-item value=\"paste\">Paste</ore-menu-item>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-menu-separator' as const;\ndefine(SEPARATOR_TAG, {\n setup() {\n return html``;\n },\n styles: [menuSeparatorStyles],\n});\n\n// ── Menu Component ─────────────────────────────────────────────────────────────\n\nconst isCheckableItemType = (value: string | null): value is OreMenuItemType =>\n value === 'checkbox' || value === 'radio';\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n value == null ? undefined : value === '' || value === 'true';\n\n/**\n * Action dropdown menu triggered by a slotted trigger element.\n *\n * @element ore-menu\n * @element ore-menu-item - Clickable menu option (place in default slot)\n * @element ore-menu-separator - Visual divider between menu groups\n *\n * @attr {boolean} disabled - Disables opening and keyboard interaction\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} placement - Panel placement: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' (default: 'bottom-start')\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n *\n * @fires open-change - Fired when the menu state changes. detail: { open, reason }\n * @fires select - Fired when an item is selected. detail: { value: string, checked?: boolean }\n *\n * @slot trigger - Trigger element that toggles menu visibility\n * @slot - Menu content (`<ore-menu-item>` and `<ore-menu-separator>`)\n *\n * @part panel - Floating menu panel container\n *\n * @cssprop --menu-panel-bg - Background of the floating panel\n * @cssprop --menu-panel-border-color - Border color of the floating panel\n * @cssprop --menu-panel-shadow - Box shadow of the floating panel\n * @cssprop --menu-panel-blur - Backdrop blur amount for the floating panel\n * @cssprop --menu-panel-min-width - Minimum width of the floating panel\n * @cssprop --menu-panel-max-height - Maximum height of the floating panel before it scrolls\n * @cssprop --menu-panel-radius - Border radius of the floating panel\n *\n * @example\n * ```html\n * <ore-menu>\n * <button slot=\"trigger\">Actions</button>\n * <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n * <ore-menu-item value=\"delete\">Delete</ore-menu-item>\n * </ore-menu>\n * ```\n */\nexport const MENU_TAG = 'ore-menu' as const;\ndefine<OreMenuProps>(MENU_TAG, {\n props: {\n ...sizableBundle,\n ...disablableBundle,\n 'default-open': prop.bool(false),\n open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n placement: prop.oneOf(\n ['bottom', 'bottom-start', 'bottom-end', 'top', 'top-start', 'top-end'] as const,\n 'bottom-start',\n ),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreMenuEvents>();\n const slots = useSlots();\n const watch = watchEffect;\n\n const menuId = createStableId('menu');\n const isDisabled = computed(() => Boolean(props.disabled.value));\n const abortSignal = lifecycleSignal(onCleanup);\n let triggerEl: HTMLElement | null = null;\n let panelEl: HTMLElement | null = null;\n let cleanupTrigger: (() => void) | null = null;\n\n // ── Helpers ───────────────────────────────────────────────────────────────\n function getItems(): HTMLElement[] {\n return Array.from(el.querySelectorAll<HTMLElement>('ore-menu-item:not([disabled])'));\n }\n\n function getItemFocusable(item: HTMLElement | null | undefined): HTMLElement | null {\n if (!item) return null;\n\n return item.shadowRoot?.querySelector<HTMLElement>('[role^=\"menuitem\"]') ?? item;\n }\n\n function getFocusedItemIndex(): number {\n const items = getItems();\n\n return items.findIndex((item) => {\n const focusable = getItemFocusable(item);\n\n return item === document.activeElement || focusable === document.activeElement;\n });\n }\n\n const isOpenSignal = signal(false);\n let stopPositioning: (() => void) | null = null;\n const positioner = createDropdownPositioner({\n getFloating: () => panelEl,\n getPlacement: () => (props.placement.value ?? 'bottom-start') as Placement,\n getReference: () => triggerEl,\n matchWidth: false,\n offsetPx: 4,\n padding: 6,\n });\n const list = createListControl<HTMLElement>({\n disabled: computed(() => !isOpenSignal.value),\n getItems: getItems,\n isItemDisabled: (item) => item.hasAttribute('disabled'),\n onNavigate: ({ item }) => {\n getItemFocusable(item)?.focus();\n },\n signal: abortSignal,\n });\n\n const close = (reason: DropdownCloseReason = 'programmatic', shouldRestoreFocus = true): void => {\n if (!isOpenSignal.value) return;\n\n isOpenSignal.value = false;\n list.reset();\n stopPositioning?.();\n stopPositioning = null;\n\n if (shouldRestoreFocus) restoreFocus(() => triggerEl);\n\n emit('open-change', { open: false, reason });\n };\n\n const open = (reason: OverlayOpenReason = 'programmatic'): void => {\n if (isDisabled.value || isOpenSignal.value) return;\n\n isOpenSignal.value = true;\n positioner.update();\n stopPositioning = positioner.startAutoUpdate?.() ?? null;\n emit('open-change', { open: true, reason });\n };\n\n const toggle = (): void => {\n if (isOpenSignal.value) close('trigger');\n else open('click');\n };\n\n createOutsidePointerDismissal({\n getTargets: () => [el, panelEl],\n isActive: () => isOpenSignal.value,\n onDismiss: () => close('outsideClick'),\n signal: abortSignal,\n });\n\n let initialized = false;\n\n rippleWatch(\n props.open,\n (value) => {\n if (value === undefined) {\n if (!initialized) {\n if (props['default-open'].value) open('programmatic');\n } else {\n close('programmatic');\n }\n } else if (value) {\n open('programmatic');\n } else {\n close('programmatic');\n }\n\n initialized = true;\n },\n { immediate: true },\n );\n abortSignal.addEventListener(\n 'abort',\n () => {\n if (!isOpenSignal.value) return;\n\n isOpenSignal.value = false;\n list.reset();\n stopPositioning?.();\n stopPositioning = null;\n },\n { once: true },\n );\n\n const activateItem = (item: HTMLElement): void => {\n const type = item.getAttribute('type');\n const isCheckable = isCheckableItemType(type);\n\n if (type === 'checkbox') {\n item.toggleAttribute('checked', !item.hasAttribute('checked'));\n } else if (type === 'radio') {\n for (const radio of el.querySelectorAll<HTMLElement>('ore-menu-item[type=\"radio\"]')) {\n radio.toggleAttribute('checked', radio === item);\n }\n }\n\n const value = item.getAttribute('value') ?? '';\n const checked = isCheckable ? item.hasAttribute('checked') : undefined;\n\n emit('select', { checked, value });\n\n if (!isCheckable) {\n close('programmatic');\n }\n };\n\n const openFromKeyboardPress = createInteraction({\n keys: ['Enter', ' ', 'ArrowDown'],\n onPress: () => {\n open('keyboard');\n requestAnimationFrame(() => list.set(0));\n },\n });\n\n const activateFocusedFromKeyboardPress = createInteraction({\n onPress: () => {\n const focused = list.getActiveItem();\n\n if (focused) activateItem(focused);\n },\n });\n\n // ── Keyboard Navigation ───────────────────────────────────────────────────\n function handleMenuKeydown(e: KeyboardEvent) {\n if (isDisabled.value) return;\n\n const open = isOpenSignal.value;\n\n // When closed: open on Enter / Space / ArrowDown\n if (!open) {\n openFromKeyboardPress.handleKeydown(e);\n\n return;\n }\n\n const currentFocusedIndex = getFocusedItemIndex();\n\n if (currentFocusedIndex >= 0) list.set(currentFocusedIndex);\n\n if (e.key === 'Escape') {\n e.preventDefault();\n close('escape');\n\n return;\n }\n\n if (list.handleKeydown(e)) return;\n\n // When open: navigate and activate\n if (e.key === ' ' || e.key === 'Enter') {\n activateFocusedFromKeyboardPress.handleKeydown(e);\n\n return;\n }\n\n if (e.key === 'Tab') {\n close('programmatic');\n }\n }\n\n // ── Lifecycle ─────────────────────────────────────────────────────────────\n bind({\n on: {\n click: (e: MouseEvent) => {\n const path = e.composedPath();\n\n if (!isOpenSignal.value) return;\n\n const itemFromPath = path.find(\n (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'ORE-MENU-ITEM',\n );\n const item = itemFromPath ?? (e.target as HTMLElement | null)?.closest<HTMLElement>('ore-menu-item') ?? null;\n\n if (!item || item.hasAttribute('disabled')) return;\n\n activateItem(item);\n },\n },\n });\n\n watch(() => {\n const open = isOpenSignal.value;\n\n if (!panelEl) return;\n\n panelEl.toggleAttribute('data-open', open);\n });\n\n function resolveTrigger() {\n cleanupTrigger?.();\n cleanupTrigger = null;\n\n const assigned = slots.elements('trigger').value;\n\n triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null;\n\n if (!triggerEl) return;\n\n const cleanups: Array<() => void> = [];\n const removeAria = bind(\n {\n aria: {\n controls: () => menuId,\n disabled: () => isDisabled.value,\n expanded: () => String(isOpenSignal.value),\n haspopup: 'menu',\n },\n },\n { target: triggerEl },\n );\n\n const onTriggerClick = (event: MouseEvent) => {\n event.stopPropagation();\n\n if (isDisabled.value) return;\n\n toggle();\n };\n const onTriggerKeydown = (event: KeyboardEvent) => {\n handleMenuKeydown(event);\n };\n\n triggerEl.addEventListener('click', onTriggerClick);\n triggerEl.addEventListener('keydown', onTriggerKeydown);\n cleanups.push(() => triggerEl?.removeEventListener('click', onTriggerClick));\n cleanups.push(() => triggerEl?.removeEventListener('keydown', onTriggerKeydown));\n\n cleanupTrigger = () => {\n removeAria();\n\n for (const cleanup of cleanups) cleanup();\n };\n }\n\n rippleWatch(slots.elements('trigger'), resolveTrigger, { immediate: true });\n\n onMounted(() => {\n resolveTrigger();\n\n return () => {\n cleanupTrigger?.();\n cleanupTrigger = null;\n };\n });\n\n return html`\n <slot name=\"trigger\"></slot>\n <div\n class=\"menu-panel\"\n part=\"panel\"\n id=\"${menuId}\"\n role=\"menu\"\n aria-orientation=\"vertical\"\n @keydown=\"${handleMenuKeydown}\"\n ref=\"${(el: HTMLElement | null) => {\n panelEl = el;\n panelEl?.toggleAttribute('data-open', isOpenSignal.value);\n }}\">\n <slot></slot>\n </div>\n `;\n },\n styles: [componentStyles, sizeVariantMixin(MENU_SIZE_PRESET), forcedColorsMixin],\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"menu.js","names":[],"sources":["../src/overlay/menu/menu.ts"],"sourcesContent":["import { restoreFocus } from '@vielzeug/focus';\nimport type { Placement } from '@vielzeug/orbit';\nimport {\n bind,\n createId,\n define,\n getHost,\n html,\n onCleanup,\n onMounted,\n prop,\n useEmit,\n useSlots,\n watchEffect,\n} from '@vielzeug/ore';\nimport { computed, watch as rippleWatch, signal } from '@vielzeug/ripple';\nimport {\n createDropdownPositioner,\n createInteraction,\n createListControl,\n createOutsidePointerDismissal,\n type DropdownCloseReason,\n lifecycleSignal,\n type OverlayOpenChangeDetail,\n type OverlayOpenReason,\n} from '../../core';\nimport { disablableBundle, MENU_SIZE_PRESET, sizableBundle } from '../../shared';\nimport { colorThemeMixin, forcedColorsMixin, sizeVariantMixin } from '../../styles';\nimport type { ComponentSize } from '../../types';\nimport componentStyles from './menu.css?inline';\nimport menuItemStyles from './menu-item.css?inline';\nimport menuSeparatorStyles from './menu-separator.css?inline';\n\n// ── Types ─────────────────────────────────────────────────────────────\n\nexport interface MenuSelectDetail {\n checked?: boolean;\n value: string;\n}\n\nexport type OreMenuItemType = 'checkbox' | 'radio';\n\nexport type OreMenuEvents = {\n 'open-change': OverlayOpenChangeDetail;\n select: MenuSelectDetail;\n};\n\nexport type OreMenuItemProps = {\n checked?: boolean;\n disabled?: boolean;\n type?: OreMenuItemType;\n value?: string;\n};\n\nexport type OreMenuProps = {\n /** Initial uncontrolled open state. Ignored when `open` is set. */\n 'default-open'?: boolean;\n disabled?: boolean;\n /** Controlled open state. */\n open?: boolean;\n placement?: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n size?: ComponentSize;\n};\n\n// ── Styles ─────────────────────────────────────────────────────────────\n\n// ── Menu Item Component ─────────────────────────────────────────────────────────────\n\n/**\n * A selectable action item used inside `<ore-menu>`.\n *\n * @element ore-menu-item\n *\n * @attr {boolean} checked - Checked state for `checkbox` and `radio` item types\n * @attr {boolean} disabled - Disables selection and pointer interaction\n * @attr {'checkbox'|'radio'} type - Optional checkable menu item mode\n * @attr {string} value - Value emitted by parent menu on selection\n *\n * @slot - Item label/content\n * @slot icon - Optional leading icon content\n *\n * @cssprop --menu-item-hover-bg - Background on hover\n * @cssprop --menu-item-focus-color - Text color when keyboard-focused\n * @cssprop --menu-item-focus-bg - Background when keyboard-focused\n * @cssprop --menu-item-selection-bg - Background for checkbox/radio items (unselected)\n * @cssprop --menu-item-checked-color - Text color when checked\n * @cssprop --menu-item-checked-bg - Background when checked\n *\n * @part item - Root item container element.\n * @part item-label - Label text container.\n * @part icon-slot - Leading icon slot container.\n *\n * @example\n * ```html\n * <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n * <ore-menu-item value=\"delete\" disabled>Delete</ore-menu-item>\n * <ore-menu-item type=\"checkbox\" value=\"wrap\" checked>Word wrap</ore-menu-item>\n * <ore-menu-item type=\"radio\" value=\"left\">Align left</ore-menu-item>\n * ```\n */\nexport const MENU_ITEM_TAG = 'ore-menu-item' as const;\ndefine<OreMenuItemProps>(MENU_ITEM_TAG, {\n props: {\n checked: prop.bool(false),\n disabled: prop.bool(false),\n type: prop.string<OreMenuItemType>(),\n value: prop.string(),\n },\n setup(props) {\n const isCheckable = () => props.type.value === 'checkbox' || props.type.value === 'radio';\n const isChecked = () => isCheckable() && props.checked.value;\n const itemRole = () => {\n if (props.type.value === 'checkbox') return 'menuitemcheckbox';\n\n if (props.type.value === 'radio') return 'menuitemradio';\n\n return 'menuitem';\n };\n const itemClass = () => {\n const type = props.type.value;\n\n return [\n 'item',\n type === 'checkbox' ? 'is-checkbox' : '',\n type === 'radio' ? 'is-radio' : '',\n isChecked() ? 'is-checked' : '',\n ]\n .filter(Boolean)\n .join(' ');\n };\n\n return isCheckable()\n ? html`\n <div\n class=\"${itemClass}\"\n tabindex=\"-1\"\n role=\"${itemRole}\"\n aria-checked=\"${() => String(isChecked())}\"\n aria-disabled=\"${props.disabled}\">\n <span class=\"item-check\" aria-hidden=\"true\"></span>\n <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n <span class=\"item-label\"><slot></slot></span>\n </div>\n `\n : html`\n <div class=\"item\" tabindex=\"-1\" role=\"menuitem\" aria-disabled=\"${props.disabled}\">\n <span class=\"icon-slot\"><slot name=\"icon\"></slot></span>\n <span class=\"item-label\"><slot></slot></span>\n </div>\n `;\n },\n styles: [colorThemeMixin, menuItemStyles],\n});\n\n// ── Menu Separator ─────────────────────────────────────────────────────────────\n\n/**\n * Visual separator used to group menu items inside `<ore-menu>`.\n *\n * @element ore-menu-separator\n *\n * @example\n * ```html\n * <ore-menu-item value=\"cut\">Cut</ore-menu-item>\n * <ore-menu-separator></ore-menu-separator>\n * <ore-menu-item value=\"paste\">Paste</ore-menu-item>\n * ```\n */\nexport const SEPARATOR_TAG = 'ore-menu-separator' as const;\ndefine(SEPARATOR_TAG, {\n setup() {\n return html``;\n },\n styles: [menuSeparatorStyles],\n});\n\n// ── Menu Component ─────────────────────────────────────────────────────────────\n\nconst isCheckableItemType = (value: string | null): value is OreMenuItemType =>\n value === 'checkbox' || value === 'radio';\n\nconst parseOptionalBool = (value: string | null): boolean | undefined =>\n value == null ? undefined : value === '' || value === 'true';\n\n/**\n * Action dropdown menu triggered by a slotted trigger element.\n *\n * @element ore-menu\n * @element ore-menu-item - Clickable menu option (place in default slot)\n * @element ore-menu-separator - Visual divider between menu groups\n *\n * @attr {boolean} disabled - Disables opening and keyboard interaction\n * @attr {boolean} open - Controlled open state\n * @attr {boolean} default-open - Initial uncontrolled open state\n * @attr {string} placement - Panel placement: 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end' (default: 'bottom-start')\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n *\n * @fires open-change - Fired when the menu state changes. detail: { open, reason }\n * @fires select - Fired when an item is selected. detail: { value: string, checked?: boolean }\n *\n * @slot trigger - Trigger element that toggles menu visibility\n * @slot - Menu content (`<ore-menu-item>` and `<ore-menu-separator>`)\n *\n * @part panel - Floating menu panel container\n *\n * @cssprop --menu-panel-bg - Background of the floating panel\n * @cssprop --menu-panel-border-color - Border color of the floating panel\n * @cssprop --menu-panel-shadow - Box shadow of the floating panel\n * @cssprop --menu-panel-blur - Backdrop blur amount for the floating panel\n * @cssprop --menu-panel-min-width - Minimum width of the floating panel\n * @cssprop --menu-panel-max-height - Maximum height of the floating panel before it scrolls\n * @cssprop --menu-panel-radius - Border radius of the floating panel\n *\n * @example\n * ```html\n * <ore-menu>\n * <button slot=\"trigger\">Actions</button>\n * <ore-menu-item value=\"edit\">Edit</ore-menu-item>\n * <ore-menu-item value=\"delete\">Delete</ore-menu-item>\n * </ore-menu>\n * ```\n */\nexport const MENU_TAG = 'ore-menu' as const;\ndefine<OreMenuProps>(MENU_TAG, {\n props: {\n ...sizableBundle,\n ...disablableBundle,\n 'default-open': prop.bool(false),\n open: { default: undefined as boolean | undefined, parse: parseOptionalBool },\n placement: prop.oneOf(\n ['bottom', 'bottom-start', 'bottom-end', 'top', 'top-start', 'top-end'] as const,\n 'bottom-start',\n ),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreMenuEvents>();\n const slots = useSlots();\n const watch = watchEffect;\n\n const menuId = createId('menu');\n const isDisabled = computed(() => Boolean(props.disabled.value));\n const abortSignal = lifecycleSignal(onCleanup);\n let triggerEl: HTMLElement | null = null;\n let panelEl: HTMLElement | null = null;\n let cleanupTrigger: (() => void) | null = null;\n\n // ── Helpers ───────────────────────────────────────────────────────────────\n function getItems(): HTMLElement[] {\n return Array.from(el.querySelectorAll<HTMLElement>('ore-menu-item:not([disabled])'));\n }\n\n function getItemFocusable(item: HTMLElement | null | undefined): HTMLElement | null {\n if (!item) return null;\n\n return item.shadowRoot?.querySelector<HTMLElement>('[role^=\"menuitem\"]') ?? item;\n }\n\n function getFocusedItemIndex(): number {\n const items = getItems();\n\n return items.findIndex((item) => {\n const focusable = getItemFocusable(item);\n\n return item === document.activeElement || focusable === document.activeElement;\n });\n }\n\n const isOpenSignal = signal(false);\n let stopPositioning: (() => void) | null = null;\n const positioner = createDropdownPositioner({\n getFloating: () => panelEl,\n getPlacement: () => (props.placement.value ?? 'bottom-start') as Placement,\n getReference: () => triggerEl,\n matchWidth: false,\n offsetPx: 4,\n padding: 6,\n });\n const list = createListControl<HTMLElement>({\n disabled: computed(() => !isOpenSignal.value),\n getItems: getItems,\n isItemDisabled: (item) => item.hasAttribute('disabled'),\n onNavigate: ({ item }) => {\n getItemFocusable(item)?.focus();\n },\n signal: abortSignal,\n });\n\n const close = (reason: DropdownCloseReason = 'programmatic', shouldRestoreFocus = true): void => {\n if (!isOpenSignal.value) return;\n\n isOpenSignal.value = false;\n list.reset();\n stopPositioning?.();\n stopPositioning = null;\n\n if (shouldRestoreFocus) restoreFocus(() => triggerEl);\n\n emit('open-change', { open: false, reason });\n };\n\n const open = (reason: OverlayOpenReason = 'programmatic'): void => {\n if (isDisabled.value || isOpenSignal.value) return;\n\n isOpenSignal.value = true;\n positioner.update();\n stopPositioning = positioner.startAutoUpdate?.() ?? null;\n emit('open-change', { open: true, reason });\n };\n\n const toggle = (): void => {\n if (isOpenSignal.value) close('trigger');\n else open('click');\n };\n\n createOutsidePointerDismissal({\n getTargets: () => [el, panelEl],\n isActive: () => isOpenSignal.value,\n onDismiss: () => close('outsideClick'),\n signal: abortSignal,\n });\n\n let initialized = false;\n\n rippleWatch(\n props.open,\n (value) => {\n if (value === undefined) {\n if (!initialized) {\n if (props['default-open'].value) open('programmatic');\n } else {\n close('programmatic');\n }\n } else if (value) {\n open('programmatic');\n } else {\n close('programmatic');\n }\n\n initialized = true;\n },\n { immediate: true },\n );\n abortSignal.addEventListener(\n 'abort',\n () => {\n if (!isOpenSignal.value) return;\n\n isOpenSignal.value = false;\n list.reset();\n stopPositioning?.();\n stopPositioning = null;\n },\n { once: true },\n );\n\n const activateItem = (item: HTMLElement): void => {\n const type = item.getAttribute('type');\n const isCheckable = isCheckableItemType(type);\n\n if (type === 'checkbox') {\n item.toggleAttribute('checked', !item.hasAttribute('checked'));\n } else if (type === 'radio') {\n for (const radio of el.querySelectorAll<HTMLElement>('ore-menu-item[type=\"radio\"]')) {\n radio.toggleAttribute('checked', radio === item);\n }\n }\n\n const value = item.getAttribute('value') ?? '';\n const checked = isCheckable ? item.hasAttribute('checked') : undefined;\n\n emit('select', { checked, value });\n\n if (!isCheckable) {\n close('programmatic');\n }\n };\n\n const openFromKeyboardPress = createInteraction({\n keys: ['Enter', ' ', 'ArrowDown'],\n onPress: () => {\n open('keyboard');\n requestAnimationFrame(() => list.set(0));\n },\n });\n\n const activateFocusedFromKeyboardPress = createInteraction({\n onPress: () => {\n const focused = list.getActiveItem();\n\n if (focused) activateItem(focused);\n },\n });\n\n // ── Keyboard Navigation ───────────────────────────────────────────────────\n function handleMenuKeydown(e: KeyboardEvent) {\n if (isDisabled.value) return;\n\n const open = isOpenSignal.value;\n\n // When closed: open on Enter / Space / ArrowDown\n if (!open) {\n openFromKeyboardPress.handleKeydown(e);\n\n return;\n }\n\n const currentFocusedIndex = getFocusedItemIndex();\n\n if (currentFocusedIndex >= 0) list.set(currentFocusedIndex);\n\n if (e.key === 'Escape') {\n e.preventDefault();\n close('escape');\n\n return;\n }\n\n if (list.handleKeydown(e)) return;\n\n // When open: navigate and activate\n if (e.key === ' ' || e.key === 'Enter') {\n activateFocusedFromKeyboardPress.handleKeydown(e);\n\n return;\n }\n\n if (e.key === 'Tab') {\n close('programmatic');\n }\n }\n\n // ── Lifecycle ─────────────────────────────────────────────────────────────\n bind({\n on: {\n click: (e: MouseEvent) => {\n const path = e.composedPath();\n\n if (!isOpenSignal.value) return;\n\n const itemFromPath = path.find(\n (node): node is HTMLElement => node instanceof HTMLElement && node.tagName === 'ORE-MENU-ITEM',\n );\n const item = itemFromPath ?? (e.target as HTMLElement | null)?.closest<HTMLElement>('ore-menu-item') ?? null;\n\n if (!item || item.hasAttribute('disabled')) return;\n\n activateItem(item);\n },\n },\n });\n\n watch(() => {\n const open = isOpenSignal.value;\n\n if (!panelEl) return;\n\n panelEl.toggleAttribute('data-open', open);\n });\n\n function resolveTrigger() {\n cleanupTrigger?.();\n cleanupTrigger = null;\n\n const assigned = slots.elements('trigger').value;\n\n triggerEl = (assigned?.[0] as HTMLElement | undefined) ?? null;\n\n if (!triggerEl) return;\n\n const cleanups: Array<() => void> = [];\n const removeAria = bind(\n {\n attr: {\n 'aria-controls': () => menuId,\n 'aria-disabled': () => isDisabled.value,\n 'aria-expanded': () => String(isOpenSignal.value),\n 'aria-haspopup': 'menu',\n },\n },\n { target: triggerEl },\n );\n\n const onTriggerClick = (event: MouseEvent) => {\n event.stopPropagation();\n\n if (isDisabled.value) return;\n\n toggle();\n };\n const onTriggerKeydown = (event: KeyboardEvent) => {\n handleMenuKeydown(event);\n };\n\n triggerEl.addEventListener('click', onTriggerClick);\n triggerEl.addEventListener('keydown', onTriggerKeydown);\n cleanups.push(() => triggerEl?.removeEventListener('click', onTriggerClick));\n cleanups.push(() => triggerEl?.removeEventListener('keydown', onTriggerKeydown));\n\n cleanupTrigger = () => {\n removeAria();\n\n for (const cleanup of cleanups) cleanup();\n };\n }\n\n rippleWatch(slots.elements('trigger'), resolveTrigger, { immediate: true });\n\n onMounted(() => {\n resolveTrigger();\n\n return () => {\n cleanupTrigger?.();\n cleanupTrigger = null;\n };\n });\n\n return html`\n <slot name=\"trigger\"></slot>\n <div\n class=\"menu-panel\"\n part=\"panel\"\n id=\"${menuId}\"\n role=\"menu\"\n aria-orientation=\"vertical\"\n @keydown=\"${handleMenuKeydown}\"\n ref=\"${(el: HTMLElement | null) => {\n panelEl = el;\n panelEl?.toggleAttribute('data-open', isOpenSignal.value);\n }}\">\n <slot></slot>\n </div>\n `;\n },\n styles: [componentStyles, sizeVariantMixin(MENU_SIZE_PRESET), forcedColorsMixin],\n});\n"],"mappings":"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"}
|
package/dist/navbar.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./styles/mixins/variants.css.cjs"),i=require("./utils/link.cjs"),a=require("./layout/navbar/navbar.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple"),c=require("@vielzeug/sentinel");var l=(e,t,n,r)=>e?(e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)):()=>{},u=e=>!(e instanceof HTMLElement)||e.tagName.includes(`-`)||e.childElementCount>0?!0:(e.textContent??``).trim().length>0,d=e=>{let t=String(e??``).trim();if(!t)return;let n=/max-width\s*:\s*([0-9]+(?:\.[0-9]+)?)px/i.exec(t);if(!n)return;let r=Number.parseFloat(n[1]);return Number.isFinite(r)?r:void 0},f=e=>{let t=e.parentElement;for(;t?.tagName.toLowerCase()===`ore-grid-item`;)t=t.parentElement;return t},p=e=>{let t=f(e)?.clientWidth??0;return t>0?t:e.offsetWidth},m=e=>{let t=e.parentElement;for(;t;){let e=window.getComputedStyle(t).overflowY;if(e===`auto`||e===`scroll`||e===`overlay`)return t;t=t.parentElement}return null},h=(0,o.createContext)(`NavbarContext`),g=`ore-navbar`;(0,o.define)(g,{props:{breakpoint:o.prop.string(`(max-width: 768px)`),color:o.prop.string(),"container-breakpoints":o.prop.bool(!1),elevation:o.prop.number(),floating:o.prop.bool(!1),label:o.prop.string(`Main navigation`),"mobile-sidebar":o.prop.string(),rounded:o.prop.string(),"scroll-threshold":o.prop.number(80),sticky:o.prop.bool(!1),variant:o.prop.string()},setup(e){let t=(0,o.getHost)(),n=(0,o.useEmit)(),r=(0,o.useSlots)(),i=r.has(`logo`),a=r.elements(`mobile-menu`),g=(0,s.signal)(!1),_=(0,s.signal)(null),v=(0,s.signal)(!1),y=(0,s.signal)(!1),b=(0,s.signal)(!1),x=(0,s.signal)(!1),S=(0,s.signal)(!1),C=(0,s.signal)(!1),w=(0,s.signal)(0),T=(0,s.signal)(!1),E=(0,s.signal)(!1),D=(0,s.signal)(d(e.breakpoint.value)),O=(0,s.signal)(!1),k=()=>{let n=String(e[`mobile-sidebar`].value??``).trim();if(!n)return null;let r=t.getRootNode();return(r instanceof ShadowRoot||r instanceof Document?r.querySelector(n):null)??document.querySelector(n)};(0,o.provide)(h,{closeMobileMenu:()=>M(),isMobile:(0,s.computed)(()=>b.value),mobileMenuOpen:(0,s.computed)(()=>x.value)});let A=()=>{if(e.floating.value&&e.sticky.value)return C.value?`sticky`:`floating`;if(e.floating.value)return`floating`;if(e.sticky.value)return`sticky`},j=e=>{let t=!!e;if(!g.value){let e=_.value??k();if(e){t?e.openMobile?.():e.closeMobile?.();return}}t
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./styles/mixins/variants.css.cjs"),i=require("./utils/link.cjs"),a=require("./layout/navbar/navbar.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple"),c=require("@vielzeug/sentinel");var l=(e,t,n,r)=>e?(e.addEventListener(t,n,r),()=>e.removeEventListener(t,n,r)):()=>{},u=e=>!(e instanceof HTMLElement)||e.tagName.includes(`-`)||e.childElementCount>0?!0:(e.textContent??``).trim().length>0,d=e=>{let t=String(e??``).trim();if(!t)return;let n=/max-width\s*:\s*([0-9]+(?:\.[0-9]+)?)px/i.exec(t);if(!n)return;let r=Number.parseFloat(n[1]);return Number.isFinite(r)?r:void 0},f=e=>{let t=e.parentElement;for(;t?.tagName.toLowerCase()===`ore-grid-item`;)t=t.parentElement;return t},p=e=>{let t=f(e)?.clientWidth??0;return t>0?t:e.offsetWidth},m=e=>{let t=e.parentElement;for(;t;){let e=window.getComputedStyle(t).overflowY;if(e===`auto`||e===`scroll`||e===`overlay`)return t;t=t.parentElement}return null},h=(0,o.createContext)(`NavbarContext`),g=`ore-navbar`;(0,o.define)(g,{props:{breakpoint:o.prop.string(`(max-width: 768px)`),color:o.prop.string(),"container-breakpoints":o.prop.bool(!1),elevation:o.prop.number(),floating:o.prop.bool(!1),label:o.prop.string(`Main navigation`),"menu-close-label":o.prop.string(`Close navigation menu`),"menu-open-label":o.prop.string(`Open navigation menu`),"mobile-sidebar":o.prop.string(),rounded:o.prop.string(),"scroll-threshold":o.prop.number(80),sticky:o.prop.bool(!1),variant:o.prop.string()},setup(e){let t=(0,o.getHost)(),n=(0,o.useEmit)(),r=(0,o.useSlots)(),i=r.has(`logo`),a=r.elements(`mobile-menu`),g=(0,s.signal)(!1),_=(0,s.signal)(null),v=(0,s.signal)(!1),y=(0,s.signal)(!1),b=(0,s.signal)(!1),x=(0,s.signal)(!1),S=(0,s.signal)(!1),C=(0,s.signal)(!1),w=(0,s.signal)(0),T=(0,s.signal)(!1),E=(0,s.signal)(!1),D=(0,s.signal)(d(e.breakpoint.value)),O=(0,s.signal)(!1),k=()=>{let n=String(e[`mobile-sidebar`].value??``).trim();if(!n)return null;let r=t.getRootNode();return(r instanceof ShadowRoot||r instanceof Document?r.querySelector(n):null)??document.querySelector(n)};(0,o.provide)(h,{closeMobileMenu:()=>M(),isMobile:(0,s.computed)(()=>b.value),mobileMenuOpen:(0,s.computed)(()=>x.value)});let A=()=>{if(e.floating.value&&e.sticky.value)return C.value?`sticky`:`floating`;if(e.floating.value)return`floating`;if(e.sticky.value)return`sticky`},j=e=>{let t=!!e;if(!g.value){let e=_.value??k();if(e){t?e.openMobile?.():e.closeMobile?.();return}}(!t||g.value)&&x.value!==t&&(x.value=t,n(`mobile-menu-change`,{open:t}))},M=()=>j(!1),N=()=>j(!0),P=()=>{if(!g.value){let e=_.value??k();if(e){typeof e.toggleMobile==`function`?e.toggleMobile():typeof e.openMobile==`function`&&typeof e.closeMobile==`function`&&(e.hasAttribute(`data-mobile-open`)?e.closeMobile():e.openMobile());return}}j(!x.value)},F=()=>{let t=(_.value&&!g.value?v.value:!1)||T.value||!!e[`container-breakpoints`].value&&E.value;b.value=t,t||M()},I=e=>e?e.scrollTop||0:window.scrollY||document.documentElement.scrollTop||0,L=e=>{w.value=I(e)},R=(t=null)=>{if(!(e.floating.value&&e.sticky.value)){C.value&&=!1;return}let n=Math.max(0,Number(e[`scroll-threshold`].value)||0),r=I(t)-w.value;C.value=r>n};return(0,o.bind)({attr:{"data-mobile":()=>b.value?!0:void 0,"data-mobile-open":()=>b.value&&x.value?!0:void 0,"data-mode":()=>A()??null,"data-mode-transitioning":()=>S.value?!0:void 0,"data-preview-mode":()=>O.value?!0:void 0,"data-scrolled":()=>e.floating.value&&e.sticky.value&&C.value?!0:void 0}}),(0,o.onMounted)(()=>{let n=t,r=m(t);n.closeMobileMenu=M,n.openMobileMenu=N,n.toggleMobileMenu=P;let i=l(window,`scroll`,()=>{R(r)},{passive:!0}),h=r?l(r,`scroll`,()=>{R(r)},{passive:!0}):void 0,b=l(t,`keydown`,e=>{e.key===`Escape`&&x.value&&M()}),w,j,I,z,B=()=>{if(j?.(),j=void 0,_.value=null,v.value=!1,y.value=!1,!String(e[`mobile-sidebar`].value??``).trim())return;let n=k();if(!n){let e=t.getRootNode(),n=e instanceof Document||e instanceof ShadowRoot?e:document,r=new MutationObserver(()=>{k()&&B()});r.observe(n,{childList:!0,subtree:!0}),j=()=>r.disconnect();return}let r=e=>{let t=n.hasAttribute(`data-bottom-nav`),r=n.hasAttribute(`data-mobile-open`);v.value=t,y.value=e?.detail?e.detail.open:r,y.value&&!v.value&&(v.value=!0),F()},i=new MutationObserver(()=>{r()});r(),i.observe(n,{attributeFilter:[`data-bottom-nav`,`data-mobile-open`],attributes:!0}),n.addEventListener(`mobile-open-change`,r),j=()=>{i.disconnect(),n.removeEventListener(`mobile-open-change`,r)},_.value=n},V=()=>{S.value=!0,I!=null&&clearTimeout(I),I=setTimeout(()=>{S.value=!1,I=void 0},220)},H=(0,s.watch)((0,s.computed)(()=>e.floating.value&&e.sticky.value),e=>{if(!e){C.value&&=!1,S.value&&=!1,z=void 0,I!=null&&(clearTimeout(I),I=void 0);return}L(r),R(r),z=A()},{immediate:!0}),U=(0,s.watch)(e[`mobile-sidebar`],()=>{B()},{immediate:!0}),W=(0,s.watch)((0,s.computed)(()=>A()),t=>{if(!(e.floating.value&&e.sticky.value)){z=t??void 0;return}let n=t??void 0;z&&n&&z!==n&&V(),z=n},{immediate:!0}),G=(0,s.watch)(g,e=>{!e&&x.value&&M()},{immediate:!0}),K=()=>{g.value=a.value.some(u)},q=(0,s.watch)(a,K,{immediate:!0}),J=new MutationObserver(()=>{K()});J.observe(t,{childList:!0,subtree:!0}),(0,s.watch)(e.breakpoint,n=>{(0,s.untrack)(()=>{w?.(),w=void 0;let r=String(n??``).trim();D.value=d(r),T.value=!1;let i=p(t);if(E.value=i>0&&D.value!=null&&i<=D.value,F(),!(e[`container-breakpoints`].value&&D.value!=null)&&r)try{let e=(0,c.createMediaQuery)(r),t=e=>{e&&(T.value=e.matches,F())};t(e.getSnapshot());let n=(0,s.watch)((0,s.fromSubscribable)(e,{signal:e.disposalSignal}),t);w=()=>{n.dispose(),e.dispose()}}catch(e){if(!(e instanceof c.SentinelUnavailableError))throw e}})},{immediate:!0});let Y=typeof ResizeObserver==`function`?(()=>{let e=(0,c.createElementSize)(t);(0,o.onCleanup)(()=>e.dispose());let n=(0,s.fromSubscribable)(e,{signal:e.disposalSignal}),r=t.parentElement,i=f(t),a=r?(0,c.createElementSize)(r):void 0,l=i&&i!==r?(0,c.createElementSize)(i):void 0;a&&(0,o.onCleanup)(()=>a.dispose()),l&&(0,o.onCleanup)(()=>l.dispose());let u=a?(0,s.fromSubscribable)(a,{signal:a.disposalSignal}):void 0,d=l?(0,s.fromSubscribable)(l,{signal:l.disposalSignal}):void 0;return(0,s.watch)((0,s.computed)(()=>[n.value?.width,n.value?.height,u?.value?.width,u?.value?.height,d?.value?.width,d?.value?.height]),()=>{let e=p(t),n=f(t)?.clientWidth??0;E.value=e>0&&D.value!=null&&e<=D.value,O.value=n>0&&n<window.innerWidth,F()})})():void 0;return()=>{b?.(),i?.(),h?.(),H?.dispose(),W?.dispose(),G?.dispose(),q?.dispose(),U?.dispose(),J.disconnect(),w?.(),j?.(),Y?.dispose(),I!=null&&(clearTimeout(I),I=void 0)}}),o.html`
|
|
2
2
|
<nav part="nav" aria-label="${e.label}">
|
|
3
3
|
<div class="navbar" part="bar">
|
|
4
4
|
<div class="navbar-logo" part="logo" ?hidden=${()=>!i.value}>
|
|
@@ -21,7 +21,7 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
|
|
|
21
21
|
class="mobile-toggle"
|
|
22
22
|
part="mobile-toggle"
|
|
23
23
|
type="button"
|
|
24
|
-
aria-label="${()=>g.value?x.value
|
|
24
|
+
aria-label="${()=>(g.value?x.value:y.value)?e[`menu-close-label`].value:e[`menu-open-label`].value}"
|
|
25
25
|
aria-controls="mobile-menu-panel"
|
|
26
26
|
aria-expanded="${()=>String(g.value?x.value:y.value)}"
|
|
27
27
|
?hidden=${()=>!b.value||!g.value&&!_.value}
|
package/dist/navbar.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navbar.cjs","names":[],"sources":["../src/layout/navbar/navbar.ts"],"sourcesContent":["import {\n bind,\n createContext,\n define,\n getHost,\n html,\n inject,\n onCleanup,\n onMounted,\n prop,\n provide,\n useEmit,\n useSlots,\n} from '@vielzeug/ore';\nimport { computed, type Readable, signal, untrack, watch } from '@vielzeug/ripple';\nimport { createElementSize, createMediaQuery, SentinelUnavailableError } from '@vielzeug/sentinel';\n\nimport type { ElevationLevel, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport {\n coarsePointerMixin,\n colorThemeMixin,\n elevationMixin,\n frostVariantMixin,\n reducedMotionMixin,\n roundedVariantMixin,\n} from '../../styles';\nimport { computeSafeRel } from '../../utils';\nimport navbarStyles from './navbar.css?inline';\n\nconst listen = <E extends Event = Event>(\n el: EventTarget | null | undefined,\n name: string,\n handler: (e: E) => void,\n options?: AddEventListenerOptions,\n): (() => void) => {\n if (!el) return () => {};\n\n el.addEventListener(name, handler as EventListener, options);\n\n return () => el.removeEventListener(name, handler as EventListener, options);\n};\n\ntype NavbarMode = 'floating' | 'sticky';\n\nconst hasElementContent = (el: Element): boolean => {\n if (!(el instanceof HTMLElement)) return true;\n\n if (el.tagName.includes('-')) return true;\n\n if (el.childElementCount > 0) return true;\n\n return (el.textContent ?? '').trim().length > 0;\n};\n\nconst parseMaxWidthPx = (query: string | undefined): number | undefined => {\n const value = String(query ?? '').trim();\n\n if (!value) return undefined;\n\n const match = /max-width\\s*:\\s*([0-9]+(?:\\.[0-9]+)?)px/i.exec(value);\n\n if (!match) return undefined;\n\n const parsed = Number.parseFloat(match[1]);\n\n return Number.isFinite(parsed) ? parsed : undefined;\n};\n\nconst resolveContainerElement = (el: HTMLElement): HTMLElement | null => {\n let container = el.parentElement;\n\n while (container?.tagName.toLowerCase() === 'ore-grid-item') {\n container = container.parentElement;\n }\n\n return container;\n};\n\nconst readContainerWidth = (el: HTMLElement): number => {\n const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n if (parentWidth > 0) return parentWidth;\n\n return el.offsetWidth;\n};\n\nconst findScrollContainer = (start: HTMLElement): HTMLElement | null => {\n let current: HTMLElement | null = start.parentElement;\n\n while (current) {\n const styles = window.getComputedStyle(current);\n const overflowY = styles.overflowY;\n\n if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {\n return current;\n }\n\n current = current.parentElement;\n }\n\n return null;\n};\n\n/** Context provided by `ore-navbar` to `ore-navbar-item` children. */\nexport type NavbarContext = {\n closeMobileMenu: () => void;\n isMobile: Readable<boolean>;\n mobileMenuOpen: Readable<boolean>;\n};\n\n/** Injection key for navbar context. */\nexport const NAVBAR_CTX = createContext<NavbarContext>('NavbarContext');\n\n/** Navbar component events */\nexport type OreNavbarEvents = {\n 'mobile-menu-change': { open: boolean };\n};\n\n/** Navbar component element interface */\nexport type NavbarElement = HTMLElement &\n OreNavbarProps & {\n closeMobileMenu(): void;\n openMobileMenu(): void;\n toggleMobileMenu(): void;\n };\n\ntype MobileSidebarElement = HTMLElement & {\n closeMobile?: () => void;\n openMobile?: () => void;\n toggleMobile?: () => void;\n};\n\n/** Navbar component properties */\nexport type OreNavbarProps = {\n /** CSS media query used for mobile layout switching */\n breakpoint?: string;\n /** Theme color */\n color?: ThemeColor;\n /** Evaluate mobile breakpoint against container width only when possible. */\n 'container-breakpoints'?: boolean;\n /** Shadow elevation level (0-5) */\n elevation?: ElevationLevel;\n /** Start as detached floating navbar */\n floating?: boolean;\n /** Accessible nav landmark label */\n label?: string;\n /** CSS selector for an external sidebar toggled by the mobile button */\n 'mobile-sidebar'?: string;\n /** Border radius size */\n rounded?: RoundedSize;\n /** Scroll threshold in px used by floating+sticky transition */\n 'scroll-threshold'?: number;\n /** Stick to top of viewport */\n sticky?: boolean;\n /** Visual style variant */\n variant?: Exclude<VisualVariant, 'ghost' | 'text'>;\n};\n\n/** Navbar item properties */\nexport type OreNavbarItemProps = {\n /** Whether this item represents the current page */\n active?: boolean;\n /** Whether this item is disabled */\n disabled?: boolean;\n /** Link target URL. Renders an anchor when provided. */\n href?: string;\n /**\n * Icon-only mode — hides the (empty) label region and switches to compact, symmetric\n * padding instead of the icon+label layout's wider horizontal padding. Set this whenever\n * the default slot is intentionally left empty (name conveyed via `aria-label` instead),\n * otherwise the empty label still reserves its inter-element gap and the item ends up\n * with lopsided padding around the icon.\n */\n 'icon-only'?: boolean;\n /** Relationship of linked URL (anchor-only) */\n rel?: string;\n /** Browsing context for link (anchor-only) */\n target?: string;\n};\n\n/**\n * `ore-navbar` — Responsive navigation with sticky/floating modes and a mobile overflow panel.\n *\n * @element ore-navbar\n * @element ore-navbar-item - Navigation link or button placed in the default or mobile-menu slot\n *\n * @attr {string} label - Accessible nav landmark label\n * @attr {boolean} sticky - Makes navbar sticky at top\n * @attr {boolean} floating - Makes navbar detached and floating\n * @attr {number} scroll-threshold - Scroll threshold for floating+sticky transition\n * @attr {string} breakpoint - CSS media query used for mobile mode\n * @attr {boolean} container-breakpoints - Evaluates parseable max-width breakpoints against container width\n * @attr {string} variant - Visual variant: 'flat' | 'solid' | 'bordered' | 'outline' | 'frost' | 'glass'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n *\n * @fires mobile-menu-change - Emitted when mobile menu open state changes. detail: { open: boolean }\n *\n * @slot logo - Brand/logo content rendered at the leading edge\n * @slot start - Content rendered in the left/start region\n * @slot - Center navigation content rendered between the start and end regions\n * @slot end - Content rendered in the right/end region\n * @slot mobile-menu - Controls and links rendered inside the mobile overflow panel\n *\n * @cssprop --navbar-height - Navbar bar height\n * @cssprop --navbar-width - Max width of the navbar content\n * @cssprop --navbar-offset - Horizontal offset for floating/sticky positioning\n * @cssprop --navbar-bg - Navbar background color\n * @cssprop --navbar-color - Navbar text color\n * @cssprop --navbar-border-color - Navbar border color\n * @cssprop --navbar-shadow - Navbar box shadow\n * @cssprop --navbar-radius - Border radius (floating/sticky modes)\n * @cssprop --navbar-backdrop-filter - Backdrop filter for blur effect\n * @cssprop --navbar-item-color - Nav item text color\n * @cssprop --navbar-item-hover-color - Nav item hover text color\n * @cssprop --navbar-item-hover-bg - Nav item hover background\n * @cssprop --navbar-item-active-color - Nav item active/current text color\n * @cssprop --navbar-item-active-bg - Nav item active/current background\n * @part nav - Outer navigation landmark\n * @part bar - Main navbar row container\n * @part logo - Logo slot container\n * @part start - Leading action/content region\n * @part center - Center content region\n * @part end - Trailing action/content region\n * @part mobile-toggle - Mobile menu toggle button\n * @part mobile-menu - Mobile overflow panel\n * @part item-icon - Leading icon inside navbar items\n * @part item-label - Label text inside navbar items\n * @part item-end - Trailing content inside navbar items\n * @part item - Clickable navbar item root\n * @example\n * ```html\n * <ore-navbar sticky elevation=\"1\">\n * <a href=\"/\" slot=\"logo\"><strong>MyApp</strong></a>\n * <ore-navbar-item href=\"/dashboard\">Dashboard</ore-navbar-item>\n * <ore-navbar-item href=\"/docs\">Docs</ore-navbar-item>\n * <ore-button slot=\"end\" variant=\"solid\" color=\"primary\" size=\"sm\">Sign in</ore-button>\n * </ore-navbar>\n * ```\n */\nexport const NAVBAR_TAG = 'ore-navbar' as const;\ndefine<OreNavbarProps>(NAVBAR_TAG, {\n props: {\n breakpoint: prop.string('(max-width: 768px)'),\n color: prop.string<ThemeColor>(),\n 'container-breakpoints': prop.bool(false),\n elevation: prop.number<ElevationLevel>(),\n floating: prop.bool(false),\n label: prop.string('Main navigation'),\n 'mobile-sidebar': prop.string(),\n rounded: prop.string<RoundedSize>(),\n 'scroll-threshold': prop.number(80),\n sticky: prop.bool(false),\n variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'frost'>(),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreNavbarEvents>();\n const slots = useSlots();\n\n const hasLogo = slots.has('logo');\n const mobileMenuElements = slots.elements('mobile-menu');\n const hasMobileMenu = signal(false);\n const mobileSidebarTarget = signal<MobileSidebarElement | null>(null);\n const isExternalMobileMode = signal(false);\n const isExternalMobileOpen = signal(false);\n const isMobile = signal(false);\n const isMobileMenuOpen = signal(false);\n const isModeTransitioning = signal(false);\n const isScrolled = signal(false);\n const scrollBase = signal(0);\n const mediaMatches = signal(false);\n const sizeMatches = signal(false);\n const maxWidthPx = signal<number | undefined>(parseMaxWidthPx(props.breakpoint.value));\n const isPreviewMode = signal(false);\n\n const getExternalSidebar = () => {\n const selector = String(props['mobile-sidebar'].value ?? '').trim();\n\n if (!selector) return null;\n\n const root = el.getRootNode();\n const scopedTarget =\n root instanceof ShadowRoot || root instanceof Document\n ? (root.querySelector(selector) as MobileSidebarElement | null)\n : null;\n\n return scopedTarget ?? (document.querySelector(selector) as MobileSidebarElement | null);\n };\n\n provide(NAVBAR_CTX, {\n // Wrapped, not passed directly — `closeMobileMenu` (below) isn't defined yet at this point\n // in `setup()`; by the time `ore-navbar-item` actually calls this (a later click), it is.\n closeMobileMenu: () => closeMobileMenu(),\n isMobile: computed(() => isMobile.value) as Readable<boolean>,\n mobileMenuOpen: computed(() => isMobileMenuOpen.value) as Readable<boolean>,\n });\n\n const computeMode = (): NavbarMode | undefined => {\n if (props.floating.value && props.sticky.value) {\n return isScrolled.value ? 'sticky' : 'floating';\n }\n\n if (props.floating.value) return 'floating';\n\n if (props.sticky.value) return 'sticky';\n\n return undefined;\n };\n\n const setMobileMenu = (next: boolean) => {\n const open = Boolean(next);\n\n if (!hasMobileMenu.value) {\n const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n if (target) {\n if (open) {\n target.openMobile?.();\n } else {\n target.closeMobile?.();\n }\n\n return;\n }\n }\n\n if (open && !hasMobileMenu.value) return;\n\n if (isMobileMenuOpen.value === open) return;\n\n isMobileMenuOpen.value = open;\n emit('mobile-menu-change', { open });\n };\n\n const closeMobileMenu = () => setMobileMenu(false);\n const openMobileMenu = () => setMobileMenu(true);\n const toggleMobileMenu = () => {\n if (!hasMobileMenu.value) {\n const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n if (target) {\n if (typeof target.toggleMobile === 'function') {\n target.toggleMobile();\n } else if (typeof target.openMobile === 'function' && typeof target.closeMobile === 'function') {\n const isOpen = target.hasAttribute('data-mobile-open');\n\n if (isOpen) target.closeMobile();\n else target.openMobile();\n }\n\n return;\n }\n }\n\n setMobileMenu(!isMobileMenuOpen.value);\n };\n\n const syncMobileMode = () => {\n const next =\n (mobileSidebarTarget.value && !hasMobileMenu.value ? isExternalMobileMode.value : false) ||\n mediaMatches.value ||\n sizeMatches.value;\n\n isMobile.value = next;\n\n if (!next) closeMobileMenu();\n };\n\n const readScrollOffset = (scrollContainer: HTMLElement | null): number => {\n if (scrollContainer) {\n return scrollContainer.scrollTop || 0;\n }\n\n return window.scrollY || document.documentElement.scrollTop || 0;\n };\n\n const resetScrollBase = (scrollContainer: HTMLElement | null) => {\n scrollBase.value = readScrollOffset(scrollContainer);\n };\n\n const updateScrolled = (scrollContainer: HTMLElement | null = null) => {\n if (!(props.floating.value && props.sticky.value)) {\n if (isScrolled.value) isScrolled.value = false;\n\n return;\n }\n\n const threshold = Math.max(0, Number(props['scroll-threshold'].value) || 0);\n const currentOffset = readScrollOffset(scrollContainer);\n const delta = currentOffset - scrollBase.value;\n\n isScrolled.value = delta > threshold;\n };\n\n bind({\n attr: {\n 'data-mobile': () => (isMobile.value ? true : undefined),\n 'data-mobile-open': () => (isMobile.value && isMobileMenuOpen.value ? true : undefined),\n 'data-mode': () => computeMode() ?? null,\n 'data-mode-transitioning': () => (isModeTransitioning.value ? true : undefined),\n 'data-preview-mode': () => (isPreviewMode.value ? true : undefined),\n 'data-scrolled': () => (props.floating.value && props.sticky.value && isScrolled.value ? true : undefined),\n },\n });\n\n onMounted(() => {\n const navbarEl = el as NavbarElement;\n const scrollContainer = findScrollContainer(el);\n\n navbarEl.closeMobileMenu = closeMobileMenu;\n navbarEl.openMobileMenu = openMobileMenu;\n navbarEl.toggleMobileMenu = toggleMobileMenu;\n\n const stopScroll = listen(\n window,\n 'scroll',\n () => {\n updateScrolled(scrollContainer);\n },\n { passive: true },\n );\n const stopContainerScroll = scrollContainer\n ? listen(\n scrollContainer,\n 'scroll',\n () => {\n updateScrolled(scrollContainer);\n },\n { passive: true },\n )\n : undefined;\n const stopEscape = listen(el, 'keydown', (event: KeyboardEvent) => {\n if (event.key !== 'Escape' || !isMobileMenuOpen.value) return;\n\n closeMobileMenu();\n });\n\n let mediaCleanup: (() => void) | undefined;\n let mobileSidebarCleanup: (() => void) | undefined;\n let modeTransitionTimeout: ReturnType<typeof setTimeout> | undefined;\n let previousMode: NavbarMode | undefined;\n\n const resolveMobileSidebarTarget = () => {\n mobileSidebarCleanup?.();\n mobileSidebarCleanup = undefined;\n mobileSidebarTarget.value = null;\n isExternalMobileMode.value = false;\n isExternalMobileOpen.value = false;\n\n if (!String(props['mobile-sidebar'].value ?? '').trim()) return;\n\n const target = getExternalSidebar();\n\n if (!target) {\n const root = el.getRootNode();\n const discoveryRoot = root instanceof Document || root instanceof ShadowRoot ? root : document;\n const discoveryObserver = new MutationObserver(() => {\n if (getExternalSidebar()) resolveMobileSidebarTarget();\n });\n\n discoveryObserver.observe(discoveryRoot, { childList: true, subtree: true });\n mobileSidebarCleanup = () => discoveryObserver.disconnect();\n\n return;\n }\n\n const syncTargetState = (event?: CustomEvent<{ open: boolean }>) => {\n const hasBottomNav = target.hasAttribute('data-bottom-nav');\n const hasMobileOpen = target.hasAttribute('data-mobile-open');\n\n isExternalMobileMode.value = hasBottomNav;\n isExternalMobileOpen.value = event?.detail ? event.detail.open : hasMobileOpen;\n\n // If the sidebar is reporting it's open, it must be in bottom-nav mode\n // (either natural or forced). We honor this to avoid race conditions\n // where attributes haven't reflected yet.\n if (isExternalMobileOpen.value && !isExternalMobileMode.value) {\n isExternalMobileMode.value = true;\n }\n\n syncMobileMode();\n };\n\n const targetObserver = new MutationObserver(() => {\n syncTargetState();\n });\n\n syncTargetState();\n targetObserver.observe(target, {\n attributeFilter: ['data-bottom-nav', 'data-mobile-open'],\n attributes: true,\n });\n target.addEventListener('mobile-open-change', syncTargetState as EventListener);\n mobileSidebarCleanup = () => {\n targetObserver.disconnect();\n target.removeEventListener('mobile-open-change', syncTargetState as EventListener);\n };\n mobileSidebarTarget.value = target;\n };\n\n const triggerModeTransition = () => {\n isModeTransitioning.value = true;\n\n if (modeTransitionTimeout != null) clearTimeout(modeTransitionTimeout);\n\n modeTransitionTimeout = setTimeout(() => {\n isModeTransitioning.value = false;\n modeTransitionTimeout = undefined;\n }, 220);\n };\n\n const stopModeWatch = watch(\n computed(() => props.floating.value && props.sticky.value),\n (enabled) => {\n if (!enabled) {\n if (isScrolled.value) isScrolled.value = false;\n\n if (isModeTransitioning.value) isModeTransitioning.value = false;\n\n previousMode = undefined;\n\n if (modeTransitionTimeout != null) {\n clearTimeout(modeTransitionTimeout);\n modeTransitionTimeout = undefined;\n }\n\n return;\n }\n\n resetScrollBase(scrollContainer);\n updateScrolled(scrollContainer);\n\n const currentMode = computeMode();\n\n previousMode = currentMode;\n },\n { immediate: true },\n );\n\n const stopMobileSidebarWatch = watch(\n props['mobile-sidebar'],\n () => {\n resolveMobileSidebarTarget();\n },\n { immediate: true },\n );\n\n const stopModeTransitionWatch = watch(\n computed(() => computeMode()),\n (nextMode) => {\n const comboEnabled = props.floating.value && props.sticky.value;\n\n if (!comboEnabled) {\n previousMode = nextMode ?? undefined;\n\n return;\n }\n\n const next = nextMode ?? undefined;\n\n if (previousMode && next && previousMode !== next) {\n triggerModeTransition();\n }\n\n previousMode = next;\n },\n { immediate: true },\n );\n\n const stopMobileMenuSlotWatch = watch(\n hasMobileMenu,\n (hasContent) => {\n if (!hasContent && isMobileMenuOpen.value) {\n closeMobileMenu();\n }\n },\n { immediate: true },\n );\n const syncMobileMenuContent = () => {\n hasMobileMenu.value = mobileMenuElements.value.some(hasElementContent);\n };\n const stopMobileMenuElementsWatch = watch(mobileMenuElements, syncMobileMenuContent, { immediate: true });\n const mobileMenuContentObserver = new MutationObserver(() => {\n syncMobileMenuContent();\n });\n\n // Parser-created demo content can populate an already-assigned slot wrapper after this\n // custom element connects; `slotchange` alone does not observe that nested content.\n mobileMenuContentObserver.observe(el, { childList: true, subtree: true });\n\n watch(\n props.breakpoint,\n (query) => {\n // Untrack the callback body: the watch already tracks `props.breakpoint` via\n // its internal `read()`. Without untrack, signals read inside (e.g.\n // `mediaMatches` via `syncMobileMode()`) become dependencies of this watch\n // effect. When the sentinel updates `mediaMatches` on a viewport change, the\n // effect re-runs — `EffectNode.run()` disposes the previous scope (killing the\n // mediaHandle and its MediaQueryList listener) but the callback is NOT invoked\n // (source unchanged), so no new handle is created. The navbar is then deaf to\n // further MQ changes and stays stuck in mobile mode after resizing back to\n // desktop.\n untrack(() => {\n mediaCleanup?.();\n mediaCleanup = undefined;\n\n const mediaQuery = String(query ?? '').trim();\n\n maxWidthPx.value = parseMaxWidthPx(mediaQuery);\n mediaMatches.value = false;\n\n const width = readContainerWidth(el);\n\n sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n syncMobileMode();\n\n if (props['container-breakpoints'].value && maxWidthPx.value != null) {\n return;\n }\n\n if (!mediaQuery) {\n return;\n }\n\n try {\n const mediaHandle = createMediaQuery(mediaQuery);\n const syncMedia = (state: typeof mediaHandle.value) => {\n if (state) {\n mediaMatches.value = state.matches;\n syncMobileMode();\n }\n };\n\n syncMedia(mediaHandle.value);\n\n const mediaCleanupFn = watch(mediaHandle, syncMedia);\n mediaCleanup = () => {\n mediaCleanupFn.dispose();\n mediaHandle.dispose();\n };\n } catch (error) {\n if (!(error instanceof SentinelUnavailableError)) throw error;\n }\n });\n },\n { immediate: true },\n );\n\n const stopResizeEffect =\n typeof ResizeObserver === 'function'\n ? (() => {\n const hostSize = createElementSize(el);\n onCleanup(() => hostSize.dispose());\n\n const wrapperEl = el.parentElement;\n const containerEl = resolveContainerElement(el);\n const wrapperSize = wrapperEl ? createElementSize(wrapperEl) : undefined;\n const parentSize = containerEl && containerEl !== wrapperEl ? createElementSize(containerEl) : undefined;\n\n if (wrapperSize) {\n onCleanup(() => wrapperSize.dispose());\n }\n if (parentSize) {\n onCleanup(() => parentSize.dispose());\n }\n\n return watch(\n computed(() => [\n hostSize.value?.width,\n hostSize.value?.height,\n wrapperSize?.value?.width,\n wrapperSize?.value?.height,\n parentSize?.value?.width,\n parentSize?.value?.height,\n ]),\n () => {\n const width = readContainerWidth(el);\n const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n isPreviewMode.value = parentWidth > 0 && parentWidth < window.innerWidth;\n syncMobileMode();\n },\n );\n })()\n : undefined;\n\n return () => {\n stopEscape?.();\n stopScroll?.();\n stopContainerScroll?.();\n stopModeWatch?.dispose();\n stopModeTransitionWatch?.dispose();\n stopMobileMenuSlotWatch?.dispose();\n stopMobileMenuElementsWatch?.dispose();\n stopMobileSidebarWatch?.dispose();\n mobileMenuContentObserver.disconnect();\n mediaCleanup?.();\n mobileSidebarCleanup?.();\n stopResizeEffect?.dispose();\n\n if (modeTransitionTimeout != null) {\n clearTimeout(modeTransitionTimeout);\n modeTransitionTimeout = undefined;\n }\n };\n });\n\n return html`\n <nav part=\"nav\" aria-label=\"${props.label}\">\n <div class=\"navbar\" part=\"bar\">\n <div class=\"navbar-logo\" part=\"logo\" ?hidden=${() => !hasLogo.value}>\n <slot name=\"logo\"></slot>\n </div>\n\n <div class=\"navbar-start\" part=\"start\">\n <slot name=\"start\"></slot>\n </div>\n\n <div class=\"navbar-center\" part=\"center\">\n <slot></slot>\n </div>\n\n <div class=\"navbar-end\" part=\"end\">\n <slot name=\"end\"></slot>\n </div>\n\n <button\n class=\"mobile-toggle\"\n part=\"mobile-toggle\"\n type=\"button\"\n aria-label=\"${() =>\n hasMobileMenu.value\n ? isMobileMenuOpen.value\n ? 'Close navigation menu'\n : 'Open navigation menu'\n : isExternalMobileOpen.value\n ? 'Close navigation menu'\n : 'Open navigation menu'}\"\n aria-controls=\"mobile-menu-panel\"\n aria-expanded=\"${() => String(hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value)}\"\n ?hidden=${() => !isMobile.value || (!hasMobileMenu.value && !mobileSidebarTarget.value)}\n @click=\"${toggleMobileMenu}\">\n <ore-icon\n name=\"${() => ((hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value) ? 'x' : 'menu')}\"\n size=\"18\"\n stroke-width=\"2.5\"\n aria-hidden=\"true\"></ore-icon>\n </button>\n </div>\n\n <div\n id=\"mobile-menu-panel\"\n class=\"mobile-menu-panel\"\n part=\"mobile-menu\"\n role=\"navigation\"\n aria-label=\"${() => `${props.label.value} mobile menu`}\"\n ?hidden=${() => !isMobile.value || !isMobileMenuOpen.value || !hasMobileMenu.value}>\n <slot name=\"mobile-menu\"></slot>\n </div>\n </nav>\n `;\n },\n styles: [\n colorThemeMixin,\n elevationMixin,\n roundedVariantMixin,\n coarsePointerMixin,\n reducedMotionMixin,\n frostVariantMixin('.navbar'),\n navbarStyles,\n ],\n});\n\n/**\n * `ore-navbar-item` — Navigation item for navbar slots.\n *\n * Renders as an anchor when `href` is provided and item is not disabled.\n *\n * @element ore-navbar-item\n *\n * @attr {boolean} active - Marks item as the current active route\n * @attr {boolean} disabled - Disables interaction\n * @attr {string} href - Link URL; renders as `<a>` when set\n * @attr {boolean} icon-only - Compact, symmetric padding for items with no visible label\n * @attr {string} rel - Anchor `rel` attribute (links only)\n * @attr {string} target - Anchor `target` attribute (links only)\n *\n * @slot - Item label\n * @slot icon - Optional icon before the label\n *\n * @part item - Root clickable element (anchor or button).\n * @part item-icon - Leading icon container.\n * @part item-label - Label text container.\n * @part item-end - Trailing content container.\n *\n * @example\n * ```html\n * <ore-navbar-item href=\"/home\">Home</ore-navbar-item>\n * <ore-navbar-item href=\"/docs\" active>Docs</ore-navbar-item>\n * <ore-navbar-item href=\"/about\" target=\"_blank\" rel=\"noopener\">About</ore-navbar-item>\n * <ore-navbar-item disabled>Disabled</ore-navbar-item>\n * <ore-navbar-item icon-only aria-label=\"Search\"><ore-icon slot=\"icon\" name=\"search\"></ore-icon></ore-navbar-item>\n * ```\n */\nexport const NAVBAR_ITEM_TAG = 'ore-navbar-item' as const;\ndefine<OreNavbarItemProps>(NAVBAR_ITEM_TAG, {\n props: {\n active: prop.bool(false),\n disabled: prop.bool(false),\n href: prop.string(),\n 'icon-only': prop.bool(false),\n rel: prop.string(),\n target: prop.string(),\n },\n setup(props) {\n const slots = useSlots();\n\n const hasIcon = () => slots.has('icon').value;\n const hasEnd = () => slots.has('end').value;\n const navbarCtx = inject(NAVBAR_CTX);\n\n bind({\n attr: {\n 'navbar-mobile': () => (navbarCtx?.isMobile.value ? true : undefined),\n 'navbar-mobile-open': () => (navbarCtx?.mobileMenuOpen.value ? true : undefined),\n },\n });\n\n const isLink = () => Boolean(props.href.value) && !props.disabled.value;\n\n // Prevent reverse tabnapping: auto-inject noopener + noreferrer for _blank links.\n const effectiveRel = computed(() => computeSafeRel(props.rel.value, props.target.value));\n\n // Closes the mobile overflow panel when one of its items is activated — otherwise picking a\n // destination (or firing any other action placed in the `mobile-menu` slot) leaves the panel\n // open over the page until the user separately taps the toggle again. Only matters while\n // actually in mobile mode; on desktop `navbarCtx.mobileMenuOpen` is never true to begin with,\n // so `closeMobileMenu()` (idempotent — see `setMobileMenu`'s equality check) is a no-op there.\n const closeMobileMenuIfOpen = (): void => {\n if (navbarCtx?.mobileMenuOpen.value) navbarCtx.closeMobileMenu();\n };\n\n const renderItemContent = () => html`\n <span class=\"item-icon\" part=\"item-icon\" ?hidden=${() => !hasIcon()} aria-hidden=\"true\">\n <slot name=\"icon\"></slot>\n </span>\n <span class=\"item-label\" part=\"item-label\"><slot></slot></span>\n <span class=\"item-end\" part=\"item-end\" ?hidden=${() => !hasEnd()}>\n <slot name=\"end\"></slot>\n </span>\n `;\n\n return html`\n ${() => {\n if (isLink()) {\n return html`\n <a\n class=\"item\"\n part=\"item\"\n href=\"${props.href}\"\n rel=\"${effectiveRel}\"\n target=\"${props.target}\"\n aria-current=\"${() => (props.active.value ? 'page' : null)}\"\n @click=${closeMobileMenuIfOpen}>\n ${renderItemContent()}\n </a>\n `;\n }\n\n if (props.disabled.value) {\n return html`\n <div class=\"item\" part=\"item\" tabindex=\"-1\" aria-disabled=\"true\">${renderItemContent()}</div>\n `;\n }\n\n return html`\n <button class=\"item\" part=\"item\" type=\"button\" @click=${closeMobileMenuIfOpen}>${renderItemContent()}</button>\n `;\n }}\n `;\n },\n styles: [coarsePointerMixin, navbarStyles],\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"navbar.cjs","names":[],"sources":["../src/layout/navbar/navbar.ts"],"sourcesContent":["import {\n bind,\n createContext,\n define,\n getHost,\n html,\n inject,\n onCleanup,\n onMounted,\n prop,\n provide,\n useEmit,\n useSlots,\n} from '@vielzeug/ore';\nimport { computed, fromSubscribable, type Readable, signal, untrack, watch } from '@vielzeug/ripple';\nimport { createElementSize, createMediaQuery, SentinelUnavailableError } from '@vielzeug/sentinel';\n\nimport type { ElevationLevel, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport {\n coarsePointerMixin,\n colorThemeMixin,\n elevationMixin,\n frostVariantMixin,\n reducedMotionMixin,\n roundedVariantMixin,\n} from '../../styles';\nimport { computeSafeRel } from '../../utils';\nimport navbarStyles from './navbar.css?inline';\n\nconst listen = <E extends Event = Event>(\n el: EventTarget | null | undefined,\n name: string,\n handler: (e: E) => void,\n options?: AddEventListenerOptions,\n): (() => void) => {\n if (!el) return () => {};\n\n el.addEventListener(name, handler as EventListener, options);\n\n return () => el.removeEventListener(name, handler as EventListener, options);\n};\n\ntype NavbarMode = 'floating' | 'sticky';\n\nconst hasElementContent = (el: Element): boolean => {\n if (!(el instanceof HTMLElement)) return true;\n\n if (el.tagName.includes('-')) return true;\n\n if (el.childElementCount > 0) return true;\n\n return (el.textContent ?? '').trim().length > 0;\n};\n\nconst parseMaxWidthPx = (query: string | undefined): number | undefined => {\n const value = String(query ?? '').trim();\n\n if (!value) return undefined;\n\n const match = /max-width\\s*:\\s*([0-9]+(?:\\.[0-9]+)?)px/i.exec(value);\n\n if (!match) return undefined;\n\n const parsed = Number.parseFloat(match[1]);\n\n return Number.isFinite(parsed) ? parsed : undefined;\n};\n\nconst resolveContainerElement = (el: HTMLElement): HTMLElement | null => {\n let container = el.parentElement;\n\n while (container?.tagName.toLowerCase() === 'ore-grid-item') {\n container = container.parentElement;\n }\n\n return container;\n};\n\nconst readContainerWidth = (el: HTMLElement): number => {\n const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n if (parentWidth > 0) return parentWidth;\n\n return el.offsetWidth;\n};\n\nconst findScrollContainer = (start: HTMLElement): HTMLElement | null => {\n let current: HTMLElement | null = start.parentElement;\n\n while (current) {\n const styles = window.getComputedStyle(current);\n const overflowY = styles.overflowY;\n\n if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {\n return current;\n }\n\n current = current.parentElement;\n }\n\n return null;\n};\n\n/** Context provided by `ore-navbar` to `ore-navbar-item` children. */\nexport type NavbarContext = {\n closeMobileMenu: () => void;\n isMobile: Readable<boolean>;\n mobileMenuOpen: Readable<boolean>;\n};\n\n/** Injection key for navbar context. */\nexport const NAVBAR_CTX = createContext<NavbarContext>('NavbarContext');\n\n/** Navbar component events */\nexport type OreNavbarEvents = {\n 'mobile-menu-change': { open: boolean };\n};\n\n/** Navbar component element interface */\nexport type NavbarElement = HTMLElement &\n OreNavbarProps & {\n closeMobileMenu(): void;\n openMobileMenu(): void;\n toggleMobileMenu(): void;\n };\n\ntype MobileSidebarElement = HTMLElement & {\n closeMobile?: () => void;\n openMobile?: () => void;\n toggleMobile?: () => void;\n};\n\n/** Navbar component properties */\nexport type OreNavbarProps = {\n /** CSS media query used for mobile layout switching */\n breakpoint?: string;\n /** Theme color */\n color?: ThemeColor;\n /** Evaluate mobile breakpoint against container width only when possible. */\n 'container-breakpoints'?: boolean;\n /** Shadow elevation level (0-5) */\n elevation?: ElevationLevel;\n /** Start as detached floating navbar */\n floating?: boolean;\n /** Accessible nav landmark label */\n label?: string;\n 'menu-close-label'?: string;\n 'menu-open-label'?: string;\n /** CSS selector for an external sidebar toggled by the mobile button */\n 'mobile-sidebar'?: string;\n /** Border radius size */\n rounded?: RoundedSize;\n /** Scroll threshold in px used by floating+sticky transition */\n 'scroll-threshold'?: number;\n /** Stick to top of viewport */\n sticky?: boolean;\n /** Visual style variant */\n variant?: Exclude<VisualVariant, 'ghost' | 'text'>;\n};\n\n/** Navbar item properties */\nexport type OreNavbarItemProps = {\n /** Whether this item represents the current page */\n active?: boolean;\n /** Whether this item is disabled */\n disabled?: boolean;\n /** Link target URL. Renders an anchor when provided. */\n href?: string;\n /**\n * Icon-only mode — hides the (empty) label region and switches to compact, symmetric\n * padding instead of the icon+label layout's wider horizontal padding. Set this whenever\n * the default slot is intentionally left empty (name conveyed via `aria-label` instead),\n * otherwise the empty label still reserves its inter-element gap and the item ends up\n * with lopsided padding around the icon.\n */\n 'icon-only'?: boolean;\n /** Relationship of linked URL (anchor-only) */\n rel?: string;\n /** Browsing context for link (anchor-only) */\n target?: string;\n};\n\n/**\n * `ore-navbar` — Responsive navigation with sticky/floating modes and a mobile overflow panel.\n *\n * @element ore-navbar\n * @element ore-navbar-item - Navigation link or button placed in the default or mobile-menu slot\n *\n * @attr {string} label - Accessible nav landmark label\n * @attr {boolean} sticky - Makes navbar sticky at top\n * @attr {boolean} floating - Makes navbar detached and floating\n * @attr {number} scroll-threshold - Scroll threshold for floating+sticky transition\n * @attr {string} breakpoint - CSS media query used for mobile mode\n * @attr {boolean} container-breakpoints - Evaluates parseable max-width breakpoints against container width\n * @attr {string} variant - Visual variant: 'flat' | 'solid' | 'bordered' | 'outline' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n *\n * @fires mobile-menu-change - Emitted when mobile menu open state changes. detail: { open: boolean }\n *\n * @slot logo - Brand/logo content rendered at the leading edge\n * @slot start - Content rendered in the left/start region\n * @slot - Center navigation content rendered between the start and end regions\n * @slot end - Content rendered in the right/end region\n * @slot mobile-menu - Controls and links rendered inside the mobile overflow panel\n *\n * @cssprop --navbar-height - Navbar bar height\n * @cssprop --navbar-width - Max width of the navbar content\n * @cssprop --navbar-offset - Horizontal offset for floating/sticky positioning\n * @cssprop --navbar-bg - Navbar background color\n * @cssprop --navbar-color - Navbar text color\n * @cssprop --navbar-border-color - Navbar border color\n * @cssprop --navbar-shadow - Navbar box shadow\n * @cssprop --navbar-radius - Border radius (floating/sticky modes)\n * @cssprop --navbar-backdrop-filter - Backdrop filter for blur effect\n * @cssprop --navbar-item-color - Nav item text color\n * @cssprop --navbar-item-hover-color - Nav item hover text color\n * @cssprop --navbar-item-hover-bg - Nav item hover background\n * @cssprop --navbar-item-active-color - Nav item active/current text color\n * @cssprop --navbar-item-active-bg - Nav item active/current background\n * @part nav - Outer navigation landmark\n * @part bar - Main navbar row container\n * @part logo - Logo slot container\n * @part start - Leading action/content region\n * @part center - Center content region\n * @part end - Trailing action/content region\n * @part mobile-toggle - Mobile menu toggle button\n * @part mobile-menu - Mobile overflow panel\n * @part item-icon - Leading icon inside navbar items\n * @part item-label - Label text inside navbar items\n * @part item-end - Trailing content inside navbar items\n * @part item - Clickable navbar item root\n * @example\n * ```html\n * <ore-navbar sticky elevation=\"1\">\n * <a href=\"/\" slot=\"logo\"><strong>MyApp</strong></a>\n * <ore-navbar-item href=\"/dashboard\">Dashboard</ore-navbar-item>\n * <ore-navbar-item href=\"/docs\">Docs</ore-navbar-item>\n * <ore-button slot=\"end\" variant=\"solid\" color=\"primary\" size=\"sm\">Sign in</ore-button>\n * </ore-navbar>\n * ```\n */\nexport const NAVBAR_TAG = 'ore-navbar' as const;\ndefine<OreNavbarProps>(NAVBAR_TAG, {\n props: {\n breakpoint: prop.string('(max-width: 768px)'),\n color: prop.string<ThemeColor>(),\n 'container-breakpoints': prop.bool(false),\n elevation: prop.number<ElevationLevel>(),\n floating: prop.bool(false),\n label: prop.string('Main navigation'),\n 'menu-close-label': prop.string('Close navigation menu'),\n 'menu-open-label': prop.string('Open navigation menu'),\n 'mobile-sidebar': prop.string(),\n rounded: prop.string<RoundedSize>(),\n 'scroll-threshold': prop.number(80),\n sticky: prop.bool(false),\n variant: prop.string<Exclude<VisualVariant, 'ghost' | 'text'>>(),\n },\n setup(props) {\n const el = getHost();\n const emit = useEmit<OreNavbarEvents>();\n const slots = useSlots();\n\n const hasLogo = slots.has('logo');\n const mobileMenuElements = slots.elements('mobile-menu');\n const hasMobileMenu = signal(false);\n const mobileSidebarTarget = signal<MobileSidebarElement | null>(null);\n const isExternalMobileMode = signal(false);\n const isExternalMobileOpen = signal(false);\n const isMobile = signal(false);\n const isMobileMenuOpen = signal(false);\n const isModeTransitioning = signal(false);\n const isScrolled = signal(false);\n const scrollBase = signal(0);\n const mediaMatches = signal(false);\n const sizeMatches = signal(false);\n const maxWidthPx = signal<number | undefined>(parseMaxWidthPx(props.breakpoint.value));\n const isPreviewMode = signal(false);\n\n const getExternalSidebar = () => {\n const selector = String(props['mobile-sidebar'].value ?? '').trim();\n\n if (!selector) return null;\n\n const root = el.getRootNode();\n const scopedTarget =\n root instanceof ShadowRoot || root instanceof Document\n ? (root.querySelector(selector) as MobileSidebarElement | null)\n : null;\n\n return scopedTarget ?? (document.querySelector(selector) as MobileSidebarElement | null);\n };\n\n provide(NAVBAR_CTX, {\n // Wrapped, not passed directly — `closeMobileMenu` (below) isn't defined yet at this point\n // in `setup()`; by the time `ore-navbar-item` actually calls this (a later click), it is.\n closeMobileMenu: () => closeMobileMenu(),\n isMobile: computed(() => isMobile.value) as Readable<boolean>,\n mobileMenuOpen: computed(() => isMobileMenuOpen.value) as Readable<boolean>,\n });\n\n const computeMode = (): NavbarMode | undefined => {\n if (props.floating.value && props.sticky.value) {\n return isScrolled.value ? 'sticky' : 'floating';\n }\n\n if (props.floating.value) return 'floating';\n\n if (props.sticky.value) return 'sticky';\n\n return undefined;\n };\n\n const setMobileMenu = (next: boolean) => {\n const open = Boolean(next);\n\n if (!hasMobileMenu.value) {\n const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n if (target) {\n if (open) {\n target.openMobile?.();\n } else {\n target.closeMobile?.();\n }\n\n return;\n }\n }\n\n if (open && !hasMobileMenu.value) return;\n\n if (isMobileMenuOpen.value === open) return;\n\n isMobileMenuOpen.value = open;\n emit('mobile-menu-change', { open });\n };\n\n const closeMobileMenu = () => setMobileMenu(false);\n const openMobileMenu = () => setMobileMenu(true);\n const toggleMobileMenu = () => {\n if (!hasMobileMenu.value) {\n const target = mobileSidebarTarget.value ?? getExternalSidebar();\n\n if (target) {\n if (typeof target.toggleMobile === 'function') {\n target.toggleMobile();\n } else if (typeof target.openMobile === 'function' && typeof target.closeMobile === 'function') {\n const isOpen = target.hasAttribute('data-mobile-open');\n\n if (isOpen) target.closeMobile();\n else target.openMobile();\n }\n\n return;\n }\n }\n\n setMobileMenu(!isMobileMenuOpen.value);\n };\n\n const syncMobileMode = () => {\n const next =\n (mobileSidebarTarget.value && !hasMobileMenu.value ? isExternalMobileMode.value : false) ||\n mediaMatches.value ||\n (Boolean(props['container-breakpoints'].value) && sizeMatches.value);\n\n isMobile.value = next;\n\n if (!next) closeMobileMenu();\n };\n\n const readScrollOffset = (scrollContainer: HTMLElement | null): number => {\n if (scrollContainer) {\n return scrollContainer.scrollTop || 0;\n }\n\n return window.scrollY || document.documentElement.scrollTop || 0;\n };\n\n const resetScrollBase = (scrollContainer: HTMLElement | null) => {\n scrollBase.value = readScrollOffset(scrollContainer);\n };\n\n const updateScrolled = (scrollContainer: HTMLElement | null = null) => {\n if (!(props.floating.value && props.sticky.value)) {\n if (isScrolled.value) isScrolled.value = false;\n\n return;\n }\n\n const threshold = Math.max(0, Number(props['scroll-threshold'].value) || 0);\n const currentOffset = readScrollOffset(scrollContainer);\n const delta = currentOffset - scrollBase.value;\n\n isScrolled.value = delta > threshold;\n };\n\n bind({\n attr: {\n 'data-mobile': () => (isMobile.value ? true : undefined),\n 'data-mobile-open': () => (isMobile.value && isMobileMenuOpen.value ? true : undefined),\n 'data-mode': () => computeMode() ?? null,\n 'data-mode-transitioning': () => (isModeTransitioning.value ? true : undefined),\n 'data-preview-mode': () => (isPreviewMode.value ? true : undefined),\n 'data-scrolled': () => (props.floating.value && props.sticky.value && isScrolled.value ? true : undefined),\n },\n });\n\n onMounted(() => {\n const navbarEl = el as NavbarElement;\n const scrollContainer = findScrollContainer(el);\n\n navbarEl.closeMobileMenu = closeMobileMenu;\n navbarEl.openMobileMenu = openMobileMenu;\n navbarEl.toggleMobileMenu = toggleMobileMenu;\n\n const stopScroll = listen(\n window,\n 'scroll',\n () => {\n updateScrolled(scrollContainer);\n },\n { passive: true },\n );\n const stopContainerScroll = scrollContainer\n ? listen(\n scrollContainer,\n 'scroll',\n () => {\n updateScrolled(scrollContainer);\n },\n { passive: true },\n )\n : undefined;\n const stopEscape = listen(el, 'keydown', (event: KeyboardEvent) => {\n if (event.key !== 'Escape' || !isMobileMenuOpen.value) return;\n\n closeMobileMenu();\n });\n\n let mediaCleanup: (() => void) | undefined;\n let mobileSidebarCleanup: (() => void) | undefined;\n let modeTransitionTimeout: ReturnType<typeof setTimeout> | undefined;\n let previousMode: NavbarMode | undefined;\n\n const resolveMobileSidebarTarget = () => {\n mobileSidebarCleanup?.();\n mobileSidebarCleanup = undefined;\n mobileSidebarTarget.value = null;\n isExternalMobileMode.value = false;\n isExternalMobileOpen.value = false;\n\n if (!String(props['mobile-sidebar'].value ?? '').trim()) return;\n\n const target = getExternalSidebar();\n\n if (!target) {\n const root = el.getRootNode();\n const discoveryRoot = root instanceof Document || root instanceof ShadowRoot ? root : document;\n const discoveryObserver = new MutationObserver(() => {\n if (getExternalSidebar()) resolveMobileSidebarTarget();\n });\n\n discoveryObserver.observe(discoveryRoot, { childList: true, subtree: true });\n mobileSidebarCleanup = () => discoveryObserver.disconnect();\n\n return;\n }\n\n const syncTargetState = (event?: CustomEvent<{ open: boolean }>) => {\n const hasBottomNav = target.hasAttribute('data-bottom-nav');\n const hasMobileOpen = target.hasAttribute('data-mobile-open');\n\n isExternalMobileMode.value = hasBottomNav;\n isExternalMobileOpen.value = event?.detail ? event.detail.open : hasMobileOpen;\n\n // If the sidebar is reporting it's open, it must be in bottom-nav mode\n // (either natural or forced). We honor this to avoid race conditions\n // where attributes haven't reflected yet.\n if (isExternalMobileOpen.value && !isExternalMobileMode.value) {\n isExternalMobileMode.value = true;\n }\n\n syncMobileMode();\n };\n\n const targetObserver = new MutationObserver(() => {\n syncTargetState();\n });\n\n syncTargetState();\n targetObserver.observe(target, {\n attributeFilter: ['data-bottom-nav', 'data-mobile-open'],\n attributes: true,\n });\n target.addEventListener('mobile-open-change', syncTargetState as EventListener);\n mobileSidebarCleanup = () => {\n targetObserver.disconnect();\n target.removeEventListener('mobile-open-change', syncTargetState as EventListener);\n };\n mobileSidebarTarget.value = target;\n };\n\n const triggerModeTransition = () => {\n isModeTransitioning.value = true;\n\n if (modeTransitionTimeout != null) clearTimeout(modeTransitionTimeout);\n\n modeTransitionTimeout = setTimeout(() => {\n isModeTransitioning.value = false;\n modeTransitionTimeout = undefined;\n }, 220);\n };\n\n const stopModeWatch = watch(\n computed(() => props.floating.value && props.sticky.value),\n (enabled) => {\n if (!enabled) {\n if (isScrolled.value) isScrolled.value = false;\n\n if (isModeTransitioning.value) isModeTransitioning.value = false;\n\n previousMode = undefined;\n\n if (modeTransitionTimeout != null) {\n clearTimeout(modeTransitionTimeout);\n modeTransitionTimeout = undefined;\n }\n\n return;\n }\n\n resetScrollBase(scrollContainer);\n updateScrolled(scrollContainer);\n\n const currentMode = computeMode();\n\n previousMode = currentMode;\n },\n { immediate: true },\n );\n\n const stopMobileSidebarWatch = watch(\n props['mobile-sidebar'],\n () => {\n resolveMobileSidebarTarget();\n },\n { immediate: true },\n );\n\n const stopModeTransitionWatch = watch(\n computed(() => computeMode()),\n (nextMode) => {\n const comboEnabled = props.floating.value && props.sticky.value;\n\n if (!comboEnabled) {\n previousMode = nextMode ?? undefined;\n\n return;\n }\n\n const next = nextMode ?? undefined;\n\n if (previousMode && next && previousMode !== next) {\n triggerModeTransition();\n }\n\n previousMode = next;\n },\n { immediate: true },\n );\n\n const stopMobileMenuSlotWatch = watch(\n hasMobileMenu,\n (hasContent) => {\n if (!hasContent && isMobileMenuOpen.value) {\n closeMobileMenu();\n }\n },\n { immediate: true },\n );\n const syncMobileMenuContent = () => {\n hasMobileMenu.value = mobileMenuElements.value.some(hasElementContent);\n };\n const stopMobileMenuElementsWatch = watch(mobileMenuElements, syncMobileMenuContent, { immediate: true });\n const mobileMenuContentObserver = new MutationObserver(() => {\n syncMobileMenuContent();\n });\n\n // Parser-created demo content can populate an already-assigned slot wrapper after this\n // custom element connects; `slotchange` alone does not observe that nested content.\n mobileMenuContentObserver.observe(el, { childList: true, subtree: true });\n\n watch(\n props.breakpoint,\n (query) => {\n // Untrack the callback body: the watch already tracks `props.breakpoint` via\n // its internal `read()`. Without untrack, signals read inside (e.g.\n // `mediaMatches` via `syncMobileMode()`) become dependencies of this watch\n // effect. When the sentinel updates `mediaMatches` on a viewport change, the\n // effect re-runs — `EffectNode.run()` disposes the previous scope (killing the\n // mediaHandle and its MediaQueryList listener) but the callback is NOT invoked\n // (source unchanged), so no new handle is created. The navbar is then deaf to\n // further MQ changes and stays stuck in mobile mode after resizing back to\n // desktop.\n untrack(() => {\n mediaCleanup?.();\n mediaCleanup = undefined;\n\n const mediaQuery = String(query ?? '').trim();\n\n maxWidthPx.value = parseMaxWidthPx(mediaQuery);\n mediaMatches.value = false;\n\n const width = readContainerWidth(el);\n\n sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n syncMobileMode();\n\n if (props['container-breakpoints'].value && maxWidthPx.value != null) {\n return;\n }\n\n if (!mediaQuery) {\n return;\n }\n\n try {\n const mediaHandle = createMediaQuery(mediaQuery);\n const syncMedia = (state: ReturnType<typeof mediaHandle.getSnapshot>) => {\n if (state) {\n mediaMatches.value = state.matches;\n syncMobileMode();\n }\n };\n\n syncMedia(mediaHandle.getSnapshot());\n\n const mediaCleanupFn = watch(\n fromSubscribable(mediaHandle, { signal: mediaHandle.disposalSignal }),\n syncMedia,\n );\n mediaCleanup = () => {\n mediaCleanupFn.dispose();\n mediaHandle.dispose();\n };\n } catch (error) {\n if (!(error instanceof SentinelUnavailableError)) throw error;\n }\n });\n },\n { immediate: true },\n );\n\n const stopResizeEffect =\n typeof ResizeObserver === 'function'\n ? (() => {\n const hostSize = createElementSize(el);\n onCleanup(() => hostSize.dispose());\n const hostSizeSignal = fromSubscribable(hostSize, { signal: hostSize.disposalSignal });\n\n const wrapperEl = el.parentElement;\n const containerEl = resolveContainerElement(el);\n const wrapperSize = wrapperEl ? createElementSize(wrapperEl) : undefined;\n const parentSize = containerEl && containerEl !== wrapperEl ? createElementSize(containerEl) : undefined;\n\n if (wrapperSize) {\n onCleanup(() => wrapperSize.dispose());\n }\n if (parentSize) {\n onCleanup(() => parentSize.dispose());\n }\n\n const wrapperSizeSignal = wrapperSize\n ? fromSubscribable(wrapperSize, { signal: wrapperSize.disposalSignal })\n : undefined;\n const parentSizeSignal = parentSize\n ? fromSubscribable(parentSize, { signal: parentSize.disposalSignal })\n : undefined;\n\n return watch(\n computed(() => [\n hostSizeSignal.value?.width,\n hostSizeSignal.value?.height,\n wrapperSizeSignal?.value?.width,\n wrapperSizeSignal?.value?.height,\n parentSizeSignal?.value?.width,\n parentSizeSignal?.value?.height,\n ]),\n () => {\n const width = readContainerWidth(el);\n const parentWidth = resolveContainerElement(el)?.clientWidth ?? 0;\n\n sizeMatches.value = width > 0 && maxWidthPx.value != null ? width <= maxWidthPx.value : false;\n isPreviewMode.value = parentWidth > 0 && parentWidth < window.innerWidth;\n syncMobileMode();\n },\n );\n })()\n : undefined;\n\n return () => {\n stopEscape?.();\n stopScroll?.();\n stopContainerScroll?.();\n stopModeWatch?.dispose();\n stopModeTransitionWatch?.dispose();\n stopMobileMenuSlotWatch?.dispose();\n stopMobileMenuElementsWatch?.dispose();\n stopMobileSidebarWatch?.dispose();\n mobileMenuContentObserver.disconnect();\n mediaCleanup?.();\n mobileSidebarCleanup?.();\n stopResizeEffect?.dispose();\n\n if (modeTransitionTimeout != null) {\n clearTimeout(modeTransitionTimeout);\n modeTransitionTimeout = undefined;\n }\n };\n });\n\n return html`\n <nav part=\"nav\" aria-label=\"${props.label}\">\n <div class=\"navbar\" part=\"bar\">\n <div class=\"navbar-logo\" part=\"logo\" ?hidden=${() => !hasLogo.value}>\n <slot name=\"logo\"></slot>\n </div>\n\n <div class=\"navbar-start\" part=\"start\">\n <slot name=\"start\"></slot>\n </div>\n\n <div class=\"navbar-center\" part=\"center\">\n <slot></slot>\n </div>\n\n <div class=\"navbar-end\" part=\"end\">\n <slot name=\"end\"></slot>\n </div>\n\n <button\n class=\"mobile-toggle\"\n part=\"mobile-toggle\"\n type=\"button\"\n aria-label=\"${() =>\n (hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value)\n ? props['menu-close-label'].value\n : props['menu-open-label'].value}\"\n aria-controls=\"mobile-menu-panel\"\n aria-expanded=\"${() => String(hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value)}\"\n ?hidden=${() => !isMobile.value || (!hasMobileMenu.value && !mobileSidebarTarget.value)}\n @click=\"${toggleMobileMenu}\">\n <ore-icon\n name=\"${() => ((hasMobileMenu.value ? isMobileMenuOpen.value : isExternalMobileOpen.value) ? 'x' : 'menu')}\"\n size=\"18\"\n stroke-width=\"2.5\"\n aria-hidden=\"true\"></ore-icon>\n </button>\n </div>\n\n <div\n id=\"mobile-menu-panel\"\n class=\"mobile-menu-panel\"\n part=\"mobile-menu\"\n role=\"navigation\"\n aria-label=\"${() => `${props.label.value} mobile menu`}\"\n ?hidden=${() => !isMobile.value || !isMobileMenuOpen.value || !hasMobileMenu.value}>\n <slot name=\"mobile-menu\"></slot>\n </div>\n </nav>\n `;\n },\n styles: [\n colorThemeMixin,\n elevationMixin,\n roundedVariantMixin,\n coarsePointerMixin,\n reducedMotionMixin,\n frostVariantMixin('.navbar'),\n navbarStyles,\n ],\n});\n\n/**\n * `ore-navbar-item` — Navigation item for navbar slots.\n *\n * Renders as an anchor when `href` is provided and item is not disabled.\n *\n * @element ore-navbar-item\n *\n * @attr {boolean} active - Marks item as the current active route\n * @attr {boolean} disabled - Disables interaction\n * @attr {string} href - Link URL; renders as `<a>` when set\n * @attr {boolean} icon-only - Compact, symmetric padding for items with no visible label\n * @attr {string} rel - Anchor `rel` attribute (links only)\n * @attr {string} target - Anchor `target` attribute (links only)\n *\n * @slot - Item label\n * @slot icon - Optional icon before the label\n *\n * @part item - Root clickable element (anchor or button).\n * @part item-icon - Leading icon container.\n * @part item-label - Label text container.\n * @part item-end - Trailing content container.\n *\n * @example\n * ```html\n * <ore-navbar-item href=\"/home\">Home</ore-navbar-item>\n * <ore-navbar-item href=\"/docs\" active>Docs</ore-navbar-item>\n * <ore-navbar-item href=\"/about\" target=\"_blank\" rel=\"noopener\">About</ore-navbar-item>\n * <ore-navbar-item disabled>Disabled</ore-navbar-item>\n * <ore-navbar-item icon-only aria-label=\"Search\"><ore-icon slot=\"icon\" name=\"search\"></ore-icon></ore-navbar-item>\n * ```\n */\nexport const NAVBAR_ITEM_TAG = 'ore-navbar-item' as const;\ndefine<OreNavbarItemProps>(NAVBAR_ITEM_TAG, {\n props: {\n active: prop.bool(false),\n disabled: prop.bool(false),\n href: prop.string(),\n 'icon-only': prop.bool(false),\n rel: prop.string(),\n target: prop.string(),\n },\n setup(props) {\n const slots = useSlots();\n\n const hasIcon = () => slots.has('icon').value;\n const hasEnd = () => slots.has('end').value;\n const navbarCtx = inject(NAVBAR_CTX);\n\n bind({\n attr: {\n 'navbar-mobile': () => (navbarCtx?.isMobile.value ? true : undefined),\n 'navbar-mobile-open': () => (navbarCtx?.mobileMenuOpen.value ? true : undefined),\n },\n });\n\n const isLink = () => Boolean(props.href.value) && !props.disabled.value;\n\n // Prevent reverse tabnapping: auto-inject noopener + noreferrer for _blank links.\n const effectiveRel = computed(() => computeSafeRel(props.rel.value, props.target.value));\n\n // Closes the mobile overflow panel when one of its items is activated — otherwise picking a\n // destination (or firing any other action placed in the `mobile-menu` slot) leaves the panel\n // open over the page until the user separately taps the toggle again. Only matters while\n // actually in mobile mode; on desktop `navbarCtx.mobileMenuOpen` is never true to begin with,\n // so `closeMobileMenu()` (idempotent — see `setMobileMenu`'s equality check) is a no-op there.\n const closeMobileMenuIfOpen = (): void => {\n if (navbarCtx?.mobileMenuOpen.value) navbarCtx.closeMobileMenu();\n };\n\n const renderItemContent = () => html`\n <span class=\"item-icon\" part=\"item-icon\" ?hidden=${() => !hasIcon()} aria-hidden=\"true\">\n <slot name=\"icon\"></slot>\n </span>\n <span class=\"item-label\" part=\"item-label\"><slot></slot></span>\n <span class=\"item-end\" part=\"item-end\" ?hidden=${() => !hasEnd()}>\n <slot name=\"end\"></slot>\n </span>\n `;\n\n return html`\n ${() => {\n if (isLink()) {\n return html`\n <a\n class=\"item\"\n part=\"item\"\n href=\"${props.href}\"\n rel=\"${effectiveRel}\"\n target=\"${props.target}\"\n aria-current=\"${() => (props.active.value ? 'page' : null)}\"\n @click=${closeMobileMenuIfOpen}>\n ${renderItemContent()}\n </a>\n `;\n }\n\n if (props.disabled.value) {\n return html`\n <div class=\"item\" part=\"item\" tabindex=\"-1\" aria-disabled=\"true\">${renderItemContent()}</div>\n `;\n }\n\n return html`\n <button class=\"item\" part=\"item\" type=\"button\" @click=${closeMobileMenuIfOpen}>${renderItemContent()}</button>\n `;\n }}\n `;\n },\n styles: [coarsePointerMixin, navbarStyles],\n});\n"],"mappings":"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"}
|