@oicl/openbridge-webcomponents 2.0.0-next.117 → 2.0.0-next.119

package/dist/components/navigation-item/navigation-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-item.js","sources":["../../../src/components/navigation-item/navigation-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport compentStyle from './navigation-item.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport '../../icons/icon-arrow-flyout-google.js';\nimport {ObcNavigationMenuVariant} from '../navigation-menu/navigation-menu.js';\nimport {customElement} from '../../decorator.js';\nimport '../tree-navigation-item/tree-navigation-item.js';\nimport {\n  TreeBranchType,\n  TreeTerminalType,\n  type TreeNavigationItemAlerts,\n} from '../tree-navigation-item/tree-navigation-item.js';\n\nenum NavigationItemRole {\n  Button = 'button',\n  MenuItem = 'menuitem',\n}\n\n/**\n * `<obc-navigation-item>` – A navigation menu item component for use in navigation bars, side menus, or toolbars.\n *\n * Displays a selectable navigation option, optionally with an icon and support for different visual variants. Can be used as a link or as a button within navigation menus, supporting both single items and grouped menu structures.\n *\n * Appears as a horizontal or vertical item, with optional icon, label, and flyout indicator for nested or grouped navigation. Designed for use in navigation menus, toolbars, or any UI requiring a consistent, interactive navigation element.\n *\n * ## Features\n * - **Variants:**\n *   - `Full` (default): Standard navigation item with icon (optional), label, and optional flyout indicator for groups.\n *   - `IconOnly`: Displays only the icon, suitable for compact or icon-based navigation menus.\n *   - `IconOnlyLarge`: Larger icon-only variant for prominent navigation actions.\n *   - `Compact`: Smaller, vertically-stacked layout with icon and label, optimized for space-constrained menus.\n * - **Icon Support:**\n *   - Leading icon can be provided via the `icon` slot.\n *   - Icon presence is automatically detected and styled.\n * - **Label:**\n *   - Text label shown unless in icon-only variants.\n * - **Checked State:**\n *   - Indicates the currently selected or active navigation item.\n * - **Group Mode:**\n *   - When `group` is true, displays a flyout indicator (arrow) and supports group selection highlighting.\n * - **Link Support:**\n *   - Can be rendered as a link via the `href` property, or as a button if `href` is not set.\n * - **Accessibility:**\n *   - Uses semantic anchor element for navigation.\n *\n * ## Usage Guidelines\n * Use `obc-navigation-item` for interactive navigation options within menus, toolbars, or navigation drawers.\n * - Ideal for main or secondary navigation, especially where visual consistency and flexible layout are needed.\n * - Use the `Full` variant for standard navigation lists with both icon and label.\n * - Use `IconOnly` or `IconOnlyLarge` for toolbars or sidebars where space is limited or icon-only navigation is preferred.\n * - Use `Compact` for dense menus or when vertical stacking of icon and label is desired.\n * - Set `checked` to highlight the currently active or selected item.\n * - Use `group` and `groupSelected` to indicate grouped navigation and selection within groups.\n * - Provide an icon via the `icon` slot for visual context (e.g., `<obi-placeholder slot=\"icon\"></obi-placeholder>).\n * - Use `href` to make the item a link; omit for button-like behavior.\n * - Use `::part(label)` CSS pseudo-element to style the label.\n *\n * **TODO(designer):** Clarify if there are recommended icon choices or label length constraints for each variant.\n *\n * ## Slots\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | icon      | Always (optional) | Leading icon for the navigation item. Place an icon such as `<obi-placeholder slot=\"icon\"></obi-placeholder>`. |\n *\n * ## Properties and Attributes\n * - `label` (string): The text label for the navigation item. Hidden in icon-only variants.\n * - `href` (string, optional): If set, the item is rendered as a link. If undefined, acts as a button.\n * - `checked` (boolean): Marks the item as selected/active.\n * - `variant` (string): Controls the visual style. One of `Full`, `IconOnly`, `IconOnlyLarge`, or `Compact`.\n * - `group` (boolean): Enables group mode, showing a flyout indicator and supporting group selection.\n * - `groupSelected` (boolean): Highlights the item as selected within a group.\n * - `hasIcon` (boolean): Whether the item has a leading icon.\n *\n * ## Events\n * - `click` – Fired when the navigation item is clicked (either as a link or button).\n *\n * ## Best Practices and Constraints\n * - Only use one navigation item as `checked` at a time within a menu to indicate the current location.\n * - For icon-only variants, ensure the icon clearly represents the navigation action.\n * - Use `group` for items that open submenus or represent grouped navigation.\n * - Avoid long labels in compact or icon-only variants to maintain layout integrity.\n * - For accessibility, provide meaningful labels and icons.\n *\n * ## Example:\n * ```\n * <obc-navigation-item\n *   label=\"Dashboard\"\n *   href=\"/dashboard\"\n *   checked\n *   variant=\"Full\"\n * >\n *   <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-navigation-item>\n * ```\n *\n * @slot icon - Leading icon slot (optional, shown if provided). Set `hasIcon` to `true` to show the icon.\n * @slot trailing-icon - Trailing icon slot (optional, shown if provided). Set `hasTrailingIcon` to `true` to show.\n * @fires {CustomEvent<void>} click - Fired when the navigation item is clicked.\n * @stable\n */\n\n@customElement('obc-navigation-item')\nexport class ObcNavigationItem extends LitElement {\n  /**\n   * The text label displayed for the navigation item.\n   * Hidden in icon-only variants.\n   * @availableWhen variant in [Full, Compact]\n   */\n  @property({type: String}) label = 'Label';\n\n  /**\n   * The URL to navigate to when the item is clicked.\n   * If set, the item is rendered as a link (`<a href=\"...\" />`).\n   * If undefined, acts as a button.\n   */\n  @property({type: String}) href: string | undefined;\n\n  /**\n   * Whether the navigation item is currently selected/active.\n   * Use to indicate the current location or selection.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * Visual variant of the navigation item.\n   * One of `Full` (default), `IconOnly`, `IconOnlyLarge`, or `Compact`.\n   * Controls layout and visibility of icon/label.\n   */\n  @property({type: String}) variant = ObcNavigationMenuVariant.Full;\n\n  /**\n   * Enables group mode for the item, displaying a flyout indicator and supporting group selection.\n   * Use for items that open submenus or represent grouped navigation.\n   */\n  @property({type: Boolean}) group = false;\n\n  /**\n   * Highlights the item as selected within a group.\n   * Only relevant when `group` is true.\n   * @availableWhen group==true\n   */\n  @property({type: Boolean}) groupSelected = false;\n\n  /**\n   * Whether the item has a leading icon.\n   */\n  @property({type: Boolean, reflect: true}) hasIcon = false;\n\n  /** @availableWhen group==false || variant==IconOnly */\n  @property({type: Boolean}) hasTrailingIcon = false;\n\n  /** Set by `obc-navigation-menu` in its Tree variant — renders the row as a tree item. */\n  @property({type: Boolean}) treeMode = false;\n\n  /** Indentation columns for tree mode, assigned by `obc-navigation-menu`. */\n  @property({type: Array}) treeBranches: TreeBranchType[] = [];\n\n  /**\n   * Terminal type for the row in the Tree variant — one of `regular` (default),\n   * `aggregated-header`, or `group-header`. Has no effect in the flat variants.\n   */\n  @property({type: String}) terminalType: string = TreeTerminalType.regular;\n\n  /**\n   * Per-severity alert counts shown as trailing badge(s) (Tree variant only).\n   * Forwarded to the underlying `obc-tree-navigation-item`. See\n   * {@link TreeNavigationItemAlerts}.\n   */\n  @property({type: Object}) alerts?: TreeNavigationItemAlerts;\n\n  @query('a') private anchorElement?: HTMLAnchorElement;\n\n  // In tree mode the row renders an `obc-tree-navigation-item` instead of an `<a>`.\n  @query('obc-tree-navigation-item') private treeItemElement?: HTMLElement;\n\n  /**\n   * @fires {CustomEvent<void>} click - Fired when the navigation item is clicked (either as a link or button).\n   */\n  onClick() {\n    dispatchEvent(new CustomEvent('click'));\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const isMenuItem =\n      this.getAttribute('role') === NavigationItemRole.MenuItem;\n    if (this.href !== undefined && !isMenuItem) return;\n    if (event.key !== 'Enter' && event.key !== ' ') {\n      return;\n    }\n\n    event.preventDefault();\n    this.anchorElement?.click();\n  }\n\n  public override focus(options?: FocusOptions): void {\n    (this.treeItemElement ?? this.anchorElement)?.focus(options);\n  }\n\n  private getItemRole(): NavigationItemRole | undefined {\n    const hostRole = this.getAttribute('role');\n    if (hostRole === NavigationItemRole.MenuItem) {\n      return NavigationItemRole.MenuItem;\n    }\n\n    return this.href === undefined ? NavigationItemRole.Button : undefined;\n  }\n\n  private getItemTabIndex(): number | undefined {\n    const hostTabIndex = this.getAttribute('tabindex');\n    if (hostTabIndex !== null) {\n      const parsedTabIndex = Number(hostTabIndex);\n      return Number.isNaN(parsedTabIndex) ? undefined : parsedTabIndex;\n    }\n\n    return this.href === undefined ? 0 : undefined;\n  }\n\n  override render() {\n    if (this.treeMode) {\n      // Delegate the whole row to the tree item: it owns focus, keyboard\n      // activation, the checked-inert behavior, and href navigation. Forward its\n      // activation as this item's own `click` so selection wiring is unchanged.\n      return html`\n        <obc-tree-navigation-item\n          class=\"tree\"\n          .label=${this.label}\n          .branches=${this.treeBranches}\n          ?checked=${this.checked}\n          .hasLeadingIcon=${this.hasIcon}\n          .href=${this.href}\n          .terminalType=${this.terminalType}\n          .alerts=${this.alerts}\n          @click=${this.onClick}\n        >\n          ${this.hasIcon\n            ? html`<slot name=\"icon\" slot=\"icon\"></slot>`\n            : nothing}\n        </obc-tree-navigation-item>\n      `;\n    }\n\n    const showFlyout =\n      this.group && this.variant !== ObcNavigationMenuVariant.IconOnly;\n    const isCompact = this.variant === ObcNavigationMenuVariant.Compact;\n\n    return html`\n      <a\n        class=\"${classMap({\n          wrapper: true,\n          checked: this.checked,\n          'group-selected': this.groupSelected && this.group,\n          'has-icon': this.hasIcon,\n          [this.variant]: true,\n        })}\"\n        href=${ifDefined(this.href)}\n        @click=${this.onClick}\n        @keydown=${this.handleKeydown}\n        tabindex=${ifDefined(this.getItemTabIndex())}\n        role=${ifDefined(this.getItemRole())}\n      >\n        <div class=\"visible-wrapper\">\n          ${this.hasIcon\n            ? html`<slot name=\"icon\" class=\"icon leading\"></slot>`\n            : nothing}\n          ${![\n            ObcNavigationMenuVariant.IconOnly,\n            ObcNavigationMenuVariant.IconOnlyLarge,\n          ].includes(this.variant)\n            ? html`\n                <span\n                  part=\"label\"\n                  class=${classMap({\n                    label: true,\n                    'label-flyout': showFlyout && !isCompact,\n                  })}\n                >\n                  ${this.label}\n                </span>\n              `\n            : nothing}\n          ${showFlyout\n            ? html`\n                <div class=\"flyout-wrapper\">\n                  <obi-arrow-flyout-google\n                    class=\"icon trailing\"\n                  ></obi-arrow-flyout-google>\n                </div>\n              `\n            : nothing}\n          ${this.hasTrailingIcon && !showFlyout\n            ? html`<slot name=\"trailing-icon\" class=\"icon trailing\"></slot>`\n            : nothing}\n        </div>\n      </a>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-navigation-item': ObcNavigationItem;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"navigation-item.js","sources":["../../../src/components/navigation-item/navigation-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport compentStyle from './navigation-item.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport '../../icons/icon-arrow-flyout-google.js';\nimport {ObcNavigationMenuVariant} from '../navigation-menu/navigation-menu.js';\nimport {customElement} from '../../decorator.js';\nimport '../tree-navigation-item/tree-navigation-item.js';\nimport {\n  TreeBranchType,\n  TreeTerminalType,\n  type TreeNavigationItemAlerts,\n} from '../tree-navigation-item/tree-navigation-item.js';\n\nenum NavigationItemRole {\n  Button = 'button',\n  MenuItem = 'menuitem',\n}\n\n/**\n * `<obc-navigation-item>` – A navigation menu item component for use in navigation bars, side menus, or toolbars.\n *\n * Displays a selectable navigation option, optionally with an icon and support for different visual variants. Can be used as a link or as a button within navigation menus, supporting both single items and grouped menu structures.\n *\n * Appears as a horizontal or vertical item, with optional icon, label, and flyout indicator for nested or grouped navigation. Designed for use in navigation menus, toolbars, or any UI requiring a consistent, interactive navigation element.\n *\n * ## Features\n * - **Variants:**\n *   - `Full` (default): Standard navigation item with icon (optional), label, and optional flyout indicator for groups.\n *   - `IconOnly`: Displays only the icon, suitable for compact or icon-based navigation menus.\n *   - `IconOnlyLarge`: Larger icon-only variant for prominent navigation actions.\n *   - `Compact`: Smaller, vertically-stacked layout with icon and label, optimized for space-constrained menus.\n * - **Icon Support:**\n *   - Leading icon can be provided via the `icon` slot.\n *   - Icon presence is automatically detected and styled.\n * - **Label:**\n *   - Text label shown unless in icon-only variants.\n * - **Checked State:**\n *   - Indicates the currently selected or active navigation item.\n * - **Group Mode:**\n *   - When `group` is true, displays a flyout indicator (arrow) and supports group selection highlighting.\n * - **Link Support:**\n *   - Can be rendered as a link via the `href` property, or as a button if `href` is not set.\n * - **Accessibility:**\n *   - Uses semantic anchor element for navigation.\n *\n * ## Usage Guidelines\n * Use `obc-navigation-item` for interactive navigation options within menus, toolbars, or navigation drawers.\n * - Ideal for main or secondary navigation, especially where visual consistency and flexible layout are needed.\n * - Use the `Full` variant for standard navigation lists with both icon and label.\n * - Use `IconOnly` or `IconOnlyLarge` for toolbars or sidebars where space is limited or icon-only navigation is preferred.\n * - Use `Compact` for dense menus or when vertical stacking of icon and label is desired.\n * - Set `checked` to highlight the currently active or selected item.\n * - Use `group` and `groupSelected` to indicate grouped navigation and selection within groups.\n * - Provide an icon via the `icon` slot for visual context (e.g., `<obi-placeholder slot=\"icon\"></obi-placeholder>).\n * - Use `href` to make the item a link; omit for button-like behavior.\n * - Use `::part(label)` CSS pseudo-element to style the label.\n *\n * **TODO(designer):** Clarify if there are recommended icon choices or label length constraints for each variant.\n *\n * ## Slots\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | icon      | Always (optional) | Leading icon for the navigation item. Place an icon such as `<obi-placeholder slot=\"icon\"></obi-placeholder>`. |\n *\n * ## Properties and Attributes\n * - `label` (string): The text label for the navigation item. Hidden in icon-only variants.\n * - `href` (string, optional): If set, the item is rendered as a link. If undefined, acts as a button.\n * - `checked` (boolean): Marks the item as selected/active.\n * - `variant` (string): Controls the visual style. One of `Full`, `IconOnly`, `IconOnlyLarge`, or `Compact`.\n * - `group` (boolean): Enables group mode, showing a flyout indicator and supporting group selection.\n * - `groupSelected` (boolean): Highlights the item as selected within a group.\n * - `hasIcon` (boolean): Whether the item has a leading icon.\n *\n * ## Events\n * - `click` – Fired when the navigation item is clicked (either as a link or button).\n *\n * ## Best Practices and Constraints\n * - Only use one navigation item as `checked` at a time within a menu to indicate the current location.\n * - For icon-only variants, ensure the icon clearly represents the navigation action.\n * - Use `group` for items that open submenus or represent grouped navigation.\n * - Avoid long labels in compact or icon-only variants to maintain layout integrity.\n * - For accessibility, provide meaningful labels and icons.\n *\n * ## Example:\n * ```\n * <obc-navigation-item\n *   label=\"Dashboard\"\n *   href=\"/dashboard\"\n *   checked\n *   variant=\"Full\"\n * >\n *   <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-navigation-item>\n * ```\n *\n * @slot icon - Leading icon slot (optional, shown if provided). Set `hasIcon` to `true` to show the icon.\n * @slot trailing-icon - Trailing icon slot (optional, shown if provided). Set `hasTrailingIcon` to `true` to show.\n * @fires click - Fired when the navigation item is clicked, either as a link or as a button.\n * @stable\n */\n\n@customElement('obc-navigation-item')\nexport class ObcNavigationItem extends LitElement {\n  /**\n   * The text label displayed for the navigation item.\n   * Hidden in icon-only variants.\n   * @availableWhen variant in [Full, Compact]\n   */\n  @property({type: String}) label = 'Label';\n\n  /**\n   * The URL to navigate to when the item is clicked.\n   * If set, the item is rendered as a link (`<a href=\"...\" />`).\n   * If undefined, acts as a button.\n   */\n  @property({type: String}) href: string | undefined;\n\n  /**\n   * Whether the navigation item is currently selected/active.\n   * Use to indicate the current location or selection.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * Visual variant of the navigation item.\n   * One of `Full` (default), `IconOnly`, `IconOnlyLarge`, or `Compact`.\n   * Controls layout and visibility of icon/label.\n   */\n  @property({type: String}) variant = ObcNavigationMenuVariant.Full;\n\n  /**\n   * Enables group mode for the item, displaying a flyout indicator and supporting group selection.\n   * Use for items that open submenus or represent grouped navigation.\n   */\n  @property({type: Boolean}) group = false;\n\n  /**\n   * Highlights the item as selected within a group.\n   * Only relevant when `group` is true.\n   * @availableWhen group==true\n   */\n  @property({type: Boolean}) groupSelected = false;\n\n  /**\n   * Whether the item has a leading icon.\n   */\n  @property({type: Boolean, reflect: true}) hasIcon = false;\n\n  /** @availableWhen group==false || variant==IconOnly */\n  @property({type: Boolean}) hasTrailingIcon = false;\n\n  /** Set by `obc-navigation-menu` in its Tree variant — renders the row as a tree item. */\n  @property({type: Boolean}) treeMode = false;\n\n  /** Indentation columns for tree mode, assigned by `obc-navigation-menu`. */\n  @property({type: Array}) treeBranches: TreeBranchType[] = [];\n\n  /**\n   * Terminal type for the row in the Tree variant — one of `regular` (default),\n   * `aggregated-header`, or `group-header`. Has no effect in the flat variants.\n   */\n  @property({type: String}) terminalType: string = TreeTerminalType.regular;\n\n  /**\n   * Per-severity alert counts shown as trailing badge(s) (Tree variant only).\n   * Forwarded to the underlying `obc-tree-navigation-item`. See\n   * {@link TreeNavigationItemAlerts}.\n   */\n  @property({type: Object}) alerts?: TreeNavigationItemAlerts;\n\n  @query('a') private anchorElement?: HTMLAnchorElement;\n\n  // In tree mode the row renders an `obc-tree-navigation-item` instead of an `<a>`.\n  @query('obc-tree-navigation-item') private treeItemElement?: HTMLElement;\n\n  private handleKeydown(event: KeyboardEvent) {\n    const isMenuItem =\n      this.getAttribute('role') === NavigationItemRole.MenuItem;\n    if (this.href !== undefined && !isMenuItem) return;\n    if (event.key !== 'Enter' && event.key !== ' ') {\n      return;\n    }\n\n    event.preventDefault();\n    this.anchorElement?.click();\n  }\n\n  public override focus(options?: FocusOptions): void {\n    (this.treeItemElement ?? this.anchorElement)?.focus(options);\n  }\n\n  private getItemRole(): NavigationItemRole | undefined {\n    const hostRole = this.getAttribute('role');\n    if (hostRole === NavigationItemRole.MenuItem) {\n      return NavigationItemRole.MenuItem;\n    }\n\n    return this.href === undefined ? NavigationItemRole.Button : undefined;\n  }\n\n  private getItemTabIndex(): number | undefined {\n    const hostTabIndex = this.getAttribute('tabindex');\n    if (hostTabIndex !== null) {\n      const parsedTabIndex = Number(hostTabIndex);\n      return Number.isNaN(parsedTabIndex) ? undefined : parsedTabIndex;\n    }\n\n    return this.href === undefined ? 0 : undefined;\n  }\n\n  override render() {\n    if (this.treeMode) {\n      // Delegate the whole row to the tree item: it owns focus, keyboard\n      // activation, the checked-inert behavior, and href navigation. Forward its\n      // activation as this item's own `click` so selection wiring is unchanged.\n      return html`\n        <obc-tree-navigation-item\n          class=\"tree\"\n          .label=${this.label}\n          .branches=${this.treeBranches}\n          ?checked=${this.checked}\n          .hasLeadingIcon=${this.hasIcon}\n          .href=${this.href}\n          .terminalType=${this.terminalType}\n          .alerts=${this.alerts}\n        >\n          ${this.hasIcon\n            ? html`<slot name=\"icon\" slot=\"icon\"></slot>`\n            : nothing}\n        </obc-tree-navigation-item>\n      `;\n    }\n\n    const showFlyout =\n      this.group && this.variant !== ObcNavigationMenuVariant.IconOnly;\n    const isCompact = this.variant === ObcNavigationMenuVariant.Compact;\n\n    return html`\n      <a\n        class=\"${classMap({\n          wrapper: true,\n          checked: this.checked,\n          'group-selected': this.groupSelected && this.group,\n          'has-icon': this.hasIcon,\n          [this.variant]: true,\n        })}\"\n        href=${ifDefined(this.href)}\n        @keydown=${this.handleKeydown}\n        tabindex=${ifDefined(this.getItemTabIndex())}\n        role=${ifDefined(this.getItemRole())}\n      >\n        <div class=\"visible-wrapper\">\n          ${this.hasIcon\n            ? html`<slot name=\"icon\" class=\"icon leading\"></slot>`\n            : nothing}\n          ${![\n            ObcNavigationMenuVariant.IconOnly,\n            ObcNavigationMenuVariant.IconOnlyLarge,\n          ].includes(this.variant)\n            ? html`\n                <span\n                  part=\"label\"\n                  class=${classMap({\n                    label: true,\n                    'label-flyout': showFlyout && !isCompact,\n                  })}\n                >\n                  ${this.label}\n                </span>\n              `\n            : nothing}\n          ${showFlyout\n            ? html`\n                <div class=\"flyout-wrapper\">\n                  <obi-arrow-flyout-google\n                    class=\"icon trailing\"\n                  ></obi-arrow-flyout-google>\n                </div>\n              `\n            : nothing}\n          ${this.hasTrailingIcon && !showFlyout\n            ? html`<slot name=\"trailing-icon\" class=\"icon trailing\"></slot>`\n            : nothing}\n        </div>\n      </a>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-navigation-item': ObcNavigationItem;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/navigation-item-group/navigation-item-group.d.ts

@@ -104,7 +104,8 @@ export declare class ObcNavigationItemGroup extends LitElement {
     get expanded(): boolean;
     private onClickGroup;
     /**
-     * @fires open - Opens the flyout panel and emits the `open` event.
+     * Opens the flyout panel and emits the `open` event.
+     * @fires open
      */
     open(): void;
     close(): void;

package/dist/components/navigation-item-group/navigation-item-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-item-group.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item-group/navigation-item-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAC,wBAAwB,EAAC,MAAM,uCAAuC,CAAC;AAG/E,OAAO,iDAAiD,CAAC;AACzD,OAAO,EACL,cAAc,EAEd,KAAK,wBAAwB,EAC9B,MAAM,iDAAiD,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD;;OAEG;IACuB,KAAK,SAAW;IAE1C;;;OAGG;IACuB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnD;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;;OAIG;IACuB,OAAO,EAAE,wBAAwB,CAC3B;IAEhC;;OAEG;IACwB,GAAG,UAAS;IAEZ,OAAO,UAAS;IAE3C,0FAA0F;IAC/D,QAAQ,UAAS;IAE5C,4EAA4E;IACnD,YAAY,EAAE,cAAc,EAAE,CAAM;IAE7D;;;OAGG;IACuB,YAAY,EAAE,MAAM,CAA4B;IAE1E;;;;;OAKG;IACuB,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAE5D,gFAAgF;IACrD,WAAW,UAAS;IAEtC,OAAO,CAAC,aAAa,CAAS;IAKvC,OAAO,CAAC,SAAS,CAAC,CAAc;IAEvB,YAAY;IAMrB,wEAAwE;IACxE,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,OAAO,CAAC,YAAY;IAQpB;;OAEG;IACH,IAAI;IAKJ,KAAK;IAOW,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAI1C,MAAM;IA8Df,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,2BAA2B,EAAE,sBAAsB,CAAC;KACrD;CACF"}
+{"version":3,"file":"navigation-item-group.d.ts","sourceRoot":"","sources":["../../../src/components/navigation-item-group/navigation-item-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAGzD,OAAO,EAAC,wBAAwB,EAAC,MAAM,uCAAuC,CAAC;AAG/E,OAAO,iDAAiD,CAAC;AACzD,OAAO,EACL,cAAc,EAEd,KAAK,wBAAwB,EAC9B,MAAM,iDAAiD,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD;;OAEG;IACuB,KAAK,SAAW;IAE1C;;;OAGG;IACuB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnD;;;OAGG;IACwB,OAAO,UAAS;IAE3C;;;;OAIG;IACuB,OAAO,EAAE,wBAAwB,CAC3B;IAEhC;;OAEG;IACwB,GAAG,UAAS;IAEZ,OAAO,UAAS;IAE3C,0FAA0F;IAC/D,QAAQ,UAAS;IAE5C,4EAA4E;IACnD,YAAY,EAAE,cAAc,EAAE,CAAM;IAE7D;;;OAGG;IACuB,YAAY,EAAE,MAAM,CAA4B;IAE1E;;;;;OAKG;IACuB,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAE5D,gFAAgF;IACrD,WAAW,UAAS;IAEtC,OAAO,CAAC,aAAa,CAAS;IAKvC,OAAO,CAAC,SAAS,CAAC,CAAc;IAEvB,YAAY;IAMrB,wEAAwE;IACxE,IAAW,QAAQ,IAAI,OAAO,CAE7B;IAED,OAAO,CAAC,YAAY;IAQpB;;;OAGG;IACH,IAAI;IAKJ,KAAK;IAOW,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAI1C,MAAM;IA8Df,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,2BAA2B,EAAE,sBAAsB,CAAC;KACrD;CACF"}

package/dist/components/navigation-item-group/navigation-item-group.js

@@ -46,7 +46,8 @@ let ObcNavigationItemGroup = class extends LitElement {
     }
   }
   /**
-   * @fires open - Opens the flyout panel and emits the `open` event.
+   * Opens the flyout panel and emits the `open` event.
+   * @fires open
    */
   open() {
     this.openContainer = true;

package/dist/components/navigation-item-group/navigation-item-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-item-group.js","sources":["../../../src/components/navigation-item-group/navigation-item-group.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './navigation-item-group.css?inline';\nimport {ObcNavigationMenuVariant} from '../navigation-menu/navigation-menu.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport '../tree-navigation-item/tree-navigation-item.js';\nimport {\n  TreeBranchType,\n  TreeTerminalType,\n  type TreeNavigationItemAlerts,\n} from '../tree-navigation-item/tree-navigation-item.js';\n\n/**\n * `<obc-navigation-item-group>` – A collapsible navigation group component for organizing related navigation items under a single expandable label.\n *\n * Appears as a navigation item that, when clicked, reveals a flyout panel containing additional navigation content. Used to group related links or actions in a navigation menu, improving organization and reducing clutter in complex navigation structures.\n *\n * ### Features\n * - **Expandable Group:** Clicking the group label toggles a flyout panel containing child navigation items or custom content.\n * - **Custom Icon Support:** Accepts a custom icon via the `icon` slot, displayed next to the group label.\n * - **Variants:** Supports multiple visual styles via the `variant` property (see `ObcNavigationMenuVariant`), such as full or compact menu modes.\n * - **Checked State:** The group can be marked as checked/selected for highlighting the current section.\n * - **Hug Mode:** When `hug` is true, the flyout panel appears anchored closely to the group label, with compact styling.\n * - **Flyout Panel:** The flyout is positioned adjacent to the group label and adapts its layout based on the `hug` and `variant` settings.\n * - **Keyboard and Mouse Interaction:** The group can be opened or closed by clicking the label; emits an `open` event when expanded.\n *\n * ### Usage Guidelines\n * Use `obc-navigation-item-group` to organize related navigation links or actions under a single expandable section within a navigation menu. Ideal for menus with many items or hierarchical structures, where grouping improves clarity and reduces visual noise. Place `obc-navigation-item` or other navigation-related components inside the group to form the flyout content.\n *\n * - Use the `icon` slot to visually distinguish the group.\n * - Use the `checked` property to indicate the currently active or selected group.\n * - Use the `hug` property for context menus or compact flyouts that should appear tightly anchored to the group label.\n * - Avoid nesting too many groups for better usability.\n *\n * **TODO(designer):** Clarify if there are recommended maximum numbers of items per group, and if keyboard navigation/focus management has specific requirements.\n *\n * ### Slots\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | icon      | Always (optional) | Custom icon displayed next to the group label. |\n * | (default) | Always           | Content of the flyout panel (typically navigation items or custom content). |\n *\n * ### Events\n * - `open` – Fired when the group is expanded and the flyout panel is shown.\n *\n * ### Best Practices and Constraints\n * - Only one navigation group should be open at a time in a given navigation menu for clarity.\n * - Place only navigation-related items in the flyout for consistency.\n * - For accessibility, ensure the group label clearly describes the grouped content.\n *\n * ### Example:\n * ```html\n * <obc-navigation-item-group label=\"Settings\">\n *   <obi-settings slot=\"icon\"></obi-settings>\n *   <obc-navigation-item label=\"Profile\"></obc-navigation-item>\n *   <obc-navigation-item label=\"Security\"></obc-navigation-item>\n * </obc-navigation-item-group>\n * ```\n *\n * @slot icon - Custom icon displayed next to the group label.\n * @slot - Default slot for flyout content (typically navigation items).\n * @fires {CustomEvent<void>} open - When the group is expanded and the flyout is shown.\n */\n@customElement('obc-navigation-item-group')\nexport class ObcNavigationItemGroup extends LitElement {\n  /**\n   * The label text displayed for the navigation group.\n   */\n  @property({type: String}) label = 'Label';\n\n  /**\n   * Optional URL to navigate to when the group label is clicked.\n   * If set, clicking the group label will navigate to this URL.\n   */\n  @property({type: String}) href: string | undefined;\n\n  /**\n   * Whether the group is currently checked/selected.\n   * Use to highlight the group as active.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * Visual variant of the navigation group.\n   * Accepts values from `ObcNavigationMenuVariant` (e.g., 'full', 'compact').\n   * Controls the styling and layout of the group and its flyout.\n   */\n  @property({type: String}) variant: ObcNavigationMenuVariant =\n    ObcNavigationMenuVariant.Full;\n\n  /**\n   * If true, the flyout panel appears tightly anchored to the group label with compact styling.\n   */\n  @property({type: Boolean}) hug = false;\n\n  @property({type: Boolean}) hasIcon = false;\n\n  /** Set by `obc-navigation-menu` in its Tree variant — renders the group as a tree row. */\n  @property({type: Boolean}) treeMode = false;\n\n  /** Indentation columns for tree mode, assigned by `obc-navigation-menu`. */\n  @property({type: Array}) treeBranches: TreeBranchType[] = [];\n\n  /**\n   * Terminal type for the group header in the Tree variant — one of `regular`\n   * (default), `aggregated-header`, or `group-header`. No effect in flat variants.\n   */\n  @property({type: String}) terminalType: string = TreeTerminalType.regular;\n\n  /**\n   * Per-severity alert counts shown as trailing badge(s) on the group header\n   * (Tree variant only). Forwarded to the underlying `obc-tree-navigation-item`;\n   * typically `{combine: true, ...}` so the header totals the rows beneath it.\n   * See {@link TreeNavigationItemAlerts}.\n   */\n  @property({type: Object}) alerts?: TreeNavigationItemAlerts;\n\n  /** Whether the group starts expanded. Useful for trees that open by default. */\n  @property({type: Boolean}) defaultOpen = false;\n\n  @state() private openContainer = false;\n\n  // Flat mode renders an `obc-navigation-item` header; tree mode renders an\n  // `obc-tree-navigation-item`. Match whichever is present so `focus()` works in both.\n  @query('obc-navigation-item, obc-tree-navigation-item')\n  private groupItem?: HTMLElement;\n\n  override firstUpdated() {\n    if (this.defaultOpen) {\n      this.openContainer = true;\n    }\n  }\n\n  /** Whether the group is currently open (its children are disclosed). */\n  public get expanded(): boolean {\n    return this.openContainer;\n  }\n\n  private onClickGroup() {\n    if (this.openContainer) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  /**\n   * @fires open - Opens the flyout panel and emits the `open` event.\n   */\n  open() {\n    this.openContainer = true;\n    this.dispatchEvent(new CustomEvent('open'));\n  }\n\n  close() {\n    this.openContainer = false;\n    this.querySelectorAll('obc-navigation-item-group').forEach((item) => {\n      item.close();\n    });\n  }\n\n  public override focus(options?: FocusOptions): void {\n    this.groupItem?.focus(options);\n  }\n\n  override render() {\n    if (this.treeMode) {\n      return html`\n        <obc-tree-navigation-item\n          part=\"header\"\n          .label=${this.label}\n          .branches=${this.treeBranches}\n          expandable\n          ?expanded=${this.openContainer}\n          ?checked=${this.checked}\n          .hasLeadingIcon=${this.hasIcon}\n          .terminalType=${this.terminalType}\n          .alerts=${this.expanded ? undefined : this.alerts}\n          @expand-toggle=${this.onClickGroup}\n        >\n          ${this.hasIcon\n            ? html`<slot name=\"icon\" slot=\"icon\"></slot>`\n            : nothing}\n        </obc-tree-navigation-item>\n        <div part=\"children\" role=\"group\" ?hidden=${!this.openContainer}>\n          <slot></slot>\n        </div>\n      `;\n    }\n\n    return html`\n      <obc-navigation-item\n        @click=${this.onClickGroup}\n        .checked=${this.checked}\n        .groupSelected=${this.openContainer}\n        .href=${this.href}\n        .label=${this.label}\n        .variant=${this.variant}\n        group\n        id=\"group-item\"\n        ?hasIcon=${this.hasIcon}\n      >\n        ${this.hasIcon ? html`<slot name=\"icon\" slot=\"icon\"></slot>` : nothing}\n      </obc-navigation-item>\n      <div\n        part=\"flyout\"\n        id=\"flyout-wrapper\"\n        class=${classMap({\n          hug: this.hug,\n          [this.variant]: true,\n          open: this.openContainer,\n        })}\n      >\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n      <div\n        class=${classMap({\n          shadow: true,\n          open: this.openContainer,\n          hug: this.hug,\n        })}\n      ></div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-navigation-item-group': ObcNavigationItemGroup;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"navigation-item-group.js","sources":["../../../src/components/navigation-item-group/navigation-item-group.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './navigation-item-group.css?inline';\nimport {ObcNavigationMenuVariant} from '../navigation-menu/navigation-menu.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport '../tree-navigation-item/tree-navigation-item.js';\nimport {\n  TreeBranchType,\n  TreeTerminalType,\n  type TreeNavigationItemAlerts,\n} from '../tree-navigation-item/tree-navigation-item.js';\n\n/**\n * `<obc-navigation-item-group>` – A collapsible navigation group component for organizing related navigation items under a single expandable label.\n *\n * Appears as a navigation item that, when clicked, reveals a flyout panel containing additional navigation content. Used to group related links or actions in a navigation menu, improving organization and reducing clutter in complex navigation structures.\n *\n * ### Features\n * - **Expandable Group:** Clicking the group label toggles a flyout panel containing child navigation items or custom content.\n * - **Custom Icon Support:** Accepts a custom icon via the `icon` slot, displayed next to the group label.\n * - **Variants:** Supports multiple visual styles via the `variant` property (see `ObcNavigationMenuVariant`), such as full or compact menu modes.\n * - **Checked State:** The group can be marked as checked/selected for highlighting the current section.\n * - **Hug Mode:** When `hug` is true, the flyout panel appears anchored closely to the group label, with compact styling.\n * - **Flyout Panel:** The flyout is positioned adjacent to the group label and adapts its layout based on the `hug` and `variant` settings.\n * - **Keyboard and Mouse Interaction:** The group can be opened or closed by clicking the label; emits an `open` event when expanded.\n *\n * ### Usage Guidelines\n * Use `obc-navigation-item-group` to organize related navigation links or actions under a single expandable section within a navigation menu. Ideal for menus with many items or hierarchical structures, where grouping improves clarity and reduces visual noise. Place `obc-navigation-item` or other navigation-related components inside the group to form the flyout content.\n *\n * - Use the `icon` slot to visually distinguish the group.\n * - Use the `checked` property to indicate the currently active or selected group.\n * - Use the `hug` property for context menus or compact flyouts that should appear tightly anchored to the group label.\n * - Avoid nesting too many groups for better usability.\n *\n * **TODO(designer):** Clarify if there are recommended maximum numbers of items per group, and if keyboard navigation/focus management has specific requirements.\n *\n * ### Slots\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | icon      | Always (optional) | Custom icon displayed next to the group label. |\n * | (default) | Always           | Content of the flyout panel (typically navigation items or custom content). |\n *\n * ### Events\n * - `open` – Fired when the group is expanded and the flyout panel is shown.\n *\n * ### Best Practices and Constraints\n * - Only one navigation group should be open at a time in a given navigation menu for clarity.\n * - Place only navigation-related items in the flyout for consistency.\n * - For accessibility, ensure the group label clearly describes the grouped content.\n *\n * ### Example:\n * ```html\n * <obc-navigation-item-group label=\"Settings\">\n *   <obi-settings slot=\"icon\"></obi-settings>\n *   <obc-navigation-item label=\"Profile\"></obc-navigation-item>\n *   <obc-navigation-item label=\"Security\"></obc-navigation-item>\n * </obc-navigation-item-group>\n * ```\n *\n * @slot icon - Custom icon displayed next to the group label.\n * @slot - Default slot for flyout content (typically navigation items).\n * @fires {CustomEvent<void>} open - When the group is expanded and the flyout is shown.\n */\n@customElement('obc-navigation-item-group')\nexport class ObcNavigationItemGroup extends LitElement {\n  /**\n   * The label text displayed for the navigation group.\n   */\n  @property({type: String}) label = 'Label';\n\n  /**\n   * Optional URL to navigate to when the group label is clicked.\n   * If set, clicking the group label will navigate to this URL.\n   */\n  @property({type: String}) href: string | undefined;\n\n  /**\n   * Whether the group is currently checked/selected.\n   * Use to highlight the group as active.\n   */\n  @property({type: Boolean}) checked = false;\n\n  /**\n   * Visual variant of the navigation group.\n   * Accepts values from `ObcNavigationMenuVariant` (e.g., 'full', 'compact').\n   * Controls the styling and layout of the group and its flyout.\n   */\n  @property({type: String}) variant: ObcNavigationMenuVariant =\n    ObcNavigationMenuVariant.Full;\n\n  /**\n   * If true, the flyout panel appears tightly anchored to the group label with compact styling.\n   */\n  @property({type: Boolean}) hug = false;\n\n  @property({type: Boolean}) hasIcon = false;\n\n  /** Set by `obc-navigation-menu` in its Tree variant — renders the group as a tree row. */\n  @property({type: Boolean}) treeMode = false;\n\n  /** Indentation columns for tree mode, assigned by `obc-navigation-menu`. */\n  @property({type: Array}) treeBranches: TreeBranchType[] = [];\n\n  /**\n   * Terminal type for the group header in the Tree variant — one of `regular`\n   * (default), `aggregated-header`, or `group-header`. No effect in flat variants.\n   */\n  @property({type: String}) terminalType: string = TreeTerminalType.regular;\n\n  /**\n   * Per-severity alert counts shown as trailing badge(s) on the group header\n   * (Tree variant only). Forwarded to the underlying `obc-tree-navigation-item`;\n   * typically `{combine: true, ...}` so the header totals the rows beneath it.\n   * See {@link TreeNavigationItemAlerts}.\n   */\n  @property({type: Object}) alerts?: TreeNavigationItemAlerts;\n\n  /** Whether the group starts expanded. Useful for trees that open by default. */\n  @property({type: Boolean}) defaultOpen = false;\n\n  @state() private openContainer = false;\n\n  // Flat mode renders an `obc-navigation-item` header; tree mode renders an\n  // `obc-tree-navigation-item`. Match whichever is present so `focus()` works in both.\n  @query('obc-navigation-item, obc-tree-navigation-item')\n  private groupItem?: HTMLElement;\n\n  override firstUpdated() {\n    if (this.defaultOpen) {\n      this.openContainer = true;\n    }\n  }\n\n  /** Whether the group is currently open (its children are disclosed). */\n  public get expanded(): boolean {\n    return this.openContainer;\n  }\n\n  private onClickGroup() {\n    if (this.openContainer) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  /**\n   * Opens the flyout panel and emits the `open` event.\n   * @fires open\n   */\n  open() {\n    this.openContainer = true;\n    this.dispatchEvent(new CustomEvent('open'));\n  }\n\n  close() {\n    this.openContainer = false;\n    this.querySelectorAll('obc-navigation-item-group').forEach((item) => {\n      item.close();\n    });\n  }\n\n  public override focus(options?: FocusOptions): void {\n    this.groupItem?.focus(options);\n  }\n\n  override render() {\n    if (this.treeMode) {\n      return html`\n        <obc-tree-navigation-item\n          part=\"header\"\n          .label=${this.label}\n          .branches=${this.treeBranches}\n          expandable\n          ?expanded=${this.openContainer}\n          ?checked=${this.checked}\n          .hasLeadingIcon=${this.hasIcon}\n          .terminalType=${this.terminalType}\n          .alerts=${this.expanded ? undefined : this.alerts}\n          @expand-toggle=${this.onClickGroup}\n        >\n          ${this.hasIcon\n            ? html`<slot name=\"icon\" slot=\"icon\"></slot>`\n            : nothing}\n        </obc-tree-navigation-item>\n        <div part=\"children\" role=\"group\" ?hidden=${!this.openContainer}>\n          <slot></slot>\n        </div>\n      `;\n    }\n\n    return html`\n      <obc-navigation-item\n        @click=${this.onClickGroup}\n        .checked=${this.checked}\n        .groupSelected=${this.openContainer}\n        .href=${this.href}\n        .label=${this.label}\n        .variant=${this.variant}\n        group\n        id=\"group-item\"\n        ?hasIcon=${this.hasIcon}\n      >\n        ${this.hasIcon ? html`<slot name=\"icon\" slot=\"icon\"></slot>` : nothing}\n      </obc-navigation-item>\n      <div\n        part=\"flyout\"\n        id=\"flyout-wrapper\"\n        class=${classMap({\n          hug: this.hug,\n          [this.variant]: true,\n          open: this.openContainer,\n        })}\n      >\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n      <div\n        class=${classMap({\n          shadow: true,\n          open: this.openContainer,\n          hug: this.hug,\n        })}\n      ></div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-navigation-item-group': ObcNavigationItemGroup;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/notification-button/notification-button.d.ts

@@ -143,7 +143,7 @@ export declare class ObcNotificationButton extends LitElement {
     /**
      * Handles click events on the button and dispatches the `obc-click` custom event.
      *
-     * @fires {CustomEvent<NotificationButtonClickEvent>} obc-click - Fired with the current count and new active state.
+     * @fires obc-click
      */
     private handleClick;
     static styles: import('lit').CSSResult;

package/dist/components/notification-button/notification-button.js

@@ -73,7 +73,7 @@ let ObcNotificationButton = class extends LitElement {
   /**
    * Handles click events on the button and dispatches the `obc-click` custom event.
    *
-   * @fires {CustomEvent<NotificationButtonClickEvent>} obc-click - Fired with the current count and new active state.
+   * @fires obc-click
    */
   handleClick() {
     const event = new CustomEvent("obc-click", {

package/dist/components/notification-button/notification-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-button.js","sources":["../../../src/components/notification-button/notification-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport componentStyle from './notification-button.css?inline';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-notification.js';\nimport '../../icons/icon-notification-filled.js';\n\n/**\n * Defines the available visual styles for `<obc-notification-button>`.\n *\n * - `Flat`: Minimal, icon-only style. Counter is not shown, regardless of `count` or `showCount`.\n * - `Normal`: Standard notification button with optional counter badge. Requires `isActive` to be true to apply.\n * - `Enhanced`: Emphasized notification button with distinct background and counter styling. Requires `isActive` to be true to apply.\n *\n * The style affects both the button's appearance and whether the notification count is displayed.\n */\nexport enum NotificationButtonStyle {\n  Flat = 'flat',\n  Normal = 'normal',\n  Enhanced = 'enhanced',\n}\n\n/**\n * Payload for the `obc-click` event dispatched by `<obc-notification-button>`.\n *\n * - `count`: The current notification count.\n * - `isActive`: The new active state after the button is clicked.\n */\nexport interface NotificationButtonClickEvent {\n  count: number;\n  isActive: boolean;\n}\n\n/**\n * `<obc-notification-button>` – Icon button for accessing notifications, optionally displaying a counter badge.\n *\n * This component provides a compact, interactive button for surfacing notification status and counts. It supports several visual styles to adapt to different UI contexts, and can display a badge with the number of unread notifications when appropriate.\n *\n * Appears as an icon-only button by default, with optional counter and active state styling. Designed for use in toolbars, headers, or anywhere a notification indicator is needed.\n *\n * ## Features\n * - **Visual Styles:**\n *   - **Flat:** Minimal icon-only button. Counter is never shown, regardless of `count` or `showCount`.\n *   - **Normal:** Standard notification button. Counter badge appears if `showCount` is true and `isActive` is true.\n *   - **Enhanced:** Emphasized style with background and accent color. Counter badge appears if `showCount` is true and `isActive` is true.\n * - **Active State:**\n *   - When `isActive` is true, the button uses the filled notification icon and applies the selected style (`Normal` or `Enhanced`).\n *   - When inactive, the button uses the outlined notification icon and always appears in `Flat` style.\n * - **Notification Counter:**\n *   - Shows a badge with the current `count` if `showCount` is true and style is `Normal` or `Enhanced` and `isActive` is true.\n *   - Counter is hidden in `Flat` style, even if `showCount` is true.\n * - **Custom Icon Support:**\n *   - Developers can supply a custom icon via the `icon` slot. Defaults to notification icons if slot is empty.\n * - **Accessibility:**\n *   - Uses `aria-label` for screen readers, including the count if visible.\n *   - `aria-pressed` reflects the active state.\n *\n * ## Usage Guidelines\n * Use `<obc-notification-button>` to provide a prominent, interactive entry point for notifications in an application. It is ideal for header bars, navigation panels, or any location where users need to be alerted to new activity or messages.\n *\n * - Use the `Flat` style for minimal, unobtrusive notification indicators.\n * - Use `Normal` or `Enhanced` styles when you want to emphasize the presence of new notifications, especially when the button is active.\n * - Show the counter badge only when it is important to indicate the number of unread notifications; otherwise, keep it hidden for a cleaner look.\n * - The button does not manage notification state internally; it is up to the parent application to update `count` and `isActive` as needed.\n *\n * **TODO(designer):** Clarify recommended scenarios for using `Normal` vs. `Enhanced` styles, and any design guidelines for when to show the counter.\n *\n * ## Slots\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------|----------------|---------|\n * | `icon`    | Always (optional) | Custom icon to display instead of the default notification icon. |\n *\n * ## Events\n * - `obc-click` – Fired when the button is clicked. Event detail includes the current `count` and the new `isActive` state.\n *\n * ## Example\n *\n * ```html\n * <obc-notification-button\n *   buttonStyle=\"normal\"\n *   count=\"5\"\n *   showCount\n *   isActive\n *   ariaLabel=\"Notifications\"\n * ></obc-notification-button>\n * ```\n *\n * In this example, the button appears in the normal style, is active, and displays a counter badge with the value 5.\n *\n * @slot icon - Custom icon to display in place of the default notification icon.\n * @fires {CustomEvent<NotificationButtonClickEvent>} obc-click - Fired when the button is clicked, with the current count and new active state.\n * @stable\n */\n@customElement('obc-notification-button')\nexport class ObcNotificationButton extends LitElement {\n  /**\n   * Visual style of the notification button.\n   *\n   * - `flat`: Minimal icon-only style. Counter is never shown.\n   * - `normal`: Standard notification button. Counter badge appears if `showCount` is true and `isActive` is true.\n   * - `enhanced`: Emphasized style with background and accent color. Counter badge appears if `showCount` is true and `isActive` is true.\n   *\n   * Defaults to `flat`.\n   *\n   * @availableWhen isActive==true\n   */\n  @property({type: String}) buttonStyle: NotificationButtonStyle =\n    NotificationButtonStyle.Flat;\n\n  /**\n   * Number of notifications to display in the counter badge.\n   *\n   * Only shown if `showCount` is true, `isActive` is true, and `buttonStyle` is `normal` or `enhanced`.\n   * Ignored in `flat` style.\n   *\n   * Defaults to 0.\n   *\n   * @availableWhen isActive==true && showCount==true && buttonStyle in [Normal, Enhanced]\n   */\n  @property({type: Number}) count = 0;\n\n  /**\n   * Whether to display the notification count badge.\n   *\n   * If true, and the style is `normal` or `enhanced` and `isActive` is true, the counter badge is shown.\n   * Has no effect in `flat` style.\n   *\n   * Defaults to false.\n   *\n   * @availableWhen isActive==true && buttonStyle in [Normal, Enhanced]\n   */\n  @property({type: Boolean}) showCount = false;\n\n  /**\n   * Whether the button is in the active (selected) state.\n   *\n   * When true, the button uses the filled notification icon and applies the selected style (`normal` or `enhanced`).\n   * When false, the button always appears in `flat` style with the outlined icon.\n   *\n   * Defaults to false.\n   */\n  @property({type: Boolean}) isActive = false;\n\n  /**\n   * Accessibility label for the button.\n   *\n   * Used as the `aria-label` attribute for screen readers. If the counter is visible, the label will include the count (e.g., \"Notifications, 5 new\").\n   *\n   * Defaults to \"Notifications\".\n   */\n  @property({type: String}) override ariaLabel = 'Notifications';\n\n  override render() {\n    const useNormal =\n      this.isActive && this.buttonStyle === NotificationButtonStyle.Normal;\n    const useEnhanced =\n      this.isActive && this.buttonStyle === NotificationButtonStyle.Enhanced;\n    const useFlat =\n      this.buttonStyle === NotificationButtonStyle.Flat ||\n      (!useNormal && !useEnhanced);\n\n    const hasCounter = (useNormal || useEnhanced) && this.showCount;\n\n    const wrapperClasses = {\n      wrapper: true,\n      'is-active': this.isActive,\n      'has-counter': hasCounter,\n      flat: useFlat,\n      normal: useNormal,\n      enhanced: useEnhanced,\n    };\n\n    const visibleWrapperClasses = {\n      'visible-wrapper': true,\n    };\n\n    return html`\n      <button\n        class=\"${classMap(wrapperClasses)}\"\n        @click=\"${this.handleClick}\"\n        aria-label=\"${this.ariaLabel}${hasCounter ? `, ${this.count} new` : ''}\"\n        aria-pressed=\"${this.isActive}\"\n        role=\"button\"\n        type=\"button\"\n      >\n        <div class=\"${classMap(visibleWrapperClasses)}\">\n          <div class=\"icon-container\">\n            <slot name=\"icon\"> ${this.renderDefaultIcon()} </slot>\n          </div>\n          ${hasCounter\n            ? html` <span class=\"count-label\">${this.count}</span> `\n            : nothing}\n        </div>\n      </button>\n    `;\n  }\n\n  private renderDefaultIcon() {\n    if (this.isActive) {\n      return html`<obi-notification-filled></obi-notification-filled>`;\n    }\n    return html`<obi-notification></obi-notification>`;\n  }\n\n  /**\n   * Handles click events on the button and dispatches the `obc-click` custom event.\n   *\n   * @fires {CustomEvent<NotificationButtonClickEvent>} obc-click - Fired with the current count and new active state.\n   */\n  private handleClick() {\n    const event = new CustomEvent<NotificationButtonClickEvent>('obc-click', {\n      detail: {\n        count: this.count,\n        isActive: !this.isActive,\n      },\n      composed: true,\n      bubbles: true,\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-notification-button': ObcNotificationButton;\n  }\n}\n"],"names":["NotificationButtonStyle"],"mappings":";;;;;;;;;;;;;;;;;AAiBO,IAAK,4CAAAA,6BAAL;AACLA,2BAAA,MAAA,IAAO;AACPA,2BAAA,QAAA,IAAS;AACTA,2BAAA,UAAA,IAAW;AAHD,SAAAA;AAAA,GAAA,2BAAA,CAAA,CAAA;AA+EL,IAAM,wBAAN,cAAoC,WAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA;AAYqB,SAAA,cACxB;AAYwB,SAAA,QAAQ;AAYP,SAAA,YAAY;AAUZ,SAAA,WAAW;AASZ,SAAS,YAAY;AAAA,EAAA;AAAA,EAEtC,SAAS;AAChB,UAAM,YACJ,KAAK,YAAY,KAAK,gBAAgB;AACxC,UAAM,cACJ,KAAK,YAAY,KAAK,gBAAgB;AACxC,UAAM,UACJ,KAAK,gBAAgB,UACpB,CAAC,aAAa,CAAC;AAElB,UAAM,cAAc,aAAa,gBAAgB,KAAK;AAEtD,UAAM,iBAAiB;AAAA,MACrB,SAAS;AAAA,MACT,aAAa,KAAK;AAAA,MAClB,eAAe;AAAA,MACf,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,UAAU;AAAA,IAAA;AAGZ,UAAM,wBAAwB;AAAA,MAC5B,mBAAmB;AAAA,IAAA;AAGrB,WAAO;AAAA;AAAA,iBAEM,SAAS,cAAc,CAAC;AAAA,kBACvB,KAAK,WAAW;AAAA,sBACZ,KAAK,SAAS,GAAG,aAAa,KAAK,KAAK,KAAK,SAAS,EAAE;AAAA,wBACtD,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,sBAIf,SAAS,qBAAqB,CAAC;AAAA;AAAA,iCAEpB,KAAK,mBAAmB;AAAA;AAAA,YAE7C,aACE,kCAAkC,KAAK,KAAK,aAC5C,OAAO;AAAA;AAAA;AAAA;AAAA,EAInB;AAAA,EAEQ,oBAAoB;AAC1B,QAAI,KAAK,UAAU;AACjB,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,cAAc;AACpB,UAAM,QAAQ,IAAI,YAA0C,aAAa;AAAA,MACvE,QAAQ;AAAA,QACN,OAAO,KAAK;AAAA,QACZ,UAAU,CAAC,KAAK;AAAA,MAAA;AAAA,MAElB,UAAU;AAAA,MACV,SAAS;AAAA,IAAA,CACV;AAED,SAAK,cAAc,KAAK;AAAA,EAC1B;AAGF;AAjIa,sBAgIK,SAAS,UAAU,cAAc;AApHvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAZb,sBAYe,WAAA,eAAA,CAAA;AAaA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAzBb,sBAyBe,WAAA,SAAA,CAAA;AAYC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GArCd,sBAqCgB,WAAA,aAAA,CAAA;AAUA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA/Cd,sBA+CgB,WAAA,YAAA,CAAA;AASQ,gBAAA;AAAA,EAAlC,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAxDb,sBAwDwB,WAAA,aAAA,CAAA;AAxDxB,wBAAN,gBAAA;AAAA,EADN,cAAc,yBAAyB;AAAA,GAC3B,qBAAA;"}
+{"version":3,"file":"notification-button.js","sources":["../../../src/components/notification-button/notification-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport componentStyle from './notification-button.css?inline';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-notification.js';\nimport '../../icons/icon-notification-filled.js';\n\n/**\n * Defines the available visual styles for `<obc-notification-button>`.\n *\n * - `Flat`: Minimal, icon-only style. Counter is not shown, regardless of `count` or `showCount`.\n * - `Normal`: Standard notification button with optional counter badge. Requires `isActive` to be true to apply.\n * - `Enhanced`: Emphasized notification button with distinct background and counter styling. Requires `isActive` to be true to apply.\n *\n * The style affects both the button's appearance and whether the notification count is displayed.\n */\nexport enum NotificationButtonStyle {\n  Flat = 'flat',\n  Normal = 'normal',\n  Enhanced = 'enhanced',\n}\n\n/**\n * Payload for the `obc-click` event dispatched by `<obc-notification-button>`.\n *\n * - `count`: The current notification count.\n * - `isActive`: The new active state after the button is clicked.\n */\nexport interface NotificationButtonClickEvent {\n  count: number;\n  isActive: boolean;\n}\n\n/**\n * `<obc-notification-button>` – Icon button for accessing notifications, optionally displaying a counter badge.\n *\n * This component provides a compact, interactive button for surfacing notification status and counts. It supports several visual styles to adapt to different UI contexts, and can display a badge with the number of unread notifications when appropriate.\n *\n * Appears as an icon-only button by default, with optional counter and active state styling. Designed for use in toolbars, headers, or anywhere a notification indicator is needed.\n *\n * ## Features\n * - **Visual Styles:**\n *   - **Flat:** Minimal icon-only button. Counter is never shown, regardless of `count` or `showCount`.\n *   - **Normal:** Standard notification button. Counter badge appears if `showCount` is true and `isActive` is true.\n *   - **Enhanced:** Emphasized style with background and accent color. Counter badge appears if `showCount` is true and `isActive` is true.\n * - **Active State:**\n *   - When `isActive` is true, the button uses the filled notification icon and applies the selected style (`Normal` or `Enhanced`).\n *   - When inactive, the button uses the outlined notification icon and always appears in `Flat` style.\n * - **Notification Counter:**\n *   - Shows a badge with the current `count` if `showCount` is true and style is `Normal` or `Enhanced` and `isActive` is true.\n *   - Counter is hidden in `Flat` style, even if `showCount` is true.\n * - **Custom Icon Support:**\n *   - Developers can supply a custom icon via the `icon` slot. Defaults to notification icons if slot is empty.\n * - **Accessibility:**\n *   - Uses `aria-label` for screen readers, including the count if visible.\n *   - `aria-pressed` reflects the active state.\n *\n * ## Usage Guidelines\n * Use `<obc-notification-button>` to provide a prominent, interactive entry point for notifications in an application. It is ideal for header bars, navigation panels, or any location where users need to be alerted to new activity or messages.\n *\n * - Use the `Flat` style for minimal, unobtrusive notification indicators.\n * - Use `Normal` or `Enhanced` styles when you want to emphasize the presence of new notifications, especially when the button is active.\n * - Show the counter badge only when it is important to indicate the number of unread notifications; otherwise, keep it hidden for a cleaner look.\n * - The button does not manage notification state internally; it is up to the parent application to update `count` and `isActive` as needed.\n *\n * **TODO(designer):** Clarify recommended scenarios for using `Normal` vs. `Enhanced` styles, and any design guidelines for when to show the counter.\n *\n * ## Slots\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------|----------------|---------|\n * | `icon`    | Always (optional) | Custom icon to display instead of the default notification icon. |\n *\n * ## Events\n * - `obc-click` – Fired when the button is clicked. Event detail includes the current `count` and the new `isActive` state.\n *\n * ## Example\n *\n * ```html\n * <obc-notification-button\n *   buttonStyle=\"normal\"\n *   count=\"5\"\n *   showCount\n *   isActive\n *   ariaLabel=\"Notifications\"\n * ></obc-notification-button>\n * ```\n *\n * In this example, the button appears in the normal style, is active, and displays a counter badge with the value 5.\n *\n * @slot icon - Custom icon to display in place of the default notification icon.\n * @fires {CustomEvent<NotificationButtonClickEvent>} obc-click - Fired when the button is clicked, with the current count and new active state.\n * @stable\n */\n@customElement('obc-notification-button')\nexport class ObcNotificationButton extends LitElement {\n  /**\n   * Visual style of the notification button.\n   *\n   * - `flat`: Minimal icon-only style. Counter is never shown.\n   * - `normal`: Standard notification button. Counter badge appears if `showCount` is true and `isActive` is true.\n   * - `enhanced`: Emphasized style with background and accent color. Counter badge appears if `showCount` is true and `isActive` is true.\n   *\n   * Defaults to `flat`.\n   *\n   * @availableWhen isActive==true\n   */\n  @property({type: String}) buttonStyle: NotificationButtonStyle =\n    NotificationButtonStyle.Flat;\n\n  /**\n   * Number of notifications to display in the counter badge.\n   *\n   * Only shown if `showCount` is true, `isActive` is true, and `buttonStyle` is `normal` or `enhanced`.\n   * Ignored in `flat` style.\n   *\n   * Defaults to 0.\n   *\n   * @availableWhen isActive==true && showCount==true && buttonStyle in [Normal, Enhanced]\n   */\n  @property({type: Number}) count = 0;\n\n  /**\n   * Whether to display the notification count badge.\n   *\n   * If true, and the style is `normal` or `enhanced` and `isActive` is true, the counter badge is shown.\n   * Has no effect in `flat` style.\n   *\n   * Defaults to false.\n   *\n   * @availableWhen isActive==true && buttonStyle in [Normal, Enhanced]\n   */\n  @property({type: Boolean}) showCount = false;\n\n  /**\n   * Whether the button is in the active (selected) state.\n   *\n   * When true, the button uses the filled notification icon and applies the selected style (`normal` or `enhanced`).\n   * When false, the button always appears in `flat` style with the outlined icon.\n   *\n   * Defaults to false.\n   */\n  @property({type: Boolean}) isActive = false;\n\n  /**\n   * Accessibility label for the button.\n   *\n   * Used as the `aria-label` attribute for screen readers. If the counter is visible, the label will include the count (e.g., \"Notifications, 5 new\").\n   *\n   * Defaults to \"Notifications\".\n   */\n  @property({type: String}) override ariaLabel = 'Notifications';\n\n  override render() {\n    const useNormal =\n      this.isActive && this.buttonStyle === NotificationButtonStyle.Normal;\n    const useEnhanced =\n      this.isActive && this.buttonStyle === NotificationButtonStyle.Enhanced;\n    const useFlat =\n      this.buttonStyle === NotificationButtonStyle.Flat ||\n      (!useNormal && !useEnhanced);\n\n    const hasCounter = (useNormal || useEnhanced) && this.showCount;\n\n    const wrapperClasses = {\n      wrapper: true,\n      'is-active': this.isActive,\n      'has-counter': hasCounter,\n      flat: useFlat,\n      normal: useNormal,\n      enhanced: useEnhanced,\n    };\n\n    const visibleWrapperClasses = {\n      'visible-wrapper': true,\n    };\n\n    return html`\n      <button\n        class=\"${classMap(wrapperClasses)}\"\n        @click=\"${this.handleClick}\"\n        aria-label=\"${this.ariaLabel}${hasCounter ? `, ${this.count} new` : ''}\"\n        aria-pressed=\"${this.isActive}\"\n        role=\"button\"\n        type=\"button\"\n      >\n        <div class=\"${classMap(visibleWrapperClasses)}\">\n          <div class=\"icon-container\">\n            <slot name=\"icon\"> ${this.renderDefaultIcon()} </slot>\n          </div>\n          ${hasCounter\n            ? html` <span class=\"count-label\">${this.count}</span> `\n            : nothing}\n        </div>\n      </button>\n    `;\n  }\n\n  private renderDefaultIcon() {\n    if (this.isActive) {\n      return html`<obi-notification-filled></obi-notification-filled>`;\n    }\n    return html`<obi-notification></obi-notification>`;\n  }\n\n  /**\n   * Handles click events on the button and dispatches the `obc-click` custom event.\n   *\n   * @fires obc-click\n   */\n  private handleClick() {\n    const event = new CustomEvent<NotificationButtonClickEvent>('obc-click', {\n      detail: {\n        count: this.count,\n        isActive: !this.isActive,\n      },\n      composed: true,\n      bubbles: true,\n    });\n\n    this.dispatchEvent(event);\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-notification-button': ObcNotificationButton;\n  }\n}\n"],"names":["NotificationButtonStyle"],"mappings":";;;;;;;;;;;;;;;;;AAiBO,IAAK,4CAAAA,6BAAL;AACLA,2BAAA,MAAA,IAAO;AACPA,2BAAA,QAAA,IAAS;AACTA,2BAAA,UAAA,IAAW;AAHD,SAAAA;AAAA,GAAA,2BAAA,CAAA,CAAA;AA+EL,IAAM,wBAAN,cAAoC,WAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA;AAYqB,SAAA,cACxB;AAYwB,SAAA,QAAQ;AAYP,SAAA,YAAY;AAUZ,SAAA,WAAW;AASZ,SAAS,YAAY;AAAA,EAAA;AAAA,EAEtC,SAAS;AAChB,UAAM,YACJ,KAAK,YAAY,KAAK,gBAAgB;AACxC,UAAM,cACJ,KAAK,YAAY,KAAK,gBAAgB;AACxC,UAAM,UACJ,KAAK,gBAAgB,UACpB,CAAC,aAAa,CAAC;AAElB,UAAM,cAAc,aAAa,gBAAgB,KAAK;AAEtD,UAAM,iBAAiB;AAAA,MACrB,SAAS;AAAA,MACT,aAAa,KAAK;AAAA,MAClB,eAAe;AAAA,MACf,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,UAAU;AAAA,IAAA;AAGZ,UAAM,wBAAwB;AAAA,MAC5B,mBAAmB;AAAA,IAAA;AAGrB,WAAO;AAAA;AAAA,iBAEM,SAAS,cAAc,CAAC;AAAA,kBACvB,KAAK,WAAW;AAAA,sBACZ,KAAK,SAAS,GAAG,aAAa,KAAK,KAAK,KAAK,SAAS,EAAE;AAAA,wBACtD,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,sBAIf,SAAS,qBAAqB,CAAC;AAAA;AAAA,iCAEpB,KAAK,mBAAmB;AAAA;AAAA,YAE7C,aACE,kCAAkC,KAAK,KAAK,aAC5C,OAAO;AAAA;AAAA;AAAA;AAAA,EAInB;AAAA,EAEQ,oBAAoB;AAC1B,QAAI,KAAK,UAAU;AACjB,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,cAAc;AACpB,UAAM,QAAQ,IAAI,YAA0C,aAAa;AAAA,MACvE,QAAQ;AAAA,QACN,OAAO,KAAK;AAAA,QACZ,UAAU,CAAC,KAAK;AAAA,MAAA;AAAA,MAElB,UAAU;AAAA,MACV,SAAS;AAAA,IAAA,CACV;AAED,SAAK,cAAc,KAAK;AAAA,EAC1B;AAGF;AAjIa,sBAgIK,SAAS,UAAU,cAAc;AApHvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAZb,sBAYe,WAAA,eAAA,CAAA;AAaA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAzBb,sBAyBe,WAAA,SAAA,CAAA;AAYC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GArCd,sBAqCgB,WAAA,aAAA,CAAA;AAUA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA/Cd,sBA+CgB,WAAA,YAAA,CAAA;AASQ,gBAAA;AAAA,EAAlC,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAxDb,sBAwDwB,WAAA,aAAA,CAAA;AAxDxB,wBAAN,gBAAA;AAAA,EADN,cAAc,yBAAyB;AAAA,GAC3B,qBAAA;"}

package/dist/components/notification-message-item/notification-message-item.d.ts

@@ -175,11 +175,13 @@ export declare class ObcNotificationMessageItem extends LitElement {
     private get mappedType();
     private get mappedSize();
     /**
-     * @event message-click - Fired when the notification item is clicked (excluding the action area).
+     * Fired when the notification item is clicked (excluding the action area).
+     * @event message-click
      */
     private handleMessageClick;
     /**
-     * @event action-click - Fired when the action button or icon is clicked.
+     * Fired when the action button or icon is clicked.
+     * @event action-click
      */
     private handleActionClick;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/notification-message-item/notification-message-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification-message-item.d.ts","sourceRoot":"","sources":["../../../src/components/notification-message-item/notification-message-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAIzD,OAAO,+CAA+C,CAAC;AAKvD,OAAO,yCAAyC,CAAC;AACjD,OAAO,kCAAkC,CAAC;AAE1C,oBAAY,8BAA8B;IACxC,MAAM,WAAW;IACjB,UAAU,gBAAgB;IAC1B,cAAc,qBAAqB;IACnC,QAAQ,aAAa;CACtB;AAED,oBAAY,8BAA8B;IACxC,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,qBACa,0BAA2B,SAAQ,UAAU;IACxD;;;;OAIG;IACgC,KAAK,SAAM;IAE9C;;;;OAIG;IACuB,WAAW,SAAM;IAE3C;;;;OAIG;IACuB,IAAI,SAAM;IAEpC;;;;OAIG;IACuB,aAAa,SAAM;IAE7C;;;OAGG;IACuB,WAAW,SAAU;IAE/C;;;;;;OAMG;IACuB,IAAI,EAAE,8BAA8B,CACtB;IAExC;;;;OAIG;IACuB,IAAI,EAAE,8BAA8B,CACrB;IAEzC;;;OAGG;IAC0C,SAAS,EAAE,OAAO,CAAQ;IAEvE;;;;OAIG;IAC0C,eAAe,EAAE,OAAO,CAAQ;IAE7E;;;OAGG;IAC0C,aAAa,EAAE,OAAO,CAAQ;IAE3E;;;;OAIG;IACwB,aAAa,UAAS;IAEjD;;;;OAIG;IACwB,gBAAgB,UAAS;IAEpD;;;OAGG;IACwB,KAAK,UAAS;IAEzC;;;OAGG;IACwB,KAAK,UAAS;IAEzC;;;;OAIG;IACuB,SAAS,SAA4B;IAE/D,OAAO,KAAK,UAAU,GAiBrB;IAED,OAAO,KAAK,UAAU,GAQrB;IAED;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAI1B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAIhB,MAAM;IAyCf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,+BAA+B,EAAE,0BAA0B,CAAC;KAC7D;CACF"}
+{"version":3,"file":"notification-message-item.d.ts","sourceRoot":"","sources":["../../../src/components/notification-message-item/notification-message-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAIzD,OAAO,+CAA+C,CAAC;AAKvD,OAAO,yCAAyC,CAAC;AACjD,OAAO,kCAAkC,CAAC;AAE1C,oBAAY,8BAA8B;IACxC,MAAM,WAAW;IACjB,UAAU,gBAAgB;IAC1B,cAAc,qBAAqB;IACnC,QAAQ,aAAa;CACtB;AAED,oBAAY,8BAA8B;IACxC,OAAO,YAAY;IACnB,IAAI,SAAS;CACd;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,qBACa,0BAA2B,SAAQ,UAAU;IACxD;;;;OAIG;IACgC,KAAK,SAAM;IAE9C;;;;OAIG;IACuB,WAAW,SAAM;IAE3C;;;;OAIG;IACuB,IAAI,SAAM;IAEpC;;;;OAIG;IACuB,aAAa,SAAM;IAE7C;;;OAGG;IACuB,WAAW,SAAU;IAE/C;;;;;;OAMG;IACuB,IAAI,EAAE,8BAA8B,CACtB;IAExC;;;;OAIG;IACuB,IAAI,EAAE,8BAA8B,CACrB;IAEzC;;;OAGG;IAC0C,SAAS,EAAE,OAAO,CAAQ;IAEvE;;;;OAIG;IAC0C,eAAe,EAAE,OAAO,CAAQ;IAE7E;;;OAGG;IAC0C,aAAa,EAAE,OAAO,CAAQ;IAE3E;;;;OAIG;IACwB,aAAa,UAAS;IAEjD;;;;OAIG;IACwB,gBAAgB,UAAS;IAEpD;;;OAGG;IACwB,KAAK,UAAS;IAEzC;;;OAGG;IACwB,KAAK,UAAS;IAEzC;;;;OAIG;IACuB,SAAS,SAA4B;IAE/D,OAAO,KAAK,UAAU,GAiBrB;IAED,OAAO,KAAK,UAAU,GAQrB;IAED;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAI1B;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAIhB,MAAM;IAyCf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,+BAA+B,EAAE,0BAA0B,CAAC;KAC7D;CACF"}

package/dist/components/notification-message-item/notification-message-item.js

@@ -68,13 +68,15 @@ let ObcNotificationMessageItem = class extends LitElement {
     return this.size === "tall" ? ObcTopbarMessageItemSize.Tall : ObcTopbarMessageItemSize.Regular;
   }
   /**
-   * @event message-click - Fired when the notification item is clicked (excluding the action area).
+   * Fired when the notification item is clicked (excluding the action area).
+   * @event message-click
    */
   handleMessageClick() {
     this.dispatchEvent(new CustomEvent("message-click"));
   }
   /**
-   * @event action-click - Fired when the action button or icon is clicked.
+   * Fired when the action button or icon is clicked.
+   * @event action-click
    */
   handleActionClick() {
     this.dispatchEvent(new CustomEvent("action-click"));

package/dist/components/notification-message-item/notification-message-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-message-item.js","sources":["../../../src/components/notification-message-item/notification-message-item.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './notification-message-item.css?inline';\nimport '../topbar-message-item/topbar-message-item.js';\nimport {\n  ObcTopbarMessageItemType,\n  ObcTopbarMessageItemSize,\n} from '../topbar-message-item/topbar-message-item.js';\nimport '../../icons/icon-notification-filled.js';\nimport '../../icons/icon-close-google.js';\n\nexport enum ObcNotificationMessageItemType {\n  Simple = 'simple',\n  WithButton = 'with-button',\n  WithIconButton = 'with-icon-button',\n  Inactive = 'inactive',\n}\n\nexport enum ObcNotificationMessageItemSize {\n  Regular = 'regular',\n  Tall = 'tall',\n}\n\n/**\n * `<obc-notification-message-item>` – A notification message component for displaying alerts, messages, and status updates in topbars or notification panels.\n *\n * This component presents concise notification items with optional actions, timestamps, and icons. It is designed for use in notification trays, panels, or topbars, providing a consistent and scannable format for system or application messages.\n *\n * Appears as a single notification row, supporting primary and secondary icons, title, description, timestamps, and action buttons or icons. Can also display an empty/inactive state when no notifications are present.\n *\n * ## Features\n * - **Variants (type):**\n *   - `simple` (default): Basic notification with icon, title, description, and timestamp.\n *   - `with-button`: Includes a text action button (e.g., \"View\", \"Acknowledge\").\n *   - `with-icon-button`: Shows an icon action (e.g., close or dismiss).\n *   - `inactive`: Displays an empty or inactive state message (e.g., \"No active notifications\").\n * - **Size Options (size):**\n *   - `regular` (default): Standard compact layout.\n *   - `tall`: Expanded layout for longer content or increased prominence.\n * - **Content Controls:**\n *   - Show/hide title, description, primary timestamp, secondary timestamp, and secondary icon via boolean properties.\n *   - Customizable empty state text.\n * - **Icon Support:**\n *   - Always displays a primary notification icon.\n *   - Optional secondary icon slot for additional status or priority indicators.\n * - **Action and Interaction:**\n *   - Supports both text and icon actions based on type.\n *   - Emits events for message and action clicks.\n * - **Empty/Inactive State:**\n *   - Can display a placeholder message when no notifications are present.\n *\n * ## Usage Guidelines\n * Use `obc-notification-message-item` to display individual notification entries in a notification panel, topbar, or similar UI area. Ideal for presenting system alerts, status updates, or actionable messages that require user attention or acknowledgment.\n *\n * - Use the `simple` type for informational messages without actions.\n * - Use `with-button` when the notification requires a text button action (e.g., \"View\", \"Dismiss\").\n * - Use `with-icon-button` when the notification requires an icon button action (e.g., close).\n * - Use the `inactive` type (or set `empty` to true) to indicate that there are no active notifications.\n * - Prefer concise titles and descriptions for readability. Truncation is handled automatically for long content.\n * - For persistent or multi-line notifications, consider using the `tall` size.\n * - Only use one primary action per notification to avoid overwhelming the user.\n *\n * ## Slots\n * | Slot Name         | Renders When...                        | Purpose                                                      |\n * |-------------------|----------------------------------------|--------------------------------------------------------------|\n * | `secondary-icon`  | `hasSecondaryIcon` is true             | Additional icon for status/priority (e.g., warning, info).   |\n *\n * ## Events\n * - `message-click` – Fired when the notification item is clicked (excluding action area).\n * - `action-click` – Fired when the action button or icon is clicked.\n *\n * ## Best Practices and Constraints\n * - Only one action (button or icon) should be used per notification based on the type.\n * - Use the `inactive` type (or `empty=true`) for empty states; avoid mixing both.\n * - The `large` and `empty` properties are deprecated; use `size=\"tall\"` and `type=\"inactive\"` instead.\n * - For accessibility, ensure action labels are descriptive and icons have appropriate context.\n *\n * ## Example\n * ```html\n * <obc-notification-message-item\n *   type=\"with-button\"\n *   title=\"System Update\"\n *   description=\"Your system has been updated successfully\"\n *   time=\"10:30:15\"\n *   actionLabel=\"View\"\n * >\n *   <obi-warning-icon slot=\"secondary-icon\"></obi-warning-icon>\n * </obc-notification-message-item>\n * ```\n *\n * @slot secondary-icon - Additional icon for status/priority (shown when `hasSecondaryIcon` is true).\n * @fires {CustomEvent<void>} message-click - Fired when the notification item is clicked.\n * @fires {CustomEvent<void>} action-click - Fired when the action button or icon is clicked.\n * @beta\n */\n@customElement('obc-notification-message-item')\nexport class ObcNotificationMessageItem extends LitElement {\n  /**\n   * Title or heading for the notification.\n   * Shown in the title slot if `hasTitle` is true.\n   * @availableWhen showTitle==true && type!=Inactive && empty==false\n   */\n  @property({type: String}) override title = '';\n\n  /**\n   * Detailed message text for the notification.\n   * Shown in the description slot if `hasDescription` is true.\n   * @availableWhen showDescription==true && type!=Inactive && empty==false\n   */\n  @property({type: String}) description = '';\n\n  /**\n   * Primary timestamp to display (e.g., \"09:12:46\").\n   * Shown in the time slot if `hasTimestamp` is true.\n   * @availableWhen showTimestamp==true && type!=Inactive && empty==false\n   */\n  @property({type: String}) time = '';\n\n  /**\n   * Secondary timestamp (e.g., relative time like \"2m ago\").\n   * Shown in the time-secondary slot if `hasTimestamp2` is true.\n   * @availableWhen hasTimestamp2==true && type!=Inactive && empty==false\n   */\n  @property({type: String}) timeSecondary = '';\n\n  /**\n   * Label for the action button (used when `actionType` is \"button\").\n   * @availableWhen type==WithButton\n   */\n  @property({type: String}) actionLabel = 'View';\n\n  /**\n   * Display type of the notification.\n   * - `simple`: Basic notification (default).\n   * - `with-button`: Includes a text action button.\n   * - `with-icon-button`: Includes an icon action.\n   * - `inactive`: Shows empty/inactive state.\n   */\n  @property({type: String}) type: ObcNotificationMessageItemType =\n    ObcNotificationMessageItemType.Simple;\n\n  /**\n   * Size variant of the notification.\n   * - `regular`: Standard compact layout (default).\n   * - `tall`: Expanded layout for longer content.\n   */\n  @property({type: String}) size: ObcNotificationMessageItemSize =\n    ObcNotificationMessageItemSize.Regular;\n\n  /**\n   * Whether to show the title.\n   * @availableWhen type!=Inactive && empty==false\n   */\n  @property({type: Boolean, attribute: false}) showTitle: boolean = true;\n\n  /**\n   * Whether to show the description.\n   * If false, the description slot is omitted.\n   * @availableWhen type!=Inactive && empty==false\n   */\n  @property({type: Boolean, attribute: false}) showDescription: boolean = true;\n\n  /**\n   * Whether to show the primary timestamp.\n   * @availableWhen type!=Inactive && empty==false\n   */\n  @property({type: Boolean, attribute: false}) showTimestamp: boolean = true;\n\n  /**\n   * Whether to show the secondary timestamp.\n   * If false, the time-secondary slot is omitted.\n   * @availableWhen type!=Inactive && empty==false\n   */\n  @property({type: Boolean}) hasTimestamp2 = false;\n\n  /**\n   * Whether to show the secondary icon overlay.\n   * If true, renders the `secondary-icon` slot.\n   * @availableWhen type!=Inactive && empty==false\n   */\n  @property({type: Boolean}) hasSecondaryIcon = false;\n\n  /**\n   * **DEPRECATED** – Use `size=\"tall\"` instead.\n   * If true, uses the tall layout.\n   */\n  @property({type: Boolean}) large = false;\n\n  /**\n   * **DEPRECATED** – Use `type=\"inactive\"` instead.\n   * If true, shows the empty/inactive state.\n   */\n  @property({type: Boolean}) empty = false;\n\n  /**\n   * Text to show in the empty/inactive state.\n   * Used in the `empty` slot when `type=\"inactive\"` or `empty` is true.\n   * @availableWhen type==Inactive || empty==true\n   */\n  @property({type: String}) emptyText = 'No active notification';\n\n  private get mappedType(): ObcTopbarMessageItemType {\n    // Handle empty/inactive state\n    if (this.empty || this.type === ObcNotificationMessageItemType.Inactive) {\n      return ObcTopbarMessageItemType.Inactive;\n    }\n\n    // Use the specified type\n    switch (this.type) {\n      case ObcNotificationMessageItemType.WithButton:\n        return ObcTopbarMessageItemType.WithButton;\n      case ObcNotificationMessageItemType.WithIconButton:\n        return ObcTopbarMessageItemType.WithIconButton;\n      case ObcNotificationMessageItemType.Simple:\n        return ObcTopbarMessageItemType.Simple;\n      default:\n        return ObcTopbarMessageItemType.Simple;\n    }\n  }\n\n  private get mappedSize(): ObcTopbarMessageItemSize {\n    // Handle deprecated 'large' property\n    if (this.large) {\n      return ObcTopbarMessageItemSize.Tall;\n    }\n    return this.size === ObcNotificationMessageItemSize.Tall\n      ? ObcTopbarMessageItemSize.Tall\n      : ObcTopbarMessageItemSize.Regular;\n  }\n\n  /**\n   * @event message-click - Fired when the notification item is clicked (excluding the action area).\n   */\n  private handleMessageClick() {\n    this.dispatchEvent(new CustomEvent('message-click'));\n  }\n\n  /**\n   * @event action-click - Fired when the action button or icon is clicked.\n   */\n  private handleActionClick() {\n    this.dispatchEvent(new CustomEvent('action-click'));\n  }\n\n  override render() {\n    return html`\n      <obc-topbar-message-item\n        .type=${this.mappedType}\n        .size=${this.mappedSize}\n        .showTitle=${this.showTitle}\n        .showDescription=${this.showDescription}\n        .showTimestamp=${this.showTimestamp}\n        .hasTimestamp2=${this.hasTimestamp2}\n        .hasSecondaryIcon=${this.hasSecondaryIcon}\n        @message-click=${this.handleMessageClick}\n        @action-click=${this.handleActionClick}\n      >\n        <obi-notification-filled slot=\"primary-icon\"></obi-notification-filled>\n\n        ${this.hasSecondaryIcon\n          ? html`<slot name=\"secondary-icon\" slot=\"secondary-icon\"></slot>`\n          : nothing}\n        ${this.title && this.showTitle\n          ? html`<span slot=\"title\">${this.title}</span>`\n          : nothing}\n        ${this.description && this.showDescription\n          ? html`<span slot=\"description\">${this.description}</span>`\n          : nothing}\n        ${this.time && this.showTimestamp\n          ? html`<span slot=\"time\">${this.time}</span>`\n          : nothing}\n        ${this.timeSecondary && this.hasTimestamp2\n          ? html`<span slot=\"time-secondary\">${this.timeSecondary}</span>`\n          : nothing}\n        ${this.type === ObcNotificationMessageItemType.WithButton\n          ? html`<span slot=\"action-text\">${this.actionLabel}</span>`\n          : this.type === ObcNotificationMessageItemType.WithIconButton\n            ? html`<obi-close-google slot=\"action-icon\"></obi-close-google>`\n            : nothing}\n\n        <span slot=\"empty\">${this.emptyText}</span>\n      </obc-topbar-message-item>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-notification-message-item': ObcNotificationMessageItem;\n  }\n}\n"],"names":["ObcNotificationMessageItemType","ObcNotificationMessageItemSize"],"mappings":"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"}
+{"version":3,"file":"notification-message-item.js","sources":["../../../src/components/notification-message-item/notification-message-item.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './notification-message-item.css?inline';\nimport '../topbar-message-item/topbar-message-item.js';\nimport {\n  ObcTopbarMessageItemType,\n  ObcTopbarMessageItemSize,\n} from '../topbar-message-item/topbar-message-item.js';\nimport '../../icons/icon-notification-filled.js';\nimport '../../icons/icon-close-google.js';\n\nexport enum ObcNotificationMessageItemType {\n  Simple = 'simple',\n  WithButton = 'with-button',\n  WithIconButton = 'with-icon-button',\n  Inactive = 'inactive',\n}\n\nexport enum ObcNotificationMessageItemSize {\n  Regular = 'regular',\n  Tall = 'tall',\n}\n\n/**\n * `<obc-notification-message-item>` – A notification message component for displaying alerts, messages, and status updates in topbars or notification panels.\n *\n * This component presents concise notification items with optional actions, timestamps, and icons. It is designed for use in notification trays, panels, or topbars, providing a consistent and scannable format for system or application messages.\n *\n * Appears as a single notification row, supporting primary and secondary icons, title, description, timestamps, and action buttons or icons. Can also display an empty/inactive state when no notifications are present.\n *\n * ## Features\n * - **Variants (type):**\n *   - `simple` (default): Basic notification with icon, title, description, and timestamp.\n *   - `with-button`: Includes a text action button (e.g., \"View\", \"Acknowledge\").\n *   - `with-icon-button`: Shows an icon action (e.g., close or dismiss).\n *   - `inactive`: Displays an empty or inactive state message (e.g., \"No active notifications\").\n * - **Size Options (size):**\n *   - `regular` (default): Standard compact layout.\n *   - `tall`: Expanded layout for longer content or increased prominence.\n * - **Content Controls:**\n *   - Show/hide title, description, primary timestamp, secondary timestamp, and secondary icon via boolean properties.\n *   - Customizable empty state text.\n * - **Icon Support:**\n *   - Always displays a primary notification icon.\n *   - Optional secondary icon slot for additional status or priority indicators.\n * - **Action and Interaction:**\n *   - Supports both text and icon actions based on type.\n *   - Emits events for message and action clicks.\n * - **Empty/Inactive State:**\n *   - Can display a placeholder message when no notifications are present.\n *\n * ## Usage Guidelines\n * Use `obc-notification-message-item` to display individual notification entries in a notification panel, topbar, or similar UI area. Ideal for presenting system alerts, status updates, or actionable messages that require user attention or acknowledgment.\n *\n * - Use the `simple` type for informational messages without actions.\n * - Use `with-button` when the notification requires a text button action (e.g., \"View\", \"Dismiss\").\n * - Use `with-icon-button` when the notification requires an icon button action (e.g., close).\n * - Use the `inactive` type (or set `empty` to true) to indicate that there are no active notifications.\n * - Prefer concise titles and descriptions for readability. Truncation is handled automatically for long content.\n * - For persistent or multi-line notifications, consider using the `tall` size.\n * - Only use one primary action per notification to avoid overwhelming the user.\n *\n * ## Slots\n * | Slot Name         | Renders When...                        | Purpose                                                      |\n * |-------------------|----------------------------------------|--------------------------------------------------------------|\n * | `secondary-icon`  | `hasSecondaryIcon` is true             | Additional icon for status/priority (e.g., warning, info).   |\n *\n * ## Events\n * - `message-click` – Fired when the notification item is clicked (excluding action area).\n * - `action-click` – Fired when the action button or icon is clicked.\n *\n * ## Best Practices and Constraints\n * - Only one action (button or icon) should be used per notification based on the type.\n * - Use the `inactive` type (or `empty=true`) for empty states; avoid mixing both.\n * - The `large` and `empty` properties are deprecated; use `size=\"tall\"` and `type=\"inactive\"` instead.\n * - For accessibility, ensure action labels are descriptive and icons have appropriate context.\n *\n * ## Example\n * ```html\n * <obc-notification-message-item\n *   type=\"with-button\"\n *   title=\"System Update\"\n *   description=\"Your system has been updated successfully\"\n *   time=\"10:30:15\"\n *   actionLabel=\"View\"\n * >\n *   <obi-warning-icon slot=\"secondary-icon\"></obi-warning-icon>\n * </obc-notification-message-item>\n * ```\n *\n * @slot secondary-icon - Additional icon for status/priority (shown when `hasSecondaryIcon` is true).\n * @fires {CustomEvent<void>} message-click - Fired when the notification item is clicked.\n * @fires {CustomEvent<void>} action-click - Fired when the action button or icon is clicked.\n * @beta\n */\n@customElement('obc-notification-message-item')\nexport class ObcNotificationMessageItem extends LitElement {\n  /**\n   * Title or heading for the notification.\n   * Shown in the title slot if `hasTitle` is true.\n   * @availableWhen showTitle==true && type!=Inactive && empty==false\n   */\n  @property({type: String}) override title = '';\n\n  /**\n   * Detailed message text for the notification.\n   * Shown in the description slot if `hasDescription` is true.\n   * @availableWhen showDescription==true && type!=Inactive && empty==false\n   */\n  @property({type: String}) description = '';\n\n  /**\n   * Primary timestamp to display (e.g., \"09:12:46\").\n   * Shown in the time slot if `hasTimestamp` is true.\n   * @availableWhen showTimestamp==true && type!=Inactive && empty==false\n   */\n  @property({type: String}) time = '';\n\n  /**\n   * Secondary timestamp (e.g., relative time like \"2m ago\").\n   * Shown in the time-secondary slot if `hasTimestamp2` is true.\n   * @availableWhen hasTimestamp2==true && type!=Inactive && empty==false\n   */\n  @property({type: String}) timeSecondary = '';\n\n  /**\n   * Label for the action button (used when `actionType` is \"button\").\n   * @availableWhen type==WithButton\n   */\n  @property({type: String}) actionLabel = 'View';\n\n  /**\n   * Display type of the notification.\n   * - `simple`: Basic notification (default).\n   * - `with-button`: Includes a text action button.\n   * - `with-icon-button`: Includes an icon action.\n   * - `inactive`: Shows empty/inactive state.\n   */\n  @property({type: String}) type: ObcNotificationMessageItemType =\n    ObcNotificationMessageItemType.Simple;\n\n  /**\n   * Size variant of the notification.\n   * - `regular`: Standard compact layout (default).\n   * - `tall`: Expanded layout for longer content.\n   */\n  @property({type: String}) size: ObcNotificationMessageItemSize =\n    ObcNotificationMessageItemSize.Regular;\n\n  /**\n   * Whether to show the title.\n   * @availableWhen type!=Inactive && empty==false\n   */\n  @property({type: Boolean, attribute: false}) showTitle: boolean = true;\n\n  /**\n   * Whether to show the description.\n   * If false, the description slot is omitted.\n   * @availableWhen type!=Inactive && empty==false\n   */\n  @property({type: Boolean, attribute: false}) showDescription: boolean = true;\n\n  /**\n   * Whether to show the primary timestamp.\n   * @availableWhen type!=Inactive && empty==false\n   */\n  @property({type: Boolean, attribute: false}) showTimestamp: boolean = true;\n\n  /**\n   * Whether to show the secondary timestamp.\n   * If false, the time-secondary slot is omitted.\n   * @availableWhen type!=Inactive && empty==false\n   */\n  @property({type: Boolean}) hasTimestamp2 = false;\n\n  /**\n   * Whether to show the secondary icon overlay.\n   * If true, renders the `secondary-icon` slot.\n   * @availableWhen type!=Inactive && empty==false\n   */\n  @property({type: Boolean}) hasSecondaryIcon = false;\n\n  /**\n   * **DEPRECATED** – Use `size=\"tall\"` instead.\n   * If true, uses the tall layout.\n   */\n  @property({type: Boolean}) large = false;\n\n  /**\n   * **DEPRECATED** – Use `type=\"inactive\"` instead.\n   * If true, shows the empty/inactive state.\n   */\n  @property({type: Boolean}) empty = false;\n\n  /**\n   * Text to show in the empty/inactive state.\n   * Used in the `empty` slot when `type=\"inactive\"` or `empty` is true.\n   * @availableWhen type==Inactive || empty==true\n   */\n  @property({type: String}) emptyText = 'No active notification';\n\n  private get mappedType(): ObcTopbarMessageItemType {\n    // Handle empty/inactive state\n    if (this.empty || this.type === ObcNotificationMessageItemType.Inactive) {\n      return ObcTopbarMessageItemType.Inactive;\n    }\n\n    // Use the specified type\n    switch (this.type) {\n      case ObcNotificationMessageItemType.WithButton:\n        return ObcTopbarMessageItemType.WithButton;\n      case ObcNotificationMessageItemType.WithIconButton:\n        return ObcTopbarMessageItemType.WithIconButton;\n      case ObcNotificationMessageItemType.Simple:\n        return ObcTopbarMessageItemType.Simple;\n      default:\n        return ObcTopbarMessageItemType.Simple;\n    }\n  }\n\n  private get mappedSize(): ObcTopbarMessageItemSize {\n    // Handle deprecated 'large' property\n    if (this.large) {\n      return ObcTopbarMessageItemSize.Tall;\n    }\n    return this.size === ObcNotificationMessageItemSize.Tall\n      ? ObcTopbarMessageItemSize.Tall\n      : ObcTopbarMessageItemSize.Regular;\n  }\n\n  /**\n   * Fired when the notification item is clicked (excluding the action area).\n   * @event message-click\n   */\n  private handleMessageClick() {\n    this.dispatchEvent(new CustomEvent('message-click'));\n  }\n\n  /**\n   * Fired when the action button or icon is clicked.\n   * @event action-click\n   */\n  private handleActionClick() {\n    this.dispatchEvent(new CustomEvent('action-click'));\n  }\n\n  override render() {\n    return html`\n      <obc-topbar-message-item\n        .type=${this.mappedType}\n        .size=${this.mappedSize}\n        .showTitle=${this.showTitle}\n        .showDescription=${this.showDescription}\n        .showTimestamp=${this.showTimestamp}\n        .hasTimestamp2=${this.hasTimestamp2}\n        .hasSecondaryIcon=${this.hasSecondaryIcon}\n        @message-click=${this.handleMessageClick}\n        @action-click=${this.handleActionClick}\n      >\n        <obi-notification-filled slot=\"primary-icon\"></obi-notification-filled>\n\n        ${this.hasSecondaryIcon\n          ? html`<slot name=\"secondary-icon\" slot=\"secondary-icon\"></slot>`\n          : nothing}\n        ${this.title && this.showTitle\n          ? html`<span slot=\"title\">${this.title}</span>`\n          : nothing}\n        ${this.description && this.showDescription\n          ? html`<span slot=\"description\">${this.description}</span>`\n          : nothing}\n        ${this.time && this.showTimestamp\n          ? html`<span slot=\"time\">${this.time}</span>`\n          : nothing}\n        ${this.timeSecondary && this.hasTimestamp2\n          ? html`<span slot=\"time-secondary\">${this.timeSecondary}</span>`\n          : nothing}\n        ${this.type === ObcNotificationMessageItemType.WithButton\n          ? html`<span slot=\"action-text\">${this.actionLabel}</span>`\n          : this.type === ObcNotificationMessageItemType.WithIconButton\n            ? html`<obi-close-google slot=\"action-icon\"></obi-close-google>`\n            : nothing}\n\n        <span slot=\"empty\">${this.emptyText}</span>\n      </obc-topbar-message-item>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-notification-message-item': ObcNotificationMessageItem;\n  }\n}\n"],"names":["ObcNotificationMessageItemType","ObcNotificationMessageItemSize"],"mappings":"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"}

package/dist/components/pivot-item/pivot-item.d.ts

@@ -106,7 +106,7 @@ export declare class ObcPivotItem extends LitElement {
     /**
      * Handles click events. Emits `selected` when the item is not disabled or already selected.
      *
-     * @fires {CustomEvent<{value: string}>} selected - When the item is clicked and becomes selected
+     * @fires selected
      */
     private onClick;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/pivot-item/pivot-item.js

@@ -32,7 +32,7 @@ let ObcPivotItem = class extends LitElement {
   /**
    * Handles click events. Emits `selected` when the item is not disabled or already selected.
    *
-   * @fires {CustomEvent<{value: string}>} selected - When the item is clicked and becomes selected
+   * @fires selected
    */
   onClick() {
     if (this.disabled || this.selected) {

package/dist/components/pivot-item/pivot-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"pivot-item.js","sources":["../../../src/components/pivot-item/pivot-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport compentStyle from './pivot-item.css?inline';\n\n/**\n * The layout direction for a pivot item.\n * - `horizontal`: Arranges items in a row (default).\n * - `vertical`: Arranges items in a column.\n */\nexport enum ObcPivotItemDirection {\n  horizontal = 'horizontal',\n  vertical = 'vertical',\n}\n\n/**\n * `<obc-pivot-item>` – A selectable tab or navigation item for use in pivot/tab bars and segmented controls.\n *\n * Represents a single option within a group of pivot items, supporting icon-only, label-only, or combined icon+label layouts. Designed for navigation or view switching scenarios where users select one option from a set. Can be arranged horizontally or vertically to fit different UI layouts.\n *\n * ---\n *\n * ### Features\n * - **Direction:** Supports `horizontal` (default) or `vertical` layout, adapting to the orientation of the containing group.\n * - **Icon and Label Options:** Can display a leading icon (via the `icon` slot), a text label (via the `label` property), or both. Each can be toggled independently.\n * - **Selection State:** Indicates the currently selected item with a visual highlight (active tab stroke). Only one item should be selected in a group at a time.\n * - **Disabled State:** Can be disabled to prevent interaction and visually indicate inactivity.\n *\n * ---\n *\n * ### Usage Guidelines\n * Use `obc-pivot-item` within an `obc-pivot-item-group` to create tab bars, segmented controls, or navigation rails. Ideal for switching between views, pages, or content sections. Choose horizontal orientation for top navigation bars and vertical for side navigation or tool selectors. Use icons for compact layouts or when representing actions visually; combine with labels for clarity. Avoid using for persistent navigation (use a menu or list instead).\n *\n * **TODO(designer):** Confirm if there are recommended limits on icon or label length, and if divider usage is preferred in certain layouts.\n *\n * ---\n *\n * ### Slots\n * | Slot Name | Renders When...         | Purpose                                   |\n * |-----------|------------------------|-------------------------------------------|\n * | icon      | `hasLeadingIcon` true  | Leading icon representing the item. Place an icon such as `<obi-home slot=\"icon\"></obi-home>`. |\n *\n * ---\n *\n * ### Events\n * - `selected` – Fired when the item is clicked and becomes selected. Event detail: `{ value: string }`.\n *\n * ---\n *\n * ### Example:\n * ```\n * <obc-pivot-item\n *   value=\"home\"\n *   label=\"Home\"\n *   hasLeadingIcon\n *   hasLabel\n * >\n *   <obi-home slot=\"icon\"></obi-home>\n * </obc-pivot-item>\n * ```\n * In this example, the item displays a home icon and a label. When clicked (and not already selected/disabled), it emits a `selected` event.\n *\n * @slot icon - Leading icon slot (shown when `hasLeadingIcon` is true)\n * @fires {CustomEvent<{value: string}>} selected - When the item is clicked and becomes selected\n * @stable\n */\n@customElement('obc-pivot-item')\nexport class ObcPivotItem extends LitElement {\n  /**\n   * The value associated with this pivot item. Used to identify the item within a group.\n   *\n   * Set a unique value for each item in a group to track selection state.\n   */\n  @property({type: String}) value = '';\n\n  /**\n   * Whether this item is currently selected. Only one item should be selected in a group.\n   *\n   * When `true`, the item is visually highlighted and does not emit the `selected` event on click.\n   */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  /**\n   * Layout direction for the item: `horizontal` (default) or `vertical`.\n   * Should match the direction of the containing group.\n   *\n   * Use `horizontal` for row/tab layouts and `vertical` for column/rail layouts.\n   */\n  @property({type: String}) direction: ObcPivotItemDirection =\n    ObcPivotItemDirection.horizontal;\n\n  /**\n   * Whether to display a leading icon. If true, renders the `icon` slot.\n   *\n   * Place an icon element (e.g., `<obi-home slot=\"icon\"></obi-home>`) in the slot to show an icon.\n   */\n  @property({type: Boolean}) hasLeadingIcon = false;\n\n  /**\n   * Whether to display a text label. If true and `label` is non-empty, shows the label.\n   *\n   * Use in combination with `hasLeadingIcon` for icon+label layouts.\n   */\n  @property({type: Boolean}) hasLabel = false;\n\n  /**\n   * The text label to display for the item. Only shown if `hasLabel` is true and label is non-empty.\n   *\n   * Keep labels concise for best appearance, especially in horizontal layouts.\n   */\n  @property({type: String}) label = '';\n\n  /**\n   * Disables the item, preventing interaction and applying a disabled style.\n   *\n   * When `true`, the item cannot be selected and is visually muted.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * Handles click events. Emits `selected` when the item is not disabled or already selected.\n   *\n   * @fires {CustomEvent<{value: string}>} selected - When the item is clicked and becomes selected\n   */\n  private onClick() {\n    // Don't allow clicking if disabled OR already selected\n    if (this.disabled || this.selected) {\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('selected', {\n        detail: {value: this.value},\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  override render() {\n    const isVertical = this.direction === ObcPivotItemDirection.vertical;\n    const shouldShowLabel = this.hasLabel && this.label.trim().length > 0;\n\n    const classes = classMap({\n      wrapper: true,\n      selected: this.selected,\n      'direction-vertical': isVertical,\n      'direction-horizontal': !isVertical,\n      'has-leading-icon': this.hasLeadingIcon,\n      'has-label': this.hasLabel,\n      disabled: this.disabled,\n    });\n\n    return html`\n      <button\n        class=${classes}\n        @click=${this.onClick}\n        ?disabled=${this.disabled}\n        aria-pressed=${this.selected}\n      >\n        <div class=\"visible-wrapper\">\n          <div class=\"placeholder\">\n            <div class=\"icon-label-container\">\n              ${this.hasLeadingIcon\n                ? html`<div class=\"icon\">\n                    <slot name=\"icon\"></slot>\n                  </div>`\n                : nothing}\n              ${shouldShowLabel\n                ? html`<div class=\"label\">${this.label}</div>`\n                : nothing}\n            </div>\n          </div>\n        </div>\n\n        <div class=\"selected-container\">\n          <div class=\"active-tab-stroke\"></div>\n        </div>\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-pivot-item': ObcPivotItem;\n  }\n}\n"],"names":["ObcPivotItemDirection"],"mappings":";;;;;;;;;;;;;;;AAWO,IAAK,0CAAAA,2BAAL;AACLA,yBAAA,YAAA,IAAa;AACbA,yBAAA,UAAA,IAAW;AAFD,SAAAA;AAAA,GAAA,yBAAA,CAAA,CAAA;AAyDL,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AAMqB,SAAA,QAAQ;AAOQ,SAAA,WAAW;AAQ3B,SAAA,YACxB;AAOyB,SAAA,iBAAiB;AAOjB,SAAA,WAAW;AAOZ,SAAA,QAAQ;AAOP,SAAA,WAAW;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO9B,UAAU;AAEhB,QAAI,KAAK,YAAY,KAAK,UAAU;AAClC;AAAA,IACF;AAEA,SAAK;AAAA,MACH,IAAI,YAAY,YAAY;AAAA,QAC1B,QAAQ,EAAC,OAAO,KAAK,MAAA;AAAA,QACrB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAES,SAAS;AAChB,UAAM,aAAa,KAAK,cAAc;AACtC,UAAM,kBAAkB,KAAK,YAAY,KAAK,MAAM,KAAA,EAAO,SAAS;AAEpE,UAAM,UAAU,SAAS;AAAA,MACvB,SAAS;AAAA,MACT,UAAU,KAAK;AAAA,MACf,sBAAsB;AAAA,MACtB,wBAAwB,CAAC;AAAA,MACzB,oBAAoB,KAAK;AAAA,MACzB,aAAa,KAAK;AAAA,MAClB,UAAU,KAAK;AAAA,IAAA,CAChB;AAED,WAAO;AAAA;AAAA,gBAEK,OAAO;AAAA,iBACN,KAAK,OAAO;AAAA,oBACT,KAAK,QAAQ;AAAA,uBACV,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKpB,KAAK,iBACH;AAAA;AAAA,4BAGA,OAAO;AAAA,gBACT,kBACE,0BAA0B,KAAK,KAAK,WACpC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUvB;AAGF;AApHa,aAmHK,SAAS,UAAU,YAAY;AA7GrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GANb,aAMe,WAAA,SAAA,CAAA;AAOgB,gBAAA;AAAA,EAAzC,SAAS,EAAC,MAAM,SAAS,SAAS,MAAK;AAAA,GAb7B,aAa+B,WAAA,YAAA,CAAA;AAQhB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GArBb,aAqBe,WAAA,aAAA,CAAA;AAQC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA7Bd,aA6BgB,WAAA,kBAAA,CAAA;AAOA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GApCd,aAoCgB,WAAA,YAAA,CAAA;AAOD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA3Cb,aA2Ce,WAAA,SAAA,CAAA;AAOC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAlDd,aAkDgB,WAAA,YAAA,CAAA;AAlDhB,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;"}
+{"version":3,"file":"pivot-item.js","sources":["../../../src/components/pivot-item/pivot-item.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport compentStyle from './pivot-item.css?inline';\n\n/**\n * The layout direction for a pivot item.\n * - `horizontal`: Arranges items in a row (default).\n * - `vertical`: Arranges items in a column.\n */\nexport enum ObcPivotItemDirection {\n  horizontal = 'horizontal',\n  vertical = 'vertical',\n}\n\n/**\n * `<obc-pivot-item>` – A selectable tab or navigation item for use in pivot/tab bars and segmented controls.\n *\n * Represents a single option within a group of pivot items, supporting icon-only, label-only, or combined icon+label layouts. Designed for navigation or view switching scenarios where users select one option from a set. Can be arranged horizontally or vertically to fit different UI layouts.\n *\n * ---\n *\n * ### Features\n * - **Direction:** Supports `horizontal` (default) or `vertical` layout, adapting to the orientation of the containing group.\n * - **Icon and Label Options:** Can display a leading icon (via the `icon` slot), a text label (via the `label` property), or both. Each can be toggled independently.\n * - **Selection State:** Indicates the currently selected item with a visual highlight (active tab stroke). Only one item should be selected in a group at a time.\n * - **Disabled State:** Can be disabled to prevent interaction and visually indicate inactivity.\n *\n * ---\n *\n * ### Usage Guidelines\n * Use `obc-pivot-item` within an `obc-pivot-item-group` to create tab bars, segmented controls, or navigation rails. Ideal for switching between views, pages, or content sections. Choose horizontal orientation for top navigation bars and vertical for side navigation or tool selectors. Use icons for compact layouts or when representing actions visually; combine with labels for clarity. Avoid using for persistent navigation (use a menu or list instead).\n *\n * **TODO(designer):** Confirm if there are recommended limits on icon or label length, and if divider usage is preferred in certain layouts.\n *\n * ---\n *\n * ### Slots\n * | Slot Name | Renders When...         | Purpose                                   |\n * |-----------|------------------------|-------------------------------------------|\n * | icon      | `hasLeadingIcon` true  | Leading icon representing the item. Place an icon such as `<obi-home slot=\"icon\"></obi-home>`. |\n *\n * ---\n *\n * ### Events\n * - `selected` – Fired when the item is clicked and becomes selected. Event detail: `{ value: string }`.\n *\n * ---\n *\n * ### Example:\n * ```\n * <obc-pivot-item\n *   value=\"home\"\n *   label=\"Home\"\n *   hasLeadingIcon\n *   hasLabel\n * >\n *   <obi-home slot=\"icon\"></obi-home>\n * </obc-pivot-item>\n * ```\n * In this example, the item displays a home icon and a label. When clicked (and not already selected/disabled), it emits a `selected` event.\n *\n * @slot icon - Leading icon slot (shown when `hasLeadingIcon` is true)\n * @fires {CustomEvent<{value: string}>} selected - When the item is clicked and becomes selected\n * @stable\n */\n@customElement('obc-pivot-item')\nexport class ObcPivotItem extends LitElement {\n  /**\n   * The value associated with this pivot item. Used to identify the item within a group.\n   *\n   * Set a unique value for each item in a group to track selection state.\n   */\n  @property({type: String}) value = '';\n\n  /**\n   * Whether this item is currently selected. Only one item should be selected in a group.\n   *\n   * When `true`, the item is visually highlighted and does not emit the `selected` event on click.\n   */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  /**\n   * Layout direction for the item: `horizontal` (default) or `vertical`.\n   * Should match the direction of the containing group.\n   *\n   * Use `horizontal` for row/tab layouts and `vertical` for column/rail layouts.\n   */\n  @property({type: String}) direction: ObcPivotItemDirection =\n    ObcPivotItemDirection.horizontal;\n\n  /**\n   * Whether to display a leading icon. If true, renders the `icon` slot.\n   *\n   * Place an icon element (e.g., `<obi-home slot=\"icon\"></obi-home>`) in the slot to show an icon.\n   */\n  @property({type: Boolean}) hasLeadingIcon = false;\n\n  /**\n   * Whether to display a text label. If true and `label` is non-empty, shows the label.\n   *\n   * Use in combination with `hasLeadingIcon` for icon+label layouts.\n   */\n  @property({type: Boolean}) hasLabel = false;\n\n  /**\n   * The text label to display for the item. Only shown if `hasLabel` is true and label is non-empty.\n   *\n   * Keep labels concise for best appearance, especially in horizontal layouts.\n   */\n  @property({type: String}) label = '';\n\n  /**\n   * Disables the item, preventing interaction and applying a disabled style.\n   *\n   * When `true`, the item cannot be selected and is visually muted.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * Handles click events. Emits `selected` when the item is not disabled or already selected.\n   *\n   * @fires selected\n   */\n  private onClick() {\n    // Don't allow clicking if disabled OR already selected\n    if (this.disabled || this.selected) {\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('selected', {\n        detail: {value: this.value},\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  override render() {\n    const isVertical = this.direction === ObcPivotItemDirection.vertical;\n    const shouldShowLabel = this.hasLabel && this.label.trim().length > 0;\n\n    const classes = classMap({\n      wrapper: true,\n      selected: this.selected,\n      'direction-vertical': isVertical,\n      'direction-horizontal': !isVertical,\n      'has-leading-icon': this.hasLeadingIcon,\n      'has-label': this.hasLabel,\n      disabled: this.disabled,\n    });\n\n    return html`\n      <button\n        class=${classes}\n        @click=${this.onClick}\n        ?disabled=${this.disabled}\n        aria-pressed=${this.selected}\n      >\n        <div class=\"visible-wrapper\">\n          <div class=\"placeholder\">\n            <div class=\"icon-label-container\">\n              ${this.hasLeadingIcon\n                ? html`<div class=\"icon\">\n                    <slot name=\"icon\"></slot>\n                  </div>`\n                : nothing}\n              ${shouldShowLabel\n                ? html`<div class=\"label\">${this.label}</div>`\n                : nothing}\n            </div>\n          </div>\n        </div>\n\n        <div class=\"selected-container\">\n          <div class=\"active-tab-stroke\"></div>\n        </div>\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-pivot-item': ObcPivotItem;\n  }\n}\n"],"names":["ObcPivotItemDirection"],"mappings":";;;;;;;;;;;;;;;AAWO,IAAK,0CAAAA,2BAAL;AACLA,yBAAA,YAAA,IAAa;AACbA,yBAAA,UAAA,IAAW;AAFD,SAAAA;AAAA,GAAA,yBAAA,CAAA,CAAA;AAyDL,IAAM,eAAN,cAA2B,WAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AAMqB,SAAA,QAAQ;AAOQ,SAAA,WAAW;AAQ3B,SAAA,YACxB;AAOyB,SAAA,iBAAiB;AAOjB,SAAA,WAAW;AAOZ,SAAA,QAAQ;AAOP,SAAA,WAAW;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO9B,UAAU;AAEhB,QAAI,KAAK,YAAY,KAAK,UAAU;AAClC;AAAA,IACF;AAEA,SAAK;AAAA,MACH,IAAI,YAAY,YAAY;AAAA,QAC1B,QAAQ,EAAC,OAAO,KAAK,MAAA;AAAA,QACrB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAES,SAAS;AAChB,UAAM,aAAa,KAAK,cAAc;AACtC,UAAM,kBAAkB,KAAK,YAAY,KAAK,MAAM,KAAA,EAAO,SAAS;AAEpE,UAAM,UAAU,SAAS;AAAA,MACvB,SAAS;AAAA,MACT,UAAU,KAAK;AAAA,MACf,sBAAsB;AAAA,MACtB,wBAAwB,CAAC;AAAA,MACzB,oBAAoB,KAAK;AAAA,MACzB,aAAa,KAAK;AAAA,MAClB,UAAU,KAAK;AAAA,IAAA,CAChB;AAED,WAAO;AAAA;AAAA,gBAEK,OAAO;AAAA,iBACN,KAAK,OAAO;AAAA,oBACT,KAAK,QAAQ;AAAA,uBACV,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKpB,KAAK,iBACH;AAAA;AAAA,4BAGA,OAAO;AAAA,gBACT,kBACE,0BAA0B,KAAK,KAAK,WACpC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUvB;AAGF;AApHa,aAmHK,SAAS,UAAU,YAAY;AA7GrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GANb,aAMe,WAAA,SAAA,CAAA;AAOgB,gBAAA;AAAA,EAAzC,SAAS,EAAC,MAAM,SAAS,SAAS,MAAK;AAAA,GAb7B,aAa+B,WAAA,YAAA,CAAA;AAQhB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GArBb,aAqBe,WAAA,aAAA,CAAA;AAQC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GA7Bd,aA6BgB,WAAA,kBAAA,CAAA;AAOA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GApCd,aAoCgB,WAAA,YAAA,CAAA;AAOD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA3Cb,aA2Ce,WAAA,SAAA,CAAA;AAOC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAlDd,aAkDgB,WAAA,YAAA,CAAA;AAlDhB,eAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,YAAA;"}

package/dist/components/pivot-item-group/pivot-item-group.d.ts

@@ -46,6 +46,7 @@ import { ObcPivotItemDirection } from '../pivot-item/pivot-item.js';
  *
  * @slot - Default slot for one or more `<obc-pivot-item>` elements.
  * @fires {CustomEvent<{selectedValue: string}>} change - Fired when the selected value changes.
+ * @stable
  */
 export declare class ObcPivotItemGroup extends LitElement {
     /**

package/dist/components/pivot-item-group/pivot-item-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pivot-item-group.d.ts","sourceRoot":"","sources":["../../../src/components/pivot-item-group/pivot-item-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAKhE,OAAO,EAAC,qBAAqB,EAAe,MAAM,6BAA6B,CAAC;AAEhF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C;;;;;OAKG;IACuB,SAAS,EAAE,qBAAqB,CACvB;IAEnC;;;;OAIG;IACuB,aAAa,SAAM;IAE7C;;;;;OAKG;IACwB,aAAa,UAAS;IAEjD,OAAO,CAAC,kBAAkB;IAqB1B,OAAO,CAAC,gBAAgB;IAWf,YAAY;IAMZ,OAAO,CAAC,iBAAiB,EAAE,cAAc;IASzC,MAAM;IAef,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,iBAAiB,CAAC;KAC3C;CACF"}
+{"version":3,"file":"pivot-item-group.d.ts","sourceRoot":"","sources":["../../../src/components/pivot-item-group/pivot-item-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAKhE,OAAO,EAAC,qBAAqB,EAAe,MAAM,6BAA6B,CAAC;AAEhF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C;;;;;OAKG;IACuB,SAAS,EAAE,qBAAqB,CACvB;IAEnC;;;;OAIG;IACuB,aAAa,SAAM;IAE7C;;;;;OAKG;IACwB,aAAa,UAAS;IAEjD,OAAO,CAAC,kBAAkB;IAqB1B,OAAO,CAAC,gBAAgB;IAWf,YAAY;IAMZ,OAAO,CAAC,iBAAiB,EAAE,cAAc;IASzC,MAAM;IAef,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,iBAAiB,CAAC;KAC3C;CACF"}

package/dist/components/pivot-item-group/pivot-item-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"pivot-item-group.js","sources":["../../../src/components/pivot-item-group/pivot-item-group.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './pivot-item-group.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ObcPivotItemDirection, ObcPivotItem} from '../pivot-item/pivot-item.js';\n\n/**\n * `<obc-pivot-item-group>` – A container for managing a set of pivot items (tab-like or segmented controls) with single selection.\n *\n * Groups multiple `<obc-pivot-item>` components and handles their selection logic, ensuring only one item is selected at a time (or none, if allowed). Provides a way to visually and functionally organize navigation or filtering controls in either a horizontal or vertical layout.\n *\n * ### Features\n * - **Single selection management:** Only one pivot item can be selected at a time. Optionally allows deselecting all.\n * - **Layout direction:** Supports `horizontal` (default, items in a row) or `vertical` (items stacked in a column) via the `direction` property.\n * - **Deselect option:** When `allowDeselect` is true, clicking the selected item will deselect it (no item selected).\n * - **Syncs child state:** Automatically updates all child `<obc-pivot-item>` components to reflect the current selection and layout direction.\n * - **Change event:** Emits a `change` event whenever the selection changes, with the new value.\n *\n * ### Usage Guidelines\n * Use `obc-pivot-item-group` to present a set of mutually exclusive options, such as navigation tabs, segmented controls, or filter toggles. Ideal for scenarios where users need to switch between views, categories, or modes.\n * For independent toggles, use a different component (e.g., checkboxes or chips).\n *\n * - Set the `direction` property to `vertical` for sidebar or stacked layouts, or leave as `horizontal` for toolbar/tab layouts.\n * - Use `allowDeselect` if you want to permit users to clear their selection entirely.\n * - Place one or more `<obc-pivot-item>` elements as children; each should have a unique `value` property.\n *\n * **TODO(designer):** Clarify if there are recommended use cases or visual constraints for horizontal vs. vertical layouts, and if there are accessibility guidelines for keyboard navigation.\n *\n * ### Slots and Content Structure\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always          | Place one or more `<obc-pivot-item>` elements here. Each represents a selectable option. |\n *\n * ### Events\n * - `change` – Fired whenever the selected value changes. Event detail: `{selectedValue: string}`.\n *\n * ### Best Practices and Constraints\n * - Ensure each child `<obc-pivot-item>` has a unique `value` property.\n * - Only use `allowDeselect` if having no selection is a valid state for your use case.\n * - For accessibility, ensure the group and items are labeled appropriately (see `<obc-pivot-item>` docs for ARIA guidance).\n *\n * **Example:**\n * ```html\n * <obc-pivot-item-group direction=\"horizontal\" selectedValue=\"a\">\n *   <obc-pivot-item value=\"a\">Option A</obc-pivot-item>\n *   <obc-pivot-item value=\"b\">Option B</obc-pivot-item>\n *   <obc-pivot-item value=\"c\">Option C</obc-pivot-item>\n * </obc-pivot-item-group>\n * ```\n *\n * @slot - Default slot for one or more `<obc-pivot-item>` elements.\n * @fires {CustomEvent<{selectedValue: string}>} change - Fired when the selected value changes.\n */\n@customElement('obc-pivot-item-group')\nexport class ObcPivotItemGroup extends LitElement {\n  /**\n   * Layout direction for the group: `'horizontal'` (default, items in a row) or `'vertical'` (items stacked).\n   * Changing this updates the direction of all child pivot items.\n   *\n   * @default ObcPivotItemDirection.horizontal\n   */\n  @property({type: String}) direction: ObcPivotItemDirection =\n    ObcPivotItemDirection.horizontal;\n\n  /**\n   * The value of the currently selected pivot item.\n   * Set this to control selection programmatically, or listen for the `change` event to react to user selection.\n   * Defaults to empty string (no selection).\n   */\n  @property({type: String}) selectedValue = '';\n\n  /**\n   * If true, allows the user to deselect the currently selected item by clicking it again (resulting in no selection).\n   * If false (default), one item is always selected unless `selectedValue` is empty.\n   *\n   * @availableWhen selectedValue!=''\n   */\n  @property({type: Boolean}) allowDeselect = false;\n\n  private handleItemSelected(event: CustomEvent) {\n    event.stopPropagation();\n    const {value} = event.detail;\n\n    if (this.allowDeselect && this.selectedValue === value) {\n      this.selectedValue = '';\n    } else {\n      this.selectedValue = value;\n    }\n\n    this.updateChildItems();\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {selectedValue: this.selectedValue},\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private updateChildItems() {\n    const items = this.querySelectorAll(\n      'obc-pivot-item'\n    ) as NodeListOf<ObcPivotItem>;\n\n    items.forEach((item) => {\n      item.selected = item.value === this.selectedValue;\n      item.direction = this.direction;\n    });\n  }\n\n  override firstUpdated() {\n    this.updateComplete.then(() => {\n      this.updateChildItems();\n    });\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    if (\n      changedProperties.has('selectedValue') ||\n      changedProperties.has('direction')\n    ) {\n      this.updateChildItems();\n    }\n  }\n\n  override render() {\n    const classes = classMap({\n      'pivot-group': true,\n      'direction-horizontal':\n        this.direction === ObcPivotItemDirection.horizontal,\n      'direction-vertical': this.direction === ObcPivotItemDirection.vertical,\n    });\n\n    return html`\n      <div class=${classes} @selected=${this.handleItemSelected}>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-pivot-item-group': ObcPivotItemGroup;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAuDO,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AAOqB,SAAA,YACxB,sBAAsB;AAOE,SAAA,gBAAgB;AAQf,SAAA,gBAAgB;AAAA,EAAA;AAAA,EAEnC,mBAAmB,OAAoB;AAC7C,UAAM,gBAAA;AACN,UAAM,EAAC,UAAS,MAAM;AAEtB,QAAI,KAAK,iBAAiB,KAAK,kBAAkB,OAAO;AACtD,WAAK,gBAAgB;AAAA,IACvB,OAAO;AACL,WAAK,gBAAgB;AAAA,IACvB;AAEA,SAAK,iBAAA;AAEL,SAAK;AAAA,MACH,IAAI,YAAY,UAAU;AAAA,QACxB,QAAQ,EAAC,eAAe,KAAK,cAAA;AAAA,QAC7B,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,mBAAmB;AACzB,UAAM,QAAQ,KAAK;AAAA,MACjB;AAAA,IAAA;AAGF,UAAM,QAAQ,CAAC,SAAS;AACtB,WAAK,WAAW,KAAK,UAAU,KAAK;AACpC,WAAK,YAAY,KAAK;AAAA,IACxB,CAAC;AAAA,EACH;AAAA,EAES,eAAe;AACtB,SAAK,eAAe,KAAK,MAAM;AAC7B,WAAK,iBAAA;AAAA,IACP,CAAC;AAAA,EACH;AAAA,EAES,QAAQ,mBAAmC;AAClD,QACE,kBAAkB,IAAI,eAAe,KACrC,kBAAkB,IAAI,WAAW,GACjC;AACA,WAAK,iBAAA;AAAA,IACP;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM,UAAU,SAAS;AAAA,MACvB,eAAe;AAAA,MACf,wBACE,KAAK,cAAc,sBAAsB;AAAA,MAC3C,sBAAsB,KAAK,cAAc,sBAAsB;AAAA,IAAA,CAChE;AAED,WAAO;AAAA,mBACQ,OAAO,cAAc,KAAK,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAI7D;AAGF;AAxFa,kBAuFK,SAAS,UAAU,cAAc;AAhFvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,kBAOe,WAAA,aAAA,CAAA;AAQA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAfb,kBAee,WAAA,iBAAA,CAAA;AAQC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAvBd,kBAuBgB,WAAA,iBAAA,CAAA;AAvBhB,oBAAN,gBAAA;AAAA,EADN,cAAc,sBAAsB;AAAA,GACxB,iBAAA;"}
+{"version":3,"file":"pivot-item-group.js","sources":["../../../src/components/pivot-item-group/pivot-item-group.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './pivot-item-group.css?inline';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {ObcPivotItemDirection, ObcPivotItem} from '../pivot-item/pivot-item.js';\n\n/**\n * `<obc-pivot-item-group>` – A container for managing a set of pivot items (tab-like or segmented controls) with single selection.\n *\n * Groups multiple `<obc-pivot-item>` components and handles their selection logic, ensuring only one item is selected at a time (or none, if allowed). Provides a way to visually and functionally organize navigation or filtering controls in either a horizontal or vertical layout.\n *\n * ### Features\n * - **Single selection management:** Only one pivot item can be selected at a time. Optionally allows deselecting all.\n * - **Layout direction:** Supports `horizontal` (default, items in a row) or `vertical` (items stacked in a column) via the `direction` property.\n * - **Deselect option:** When `allowDeselect` is true, clicking the selected item will deselect it (no item selected).\n * - **Syncs child state:** Automatically updates all child `<obc-pivot-item>` components to reflect the current selection and layout direction.\n * - **Change event:** Emits a `change` event whenever the selection changes, with the new value.\n *\n * ### Usage Guidelines\n * Use `obc-pivot-item-group` to present a set of mutually exclusive options, such as navigation tabs, segmented controls, or filter toggles. Ideal for scenarios where users need to switch between views, categories, or modes.\n * For independent toggles, use a different component (e.g., checkboxes or chips).\n *\n * - Set the `direction` property to `vertical` for sidebar or stacked layouts, or leave as `horizontal` for toolbar/tab layouts.\n * - Use `allowDeselect` if you want to permit users to clear their selection entirely.\n * - Place one or more `<obc-pivot-item>` elements as children; each should have a unique `value` property.\n *\n * **TODO(designer):** Clarify if there are recommended use cases or visual constraints for horizontal vs. vertical layouts, and if there are accessibility guidelines for keyboard navigation.\n *\n * ### Slots and Content Structure\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always          | Place one or more `<obc-pivot-item>` elements here. Each represents a selectable option. |\n *\n * ### Events\n * - `change` – Fired whenever the selected value changes. Event detail: `{selectedValue: string}`.\n *\n * ### Best Practices and Constraints\n * - Ensure each child `<obc-pivot-item>` has a unique `value` property.\n * - Only use `allowDeselect` if having no selection is a valid state for your use case.\n * - For accessibility, ensure the group and items are labeled appropriately (see `<obc-pivot-item>` docs for ARIA guidance).\n *\n * **Example:**\n * ```html\n * <obc-pivot-item-group direction=\"horizontal\" selectedValue=\"a\">\n *   <obc-pivot-item value=\"a\">Option A</obc-pivot-item>\n *   <obc-pivot-item value=\"b\">Option B</obc-pivot-item>\n *   <obc-pivot-item value=\"c\">Option C</obc-pivot-item>\n * </obc-pivot-item-group>\n * ```\n *\n * @slot - Default slot for one or more `<obc-pivot-item>` elements.\n * @fires {CustomEvent<{selectedValue: string}>} change - Fired when the selected value changes.\n * @stable\n */\n@customElement('obc-pivot-item-group')\nexport class ObcPivotItemGroup extends LitElement {\n  /**\n   * Layout direction for the group: `'horizontal'` (default, items in a row) or `'vertical'` (items stacked).\n   * Changing this updates the direction of all child pivot items.\n   *\n   * @default ObcPivotItemDirection.horizontal\n   */\n  @property({type: String}) direction: ObcPivotItemDirection =\n    ObcPivotItemDirection.horizontal;\n\n  /**\n   * The value of the currently selected pivot item.\n   * Set this to control selection programmatically, or listen for the `change` event to react to user selection.\n   * Defaults to empty string (no selection).\n   */\n  @property({type: String}) selectedValue = '';\n\n  /**\n   * If true, allows the user to deselect the currently selected item by clicking it again (resulting in no selection).\n   * If false (default), one item is always selected unless `selectedValue` is empty.\n   *\n   * @availableWhen selectedValue!=''\n   */\n  @property({type: Boolean}) allowDeselect = false;\n\n  private handleItemSelected(event: CustomEvent) {\n    event.stopPropagation();\n    const {value} = event.detail;\n\n    if (this.allowDeselect && this.selectedValue === value) {\n      this.selectedValue = '';\n    } else {\n      this.selectedValue = value;\n    }\n\n    this.updateChildItems();\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {selectedValue: this.selectedValue},\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private updateChildItems() {\n    const items = this.querySelectorAll(\n      'obc-pivot-item'\n    ) as NodeListOf<ObcPivotItem>;\n\n    items.forEach((item) => {\n      item.selected = item.value === this.selectedValue;\n      item.direction = this.direction;\n    });\n  }\n\n  override firstUpdated() {\n    this.updateComplete.then(() => {\n      this.updateChildItems();\n    });\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    if (\n      changedProperties.has('selectedValue') ||\n      changedProperties.has('direction')\n    ) {\n      this.updateChildItems();\n    }\n  }\n\n  override render() {\n    const classes = classMap({\n      'pivot-group': true,\n      'direction-horizontal':\n        this.direction === ObcPivotItemDirection.horizontal,\n      'direction-vertical': this.direction === ObcPivotItemDirection.vertical,\n    });\n\n    return html`\n      <div class=${classes} @selected=${this.handleItemSelected}>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-pivot-item-group': ObcPivotItemGroup;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAwDO,IAAM,oBAAN,cAAgC,WAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA;AAOqB,SAAA,YACxB,sBAAsB;AAOE,SAAA,gBAAgB;AAQf,SAAA,gBAAgB;AAAA,EAAA;AAAA,EAEnC,mBAAmB,OAAoB;AAC7C,UAAM,gBAAA;AACN,UAAM,EAAC,UAAS,MAAM;AAEtB,QAAI,KAAK,iBAAiB,KAAK,kBAAkB,OAAO;AACtD,WAAK,gBAAgB;AAAA,IACvB,OAAO;AACL,WAAK,gBAAgB;AAAA,IACvB;AAEA,SAAK,iBAAA;AAEL,SAAK;AAAA,MACH,IAAI,YAAY,UAAU;AAAA,QACxB,QAAQ,EAAC,eAAe,KAAK,cAAA;AAAA,QAC7B,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,mBAAmB;AACzB,UAAM,QAAQ,KAAK;AAAA,MACjB;AAAA,IAAA;AAGF,UAAM,QAAQ,CAAC,SAAS;AACtB,WAAK,WAAW,KAAK,UAAU,KAAK;AACpC,WAAK,YAAY,KAAK;AAAA,IACxB,CAAC;AAAA,EACH;AAAA,EAES,eAAe;AACtB,SAAK,eAAe,KAAK,MAAM;AAC7B,WAAK,iBAAA;AAAA,IACP,CAAC;AAAA,EACH;AAAA,EAES,QAAQ,mBAAmC;AAClD,QACE,kBAAkB,IAAI,eAAe,KACrC,kBAAkB,IAAI,WAAW,GACjC;AACA,WAAK,iBAAA;AAAA,IACP;AAAA,EACF;AAAA,EAES,SAAS;AAChB,UAAM,UAAU,SAAS;AAAA,MACvB,eAAe;AAAA,MACf,wBACE,KAAK,cAAc,sBAAsB;AAAA,MAC3C,sBAAsB,KAAK,cAAc,sBAAsB;AAAA,IAAA,CAChE;AAED,WAAO;AAAA,mBACQ,OAAO,cAAc,KAAK,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAI7D;AAGF;AAxFa,kBAuFK,SAAS,UAAU,cAAc;AAhFvB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,kBAOe,WAAA,aAAA,CAAA;AAQA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAfb,kBAee,WAAA,iBAAA,CAAA;AAQC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAvBd,kBAuBgB,WAAA,iBAAA,CAAA;AAvBhB,oBAAN,gBAAA;AAAA,EADN,cAAc,sBAAsB;AAAA,GACxB,iBAAA;"}

package/dist/components/slide-button/slide-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slide-button.d.ts","sourceRoot":"","sources":["../../../src/components/slide-button/slide-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,iDAAiD,CAAC;AAGzD,MAAM,MAAM,wBAAwB,GAAG,WAAW,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAC,CAAC,CAAC;AAEzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C;;OAEG;IACwB,QAAQ,UAAS;IAE5C;;OAEG;IACwB,cAAc,UAAS;IAElD;;OAEG;IACwB,UAAU,UAAS;IAE9C;;OAEG;IACwB,WAAW,UAAS;IAEtC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,aAAa,CAAS;IAEvC,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,cAAc,CAAO;IAG7B,OAAO,CAAC,SAAS,CAAC,CAAc;IAGhC,OAAO,CAAC,kBAAkB,CAAC,CAAc;IAEzC,OAAO,CAAC,WAAW,CAiBjB;IAEF,OAAO,CAAC,UAAU,CAchB;IAEF,OAAO,CAAC,SAAS,CAyBf;IAEF,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,aAAa,CAMnB;IAEF,OAAO,CAAC,wBAAwB,CAAuC;IAEvE,OAAO,CAAC,oBAAoB;IAuB5B,OAAO,CAAC,cAAc;IAUb,YAAY;IAUZ,MAAM;IA4Df,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"slide-button.d.ts","sourceRoot":"","sources":["../../../src/components/slide-button/slide-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA2B,MAAM,KAAK,CAAC;AAKzD,OAAO,iDAAiD,CAAC;AAGzD,MAAM,MAAM,wBAAwB,GAAG,WAAW,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAC,CAAC,CAAC;AAEzE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C;;OAEG;IACwB,QAAQ,UAAS;IAE5C;;OAEG;IACwB,cAAc,UAAS;IAElD;;OAEG;IACwB,UAAU,UAAS;IAE9C;;OAEG;IACwB,WAAW,UAAS;IAEtC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,aAAa,CAAS;IAEvC,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,cAAc,CAAO;IAG7B,OAAO,CAAC,SAAS,CAAC,CAAc;IAGhC,OAAO,CAAC,kBAAkB,CAAC,CAAc;IAEzC,OAAO,CAAC,WAAW,CAiBjB;IAEF,OAAO,CAAC,UAAU,CAchB;IAEF,OAAO,CAAC,SAAS,CAyBf;IAEF,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,aAAa,CAMnB;IAEF,OAAO,CAAC,wBAAwB,CAAuC;IAEvE,OAAO,CAAC,oBAAoB;IAuB5B,OAAO,CAAC,cAAc;IAUb,YAAY;IAUZ,MAAM;IA4Df,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}