@carbon/web-components 2.0.0-beta.3 → 2.0.0-beta.4

package/es/components/ui-shell/header-menu-button.js

@@ -19,7 +19,7 @@ import Menu20 from "../../icons/menu/20";
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
-import { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './side-nav';
+import { SIDE_NAV_COLLAPSE_MODE } from './side-nav';
 import styles from "././header.css.js";
 
 /**
@@ -37,15 +37,15 @@ import styles from "././header.css.js";
      * @csspart toggle-icon The toggle icon.
      * @fires cds-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture.
      */
-let BXHeaderMenuButton = _decorate([customElement(`${prefix}-header-menu-button`)], function (_initialize, _FocusMixin) {
-  class BXHeaderMenuButton extends _FocusMixin {
+let CDSHeaderMenuButton = _decorate([customElement(`${prefix}-header-menu-button`)], function (_initialize, _FocusMixin) {
+  class CDSHeaderMenuButton extends _FocusMixin {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXHeaderMenuButton,
+    F: CDSHeaderMenuButton,
     d: [{
       kind: "method",
       key: "_handleClick",
@@ -116,12 +116,12 @@ let BXHeaderMenuButton = _decorate([customElement(`${prefix}-header-menu-button`
     }, {
       kind: "field",
       decorators: [property({
-        reflect: true,
-        attribute: 'usage-mode'
+        type: Boolean,
+        attribute: 'is-not-child-of-header'
       })],
-      key: "usageMode",
+      key: "isNotChildOfHeader",
       value() {
-        return SIDE_NAV_USAGE_MODE.REGULAR;
+        return false;
       }
     }, {
       kind: "method",
@@ -140,7 +140,7 @@ let BXHeaderMenuButton = _decorate([customElement(`${prefix}-header-menu-button`
        * `true` if the button should be disabled.
        */
       /**
-       * Usage mode of the side nav.
+       * If `true` will style the side nav to sit below the header
        */
       function render() {
         const {
@@ -200,5 +200,5 @@ let BXHeaderMenuButton = _decorate([customElement(`${prefix}-header-menu-button`
     }]
   };
 }, FocusMixin(LitElement));
-export default BXHeaderMenuButton;
+export default CDSHeaderMenuButton;
 //# sourceMappingURL=header-menu-button.js.map

package/es/components/ui-shell/header-menu-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-menu-button.js","names":["classMap","LitElement","html","property","customElement","Close20","Menu20","ifDefined","prefix","FocusMixin","SIDE_NAV_COLLAPSE_MODE","SIDE_NAV_USAGE_MODE","styles","BXHeaderMenuButton","_decorate","_initialize","_FocusMixin","constructor","args","F","d","kind","key","value","_handleClick","active","dispatchEvent","CustomEvent","eventToggle","bubbles","cancelable","composed","detail","decorators","type","Boolean","reflect","attribute","RESPONSIVE","REGULAR","render","buttonLabelActive","buttonLabelInactive","disabled","handleClick","buttonLabel","classes","_t","_","slot","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/ui-shell/header-menu-button.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport Close20 from '@carbon/icons/lib/close/20';\nimport Menu20 from '@carbon/icons/lib/menu/20';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './side-nav';\nimport styles from './header.scss';\n\n/**\n * The trigger button for side nav in header nav.\n *\n * @element cds-header-menu-button\n * @csspart button The button.\n * @csspart toggle-icon The toggle icon.\n * @fires cds-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture.\n */\n@customElement(`${prefix}-header-menu-button`)\nclass BXHeaderMenuButton extends FocusMixin(LitElement) {\n  private _handleClick() {\n    const active = !this.active;\n    this.active = active;\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof BXHeaderMenuButton).eventToggle,\n        {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: {\n            active,\n          },\n        }\n      )\n    );\n  }\n\n  /**\n   * `true` if the button should represent its active state.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * The `aria-label` attribute for the button in its active state.\n   */\n  @property({ attribute: 'button-label-active' })\n  buttonLabelActive = 'Close navigation menu';\n\n  /**\n   * The `aria-label` attribute for the button in its inactive state.\n   */\n  @property({ attribute: 'button-label-inactive' })\n  buttonLabelInactive = 'Open navigation menu';\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` if the button should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Usage mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'usage-mode' })\n  usageMode = SIDE_NAV_USAGE_MODE.REGULAR;\n\n  render() {\n    const {\n      active,\n      buttonLabelActive,\n      buttonLabelInactive,\n      disabled,\n      _handleClick: handleClick,\n    } = this;\n    const buttonLabel = active ? buttonLabelActive : buttonLabelInactive;\n    const classes = classMap({\n      [`${prefix}--header__action`]: true,\n      [`${prefix}--header__menu-trigger`]: true,\n      [`${prefix}--header__menu-toggle`]: true,\n      [`${prefix}--header__action--active`]: active,\n    });\n    return html`\n      <button\n        part=\"button\"\n        class=\"${classes}\"\n        ?disabled=${disabled}\n        aria-label=\"${ifDefined(buttonLabel)}\"\n        @click=${handleClick}>\n        ${(active ? Close20 : Menu20)({ slot: 'toggle-icon' })}\n      </button>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this header menu button is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXHeaderMenuButton;\n"],"mappings":"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"}
+{"version":3,"file":"header-menu-button.js","names":["classMap","LitElement","html","property","customElement","Close20","Menu20","ifDefined","prefix","FocusMixin","SIDE_NAV_COLLAPSE_MODE","styles","CDSHeaderMenuButton","_decorate","_initialize","_FocusMixin","constructor","args","F","d","kind","key","value","_handleClick","active","dispatchEvent","CustomEvent","eventToggle","bubbles","cancelable","composed","detail","decorators","type","Boolean","reflect","attribute","RESPONSIVE","render","buttonLabelActive","buttonLabelInactive","disabled","handleClick","buttonLabel","classes","_t","_","slot","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/ui-shell/header-menu-button.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport Close20 from '@carbon/icons/lib/close/20';\nimport Menu20 from '@carbon/icons/lib/menu/20';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { SIDE_NAV_COLLAPSE_MODE } from './side-nav';\nimport styles from './header.scss';\n\n/**\n * The trigger button for side nav in header nav.\n *\n * @element cds-header-menu-button\n * @csspart button The button.\n * @csspart toggle-icon The toggle icon.\n * @fires cds-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture.\n */\n@customElement(`${prefix}-header-menu-button`)\nclass CDSHeaderMenuButton extends FocusMixin(LitElement) {\n  private _handleClick() {\n    const active = !this.active;\n    this.active = active;\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSHeaderMenuButton).eventToggle,\n        {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: {\n            active,\n          },\n        }\n      )\n    );\n  }\n\n  /**\n   * `true` if the button should represent its active state.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * The `aria-label` attribute for the button in its active state.\n   */\n  @property({ attribute: 'button-label-active' })\n  buttonLabelActive = 'Close navigation menu';\n\n  /**\n   * The `aria-label` attribute for the button in its inactive state.\n   */\n  @property({ attribute: 'button-label-inactive' })\n  buttonLabelInactive = 'Open navigation menu';\n\n  /**\n   * Collapse mode of the side nav.\n   */\n  @property({ reflect: true, attribute: 'collapse-mode' })\n  collapseMode = SIDE_NAV_COLLAPSE_MODE.RESPONSIVE;\n\n  /**\n   * `true` if the button should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * If `true` will style the side nav to sit below the header\n   */\n  @property({\n    type: Boolean,\n    attribute: 'is-not-child-of-header',\n  })\n  isNotChildOfHeader = false;\n\n  render() {\n    const {\n      active,\n      buttonLabelActive,\n      buttonLabelInactive,\n      disabled,\n      _handleClick: handleClick,\n    } = this;\n    const buttonLabel = active ? buttonLabelActive : buttonLabelInactive;\n    const classes = classMap({\n      [`${prefix}--header__action`]: true,\n      [`${prefix}--header__menu-trigger`]: true,\n      [`${prefix}--header__menu-toggle`]: true,\n      [`${prefix}--header__action--active`]: active,\n    });\n    return html`\n      <button\n        part=\"button\"\n        class=\"${classes}\"\n        ?disabled=${disabled}\n        aria-label=\"${ifDefined(buttonLabel)}\"\n        @click=${handleClick}>\n        ${(active ? Close20 : Menu20)({ slot: 'toggle-icon' })}\n      </button>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this header menu button is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-header-menu-button-toggled`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderMenuButton;\n"],"mappings":"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"}

package/es/components/ui-shell/header-menu-item.d.ts

@@ -6,14 +6,14 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import BXHeaderNavItem from './header-nav-item';
+import CDSHeaderNavItem from './header-nav-item';
 /**
  * Header submenu item.
  *
  * @element cds-header-menu-item
  */
-declare class BXHeaderMenuItem extends BXHeaderNavItem {
+declare class CDSHeaderMenuItem extends CDSHeaderNavItem {
 }
-export default BXHeaderMenuItem;
+export default CDSHeaderMenuItem;
 
 //# sourceMappingURL=header-menu-item.d.ts.map

package/es/components/ui-shell/header-menu-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ui-shell/header-menu-item.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD;;;;GAIG;AACH,cACM,gBAAiB,SAAQ,eAAe;CAAG;AAEjD,eAAe,gBAAgB,CAAC","file":"header-menu-item.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport BXHeaderNavItem from './header-nav-item';\n\n/**\n * Header submenu item.\n *\n * @element cds-header-menu-item\n */\n@customElement(`${prefix}-header-menu-item`)\nclass BXHeaderMenuItem extends BXHeaderNavItem {}\n\nexport default BXHeaderMenuItem;\n"]}
+{"version":3,"sources":["components/ui-shell/header-menu-item.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,gBAAgB,MAAM,mBAAmB,CAAC;AAEjD;;;;GAIG;AACH,cACM,iBAAkB,SAAQ,gBAAgB;CAAG;AAEnD,eAAe,iBAAiB,CAAC","file":"header-menu-item.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSHeaderNavItem from './header-nav-item';\n\n/**\n * Header submenu item.\n *\n * @element cds-header-menu-item\n */\n@customElement(`${prefix}-header-menu-item`)\nclass CDSHeaderMenuItem extends CDSHeaderNavItem {}\n\nexport default CDSHeaderMenuItem;\n"]}

package/es/components/ui-shell/header-menu-item.js

@@ -10,24 +10,24 @@ import _decorate from "@babel/runtime/helpers/esm/decorate";
 
 import { customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import BXHeaderNavItem from './header-nav-item';
+import CDSHeaderNavItem from './header-nav-item';
 
 /**
  * Header submenu item.
  *
  * @element cds-header-menu-item
  */
-let BXHeaderMenuItem = _decorate([customElement(`${prefix}-header-menu-item`)], function (_initialize, _BXHeaderNavItem) {
-  class BXHeaderMenuItem extends _BXHeaderNavItem {
+let CDSHeaderMenuItem = _decorate([customElement(`${prefix}-header-menu-item`)], function (_initialize, _CDSHeaderNavItem) {
+  class CDSHeaderMenuItem extends _CDSHeaderNavItem {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXHeaderMenuItem,
+    F: CDSHeaderMenuItem,
     d: []
   };
-}, BXHeaderNavItem);
-export default BXHeaderMenuItem;
+}, CDSHeaderNavItem);
+export default CDSHeaderMenuItem;
 //# sourceMappingURL=header-menu-item.js.map

package/es/components/ui-shell/header-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-menu-item.js","names":["customElement","prefix","BXHeaderNavItem","BXHeaderMenuItem","_decorate","_initialize","_BXHeaderNavItem","constructor","args","F","d"],"sources":["components/ui-shell/header-menu-item.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport BXHeaderNavItem from './header-nav-item';\n\n/**\n * Header submenu item.\n *\n * @element cds-header-menu-item\n */\n@customElement(`${prefix}-header-menu-item`)\nclass BXHeaderMenuItem extends BXHeaderNavItem {}\n\nexport default BXHeaderMenuItem;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,aAAa,QAAQ,mBAAmB;AACjD,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,eAAe,MAAM,mBAAmB;;AAE/C;AACA;AACA;AACA;AACA;AAJA,IAMMC,gBAAgB,GAAAC,SAAA,EADrBJ,aAAa,CAAE,GAAEC,MAAO,mBAAkB,CAAC,aAAAI,WAAA,EAAAC,gBAAA;EAA5C,MACMH,gBAAgB,SAAAG,gBAAA,CAAyB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAAC;EAAC;IAAAI,CAAA,EAA3CN,gBAAgB;IAAAO,CAAA;EAAA;AAAA,GAASR,eAAe;AAE9C,eAAeC,gBAAgB"}
+{"version":3,"file":"header-menu-item.js","names":["customElement","prefix","CDSHeaderNavItem","CDSHeaderMenuItem","_decorate","_initialize","_CDSHeaderNavItem","constructor","args","F","d"],"sources":["components/ui-shell/header-menu-item.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSHeaderNavItem from './header-nav-item';\n\n/**\n * Header submenu item.\n *\n * @element cds-header-menu-item\n */\n@customElement(`${prefix}-header-menu-item`)\nclass CDSHeaderMenuItem extends CDSHeaderNavItem {}\n\nexport default CDSHeaderMenuItem;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,aAAa,QAAQ,mBAAmB;AACjD,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,gBAAgB,MAAM,mBAAmB;;AAEhD;AACA;AACA;AACA;AACA;AAJA,IAMMC,iBAAiB,GAAAC,SAAA,EADtBJ,aAAa,CAAE,GAAEC,MAAO,mBAAkB,CAAC,aAAAI,WAAA,EAAAC,iBAAA;EAA5C,MACMH,iBAAiB,SAAAG,iBAAA,CAA0B;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAAC;EAAC;IAAAI,CAAA,EAA7CN,iBAAiB;IAAAO,CAAA;EAAA;AAAA,GAASR,gBAAgB;AAEhD,eAAeC,iBAAiB"}

package/es/components/ui-shell/header-menu.d.ts

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { LitElement } from 'lit';
-declare const BXHeaderMenu_base: {
+declare const CDSHeaderMenu_base: {
     new (...args: any[]): {
         _handles: Set<import("../../globals/internal/handle").default>;
         connectedCallback(): void;
@@ -636,11 +636,15 @@ declare const BXHeaderMenu_base: {
  * @csspart trigger-icon The trigger button icon.
  * @csspart menu-body The menu body.
  */
-declare class BXHeaderMenu extends BXHeaderMenu_base {
+declare class CDSHeaderMenu extends CDSHeaderMenu_base {
     /**
      * The trigger button.
      */
     private _trigger;
+    /**
+     * keeps track if header menu has any active submenus
+     */
+    private _hasActiveChildren;
     /**
      * Handles `click` event handler on this element.
      */
@@ -663,6 +667,10 @@ declare class BXHeaderMenu extends BXHeaderMenu_base {
      * `true` if the menu should be expanded.
      */
     expanded: boolean;
+    /**
+     * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+     */
+    isActive: boolean;
     /**
      * The content of the trigger button.
      */
@@ -685,6 +693,6 @@ declare class BXHeaderMenu extends BXHeaderMenu_base {
     };
     static styles: any;
 }
-export default BXHeaderMenu;
+export default CDSHeaderMenu;
 
 //# sourceMappingURL=header-menu.d.ts.map

package/es/components/ui-shell/header-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ui-shell/header-menu.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUvC;;;;;;;GAOG;AACH,cACM,YAAa,SAAQ,iBAAyC;IAClE;;OAEG;IAEH,OAAO,CAAC,QAAQ,CAAe;IAE/B;;OAEG;IACH,OAAO,CAAC,YAAY;IAIpB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAM7B;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAOlC;;OAEG;IAGH,OAAO,CAAC,WAAW;IAMnB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,EAAG,MAAM,CAAC;IAEnB,iBAAiB;IAOjB,OAAO,CAAC,iBAAiB,KAAA;IAUzB,MAAM;IAgCN;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,YAAY,CAAC","file":"header-menu.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport ChevronDownGlyph from '@carbon/icons/lib/chevron--down/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport styles from './header.scss';\n\n/**\n * Header menu.\n *\n * @element cds-header-menu\n * @csspart trigger The trigger button.\n * @csspart trigger-icon The trigger button icon.\n * @csspart menu-body The menu body.\n */\n@customElement(`${prefix}-header-menu`)\nclass BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The trigger button.\n   */\n  @query('a')\n  private _trigger!: HTMLElement;\n\n  /**\n   * Handles `click` event handler on this element.\n   */\n  private _handleClick() {\n    this._handleUserInitiatedToggle();\n  }\n\n  /**\n   * Handler for the `keydown` event on the trigger button.\n   */\n  private _handleKeydownTrigger({ key }: KeyboardEvent) {\n    if (key === 'Esc' || key === 'Escape') {\n      this._handleUserInitiatedToggle(false);\n    }\n  }\n\n  /**\n   * Handles user-initiated toggling the open state.\n   *\n   * @param [force] If specified, forces the open state to the given one.\n   */\n  private _handleUserInitiatedToggle(force: boolean = !this.expanded) {\n    this.expanded = force;\n    if (!force) {\n      this._trigger.focus();\n    }\n  }\n\n  /**\n   * Handles `blur` event handler on this element.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur({ relatedTarget }: FocusEvent) {\n    if (!this.contains(relatedTarget as Node)) {\n      this.expanded = false;\n    }\n  }\n\n  /**\n   * `true` if the menu should be expanded.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * The content of the trigger button.\n   */\n  @property({ attribute: 'trigger-content' })\n  triggerContent = '';\n\n  /**\n   * The `aria-label` attribute for the menu UI.\n   */\n  @property({ attribute: 'menu-label' })\n  menuLabel!: string;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      const { selectorItem } = this.constructor as typeof BXHeaderMenu;\n      const { expanded } = this;\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as HTMLElement).tabIndex = expanded ? 0 : -1;\n      });\n    }\n  }\n\n  render() {\n    const {\n      expanded,\n      triggerContent,\n      menuLabel,\n      _handleClick: handleClick,\n      _handleKeydownTrigger: handleKeydownTrigger,\n    } = this;\n    return html`\n      <a\n        part=\"trigger\"\n        tabindex=\"0\"\n        class=\"${prefix}--header__menu-item ${prefix}--header__menu-title\"\n        href=\"javascript:void 0\"\n        aria-haspopup=\"menu\"\n        aria-expanded=\"${String(Boolean(expanded))}\"\n        @click=${handleClick}\n        @keydown=${handleKeydownTrigger}>\n        ${triggerContent}${ChevronDownGlyph({\n          part: 'trigger-icon',\n          class: `${prefix}--header__menu-arrow`,\n        })}\n      </a>\n      <ul\n        part=\"menu-body\"\n        class=\"${prefix}--header__menu\"\n        aria-label=\"${ifDefined(menuLabel)}\">\n        <slot></slot>\n      </ul>\n    `;\n  }\n\n  /**\n   * A selector that will return the menu items.\n   */\n  static get selectorItem() {\n    return `${prefix}-header-menu-item`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXHeaderMenu;\n"]}
+{"version":3,"sources":["components/ui-shell/header-menu.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYvC;;;;;;;GAOG;AACH,cACM,aAAc,SAAQ,kBAAyC;IACnE;;OAEG;IAEH,OAAO,CAAC,QAAQ,CAAe;IAE/B;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAS;IAEnC;;OAEG;IACH,OAAO,CAAC,YAAY;IAIpB;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAM7B;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAOlC;;OAEG;IAGH,OAAO,CAAC,WAAW;IAMnB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,cAAc,SAAM;IAEpB;;OAEG;IAEH,SAAS,EAAG,MAAM,CAAC;IAEnB,iBAAiB;IAcjB,OAAO,CAAC,iBAAiB,KAAA;IAUzB,MAAM;IA0CN;;OAEG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"header-menu.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport ChevronDownGlyph from '@carbon/icons/lib/chevron--down/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport CDSHeaderMenuItem from './header-menu-item';\nimport styles from './header.scss';\n\n/**\n * Header menu.\n *\n * @element cds-header-menu\n * @csspart trigger The trigger button.\n * @csspart trigger-icon The trigger button icon.\n * @csspart menu-body The menu body.\n */\n@customElement(`${prefix}-header-menu`)\nclass CDSHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The trigger button.\n   */\n  @query('a')\n  private _trigger!: HTMLElement;\n\n  /**\n   * keeps track if header menu has any active submenus\n   */\n  private _hasActiveChildren = false;\n\n  /**\n   * Handles `click` event handler on this element.\n   */\n  private _handleClick() {\n    this._handleUserInitiatedToggle();\n  }\n\n  /**\n   * Handler for the `keydown` event on the trigger button.\n   */\n  private _handleKeydownTrigger({ key }: KeyboardEvent) {\n    if (key === 'Esc' || key === 'Escape') {\n      this._handleUserInitiatedToggle(false);\n    }\n  }\n\n  /**\n   * Handles user-initiated toggling the open state.\n   *\n   * @param [force] If specified, forces the open state to the given one.\n   */\n  private _handleUserInitiatedToggle(force: boolean = !this.expanded) {\n    this.expanded = force;\n    if (!force) {\n      this._trigger.focus();\n    }\n  }\n\n  /**\n   * Handles `blur` event handler on this element.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur({ relatedTarget }: FocusEvent) {\n    if (!this.contains(relatedTarget as Node)) {\n      this.expanded = false;\n    }\n  }\n\n  /**\n   * `true` if the menu should be expanded.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.\n   */\n  @property({ type: Boolean, attribute: 'is-active', reflect: true })\n  isActive = false;\n\n  /**\n   * The content of the trigger button.\n   */\n  @property({ attribute: 'trigger-content' })\n  triggerContent = '';\n\n  /**\n   * The `aria-label` attribute for the menu UI.\n   */\n  @property({ attribute: 'menu-label' })\n  menuLabel!: string;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    const { selectorItem } = this.constructor as typeof CDSHeaderMenu;\n    forEach(this.querySelectorAll(selectorItem), (elem) => {\n      if ((elem as CDSHeaderMenuItem).isActive === true) {\n        this._hasActiveChildren = true;\n      }\n    });\n\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      const { selectorItem } = this.constructor as typeof CDSHeaderMenu;\n      const { expanded } = this;\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as HTMLElement).tabIndex = expanded ? 0 : -1;\n      });\n    }\n  }\n\n  render() {\n    const {\n      expanded,\n      isActive,\n      triggerContent,\n      menuLabel,\n      _hasActiveChildren,\n      _handleClick: handleClick,\n      _handleKeydownTrigger: handleKeydownTrigger,\n    } = this;\n\n    const linkClasses = classMap({\n      [`${prefix}--header__menu-item`]: true,\n      [`${prefix}--header__menu-title`]: true,\n      [`${prefix}--header__menu-item--current`]:\n        isActive || (_hasActiveChildren && !expanded),\n    });\n\n    return html`\n      <a\n        part=\"trigger\"\n        tabindex=\"0\"\n        class=\"${linkClasses}\"\n        href=\"javascript:void 0\"\n        aria-haspopup=\"menu\"\n        aria-expanded=\"${String(Boolean(expanded))}\"\n        @click=${handleClick}\n        @keydown=${handleKeydownTrigger}>\n        ${triggerContent}${ChevronDownGlyph({\n          part: 'trigger-icon',\n          class: `${prefix}--header__menu-arrow`,\n        })}\n      </a>\n      <ul\n        part=\"menu-body\"\n        class=\"${prefix}--header__menu\"\n        aria-label=\"${ifDefined(menuLabel)}\">\n        <slot></slot>\n      </ul>\n    `;\n  }\n\n  /**\n   * A selector that will return the menu items.\n   */\n  static get selectorItem() {\n    return `${prefix}-header-menu-item`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderMenu;\n"]}

package/es/components/ui-shell/header-menu.js

@@ -16,6 +16,7 @@ let _ = t => t,
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LitElement, html } from 'lit';
 import { property, customElement, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import ChevronDownGlyph from "../../icons/chevron--down/16";
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
@@ -39,20 +40,26 @@ import styles from "././header.css.js";
      * @csspart trigger-icon The trigger button icon.
      * @csspart menu-body The menu body.
      */
-let BXHeaderMenu = _decorate([customElement(`${prefix}-header-menu`)], function (_initialize, _HostListenerMixin) {
-  class BXHeaderMenu extends _HostListenerMixin {
+let CDSHeaderMenu = _decorate([customElement(`${prefix}-header-menu`)], function (_initialize, _HostListenerMixin) {
+  class CDSHeaderMenu extends _HostListenerMixin {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXHeaderMenu,
+    F: CDSHeaderMenu,
     d: [{
       kind: "field",
       decorators: [query('a')],
       key: "_trigger",
       value: void 0
+    }, {
+      kind: "field",
+      key: "_hasActiveChildren",
+      value() {
+        return false;
+      }
     }, {
       kind: "method",
       key: "_handleClick",
@@ -61,6 +68,10 @@ let BXHeaderMenu = _decorate([customElement(`${prefix}-header-menu`)], function
        * The trigger button.
        */
 
+      /**
+       * keeps track if header menu has any active submenus
+       */
+
       /**
        * Handles `click` event handler on this element.
        */
@@ -125,6 +136,17 @@ let BXHeaderMenu = _decorate([customElement(`${prefix}-header-menu`)], function
       value() {
         return false;
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        attribute: 'is-active',
+        reflect: true
+      })],
+      key: "isActive",
+      value() {
+        return false;
+      }
     }, {
       kind: "field",
       decorators: [property({
@@ -145,6 +167,9 @@ let BXHeaderMenu = _decorate([customElement(`${prefix}-header-menu`)], function
       kind: "method",
       key: "connectedCallback",
       value:
+      /**
+       * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+       */
       /**
        * The content of the trigger button.
        */
@@ -155,7 +180,15 @@ let BXHeaderMenu = _decorate([customElement(`${prefix}-header-menu`)], function
         if (!this.hasAttribute('role')) {
           this.setAttribute('role', 'listitem');
         }
-        _get(_getPrototypeOf(BXHeaderMenu.prototype), "connectedCallback", this).call(this);
+        const {
+          selectorItem
+        } = this.constructor;
+        forEach(this.querySelectorAll(selectorItem), elem => {
+          if (elem.isActive === true) {
+            this._hasActiveChildren = true;
+          }
+        });
+        _get(_getPrototypeOf(CDSHeaderMenu.prototype), "connectedCallback", this).call(this);
       }
     }, {
       kind: "method",
@@ -179,16 +212,23 @@ let BXHeaderMenu = _decorate([customElement(`${prefix}-header-menu`)], function
       value: function render() {
         const {
           expanded,
+          isActive,
           triggerContent,
           menuLabel,
+          _hasActiveChildren,
           _handleClick: handleClick,
           _handleKeydownTrigger: handleKeydownTrigger
         } = this;
+        const linkClasses = classMap({
+          [`${prefix}--header__menu-item`]: true,
+          [`${prefix}--header__menu-title`]: true,
+          [`${prefix}--header__menu-item--current`]: isActive || _hasActiveChildren && !expanded
+        });
         return html(_t || (_t = _`
       <a
         part="trigger"
         tabindex="0"
-        class="${0}--header__menu-item ${0}--header__menu-title"
+        class="${0}"
         href="javascript:void 0"
         aria-haspopup="menu"
         aria-expanded="${0}"
@@ -202,7 +242,7 @@ let BXHeaderMenu = _decorate([customElement(`${prefix}-header-menu`)], function
         aria-label="${0}">
         <slot></slot>
       </ul>
-    `), prefix, prefix, String(Boolean(expanded)), handleClick, handleKeydownTrigger, triggerContent, ChevronDownGlyph({
+    `), linkClasses, String(Boolean(expanded)), handleClick, handleKeydownTrigger, triggerContent, ChevronDownGlyph({
           part: 'trigger-icon',
           class: `${prefix}--header__menu-arrow`
         }), prefix, ifDefined(menuLabel));
@@ -237,5 +277,5 @@ let BXHeaderMenu = _decorate([customElement(`${prefix}-header-menu`)], function
     }]
   };
 }, HostListenerMixin(FocusMixin(LitElement)));
-export default BXHeaderMenu;
+export default CDSHeaderMenu;
 //# sourceMappingURL=header-menu.js.map

package/es/components/ui-shell/header-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-menu.js","names":["ifDefined","LitElement","html","property","customElement","query","ChevronDownGlyph","prefix","FocusMixin","HostListenerMixin","HostListener","forEach","styles","BXHeaderMenu","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","decorators","key","value","_handleClick","_handleUserInitiatedToggle","_handleKeydownTrigger","force","expanded","_trigger","focus","_handleBlur","relatedTarget","contains","type","Boolean","reflect","attribute","connectedCallback","hasAttribute","setAttribute","_get","_getPrototypeOf","prototype","call","updated","changedProperties","has","selectorItem","querySelectorAll","elem","tabIndex","render","triggerContent","menuLabel","handleClick","handleKeydownTrigger","_t","_","String","part","class","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/ui-shell/header-menu.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport ChevronDownGlyph from '@carbon/icons/lib/chevron--down/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport styles from './header.scss';\n\n/**\n * Header menu.\n *\n * @element cds-header-menu\n * @csspart trigger The trigger button.\n * @csspart trigger-icon The trigger button icon.\n * @csspart menu-body The menu body.\n */\n@customElement(`${prefix}-header-menu`)\nclass BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The trigger button.\n   */\n  @query('a')\n  private _trigger!: HTMLElement;\n\n  /**\n   * Handles `click` event handler on this element.\n   */\n  private _handleClick() {\n    this._handleUserInitiatedToggle();\n  }\n\n  /**\n   * Handler for the `keydown` event on the trigger button.\n   */\n  private _handleKeydownTrigger({ key }: KeyboardEvent) {\n    if (key === 'Esc' || key === 'Escape') {\n      this._handleUserInitiatedToggle(false);\n    }\n  }\n\n  /**\n   * Handles user-initiated toggling the open state.\n   *\n   * @param [force] If specified, forces the open state to the given one.\n   */\n  private _handleUserInitiatedToggle(force: boolean = !this.expanded) {\n    this.expanded = force;\n    if (!force) {\n      this._trigger.focus();\n    }\n  }\n\n  /**\n   * Handles `blur` event handler on this element.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur({ relatedTarget }: FocusEvent) {\n    if (!this.contains(relatedTarget as Node)) {\n      this.expanded = false;\n    }\n  }\n\n  /**\n   * `true` if the menu should be expanded.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * The content of the trigger button.\n   */\n  @property({ attribute: 'trigger-content' })\n  triggerContent = '';\n\n  /**\n   * The `aria-label` attribute for the menu UI.\n   */\n  @property({ attribute: 'menu-label' })\n  menuLabel!: string;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      const { selectorItem } = this.constructor as typeof BXHeaderMenu;\n      const { expanded } = this;\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as HTMLElement).tabIndex = expanded ? 0 : -1;\n      });\n    }\n  }\n\n  render() {\n    const {\n      expanded,\n      triggerContent,\n      menuLabel,\n      _handleClick: handleClick,\n      _handleKeydownTrigger: handleKeydownTrigger,\n    } = this;\n    return html`\n      <a\n        part=\"trigger\"\n        tabindex=\"0\"\n        class=\"${prefix}--header__menu-item ${prefix}--header__menu-title\"\n        href=\"javascript:void 0\"\n        aria-haspopup=\"menu\"\n        aria-expanded=\"${String(Boolean(expanded))}\"\n        @click=${handleClick}\n        @keydown=${handleKeydownTrigger}>\n        ${triggerContent}${ChevronDownGlyph({\n          part: 'trigger-icon',\n          class: `${prefix}--header__menu-arrow`,\n        })}\n      </a>\n      <ul\n        part=\"menu-body\"\n        class=\"${prefix}--header__menu\"\n        aria-label=\"${ifDefined(menuLabel)}\">\n        <slot></slot>\n      </ul>\n    `;\n  }\n\n  /**\n   * A selector that will return the menu items.\n   */\n  static get selectorItem() {\n    return `${prefix}-header-menu-item`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXHeaderMenu;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,QAAQ,8BAA8B;AACxD,SAASC,UAAU,EAAEC,IAAI,QAAQ,KAAK;AACtC,SAASC,QAAQ,EAAEC,aAAa,EAAEC,KAAK,QAAQ,mBAAmB;AAClE,OAAOC,gBAAgB,MAAM,8BAAoC;AACjE,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,UAAU,MAAM,4BAA4B;AACnD,OAAOC,iBAAiB,MAAM,oCAAoC;AAClE,OAAOC,YAAY,MAAM,wCAAwC;AACjE,SAASC,OAAO,QAAQ,2CAA2C;AACnE,OAAOC,MAAM,MAAM,mBAAe;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAPA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAPA,IASMC,YAAY,GAAAC,SAAA,EADjBV,aAAa,CAAE,GAAEG,MAAO,cAAa,CAAC,aAAAQ,WAAA,EAAAC,kBAAA;EAAvC,MACMH,YAAY,SAAAG,kBAAA,CAAmD;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EA6HrE;EAAC;IAAAI,CAAA,EA7HKN,YAAY;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAIfjB,KAAK,CAAC,GAAG,CAAC;MAAAkB,GAAA;MAAAC,KAAA;IAAA;MAAAH,IAAA;MAAAE,GAAA;MAAAC,KAAA;MAHX;AACF;AACA;;MAIE;AACF;AACA;MACE,SAAAC,aAAA,EAAuB;QACrB,IAAI,CAACC,0BAA0B,EAAE;MACnC;;MAEA;AACF;AACA;IAFE;MAAAL,IAAA;MAAAE,GAAA;MAAAC,KAAA,EAGA,SAAAG,sBAA8B;QAAEJ;MAAmB,CAAC,EAAE;QACpD,IAAIA,GAAG,KAAK,KAAK,IAAIA,GAAG,KAAK,QAAQ,EAAE;UACrC,IAAI,CAACG,0BAA0B,CAAC,KAAK,CAAC;QACxC;MACF;;MAEA;AACF;AACA;AACA;AACA;IAJE;MAAAL,IAAA;MAAAE,GAAA;MAAAC,KAAA,EAKA,SAAAE,2BAAmCE,KAAc,GAAG,CAAC,IAAI,CAACC,QAAQ,EAAE;QAClE,IAAI,CAACA,QAAQ,GAAGD,KAAK;QACrB,IAAI,CAACA,KAAK,EAAE;UACV,IAAI,CAACE,QAAQ,CAACC,KAAK,EAAE;QACvB;MACF;;MAEA;AACF;AACA;IAFE;MAAAV,IAAA;MAAAC,UAAA,GAGCZ,YAAY,CAAC,UAAU,CAAC;MAAAa,GAAA;MAAAC,KAAA,EAAzB,SAAAQ,YAEoB;QAAEC;MAA0B,CAAC,EAAE;QACjD,IAAI,CAAC,IAAI,CAACC,QAAQ,CAACD,aAAa,CAAS,EAAE;UACzC,IAAI,CAACJ,QAAQ,GAAG,KAAK;QACvB;MACF;;MAEA;AACF;AACA;IAFE;MAAAR,IAAA;MAAAC,UAAA,GAGCnB,QAAQ,CAAC;QAAEgC,IAAI,EAAEC,OAAO;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAd,GAAA;MAAAC,MAAA;QAAA,OAChC,KAAK;MAAA;IAAA;MAAAH,IAAA;MAAAC,UAAA,GAKfnB,QAAQ,CAAC;QAAEmC,SAAS,EAAE;MAAkB,CAAC,CAAC;MAAAf,GAAA;MAAAC,MAAA;QAAA,OAC1B,EAAE;MAAA;IAAA;MAAAH,IAAA;MAAAC,UAAA,GAKlBnB,QAAQ,CAAC;QAAEmC,SAAS,EAAE;MAAa,CAAC,CAAC;MAAAf,GAAA;MAAAC,KAAA;IAAA;MAAAH,IAAA;MAAAE,GAAA;MAAAC,KAAA;MATtC;AACF;AACA;MAIE;AACF;AACA;MAIE,SAAAe,kBAAA,EAAoB;QAClB,IAAI,CAAC,IAAI,CAACC,YAAY,CAAC,MAAM,CAAC,EAAE;UAC9B,IAAI,CAACC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC;QACvC;QACAC,IAAA,CAAAC,eAAA,CApEE9B,YAAY,CAAA+B,SAAA,8BAAAC,IAAA;MAqEhB;IAAC;MAAAxB,IAAA;MAAAE,GAAA;MAAAC,KAAA,EAED,SAAAsB,QAAQC,iBAAiB,EAAE;QACzB,IAAIA,iBAAiB,CAACC,GAAG,CAAC,UAAU,CAAC,EAAE;UACrC,MAAM;YAAEC;UAAa,CAAC,GAAG,IAAI,CAAChC,WAAkC;UAChE,MAAM;YAAEY;UAAS,CAAC,GAAG,IAAI;UACzBlB,OAAO,CAAC,IAAI,CAACuC,gBAAgB,CAACD,YAAY,CAAC,EAAGE,IAAI,IAAK;YACpDA,IAAI,CAAiBC,QAAQ,GAAGvB,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC;UACpD,CAAC,CAAC;QACJ;MACF;IAAC;MAAAR,IAAA;MAAAE,GAAA;MAAAC,KAAA,EAED,SAAA6B,OAAA,EAAS;QACP,MAAM;UACJxB,QAAQ;UACRyB,cAAc;UACdC,SAAS;UACT9B,YAAY,EAAE+B,WAAW;UACzB7B,qBAAqB,EAAE8B;QACzB,CAAC,GAAG,IAAI;QACR,OAAOvD,IAAI,CAAAwD,EAAA,KAAAA,EAAA,GAAAC,CAAC;AAChB;AACA;AACA;AACA,iBAAe,CAAS,uBAAoB,CAAS;AACrD;AACA;AACA,yBAAuB,CAA4B;AACnD,iBAAe,CAAc;AAC7B,mBAAiB,CAAuB;AACxC,UAAQ,CAAiB,IAGd;AACX;AACA;AACA;AACA,iBAAe,CAAS;AACxB,sBAAoB,CAAuB;AAC3C;AACA;AACA,KAAI,GAjBapD,MAAM,EAAuBA,MAAM,EAG3BqD,MAAM,CAACxB,OAAO,CAACP,QAAQ,CAAC,CAAC,EACjC2B,WAAW,EACTC,oBAAoB,EAC7BH,cAAc,EAAGhD,gBAAgB,CAAC;UAClCuD,IAAI,EAAE,cAAc;UACpBC,KAAK,EAAG,GAAEvD,MAAO;QACnB,CAAC,CAAC,EAIOA,MAAM,EACDP,SAAS,CAACuD,SAAS,CAAC;MAIxC;;MAEA;AACF;AACA;IAFE;MAAAlC,IAAA;MAAA0C,MAAA;MAAAxC,GAAA;MAAAC,KAAA,EAGA,SAAAyB,aAAA,EAA0B;QACxB,OAAQ,GAAE1C,MAAO,mBAAkB;MACrC;IAAC;MAAAc,IAAA;MAAA0C,MAAA;MAAAxC,GAAA;MAAAC,MAAA;QAAA,OAAAwC,aAAA,CAAAA,aAAA,KAGI/D,UAAU,CAACgE,iBAAiB;UAC/BC,cAAc,EAAE;QAAI;MAAA;IAAA;MAAA7C,IAAA;MAAA0C,MAAA;MAAAxC,GAAA;MAAAC,MAAA;QAAA,OAENZ,MAAM;MAAA;IAAA;EAAA;AAAA,GA5HGH,iBAAiB,CAACD,UAAU,CAACP,UAAU,CAAC,CAAC;AA+HpE,eAAeY,YAAY"}
+{"version":3,"file":"header-menu.js","names":["ifDefined","LitElement","html","property","customElement","query","classMap","ChevronDownGlyph","prefix","FocusMixin","HostListenerMixin","HostListener","forEach","styles","CDSHeaderMenu","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","decorators","key","value","_handleClick","_handleUserInitiatedToggle","_handleKeydownTrigger","force","expanded","_trigger","focus","_handleBlur","relatedTarget","contains","type","Boolean","reflect","attribute","connectedCallback","hasAttribute","setAttribute","selectorItem","querySelectorAll","elem","isActive","_hasActiveChildren","_get","_getPrototypeOf","prototype","call","updated","changedProperties","has","tabIndex","render","triggerContent","menuLabel","handleClick","handleKeydownTrigger","linkClasses","_t","_","String","part","class","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/ui-shell/header-menu.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport ChevronDownGlyph from '@carbon/icons/lib/chevron--down/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport CDSHeaderMenuItem from './header-menu-item';\nimport styles from './header.scss';\n\n/**\n * Header menu.\n *\n * @element cds-header-menu\n * @csspart trigger The trigger button.\n * @csspart trigger-icon The trigger button icon.\n * @csspart menu-body The menu body.\n */\n@customElement(`${prefix}-header-menu`)\nclass CDSHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The trigger button.\n   */\n  @query('a')\n  private _trigger!: HTMLElement;\n\n  /**\n   * keeps track if header menu has any active submenus\n   */\n  private _hasActiveChildren = false;\n\n  /**\n   * Handles `click` event handler on this element.\n   */\n  private _handleClick() {\n    this._handleUserInitiatedToggle();\n  }\n\n  /**\n   * Handler for the `keydown` event on the trigger button.\n   */\n  private _handleKeydownTrigger({ key }: KeyboardEvent) {\n    if (key === 'Esc' || key === 'Escape') {\n      this._handleUserInitiatedToggle(false);\n    }\n  }\n\n  /**\n   * Handles user-initiated toggling the open state.\n   *\n   * @param [force] If specified, forces the open state to the given one.\n   */\n  private _handleUserInitiatedToggle(force: boolean = !this.expanded) {\n    this.expanded = force;\n    if (!force) {\n      this._trigger.focus();\n    }\n  }\n\n  /**\n   * Handles `blur` event handler on this element.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur({ relatedTarget }: FocusEvent) {\n    if (!this.contains(relatedTarget as Node)) {\n      this.expanded = false;\n    }\n  }\n\n  /**\n   * `true` if the menu should be expanded.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.\n   */\n  @property({ type: Boolean, attribute: 'is-active', reflect: true })\n  isActive = false;\n\n  /**\n   * The content of the trigger button.\n   */\n  @property({ attribute: 'trigger-content' })\n  triggerContent = '';\n\n  /**\n   * The `aria-label` attribute for the menu UI.\n   */\n  @property({ attribute: 'menu-label' })\n  menuLabel!: string;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    const { selectorItem } = this.constructor as typeof CDSHeaderMenu;\n    forEach(this.querySelectorAll(selectorItem), (elem) => {\n      if ((elem as CDSHeaderMenuItem).isActive === true) {\n        this._hasActiveChildren = true;\n      }\n    });\n\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('expanded')) {\n      const { selectorItem } = this.constructor as typeof CDSHeaderMenu;\n      const { expanded } = this;\n      forEach(this.querySelectorAll(selectorItem), (elem) => {\n        (elem as HTMLElement).tabIndex = expanded ? 0 : -1;\n      });\n    }\n  }\n\n  render() {\n    const {\n      expanded,\n      isActive,\n      triggerContent,\n      menuLabel,\n      _hasActiveChildren,\n      _handleClick: handleClick,\n      _handleKeydownTrigger: handleKeydownTrigger,\n    } = this;\n\n    const linkClasses = classMap({\n      [`${prefix}--header__menu-item`]: true,\n      [`${prefix}--header__menu-title`]: true,\n      [`${prefix}--header__menu-item--current`]:\n        isActive || (_hasActiveChildren && !expanded),\n    });\n\n    return html`\n      <a\n        part=\"trigger\"\n        tabindex=\"0\"\n        class=\"${linkClasses}\"\n        href=\"javascript:void 0\"\n        aria-haspopup=\"menu\"\n        aria-expanded=\"${String(Boolean(expanded))}\"\n        @click=${handleClick}\n        @keydown=${handleKeydownTrigger}>\n        ${triggerContent}${ChevronDownGlyph({\n          part: 'trigger-icon',\n          class: `${prefix}--header__menu-arrow`,\n        })}\n      </a>\n      <ul\n        part=\"menu-body\"\n        class=\"${prefix}--header__menu\"\n        aria-label=\"${ifDefined(menuLabel)}\">\n        <slot></slot>\n      </ul>\n    `;\n  }\n\n  /**\n   * A selector that will return the menu items.\n   */\n  static get selectorItem() {\n    return `${prefix}-header-menu-item`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderMenu;\n"],"mappings":"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"}

package/es/components/ui-shell/header-name.d.ts

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { LitElement } from 'lit';
-declare const BXHeaderName_base: {
+declare const CDSHeaderName_base: {
     new (...args: any[]): {
         focus(): void;
         accessKey: string;
@@ -320,7 +320,7 @@ declare const BXHeaderName_base: {
  * @csspart link The link.
  * @csspart prefix The prefix content.
  */
-declare class BXHeaderName extends BXHeaderName_base {
+declare class CDSHeaderName extends CDSHeaderName_base {
     /**
      * Link `href`.
      */
@@ -337,6 +337,6 @@ declare class BXHeaderName extends BXHeaderName_base {
     };
     static styles: any;
 }
-export default BXHeaderName;
+export default CDSHeaderName;
 
 //# sourceMappingURL=header-name.d.ts.map

package/es/components/ui-shell/header-name.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ui-shell/header-name.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMvC;;;;;;GAMG;AACH,cACM,YAAa,SAAQ,iBAAsB;IAC/C;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,MAAM,EAAG,MAAM,CAAC;IAEhB,MAAM;IAgBN,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,YAAY,CAAC","file":"header-name.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './header.scss';\n\n/**\n * The product name UI in header nav.\n *\n * @element cds-header-name\n * @csspart link The link.\n * @csspart prefix The prefix content.\n */\n@customElement(`${prefix}-header-name`)\nclass BXHeaderName extends FocusMixin(LitElement) {\n  /**\n   * Link `href`.\n   */\n  @property()\n  href!: string;\n\n  /**\n   * The product name prefix.\n   */\n  @property()\n  prefix!: string;\n\n  render() {\n    const { href, prefix: namePrefix } = this;\n    const namePrefixPart = !namePrefix\n      ? undefined\n      : html`\n          <span part=\"prefix\" class=\"${prefix}--header__name--prefix\"\n            >${namePrefix}</span\n          >\n        `;\n    return html`\n      <a part=\"link\" class=\"${prefix}--header__name\" href=\"${ifDefined(href)}\"\n        >${namePrefixPart}&nbsp;<slot></slot\n      ></a>\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXHeaderName;\n"]}
+{"version":3,"sources":["components/ui-shell/header-name.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMvC;;;;;;GAMG;AACH,cACM,aAAc,SAAQ,kBAAsB;IAChD;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,MAAM,EAAG,MAAM,CAAC;IAEhB,MAAM;IAgBN,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"header-name.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './header.scss';\n\n/**\n * The product name UI in header nav.\n *\n * @element cds-header-name\n * @csspart link The link.\n * @csspart prefix The prefix content.\n */\n@customElement(`${prefix}-header-name`)\nclass CDSHeaderName extends FocusMixin(LitElement) {\n  /**\n   * Link `href`.\n   */\n  @property()\n  href!: string;\n\n  /**\n   * The product name prefix.\n   */\n  @property()\n  prefix!: string;\n\n  render() {\n    const { href, prefix: namePrefix } = this;\n    const namePrefixPart = !namePrefix\n      ? undefined\n      : html`\n          <span part=\"prefix\" class=\"${prefix}--header__name--prefix\"\n            >${namePrefix}</span\n          >\n        `;\n    return html`\n      <a part=\"link\" class=\"${prefix}--header__name\" href=\"${ifDefined(href)}\"\n        >${namePrefixPart}&nbsp;<slot></slot\n      ></a>\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderName;\n"]}

package/es/components/ui-shell/header-name.js

@@ -32,15 +32,15 @@ import styles from "././header.css.js";
      * @csspart link The link.
      * @csspart prefix The prefix content.
      */
-let BXHeaderName = _decorate([customElement(`${prefix}-header-name`)], function (_initialize, _FocusMixin) {
-  class BXHeaderName extends _FocusMixin {
+let CDSHeaderName = _decorate([customElement(`${prefix}-header-name`)], function (_initialize, _FocusMixin) {
+  class CDSHeaderName extends _FocusMixin {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXHeaderName,
+    F: CDSHeaderName,
     d: [{
       kind: "field",
       decorators: [property()],
@@ -98,5 +98,5 @@ let BXHeaderName = _decorate([customElement(`${prefix}-header-name`)], function
     }]
   };
 }, FocusMixin(LitElement));
-export default BXHeaderName;
+export default CDSHeaderName;
 //# sourceMappingURL=header-name.js.map

package/es/components/ui-shell/header-name.js.map

@@ -1 +1 @@
-{"version":3,"file":"header-name.js","names":["ifDefined","LitElement","html","property","customElement","prefix","FocusMixin","styles","BXHeaderName","_decorate","_initialize","_FocusMixin","constructor","args","F","d","kind","decorators","key","value","render","href","namePrefix","namePrefixPart","undefined","_t","_","_t2","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/ui-shell/header-name.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './header.scss';\n\n/**\n * The product name UI in header nav.\n *\n * @element cds-header-name\n * @csspart link The link.\n * @csspart prefix The prefix content.\n */\n@customElement(`${prefix}-header-name`)\nclass BXHeaderName extends FocusMixin(LitElement) {\n  /**\n   * Link `href`.\n   */\n  @property()\n  href!: string;\n\n  /**\n   * The product name prefix.\n   */\n  @property()\n  prefix!: string;\n\n  render() {\n    const { href, prefix: namePrefix } = this;\n    const namePrefixPart = !namePrefix\n      ? undefined\n      : html`\n          <span part=\"prefix\" class=\"${prefix}--header__name--prefix\"\n            >${namePrefix}</span\n          >\n        `;\n    return html`\n      <a part=\"link\" class=\"${prefix}--header__name\" href=\"${ifDefined(href)}\"\n        >${namePrefixPart}&nbsp;<slot></slot\n      ></a>\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXHeaderName;\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,QAAQ,8BAA8B;AACxD,SAASC,UAAU,EAAEC,IAAI,QAAQ,KAAK;AACtC,SAASC,QAAQ,EAAEC,aAAa,QAAQ,mBAAmB;AAC3D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,UAAU,MAAM,4BAA4B;AACnD,OAAOC,MAAM,MAAM,mBAAe;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA,GANA;AACA;AACA;AACA;AACA;AACA;AACA;AANA,IAQMC,YAAY,GAAAC,SAAA,EADjBL,aAAa,CAAE,GAAEC,MAAO,cAAa,CAAC,aAAAK,WAAA,EAAAC,WAAA;EAAvC,MACMH,YAAY,SAAAG,WAAA,CAAgC;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAkClD;EAAC;IAAAI,CAAA,EAlCKN,YAAY;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAIfd,QAAQ,EAAE;MAAAe,GAAA;MAAAC,KAAA;IAAA;MAAAH,IAAA;MAAAC,UAAA,GAMVd,QAAQ,EAAE;MAAAe,GAAA;MAAAC,KAAA;IAAA;MAAAH,IAAA;MAAAE,GAAA;MAAAC,KAAA;MATX;AACF;AACA;;MAIE;AACF;AACA;;MAIE,SAAAC,OAAA,EAAS;QACP,MAAM;UAAEC,IAAI;UAAEhB,MAAM,EAAEiB;QAAW,CAAC,GAAG,IAAI;QACzC,MAAMC,cAAc,GAAG,CAACD,UAAU,GAC9BE,SAAS,GACTtB,IAAI,CAAAuB,EAAA,KAAAA,EAAA,GAAAC,CAAC;AACb,uCAAqC,CAAS;AAC9C,eAAa,CAAa;AAC1B;AACA,SAAQ,GAH+BrB,MAAM,EAC9BiB,UAAU,CAEhB;QACL,OAAOpB,IAAI,CAAAyB,GAAA,KAAAA,GAAA,GAAAD,CAAC;AAChB,8BAA4B,CAAS,yBAAsB,CAAkB;AAC7E,WAAS,CAAiB;AAC1B;AACA,KAAI,GAH0BrB,MAAM,EAAyBL,SAAS,CAACqB,IAAI,CAAC,EACjEE,cAAc;MAGvB;IAAC;MAAAP,IAAA;MAAAY,MAAA;MAAAV,GAAA;MAAAC,MAAA;QAAA,OAAAU,aAAA,CAAAA,aAAA,KAGI5B,UAAU,CAAC6B,iBAAiB;UAC/BC,cAAc,EAAE;QAAI;MAAA;IAAA;MAAAf,IAAA;MAAAY,MAAA;MAAAV,GAAA;MAAAC,MAAA;QAAA,OAENZ,MAAM;MAAA;IAAA;EAAA;AAAA,GAjCGD,UAAU,CAACL,UAAU,CAAC;AAoCjD,eAAeO,YAAY"}
+{"version":3,"file":"header-name.js","names":["ifDefined","LitElement","html","property","customElement","prefix","FocusMixin","styles","CDSHeaderName","_decorate","_initialize","_FocusMixin","constructor","args","F","d","kind","decorators","key","value","render","href","namePrefix","namePrefixPart","undefined","_t","_","_t2","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/ui-shell/header-name.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './header.scss';\n\n/**\n * The product name UI in header nav.\n *\n * @element cds-header-name\n * @csspart link The link.\n * @csspart prefix The prefix content.\n */\n@customElement(`${prefix}-header-name`)\nclass CDSHeaderName extends FocusMixin(LitElement) {\n  /**\n   * Link `href`.\n   */\n  @property()\n  href!: string;\n\n  /**\n   * The product name prefix.\n   */\n  @property()\n  prefix!: string;\n\n  render() {\n    const { href, prefix: namePrefix } = this;\n    const namePrefixPart = !namePrefix\n      ? undefined\n      : html`\n          <span part=\"prefix\" class=\"${prefix}--header__name--prefix\"\n            >${namePrefix}</span\n          >\n        `;\n    return html`\n      <a part=\"link\" class=\"${prefix}--header__name\" href=\"${ifDefined(href)}\"\n        >${namePrefixPart}&nbsp;<slot></slot\n      ></a>\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderName;\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,QAAQ,8BAA8B;AACxD,SAASC,UAAU,EAAEC,IAAI,QAAQ,KAAK;AACtC,SAASC,QAAQ,EAAEC,aAAa,QAAQ,mBAAmB;AAC3D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,UAAU,MAAM,4BAA4B;AACnD,OAAOC,MAAM,MAAM,mBAAe;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA,GANA;AACA;AACA;AACA;AACA;AACA;AACA;AANA,IAQMC,aAAa,GAAAC,SAAA,EADlBL,aAAa,CAAE,GAAEC,MAAO,cAAa,CAAC,aAAAK,WAAA,EAAAC,WAAA;EAAvC,MACMH,aAAa,SAAAG,WAAA,CAAgC;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAkCnD;EAAC;IAAAI,CAAA,EAlCKN,aAAa;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAIhBd,QAAQ,EAAE;MAAAe,GAAA;MAAAC,KAAA;IAAA;MAAAH,IAAA;MAAAC,UAAA,GAMVd,QAAQ,EAAE;MAAAe,GAAA;MAAAC,KAAA;IAAA;MAAAH,IAAA;MAAAE,GAAA;MAAAC,KAAA;MATX;AACF;AACA;;MAIE;AACF;AACA;;MAIE,SAAAC,OAAA,EAAS;QACP,MAAM;UAAEC,IAAI;UAAEhB,MAAM,EAAEiB;QAAW,CAAC,GAAG,IAAI;QACzC,MAAMC,cAAc,GAAG,CAACD,UAAU,GAC9BE,SAAS,GACTtB,IAAI,CAAAuB,EAAA,KAAAA,EAAA,GAAAC,CAAC;AACb,uCAAqC,CAAS;AAC9C,eAAa,CAAa;AAC1B;AACA,SAAQ,GAH+BrB,MAAM,EAC9BiB,UAAU,CAEhB;QACL,OAAOpB,IAAI,CAAAyB,GAAA,KAAAA,GAAA,GAAAD,CAAC;AAChB,8BAA4B,CAAS,yBAAsB,CAAkB;AAC7E,WAAS,CAAiB;AAC1B;AACA,KAAI,GAH0BrB,MAAM,EAAyBL,SAAS,CAACqB,IAAI,CAAC,EACjEE,cAAc;MAGvB;IAAC;MAAAP,IAAA;MAAAY,MAAA;MAAAV,GAAA;MAAAC,MAAA;QAAA,OAAAU,aAAA,CAAAA,aAAA,KAGI5B,UAAU,CAAC6B,iBAAiB;UAC/BC,cAAc,EAAE;QAAI;MAAA;IAAA;MAAAf,IAAA;MAAAY,MAAA;MAAAV,GAAA;MAAAC,MAAA;QAAA,OAENZ,MAAM;MAAA;IAAA;EAAA;AAAA,GAjCID,UAAU,CAACL,UAAU,CAAC;AAoClD,eAAeO,aAAa"}

package/es/components/ui-shell/header-nav-item.d.ts

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { LitElement } from 'lit';
-declare const BXHeaderNavItem_base: {
+declare const CDSHeaderNavItem_base: {
     new (...args: any[]): {
         focus(): void;
         accessKey: string;
@@ -320,7 +320,7 @@ declare const BXHeaderNavItem_base: {
  * @csspart link The link.
  * @csspart title The title.
  */
-declare class BXHeaderNavItem extends BXHeaderNavItem_base {
+declare class CDSHeaderNavItem extends CDSHeaderNavItem_base {
     /**
      * Link `href`.
      */
@@ -329,6 +329,14 @@ declare class BXHeaderNavItem extends BXHeaderNavItem_base {
      * The title.
      */
     title: string;
+    /**
+     * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+     */
+    isActive: boolean;
+    /**
+     * indicates that this element represents the current item
+     */
+    ariaCurrent: any;
     /**
      * As child of <ul>, this element must have role of listitem
      */
@@ -341,6 +349,6 @@ declare class BXHeaderNavItem extends BXHeaderNavItem_base {
     };
     static styles: any;
 }
-export default BXHeaderNavItem;
+export default CDSHeaderNavItem;
 
 //# sourceMappingURL=header-nav-item.d.ts.map

package/es/components/ui-shell/header-nav-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ui-shell/header-nav-item.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMvC;;;;;;GAMG;AACH,cACM,eAAgB,SAAQ,oBAAsB;IAClD;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAc;IAE1B,MAAM;IAeN,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,eAAe,CAAC","file":"header-nav-item.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './header.scss';\n\n/**\n * Header nav item.\n *\n * @element cds-header-nav-item\n * @csspart link The link.\n * @csspart title The title.\n */\n@customElement(`${prefix}-header-nav-item`)\nclass BXHeaderNavItem extends FocusMixin(LitElement) {\n  /**\n   * Link `href`.\n   */\n  @property()\n  href!: string;\n\n  /**\n   * The title.\n   */\n  @property()\n  title!: string;\n\n  /**\n   * As child of <ul>, this element must have role of listitem\n   */\n  @property({ reflect: true })\n  role: string = 'listitem';\n\n  render() {\n    const { href, title } = this;\n    return html`\n      <a\n        part=\"link\"\n        class=\"${prefix}--header__menu-item\"\n        tabindex=\"0\"\n        href=\"${ifDefined(href)}\">\n        <span part=\"title\" class=\"${prefix}--text-truncate--end\"\n          ><slot>${title}</slot></span\n        >\n      </a>\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXHeaderNavItem;\n"]}
+{"version":3,"sources":["components/ui-shell/header-nav-item.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMvC;;;;;;GAMG;AACH,cACM,gBAAiB,SAAQ,qBAAsB;IACnD;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,WAAW,MAAC;IAEZ;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAc;IAE1B,MAAM;IAqBN,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,gBAAgB,CAAC","file":"header-nav-item.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './header.scss';\n\n/**\n * Header nav item.\n *\n * @element cds-header-nav-item\n * @csspart link The link.\n * @csspart title The title.\n */\n@customElement(`${prefix}-header-nav-item`)\nclass CDSHeaderNavItem extends FocusMixin(LitElement) {\n  /**\n   * Link `href`.\n   */\n  @property()\n  href!: string;\n\n  /**\n   * The title.\n   */\n  @property()\n  title!: string;\n\n  /**\n   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.\n   */\n  @property({ type: Boolean, attribute: 'is-active' })\n  isActive = false;\n\n  /**\n   * indicates that this element represents the current item\n   */\n  @property({ type: String, attribute: 'aria-current' })\n  ariaCurrent;\n\n  /**\n   * As child of <ul>, this element must have role of listitem\n   */\n  @property({ reflect: true })\n  role: string = 'listitem';\n\n  render() {\n    const { ariaCurrent, href, isActive, title } = this;\n    const linkClass = classMap({\n      [`${prefix}--header__menu-item`]: true,\n      [`${prefix}--header__menu-item--current`]:\n        isActive && ariaCurrent !== 'page',\n    });\n\n    return html`\n      <a\n        part=\"link\"\n        class=\"${linkClass}\"\n        tabindex=\"0\"\n        href=\"${ifDefined(href)}\">\n        <span part=\"title\" class=\"${prefix}--text-truncate--end\"\n          ><slot>${title}</slot></span\n        >\n      </a>\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSHeaderNavItem;\n"]}