@nordhealth/components 4.26.0 → 4.26.2

package/lib/Button.js

@@ -9,5 +9,5 @@ import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as n,nothing as
     --n-button-box-shadow,
     0 0 0 1px var(--n-color-surface),
     0 0 0 3px var(--n-color-status-danger)
-  )}:host([disabled]){--_n-button-border-color:var(--n-button-border-color, var(--_n-button-background-color));--_n-button-background-color:var(--n-button-background-color, var(--n-color-border));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-weak));--_n-button-opacity:0.5;pointer-events:none}:host([disabled]) .n-button::after{display:none}.n-button-spinner{position:absolute;transform:translateX(-50%) translateY(-50%);inset-block-start:50%;inset-inline-start:50%}:host([loading]:not([href])){pointer-events:none}:host([loading]:not([href])) .n-content,:host([loading]:not([href])) ::slotted([slot=end]),:host([loading]:not([href])) ::slotted([slot=start]){opacity:0}:host([size='s']){--_n-button-gap:var(--n-button-gap, var(--n-space-xs));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-s) + 1px));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-s));--_n-button-min-block-size:var(--n-button-min-block-size, calc(var(--n-space-l) + var(--n-space-xs)));--_n-button-padding-block:calc(var(--n-space-xs) - 1px);--_n-button-icon-size:var(--n-size-icon-xs)}:host([size='l']){--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-l) / 1.3));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-l));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active));--_n-button-min-block-size:var(--n-button-min-block-size, calc(var(--n-space-xxl) - var(--n-space-l)));--_n-button-icon-size:var(--n-size-icon-m)}:host([square]){--_n-button-inline-size:var(--_n-button-min-block-size);--_n-button-padding-block:0;--_n-button-padding-inline:0}:host([square]) .n-content{display:flex;justify-content:center;align-items:center}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}:host(:not([variant=primary],[variant=danger])) ::slotted(nord-icon){color:var(--n-color-icon)}:host(:not([variant=primary],[variant=danger])) .n-toggle-icon{color:var(--_n-button-toggle-icon-color)}:host(:not([square])) slot:not([name])::slotted(nord-icon){transform:translateY(1px)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-button-icon-size)}`;let f=class extends(h(v(e))){constructor(){super(...arguments),this.defaultSlot=new c(this),this.buttonRef=s(),this.events=new b(this),this.lightDom=new d(this,{render:()=>this.renderLightDom()}),this.variant="default",this.type="submit",this.size="m",this.download=!1,this.target="_self",this.expand=!1,this.square=!1,this.loading=!1,this.hideDropdownIcon=!1,this.handleOuterClick=t=>{t.composedPath().some((t=>t===this.focusableRef.value||t===this.buttonRef.value))||t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"click",this.handleOuterClick,!0)}render(){var t;const o="toggle"===(null===(t=this.assignedSlot)||void 0===t?void 0:t.name),e=this.defaultSlot.assigned.some((t=>"nord-icon"===t.localName)),a=o&&!this.hideDropdownIcon&&!e&&!this.href,i=n`<slot name="start"></slot><div class="n-content"><slot></slot></div><nord-spinner class="n-button-spinner" color="currentColor" ?hidden="${!this.loading||Boolean(this.href)}"></nord-spinner><slot name="end">${a?n`<nord-icon name="interface-dropdown-small" class="n-toggle-icon"></nord-icon>`:r}</slot>`;return this.href?this.renderLink(i):this.renderButton(i)}renderLink(t){return n`<a ${l(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${u(this.disabled,r,this.href)}" tabindex="${u(this.disabled,"-1")}" aria-disabled="${u(this.disabled,"true")}" role="${u(this.disabled,"link")}">${t}</a>`}renderButton(t){return n`<slot name="proxy" @slotchange="${this.handleProxyChange}"></slot><button ${l(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${u(this.name)}" value="${u(this.value)}" @click="${this.handleClick}" aria-disabled="${u(this.loading,"true")}" aria-expanded="${u(this.accessibleExpanded)}" aria-haspopup="${u(this.accessibleHasPopup)}">${t}</button>`}renderLightDom(){return this.href||!this.form?r:n`<button ${l(this.buttonRef)} slot="proxy" name="${u(this.name)}" value="${u(this.value)}" ?disabled="${this.disabled}" form="${u(this._formId)}" type="${this.type}"></button>`}handleClick(t){this.buttonRef.value&&(t.stopPropagation(),this.buttonRef.value.click())}handleProxyChange(t){const o=t.target,n=this.buttonRef.value;n&&n.assignedSlot!==o&&this.appendChild(n)}};f.styles=[p,g],t([a({reflect:!0})],f.prototype,"variant",void 0),t([a({reflect:!0})],f.prototype,"type",void 0),t([a({reflect:!0})],f.prototype,"size",void 0),t([a({attribute:"aria-expanded"})],f.prototype,"accessibleExpanded",void 0),t([a({attribute:"aria-haspopup"})],f.prototype,"accessibleHasPopup",void 0),t([a({reflect:!0})],f.prototype,"href",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"download",void 0),t([a()],f.prototype,"target",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"square",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"loading",void 0),t([a({reflect:!0,type:Boolean,attribute:"hide-dropdown-icon"})],f.prototype,"hideDropdownIcon",void 0),f=t([i("nord-button")],f);var _=f;export{_ as default};
+  )}:host([disabled]){--_n-button-border-color:var(--n-button-border-color, var(--_n-button-background-color));--_n-button-background-color:var(--n-button-background-color, var(--n-color-border));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-weak));--_n-button-opacity:0.5;pointer-events:none}:host([disabled]) .n-button::after{display:none}.n-button-spinner{position:absolute;transform:translateX(-50%) translateY(-50%);inset-block-start:50%;inset-inline-start:50%}:host([loading]:not([href])){pointer-events:none}:host([loading]:not([href])) .n-content,:host([loading]:not([href])) ::slotted([slot=end]),:host([loading]:not([href])) ::slotted([slot=start]){opacity:0}:host([size='s']){--_n-button-gap:var(--n-button-gap, var(--n-space-xs));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-s) + 1px));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-s));--_n-button-min-block-size:var(--n-button-min-block-size, calc(var(--n-space-l) + var(--n-space-xs)));--_n-button-padding-block:calc(var(--n-space-xs) - 1px);--_n-button-icon-size:var(--n-size-icon-xs)}:host([size='l']){--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-l) / 1.3));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-l));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active));--_n-button-min-block-size:var(--n-button-min-block-size, calc(var(--n-space-xxl) - var(--n-space-l)));--_n-button-icon-size:var(--n-size-icon-m)}:host([square]){--_n-button-inline-size:var(--_n-button-min-block-size);--_n-button-padding-block:0;--_n-button-padding-inline:0}:host([square]) .n-content{display:flex;justify-content:center;align-items:center}::slotted(*){color:inherit;pointer-events:none}::slotted(svg){color:var(--n-color-icon)}::slotted(button[slot=proxy]){display:none}:host(:not([variant=primary],[variant=danger])) ::slotted(nord-icon){color:var(--n-color-icon)}:host(:not([variant=primary],[variant=danger])) .n-toggle-icon{color:var(--_n-button-toggle-icon-color)}:host(:not([square])) slot:not([name])::slotted(nord-icon){transform:translateY(1px)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-button-icon-size)}`;let f=class extends(h(v(e))){constructor(){super(...arguments),this.defaultSlot=new c(this),this.buttonRef=s(),this.events=new b(this),this.lightDom=new d(this,{render:()=>this.renderLightDom()}),this.variant="default",this.type="submit",this.size="m",this.download=!1,this.target="_self",this.expand=!1,this.square=!1,this.loading=!1,this.hideDropdownIcon=!1,this.handleOuterClick=t=>{t.composedPath().some((t=>t===this.focusableRef.value||t===this.buttonRef.value))||t.stopPropagation()}}connectedCallback(){super.connectedCallback(),this.events.listen(this,"click",this.handleOuterClick,!0)}render(){var t;const o="toggle"===(null===(t=this.assignedSlot)||void 0===t?void 0:t.name),e=this.defaultSlot.assigned.some((t=>"nord-icon"===t.localName)),a=o&&!this.hideDropdownIcon&&!e&&!this.href,i=n`<slot name="start"></slot><div class="n-content"><slot></slot></div><nord-spinner class="n-button-spinner" color="currentColor" ?hidden="${!this.loading||Boolean(this.href)}"></nord-spinner><slot name="end">${a?n`<nord-icon name="interface-dropdown-small" class="n-toggle-icon"></nord-icon>`:r}</slot>`;return this.href?this.renderLink(i):this.renderButton(i)}renderLink(t){return n`<a ${l(this.focusableRef)} class="n-button" target="${this.target}" ?download="${this.download}" href="${u(this.disabled,r,this.href)}" tabindex="${u(this.disabled,"-1")}" aria-disabled="${u(this.disabled,"true")}" role="${u(this.disabled,"link")}">${t}</a>`}renderButton(t){return n`<slot name="proxy" @slotchange="${this.handleProxyChange}"></slot><button ${l(this.focusableRef)} class="n-button" ?disabled="${this.disabled}" name="${u(this.name)}" value="${u(this.value)}" @click="${this.handleClick}" aria-disabled="${u(this.loading,"true")}" aria-expanded="${u(this.accessibleExpanded)}" aria-haspopup="${u(this.accessibleHasPopup)}">${t}</button>`}renderLightDom(){return this.href||!this.form?r:n`<button ${l(this.buttonRef)} slot="proxy" name="${u(this.name)}" value="${u(this.value)}" ?disabled="${this.disabled}" form="${u(this._formId)}" type="${this.type}"></button>`}handleClick(t){this.buttonRef.value&&(t.stopPropagation(),this.buttonRef.value.click())}handleProxyChange(t){const o=t.target,n=this.buttonRef.value;n&&n.assignedSlot!==o&&this.appendChild(n)}};f.shadowRootOptions={...e.shadowRootOptions,delegatesFocus:!0},f.styles=[p,g],t([a({reflect:!0})],f.prototype,"variant",void 0),t([a({reflect:!0})],f.prototype,"type",void 0),t([a({reflect:!0})],f.prototype,"size",void 0),t([a({attribute:"aria-expanded"})],f.prototype,"accessibleExpanded",void 0),t([a({attribute:"aria-haspopup"})],f.prototype,"accessibleHasPopup",void 0),t([a({reflect:!0})],f.prototype,"href",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"download",void 0),t([a()],f.prototype,"target",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"square",void 0),t([a({reflect:!0,type:Boolean})],f.prototype,"loading",void 0),t([a({reflect:!0,type:Boolean,attribute:"hide-dropdown-icon"})],f.prototype,"hideDropdownIcon",void 0),f=t([i("nord-button")],f);var _=f;export{_ as default};
 //# sourceMappingURL=Button.js.map

package/lib/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["/* eslint-disable lit-a11y/accessible-name */\nimport type { TemplateResult } from 'lit'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDomController } from '../common/controllers/LightDomController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\n\nimport { cond } from '../common/directives/cond.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Button.css'\nimport '../spinner/Spinner.js'\n\n/**\n * Buttons are used for interface actions. Primary style should be\n * used only once per section for main call-to-action, while other\n * styles can appear more frequently.\n *\n * @status ready\n * @category action\n * @slot - The button content\n * @slot start - Used to place content at the start of button text. Typically used for icons.\n * @slot end - Used to place content at the end of button text. Typically used for icons.\n *\n * @cssprop [--n-button-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-button-gap=var(--n-space-s)] - Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the button.\n * @cssprop [--n-button-background-color=var(--n-color-button)] - Controls the background color of the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-border-color=var(--n-color-border-strong)] - Controls the border color of the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-text-align=center] - Controls the text alignment for the text in the button.\n * @cssprop [--n-button-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-button-color=var(--n-color-text)] - Controls the color of the text within the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-padding-inline=calc(var(--n-space-m) / 1.2)] - Controls the inline, or left and right, padding of the button.\n * @cssprop [--n-button-font-size=var(--n-font-size-m)] - Controls the size of the text within the button, using our [font tokens](/tokens/#font).\n * @cssprop [--n-button-font-weight=var(--n-font-weight)] - Controls the weight of the text within the button, using our [font tokens](/tokens/#font).\n * @cssprop [--n-button-min-block-size=var(--n-space-xl)] - Controls the minimum block size, or height, of the button using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-toggle-icon-color=var(--n-color-icon)] - Controls the color of toggle icon that gets rendered when the button is used as a [Dropdown](/components/dropdown/) toggle.\n * @cssprop [--n-button-user-select=none] - Controls the text selection behavior of the button text.\n */\n@customElement('nord-button')\nexport default class Button extends InputMixin(FocusableMixin(LitElement)) {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n  private buttonRef = createRef<HTMLButtonElement>()\n  private events = new EventController(this)\n  private lightDom = new LightDomController(this, {\n    render: () => this.renderLightDom(),\n  })\n\n  /**\n   * The style variant of the button.\n   */\n  @property({ reflect: true }) variant: 'default' | 'primary' | 'dashed' | 'plain' | 'danger' = 'default'\n\n  /**\n   * The type of the button.\n   */\n  @property({ reflect: true }) type: 'button' | 'submit' | 'reset' = 'submit'\n\n  /**\n   * The size of the button.\n   * This affects font-size and padding.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 'm'\n\n  /**\n   * This does not need to be documented,\n   * since it is only for forwarding the aria-expanded attribute\n   * to the internal button element.\n   * @private\n   */\n  @property({ attribute: 'aria-expanded' }) accessibleExpanded?: 'true' | 'false'\n\n  /**\n   * This does not need to be documented,\n   * since it is only for forwarding the aria-haspopup attribute\n   * to the internal button element.\n   * @private\n   */\n  @property({ attribute: 'aria-haspopup' }) accessibleHasPopup?:\n    | 'false'\n    | 'true'\n    | 'menu'\n    | 'listbox'\n    | 'tree'\n    | 'grid'\n    | 'dialog'\n\n  /**\n   * When provided, renders the button as a link,\n   * with its href attribute set to the given value.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * When provided together with a href property, the button will\n   * trigger a file download instead of a page visit.\n   */\n  @property({ reflect: true, type: Boolean }) download = false\n\n  /**\n   * When provided together with a href property, determines where\n   * to open the linked URL. The keywords have special meanings for\n   * where to load the URL: “_self” means the current browsing context,\n   * “_blank” usually a new tab but users can configure browsers this to\n   * open a new window instead, “_parent” means the parent browsing\n   * context of the current one, but if no parent exists, behaves as\n   * _self, and finally “top” means the topmost browsing context.\n   */\n  @property() target: '_self' | '_blank' | '_parent' | '_top' = '_self'\n\n  /**\n   * Controls whether the button expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * When provided, the button is rendered as a square button. Use this for icon only buttons.\n   */\n  @property({ reflect: true, type: Boolean }) square = false\n\n  /**\n   * Controls whether the button is in loading state. Please note that the spinner\n   * is hidden from assistive technologies, so you need to make sure to announce\n   * the loading state to e.g. screen reader users. We also recommend disabling\n   * all user interactions on the button itself while in loading state.\n   */\n  @property({ reflect: true, type: Boolean }) loading = false\n\n  /**\n   * Controls whether the `interface-dropdown-small` icon from Nordicons is hidden\n   * in the `end` slot when used as a dropdown toggle.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'hide-dropdown-icon' }) hideDropdownIcon = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.events.listen(this, 'click', this.handleOuterClick, true)\n  }\n\n  render() {\n    const isDropdownToggle = this.assignedSlot?.name === 'toggle'\n    const isIconButton = this.defaultSlot.assigned.some(node => node.localName === 'nord-icon')\n    const shouldShowDropdownIcon = isDropdownToggle && !this.hideDropdownIcon && !isIconButton && !this.href\n\n    const innards = html`\n      <slot name=\"start\"></slot>\n      <div class=\"n-content\">\n        <slot></slot>\n      </div>\n      <nord-spinner\n        class=\"n-button-spinner\"\n        color=\"currentColor\"\n        ?hidden=${!this.loading || Boolean(this.href)}\n      ></nord-spinner>\n      <slot name=\"end\">\n        ${shouldShowDropdownIcon\n          ? html`<nord-icon name=\"interface-dropdown-small\" class=\"n-toggle-icon\"></nord-icon>`\n          : nothing}\n      </slot>\n    `\n\n    return this.href ? this.renderLink(innards) : this.renderButton(innards)\n  }\n\n  /**\n   * We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\n   * Links cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\n   * Along with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order.\n   *\n   * @see https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n   */\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a\n        ${ref(this.focusableRef)}\n        class=\"n-button\"\n        target=${this.target}\n        ?download=${this.download}\n        href=${cond(this.disabled, nothing, this.href)}\n        tabindex=${cond(this.disabled, '-1')}\n        aria-disabled=${cond(this.disabled, 'true')}\n        role=${cond(this.disabled, 'link')}\n        >${innards}\n      </a>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`\n      <slot name=\"proxy\" @slotchange=${this.handleProxyChange}></slot>\n      <button\n        ${ref(this.focusableRef)}\n        class=\"n-button\"\n        ?disabled=${this.disabled}\n        name=${cond(this.name)}\n        value=${cond(this.value)}\n        @click=${this.handleClick}\n        aria-disabled=${cond(this.loading, 'true')}\n        aria-expanded=${cond(this.accessibleExpanded)}\n        aria-haspopup=${cond(this.accessibleHasPopup)}\n      >\n        ${innards}\n      </button>\n    `\n  }\n\n  private renderLightDom() {\n    if (this.href || !this.form) {\n      return nothing\n    }\n\n    return html`\n      <button\n        ${ref(this.buttonRef)}\n        slot=\"proxy\"\n        name=${cond(this.name)}\n        value=${cond(this.value)}\n        ?disabled=${this.disabled}\n        form=${cond(this._formId)}\n        type=${this.type}\n      ></button>\n    `\n  }\n\n  private handleOuterClick = (e: MouseEvent) => {\n    // we want to avoid emitting click events when a click\n    // happens in blank space in the host, but not on the button\n    // so we stop propagation of any events if click didn't happen on the internal or proxy button\n    const isInternalButton = e\n      .composedPath()\n      .some(node => node === this.focusableRef.value || node === this.buttonRef.value)\n\n    if (!isInternalButton) {\n      e.stopPropagation()\n    }\n  }\n\n  private handleClick(e: Event) {\n    if (this.buttonRef.value) {\n      // prevents two events: one from internal button, one from proxy button\n      e.stopPropagation()\n      this.buttonRef.value.click()\n    }\n  }\n\n  /**\n   * React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\n   * So we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in.\n   */\n  private handleProxyChange(e: Event) {\n    const slot = e.target as HTMLSlotElement\n    const proxyButton = this.buttonRef.value\n\n    if (proxyButton && proxyButton.assignedSlot !== slot) {\n      this.appendChild(proxyButton)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-button': Button\n  }\n}\n"],"names":["Button","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","buttonRef","createRef","events","EventController","lightDom","LightDomController","render","renderLightDom","variant","type","size","download","target","expand","square","loading","hideDropdownIcon","handleOuterClick","e","composedPath","some","node","focusableRef","value","stopPropagation","connectedCallback","super","listen","isDropdownToggle","_a","assignedSlot","name","isIconButton","assigned","localName","shouldShowDropdownIcon","href","innards","html","Boolean","nothing","renderLink","renderButton","ref","cond","disabled","handleProxyChange","handleClick","accessibleExpanded","accessibleHasPopup","form","_formId","click","slot","proxyButton","appendChild","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","customElement"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../src/button/Button.ts"],"sourcesContent":["/* eslint-disable lit-a11y/accessible-name */\nimport type { TemplateResult } from 'lit'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { createRef, ref } from 'lit/directives/ref.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDomController } from '../common/controllers/LightDomController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\n\nimport { cond } from '../common/directives/cond.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Button.css'\nimport '../spinner/Spinner.js'\n\n/**\n * Buttons are used for interface actions. Primary style should be\n * used only once per section for main call-to-action, while other\n * styles can appear more frequently.\n *\n * @status ready\n * @category action\n * @slot - The button content\n * @slot start - Used to place content at the start of button text. Typically used for icons.\n * @slot end - Used to place content at the end of button text. Typically used for icons.\n *\n * @cssprop [--n-button-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-button-gap=var(--n-space-s)] - Controls the spacing between items within the button, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the button.\n * @cssprop [--n-button-background-color=var(--n-color-button)] - Controls the background color of the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-border-color=var(--n-color-border-strong)] - Controls the border color of the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-text-align=center] - Controls the text alignment for the text in the button.\n * @cssprop [--n-button-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-button-color=var(--n-color-text)] - Controls the color of the text within the button, using our [color tokens](/tokens/#color).\n * @cssprop [--n-button-padding-inline=calc(var(--n-space-m) / 1.2)] - Controls the inline, or left and right, padding of the button.\n * @cssprop [--n-button-font-size=var(--n-font-size-m)] - Controls the size of the text within the button, using our [font tokens](/tokens/#font).\n * @cssprop [--n-button-font-weight=var(--n-font-weight)] - Controls the weight of the text within the button, using our [font tokens](/tokens/#font).\n * @cssprop [--n-button-min-block-size=var(--n-space-xl)] - Controls the minimum block size, or height, of the button using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-button-toggle-icon-color=var(--n-color-icon)] - Controls the color of toggle icon that gets rendered when the button is used as a [Dropdown](/components/dropdown/) toggle.\n * @cssprop [--n-button-user-select=none] - Controls the text selection behavior of the button text.\n */\n@customElement('nord-button')\nexport default class Button extends InputMixin(FocusableMixin(LitElement)) {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n  private buttonRef = createRef<HTMLButtonElement>()\n  private events = new EventController(this)\n  private lightDom = new LightDomController(this, {\n    render: () => this.renderLightDom(),\n  })\n\n  /**\n   * The style variant of the button.\n   */\n  @property({ reflect: true }) variant: 'default' | 'primary' | 'dashed' | 'plain' | 'danger' = 'default'\n\n  /**\n   * The type of the button.\n   */\n  @property({ reflect: true }) type: 'button' | 'submit' | 'reset' = 'submit'\n\n  /**\n   * The size of the button.\n   * This affects font-size and padding.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 'm'\n\n  /**\n   * This does not need to be documented,\n   * since it is only for forwarding the aria-expanded attribute\n   * to the internal button element.\n   * @private\n   */\n  @property({ attribute: 'aria-expanded' }) accessibleExpanded?: 'true' | 'false'\n\n  /**\n   * This does not need to be documented,\n   * since it is only for forwarding the aria-haspopup attribute\n   * to the internal button element.\n   * @private\n   */\n  @property({ attribute: 'aria-haspopup' }) accessibleHasPopup?:\n    | 'false'\n    | 'true'\n    | 'menu'\n    | 'listbox'\n    | 'tree'\n    | 'grid'\n    | 'dialog'\n\n  /**\n   * When provided, renders the button as a link,\n   * with its href attribute set to the given value.\n   */\n  @property({ reflect: true }) href?: string\n\n  /**\n   * When provided together with a href property, the button will\n   * trigger a file download instead of a page visit.\n   */\n  @property({ reflect: true, type: Boolean }) download = false\n\n  /**\n   * When provided together with a href property, determines where\n   * to open the linked URL. The keywords have special meanings for\n   * where to load the URL: “_self” means the current browsing context,\n   * “_blank” usually a new tab but users can configure browsers this to\n   * open a new window instead, “_parent” means the parent browsing\n   * context of the current one, but if no parent exists, behaves as\n   * _self, and finally “top” means the topmost browsing context.\n   */\n  @property() target: '_self' | '_blank' | '_parent' | '_top' = '_self'\n\n  /**\n   * Controls whether the button expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * When provided, the button is rendered as a square button. Use this for icon only buttons.\n   */\n  @property({ reflect: true, type: Boolean }) square = false\n\n  /**\n   * Controls whether the button is in loading state. Please note that the spinner\n   * is hidden from assistive technologies, so you need to make sure to announce\n   * the loading state to e.g. screen reader users. We also recommend disabling\n   * all user interactions on the button itself while in loading state.\n   */\n  @property({ reflect: true, type: Boolean }) loading = false\n\n  /**\n   * Controls whether the `interface-dropdown-small` icon from Nordicons is hidden\n   * in the `end` slot when used as a dropdown toggle.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'hide-dropdown-icon' }) hideDropdownIcon = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.events.listen(this, 'click', this.handleOuterClick, true)\n  }\n\n  render() {\n    const isDropdownToggle = this.assignedSlot?.name === 'toggle'\n    const isIconButton = this.defaultSlot.assigned.some(node => node.localName === 'nord-icon')\n    const shouldShowDropdownIcon = isDropdownToggle && !this.hideDropdownIcon && !isIconButton && !this.href\n\n    const innards = html`\n      <slot name=\"start\"></slot>\n      <div class=\"n-content\">\n        <slot></slot>\n      </div>\n      <nord-spinner\n        class=\"n-button-spinner\"\n        color=\"currentColor\"\n        ?hidden=${!this.loading || Boolean(this.href)}\n      ></nord-spinner>\n      <slot name=\"end\">\n        ${shouldShowDropdownIcon\n          ? html`<nord-icon name=\"interface-dropdown-small\" class=\"n-toggle-icon\"></nord-icon>`\n          : nothing}\n      </slot>\n    `\n\n    return this.href ? this.renderLink(innards) : this.renderButton(innards)\n  }\n\n  /**\n   * We jump through some hoops here to ensure the link is treated correctly when \"disabled\".\n   * Links cannot be disabled natively, so we need to rely on some aria magic to get the correct semantics.\n   * Along with the advice in the article below, we also set tabindex to \"-1\", so it is taken out of tab order.\n   *\n   * @see https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n   */\n  private renderLink(innards: TemplateResult) {\n    return html`\n      <a\n        ${ref(this.focusableRef)}\n        class=\"n-button\"\n        target=${this.target}\n        ?download=${this.download}\n        href=${cond(this.disabled, nothing, this.href)}\n        tabindex=${cond(this.disabled, '-1')}\n        aria-disabled=${cond(this.disabled, 'true')}\n        role=${cond(this.disabled, 'link')}\n        >${innards}\n      </a>\n    `\n  }\n\n  private renderButton(innards: TemplateResult) {\n    return html`\n      <slot name=\"proxy\" @slotchange=${this.handleProxyChange}></slot>\n      <button\n        ${ref(this.focusableRef)}\n        class=\"n-button\"\n        ?disabled=${this.disabled}\n        name=${cond(this.name)}\n        value=${cond(this.value)}\n        @click=${this.handleClick}\n        aria-disabled=${cond(this.loading, 'true')}\n        aria-expanded=${cond(this.accessibleExpanded)}\n        aria-haspopup=${cond(this.accessibleHasPopup)}\n      >\n        ${innards}\n      </button>\n    `\n  }\n\n  private renderLightDom() {\n    if (this.href || !this.form) {\n      return nothing\n    }\n\n    return html`\n      <button\n        ${ref(this.buttonRef)}\n        slot=\"proxy\"\n        name=${cond(this.name)}\n        value=${cond(this.value)}\n        ?disabled=${this.disabled}\n        form=${cond(this._formId)}\n        type=${this.type}\n      ></button>\n    `\n  }\n\n  private handleOuterClick = (e: MouseEvent) => {\n    // we want to avoid emitting click events when a click\n    // happens in blank space in the host, but not on the button\n    // so we stop propagation of any events if click didn't happen on the internal or proxy button\n    const isInternalButton = e\n      .composedPath()\n      .some(node => node === this.focusableRef.value || node === this.buttonRef.value)\n\n    if (!isInternalButton) {\n      e.stopPropagation()\n    }\n  }\n\n  private handleClick(e: Event) {\n    if (this.buttonRef.value) {\n      // prevents two events: one from internal button, one from proxy button\n      e.stopPropagation()\n      this.buttonRef.value.click()\n    }\n  }\n\n  /**\n   * React/Vue etc may remove our proxy button when updating button text, since they are unaware of its existence.\n   * So we listen for a slotchange event, and if the element is no longer connected to the DOM we add it back in.\n   */\n  private handleProxyChange(e: Event) {\n    const slot = e.target as HTMLSlotElement\n    const proxyButton = this.buttonRef.value\n\n    if (proxyButton && proxyButton.assignedSlot !== slot) {\n      this.appendChild(proxyButton)\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-button': Button\n  }\n}\n"],"names":["Button","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","buttonRef","createRef","events","EventController","lightDom","LightDomController","render","renderLightDom","variant","type","size","download","target","expand","square","loading","hideDropdownIcon","handleOuterClick","e","composedPath","some","node","focusableRef","value","stopPropagation","connectedCallback","super","listen","isDropdownToggle","_a","assignedSlot","name","isIconButton","assigned","localName","shouldShowDropdownIcon","href","innards","html","Boolean","nothing","renderLink","renderButton","ref","cond","disabled","handleProxyChange","handleClick","accessibleExpanded","accessibleHasPopup","form","_formId","click","slot","proxyButton","appendChild","shadowRootOptions","delegatesFocus","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","customElement"],"mappings":"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"}

package/lib/ButtonGroup.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as r,html as n}from"lit";import{property as a,customElement as i}from"lit/decorators.js";import{classMap as e}from"lit/directives/class-map.js";import{D as s}from"./DirectionController-ChvNGESZ.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{s as d}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const u=o`:host{--_n-button-group-border-radius:var(--n-button-group-border-radius, var(--n-border-radius-s));--_n-button-group-box-shadow:var(--n-button-group-box-shadow, var(--n-box-shadow));--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}:host([variant=default]) .n-multiple-buttons{--n-button-border-radius:0;--n-button-box-shadow:none}.n-button-group{display:flex;flex-direction:var(--_n-button-group-flex-direction);max-inline-size:var(--_n-button-group-max-inline-size)}:host([variant=default]) .n-button-group.n-multiple-buttons{border-radius:var(--_n-button-group-border-radius);box-shadow:var(--_n-button-group-box-shadow)}:host([variant=spaced]) .n-button-group{gap:calc(var(--n-space-s) + var(--n-space-xs))}:host([variant=spaced]) .n-button-group.n-small-gap{gap:var(--n-space-s)}:host([variant=default][direction=horizontal]) .n-multiple-buttons ::slotted(*){margin-inline-end:-1px}:host([variant=default]) .n-multiple-buttons ::slotted(:is(:hover,:focus,:focus-within,[aria-pressed=true])){z-index:var(--n-index-mask)}:host([variant=default]) ::slotted(:is(:focus,:focus-within)){--n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow))}:host([variant=default]) ::slotted([aria-pressed=true]){--n-button-background-color:var(--n-color-status-info-weak);--n-button-border-color:var(--n-color-accent)}:host([variant=default]) .n-multiple-buttons ::slotted(*){border-radius:var(--n-button-border-radius)}:host([variant=default]) .n-multiple-buttons.n-rtl ::slotted(:last-child),:host([variant=default]) .n-multiple-buttons:not(.n-rtl) ::slotted(:first-child){--n-button-border-radius:var(--_n-button-group-border-radius) 0 0 var(--_n-button-group-border-radius)}:host([variant=default]) .n-multiple-buttons.n-rtl ::slotted(:first-child),:host([variant=default]) .n-multiple-buttons:not(.n-rtl) ::slotted(:last-child){--n-button-border-radius:0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0}:host([direction=vertical]) .n-button-group{--_n-button-group-flex-direction:column}:host([variant=default][direction=vertical]) .n-multiple-buttons ::slotted(*){margin-block-end:-1px}:host([variant=default][direction=vertical]) .n-multiple-buttons ::slotted(:first-child){--n-button-border-radius:var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0 0}:host([variant=default][direction=vertical]) .n-multiple-buttons ::slotted(:last-child){--n-button-border-radius:0 0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius)}:host([variant=spaced][wrap]) .n-button-group{flex-wrap:wrap}:host([variant=default]) ::slotted(nord-button[variant=primary]){position:relative}:host([variant=default]) ::slotted(nord-button[variant=primary]:not(:is(:focus,:first-child)))::before,:host([variant=default]) ::slotted(nord-button[variant=primary]:not(:is(:focus,:last-child)))::after{content:'';position:absolute;z-index:var(--n-index-mask);background:var(--n-color-text);opacity:.25}:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::after,:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::before{inline-size:1px;inset-block:0}:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::after{inset-inline-end:0}:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::after,:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::before{block-size:1px;inset-inline:0}:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::after{inset-block-end:0}`;let b=class extends r{constructor(){super(...arguments),this.defaultSlot=new l(this),this.dirController=new s(this),this.variant="default",this.direction="horizontal",this.wrap=!1,this.role="group"}render(){const t=this.defaultSlot.assigned.every((t=>"nord-button"!==t.localName&&"nord-select"!==t.localName||"s"===t.getAttribute("size"))),o=this.defaultSlot.assigned.length>1;return n`<div class="${e({"n-button-group":!0,"n-rtl":this.dirController.isRTL,"n-small-gap":t&&"spaced"===this.variant,"n-multiple-buttons":o})}"><slot></slot></div>`}};b.styles=[d,u],t([a({reflect:!0})],b.prototype,"variant",void 0),t([a({reflect:!0})],b.prototype,"direction",void 0),t([a({reflect:!0,type:Boolean})],b.prototype,"wrap",void 0),t([a({reflect:!0})],b.prototype,"role",void 0),b=t([i("nord-button-group")],b);var p=b;export{p as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as r,html as n}from"lit";import{property as a,customElement as i}from"lit/decorators.js";import{classMap as e}from"lit/directives/class-map.js";import{D as s}from"./DirectionController-ChvNGESZ.js";import{S as u}from"./SlotController-Z6eG7LSZ.js";import{s as l}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const d=o`:host{--_n-button-group-border-radius:var(--n-button-group-border-radius, var(--n-border-radius-s));--_n-button-group-box-shadow:var(--n-button-group-box-shadow, var(--n-box-shadow));--_n-button-group-gap:var(--n-button-group-gap, calc(var(--n-space-s) + var(--n-space-xs)));--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}:host([variant=default]) .n-multiple-buttons{--n-button-border-radius:0;--n-button-box-shadow:none}.n-button-group{display:flex;flex-direction:var(--_n-button-group-flex-direction);max-inline-size:var(--_n-button-group-max-inline-size)}:host([variant=default]) .n-button-group.n-multiple-buttons{border-radius:var(--_n-button-group-border-radius);box-shadow:var(--_n-button-group-box-shadow)}:host([variant=spaced]) .n-button-group{gap:var(--_n-button-group-gap)}:host([variant=spaced]) .n-button-group.n-small-gap{--_n-button-group-gap:var(--n-button-group-gap, var(--n-space-s))}:host([variant=default][direction=horizontal]) .n-multiple-buttons ::slotted(*){margin-inline-end:-1px}:host([variant=default]) .n-multiple-buttons ::slotted(:is(:hover,:focus,:focus-within,[aria-pressed=true])){z-index:var(--n-index-mask)}:host([variant=default]) ::slotted(:is(:focus,:focus-within)){--n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow))}:host([variant=default]) ::slotted([aria-pressed=true]){--n-button-background-color:var(--n-color-status-info-weak);--n-button-border-color:var(--n-color-accent)}:host([variant=default]) .n-multiple-buttons ::slotted(*){border-radius:var(--n-button-border-radius)}:host([variant=default]) .n-multiple-buttons.n-rtl ::slotted(:last-child),:host([variant=default]) .n-multiple-buttons:not(.n-rtl) ::slotted(:first-child){--n-button-border-radius:var(--_n-button-group-border-radius) 0 0 var(--_n-button-group-border-radius)}:host([variant=default]) .n-multiple-buttons.n-rtl ::slotted(:first-child),:host([variant=default]) .n-multiple-buttons:not(.n-rtl) ::slotted(:last-child){--n-button-border-radius:0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0}:host([direction=vertical]) .n-button-group{--_n-button-group-flex-direction:column}:host([variant=default][direction=vertical]) .n-multiple-buttons ::slotted(*){margin-block-end:-1px}:host([variant=default][direction=vertical]) .n-multiple-buttons ::slotted(:first-child){--n-button-border-radius:var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0 0}:host([variant=default][direction=vertical]) .n-multiple-buttons ::slotted(:last-child){--n-button-border-radius:0 0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius)}:host([variant=spaced][wrap]) .n-button-group{flex-wrap:wrap}:host([variant=default]) ::slotted(nord-button[variant=primary]){position:relative}:host([variant=default]) ::slotted(nord-button[variant=primary]:not(:is(:focus,:first-child)))::before,:host([variant=default]) ::slotted(nord-button[variant=primary]:not(:is(:focus,:last-child)))::after{content:'';position:absolute;z-index:var(--n-index-mask);background:var(--n-color-text);opacity:.25}:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::after,:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::before{inline-size:1px;inset-block:0}:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::after{inset-inline-end:0}:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::after,:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::before{block-size:1px;inset-inline:0}:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::after{inset-block-end:0}`;let b=class extends r{constructor(){super(...arguments),this.defaultSlot=new u(this),this.dirController=new s(this),this.variant="default",this.direction="horizontal",this.wrap=!1,this.role="group"}render(){const t=this.defaultSlot.assigned.every((t=>"nord-button"!==t.localName&&"nord-select"!==t.localName||"s"===t.getAttribute("size"))),o=this.defaultSlot.assigned.length>1;return n`<div class="${e({"n-button-group":!0,"n-rtl":this.dirController.isRTL,"n-small-gap":t&&"spaced"===this.variant,"n-multiple-buttons":o})}"><slot></slot></div>`}};b.styles=[l,d],t([a({reflect:!0})],b.prototype,"variant",void 0),t([a({reflect:!0})],b.prototype,"direction",void 0),t([a({reflect:!0,type:Boolean})],b.prototype,"wrap",void 0),t([a({reflect:!0})],b.prototype,"role",void 0),b=t([i("nord-button-group")],b);var p=b;export{p as default};
 //# sourceMappingURL=ButtonGroup.js.map

package/lib/ButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.js","sources":["../src/button-group/ButtonGroup.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { classMap } from 'lit/directives/class-map.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './ButtonGroup.css'\n\n/**\n * Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.\n *\n * @status ready\n * @category structure\n * @slot - The button group content\n *\n * @cssprop [--n-button-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.\n * @cssprop [--n-button-group-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.\n */\n@customElement('nord-button-group')\nexport default class ButtonGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n  private dirController = new DirectionController(this)\n\n  /**\n   * The style variant of the button group.\n   */\n  @property({ reflect: true }) variant: 'default' | 'spaced' = 'default'\n\n  /**\n   * The direction of the button group.\n   */\n  @property({ reflect: true }) direction: 'vertical' | 'horizontal' = 'horizontal'\n\n  /**\n   * Defines whether the buttons are forced in a single line\n   * or can be flowed into multiple lines (only applied when variant is set to `spaced`).\n   */\n  @property({ reflect: true, type: Boolean }) wrap = false\n\n  /**\n   * The appropriate role for the containing element.\n   */\n\n  @property({ reflect: true }) role: string = 'group'\n\n  render() {\n    const hasSmallButtons = this.defaultSlot.assigned.every((node) => {\n      if (node.localName === 'nord-button' || node.localName === 'nord-select') {\n        return node.getAttribute('size') === 's'\n      }\n\n      return true\n    })\n\n    const hasMultipleButtons = this.defaultSlot.assigned.length > 1\n\n    return html`\n      <div\n        class=${classMap({\n          'n-button-group': true,\n          'n-rtl': this.dirController.isRTL,\n          'n-small-gap': hasSmallButtons && this.variant === 'spaced',\n          'n-multiple-buttons': hasMultipleButtons,\n        })}\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-button-group': ButtonGroup\n  }\n}\n"],"names":["ButtonGroup","LitElement","constructor","this","defaultSlot","SlotController","dirController","DirectionController","variant","direction","wrap","role","render","hasSmallButtons","assigned","every","node","localName","getAttribute","hasMultipleButtons","length","html","classMap","isRTL","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"u/HAoBe,IAAMA,EAAN,cAA0BC,EAA1B,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAAAG,cAAgB,IAAIC,EAAoBJ,MAKnBA,KAAOK,QAAyB,UAKhCL,KAASM,UAA8B,aAMxBN,KAAIO,MAAG,EAMtBP,KAAIQ,KAAW,OA0B7C,CAxBC,MAAAC,GACE,MAAMC,EAAkBV,KAAKC,YAAYU,SAASC,OAAOC,GAChC,gBAAnBA,EAAKC,WAAkD,gBAAnBD,EAAKC,WACN,MAA9BD,EAAKE,aAAa,UAMvBC,EAAqBhB,KAAKC,YAAYU,SAASM,OAAS,EAE9D,OAAOC,CAAI,eAECC,EAAS,CACf,kBAAkB,EAClB,QAASnB,KAAKG,cAAciB,MAC5B,cAAeV,GAAoC,WAAjBV,KAAKK,QACvC,qBAAsBW,0BAM7B,GAlDMnB,EAAAwB,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiD7B,EAAA8B,UAAA,eAAA,GAKzCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2D7B,EAAA8B,UAAA,iBAAA,GAMpCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAuBhC,EAAA8B,UAAA,YAAA,GAM3BH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA8B7B,EAAA8B,UAAA,YAAA,GA1BhC9B,EAAW2B,EAAA,CAD/BM,EAAc,sBACMjC,SAAAA"}
+{"version":3,"file":"ButtonGroup.js","sources":["../src/button-group/ButtonGroup.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { classMap } from 'lit/directives/class-map.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './ButtonGroup.css'\n\n/**\n * Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.\n *\n * @status ready\n * @category structure\n * @slot - The button group content\n *\n * @cssprop [--n-button-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.\n * @cssprop [--n-button-group-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.\n * @cssprop [--n-button-group-gap=calc(var(--n-space-s) + var(--n-space-xs))] - Controls the gap between buttons, using [space tokens](/tokens/#space). Only relevant for the spaced variant. Defaults to `var(--n-space-s)` when all slotted controls are `size=\"s\"`.\n */\n@customElement('nord-button-group')\nexport default class ButtonGroup extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n  private dirController = new DirectionController(this)\n\n  /**\n   * The style variant of the button group.\n   */\n  @property({ reflect: true }) variant: 'default' | 'spaced' = 'default'\n\n  /**\n   * The direction of the button group.\n   */\n  @property({ reflect: true }) direction: 'vertical' | 'horizontal' = 'horizontal'\n\n  /**\n   * Defines whether the buttons are forced in a single line\n   * or can be flowed into multiple lines (only applied when variant is set to `spaced`).\n   */\n  @property({ reflect: true, type: Boolean }) wrap = false\n\n  /**\n   * The appropriate role for the containing element.\n   */\n\n  @property({ reflect: true }) role: string = 'group'\n\n  render() {\n    const hasSmallButtons = this.defaultSlot.assigned.every((node) => {\n      if (node.localName === 'nord-button' || node.localName === 'nord-select') {\n        return node.getAttribute('size') === 's'\n      }\n\n      return true\n    })\n\n    const hasMultipleButtons = this.defaultSlot.assigned.length > 1\n\n    return html`\n      <div\n        class=${classMap({\n          'n-button-group': true,\n          'n-rtl': this.dirController.isRTL,\n          'n-small-gap': hasSmallButtons && this.variant === 'spaced',\n          'n-multiple-buttons': hasMultipleButtons,\n        })}\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-button-group': ButtonGroup\n  }\n}\n"],"names":["ButtonGroup","LitElement","constructor","this","defaultSlot","SlotController","dirController","DirectionController","variant","direction","wrap","role","render","hasSmallButtons","assigned","every","node","localName","getAttribute","hasMultipleButtons","length","html","classMap","isRTL","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"gnIAqBe,IAAMA,EAAN,cAA0BC,EAA1B,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAAAG,cAAgB,IAAIC,EAAoBJ,MAKnBA,KAAOK,QAAyB,UAKhCL,KAASM,UAA8B,aAMxBN,KAAIO,MAAG,EAMtBP,KAAIQ,KAAW,OA0B7C,CAxBC,MAAAC,GACE,MAAMC,EAAkBV,KAAKC,YAAYU,SAASC,OAAOC,GAChC,gBAAnBA,EAAKC,WAAkD,gBAAnBD,EAAKC,WACN,MAA9BD,EAAKE,aAAa,UAMvBC,EAAqBhB,KAAKC,YAAYU,SAASM,OAAS,EAE9D,OAAOC,CAAI,eAECC,EAAS,CACf,kBAAkB,EAClB,QAASnB,KAAKG,cAAciB,MAC5B,cAAeV,GAAoC,WAAjBV,KAAKK,QACvC,qBAAsBW,0BAM7B,GAlDMnB,EAAAwB,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiD7B,EAAA8B,UAAA,eAAA,GAKzCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2D7B,EAAA8B,UAAA,iBAAA,GAMpCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAuBhC,EAAA8B,UAAA,YAAA,GAM3BH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA8B7B,EAAA8B,UAAA,YAAA,GA1BhC9B,EAAW2B,EAAA,CAD/BM,EAAc,sBACMjC,SAAAA"}

package/lib/DatePicker.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-close-small-CnpAFMO3.js";import{css as i,html as o,nothing as a,LitElement as r}from"lit";import{query as s,property as n,customElement as l}from"lit/decorators.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{ref as p}from"lit/directives/ref.js";import{S as h,i as c}from"./Calendar-ChNZdVRO.js";import{D as m,c as u,p as v,a as f}from"./dates-CAAlPKZi.js";import{c as b}from"./cond-CI1KbneT.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as j}from"./FocusableMixin-BlQLNPdJ.js";import{F as y}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as $}from"./InputMixin-LetXsCyv.js";import{R as D,s as k}from"./TextField-B955GOhe.js";import{S as x}from"./SizeMixin-CU9cLbLC.js";import{s as w}from"./Component-DSU3Qp0O.js";import{s as z}from"./FormField-BFaVzUjk.js";import C from"./Icon.js";import{LocalizeController as F}from"./LocalizeController.js";import{isoAdapter as B}from"./date-adapter.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-DtEL0HZ0.js";import"./Stack.js";import"lit/directives/class-map.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./collection-Dvg2XbxV.js";import"./DirectionController-ChvNGESZ.js";import"./EventController-BBOmvfLa.js";import"./observe-D0n0zOfU.js";import"./number-Dg2vCfGd.js";import"./DateSelectEvent.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"lit/directives/style-map.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./ScrollbarController-BFC67Y2x.js";var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',tags:"nordicon interface calendar date time day week month year",title:"interface-calendar"});const S=i`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;C.registerIcon(A),C.registerIcon(e);const E=()=>!1,I=()=>!1;let L=class extends(x(y(D($(j(r)))))){constructor(){super(...arguments),this.swipe=new h(this,{target:()=>this.popout,matchesGesture:c,onSwipeEnd:()=>this.hide()}),this.localize=new F(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=m.Monday,this.dateAdapter=B,this.isDateDisabled=E,this.isDateHighlighted=I,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.internalError=this.validateDateBounds(this.valueAsDate),this.dispatchEvent(new g("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new g("focus"))},this.handleInputChange=t=>{var e;const i=t.target,o=this.dateAdapter.parse(i.value,u);this.rawValue=null===(e=this.focusableRef.value)||void 0===e?void 0:e.value,(o||""===i.value)&&this.setValue(o)}}get valueAsDate(){return v(this.value)}set valueAsDate(t){this.value=t?f(t):""}get valueAsNumber(){var t,e;return null!==(e=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==e?e:Number.NaN}set valueAsNumber(t){this.value=t?f(new Date(t)):""}firstUpdated(){var t;this.rawValue=null===(t=this.focusableRef.value)||void 0===t?void 0:t.value}render(){const{valueAsDate:t}=this,e=t?this.dateAdapter.format(t):"";return o`<nord-input class="n-date-picker-input" value="${e}" label="${d(this.label)}" hint="${d(this.hint)}" error="${b(this.error||this.internalError,this.error||this.internalError)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hint-below="${this.hintBelow}" ?hide-label="${this.hideLabel}" ?hide-required="${this.hideRequired}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${p(this.focusableRef)} aria-invalid="${b(this.error||this.internalError,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?a:o`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?a:o`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:a}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${d(this.min)}" max="${d(this.max)}" today="${d(this.today)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?f(t):"";const{valueAsDate:e}=this,i=e?this.dateAdapter.format(e):"";this.rawValue=i,this.dispatchEvent(new g("change"))}validateDateBounds(t){if(!t)return;const e=v(this.min||""),i=v(this.max||"");return e&&t<e?this.localize.term("dateOutOfMinBound",this.min):i&&t>i?this.localize.term("dateOutOfMaxBound",this.max):void 0}hide(t){this.popout.hide(t)}show(){this.popout.show()}};L.styles=[w,z,k,S],t([s(".n-date-picker-toggle",!0)],L.prototype,"toggleButton",void 0),t([s(".n-date-picker-close-button",!0)],L.prototype,"closeButton",void 0),t([s("nord-calendar",!0)],L.prototype,"calendar",void 0),t([s('[role="dialog"]',!0)],L.prototype,"popout",void 0),t([n()],L.prototype,"value",void 0),t([n({attribute:!1})],L.prototype,"internalError",void 0),t([n({attribute:!1})],L.prototype,"rawValue",void 0),t([n({type:Boolean,reflect:!0})],L.prototype,"open",void 0),t([n({reflect:!0})],L.prototype,"min",void 0),t([n({reflect:!0})],L.prototype,"max",void 0),t([n({reflect:!0})],L.prototype,"today",void 0),t([n({reflect:!0,attribute:"first-day-of-week",type:Number})],L.prototype,"firstDayOfWeek",void 0),t([n({attribute:!1})],L.prototype,"dateAdapter",void 0),t([n({attribute:!1})],L.prototype,"isDateDisabled",void 0),t([n({attribute:!1})],L.prototype,"isDateHighlighted",void 0),t([n({reflect:!0,type:Boolean})],L.prototype,"expand",void 0),L=t([l("nord-date-picker")],L);var M=L;export{M as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-close-small-CnpAFMO3.js";import{css as i,html as o,nothing as a,LitElement as r}from"lit";import{query as s,property as n,customElement as l}from"lit/decorators.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{ref as p}from"lit/directives/ref.js";import{S as h,i as c}from"./Calendar-ChNZdVRO.js";import{D as m,c as u,p as v,a as f}from"./dates-CAAlPKZi.js";import{c as b}from"./cond-CI1KbneT.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as j}from"./FocusableMixin-BlQLNPdJ.js";import{F as y}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as $}from"./InputMixin-LetXsCyv.js";import{R as D,s as k}from"./TextField-B955GOhe.js";import{S as x}from"./SizeMixin-CU9cLbLC.js";import{s as w}from"./Component-DSU3Qp0O.js";import{s as z}from"./FormField-BFaVzUjk.js";import C from"./Icon.js";import{LocalizeController as F}from"./LocalizeController.js";import{isoAdapter as B}from"./date-adapter.js";import"./Input.js";import"./Button.js";import"./VisuallyHidden.js";import"./Popout-CYqn_dZu.js";import"./Stack.js";import"lit/directives/class-map.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./collection-Dvg2XbxV.js";import"./DirectionController-ChvNGESZ.js";import"./EventController-BBOmvfLa.js";import"./observe-D0n0zOfU.js";import"./number-Dg2vCfGd.js";import"./DateSelectEvent.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"lit/directives/style-map.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./ScrollbarController-BFC67Y2x.js";var A=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m18 2h-2v-2h-2v2h-8v-2h-2v2h-2c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2zm-14 2v2h2v-2h8v2h2v-2h2v4h-16v-4zm-2 14v-8h16v8z" fill="currentColor"/></svg>',tags:"nordicon interface calendar date time day week month year",title:"interface-calendar"});const S=i`:host{color:var(--n-color-text);position:relative}:host(:not([expand])) .n-date-picker-input{max-inline-size:max-content}.n-date-picker-calendar{--n-calendar-box-shadow:none}@media (max-width:35.9375em){.n-date-picker-header{padding:calc(var(--n-space-s) * 1.5) var(--n-space-m);border-block-end:1px solid var(--n-color-border)}.n-date-picker-calendar{--_n-calendar-padding:var(--n-space-l)}}.n-date-picker-close-button{--n-button-border-radius:var(--n-border-radius-circle);--_n-button-padding-inline:calc(var(--n-space-s) / 1.3);--_n-button-padding-block:0;opacity:0;position:absolute;inset-block-start:calc(var(--n-space-s) * -1);inset-inline-end:calc(var(--n-space-s) * -1)}.n-date-picker-close-button:focus{opacity:1}.n-date-picker-heading{display:none;font-weight:var(--n-font-weight-active)}@media (max-width:35.9375em){.n-date-picker-close-button{opacity:1;position:relative;inset:auto}.n-date-picker-heading{display:initial}}`;C.registerIcon(A),C.registerIcon(e);const E=()=>!1,I=()=>!1;let L=class extends(x(y(D($(j(r)))))){constructor(){super(...arguments),this.swipe=new h(this,{target:()=>this.popout,matchesGesture:c,onSwipeEnd:()=>this.hide()}),this.localize=new F(this,{onLangChange:()=>this.createDateFormatters()}),this.value="",this.open=!1,this.firstDayOfWeek=m.Monday,this.dateAdapter=B,this.isDateDisabled=E,this.isDateHighlighted=I,this.expand=!1,this.handleDaySelect=t=>{t.stopPropagation(),this.setValue(t.date),this.hide()},this.handleBlur=t=>{t.stopPropagation(),this.internalError=this.validateDateBounds(this.valueAsDate),this.dispatchEvent(new g("blur"))},this.handleFocus=t=>{t.stopPropagation(),this.dispatchEvent(new g("focus"))},this.handleInputChange=t=>{var e;const i=t.target,o=this.dateAdapter.parse(i.value,u);this.rawValue=null===(e=this.focusableRef.value)||void 0===e?void 0:e.value,(o||""===i.value)&&this.setValue(o)}}get valueAsDate(){return v(this.value)}set valueAsDate(t){this.value=t?f(t):""}get valueAsNumber(){var t,e;return null!==(e=null===(t=this.valueAsDate)||void 0===t?void 0:t.getTime())&&void 0!==e?e:Number.NaN}set valueAsNumber(t){this.value=t?f(new Date(t)):""}firstUpdated(){var t;this.rawValue=null===(t=this.focusableRef.value)||void 0===t?void 0:t.value}render(){const{valueAsDate:t}=this,e=t?this.dateAdapter.format(t):"";return o`<nord-input class="n-date-picker-input" value="${e}" label="${d(this.label)}" hint="${d(this.hint)}" error="${b(this.error||this.internalError,this.error||this.internalError)}" placeholder="${d(this.placeholder)}" id="${this.inputId}" size="${this.size}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" ?hint-below="${this.hintBelow}" ?hide-label="${this.hideLabel}" ?hide-required="${this.hideRequired}" disallow-pattern="[^0-9./-]" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @input="${this.handleInputChange}" ${p(this.focusableRef)} aria-invalid="${b(this.error||this.internalError,"true")}" aria-describedby="${d(this.getDescribedBy())}">${this.hintSlot.isEmpty?a:o`<slot name="hint" slot="hint"></slot>`} ${this.labelSlot.isEmpty?a:o`<slot name="label" slot="label"></slot>`}<nord-button size="${this.size}" ?disabled="${this.disabled||this.readonly}" slot="end" class="n-date-picker-toggle" aria-controls="popout" type="button"><nord-icon name="interface-calendar"></nord-icon><nord-visually-hidden>${this.localize.term("buttonLabel")} ${t?o`<span>, ${this.localize.term("selectedDateMessage")} ${this.dateFormatLong.format(t)}</span>`:a}</nord-visually-hidden></nord-button></nord-input><nord-popout id="popout" anchor="${this.inputId}" align="end" position="block-end" role="dialog" aria-modal="true" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}" aria-labelledby="header"><div aria-hidden="true" tabindex="0" @focus="${this.focusLast}"></div><nord-stack class="n-date-picker-header" direction="horizontal" justify-content="space-between"><div class="n-date-picker-heading" id="header">${this.localize.term("modalHeading")}</div><nord-button class="n-date-picker-close-button" type="button" size="s" variant="plain" @click="${this.handleClose}"><nord-visually-hidden>${this.localize.term("closeLabel")}</nord-visually-hidden><nord-icon name="interface-close-small"></nord-icon></nord-button></nord-stack><nord-calendar class="n-date-picker-calendar" expand value="${this.value}" min="${d(this.min)}" max="${d(this.max)}" today="${d(this.today)}" .firstDayOfWeek="${this.firstDayOfWeek}" .isDateDisabled="${this.isDateDisabled}" .isDateHighlighted="${this.isDateHighlighted}" @change="${this.handleDaySelect}"></nord-calendar><div aria-hidden="true" tabindex="0" @focus="${this.focusFirst}"></div></nord-popout>`}createDateFormatters(){this.dateFormatLong=new Intl.DateTimeFormat(this.localize.resolvedLang,{day:"numeric",month:"long",year:"numeric"})}focusFirst(){this.closeButton.focus()}focusLast(){this.calendar.focus({target:"day"})}handleOpen(){this.open=!0,this.calendar.focus({target:"month"})}handleClose(){this.open=!1}setValue(t){this.value=t?f(t):"";const{valueAsDate:e}=this,i=e?this.dateAdapter.format(e):"";this.rawValue=i,this.dispatchEvent(new g("change"))}validateDateBounds(t){if(!t)return;const e=v(this.min||""),i=v(this.max||"");return e&&t<e?this.localize.term("dateOutOfMinBound",this.min):i&&t>i?this.localize.term("dateOutOfMaxBound",this.max):void 0}hide(t){this.popout.hide(t)}show(){this.popout.show()}};L.styles=[w,z,k,S],t([s(".n-date-picker-toggle",!0)],L.prototype,"toggleButton",void 0),t([s(".n-date-picker-close-button",!0)],L.prototype,"closeButton",void 0),t([s("nord-calendar",!0)],L.prototype,"calendar",void 0),t([s('[role="dialog"]',!0)],L.prototype,"popout",void 0),t([n()],L.prototype,"value",void 0),t([n({attribute:!1})],L.prototype,"internalError",void 0),t([n({attribute:!1})],L.prototype,"rawValue",void 0),t([n({type:Boolean,reflect:!0})],L.prototype,"open",void 0),t([n({reflect:!0})],L.prototype,"min",void 0),t([n({reflect:!0})],L.prototype,"max",void 0),t([n({reflect:!0})],L.prototype,"today",void 0),t([n({reflect:!0,attribute:"first-day-of-week",type:Number})],L.prototype,"firstDayOfWeek",void 0),t([n({attribute:!1})],L.prototype,"dateAdapter",void 0),t([n({attribute:!1})],L.prototype,"isDateDisabled",void 0),t([n({attribute:!1})],L.prototype,"isDateHighlighted",void 0),t([n({reflect:!0,type:Boolean})],L.prototype,"expand",void 0),L=t([l("nord-date-picker")],L);var M=L;export{M as default};
 //# sourceMappingURL=DatePicker.js.map

package/lib/Drawer.js

@@ -1,2 +1,2 @@
-import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as d,LitElement as e,html as o}from"lit";import{property as a,customElement as n}from"lit/decorators.js";import{S as t}from"./SlotController-Z6eG7LSZ.js";import{s as i}from"./Component-DSU3Qp0O.js";import"./Footer.js";import"./EventController-BBOmvfLa.js";const s=d`:host{--_n-drawer-padding:var(--n-drawer-padding, var(--n-space-l));--_n-drawer-background-color:var(--n-drawer-background-color, var(--n-color-surface));--_n-drawer-border-color:var(--n-drawer-border-color, var(--n-color-border));--_n-drawer-border-radius:var(--n-drawer-border-radius, 0);--_n-drawer-border-width:var(--n-drawer-border-width, 0);--_n-drawer-border-inline-start-width:var(--n-drawer-border-inline-start-width, var(--_n-drawer-border-width));--_n-drawer-border-inline-end-width:var(--n-drawer-border-inline-end-width, var(--_n-drawer-border-width));--_n-drawer-border-block-start-width:var(--n-drawer-border-block-start-width, var(--_n-drawer-border-width));--_n-drawer-border-block-end-width:var(--n-drawer-border-block-end-width, var(--_n-drawer-border-width));background-color:var(--_n-drawer-background-color);border-style:solid;border-color:var(--_n-drawer-border-color);border-inline-start-width:var(--_n-drawer-border-inline-start-width);border-inline-end-width:var(--_n-drawer-border-inline-end-width);border-block-start-width:var(--_n-drawer-border-block-start-width);border-block-end-width:var(--_n-drawer-border-block-end-width);border-radius:var(--_n-drawer-border-radius)}:host([padding='m']){--_n-drawer-padding:var(--n-drawer-padding, var(--n-space-m))}:host([padding='s']){--_n-drawer-padding:var(--n-drawer-padding, var(--n-space-s))}.n-drawer{--n-footer-box-shadow:none;display:flex;flex-direction:column;block-size:100%}.n-drawer-main{flex:1;padding:var(--_n-drawer-padding);overflow-y:auto}:host([padding=none]){--_n-drawer-padding:var(--n-drawer-padding, 0)}::slotted(nord-header){--_n-header-box-shadow:none;--n-header-background-color:transparent;--n-header-padding-inline:var(--_n-drawer-padding)}`;let w=class extends e{constructor(){super(...arguments),this.footerSlot=new t(this,"footer"),this.padding="l"}render(){return o`<div class="n-drawer"><slot name="header"></slot><div class="n-drawer-main"><slot></slot></div><nord-footer ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></nord-footer></div>`}};w.styles=[i,s],r([a({reflect:!0})],w.prototype,"padding",void 0),w=r([n("nord-drawer")],w);var l=w;export{l as default};
+import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as d,LitElement as e,html as o}from"lit";import{property as a,customElement as n}from"lit/decorators.js";import{S as t}from"./SlotController-Z6eG7LSZ.js";import{s as i}from"./Component-DSU3Qp0O.js";import"./Footer.js";import"./EventController-BBOmvfLa.js";const s=d`:host{--_n-drawer-padding:var(--n-drawer-padding, var(--n-space-l));--_n-drawer-background-color:var(--n-drawer-background-color, var(--n-color-surface));--_n-drawer-border-color:var(--n-drawer-border-color, var(--n-color-border));--_n-drawer-border-radius:var(--n-drawer-border-radius, 0);--_n-drawer-border-width:var(--n-drawer-border-width, 0);--_n-drawer-border-inline-start-width:var(--n-drawer-border-inline-start-width, var(--n-drawer-border-width, 1px));--_n-drawer-border-inline-end-width:var(--n-drawer-border-inline-end-width, var(--_n-drawer-border-width));--_n-drawer-border-block-start-width:var(--n-drawer-border-block-start-width, var(--_n-drawer-border-width));--_n-drawer-border-block-end-width:var(--n-drawer-border-block-end-width, var(--_n-drawer-border-width));background-color:var(--_n-drawer-background-color);border-style:solid;border-color:var(--_n-drawer-border-color);border-inline-start-width:var(--_n-drawer-border-inline-start-width);border-inline-end-width:var(--_n-drawer-border-inline-end-width);border-block-start-width:var(--_n-drawer-border-block-start-width);border-block-end-width:var(--_n-drawer-border-block-end-width);border-radius:var(--_n-drawer-border-radius)}:host([padding='m']){--_n-drawer-padding:var(--n-drawer-padding, var(--n-space-m))}:host([padding='s']){--_n-drawer-padding:var(--n-drawer-padding, var(--n-space-s))}.n-drawer{--n-footer-box-shadow:none;display:flex;flex-direction:column;block-size:100%}.n-drawer-main{flex:1;padding:var(--_n-drawer-padding);overflow-y:auto}:host([padding=none]){--_n-drawer-padding:var(--n-drawer-padding, 0)}::slotted(nord-header){--_n-header-box-shadow:none;--n-header-background-color:transparent;--n-header-padding-inline:var(--_n-drawer-padding)}`;let w=class extends e{constructor(){super(...arguments),this.footerSlot=new t(this,"footer"),this.padding="l"}render(){return o`<div class="n-drawer"><slot name="header"></slot><div class="n-drawer-main"><slot></slot></div><nord-footer ?hidden="${this.footerSlot.isEmpty}"><slot name="${this.footerSlot.slotName}"></slot></nord-footer></div>`}};w.styles=[i,s],r([a({reflect:!0})],w.prototype,"padding",void 0),w=r([n("nord-drawer")],w);var l=w;export{l as default};
 //# sourceMappingURL=Drawer.js.map

package/lib/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\n\nimport componentStyle from '../common/styles/Component.css'\n\nimport style from './Drawer.css'\nimport '../footer/Footer.js'\n\n/**\n * Drawer is used to display context-sensitive actions and  information.\n * Drawer doesn’t block users from completing their task, like a modal would.\n *\n * @status new\n * @category structure\n * @slot header - Optional slot that holds a header for the drawer.\n * @slot - Default slot.\n * @slot footer - Optional slot that holds footer content for the drawer.\n *\n * @cssprop [--n-drawer-padding=var(--n-space-l)] - Controls the padding around the main area (the default slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-drawer-background-color=var(--n-color-surface)] - Controls the background color of the drawer.\n */\n@customElement('nord-drawer')\nexport default class Drawer extends LitElement {\n  static styles = [componentStyle, style]\n\n  private footerSlot = new SlotController(this, 'footer')\n\n  /**\n   * Controls the padding of the drawer component.\n   */\n  @property({ reflect: true }) padding: 'l' | 'm' | 's' | 'none' = 'l'\n\n  render() {\n    return html`\n      <div class=\"n-drawer\">\n        <slot name=\"header\"></slot>\n\n        <div class=\"n-drawer-main\">\n          <slot></slot>\n        </div>\n\n        <nord-footer ?hidden=${this.footerSlot.isEmpty}>\n          <slot name=${this.footerSlot.slotName}></slot>\n        </nord-footer>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-drawer': Drawer\n  }\n}\n"],"names":["Drawer","LitElement","constructor","this","footerSlot","SlotController","padding","render","html","isEmpty","slotName","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"4gEAuBe,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UAKjBA,KAAOG,QAA6B,GAiBlE,CAfC,MAAAC,GACE,OAAOC,CAAI,wHAQgBL,KAAKC,WAAWK,wBACxBN,KAAKC,WAAWM,uCAIpC,GAvBMV,EAAAW,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA+ChB,EAAAiB,UAAA,eAAA,GARjDjB,EAAMc,EAAA,CAD1BI,EAAc,gBACMlB,SAAAA"}
+{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\n\nimport componentStyle from '../common/styles/Component.css'\n\nimport style from './Drawer.css'\nimport '../footer/Footer.js'\n\n/**\n * Drawer is used to display context-sensitive actions and  information.\n * Drawer doesn’t block users from completing their task, like a modal would.\n *\n * @status new\n * @category structure\n * @slot header - Optional slot that holds a header for the drawer.\n * @slot - Default slot.\n * @slot footer - Optional slot that holds footer content for the drawer.\n *\n * @cssprop [--n-drawer-padding=var(--n-space-l)] - Controls the padding around the main area (the default slot), using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-drawer-background-color=var(--n-color-surface)] - Controls the background color of the drawer.\n * @cssprop [--n-drawer-border-color=var(--n-color-border)] - Controls the color of the drawer's borders.\n * @cssprop [--n-drawer-border-radius=0] - Controls the border radius of the drawer.\n * @cssprop [--n-drawer-border-width=0] - Controls the width of the drawer's borders on every edge. The inline-start edge defaults to `1px` to separate the drawer from adjacent content; set this to `0` to remove all borders.\n * @cssprop [--n-drawer-border-inline-start-width=1px] - Controls the width of the drawer's inline-start border. Falls back to `--n-drawer-border-width`, then `1px`.\n * @cssprop [--n-drawer-border-inline-end-width=var(--n-drawer-border-width)] - Controls the width of the drawer's inline-end border.\n * @cssprop [--n-drawer-border-block-start-width=var(--n-drawer-border-width)] - Controls the width of the drawer's block-start border.\n * @cssprop [--n-drawer-border-block-end-width=var(--n-drawer-border-width)] - Controls the width of the drawer's block-end border.\n */\n@customElement('nord-drawer')\nexport default class Drawer extends LitElement {\n  static styles = [componentStyle, style]\n\n  private footerSlot = new SlotController(this, 'footer')\n\n  /**\n   * Controls the padding of the drawer component.\n   */\n  @property({ reflect: true }) padding: 'l' | 'm' | 's' | 'none' = 'l'\n\n  render() {\n    return html`\n      <div class=\"n-drawer\">\n        <slot name=\"header\"></slot>\n\n        <div class=\"n-drawer-main\">\n          <slot></slot>\n        </div>\n\n        <nord-footer ?hidden=${this.footerSlot.isEmpty}>\n          <slot name=${this.footerSlot.slotName}></slot>\n        </nord-footer>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-drawer': Drawer\n  }\n}\n"],"names":["Drawer","LitElement","constructor","this","footerSlot","SlotController","padding","render","html","isEmpty","slotName","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"ghEA8Be,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAGLC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UAKjBA,KAAOG,QAA6B,GAiBlE,CAfC,MAAAC,GACE,OAAOC,CAAI,wHAQgBL,KAAKC,WAAWK,wBACxBN,KAAKC,WAAWM,uCAIpC,GAvBMV,EAAAW,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA+ChB,EAAAiB,UAAA,eAAA,GARjDjB,EAAMc,EAAA,CAD1BI,EAAc,gBACMlB,SAAAA"}

package/lib/Dropdown.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as o,LitElement as n}from"lit";import{query as s,state as i,property as a,customElement as r}from"lit/decorators.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{o as p}from"./observe-D0n0zOfU.js";import{F as c}from"./Popout-DtEL0HZ0.js";import{s as u}from"./Component-DSU3Qp0O.js";import"./Icon.js";import"./DropdownItem.js";import"./EventController-BBOmvfLa.js";import"./positioning-D-K8Mueq.js";import"./DirectionController-ChvNGESZ.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./events-Bv6wNHwJ.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"lit/directives/ref.js";import"./FocusableMixin-BlQLNPdJ.js";import"./DropdownItem-Cb-7cHMg.js";const h=e`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px);--_n-dropdown-max-block-size:var(--n-dropdown-max-block-size, 460px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:var(--_n-dropdown-max-block-size);overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}.n-dropdown-header.is-navigation-header{padding:var(--n-space-s) 0}.n-dropdown-back-item{padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s);inline-size:100%}.n-dropdown-content.is-submenu-active ::slotted(nord-dropdown-group),.n-dropdown-content.is-submenu-active ::slotted(nord-dropdown-item),.n-dropdown-content.is-submenu-active ::slotted(nord-dropdown-submenu:not([mobile-active])){display:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size='s']){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size='l']){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(c(n)){constructor(){super(...arguments),this.headerSlot=new l(this,"header"),this.headerEndSlot=new l(this,"header-end"),this.submenuStack=[],this.isNavigating=!1,this.expand=!1,this.size="m",this.alwaysFloating=!1}get isShowingSubmenu(){return this.submenuStack.length>0}get submenuStackRef(){return this.submenuStack}get deepestSubmenu(){return this.submenuStack[this.submenuStack.length-1]}handleAlwaysFloatingChange(){this.open&&(this.open=!1,this.updateComplete.then((()=>{this.open=!0})))}connectedCallback(){super.connectedCallback();const t=this.querySelector('[slot="toggle"]');null==t||t.setAttribute("aria-haspopup","true")}render(){var t;const e=this.submenuStack[this.submenuStack.length-1];return o`<div class="n-dropdown" @nord-submenu-navigate="${this.handleSubmenuNavigate}" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${d(this.align)}" position="${d(this.position)}" ?open="${this.open}" ?always-floating="${this.alwaysFloating}" @open="${this.handleOpen}" @close="${this.handleClose}">${this.isShowingSubmenu?o`<div class="n-dropdown-header is-navigation-header"><nord-dropdown-item @click="${this.handleBackClick}" class="n-dropdown-back-item"><nord-icon slot="start" name="arrow-left" size="s"></nord-icon>${null!==(t=null==e?void 0:e.label)&&void 0!==t?t:""}</nord-dropdown-item></div>`:o`<div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div>`}<div class="n-dropdown-content ${this.isShowingSubmenu?"is-submenu-active":""}"><slot></slot></div></nord-popout></div>`}handleBlur(t){const e=t.relatedTarget;this.isNavigating||this.isShowingSubmenu||e&&(this.contains(e)||this.popout.hide(!1))}handleOpen(){this.open=!0}handleBackClick(t){t.preventDefault(),t.stopPropagation(),this.isNavigating=!0,this.navigateBack(),this.updateComplete.then((()=>{this.isNavigating=!1;const t=this.submenuStack[this.submenuStack.length-1],e=t?t.querySelector('[slot="trigger"]'):this.querySelector("nord-dropdown-item");null==e||e.focus()}))}handleClose(t){if(this.isNavigating)return;this.clearSubmenuStack();const e=t.target;"NORD-POPOUT"===(null==e?void 0:e.tagName)&&this.contains(e)||(this.open=!1)}handleOpenChange(){var t;if(this.open){const e=null!==(t=this.querySelector("[autofocus]"))&&void 0!==t?t:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}else this.isNavigating||this.clearSubmenuStack()}navigateBack(){if(0===this.submenuStack.length)return;const t=this.submenuStack[this.submenuStack.length-1];t.deactivateMobile(),t.requestUpdate();const e=this.submenuStack[this.submenuStack.length-2];e&&(e.removeAttribute("has-active-child"),e.requestUpdate()),this.submenuStack=this.submenuStack.slice(0,-1)}clearSubmenuStack(){for(const t of this.submenuStack)t.deactivateMobile(),t.removeAttribute("has-active-child");this.submenuStack=[]}handleSubmenuNavigate(t){const e=t;e.stopPropagation();const o=this.submenuStack[this.submenuStack.length-1];o&&(o.setAttribute("has-active-child",""),o.requestUpdate());const n=e.detail.submenu;this.submenuStack=[...this.submenuStack,n],this.updateComplete.then((()=>{n.requestUpdate()}))}hide(t){return this.popout.hide(t)}show(){return this.popout.show()}};m.styles=[u,h],m.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},t([s(".n-dropdown-content")],m.prototype,"list",void 0),t([s("nord-popout",!0)],m.prototype,"popout",void 0),t([i()],m.prototype,"submenuStack",void 0),t([a({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),t([a({reflect:!0})],m.prototype,"size",void 0),t([a({reflect:!0,type:Boolean,attribute:"always-floating"})],m.prototype,"alwaysFloating",void 0),t([p("alwaysFloating")],m.prototype,"handleAlwaysFloatingChange",null),t([p("open","updated")],m.prototype,"handleOpenChange",null),m=t([r("nord-dropdown")],m);var g=m;export{g as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as o,LitElement as n}from"lit";import{query as s,state as i,property as a,customElement as r}from"lit/decorators.js";import{ifDefined as d}from"lit/directives/if-defined.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{o as p}from"./observe-D0n0zOfU.js";import{F as c}from"./Popout-CYqn_dZu.js";import{s as u}from"./Component-DSU3Qp0O.js";import"./Icon.js";import"./DropdownItem.js";import"./EventController-BBOmvfLa.js";import"./positioning-D-K8Mueq.js";import"./DirectionController-ChvNGESZ.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./events-Bv6wNHwJ.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"lit/directives/ref.js";import"./FocusableMixin-BlQLNPdJ.js";import"./DropdownItem-Cb-7cHMg.js";const h=e`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px);--_n-dropdown-max-block-size:var(--n-dropdown-max-block-size, 460px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:var(--_n-dropdown-max-block-size);overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}.n-dropdown-header.is-navigation-header{padding:var(--n-space-s) 0}.n-dropdown-back-item{padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s);inline-size:100%}.n-dropdown-content.is-submenu-active ::slotted(nord-dropdown-group),.n-dropdown-content.is-submenu-active ::slotted(nord-dropdown-item),.n-dropdown-content.is-submenu-active ::slotted(nord-dropdown-submenu:not([mobile-active])){display:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size='s']){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size='l']){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(c(n)){constructor(){super(...arguments),this.headerSlot=new l(this,"header"),this.headerEndSlot=new l(this,"header-end"),this.submenuStack=[],this.isNavigating=!1,this.expand=!1,this.size="m",this.alwaysFloating=!1}get isShowingSubmenu(){return this.submenuStack.length>0}get submenuStackRef(){return this.submenuStack}get deepestSubmenu(){return this.submenuStack[this.submenuStack.length-1]}handleAlwaysFloatingChange(){this.open&&(this.open=!1,this.updateComplete.then((()=>{this.open=!0})))}connectedCallback(){super.connectedCallback();const t=this.querySelector('[slot="toggle"]');null==t||t.setAttribute("aria-haspopup","true")}render(){var t;const e=this.submenuStack[this.submenuStack.length-1];return o`<div class="n-dropdown" @nord-submenu-navigate="${this.handleSubmenuNavigate}" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${d(this.align)}" position="${d(this.position)}" side-offset="${this.sideOffset}" align-offset="${this.alignOffset}" ?open="${this.open}" ?always-floating="${this.alwaysFloating}" @open="${this.handleOpen}" @close="${this.handleClose}">${this.isShowingSubmenu?o`<div class="n-dropdown-header is-navigation-header"><nord-dropdown-item @click="${this.handleBackClick}" class="n-dropdown-back-item"><nord-icon slot="start" name="arrow-left" size="s"></nord-icon>${null!==(t=null==e?void 0:e.label)&&void 0!==t?t:""}</nord-dropdown-item></div>`:o`<div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div>`}<div class="n-dropdown-content ${this.isShowingSubmenu?"is-submenu-active":""}"><slot></slot></div></nord-popout></div>`}handleBlur(t){const e=t.relatedTarget;this.isNavigating||this.isShowingSubmenu||e&&(this.contains(e)||this.popout.hide(!1))}handleOpen(){this.open=!0}handleBackClick(t){t.preventDefault(),t.stopPropagation(),this.isNavigating=!0,this.navigateBack(),this.updateComplete.then((()=>{this.isNavigating=!1;const t=this.submenuStack[this.submenuStack.length-1],e=t?t.querySelector('[slot="trigger"]'):this.querySelector("nord-dropdown-item");null==e||e.focus()}))}handleClose(t){if(this.isNavigating)return;this.clearSubmenuStack();const e=t.target;"NORD-POPOUT"===(null==e?void 0:e.tagName)&&this.contains(e)||(this.open=!1)}handleOpenChange(){var t;if(this.open){const e=null!==(t=this.querySelector("[autofocus]"))&&void 0!==t?t:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}else this.isNavigating||this.clearSubmenuStack()}navigateBack(){if(0===this.submenuStack.length)return;const t=this.submenuStack[this.submenuStack.length-1];t.deactivateMobile(),t.requestUpdate();const e=this.submenuStack[this.submenuStack.length-2];e&&(e.removeAttribute("has-active-child"),e.requestUpdate()),this.submenuStack=this.submenuStack.slice(0,-1)}clearSubmenuStack(){for(const t of this.submenuStack)t.deactivateMobile(),t.removeAttribute("has-active-child");this.submenuStack=[]}handleSubmenuNavigate(t){const e=t;e.stopPropagation();const o=this.submenuStack[this.submenuStack.length-1];o&&(o.setAttribute("has-active-child",""),o.requestUpdate());const n=e.detail.submenu;this.submenuStack=[...this.submenuStack,n],this.updateComplete.then((()=>{n.requestUpdate()}))}hide(t){return this.popout.hide(t)}show(){return this.popout.show()}};m.styles=[u,h],m.shadowRootOptions={...n.shadowRootOptions,delegatesFocus:!0},t([s(".n-dropdown-content")],m.prototype,"list",void 0),t([s("nord-popout",!0)],m.prototype,"popout",void 0),t([i()],m.prototype,"submenuStack",void 0),t([a({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),t([a({reflect:!0})],m.prototype,"size",void 0),t([a({reflect:!0,type:Boolean,attribute:"always-floating"})],m.prototype,"alwaysFloating",void 0),t([p("alwaysFloating")],m.prototype,"handleAlwaysFloatingChange",null),t([p("open","updated")],m.prototype,"handleOpenChange",null),m=t([r("nord-dropdown")],m);var g=m;export{g as default};
 //# sourceMappingURL=Dropdown.js.map

package/lib/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import type DropdownSubmenu from '../dropdown-submenu/DropdownSubmenu.js'\nimport type Popout from '../popout/Popout.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\n\nimport { FloatingMixin } from '../common/mixins/FloatingComponentMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport style from './Dropdown.css'\nimport '../popout/Popout.js'\nimport '../icon/Icon.js'\nimport '../dropdown-item/DropdownItem.js'\n\n/**\n * Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n *\n * @status ready\n * @category action\n *\n * @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n * @slot header - Optional slot that holds a header for the dropdown.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n *\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n *\n * @cssprop [--n-dropdown-size=250px] - Controls the inline size, or width, of the dropdown. Will resize up to 1.5 times to account for larger content.\n * @cssprop [--n-dropdown-max-block-size=460px] - Controls the maximum block size, or height, of the dropdown. Larger content will get a scrollbar.\n */\n@customElement('nord-dropdown')\nexport default class Dropdown extends FloatingMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  /**\n   * we delegate focus, to ensure focus does not move to body if you click\n   * some whitespace or a dropdown-group heading, as this would close the dropdown\n   * @internal\n   */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n  private headerSlot = new SlotController(this, 'header')\n  private headerEndSlot = new SlotController(this, 'header-end')\n\n  @query('.n-dropdown-content') private list!: HTMLElement\n  @query('nord-popout', true) private popout!: Popout\n\n  @state() private submenuStack: DropdownSubmenu[] = []\n  private isNavigating = false\n\n  private get isShowingSubmenu(): boolean {\n    return this.submenuStack.length > 0\n  }\n\n  /**\n   * @internal\n   */\n  get submenuStackRef(): readonly DropdownSubmenu[] {\n    return this.submenuStack\n  }\n\n  /**\n   * @internal\n   */\n  get deepestSubmenu(): DropdownSubmenu | undefined {\n    return this.submenuStack[this.submenuStack.length - 1]\n  }\n\n  /**\n   * Controls whether the toggle slot expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * The size of the dropdown. This affects the minimum and maximum inline-size\n   * of the dropdown.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 'm'\n\n  /**\n   * Set to true to always display the dropdown as a floating overlay, even on smaller viewports.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'always-floating' })\n  alwaysFloating: boolean = false\n\n  @observe('alwaysFloating')\n  protected handleAlwaysFloatingChange() {\n    if (this.open) {\n      this.open = false\n      this.updateComplete.then(() => {\n        this.open = true\n      })\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const toggle = this.querySelector(`[slot=\"toggle\"]`)\n    toggle?.setAttribute('aria-haspopup', 'true')\n  }\n\n  render() {\n    const activeSubmenu = this.submenuStack[this.submenuStack.length - 1]\n\n    return html`\n      <div class=\"n-dropdown\" @nord-submenu-navigate=${this.handleSubmenuNavigate} @focusout=${this.handleBlur}>\n        <slot name=\"toggle\" aria-controls=\"popout\"></slot>\n        <nord-popout\n          id=\"popout\"\n          align=${ifDefined(this.align)}\n          position=${ifDefined(this.position)}\n          ?open=${this.open}\n          ?always-floating=${this.alwaysFloating}\n          @open=${this.handleOpen}\n          @close=${this.handleClose}\n        >\n          ${\n            this.isShowingSubmenu\n              ? html`\n              <div class=\"n-dropdown-header is-navigation-header\">\n                <nord-dropdown-item @click=${this.handleBackClick} class=\"n-dropdown-back-item\">\n                  <nord-icon slot=\"start\" name=\"arrow-left\" size=\"s\"></nord-icon>\n                  ${activeSubmenu?.label ?? ''}\n                </nord-dropdown-item>\n              </div>\n            `\n              : html`\n              <div class=\"n-dropdown-header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n                <slot name=${this.headerSlot.slotName}></slot>\n                <slot name=${this.headerEndSlot.slotName}></slot>\n              </div>\n            `\n          }\n          <div class=\"n-dropdown-content ${this.isShowingSubmenu ? 'is-submenu-active' : ''}\">\n            <slot></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private handleBlur(e: FocusEvent) {\n    const relatedTarget = e.relatedTarget as HTMLElement\n\n    // Don't close during navigation or if we're still showing a submenu\n    // (the blur event fires after back button is removed from DOM, but we're still in submenu mode)\n    if (this.isNavigating || this.isShowingSubmenu)\n      return\n\n    // Safari will set relatedTarget to null when clicking on the trigger button\n    // because it doesn't focus buttons on click.\n    // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n    // so we only run this logic if relatedTarget is set, which sidesteps this issue\n    if (!relatedTarget) {\n      return\n    }\n\n    // Close dropdown if focus moved outside\n    if (!this.contains(relatedTarget)) {\n      this.popout.hide(false)\n    }\n  }\n\n  private handleOpen() {\n    this.open = true\n  }\n\n  private handleBackClick(event: MouseEvent) {\n    event.preventDefault()\n    event.stopPropagation()\n\n    this.isNavigating = true\n    this.navigateBack()\n\n    // Reset navigation flag after updates complete\n    this.updateComplete.then(() => {\n      this.isNavigating = false\n      // Focus the trigger of the submenu we're returning to, or the first item\n      const newTop = this.submenuStack[this.submenuStack.length - 1]\n      const focusTarget = newTop\n        ? newTop.querySelector<HTMLElement>('[slot=\"trigger\"]')\n        : this.querySelector<HTMLElement>('nord-dropdown-item')\n      focusTarget?.focus()\n    })\n  }\n\n  private handleClose(e: Event) {\n    // Don't close during navigation\n    if (this.isNavigating)\n      return\n\n    // Clear submenu stack on close\n    this.clearSubmenuStack()\n\n    // Ignore close events from child popouts (submenus)\n    // The event target will be a nord-popout element that is a child of this dropdown\n    const eventTarget = e.target as HTMLElement\n    const isChildPopout = eventTarget?.tagName === 'NORD-POPOUT' && this.contains(eventTarget)\n\n    if (isChildPopout) {\n      return\n    }\n\n    this.open = false\n  }\n\n  @observe('open', 'updated')\n  protected handleOpenChange() {\n    if (this.open) {\n      const focusTarget\n        = this.querySelector<HTMLElement>('[autofocus]')\n          ?? this.querySelector<HTMLElement>('nord-dropdown-item, nord-message')\n\n      focusTarget?.focus()\n      this.list.scrollTop = 0\n    }\n    else if (!this.isNavigating) {\n      // Clear submenu stack when dropdown closes (but not during navigation)\n      this.clearSubmenuStack()\n    }\n  }\n\n  /**\n   * Navigate back one level in the submenu stack.\n   * @internal\n   */\n  navigateBack() {\n    if (this.submenuStack.length === 0)\n      return\n\n    const topSubmenu = this.submenuStack[this.submenuStack.length - 1]\n    topSubmenu.deactivateMobile()\n    // Trigger re-render so it loses active and is-deepest-active classes\n    topSubmenu.requestUpdate()\n\n    const newTop = this.submenuStack[this.submenuStack.length - 2]\n    if (newTop) {\n      newTop.removeAttribute('has-active-child')\n      // Trigger re-render so it gains is-deepest-active class back\n      newTop.requestUpdate()\n    }\n\n    this.submenuStack = this.submenuStack.slice(0, -1)\n  }\n\n  /**\n   * Clear the entire submenu stack.\n   * @internal\n   */\n  private clearSubmenuStack() {\n    for (const submenu of this.submenuStack) {\n      submenu.deactivateMobile()\n      submenu.removeAttribute('has-active-child')\n    }\n    this.submenuStack = []\n  }\n\n  /**\n   * Handle submenu navigation event.\n   * @internal\n   */\n  private handleSubmenuNavigate(event: Event) {\n    const customEvent = event as CustomEvent<{ submenu: DropdownSubmenu }>\n    customEvent.stopPropagation()\n\n    const previousDeepest = this.submenuStack[this.submenuStack.length - 1]\n    if (previousDeepest) {\n      previousDeepest.setAttribute('has-active-child', '')\n      // Trigger re-render so it loses is-deepest-active class\n      previousDeepest.requestUpdate()\n    }\n\n    const newSubmenu = customEvent.detail.submenu\n    this.submenuStack = [...this.submenuStack, newSubmenu]\n\n    // Trigger re-render of new deepest so it gains is-deepest-active class\n    this.updateComplete.then(() => {\n      newSubmenu.requestUpdate()\n    })\n  }\n\n  /**\n   * Hide the dropdown programmatically.\n   * This method delegates to the Dropdown's internal Popout component.\n   * See [Popout's hide() method](/components/popout#methods-hide) for more details.\n   * @param moveFocusToButton A boolean option to move the focus to the original button that opens the dropdown.\n   */\n  hide(moveFocusToButton?: boolean): Promise<TransitionEvent | void> {\n    return this.popout.hide(moveFocusToButton)\n  }\n\n  /**\n   * Show the dropdown programmatically.\n   * This method delegates to the Dropdown's internal Popout component.\n   * See [Popout's show() method](/components/popout#methods-hide) for more details.\n   */\n  show(): Promise<TransitionEvent | void> {\n    return this.popout.show()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-dropdown': Dropdown\n  }\n}\n"],"names":["Dropdown","FloatingMixin","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","submenuStack","isNavigating","expand","size","alwaysFloating","isShowingSubmenu","length","submenuStackRef","deepestSubmenu","handleAlwaysFloatingChange","open","updateComplete","then","connectedCallback","super","toggle","querySelector","setAttribute","render","activeSubmenu","html","handleSubmenuNavigate","handleBlur","ifDefined","align","position","handleOpen","handleClose","handleBackClick","_a","label","isEmpty","slotName","e","relatedTarget","contains","popout","hide","event","preventDefault","stopPropagation","navigateBack","newTop","focusTarget","focus","clearSubmenuStack","eventTarget","target","tagName","handleOpenChange","list","scrollTop","topSubmenu","deactivateMobile","requestUpdate","removeAttribute","slice","submenu","customEvent","previousDeepest","newSubmenu","detail","moveFocusToButton","show","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import type DropdownSubmenu from '../dropdown-submenu/DropdownSubmenu.js'\nimport type Popout from '../popout/Popout.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\n\nimport { FloatingMixin } from '../common/mixins/FloatingComponentMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport style from './Dropdown.css'\nimport '../popout/Popout.js'\nimport '../icon/Icon.js'\nimport '../dropdown-item/DropdownItem.js'\n\n/**\n * Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n *\n * @status ready\n * @category action\n *\n * @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n * @slot header - Optional slot that holds a header for the dropdown.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n *\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n *\n * @cssprop [--n-dropdown-size=250px] - Controls the inline size, or width, of the dropdown. Will resize up to 1.5 times to account for larger content.\n * @cssprop [--n-dropdown-max-block-size=460px] - Controls the maximum block size, or height, of the dropdown. Larger content will get a scrollbar.\n */\n@customElement('nord-dropdown')\nexport default class Dropdown extends FloatingMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  /**\n   * we delegate focus, to ensure focus does not move to body if you click\n   * some whitespace or a dropdown-group heading, as this would close the dropdown\n   * @internal\n   */\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n  private headerSlot = new SlotController(this, 'header')\n  private headerEndSlot = new SlotController(this, 'header-end')\n\n  @query('.n-dropdown-content') private list!: HTMLElement\n  @query('nord-popout', true) private popout!: Popout\n\n  @state() private submenuStack: DropdownSubmenu[] = []\n  private isNavigating = false\n\n  private get isShowingSubmenu(): boolean {\n    return this.submenuStack.length > 0\n  }\n\n  /**\n   * @internal\n   */\n  get submenuStackRef(): readonly DropdownSubmenu[] {\n    return this.submenuStack\n  }\n\n  /**\n   * @internal\n   */\n  get deepestSubmenu(): DropdownSubmenu | undefined {\n    return this.submenuStack[this.submenuStack.length - 1]\n  }\n\n  /**\n   * Controls whether the toggle slot expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * The size of the dropdown. This affects the minimum and maximum inline-size\n   * of the dropdown.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 'm'\n\n  /**\n   * Set to true to always display the dropdown as a floating overlay, even on smaller viewports.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'always-floating' })\n  alwaysFloating: boolean = false\n\n  @observe('alwaysFloating')\n  protected handleAlwaysFloatingChange() {\n    if (this.open) {\n      this.open = false\n      this.updateComplete.then(() => {\n        this.open = true\n      })\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    const toggle = this.querySelector(`[slot=\"toggle\"]`)\n    toggle?.setAttribute('aria-haspopup', 'true')\n  }\n\n  render() {\n    const activeSubmenu = this.submenuStack[this.submenuStack.length - 1]\n\n    return html`\n      <div class=\"n-dropdown\" @nord-submenu-navigate=${this.handleSubmenuNavigate} @focusout=${this.handleBlur}>\n        <slot name=\"toggle\" aria-controls=\"popout\"></slot>\n        <nord-popout\n          id=\"popout\"\n          align=${ifDefined(this.align)}\n          position=${ifDefined(this.position)}\n          side-offset=${this.sideOffset}\n          align-offset=${this.alignOffset}\n          ?open=${this.open}\n          ?always-floating=${this.alwaysFloating}\n          @open=${this.handleOpen}\n          @close=${this.handleClose}\n        >\n          ${\n            this.isShowingSubmenu\n              ? html`\n              <div class=\"n-dropdown-header is-navigation-header\">\n                <nord-dropdown-item @click=${this.handleBackClick} class=\"n-dropdown-back-item\">\n                  <nord-icon slot=\"start\" name=\"arrow-left\" size=\"s\"></nord-icon>\n                  ${activeSubmenu?.label ?? ''}\n                </nord-dropdown-item>\n              </div>\n            `\n              : html`\n              <div class=\"n-dropdown-header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n                <slot name=${this.headerSlot.slotName}></slot>\n                <slot name=${this.headerEndSlot.slotName}></slot>\n              </div>\n            `\n          }\n          <div class=\"n-dropdown-content ${this.isShowingSubmenu ? 'is-submenu-active' : ''}\">\n            <slot></slot>\n          </div>\n        </nord-popout>\n      </div>\n    `\n  }\n\n  private handleBlur(e: FocusEvent) {\n    const relatedTarget = e.relatedTarget as HTMLElement\n\n    // Don't close during navigation or if we're still showing a submenu\n    // (the blur event fires after back button is removed from DOM, but we're still in submenu mode)\n    if (this.isNavigating || this.isShowingSubmenu)\n      return\n\n    // Safari will set relatedTarget to null when clicking on the trigger button\n    // because it doesn't focus buttons on click.\n    // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n    // so we only run this logic if relatedTarget is set, which sidesteps this issue\n    if (!relatedTarget) {\n      return\n    }\n\n    // Close dropdown if focus moved outside\n    if (!this.contains(relatedTarget)) {\n      this.popout.hide(false)\n    }\n  }\n\n  private handleOpen() {\n    this.open = true\n  }\n\n  private handleBackClick(event: MouseEvent) {\n    event.preventDefault()\n    event.stopPropagation()\n\n    this.isNavigating = true\n    this.navigateBack()\n\n    // Reset navigation flag after updates complete\n    this.updateComplete.then(() => {\n      this.isNavigating = false\n      // Focus the trigger of the submenu we're returning to, or the first item\n      const newTop = this.submenuStack[this.submenuStack.length - 1]\n      const focusTarget = newTop\n        ? newTop.querySelector<HTMLElement>('[slot=\"trigger\"]')\n        : this.querySelector<HTMLElement>('nord-dropdown-item')\n      focusTarget?.focus()\n    })\n  }\n\n  private handleClose(e: Event) {\n    // Don't close during navigation\n    if (this.isNavigating)\n      return\n\n    // Clear submenu stack on close\n    this.clearSubmenuStack()\n\n    // Ignore close events from child popouts (submenus)\n    // The event target will be a nord-popout element that is a child of this dropdown\n    const eventTarget = e.target as HTMLElement\n    const isChildPopout = eventTarget?.tagName === 'NORD-POPOUT' && this.contains(eventTarget)\n\n    if (isChildPopout) {\n      return\n    }\n\n    this.open = false\n  }\n\n  @observe('open', 'updated')\n  protected handleOpenChange() {\n    if (this.open) {\n      const focusTarget\n        = this.querySelector<HTMLElement>('[autofocus]')\n          ?? this.querySelector<HTMLElement>('nord-dropdown-item, nord-message')\n\n      focusTarget?.focus()\n      this.list.scrollTop = 0\n    }\n    else if (!this.isNavigating) {\n      // Clear submenu stack when dropdown closes (but not during navigation)\n      this.clearSubmenuStack()\n    }\n  }\n\n  /**\n   * Navigate back one level in the submenu stack.\n   * @internal\n   */\n  navigateBack() {\n    if (this.submenuStack.length === 0)\n      return\n\n    const topSubmenu = this.submenuStack[this.submenuStack.length - 1]\n    topSubmenu.deactivateMobile()\n    // Trigger re-render so it loses active and is-deepest-active classes\n    topSubmenu.requestUpdate()\n\n    const newTop = this.submenuStack[this.submenuStack.length - 2]\n    if (newTop) {\n      newTop.removeAttribute('has-active-child')\n      // Trigger re-render so it gains is-deepest-active class back\n      newTop.requestUpdate()\n    }\n\n    this.submenuStack = this.submenuStack.slice(0, -1)\n  }\n\n  /**\n   * Clear the entire submenu stack.\n   * @internal\n   */\n  private clearSubmenuStack() {\n    for (const submenu of this.submenuStack) {\n      submenu.deactivateMobile()\n      submenu.removeAttribute('has-active-child')\n    }\n    this.submenuStack = []\n  }\n\n  /**\n   * Handle submenu navigation event.\n   * @internal\n   */\n  private handleSubmenuNavigate(event: Event) {\n    const customEvent = event as CustomEvent<{ submenu: DropdownSubmenu }>\n    customEvent.stopPropagation()\n\n    const previousDeepest = this.submenuStack[this.submenuStack.length - 1]\n    if (previousDeepest) {\n      previousDeepest.setAttribute('has-active-child', '')\n      // Trigger re-render so it loses is-deepest-active class\n      previousDeepest.requestUpdate()\n    }\n\n    const newSubmenu = customEvent.detail.submenu\n    this.submenuStack = [...this.submenuStack, newSubmenu]\n\n    // Trigger re-render of new deepest so it gains is-deepest-active class\n    this.updateComplete.then(() => {\n      newSubmenu.requestUpdate()\n    })\n  }\n\n  /**\n   * Hide the dropdown programmatically.\n   * This method delegates to the Dropdown's internal Popout component.\n   * See [Popout's hide() method](/components/popout#methods-hide) for more details.\n   * @param moveFocusToButton A boolean option to move the focus to the original button that opens the dropdown.\n   */\n  hide(moveFocusToButton?: boolean): Promise<TransitionEvent | void> {\n    return this.popout.hide(moveFocusToButton)\n  }\n\n  /**\n   * Show the dropdown programmatically.\n   * This method delegates to the Dropdown's internal Popout component.\n   * See [Popout's show() method](/components/popout#methods-hide) for more details.\n   */\n  show(): Promise<TransitionEvent | void> {\n    return this.popout.show()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-dropdown': Dropdown\n  }\n}\n"],"names":["Dropdown","FloatingMixin","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","submenuStack","isNavigating","expand","size","alwaysFloating","isShowingSubmenu","length","submenuStackRef","deepestSubmenu","handleAlwaysFloatingChange","open","updateComplete","then","connectedCallback","super","toggle","querySelector","setAttribute","render","activeSubmenu","html","handleSubmenuNavigate","handleBlur","ifDefined","align","position","sideOffset","alignOffset","handleOpen","handleClose","handleBackClick","_a","label","isEmpty","slotName","e","relatedTarget","contains","popout","hide","event","preventDefault","stopPropagation","navigateBack","newTop","focusTarget","focus","clearSubmenuStack","eventTarget","target","tagName","handleOpenChange","list","scrollTop","topSubmenu","deactivateMobile","requestUpdate","removeAttribute","slice","submenu","customEvent","previousDeepest","newSubmenu","detail","moveFocusToButton","show","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","state","property","reflect","type","Boolean","attribute","observe","customElement"],"mappings":"mwGAoCe,IAAMA,EAAN,cAAuBC,EAAcC,IAArC,WAAAC,uBAULC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAaG,cAAG,IAAID,EAAeF,KAAM,cAKhCA,KAAYI,aAAsB,GAC3CJ,KAAYK,cAAG,EAuBqBL,KAAMM,QAAG,EAMxBN,KAAIO,KAAoB,IAMrDP,KAAcQ,gBAAY,CA2N3B,CA5PC,oBAAYC,GACV,OAAOT,KAAKI,aAAaM,OAAS,CACnC,CAKD,mBAAIC,GACF,OAAOX,KAAKI,YACb,CAKD,kBAAIQ,GACF,OAAOZ,KAAKI,aAAaJ,KAAKI,aAAaM,OAAS,EACrD,CAoBS,0BAAAG,GACJb,KAAKc,OACPd,KAAKc,MAAO,EACZd,KAAKe,eAAeC,MAAK,KACvBhB,KAAKc,MAAO,CAAI,IAGrB,CAED,iBAAAG,GACEC,MAAMD,oBAEN,MAAME,EAASnB,KAAKoB,cAAc,mBAClCD,SAAAA,EAAQE,aAAa,gBAAiB,OACvC,CAED,MAAAC,SACE,MAAMC,EAAgBvB,KAAKI,aAAaJ,KAAKI,aAAaM,OAAS,GAEnE,OAAOc,CAAI,mDACwCxB,KAAKyB,qCAAmCzB,KAAK0B,iGAIlFC,EAAU3B,KAAK4B,qBACZD,EAAU3B,KAAK6B,2BACZ7B,KAAK8B,6BACJ9B,KAAK+B,uBACZ/B,KAAKc,2BACMd,KAAKQ,0BAChBR,KAAKgC,uBACJhC,KAAKiC,gBAGZjC,KAAKS,iBACDe,CAAI,mFAEyBxB,KAAKkC,wHAE9BC,EAAAZ,aAAa,EAAbA,EAAea,qBAAS,gCAI5BZ,CAAI,2CACmCxB,KAAKC,WAAWoC,SAAWrC,KAAKG,cAAckC,wBACxErC,KAAKC,WAAWqC,gCAChBtC,KAAKG,cAAcmC,2DAILtC,KAAKS,iBAAmB,oBAAsB,6CAMtF,CAEO,UAAAiB,CAAWa,GACjB,MAAMC,EAAgBD,EAAEC,cAIpBxC,KAAKK,cAAgBL,KAAKS,kBAOzB+B,IAKAxC,KAAKyC,SAASD,IACjBxC,KAAK0C,OAAOC,MAAK,GAEpB,CAEO,UAAAX,GACNhC,KAAKc,MAAO,CACb,CAEO,eAAAoB,CAAgBU,GACtBA,EAAMC,iBACND,EAAME,kBAEN9C,KAAKK,cAAe,EACpBL,KAAK+C,eAGL/C,KAAKe,eAAeC,MAAK,KACvBhB,KAAKK,cAAe,EAEpB,MAAM2C,EAAShD,KAAKI,aAAaJ,KAAKI,aAAaM,OAAS,GACtDuC,EAAcD,EAChBA,EAAO5B,cAA2B,oBAClCpB,KAAKoB,cAA2B,sBACpC6B,SAAAA,EAAaC,OAAO,GAEvB,CAEO,WAAAjB,CAAYM,GAElB,GAAIvC,KAAKK,aACP,OAGFL,KAAKmD,oBAIL,MAAMC,EAAcb,EAAEc,OACyB,iBAAzBD,eAAAA,EAAaE,UAA6BtD,KAAKyC,SAASW,KAM9EpD,KAAKc,MAAO,EACb,CAGS,gBAAAyC,SACR,GAAIvD,KAAKc,KAAM,CACb,MAAMmC,EAC4C,QAA9Cd,EAAAnC,KAAKoB,cAA2B,sBAAc,IAAAe,EAAAA,EAC3CnC,KAAKoB,cAA2B,oCAEvC6B,SAAAA,EAAaC,QACblD,KAAKwD,KAAKC,UAAY,CACvB,MACSzD,KAAKK,cAEbL,KAAKmD,mBAER,CAMD,YAAAJ,GACE,GAAiC,IAA7B/C,KAAKI,aAAaM,OACpB,OAEF,MAAMgD,EAAa1D,KAAKI,aAAaJ,KAAKI,aAAaM,OAAS,GAChEgD,EAAWC,mBAEXD,EAAWE,gBAEX,MAAMZ,EAAShD,KAAKI,aAAaJ,KAAKI,aAAaM,OAAS,GACxDsC,IACFA,EAAOa,gBAAgB,oBAEvBb,EAAOY,iBAGT5D,KAAKI,aAAeJ,KAAKI,aAAa0D,MAAM,GAAI,EACjD,CAMO,iBAAAX,GACN,IAAK,MAAMY,KAAW/D,KAAKI,aACzB2D,EAAQJ,mBACRI,EAAQF,gBAAgB,oBAE1B7D,KAAKI,aAAe,EACrB,CAMO,qBAAAqB,CAAsBmB,GAC5B,MAAMoB,EAAcpB,EACpBoB,EAAYlB,kBAEZ,MAAMmB,EAAkBjE,KAAKI,aAAaJ,KAAKI,aAAaM,OAAS,GACjEuD,IACFA,EAAgB5C,aAAa,mBAAoB,IAEjD4C,EAAgBL,iBAGlB,MAAMM,EAAaF,EAAYG,OAAOJ,QACtC/D,KAAKI,aAAe,IAAIJ,KAAKI,aAAc8D,GAG3ClE,KAAKe,eAAeC,MAAK,KACvBkD,EAAWN,eAAe,GAE7B,CAQD,IAAAjB,CAAKyB,GACH,OAAOpE,KAAK0C,OAAOC,KAAKyB,EACzB,CAOD,IAAAC,GACE,OAAOrE,KAAK0C,OAAO2B,MACpB,GA7QMzE,EAAA0E,OAAS,CAACC,EAAgBC,GAO1B5E,EAAA6E,kBAAoB,IAAK3E,EAAW2E,kBAAmBC,gBAAgB,GAKxCC,EAAA,CAArCC,EAAM,wBAAiDhF,EAAAiF,UAAA,YAAA,GACpBF,EAAA,CAAnCC,EAAM,eAAe,IAA6BhF,EAAAiF,UAAA,cAAA,GAElCF,EAAA,CAAhBG,KAAoDlF,EAAAiF,UAAA,oBAAA,GAwBTF,EAAA,CAA3CI,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBtF,EAAAiF,UAAA,cAAA,GAM7BF,EAAA,CAA5BI,EAAS,CAAEC,SAAS,KAAmCpF,EAAAiF,UAAA,YAAA,GAMxDF,EAAA,CADCI,EAAS,CAAEC,SAAS,EAAMC,KAAMC,QAASC,UAAW,qBACtBvF,EAAAiF,UAAA,sBAAA,GAGrBF,EAAA,CADTS,EAAQ,mBAQRxF,EAAAiF,UAAA,6BAAA,MAqHSF,EAAA,CADTS,EAAQ,OAAQ,YAchBxF,EAAAiF,UAAA,mBAAA,MAhMkBjF,EAAQ+E,EAAA,CAD5BU,EAAc,kBACMzF,SAAAA"}

package/lib/DropdownSubmenu.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,LitElement as o,html as n}from"lit";import{query as i,state as s,customElement as r}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{E as a}from"./EventController-BBOmvfLa.js";import{s as d}from"./Component-DSU3Qp0O.js";import"./Popout-DtEL0HZ0.js";import"./positioning-D-K8Mueq.js";import"./DirectionController-ChvNGESZ.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./observe-D0n0zOfU.js";import"./events-Bv6wNHwJ.js";const u=t`:host{display:block;--_n-submenu-focus-padding:2px}.n-dropdown-submenu-content{padding-block-start:var(--_n-submenu-content-padding-block,var(--n-space-s));padding-block-end:var(--_n-submenu-content-padding-block,var(--n-space-s));min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:var(--_n-dropdown-max-block-size);overflow-y:auto}:host([mobile-active]){--_n-submenu-content-padding-block:0}@media (max-width:35.9375em){.n-dropdown-submenu-content{max-block-size:70vh;max-inline-size:none}.n-dropdown-submenu-content.is-deepest-active{padding-block-start:var(--_n-submenu-focus-padding);padding-block-end:var(--_n-submenu-focus-padding)}:host([mobile-active]) ::slotted([slot=trigger]){display:none}:host([mobile-active][has-active-child]) ::slotted(nord-dropdown-group),:host([mobile-active][has-active-child]) ::slotted(nord-dropdown-item),:host([mobile-active][has-active-child]) ::slotted(nord-dropdown-submenu:not([mobile-active])){display:none}}::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}`;let p=0,h=class extends o{constructor(){super(...arguments),this.mobileActive=!1,this.popoutId="nord-dropdown-submenu-popout-"+ ++p,this.events=new a(this),this.currentTriggerElement=null,this.popoutOpen=!1,this.mobileMediaQuery=window.matchMedia("(max-width: 35.9375em)"),this.isSmallScreen=this.mobileMediaQuery.matches,this.parentDropdownAlwaysFloating=!1,this.handleTriggerMouseEnter=()=>{var e;this.shouldUseMobileStack||(this.closeOtherSubmenus(),null===(e=this.popout)||void 0===e||e.show())},this.handleTriggerClick=e=>{var t;e.preventDefault(),e.stopImmediatePropagation(),this.shouldUseMobileStack?this.navigateIntoSubmenu():(this.closeOtherSubmenus(),null===(t=this.popout)||void 0===t||t.show())},this.handleTriggerKeydown=e=>{var t;if("ArrowRight"===e.key||"Enter"===e.key){if(e.preventDefault(),this.shouldUseMobileStack)return void this.navigateIntoSubmenu();this.closeOtherSubmenus(),null===(t=this.popout)||void 0===t||t.show(),this.updateComplete.then((()=>{var e;null===(e=this.querySelector("nord-dropdown-item"))||void 0===e||e.focus()}))}},this.handleContentKeydown=e=>{var t,o;if("ArrowLeft"===e.key){if(e.preventDefault(),e.stopPropagation(),this.shouldUseMobileStack&&this.mobileActive)return void(null===(t=this.closest("nord-dropdown"))||void 0===t||t.navigateBack());null===(o=this.popout)||void 0===o||o.hide(!0)}},this.handlePopoutOpen=()=>{this.popoutOpen=!0,this.closeOtherSubmenus()},this.handlePopoutClose=e=>{e.stopPropagation(),this.popoutOpen=!1},this.handleParentDropdownMouseOver=e=>{var t;if(this.shouldUseMobileStack)return;const o=e.target;"NORD-DROPDOWN-ITEM"===o.tagName&&!this.contains(o)&&this.popoutOpen&&(e.stopImmediatePropagation(),null===(t=this.popout)||void 0===t||t.hide())}}get shouldUseMobileStack(){return this.isSmallScreen&&!this.parentDropdownAlwaysFloating}get parentDropdown(){return this.closest("nord-dropdown")}get isInSubmenuStack(){const e=this.parentDropdown;return!!e&&e.submenuStackRef.includes(this)}get isDeepestInStack(){const e=this.parentDropdown;return!!e&&e.deepestSubmenu===this}connectedCallback(){super.connectedCallback();const e=this.querySelector('[slot="trigger"]');null==e||e.setAttribute("aria-haspopup","menu");const t=this.closest("nord-dropdown");t&&(this.parentDropdownAlwaysFloating=t.alwaysFloating,this.events.listen(t,"mouseover",this.handleParentDropdownMouseOver),this.parentObserver=new MutationObserver((e=>{for(const o of e)"always-floating"===o.attributeName&&(this.parentDropdownAlwaysFloating=t.alwaysFloating)})),this.parentObserver.observe(t,{attributes:!0,attributeFilter:["always-floating"]})),this.events.listen(this.mobileMediaQuery,"change",(e=>{this.isSmallScreen=e.matches,this.requestUpdate()}))}disconnectedCallback(){var e;super.disconnectedCallback(),null===(e=this.parentObserver)||void 0===e||e.disconnect()}render(){return this.shouldUseMobileStack&&this.mobileActive?n`<slot name="trigger"></slot><div class="${l({"n-dropdown-submenu-content":!0,active:this.isInSubmenuStack,"is-deepest-active":this.isDeepestInStack})}" @keydown="${this.handleContentKeydown}"><slot></slot></div>`:n`<slot name="trigger" aria-controls="${this.popoutId}" @slotchange="${this.handleTriggerSlotChange}"></slot><nord-popout id="${this.popoutId}" position="inline-end" always-floating @open="${this.handlePopoutOpen}" @close="${this.handlePopoutClose}"><div class="n-dropdown-submenu-content" @keydown="${this.handleContentKeydown}"><slot></slot></div></nord-popout>`}handleTriggerSlotChange(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('slot[name="trigger"]'),o=null==t?void 0:t.assignedElements()[0];if(this.currentTriggerElement&&this.currentTriggerElement!==o&&(this.currentTriggerElement.removeEventListener("mouseenter",this.handleTriggerMouseEnter),this.currentTriggerElement.removeEventListener("click",this.handleTriggerClick),this.currentTriggerElement.removeEventListener("keydown",this.handleTriggerKeydown)),this.currentTriggerElement=null!=o?o:null,!o)return;o.setAttribute("aria-haspopup","menu");const n=!window.matchMedia("(hover: hover)").matches;this.events.listen(o,"mouseenter",this.handleTriggerMouseEnter),n&&!this.isSmallScreen||this.events.listen(o,"click",this.handleTriggerClick),this.events.listen(o,"keydown",this.handleTriggerKeydown)}closeOtherSubmenus(){var e;if(this.shouldUseMobileStack)return;const t=null===(e=this.parentElement)||void 0===e?void 0:e.closest("nord-dropdown, nord-dropdown-submenu");t&&Array.from(t.querySelectorAll(":scope > nord-dropdown-submenu")).forEach((e=>{e!==this&&e.close()}))}deactivateMobile(){var e;this.mobileActive=!1,this.removeAttribute("mobile-active");const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('slot[name="trigger"]'),o=null==t?void 0:t.assignedElements()[0];null==o||o.removeAttribute("aria-expanded")}get label(){var e,t,o,n;const i=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('slot[name="trigger"]');return null!==(n=null===(o=null===(t=null==i?void 0:i.assignedElements()[0])||void 0===t?void 0:t.textContent)||void 0===o?void 0:o.trim())&&void 0!==n?n:""}close(){return this.mobileActive?(this.deactivateMobile(),Promise.resolve()):this.popout?this.popout.hide():Promise.reject(new Error("DropdownSubmenu: popout component not found or not ready"))}navigateIntoSubmenu(){this.mobileActive=!0,this.setAttribute("mobile-active",""),this.dispatchEvent(new CustomEvent("nord-submenu-navigate",{bubbles:!0,detail:{submenu:this}})),this.updateComplete.then((()=>{const e=this.querySelector(".n-dropdown-submenu-content"),t=null==e?void 0:e.querySelector("nord-dropdown-item");null==t||t.focus()}))}};h.styles=[d,u],e([i("nord-popout")],h.prototype,"popout",void 0),e([s()],h.prototype,"mobileActive",void 0),e([s()],h.prototype,"isSmallScreen",void 0),e([s()],h.prototype,"parentDropdownAlwaysFloating",void 0),h=e([r("nord-dropdown-submenu")],h);var c=h;export{c as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,LitElement as o,html as n}from"lit";import{query as i,state as s,customElement as r}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{E as a}from"./EventController-BBOmvfLa.js";import{s as d}from"./Component-DSU3Qp0O.js";import"./Popout-CYqn_dZu.js";import"./positioning-D-K8Mueq.js";import"./DirectionController-ChvNGESZ.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./observe-D0n0zOfU.js";import"./events-Bv6wNHwJ.js";const u=t`:host{display:block;--_n-submenu-focus-padding:2px}.n-dropdown-submenu-content{padding-block-start:var(--_n-submenu-content-padding-block,var(--n-space-s));padding-block-end:var(--_n-submenu-content-padding-block,var(--n-space-s));min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:var(--_n-dropdown-max-block-size);overflow-y:auto}:host([mobile-active]){--_n-submenu-content-padding-block:0}@media (max-width:35.9375em){.n-dropdown-submenu-content{max-block-size:70vh;max-inline-size:none}.n-dropdown-submenu-content.is-deepest-active{padding-block-start:var(--_n-submenu-focus-padding);padding-block-end:var(--_n-submenu-focus-padding)}:host([mobile-active]) ::slotted([slot=trigger]){display:none}:host([mobile-active][has-active-child]) ::slotted(nord-dropdown-group),:host([mobile-active][has-active-child]) ::slotted(nord-dropdown-item),:host([mobile-active][has-active-child]) ::slotted(nord-dropdown-submenu:not([mobile-active])){display:none}}::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s);padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}`;let p=0,h=class extends o{constructor(){super(...arguments),this.mobileActive=!1,this.popoutId="nord-dropdown-submenu-popout-"+ ++p,this.events=new a(this),this.currentTriggerElement=null,this.popoutOpen=!1,this.mobileMediaQuery=window.matchMedia("(max-width: 35.9375em)"),this.isSmallScreen=this.mobileMediaQuery.matches,this.parentDropdownAlwaysFloating=!1,this.handleTriggerMouseEnter=()=>{var e;this.shouldUseMobileStack||(this.closeOtherSubmenus(),null===(e=this.popout)||void 0===e||e.show())},this.handleTriggerClick=e=>{var t;e.preventDefault(),e.stopImmediatePropagation(),this.shouldUseMobileStack?this.navigateIntoSubmenu():(this.closeOtherSubmenus(),null===(t=this.popout)||void 0===t||t.show())},this.handleTriggerKeydown=e=>{var t;if("ArrowRight"===e.key||"Enter"===e.key){if(e.preventDefault(),this.shouldUseMobileStack)return void this.navigateIntoSubmenu();this.closeOtherSubmenus(),null===(t=this.popout)||void 0===t||t.show(),this.updateComplete.then((()=>{var e;null===(e=this.querySelector("nord-dropdown-item"))||void 0===e||e.focus()}))}},this.handleContentKeydown=e=>{var t,o;if("ArrowLeft"===e.key){if(e.preventDefault(),e.stopPropagation(),this.shouldUseMobileStack&&this.mobileActive)return void(null===(t=this.closest("nord-dropdown"))||void 0===t||t.navigateBack());null===(o=this.popout)||void 0===o||o.hide(!0)}},this.handlePopoutOpen=()=>{this.popoutOpen=!0,this.closeOtherSubmenus()},this.handlePopoutClose=e=>{e.stopPropagation(),this.popoutOpen=!1},this.handleParentDropdownMouseOver=e=>{var t;if(this.shouldUseMobileStack)return;const o=e.target;"NORD-DROPDOWN-ITEM"===o.tagName&&!this.contains(o)&&this.popoutOpen&&(e.stopImmediatePropagation(),null===(t=this.popout)||void 0===t||t.hide())}}get shouldUseMobileStack(){return this.isSmallScreen&&!this.parentDropdownAlwaysFloating}get parentDropdown(){return this.closest("nord-dropdown")}get isInSubmenuStack(){const e=this.parentDropdown;return!!e&&e.submenuStackRef.includes(this)}get isDeepestInStack(){const e=this.parentDropdown;return!!e&&e.deepestSubmenu===this}connectedCallback(){super.connectedCallback();const e=this.querySelector('[slot="trigger"]');null==e||e.setAttribute("aria-haspopup","menu");const t=this.closest("nord-dropdown");t&&(this.parentDropdownAlwaysFloating=t.alwaysFloating,this.events.listen(t,"mouseover",this.handleParentDropdownMouseOver),this.parentObserver=new MutationObserver((e=>{for(const o of e)"always-floating"===o.attributeName&&(this.parentDropdownAlwaysFloating=t.alwaysFloating)})),this.parentObserver.observe(t,{attributes:!0,attributeFilter:["always-floating"]})),this.events.listen(this.mobileMediaQuery,"change",(e=>{this.isSmallScreen=e.matches,this.requestUpdate()}))}disconnectedCallback(){var e;super.disconnectedCallback(),null===(e=this.parentObserver)||void 0===e||e.disconnect()}render(){return this.shouldUseMobileStack&&this.mobileActive?n`<slot name="trigger"></slot><div class="${l({"n-dropdown-submenu-content":!0,active:this.isInSubmenuStack,"is-deepest-active":this.isDeepestInStack})}" @keydown="${this.handleContentKeydown}"><slot></slot></div>`:n`<slot name="trigger" aria-controls="${this.popoutId}" @slotchange="${this.handleTriggerSlotChange}"></slot><nord-popout id="${this.popoutId}" position="inline-end" always-floating @open="${this.handlePopoutOpen}" @close="${this.handlePopoutClose}"><div class="n-dropdown-submenu-content" @keydown="${this.handleContentKeydown}"><slot></slot></div></nord-popout>`}handleTriggerSlotChange(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('slot[name="trigger"]'),o=null==t?void 0:t.assignedElements()[0];if(this.currentTriggerElement&&this.currentTriggerElement!==o&&(this.currentTriggerElement.removeEventListener("mouseenter",this.handleTriggerMouseEnter),this.currentTriggerElement.removeEventListener("click",this.handleTriggerClick),this.currentTriggerElement.removeEventListener("keydown",this.handleTriggerKeydown)),this.currentTriggerElement=null!=o?o:null,!o)return;o.setAttribute("aria-haspopup","menu");const n=!window.matchMedia("(hover: hover)").matches;this.events.listen(o,"mouseenter",this.handleTriggerMouseEnter),n&&!this.isSmallScreen||this.events.listen(o,"click",this.handleTriggerClick),this.events.listen(o,"keydown",this.handleTriggerKeydown)}closeOtherSubmenus(){var e;if(this.shouldUseMobileStack)return;const t=null===(e=this.parentElement)||void 0===e?void 0:e.closest("nord-dropdown, nord-dropdown-submenu");t&&Array.from(t.querySelectorAll(":scope > nord-dropdown-submenu")).forEach((e=>{e!==this&&e.close()}))}deactivateMobile(){var e;this.mobileActive=!1,this.removeAttribute("mobile-active");const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('slot[name="trigger"]'),o=null==t?void 0:t.assignedElements()[0];null==o||o.removeAttribute("aria-expanded")}get label(){var e,t,o,n;const i=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector('slot[name="trigger"]');return null!==(n=null===(o=null===(t=null==i?void 0:i.assignedElements()[0])||void 0===t?void 0:t.textContent)||void 0===o?void 0:o.trim())&&void 0!==n?n:""}close(){return this.mobileActive?(this.deactivateMobile(),Promise.resolve()):this.popout?this.popout.hide():Promise.reject(new Error("DropdownSubmenu: popout component not found or not ready"))}navigateIntoSubmenu(){this.mobileActive=!0,this.setAttribute("mobile-active",""),this.dispatchEvent(new CustomEvent("nord-submenu-navigate",{bubbles:!0,detail:{submenu:this}})),this.updateComplete.then((()=>{const e=this.querySelector(".n-dropdown-submenu-content"),t=null==e?void 0:e.querySelector("nord-dropdown-item");null==t||t.focus()}))}};h.styles=[d,u],e([i("nord-popout")],h.prototype,"popout",void 0),e([s()],h.prototype,"mobileActive",void 0),e([s()],h.prototype,"isSmallScreen",void 0),e([s()],h.prototype,"parentDropdownAlwaysFloating",void 0),h=e([r("nord-dropdown-submenu")],h);var c=h;export{c as default};
 //# sourceMappingURL=DropdownSubmenu.js.map

package/lib/KeyboardController.js

@@ -1,2 +1,2 @@
-import{S as t}from"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";function o(t){return o=>{o.preventDefault(),t(o)}}class r{constructor(r,s){this.host=r,r.addController(this),this.commandShortcuts=new t(r),this.globalShortcuts=new t(r,{"$mod+k":o(s.toggleOpen)}),this.navigationShortcuts=new t(r,{Enter:o(s.trigger),Backspace:s.goBack,End:o(s.end),Home:o(s.start),ArrowDown:o(s.next),ArrowUp:o(s.previous)},r)}registerCommandShortcuts(){const t={};for(const o of this.host.commands)o.shortcut&&(t[o.shortcut]=()=>{var t;return null===(t=o.handler)||void 0===t?void 0:t.call(o,this.host)});this.commandShortcuts.bind(t)}}export{r as KeyboardController};
+import{S as t}from"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";function o(t){return o=>{o.preventDefault(),t(o)}}class r{constructor(r,s){this.host=r,r.addController(this),this.commandShortcuts=new t(r),this.globalShortcuts=new t(r,{"$mod+k":o(s.toggleOpen)}),this.navigationShortcuts=new t(r,{Enter:o(s.trigger),Backspace:s.goBack,End:o(s.end),Home:o(s.start),ArrowDown:o(s.next),ArrowUp:o(s.previous)},r)}registerCommandShortcuts(){const t={};for(const o of this.host.commands)o.shortcut&&(t[o.shortcut]=t=>{var r;o.forceShortcut&&t.preventDefault(),null===(r=o.handler)||void 0===r||r.call(o,this.host)});this.commandShortcuts.bind(t)}}export{r as KeyboardController};
 //# sourceMappingURL=KeyboardController.js.map

package/lib/KeyboardController.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardController.js","sources":["../src/command-menu/KeyboardController.ts"],"sourcesContent":["import type { ReactiveController } from 'lit'\nimport type { ShortcutMap } from '../common/controllers/ShortcutController.js'\nimport type CommandMenu from './CommandMenu.js'\nimport { ShortcutController } from '../common/controllers/ShortcutController.js'\n\ninterface KeyboardActions {\n  trigger: () => void\n  goBack: () => void\n  start: () => void\n  end: () => void\n  next: () => void\n  previous: () => void\n  toggleOpen: () => void\n}\n\nfunction preventDefault(fn: (e: Event) => void) {\n  return (e: Event) => {\n    e.preventDefault()\n    fn(e)\n  }\n}\n\nexport class KeyboardController {\n  private globalShortcuts: ShortcutController\n  private navigationShortcuts: ShortcutController\n  private commandShortcuts: ShortcutController\n\n  constructor(\n    private host: CommandMenu,\n    actions: KeyboardActions,\n  ) {\n    host.addController(this as ReactiveController)\n\n    this.commandShortcuts = new ShortcutController(host)\n    this.globalShortcuts = new ShortcutController(host, { '$mod+k': preventDefault(actions.toggleOpen) })\n    this.navigationShortcuts = new ShortcutController(\n      host,\n      {\n        Enter: preventDefault(actions.trigger),\n        Backspace: actions.goBack, // we don't want to prevent default, since that would stop backspace deleting chars\n        End: preventDefault(actions.end),\n        Home: preventDefault(actions.start),\n        ArrowDown: preventDefault(actions.next),\n        ArrowUp: preventDefault(actions.previous),\n      },\n      host,\n    )\n  }\n\n  registerCommandShortcuts() {\n    const shortcuts: ShortcutMap = {}\n\n    for (const command of this.host.commands) {\n      if (command.shortcut) {\n        shortcuts[command.shortcut] = () => command.handler?.(this.host)\n      }\n    }\n\n    this.commandShortcuts.bind(shortcuts)\n  }\n}\n"],"names":["preventDefault","fn","e","KeyboardController","constructor","host","actions","this","addController","commandShortcuts","ShortcutController","globalShortcuts","toggleOpen","navigationShortcuts","Enter","trigger","Backspace","goBack","End","end","Home","start","ArrowDown","next","ArrowUp","previous","registerCommandShortcuts","shortcuts","command","commands","shortcut","_a","handler","call","bind"],"mappings":"2FAeA,SAASA,EAAeC,GACtB,OAAQC,IACNA,EAAEF,iBACFC,EAAGC,EAAE,CAET,OAEaC,EAKX,WAAAC,CACUC,EACRC,GADQC,KAAIF,KAAJA,EAGRA,EAAKG,cAAcD,MAEnBA,KAAKE,iBAAmB,IAAIC,EAAmBL,GAC/CE,KAAKI,gBAAkB,IAAID,EAAmBL,EAAM,CAAE,SAAUL,EAAeM,EAAQM,cACvFL,KAAKM,oBAAsB,IAAIH,EAC7BL,EACA,CACES,MAAOd,EAAeM,EAAQS,SAC9BC,UAAWV,EAAQW,OACnBC,IAAKlB,EAAeM,EAAQa,KAC5BC,KAAMpB,EAAeM,EAAQe,OAC7BC,UAAWtB,EAAeM,EAAQiB,MAClCC,QAASxB,EAAeM,EAAQmB,WAElCpB,EAEH,CAED,wBAAAqB,GACE,MAAMC,EAAyB,CAAA,EAE/B,IAAK,MAAMC,KAAWrB,KAAKF,KAAKwB,SAC1BD,EAAQE,WACVH,EAAUC,EAAQE,UAAY,KAAM,IAAAC,EAAA,OAAkB,UAAlBH,EAAQI,eAAU,IAAAD,OAAA,EAAAA,EAAAE,KAAAL,EAAArB,KAAKF,KAAK,GAIpEE,KAAKE,iBAAiByB,KAAKP,EAC5B"}
+{"version":3,"file":"KeyboardController.js","sources":["../src/command-menu/KeyboardController.ts"],"sourcesContent":["import type { ReactiveController } from 'lit'\nimport type { ShortcutMap } from '../common/controllers/ShortcutController.js'\nimport type CommandMenu from './CommandMenu.js'\nimport { ShortcutController } from '../common/controllers/ShortcutController.js'\n\ninterface KeyboardActions {\n  trigger: () => void\n  goBack: () => void\n  start: () => void\n  end: () => void\n  next: () => void\n  previous: () => void\n  toggleOpen: () => void\n}\n\nfunction preventDefault(fn: (e: Event) => void) {\n  return (e: Event) => {\n    e.preventDefault()\n    fn(e)\n  }\n}\n\nexport class KeyboardController {\n  private globalShortcuts: ShortcutController\n  private navigationShortcuts: ShortcutController\n  private commandShortcuts: ShortcutController\n\n  constructor(\n    private host: CommandMenu,\n    actions: KeyboardActions,\n  ) {\n    host.addController(this as ReactiveController)\n\n    this.commandShortcuts = new ShortcutController(host)\n    this.globalShortcuts = new ShortcutController(host, { '$mod+k': preventDefault(actions.toggleOpen) })\n    this.navigationShortcuts = new ShortcutController(\n      host,\n      {\n        Enter: preventDefault(actions.trigger),\n        Backspace: actions.goBack, // we don't want to prevent default, since that would stop backspace deleting chars\n        End: preventDefault(actions.end),\n        Home: preventDefault(actions.start),\n        ArrowDown: preventDefault(actions.next),\n        ArrowUp: preventDefault(actions.previous),\n      },\n      host,\n    )\n  }\n\n  registerCommandShortcuts() {\n    const shortcuts: ShortcutMap = {}\n\n    for (const command of this.host.commands) {\n      if (command.shortcut) {\n        shortcuts[command.shortcut] = (event: Event) => {\n          // The handler always fires. Only override the browser default when the\n          // command explicitly opts in via `forceShortcut`, acknowledging it is\n          // reclaiming a combo the browser may reserve (e.g. Alt+D = address bar).\n          if (command.forceShortcut) {\n            event.preventDefault()\n          }\n          command.handler?.(this.host)\n        }\n      }\n    }\n\n    this.commandShortcuts.bind(shortcuts)\n  }\n}\n"],"names":["preventDefault","fn","e","KeyboardController","constructor","host","actions","this","addController","commandShortcuts","ShortcutController","globalShortcuts","toggleOpen","navigationShortcuts","Enter","trigger","Backspace","goBack","End","end","Home","start","ArrowDown","next","ArrowUp","previous","registerCommandShortcuts","shortcuts","command","commands","shortcut","event","forceShortcut","_a","handler","call","bind"],"mappings":"2FAeA,SAASA,EAAeC,GACtB,OAAQC,IACNA,EAAEF,iBACFC,EAAGC,EAAE,CAET,OAEaC,EAKX,WAAAC,CACUC,EACRC,GADQC,KAAIF,KAAJA,EAGRA,EAAKG,cAAcD,MAEnBA,KAAKE,iBAAmB,IAAIC,EAAmBL,GAC/CE,KAAKI,gBAAkB,IAAID,EAAmBL,EAAM,CAAE,SAAUL,EAAeM,EAAQM,cACvFL,KAAKM,oBAAsB,IAAIH,EAC7BL,EACA,CACES,MAAOd,EAAeM,EAAQS,SAC9BC,UAAWV,EAAQW,OACnBC,IAAKlB,EAAeM,EAAQa,KAC5BC,KAAMpB,EAAeM,EAAQe,OAC7BC,UAAWtB,EAAeM,EAAQiB,MAClCC,QAASxB,EAAeM,EAAQmB,WAElCpB,EAEH,CAED,wBAAAqB,GACE,MAAMC,EAAyB,CAAA,EAE/B,IAAK,MAAMC,KAAWrB,KAAKF,KAAKwB,SAC1BD,EAAQE,WACVH,EAAUC,EAAQE,UAAaC,UAIzBH,EAAQI,eACVD,EAAM/B,iBAEO,QAAfiC,EAAAL,EAAQM,eAAO,IAAAD,GAAAA,EAAAE,KAAAP,EAAGrB,KAAKF,KAAK,GAKlCE,KAAKE,iBAAiB2B,KAAKT,EAC5B"}