@nordhealth/components 4.26.2 → 5.0.0-alpha.0

package/lib/AsideTrigger.js

@@ -1,5 +1,4 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as i,LitElement as e,html as r,nothing as s}from"lit";import{property as o,state as a,customElement as n}from"lit/decorators.js";import{S as d}from"./SlotController-Z6eG7LSZ.js";import{o as l}from"./observe-D0n0zOfU.js";import{s as c}from"./Component-DSU3Qp0O.js";import"./Button.js";import"./Icon.js";import"./Tooltip.js";import"./EventController-BBOmvfLa.js";import"lit/directives/ref.js";import"./LightDomController-DIwtVelV.js";import"./cond-CI1KbneT.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./positioning-D-K8Mueq.js";import"./fsm-Bq5jMQrK.js";const h=i`:host{--_n-aside-trigger-size:var(--n-aside-trigger-size, 32px);--_n-aside-trigger-background-color:var(--n-aside-trigger-background-color, transparent);--_n-aside-trigger-background-color-active:var(
-    --n-aside-trigger-background-color-active,
-    var(--n-color-button-hover)
-  );display:block;inline-size:100%}.n-aside-trigger{display:block;position:relative;inline-size:100%;text-align:center}.n-aside-trigger nord-button{--n-button-min-block-size:var(--_n-aside-trigger-size);--n-button-min-inline-size:var(--_n-aside-trigger-size);--n-button-background-color:var(--_n-aside-trigger-background-color)}:host([aria-expanded=true]){--_n-aside-trigger-background-color:var(--_n-aside-trigger-background-color-active)}.n-aside-trigger-dot{position:absolute;inset-block-start:3px;inset-inline-end:2px;inline-size:5px;block-size:5px;border-radius:var(--n-border-radius-circle);background:var(--n-color-status-notification);pointer-events:none}`;let p=0,b=class extends e{constructor(){super(...arguments),this.defaultSlot=new d(this),this.tooltipSlot=new d(this,"tooltip"),this.drawer="",this.label="",this.disabled=!1,this.tooltip=!0,this.active=!1,this.targetDisabled=!1,this.tooltipId="n-aside-trigger-tip-"+ ++p,this.handleActiveDrawerChange=()=>{this.syncFromAside()},this.handleClick=t=>{var i;if(this.disabled||this.targetDisabled)return t.stopPropagation(),void t.preventDefault();const e=this.aside;if(!e||!this.drawer)return;const r=null!==(i=e.getAttribute("active-drawer"))&&void 0!==i?i:"";e.activeDrawer=r===this.drawer?"":this.drawer}}render(){const t=!this.defaultSlot.isEmpty,i=!t&&!!this.icon,e=void 0!==this.badge&&null!==this.badge&&""!==this.badge,o=!this.tooltipSlot.isEmpty,a=this.tooltip&&(!!this.label||o);return r`<div class="n-aside-trigger"><nord-button square size="s" variant="plain" type="button" aria-label="${this.label||s}" aria-describedby="${a?this.tooltipId:s}" ?disabled="${this.disabled}" @click="${this.handleClick}">${t?r`<slot></slot>`:s} ${i?r`<nord-icon name="${this.icon}" size="m"></nord-icon>`:s}</nord-button>${e?r`<span class="n-aside-trigger-dot" aria-hidden="true"></span>`:s} ${a?r`<nord-tooltip id="${this.tooltipId}" position="inline-start"><slot name="tooltip">${this.label}</slot></nord-tooltip>`:s}</div>`}connectedCallback(){super.connectedCallback(),this.startObservingAside()}disconnectedCallback(){super.disconnectedCallback(),this.stopObservingAside()}handleDrawerChange(){this.syncFromAside()}handleDisabledChange(){this.syncAria()}get aside(){return this.closest("nord-aside")}startObservingAside(){var t;this.observedAside=null!==(t=this.aside)&&void 0!==t?t:void 0,this.observedAside&&(this.observedAside.addEventListener("active-drawer-change",this.handleActiveDrawerChange),this.syncFromAside())}stopObservingAside(){var t;null===(t=this.observedAside)||void 0===t||t.removeEventListener("active-drawer-change",this.handleActiveDrawerChange),this.observedAside=void 0}syncFromAside(){var t,i,e;const r=null!==(t=this.observedAside)&&void 0!==t?t:this.aside;if(!r)return this.active=!1,this.targetDisabled=!1,void this.syncAria();const s=null!==(e=null!==(i=r.activeDrawer)&&void 0!==i?i:r.getAttribute("active-drawer"))&&void 0!==e?e:"";this.active=!!this.drawer&&s===this.drawer;const o=this.drawer?r.querySelector(`:scope > nord-aside-drawer#${CSS.escape(this.drawer)}`):null;this.targetDisabled=!o||o.hasAttribute("disabled"),this.syncAria()}syncAria(){this.drawer?this.setAttribute("aria-controls",this.drawer):this.removeAttribute("aria-controls"),this.setAttribute("aria-expanded",this.active?"true":"false"),this.disabled||this.targetDisabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled")}};b.styles=[c,h],t([o({reflect:!0})],b.prototype,"drawer",void 0),t([o({reflect:!0})],b.prototype,"icon",void 0),t([o({reflect:!0})],b.prototype,"label",void 0),t([o({reflect:!0})],b.prototype,"badge",void 0),t([o({type:Boolean,reflect:!0})],b.prototype,"disabled",void 0),t([o({type:Boolean,reflect:!0})],b.prototype,"tooltip",void 0),t([a()],b.prototype,"active",void 0),t([a()],b.prototype,"targetDisabled",void 0),t([l("drawer")],b.prototype,"handleDrawerChange",null),t([l("disabled")],b.prototype,"handleDisabledChange",null),b=t([n("nord-aside-trigger")],b);var v=b;export{v as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as i,LitElement as e,html as r,nothing as s}from"lit";import{property as o,state as a,customElement as n}from"lit/decorators.js";import{S as d}from"./SlotController-Z6eG7LSZ.js";import{o as l}from"./observe-D0n0zOfU.js";import{s as c}from"./Component-BJ5O5n8k.js";import"./Button.js";import"./Icon.js";import"./Tooltip.js";import"./EventController-BBOmvfLa.js";import"lit/directives/ref.js";import"./LightDomController-DIwtVelV.js";import"./cond-CI1KbneT.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"./Spinner.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"./positioning-D-K8Mueq.js";import"./events-Bv6wNHwJ.js";import"./fsm-Bq5jMQrK.js";const h=i`:host{--_n-aside-trigger-size:var(--n-aside-trigger-size,32px);--_n-aside-trigger-background-color:var(--n-aside-trigger-background-color,#0000);--_n-aside-trigger-background-color-active:var(
+    --n-aside-trigger-background-color-active,var(--n-color-button-hover)
+  );display:block;inline-size:100%}.n-aside-trigger{display:block;inline-size:100%;position:relative;text-align:center}.n-aside-trigger nord-button{--n-button-min-block-size:var(--_n-aside-trigger-size);--n-button-min-inline-size:var(--_n-aside-trigger-size);--n-button-background-color:var(--_n-aside-trigger-background-color)}:host([aria-expanded=true]){--_n-aside-trigger-background-color:var(--_n-aside-trigger-background-color-active)}:host(:hover),:host([aria-expanded=true]){--n-button-color:var(--n-color-text);--n-color-icon:var(--n-color-text)}.n-aside-trigger-dot{background:var(--n-color-status-notification);block-size:5px;border-radius:var(--n-border-radius-circle);inline-size:5px;inset-block-start:3px;inset-inline-end:2px;pointer-events:none;position:absolute}`;let p=0,v=class extends e{constructor(){super(...arguments),this.defaultSlot=new d(this),this.tooltipSlot=new d(this,"tooltip"),this.drawer="",this.label="",this.disabled=!1,this.tooltip=!0,this.active=!1,this.targetDisabled=!1,this.tooltipId="n-aside-trigger-tip-"+ ++p,this.handleActiveDrawerChange=()=>{this.syncFromAside()},this.handleClick=t=>{var i;if(this.disabled||this.targetDisabled)return t.stopPropagation(),void t.preventDefault();const e=this.aside;if(!e||!this.drawer)return;const r=null!==(i=e.getAttribute("active-drawer"))&&void 0!==i?i:"";e.activeDrawer=r===this.drawer?"":this.drawer}}render(){const t=!this.defaultSlot.isEmpty,i=!t&&!!this.icon,e=void 0!==this.badge&&null!==this.badge&&""!==this.badge,o=!this.tooltipSlot.isEmpty,a=this.tooltip&&(!!this.label||o);return r`<div class="n-aside-trigger"><nord-button square size="s" variant="plain" type="button" aria-label="${this.label||s}" aria-describedby="${a?this.tooltipId:s}" ?disabled="${this.disabled}" @click="${this.handleClick}">${t?r`<slot></slot>`:s} ${i?r`<nord-icon name="${this.icon}" size="m"></nord-icon>`:s}</nord-button>${e?r`<span class="n-aside-trigger-dot" aria-hidden="true"></span>`:s} ${a?r`<nord-tooltip id="${this.tooltipId}" position="inline-start"><slot name="tooltip">${this.label}</slot></nord-tooltip>`:s}</div>`}connectedCallback(){super.connectedCallback(),this.startObservingAside()}disconnectedCallback(){super.disconnectedCallback(),this.stopObservingAside()}handleDrawerChange(){this.syncFromAside()}handleDisabledChange(){this.syncAria()}get aside(){return this.closest("nord-aside")}startObservingAside(){var t;this.observedAside=null!==(t=this.aside)&&void 0!==t?t:void 0,this.observedAside&&(this.observedAside.addEventListener("active-drawer-change",this.handleActiveDrawerChange),this.syncFromAside())}stopObservingAside(){var t;null===(t=this.observedAside)||void 0===t||t.removeEventListener("active-drawer-change",this.handleActiveDrawerChange),this.observedAside=void 0}syncFromAside(){var t,i,e;const r=null!==(t=this.observedAside)&&void 0!==t?t:this.aside;if(!r)return this.active=!1,this.targetDisabled=!1,void this.syncAria();const s=null!==(e=null!==(i=r.activeDrawer)&&void 0!==i?i:r.getAttribute("active-drawer"))&&void 0!==e?e:"";this.active=!!this.drawer&&s===this.drawer;const o=this.drawer?r.querySelector(`:scope > nord-aside-drawer#${CSS.escape(this.drawer)}`):null;this.targetDisabled=!o||o.hasAttribute("disabled"),this.syncAria()}syncAria(){this.drawer?this.setAttribute("aria-controls",this.drawer):this.removeAttribute("aria-controls"),this.setAttribute("aria-expanded",this.active?"true":"false"),this.disabled||this.targetDisabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled")}};v.styles=[c,h],t([o({reflect:!0})],v.prototype,"drawer",void 0),t([o({reflect:!0})],v.prototype,"icon",void 0),t([o({reflect:!0})],v.prototype,"label",void 0),t([o({reflect:!0})],v.prototype,"badge",void 0),t([o({type:Boolean,reflect:!0})],v.prototype,"disabled",void 0),t([o({type:Boolean,reflect:!0})],v.prototype,"tooltip",void 0),t([a()],v.prototype,"active",void 0),t([a()],v.prototype,"targetDisabled",void 0),t([l("drawer")],v.prototype,"handleDrawerChange",null),t([l("disabled")],v.prototype,"handleDisabledChange",null),v=t([n("nord-aside-trigger")],v);var b=v;export{b as default};
 //# sourceMappingURL=AsideTrigger.js.map

package/lib/AsideTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"AsideTrigger.js","sources":["../src/aside-trigger/AsideTrigger.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './AsideTrigger.css'\nimport '../button/Button.js'\nimport '../icon/Icon.js'\nimport '../tooltip/Tooltip.js'\n\nlet asideTriggerTooltipIdCounter = 0\n\n/**\n * Rail button that toggles a `<nord-aside-drawer>` inside `<nord-aside>`.\n *\n * @status new\n * @category action\n * @slot - Overrides the `icon` attribute for custom leading content.\n * @slot tooltip - Overrides the tooltip body (falls back to `label`).\n *   Lets consumers add icons, shortcut hints, etc. — anything beyond the\n *   plain string label.\n */\n@customElement('nord-aside-trigger')\nexport default class AsideTrigger extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n  private tooltipSlot = new SlotController(this, 'tooltip')\n\n  /**\n   * The id of the `<nord-aside-drawer>` this trigger toggles.\n   * Required.\n   */\n  @property({ reflect: true }) drawer: string = ''\n\n  /**\n   * Nord icon name. Shortcut for the common case; equivalent to placing\n   * `<nord-icon name=\"…\">` in the default slot.\n   */\n  @property({ reflect: true }) icon?: string\n\n  /**\n   * Accessible label (used for `aria-label` on the host).\n   */\n  @property({ reflect: true }) label: string = ''\n\n  /**\n   * Optional badge content (forwarded to inner `<nord-badge>`).\n   */\n  @property({ reflect: true }) badge?: string | number\n\n  /**\n   * Makes the trigger disabled. Takes precedence over the target\n   * drawer's `disabled` state.\n   */\n  @property({ type: Boolean, reflect: true }) disabled: boolean = false\n\n  /**\n   * Whether to render a `<nord-tooltip>` showing `label` on hover/focus.\n   * Defaults to `true` — set `tooltip=\"false\"` (or omit `label`) to opt out.\n   */\n  @property({ type: Boolean, reflect: true }) tooltip: boolean = true\n\n  /**\n   * Whether the ancestor `<nord-aside>`'s `active-drawer` currently\n   * matches this trigger's `drawer` id.\n   * @internal\n   */\n  @state() private active: boolean = false\n\n  /**\n   * Whether the target drawer exists and is not disabled. Drives\n   * `aria-disabled` on the host.\n   * @internal\n   */\n  @state() private targetDisabled: boolean = false\n\n  private observedAside?: HTMLElement\n  private readonly tooltipId = `n-aside-trigger-tip-${++asideTriggerTooltipIdCounter}`\n\n  render() {\n    const showCustomLeading = !this.defaultSlot.isEmpty\n    const showIcon = !showCustomLeading && !!this.icon\n    const showBadge = this.badge !== undefined && this.badge !== null && this.badge !== ''\n\n    // Tooltip is rendered when explicitly enabled AND there's something to\n    // show — either the `label` attr (default body) or a custom `tooltip`\n    // slot.\n    const hasTooltipSlot = !this.tooltipSlot.isEmpty\n    const showTooltip = this.tooltip && (!!this.label || hasTooltipSlot)\n    return html`\n      <div class=\"n-aside-trigger\">\n        <nord-button\n          square\n          size=\"s\"\n          variant=\"plain\"\n          type=\"button\"\n          aria-label=${this.label || nothing}\n          aria-describedby=${showTooltip ? this.tooltipId : nothing}\n          ?disabled=${this.disabled}\n          @click=${this.handleClick}\n        >\n          ${showCustomLeading ? html`<slot></slot>` : nothing}\n          ${showIcon ? html`<nord-icon name=${this.icon!} size=\"m\"></nord-icon>` : nothing}\n        </nord-button>\n        ${showBadge ? html`<span class=\"n-aside-trigger-dot\" aria-hidden=\"true\"></span>` : nothing}\n        ${showTooltip\n          ? html`\n              <nord-tooltip id=${this.tooltipId} position=\"inline-start\">\n                <slot name=\"tooltip\">${this.label}</slot>\n              </nord-tooltip>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.startObservingAside()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.stopObservingAside()\n  }\n\n  @observe('drawer')\n  protected handleDrawerChange() {\n    this.syncFromAside()\n  }\n\n  @observe('disabled')\n  protected handleDisabledChange() {\n    this.syncAria()\n  }\n\n  private get aside(): HTMLElement | null {\n    return this.closest('nord-aside')\n  }\n\n  private readonly handleActiveDrawerChange = () => {\n    this.syncFromAside()\n  }\n\n  /**\n   * Listen to the aside's own `active-drawer-change` event instead of each\n   * trigger installing its own subtree MutationObserver on the whole aside.\n   * One shared event covers open / switch / close, so N triggers no longer\n   * mean N observers waking on every aside DOM mutation.\n   */\n  private startObservingAside() {\n    this.observedAside = this.aside ?? undefined\n    if (!this.observedAside) {\n      return\n    }\n    this.observedAside.addEventListener('active-drawer-change', this.handleActiveDrawerChange)\n    this.syncFromAside()\n  }\n\n  private stopObservingAside() {\n    this.observedAside?.removeEventListener('active-drawer-change', this.handleActiveDrawerChange)\n    this.observedAside = undefined\n  }\n\n  private syncFromAside() {\n    const aside = this.observedAside ?? this.aside\n    if (!aside) {\n      this.active = false\n      this.targetDisabled = false\n      this.syncAria()\n      return\n    }\n\n    // Prefer the live `activeDrawer` property over the reflected attribute:\n    // the `active-drawer-change` event fires during the aside's update cycle,\n    // before Lit reflects the property to the `active-drawer` attribute, so\n    // reading the attribute here would lag one tick behind. Fall back to the\n    // attribute only while the aside element has not upgraded yet.\n    const activeDrawer\n      = (aside as HTMLElement & { activeDrawer?: string }).activeDrawer\n        ?? aside.getAttribute('active-drawer')\n        ?? ''\n    this.active = !!this.drawer && activeDrawer === this.drawer\n\n    const target = this.drawer\n      ? aside.querySelector(`:scope > nord-aside-drawer#${CSS.escape(this.drawer)}`)\n      : null\n    this.targetDisabled = !target || target.hasAttribute('disabled')\n\n    this.syncAria()\n  }\n\n  private syncAria() {\n    if (this.drawer) {\n      this.setAttribute('aria-controls', this.drawer)\n    }\n    else {\n      this.removeAttribute('aria-controls')\n    }\n    this.setAttribute('aria-expanded', this.active ? 'true' : 'false')\n    if (this.disabled || this.targetDisabled) {\n      this.setAttribute('aria-disabled', 'true')\n    }\n    else {\n      this.removeAttribute('aria-disabled')\n    }\n  }\n\n  private handleClick = (event: Event) => {\n    if (this.disabled || this.targetDisabled) {\n      event.stopPropagation()\n      event.preventDefault()\n      return\n    }\n    const aside = this.aside\n    if (!aside || !this.drawer) {\n      return\n    }\n    const current = aside.getAttribute('active-drawer') ?? ''\n    ;(aside as HTMLElement & { activeDrawer?: string }).activeDrawer\n      = current === this.drawer ? '' : this.drawer\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-aside-trigger': AsideTrigger\n  }\n}\n"],"names":["asideTriggerTooltipIdCounter","AsideTrigger","LitElement","constructor","this","defaultSlot","SlotController","tooltipSlot","drawer","label","disabled","tooltip","active","targetDisabled","tooltipId","handleActiveDrawerChange","syncFromAside","handleClick","event","stopPropagation","preventDefault","aside","current","_a","getAttribute","activeDrawer","render","showCustomLeading","isEmpty","showIcon","icon","showBadge","undefined","badge","hasTooltipSlot","showTooltip","html","nothing","connectedCallback","super","startObservingAside","disconnectedCallback","stopObservingAside","handleDrawerChange","handleDisabledChange","syncAria","closest","observedAside","addEventListener","removeEventListener","_c","_b","target","querySelector","CSS","escape","hasAttribute","setAttribute","removeAttribute","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","state","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"AsideTrigger.js","sources":["../src/aside-trigger/AsideTrigger.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './AsideTrigger.css'\nimport '../button/Button.js'\nimport '../icon/Icon.js'\nimport '../tooltip/Tooltip.js'\n\nlet asideTriggerTooltipIdCounter = 0\n\n/**\n * Rail button that toggles a `<nord-aside-drawer>` inside `<nord-aside>`.\n *\n * @status new\n * @category action\n * @slot - Overrides the `icon` attribute for custom leading content.\n * @slot tooltip - Overrides the tooltip body (falls back to `label`).\n *   Lets consumers add icons, shortcut hints, etc. — anything beyond the\n *   plain string label.\n *\n * @parent Aside\n */\n@customElement('nord-aside-trigger')\nexport default class AsideTrigger extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n  private tooltipSlot = new SlotController(this, 'tooltip')\n\n  /**\n   * The id of the `<nord-aside-drawer>` this trigger toggles.\n   * Required.\n   */\n  @property({ reflect: true }) drawer: string = ''\n\n  /**\n   * Nord icon name. Shortcut for the common case; equivalent to placing\n   * `<nord-icon name=\"…\">` in the default slot.\n   */\n  @property({ reflect: true }) icon?: string\n\n  /**\n   * Accessible label (used for `aria-label` on the host).\n   */\n  @property({ reflect: true }) label: string = ''\n\n  /**\n   * Optional badge content (forwarded to inner `<nord-badge>`).\n   */\n  @property({ reflect: true }) badge?: string | number\n\n  /**\n   * Makes the trigger disabled. Takes precedence over the target\n   * drawer's `disabled` state.\n   */\n  @property({ type: Boolean, reflect: true }) disabled: boolean = false\n\n  /**\n   * Whether to render a `<nord-tooltip>` showing `label` on hover/focus.\n   * Defaults to `true` — set `tooltip=\"false\"` (or omit `label`) to opt out.\n   */\n  @property({ type: Boolean, reflect: true }) tooltip: boolean = true\n\n  /**\n   * Whether the ancestor `<nord-aside>`'s `active-drawer` currently\n   * matches this trigger's `drawer` id.\n   * @internal\n   */\n  @state() private active: boolean = false\n\n  /**\n   * Whether the target drawer exists and is not disabled. Drives\n   * `aria-disabled` on the host.\n   * @internal\n   */\n  @state() private targetDisabled: boolean = false\n\n  private observedAside?: HTMLElement\n  private readonly tooltipId = `n-aside-trigger-tip-${++asideTriggerTooltipIdCounter}`\n\n  render() {\n    const showCustomLeading = !this.defaultSlot.isEmpty\n    const showIcon = !showCustomLeading && !!this.icon\n    const showBadge = this.badge !== undefined && this.badge !== null && this.badge !== ''\n\n    // Tooltip is rendered when explicitly enabled AND there's something to\n    // show — either the `label` attr (default body) or a custom `tooltip`\n    // slot.\n    const hasTooltipSlot = !this.tooltipSlot.isEmpty\n    const showTooltip = this.tooltip && (!!this.label || hasTooltipSlot)\n    return html`\n      <div class=\"n-aside-trigger\">\n        <nord-button\n          square\n          size=\"s\"\n          variant=\"plain\"\n          type=\"button\"\n          aria-label=${this.label || nothing}\n          aria-describedby=${showTooltip ? this.tooltipId : nothing}\n          ?disabled=${this.disabled}\n          @click=${this.handleClick}\n        >\n          ${showCustomLeading ? html`<slot></slot>` : nothing}\n          ${showIcon ? html`<nord-icon name=${this.icon!} size=\"m\"></nord-icon>` : nothing}\n        </nord-button>\n        ${showBadge ? html`<span class=\"n-aside-trigger-dot\" aria-hidden=\"true\"></span>` : nothing}\n        ${showTooltip\n          ? html`\n              <nord-tooltip id=${this.tooltipId} position=\"inline-start\">\n                <slot name=\"tooltip\">${this.label}</slot>\n              </nord-tooltip>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.startObservingAside()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.stopObservingAside()\n  }\n\n  @observe('drawer')\n  protected handleDrawerChange() {\n    this.syncFromAside()\n  }\n\n  @observe('disabled')\n  protected handleDisabledChange() {\n    this.syncAria()\n  }\n\n  private get aside(): HTMLElement | null {\n    return this.closest('nord-aside')\n  }\n\n  private readonly handleActiveDrawerChange = () => {\n    this.syncFromAside()\n  }\n\n  /**\n   * Listen to the aside's own `active-drawer-change` event instead of each\n   * trigger installing its own subtree MutationObserver on the whole aside.\n   * One shared event covers open / switch / close, so N triggers no longer\n   * mean N observers waking on every aside DOM mutation.\n   */\n  private startObservingAside() {\n    this.observedAside = this.aside ?? undefined\n    if (!this.observedAside) {\n      return\n    }\n    this.observedAside.addEventListener('active-drawer-change', this.handleActiveDrawerChange)\n    this.syncFromAside()\n  }\n\n  private stopObservingAside() {\n    this.observedAside?.removeEventListener('active-drawer-change', this.handleActiveDrawerChange)\n    this.observedAside = undefined\n  }\n\n  private syncFromAside() {\n    const aside = this.observedAside ?? this.aside\n    if (!aside) {\n      this.active = false\n      this.targetDisabled = false\n      this.syncAria()\n      return\n    }\n\n    // Prefer the live `activeDrawer` property over the reflected attribute:\n    // the `active-drawer-change` event fires during the aside's update cycle,\n    // before Lit reflects the property to the `active-drawer` attribute, so\n    // reading the attribute here would lag one tick behind. Fall back to the\n    // attribute only while the aside element has not upgraded yet.\n    const activeDrawer\n      = (aside as HTMLElement & { activeDrawer?: string }).activeDrawer\n        ?? aside.getAttribute('active-drawer')\n        ?? ''\n    this.active = !!this.drawer && activeDrawer === this.drawer\n\n    const target = this.drawer\n      ? aside.querySelector(`:scope > nord-aside-drawer#${CSS.escape(this.drawer)}`)\n      : null\n    this.targetDisabled = !target || target.hasAttribute('disabled')\n\n    this.syncAria()\n  }\n\n  private syncAria() {\n    if (this.drawer) {\n      this.setAttribute('aria-controls', this.drawer)\n    }\n    else {\n      this.removeAttribute('aria-controls')\n    }\n    this.setAttribute('aria-expanded', this.active ? 'true' : 'false')\n    if (this.disabled || this.targetDisabled) {\n      this.setAttribute('aria-disabled', 'true')\n    }\n    else {\n      this.removeAttribute('aria-disabled')\n    }\n  }\n\n  private handleClick = (event: Event) => {\n    if (this.disabled || this.targetDisabled) {\n      event.stopPropagation()\n      event.preventDefault()\n      return\n    }\n    const aside = this.aside\n    if (!aside || !this.drawer) {\n      return\n    }\n    const current = aside.getAttribute('active-drawer') ?? ''\n    ;(aside as HTMLElement & { activeDrawer?: string }).activeDrawer\n      = current === this.drawer ? '' : this.drawer\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-aside-trigger': AsideTrigger\n  }\n}\n"],"names":["asideTriggerTooltipIdCounter","AsideTrigger","LitElement","constructor","this","defaultSlot","SlotController","tooltipSlot","drawer","label","disabled","tooltip","active","targetDisabled","tooltipId","handleActiveDrawerChange","syncFromAside","handleClick","event","stopPropagation","preventDefault","aside","current","_a","getAttribute","activeDrawer","render","showCustomLeading","isEmpty","showIcon","icon","showBadge","undefined","badge","hasTooltipSlot","showTooltip","html","nothing","connectedCallback","super","startObservingAside","disconnectedCallback","stopObservingAside","handleDrawerChange","handleDisabledChange","syncAria","closest","observedAside","addEventListener","removeEventListener","_c","_b","target","querySelector","CSS","escape","hasAttribute","setAttribute","removeAttribute","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","state","observe","customElement"],"mappings":"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"}

package/lib/Autocomplete.js

@@ -0,0 +1,2 @@
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{nothing as e}from"lit";import{property as i,state as o,customElement as s}from"lit/decorators.js";import{s as r}from"./Combobox-By4h1Sp-.js";import n,{retagComboboxStyles as l}from"./ComboboxBase.js";import{ComboboxClearEvent as a}from"./ComboboxEvents.js";import{i as c}from"./light-dom-styles-DXsbiKU9.js";import{LocalizeController as p}from"./LocalizeController.js";import"./ActiveDescendantController-BnMqM79O.js";import"./number-Dg2vCfGd.js";import"./interface-close-small-CnpAFMO3.js";import"./interface-dropdown-small-CYvgxudU.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/directives/ref.js";import"lit/directives/repeat.js";import"lit/directives/style-map.js";import"lit/directives/unsafe-html.js";import"./collection-Dvg2XbxV.js";import"./FormDataController-OUt5L5uC.js";import"./LightDismissController-4pH8cdko.js";import"./EventController-BBOmvfLa.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ResizeController-14PUwRQy.js";import"./StateAttributesController-BIh96sXZ.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./events-Bv6wNHwJ.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./DraftComponentMixin-4qug5Rky.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./VisuallyHidden.js";import"./Popout-DpN7PP9h.js";import"./positioning-D-K8Mueq.js";import"./DirectionController-ChvNGESZ.js";import"./ScrollbarController-BFC67Y2x.js";import"./Component-BJ5O5n8k.js";import"./InputMixin-LetXsCyv.js";import"./SizeMixin-CU9cLbLC.js";import"./Icon.js";import"./IconManager.js";import"./Spinner.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"./localization10.js";import"./localization11.js";import"./localization12.js";import"./localization13.js";import"./localization14.js";import"./localization15.js";import"./localization16.js";import"./localization17.js";import"./localization18.js";import"./localization19.js";import"./localization20.js";import"./localization21.js";import"./localization22.js";const h=l(r,"nord-autocomplete");let m=class extends n{constructor(){super(...arguments),this.value="",this.inline=!1,this.clearable=!1,this.openOnFocus=!1,this.localize=new p(this),this.keyboardActive=!1}connectedCallback(){super.connectedCallback(),c(this,h)}get filterQuery(){return this.value}get inlineQuery(){return this.value}get hasInlineGhost(){if(!this.inline||!this.keyboardActive||!this.open)return!1;const t=this.activeOption,e=this.inlineQuery;if(!t||!e)return!1;const i=t.label;return i.length>e.length&&i.toLocaleLowerCase().startsWith(e.toLocaleLowerCase())}get displayValue(){if(this.hasInlineGhost){const t=this.inlineQuery,{label:e}=this.activeOption;return t+e.slice(t.length)}return this.value}get hasValue(){return this.value.length>0}get formValue(){return this.value||void 0}get showClear(){return this.clearable&&this.hasValue&&!this.disabled}get showToggle(){return!1}get ariaAutocomplete(){return this.inline?this.externalFiltering?"inline":"both":this.externalFiltering?"none":"list"}isSelected(){return!1}get ariaMultiselectable(){}showCheck(){return!1}get rendersCheck(){return!1}optionAriaSelected(){return e}onHide(){}onInput(t){this.keyboardActive=!1,this.value=t.value,this.commit()}onKeydown(t){switch(t.key){case"ArrowDown":case"ArrowUp":case"Home":this.open&&(this.keyboardActive=!0);break;case"ArrowRight":case"End":if(this.inline&&this.open&&this.hasInlineGhost){const e=this.inputRef.value;if(!e||e.selectionEnd===e.value.length){t.preventDefault(),this.acceptInline();break}}"End"===t.key&&this.open&&(this.keyboardActive=!0);break;case"Backspace":case"Delete":this.keyboardActive=!1}}onMove(){this.keyboardActive=!0}handleEnter(t){return this.inline&&this.hasInlineGhost&&this.activeOption?(t.preventDefault(),this.acceptInline(),!0):(this.navigated||this.autoHighlight&&this.hasQuery)&&this.activeOption?(t.preventDefault(),this.selectOption(this.activeOption),!0):(this.hide(),!0)}get hasQuery(){return this.filterQuery.length>0}onOptionHover(){this.keyboardActive=!1}onBlur(){this.inline&&this.hasInlineGhost&&this.revertInline(),this.keyboardActive=!1}afterUpdate(){if(this.hasInlineGhost){const t=this.inputRef.value;t&&t.setSelectionRange(this.inlineQuery.length,t.value.length)}}selectOption(t){t.disabled||(this.labelCache.set(t.value,t.label),this.keyboardActive=!1,this.value=t.label,this.search=t.label,this.commit(),this.hide(),this.suppressFocusOpen=!0,this.focus(),this.suppressFocusOpen=!1)}acceptInline(){const t=this.activeOption;t&&this.selectOption(t)}revertInline(){this.keyboardActive=!1;const t=this.inputRef.value;t&&(t.value=this.value,t.setSelectionRange(this.value.length,this.value.length))}resetActiveIndex(){super.resetActiveIndex(),this.keyboardActive=!1}clear(){this.value="",this.search="",this.keyboardActive=!1,this.dispatchEvent(new a),this.commit(),this.focus()}};t([i({attribute:!1})],m.prototype,"value",void 0),t([i({reflect:!0,type:Boolean})],m.prototype,"inline",void 0),t([i({reflect:!0,type:Boolean})],m.prototype,"clearable",void 0),t([i({reflect:!0,type:Boolean,attribute:"open-on-focus"})],m.prototype,"openOnFocus",void 0),t([o()],m.prototype,"keyboardActive",void 0),m=t([s("nord-autocomplete")],m);var u=m;export{a as ComboboxClearEvent,u as default};
+//# sourceMappingURL=Autocomplete.js.map

package/lib/Autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.js","sources":["../src/autocomplete/Autocomplete.ts"],"sourcesContent":["import type { ComboboxOption } from '../combobox/ComboboxBase.js'\nimport { nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport comboboxStyle from '../combobox/Combobox.css'\nimport ComboboxBase, { retagComboboxStyles } from '../combobox/ComboboxBase.js'\nimport { ComboboxClearEvent } from '../combobox/ComboboxEvents.js'\nimport { injectLightDomStyles } from '../common/light-dom-styles.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\n\nexport type { ComboboxOption } from '../combobox/ComboboxBase.js'\nexport { ComboboxClearEvent } from '../combobox/ComboboxEvents.js'\n\n/**\n * The shared combobox stylesheet is authored once against the `nord-combobox`\n * tag (see `Combobox.css`); re-prefix it for `nord-autocomplete` so this sibling\n * light-DOM control reuses the exact same `.n-*` rules without duplicating them.\n */\nconst style = retagComboboxStyles(comboboxStyle, 'nord-autocomplete')\n\n/**\n * Autocomplete is a free-text input with suggestions: the text the user types\n * is itself the committed `value` (a string), and the options are completion\n * aids. Picking a suggestion fills the input with the option's `label` and commits\n * that label. Use it when the answer is open-ended text but you can offer\n * helpful completions (a city, a tag, a username); reach for\n * [Combobox](/components/combobox/) instead when the value must be one of a\n * fixed set of options.\n *\n * Autocomplete is a control only — it has no built-in label, hint or error.\n * Compose it inside a [Field](/components/field/) to give it a label, hint and\n * error message, the same way you would a native input.\n *\n * Base UI parity: Autocomplete is the Combobox primitive with\n * `selectionMode=\"none\"` + `fillInputOnItemPress`.\n *\n * @status draft\n * @category form\n * @lightDom true\n *\n * @slot start - Optional slot used to place an icon or prefix at the start of the control.\n * @slot end - Optional slot used to place an icon or suffix at the end of the control.\n *\n * @fires {NordEvent} change - Dispatched when the committed value changes via user interaction.\n * @fires {NordEvent} input - Dispatched as the user types into the input.\n * @fires {NordEvent} open - Dispatched when the listbox is opened.\n * @fires {NordEvent} close - Dispatched when the listbox is closed.\n * @fires {ComboboxClearEvent} clear - Dispatched when the value is cleared via the clear button or `clear()`.\n *\n * @localization clearLabel - Accessible label for the clear button.\n * @localization noResults - Message shown when no options match the query.\n *\n * @cssprop [--n-combobox-list-inline-size] - Controls the inline size, or width, of the dropdown list. Defaults to the width of the control.\n * @cssprop [--n-combobox-block-size] - Controls the block size, or height, of the control. The medium default is `var(--n-space-xl)`; the s and l sizes scale from it.\n *\n * @attr {boolean} data-invalid - Present while the control is invalid (mirrors the `invalid` property). Style hook for the whole control.\n * @attr {boolean} data-focused - Present while the control has focus. Style hook for focus-within treatments.\n */\n@customElement('nord-autocomplete')\nexport default class Autocomplete extends ComboboxBase {\n  /**\n   * The value of the autocomplete. This is the free text the user has typed (or\n   * the `label` of a picked suggestion) — always a single string.\n   */\n  @property({ attribute: false }) value = ''\n\n  /**\n   * Enables inline ghost-text completion. While an option is highlighted with\n   * the keyboard, the input shows the typed query followed by the remainder of\n   * the highlighted option's label, with that remainder text-selected so\n   * continued typing overwrites it. Accepting (Enter, ArrowRight/End at the end\n   * of the text, or an option click) commits the full label.\n   */\n  @property({ reflect: true, type: Boolean }) inline = false\n\n  /**\n   * Shows a clear (✕) button while there is text. Pressing it resets the value\n   * to `''`, then fires `clear` and `change`.\n   */\n  @property({ reflect: true, type: Boolean }) clearable = false\n\n  /**\n   * Whether focusing the input opens the suggestion list. Defaults to `false`\n   * for autocomplete — matching Base UI's `openOnInputClick={false}`, the list\n   * appears as the user types rather than on focus. Set to `true` to also open\n   * on focus.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'open-on-focus' }) override openOnFocus = false\n\n  protected override localize = new LocalizeController<'nord-autocomplete'>(this)\n\n  /**\n   * Whether the active option last changed via the keyboard (arrows/Home/End)\n   * rather than pointer hover. Inline ghost completion only fills on keyboard\n   * navigation, mirroring Base UI's `keyboardActiveRef`. Reactive so toggling it\n   * (even when `activeIndex` is unchanged, e.g. a single filtered option)\n   * re-renders the ghost.\n   */\n  @state() private keyboardActive = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    injectLightDomStyles(this, style)\n  }\n\n  /**\n   * The committed free-text `value` *is* the query, so a programmatically-set\n   * `value` (e.g. `el.value = 'fea'`) filters the open list without the user\n   * having typed, matching the text the input already displays.\n   */\n  protected override get filterQuery(): string {\n    return this.value\n  }\n\n  /** The typed query an inline ghost is composed against (the committed value). */\n  private get inlineQuery(): string {\n    return this.value\n  }\n\n  /**\n   * Whether an inline ghost suffix is currently showing: only in `inline` mode,\n   * when the active option (reached via the keyboard) has a label that starts\n   * with the typed query and extends it.\n   */\n  private get hasInlineGhost(): boolean {\n    if (!this.inline || !this.keyboardActive || !this.open) {\n      return false\n    }\n\n    const option = this.activeOption\n    const query = this.inlineQuery\n\n    if (!option || !query) {\n      return false\n    }\n\n    const label = option.label\n    return (\n      label.length > query.length\n      && label.toLocaleLowerCase().startsWith(query.toLocaleLowerCase())\n    )\n  }\n\n  /** The text shown in the input. */\n  protected override get displayValue(): string {\n    // While an inline ghost is showing, present the typed query plus the\n    // highlighted option's remaining label (with the original casing).\n    if (this.hasInlineGhost) {\n      const query = this.inlineQuery\n      const { label } = this.activeOption!\n      return query + label.slice(query.length)\n    }\n\n    // Otherwise the input always reflects the committed free-text value.\n    return this.value\n  }\n\n  /** Free text is always present once non-empty (drives the clear affordance). */\n  protected override get hasValue(): boolean {\n    return this.value.length > 0\n  }\n\n  protected override get formValue(): string | undefined {\n    return this.value || undefined\n  }\n\n  protected override get showClear(): boolean {\n    return this.clearable && this.hasValue && !this.disabled\n  }\n\n  /**\n   * Autocomplete is a search input with suggestions, not a picker — like Base\n   * UI's autocomplete it renders no dropdown chevron (its `AriaCombobox` has no\n   * `Trigger`). The list appears as you type, not on a toggle click.\n   */\n  protected override get showToggle(): boolean {\n    return false\n  }\n\n  /**\n   * The `aria-autocomplete` value for the inner input, mapping the `inline` +\n   * `external-filtering` axes onto the four ARIA values:\n   * - inline + internal filter → `both`\n   * - inline + external-filtering → `inline` (static list + ghost)\n   * - external-filtering (no inline) → `none` (static list, no ghost)\n   * - otherwise → `list` (internal filter, no ghost)\n   */\n  protected override get ariaAutocomplete(): 'list' | 'both' | 'inline' | 'none' {\n    if (this.inline) {\n      return this.externalFiltering ? 'inline' : 'both'\n    }\n    return this.externalFiltering ? 'none' : 'list'\n  }\n\n  /**\n   * Autocomplete renders no selection state — `aria-selected` is omitted\n   * (`optionAriaSelected` → nothing) and the check is never shown\n   * (`showCheck` → false) — so nothing is ever \"selected\".\n   */\n  protected override isSelected(): boolean {\n    return false\n  }\n\n  /**\n   * Autocomplete has no selection model, so the listbox does not advertise\n   * `aria-multiselectable` at all (the base's `'false'` would imply a single-\n   * select semantic it doesn't have).\n   */\n  protected override get ariaMultiselectable(): undefined {\n    return undefined\n  }\n\n  /** Autocomplete never shows the selected-check icon (it is not a select). */\n  protected override showCheck(): boolean {\n    return false\n  }\n\n  /** No selection model, so no leading check gutter (avoids indenting suggestions). */\n  protected override get rendersCheck(): boolean {\n    return false\n  }\n\n  /** Autocomplete options are completion aids, not selectable values — omit aria-selected. */\n  protected override optionAriaSelected(): typeof nothing {\n    return nothing\n  }\n\n  /** Autocomplete keeps its committed free-text query when the listbox closes. */\n  protected override onHide() {\n    // Intentionally empty: the free-text value is the query, so it is not\n    // discarded the way select mode's transient filter is.\n  }\n\n  /** Typing commits the typed text as the live value. */\n  protected override onInput(input: HTMLInputElement): void {\n    // Typing breaks any inline ghost suffix the keyboard had composed.\n    this.keyboardActive = false\n    // The typed text *is* the value, so it tracks the input live. `input` has\n    // already fired (in the base); `commit()` emits the live `change`.\n    this.value = input.value\n    this.commit()\n  }\n\n  /**\n   * Runs before the base's own key switch. Marks keyboard navigation (so the\n   * inline ghost may compose) and owns the ArrowRight/End inline-accept. After\n   * an accept the listbox is closed, so the base's own `End` branch (gated on\n   * `this.open`) is skipped; the base still performs the moves for the arrows\n   * and Home.\n   */\n  protected override onKeydown(e: KeyboardEvent): void {\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Home':\n        // The base performs the actual move (and opens a closed listbox); mark\n        // it as keyboard navigation so the ghost composes after it.\n        if (this.open) {\n          this.keyboardActive = true\n        }\n        break\n      case 'ArrowRight':\n      case 'End':\n        // Accept an inline ghost suffix: End always sits at the text end, and\n        // ArrowRight accepts when the selection already reaches the end. When the\n        // ghost suffix is selected, `selectionEnd` is the text length, so both\n        // cases collapse to \"is the selection at the end?\". A bare `End` (no\n        // ghost) falls through to the base's jump-to-last navigation, which we\n        // mark as keyboard nav so the ghost composes for the newly-active row.\n        if (this.inline && this.open && this.hasInlineGhost) {\n          const input = this.inputRef.value\n          const atEnd = !input || input.selectionEnd === input.value.length\n          if (atEnd) {\n            e.preventDefault()\n            this.acceptInline()\n            break\n          }\n        }\n        if (e.key === 'End' && this.open) {\n          this.keyboardActive = true\n        }\n        break\n      case 'Backspace':\n      case 'Delete':\n        // A deletion breaks any inline ghost suffix.\n        this.keyboardActive = false\n        break\n    }\n  }\n\n  protected override onMove(): void {\n    this.keyboardActive = true\n  }\n\n  /**\n   * Fully owns Enter when the listbox is open. An inline ghost or any\n   * highlighted option fills+commits its label; otherwise the typed text is\n   * already committed, so Enter just closes and does NOT preventDefault (the\n   * owning form may submit). Returns `true` so the base does no further handling.\n   */\n  protected override handleEnter(e: KeyboardEvent): boolean {\n    if (this.inline && this.hasInlineGhost && this.activeOption) {\n      e.preventDefault()\n      this.acceptInline()\n      return true\n    }\n\n    // A navigated (arrow-key) highlight always commits. `autoHighlight` only\n    // implicitly commits the first row when there is a query to complete — Base\n    // UI does not highlight index 0 on an empty query, so a bare Enter with no\n    // typed text just closes (and may submit the form).\n    if ((this.navigated || (this.autoHighlight && this.hasQuery)) && this.activeOption) {\n      e.preventDefault()\n      this.selectOption(this.activeOption)\n      return true\n    }\n\n    this.hide()\n    return true\n  }\n\n  /** Whether the user has typed/committed any free text to complete against. */\n  private get hasQuery(): boolean {\n    return this.filterQuery.length > 0\n  }\n\n  /** Pointer hover never composes an inline ghost (mirrors keyboard-vs-pointer). */\n  protected override onOptionHover(): void {\n    this.keyboardActive = false\n  }\n\n  /**\n   * Never silently commit an un-accepted inline suggestion: on blur drop the\n   * ghost suffix and restore the input to the typed query (the actual value).\n   */\n  protected override onBlur(): void {\n    if (this.inline && this.hasInlineGhost) {\n      this.revertInline()\n    }\n    this.keyboardActive = false\n  }\n\n  /**\n   * Lit binds the inner input's `.value` to the ghost-composed string, but the\n   * suffix selection has to be applied imperatively after the DOM update so\n   * continued typing overwrites it.\n   */\n  protected override afterUpdate(): void {\n    if (this.hasInlineGhost) {\n      const input = this.inputRef.value\n      if (input) {\n        input.setSelectionRange(this.inlineQuery.length, input.value.length)\n      }\n    }\n  }\n\n  /**\n   * Picking a suggestion is a completion aid: fill the input with its label and\n   * commit that label as the free-text value. No chips, no array, no toggle.\n   */\n  protected override selectOption(option: ComboboxOption): void {\n    if (option.disabled) {\n      return\n    }\n\n    // Remember the label so it survives the option leaving the result set.\n    this.labelCache.set(option.value, option.label)\n\n    this.keyboardActive = false\n    this.value = option.label\n    this.search = option.label\n    this.commit()\n    this.hide()\n    // Restore focus to the input without re-opening the listbox.\n    this.suppressFocusOpen = true\n    this.focus()\n    this.suppressFocusOpen = false\n  }\n\n  /** Commit the currently ghost-highlighted option's full label (inline mode). */\n  private acceptInline() {\n    const option = this.activeOption\n    if (!option) {\n      return\n    }\n    this.selectOption(option)\n  }\n\n  /**\n   * Drop the transient inline ghost suffix, restoring the input to the typed\n   * query (the actual committed `value`). Does not change `value`.\n   */\n  private revertInline() {\n    this.keyboardActive = false\n\n    const input = this.inputRef.value\n    if (input) {\n      input.value = this.value\n      // Collapse any lingering suffix selection to the end of the typed text.\n      input.setSelectionRange(this.value.length, this.value.length)\n    }\n  }\n\n  /** A new query supersedes any inline ghost from the previous one. */\n  protected override resetActiveIndex() {\n    super.resetActiveIndex()\n    this.keyboardActive = false\n  }\n\n  /** Clear the current value, firing `clear` then `change`. */\n  override clear() {\n    this.value = ''\n    this.search = ''\n    this.keyboardActive = false\n    this.dispatchEvent(new ComboboxClearEvent())\n    this.commit()\n    this.focus()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-autocomplete': Autocomplete\n  }\n}\n"],"names":["style","retagComboboxStyles","comboboxStyle","Autocomplete","ComboboxBase","constructor","this","value","inline","clearable","openOnFocus","localize","LocalizeController","keyboardActive","connectedCallback","super","injectLightDomStyles","filterQuery","inlineQuery","hasInlineGhost","open","option","activeOption","query","label","length","toLocaleLowerCase","startsWith","displayValue","slice","hasValue","formValue","undefined","showClear","disabled","showToggle","ariaAutocomplete","externalFiltering","isSelected","ariaMultiselectable","showCheck","rendersCheck","optionAriaSelected","nothing","onHide","onInput","input","commit","onKeydown","e","key","inputRef","selectionEnd","preventDefault","acceptInline","onMove","handleEnter","navigated","autoHighlight","hasQuery","selectOption","hide","onOptionHover","onBlur","revertInline","afterUpdate","setSelectionRange","labelCache","set","search","suppressFocusOpen","focus","resetActiveIndex","clear","dispatchEvent","ComboboxClearEvent","__decorate","property","attribute","prototype","reflect","type","Boolean","state","customElement"],"mappings":"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"}

package/lib/Avatar.js

@@ -1,2 +1,2 @@
-import{_ as a}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as t,html as i,nothing as o}from"lit";import{state as n,property as e,customElement as s}from"lit/decorators.js";import{o as l}from"./observe-D0n0zOfU.js";import{f as v}from"./fsm-Bq5jMQrK.js";import{s as c}from"./Component-DSU3Qp0O.js";import"./VisuallyHidden.js";import"./Icon.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const d=r`:host{--_n-avatar-color:var(--n-avatar-color, var(--n-color-text-weaker));--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-l));--_n-avatar-box-shadow:var(--n-avatar-box-shadow, none);--_n-avatar-text-color:var(--n-avatar-text-color, var(--n-color-text-on-accent));--_n-avatar-border-radius:var(--n-border-radius-circle);--_n-avatar-font-size:var(--n-font-size-xs);display:inline-flex;block-size:var(--_n-avatar-size);inline-size:var(--_n-avatar-size);line-height:var(--_n-avatar-size)}:host(:empty) .n-avatar-inner,:host(:not(:empty)) svg,:host([variant=square]) svg{display:none}:host(:empty){--_n-avatar-color:var(--n-avatar-color, var(--n-color-border))}.n-avatar{background:var(--_n-avatar-color);border-radius:var(--_n-avatar-border-radius);box-shadow:var(--_n-avatar-box-shadow);overflow:hidden;inline-size:100%;block-size:100%;display:grid;place-items:center;color:var(--_n-avatar-text-color);font-size:var(--_n-avatar-font-size);font-weight:var(--n-font-weight-active)}img,svg{inline-size:100%;block-size:auto;object-fit:cover}nord-icon{--_n-icon-size:var(--n-size-icon-s)}.n-loading{display:none}:host([size='s']){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xs) * 2));--_n-avatar-font-size:calc(var(--n-font-size-xs) / 1.1)}:host([size='s']) nord-icon{--_n-icon-size:var(--n-size-icon-xs)}:host([size='l']){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xl));--_n-avatar-font-size:var(--n-font-size-m)}:host([size='l']) nord-icon{--_n-icon-size:20px}:host([size=xl]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xl) + var(--n-size-icon-s)));--_n-avatar-font-size:var(--n-font-size-l)}:host([size=xl]) nord-icon{--_n-icon-size:28px}:host([size=xxl]){--_n-avatar-size:var(--n-avatar-size, var(--n-size-icon-xxl));--_n-avatar-font-size:var(--n-font-size-xxl)}:host([size=xxl]) nord-icon{--_n-icon-size:44px}:host([size=xxxl]){--_n-avatar-size:var(--n-avatar-size, calc(var(--n-size-icon-xxl) + var(--n-size-icon-xl)));--_n-avatar-font-size:var(--n-font-size-xxxl)}:host([size=xxxl]) nord-icon{--_n-icon-size:68px}:host([variant=square]){--_n-avatar-color:var(--n-avatar-color, var(--n-color-accent));--_n-avatar-box-shadow:var(--n-avatar-box-shadow, var(--n-box-shadow), 0 0 0 1px rgb(255, 255, 255, 0.6));--_n-avatar-border-radius:var(--n-border-radius)}:host([icon]){--_n-avatar-color:var(--n-avatar-color, var(--n-color-surface-lowered));--_n-avatar-text-color:var(--n-avatar-text-color, var(--n-color-text))}`,{transition:h}=v({initial:{"src-set":"loading"},loading:{load:"loaded",error:"initial","src-clear":"initial"},loaded:{"src-set":"loading","src-clear":"initial"}});let z=class extends t{constructor(){super(...arguments),this.state="initial",this.size="m",this.name="",this.variant="default"}render(){return i`<div class="n-avatar">${"initial"!==this.state?this.renderImage():o} ${"loaded"!==this.state?this.renderFallback():o}</div>`}handleSrcChange(){const a=this.src?"src-set":"src-clear";this.state=h(this.state,a)}renderImage(){return this.src?i`<slot hidden></slot><img class="n-${this.state}" src="${this.src}" @load="${this.handleLoad}" @error="${this.handleError}" alt="${this.name||""}">`:o}renderFallback(){return i`<nord-visually-hidden>${this.name}</nord-visually-hidden><div class="n-avatar-inner" aria-hidden="true"><slot></slot></div>${this.icon?i`<nord-icon name="${this.icon}"></nord-icon>`:i`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><rect fill="var(--_n-avatar-color)" height="27" rx="12" width="27" x="0" y="0"></rect><g fill="#fff" opacity=".7"><circle cx="13.5" cy="30" r="13"></circle><circle cx="13.5" cy="11" r="5"></circle></g></svg>`}`}handleLoad(){this.state=h(this.state,"load")}handleError(){this.state=h(this.state,"error")}};z.styles=[c,d],a([n()],z.prototype,"state",void 0),a([e({reflect:!0})],z.prototype,"size",void 0),a([e({reflect:!0})],z.prototype,"src",void 0),a([e({reflect:!0})],z.prototype,"name",void 0),a([e({reflect:!0})],z.prototype,"icon",void 0),a([e({reflect:!0})],z.prototype,"variant",void 0),a([l("src")],z.prototype,"handleSrcChange",null),z=a([s("nord-avatar")],z);var x=z;export{x as default};
+import{_ as a}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as t,html as i,nothing as o}from"lit";import{state as n,property as e,customElement as s}from"lit/decorators.js";import{o as l}from"./observe-D0n0zOfU.js";import{f as v}from"./fsm-Bq5jMQrK.js";import{s as c}from"./Component-BJ5O5n8k.js";import"./VisuallyHidden.js";import"./Icon.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const d=r`:host{--_n-avatar-color:var(--n-avatar-color,var(--n-color-text-weaker));--_n-avatar-size:var(--n-avatar-size,var(--n-size-icon-l));--_n-avatar-box-shadow:var(--n-avatar-box-shadow,none);--_n-avatar-text-color:var(--n-avatar-text-color,var(--n-color-text-on-accent));--_n-avatar-border-radius:var(--n-border-radius-circle);--_n-avatar-font-size:var(--n-font-size-xs);block-size:var(--_n-avatar-size);display:inline-flex;inline-size:var(--_n-avatar-size);line-height:var(--_n-avatar-size)}:host(:empty) .n-avatar-inner,:host(:not(:empty)) svg,:host([variant=square]) svg{display:none}:host(:empty){--_n-avatar-color:var(--n-avatar-color,var(--n-color-border))}.n-avatar{background:var(--_n-avatar-color);block-size:100%;border-radius:var(--_n-avatar-border-radius);box-shadow:var(--_n-avatar-box-shadow);color:var(--_n-avatar-text-color);display:grid;font-size:var(--_n-avatar-font-size);font-weight:var(--n-font-weight-active);inline-size:100%;overflow:hidden;place-items:center}img,svg{block-size:auto;inline-size:100%;object-fit:cover}nord-icon{--_n-icon-size:var(--n-size-icon-s)}.n-loading{display:none}:host([size=s]){--_n-avatar-size:var(--n-avatar-size,calc(var(--n-size-icon-xs)*2));--_n-avatar-font-size:calc(var(--n-font-size-xs)/1.1)}:host([size=s]) nord-icon{--_n-icon-size:var(--n-size-icon-xs)}:host([size=l]){--_n-avatar-size:var(--n-avatar-size,var(--n-size-icon-xl));--_n-avatar-font-size:var(--n-font-size-m)}:host([size=l]) nord-icon{--_n-icon-size:20px}:host([size=xl]){--_n-avatar-size:var(--n-avatar-size,calc(var(--n-size-icon-xl) + var(--n-size-icon-s)));--_n-avatar-font-size:var(--n-font-size-l)}:host([size=xl]) nord-icon{--_n-icon-size:28px}:host([size=xxl]){--_n-avatar-size:var(--n-avatar-size,var(--n-size-icon-xxl));--_n-avatar-font-size:var(--n-font-size-xxl)}:host([size=xxl]) nord-icon{--_n-icon-size:44px}:host([size=xxxl]){--_n-avatar-size:var(--n-avatar-size,calc(var(--n-size-icon-xxl) + var(--n-size-icon-xl)));--_n-avatar-font-size:var(--n-font-size-xxxl)}:host([size=xxxl]) nord-icon{--_n-icon-size:68px}:host([variant=square]){--_n-avatar-color:var(--n-avatar-color,var(--n-color-accent));--_n-avatar-box-shadow:var(--n-avatar-box-shadow,var(--n-box-shadow),0 0 0 1px #fff9);--_n-avatar-border-radius:var(--n-border-radius)}:host([icon]){--_n-avatar-color:var(--n-avatar-color,var(--n-color-surface-lowered));--_n-avatar-text-color:var(--n-avatar-text-color,var(--n-color-text))}`,{transition:h}=v({initial:{"src-set":"loading"},loading:{load:"loaded",error:"initial","src-clear":"initial"},loaded:{"src-set":"loading","src-clear":"initial"}});let z=class extends t{constructor(){super(...arguments),this.state="initial",this.size="m",this.name="",this.variant="default"}render(){return i`<div class="n-avatar">${"initial"!==this.state?this.renderImage():o} ${"loaded"!==this.state?this.renderFallback():o}</div>`}handleSrcChange(){const a=this.src?"src-set":"src-clear";this.state=h(this.state,a)}renderImage(){return this.src?i`<slot hidden></slot><img class="n-${this.state}" src="${this.src}" @load="${this.handleLoad}" @error="${this.handleError}" alt="${this.name||""}">`:o}renderFallback(){return i`<nord-visually-hidden>${this.name}</nord-visually-hidden><div class="n-avatar-inner" aria-hidden="true"><slot></slot></div>${this.icon?i`<nord-icon name="${this.icon}"></nord-icon>`:i`<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><rect fill="var(--_n-avatar-color)" height="27" rx="12" width="27" x="0" y="0"></rect><g fill="#fff" opacity=".7"><circle cx="13.5" cy="30" r="13"></circle><circle cx="13.5" cy="11" r="5"></circle></g></svg>`}`}handleLoad(){this.state=h(this.state,"load")}handleError(){this.state=h(this.state,"error")}};z.styles=[c,d],a([n()],z.prototype,"state",void 0),a([e({reflect:!0})],z.prototype,"size",void 0),a([e({reflect:!0})],z.prototype,"src",void 0),a([e({reflect:!0})],z.prototype,"name",void 0),a([e({reflect:!0})],z.prototype,"icon",void 0),a([e({reflect:!0})],z.prototype,"variant",void 0),a([l("src")],z.prototype,"handleSrcChange",null),z=a([s("nord-avatar")],z);var x=z;export{x as default};
 //# sourceMappingURL=Avatar.js.map

package/lib/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.ts"],"sourcesContent":["import type { States } from '../common/fsm.js'\nimport { html, LitElement, nothing } from 'lit'\n\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { fsm } from '../common/fsm.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Avatar.css'\nimport '../visually-hidden/VisuallyHidden.js'\nimport '../icon/Icon.js'\n\nconst { transition } = fsm({\n  initial: {\n    'src-set': 'loading',\n  },\n  loading: {\n    'load': 'loaded',\n    'error': 'initial',\n    'src-clear': 'initial',\n  },\n  loaded: {\n    'src-set': 'loading',\n    'src-clear': 'initial',\n  },\n})\n\n/**\n * Avatar is used for showing a thumbnail representation of a single user or entity.\n * Default avatar illustration is displayed when no src is specified.\n *\n * @status ready\n * @category image\n *\n * @cssprop [--n-avatar-color=var(--n-color-status-highlight)] - Controls the color of the avatar fallback, using [color tokens](/tokens/#color).\n * @cssprop [--n-avatar-size=var(--n-size-icon-l)] - Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).\n * @cssprop [--n-avatar-box-shadow=none] - Controls the box shadow for the avatar.\n * @cssprop [--n-avatar-text-color=var(--n-color-text-on-accent)] - Controls the color of the avatar’s text and icon, using [color tokens](/tokens/#color).\n */\n\n@customElement('nord-avatar')\nexport default class Avatar extends LitElement {\n  static styles = [componentStyle, style]\n\n  @state() private state: States<typeof transition> = 'initial'\n\n  /**\n   * The size of the avatar.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' = 'm'\n\n  /**\n   * The URL of the avatar image uploaded by the user.\n   */\n  @property({ reflect: true }) src?: string\n\n  /**\n   * The name of the person or entity.\n   */\n  @property({ reflect: true }) name: string = ''\n\n  /**\n   * The fallback icon.\n   */\n  @property({ reflect: true }) icon?: string\n\n  /**\n   * The style variant of the avatar.\n   */\n  @property({ reflect: true }) variant: 'default' | 'square' = 'default'\n\n  render() {\n    return html`\n      <div class=\"n-avatar\">\n        ${this.state !== 'initial' ? this.renderImage() : nothing}\n        ${this.state !== 'loaded' ? this.renderFallback() : nothing}\n      </div>\n    `\n  }\n\n  @observe('src')\n  protected handleSrcChange() {\n    const event = this.src ? 'src-set' : 'src-clear'\n    this.state = transition(this.state, event)\n  }\n\n  protected renderImage() {\n    return this.src\n      ? html`\n          <slot hidden></slot>\n          <img\n            class=\"n-${this.state}\"\n            src=${this.src}\n            @load=${this.handleLoad}\n            @error=${this.handleError}\n            alt=${this.name || ''}\n          />\n        `\n      : nothing\n  }\n\n  protected renderFallback() {\n    return html`\n      <nord-visually-hidden>${this.name}</nord-visually-hidden>\n      <div class=\"n-avatar-inner\" aria-hidden=\"true\">\n        <slot></slot>\n      </div>\n      ${this.icon\n        ? html`<nord-icon name=\"${this.icon}\"></nord-icon>`\n        : html`\n            <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 27 27\">\n              <rect fill=\"var(--_n-avatar-color)\" height=\"27\" rx=\"12\" width=\"27\" x=\"0\" y=\"0\"></rect>\n              <g fill=\"#fff\" opacity=\".7\">\n                <circle cx=\"13.5\" cy=\"30\" r=\"13\"></circle>\n                <circle cx=\"13.5\" cy=\"11\" r=\"5\"></circle>\n              </g>\n            </svg>\n          `}\n    `\n  }\n\n  private handleLoad() {\n    this.state = transition(this.state, 'load')\n  }\n\n  private handleError() {\n    this.state = transition(this.state, 'error')\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-avatar': Avatar\n  }\n}\n"],"names":["transition","fsm","initial","loading","load","error","loaded","Avatar","LitElement","constructor","this","state","size","name","variant","render","html","renderImage","nothing","renderFallback","handleSrcChange","event","src","handleLoad","handleError","icon","styles","componentStyle","style","__decorate","prototype","property","reflect","observe","customElement"],"mappings":"i5FAWMA,WAAEA,GAAeC,EAAI,CACzBC,QAAS,CACP,UAAW,WAEbC,QAAS,CACPC,KAAQ,SACRC,MAAS,UACT,YAAa,WAEfC,OAAQ,CACN,UAAW,UACX,YAAa,aAkBF,IAAMC,EAAN,cAAqBC,EAArB,WAAAC,uBAGIC,KAAKC,MAA8B,UAKvBD,KAAIE,KAA4C,IAUhDF,KAAIG,KAAW,GAUfH,KAAOI,QAAyB,SA2D9D,CAzDC,MAAAC,GACE,OAAOC,CAAI,yBAEU,YAAfN,KAAKC,MAAsBD,KAAKO,cAAgBC,KACjC,WAAfR,KAAKC,MAAqBD,KAAKS,iBAAmBD,SAGzD,CAGS,eAAAE,GACR,MAAMC,EAAQX,KAAKY,IAAM,UAAY,YACrCZ,KAAKC,MAAQX,EAAWU,KAAKC,MAAOU,EACrC,CAES,WAAAJ,GACR,OAAOP,KAAKY,IACRN,CAAI,qCAGWN,KAAKC,eACVD,KAAKY,eACHZ,KAAKa,uBACJb,KAAKc,qBACRd,KAAKG,MAAQ,OAGvBK,CACL,CAES,cAAAC,GACR,OAAOH,CAAI,yBACeN,KAAKG,gGAI3BH,KAAKe,KACHT,CAAI,oBAAoBN,KAAKe,qBAC7BT,CAAI,kSAUX,CAEO,UAAAO,GACNb,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,OACrC,CAEO,WAAAa,GACNd,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,QACrC,GArFMJ,EAAAmB,OAAS,CAACC,EAAgBC,GAEhBC,EAAA,CAAhBlB,KAA4DJ,EAAAuB,UAAA,aAAA,GAKhCD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAA2DzB,EAAAuB,UAAA,YAAA,GAKnDD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAoBzB,EAAAuB,UAAA,WAAA,GAKZD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAyBzB,EAAAuB,UAAA,YAAA,GAKjBD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAqBzB,EAAAuB,UAAA,YAAA,GAKbD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAiDzB,EAAAuB,UAAA,eAAA,GAY5DD,EAAA,CADTI,EAAQ,QAIR1B,EAAAuB,UAAA,kBAAA,MA3CkBvB,EAAMsB,EAAA,CAD1BK,EAAc,gBACM3B,SAAAA"}
+{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.ts"],"sourcesContent":["import type { States } from '../common/fsm.js'\nimport { html, LitElement, nothing } from 'lit'\n\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { fsm } from '../common/fsm.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Avatar.css'\nimport '../visually-hidden/VisuallyHidden.js'\nimport '../icon/Icon.js'\n\nconst { transition } = fsm({\n  initial: {\n    'src-set': 'loading',\n  },\n  loading: {\n    'load': 'loaded',\n    'error': 'initial',\n    'src-clear': 'initial',\n  },\n  loaded: {\n    'src-set': 'loading',\n    'src-clear': 'initial',\n  },\n})\n\n/**\n * Avatar is used for showing a thumbnail representation of a single user or entity.\n * Default avatar illustration is displayed when no src is specified.\n *\n * @status ready\n * @category image\n *\n * @cssprop [--n-avatar-color=var(--n-color-status-highlight)] - Controls the color of the avatar fallback, using [color tokens](/tokens/#color).\n * @cssprop [--n-avatar-size=var(--n-size-icon-l)] - Controls the size of the avatar, using [icon sizing tokens](/tokens/#size).\n * @cssprop [--n-avatar-box-shadow=none] - Controls the box shadow for the avatar.\n * @cssprop [--n-avatar-text-color=var(--n-color-text-on-accent)] - Controls the color of the avatar’s text and icon, using [color tokens](/tokens/#color).\n */\n\n@customElement('nord-avatar')\nexport default class Avatar extends LitElement {\n  static styles = [componentStyle, style]\n\n  @state() private state: States<typeof transition> = 'initial'\n\n  /**\n   * The size of the avatar.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' = 'm'\n\n  /**\n   * The URL of the avatar image uploaded by the user.\n   */\n  @property({ reflect: true }) src?: string\n\n  /**\n   * The name of the person or entity.\n   */\n  @property({ reflect: true }) name: string = ''\n\n  /**\n   * The fallback icon.\n   */\n  @property({ reflect: true }) icon?: string\n\n  /**\n   * The style variant of the avatar.\n   */\n  @property({ reflect: true }) variant: 'default' | 'square' = 'default'\n\n  render() {\n    return html`\n      <div class=\"n-avatar\">\n        ${this.state !== 'initial' ? this.renderImage() : nothing}\n        ${this.state !== 'loaded' ? this.renderFallback() : nothing}\n      </div>\n    `\n  }\n\n  @observe('src')\n  protected handleSrcChange() {\n    const event = this.src ? 'src-set' : 'src-clear'\n    this.state = transition(this.state, event)\n  }\n\n  protected renderImage() {\n    return this.src\n      ? html`\n          <slot hidden></slot>\n          <img\n            class=\"n-${this.state}\"\n            src=${this.src}\n            @load=${this.handleLoad}\n            @error=${this.handleError}\n            alt=${this.name || ''}\n          />\n        `\n      : nothing\n  }\n\n  protected renderFallback() {\n    return html`\n      <nord-visually-hidden>${this.name}</nord-visually-hidden>\n      <div class=\"n-avatar-inner\" aria-hidden=\"true\">\n        <slot></slot>\n      </div>\n      ${this.icon\n        ? html`<nord-icon name=\"${this.icon}\"></nord-icon>`\n        : html`\n            <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 27 27\">\n              <rect fill=\"var(--_n-avatar-color)\" height=\"27\" rx=\"12\" width=\"27\" x=\"0\" y=\"0\"></rect>\n              <g fill=\"#fff\" opacity=\".7\">\n                <circle cx=\"13.5\" cy=\"30\" r=\"13\"></circle>\n                <circle cx=\"13.5\" cy=\"11\" r=\"5\"></circle>\n              </g>\n            </svg>\n          `}\n    `\n  }\n\n  private handleLoad() {\n    this.state = transition(this.state, 'load')\n  }\n\n  private handleError() {\n    this.state = transition(this.state, 'error')\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-avatar': Avatar\n  }\n}\n"],"names":["transition","fsm","initial","loading","load","error","loaded","Avatar","LitElement","constructor","this","state","size","name","variant","render","html","renderImage","nothing","renderFallback","handleSrcChange","event","src","handleLoad","handleError","icon","styles","componentStyle","style","__decorate","prototype","property","reflect","observe","customElement"],"mappings":"o2FAWMA,WAAEA,GAAeC,EAAI,CACzBC,QAAS,CACP,UAAW,WAEbC,QAAS,CACPC,KAAQ,SACRC,MAAS,UACT,YAAa,WAEfC,OAAQ,CACN,UAAW,UACX,YAAa,aAkBF,IAAMC,EAAN,cAAqBC,EAArB,WAAAC,uBAGIC,KAAKC,MAA8B,UAKvBD,KAAIE,KAA4C,IAUhDF,KAAIG,KAAW,GAUfH,KAAOI,QAAyB,SA2D9D,CAzDC,MAAAC,GACE,OAAOC,CAAI,yBAEU,YAAfN,KAAKC,MAAsBD,KAAKO,cAAgBC,KACjC,WAAfR,KAAKC,MAAqBD,KAAKS,iBAAmBD,SAGzD,CAGS,eAAAE,GACR,MAAMC,EAAQX,KAAKY,IAAM,UAAY,YACrCZ,KAAKC,MAAQX,EAAWU,KAAKC,MAAOU,EACrC,CAES,WAAAJ,GACR,OAAOP,KAAKY,IACRN,CAAI,qCAGWN,KAAKC,eACVD,KAAKY,eACHZ,KAAKa,uBACJb,KAAKc,qBACRd,KAAKG,MAAQ,OAGvBK,CACL,CAES,cAAAC,GACR,OAAOH,CAAI,yBACeN,KAAKG,gGAI3BH,KAAKe,KACHT,CAAI,oBAAoBN,KAAKe,qBAC7BT,CAAI,kSAUX,CAEO,UAAAO,GACNb,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,OACrC,CAEO,WAAAa,GACNd,KAAKC,MAAQX,EAAWU,KAAKC,MAAO,QACrC,GArFMJ,EAAAmB,OAAS,CAACC,EAAgBC,GAEhBC,EAAA,CAAhBlB,KAA4DJ,EAAAuB,UAAA,aAAA,GAKhCD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAA2DzB,EAAAuB,UAAA,YAAA,GAKnDD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAoBzB,EAAAuB,UAAA,WAAA,GAKZD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAyBzB,EAAAuB,UAAA,YAAA,GAKjBD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAqBzB,EAAAuB,UAAA,YAAA,GAKbD,EAAA,CAA5BE,EAAS,CAAEC,SAAS,KAAiDzB,EAAAuB,UAAA,eAAA,GAY5DD,EAAA,CADTI,EAAQ,QAIR1B,EAAAuB,UAAA,kBAAA,MA3CkBvB,EAAMsB,EAAA,CAD1BK,EAAc,gBACM3B,SAAAA"}

package/lib/Badge.js

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as n,html as a}from"lit";import{property as t,customElement as e}from"lit/decorators.js";import{s}from"./Component-DSU3Qp0O.js";const c=r`:host{--_n-badge-background-color:var(--n-color-text-neutral);--_n-badge-chip-color:var(--n-color-status-neutral-weak);--_n-badge-border-color:var(--n-color-border-neutral);display:inline;vertical-align:middle;line-height:var(--n-line-height-tight)}.n-badge{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;border-radius:var(--n-border-radius-pill);border:1px solid var(--_n-badge-border-color);background:var(--_n-badge-chip-color);font-size:var(--n-font-size-s);font-family:var(--n-font-family);font-weight:var(--n-font-weight);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height);letter-spacing:0;padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s);color:var(--_n-badge-background-color);gap:var(--n-space-xs);align-items:center;display:inline-flex;white-space:nowrap;position:relative}:host(:is([variant=success],[type=success])){--_n-badge-chip-color:var(--n-color-status-success-weak);--_n-badge-border-color:var(--n-color-border-success);--_n-badge-background-color:var(--n-color-text-success)}:host(:is([variant=warning],[type=warning])){--_n-badge-chip-color:var(--n-color-status-warning-weak);--_n-badge-border-color:var(--n-color-border-warning);--_n-badge-background-color:var(--n-color-text-warning)}:host(:is([variant=highlight],[type=highlight])){--_n-badge-chip-color:var(--n-color-status-highlight-weak);--_n-badge-border-color:var(--n-color-border-highlight);--_n-badge-background-color:var(--n-color-text-highlight)}:host(:is([variant=info],[type=info],[type=progress])){--_n-badge-chip-color:var(--n-color-status-info-weak);--_n-badge-border-color:var(--n-color-border-info);--_n-badge-background-color:var(--n-color-text-info)}:host(:is([variant=danger],[type=danger])){--_n-badge-chip-color:var(--n-color-status-danger-weak);--_n-badge-border-color:var(--n-color-border-danger);--_n-badge-background-color:var(--n-color-text-danger)}:host([strong]){--_n-badge-chip-color:var(--n-color-status-neutral);--_n-badge-border-color:var(--n-color-border-neutral);--_n-badge-background-color:var(--n-color-text-neutral-strong)}:host(:is([variant=success],[type=success])[strong]){--_n-badge-chip-color:var(--n-color-status-success);--_n-badge-border-color:var(--n-color-status-success);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=warning],[type=warning])[strong]){--_n-badge-chip-color:var(--n-color-status-warning);--_n-badge-border-color:var(--n-color-status-warning);--_n-badge-background-color:var(--n-color-text-warning-strong)}:host(:is([variant=highlight],[type=highlight])[strong]){--_n-badge-chip-color:var(--n-color-status-highlight);--_n-badge-border-color:var(--n-color-status-highlight);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=info],[type=info],[type=progress])[strong]){--_n-badge-chip-color:var(--n-color-status-info);--_n-badge-border-color:var(--n-color-status-info);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=danger],[type=danger])[strong]){--_n-badge-chip-color:var(--n-color-status-danger);--_n-badge-border-color:var(--n-color-status-danger);--_n-badge-background-color:var(--n-color-text-on-accent)}::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-xxs);transform:translateY(-.5px)}`;let i=class extends n{constructor(){super(...arguments),this.strong=!1}render(){return a`<span class="n-badge"><slot name="icon"></slot><slot></slot></span>`}};i.styles=[s,c],o([t({reflect:!0})],i.prototype,"type",void 0),o([t({reflect:!0})],i.prototype,"variant",void 0),o([t({reflect:!0,type:Boolean})],i.prototype,"strong",void 0),i=o([e("nord-badge")],i);var l=i;export{l as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as n,html as a}from"lit";import{property as t,customElement as e}from"lit/decorators.js";import{s}from"./Component-BJ5O5n8k.js";const c=r`:host{--_n-badge-background-color:var(--n-color-text-neutral);--_n-badge-chip-color:var(--n-color-status-neutral-weak);--_n-badge-border-color:var(--n-color-border-neutral);display:inline;line-height:var(--n-line-height-tight);vertical-align:middle}.n-badge{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;align-items:center;background:var(--_n-badge-chip-color);border:1px solid var(--_n-badge-border-color);border-radius:var(--n-border-radius-pill);color:var(--_n-badge-background-color);display:inline-flex;font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight);gap:var(--n-space-xs);letter-spacing:0;line-height:var(--n-line-height);padding-inline-end:var(--n-space-s);padding-inline-start:var(--n-space-s);position:relative;white-space:nowrap}:host(:is([variant=success],[type=success])){--_n-badge-chip-color:var(--n-color-status-success-weak);--_n-badge-border-color:var(--n-color-border-success);--_n-badge-background-color:var(--n-color-text-success)}:host(:is([variant=warning],[type=warning])){--_n-badge-chip-color:var(--n-color-status-warning-weak);--_n-badge-border-color:var(--n-color-border-warning);--_n-badge-background-color:var(--n-color-text-warning)}:host(:is([variant=highlight],[type=highlight])){--_n-badge-chip-color:var(--n-color-status-highlight-weak);--_n-badge-border-color:var(--n-color-border-highlight);--_n-badge-background-color:var(--n-color-text-highlight)}:host(:is([variant=info],[type=info],[type=progress])){--_n-badge-chip-color:var(--n-color-status-info-weak);--_n-badge-border-color:var(--n-color-border-info);--_n-badge-background-color:var(--n-color-text-info)}:host(:is([variant=danger],[type=danger])){--_n-badge-chip-color:var(--n-color-status-danger-weak);--_n-badge-border-color:var(--n-color-border-danger);--_n-badge-background-color:var(--n-color-text-danger)}:host([strong]){--_n-badge-chip-color:var(--n-color-status-neutral);--_n-badge-border-color:var(--n-color-border-neutral);--_n-badge-background-color:var(--n-color-text-neutral-strong)}:host(:is([variant=success],[type=success])[strong]){--_n-badge-chip-color:var(--n-color-status-success);--_n-badge-border-color:var(--n-color-status-success);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=warning],[type=warning])[strong]){--_n-badge-chip-color:var(--n-color-status-warning);--_n-badge-border-color:var(--n-color-status-warning);--_n-badge-background-color:var(--n-color-text-warning-strong)}:host(:is([variant=highlight],[type=highlight])[strong]){--_n-badge-chip-color:var(--n-color-status-highlight);--_n-badge-border-color:var(--n-color-status-highlight);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=info],[type=info],[type=progress])[strong]){--_n-badge-chip-color:var(--n-color-status-info);--_n-badge-border-color:var(--n-color-status-info);--_n-badge-background-color:var(--n-color-text-on-accent)}:host(:is([variant=danger],[type=danger])[strong]){--_n-badge-chip-color:var(--n-color-status-danger);--_n-badge-border-color:var(--n-color-status-danger);--_n-badge-background-color:var(--n-color-text-on-accent)}::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-xxs);transform:translateY(-.5px)}`;let i=class extends n{constructor(){super(...arguments),this.strong=!1}render(){return a`<span class="n-badge"><slot name="icon"></slot><slot></slot></span>`}};i.styles=[s,c],o([t({reflect:!0})],i.prototype,"type",void 0),o([t({reflect:!0})],i.prototype,"variant",void 0),o([t({reflect:!0,type:Boolean})],i.prototype,"strong",void 0),i=o([e("nord-badge")],i);var l=i;export{l as default};
 //# sourceMappingURL=Badge.js.map

package/lib/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../src/badge/Badge.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Badge.css'\n\n/**\n * Badges are used to inform users of the status of an object\n * or of an action that’s been taken. Commonly used in tabular\n * data to indicate status.\n *\n * @status ready\n * @category text\n * @slot - The badge content.\n * @slot icon - Used to place an icon at the start of badge.\n */\n@customElement('nord-badge')\nexport default class Badge extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The type of badge.\n   * Determines the background color of the badge.\n   * @deprecated Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.\n   * @default \"neutral\"\n   */\n  @property({ reflect: true }) type?: 'warning' | 'success' | 'danger' | 'highlight' | 'info' | 'neutral' | 'progress'\n\n  /**\n   * The style variant of the badge.\n   * Determines the background color of the badge.\n   * @default \"neutral\"\n   */\n  @property({ reflect: true }) variant?: 'warning' | 'success' | 'danger' | 'highlight' | 'neutral' | 'info'\n\n  /**\n   * Strong badges are a secondary style for badges.\n   * They provide more visual prominence and emphasize them.\n   */\n  @property({ reflect: true, type: Boolean }) strong = false\n\n  render() {\n    return html`\n      <span class=\"n-badge\">\n        <slot name=\"icon\"></slot>\n        <slot></slot>\n      </span>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-badge': Badge\n  }\n}\n"],"names":["Badge","LitElement","constructor","this","strong","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"+6GAiBe,IAAMA,EAAN,cAAoBC,EAApB,WAAAC,uBAsB+BC,KAAMC,QAAG,CAUtD,CARC,MAAAC,GACE,OAAOC,CAAI,qEAMZ,GA9BMN,EAAAO,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA+FZ,EAAAa,UAAA,YAAA,GAOvFH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqFZ,EAAAa,UAAA,eAAA,GAM9DH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyBf,EAAAa,UAAA,cAAA,GAtBvCb,EAAKU,EAAA,CADzBM,EAAc,eACMhB,SAAAA"}
+{"version":3,"file":"Badge.js","sources":["../src/badge/Badge.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Badge.css'\n\n/**\n * Badges are used to inform users of the status of an object\n * or of an action that’s been taken. Commonly used in tabular\n * data to indicate status.\n *\n * @status ready\n * @category feedback\n * @slot - The badge content.\n * @slot icon - Used to place an icon at the start of badge.\n */\n@customElement('nord-badge')\nexport default class Badge extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The type of badge.\n   * Determines the background color of the badge.\n   * @deprecated Use `variant` instead. If you previously used `\"progress\"`, use `\"info\"` instead.\n   * @default \"neutral\"\n   */\n  @property({ reflect: true }) type?: 'warning' | 'success' | 'danger' | 'highlight' | 'info' | 'neutral' | 'progress'\n\n  /**\n   * The style variant of the badge.\n   * Determines the background color of the badge.\n   * @default \"neutral\"\n   */\n  @property({ reflect: true }) variant?: 'warning' | 'success' | 'danger' | 'highlight' | 'neutral' | 'info'\n\n  /**\n   * Strong badges are a secondary style for badges.\n   * They provide more visual prominence and emphasize them.\n   */\n  @property({ reflect: true, type: Boolean }) strong = false\n\n  render() {\n    return html`\n      <span class=\"n-badge\">\n        <slot name=\"icon\"></slot>\n        <slot></slot>\n      </span>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-badge': Badge\n  }\n}\n"],"names":["Badge","LitElement","constructor","this","strong","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"+6GAiBe,IAAMA,EAAN,cAAoBC,EAApB,WAAAC,uBAsB+BC,KAAMC,QAAG,CAUtD,CARC,MAAAC,GACE,OAAOC,CAAI,qEAMZ,GA9BMN,EAAAO,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA+FZ,EAAAa,UAAA,YAAA,GAOvFH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqFZ,EAAAa,UAAA,eAAA,GAM9DH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyBf,EAAAa,UAAA,cAAA,GAtBvCb,EAAKU,EAAA,CADzBM,EAAc,eACMhB,SAAAA"}

package/lib/Banner.js

@@ -1,2 +1,2 @@
-import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as o,html as e}from"lit";import{property as a,customElement as t}from"lit/decorators.js";import{s as c}from"./Component-DSU3Qp0O.js";import s from"./Icon.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const i="interface-checked-circle";var l=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.3 6.38 1.49 1.33-5.32 5.95c-.18.21-.44.33-.72.33 0 0-.02 0-.03 0-.26 0-.52-.1-.71-.29l-2.86-2.86 1.41-1.41 2.12 2.12 4.61-5.17zm6.7 3.62c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8z" fill="currentColor"/></svg>',tags:"nordicon interface circle round checked checkmark ready done success ok",title:i});const d="interface-help";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.15 15c0 .64-.51 1.15-1.15 1.15s-1.15-.51-1.15-1.15.51-1.15 1.15-1.15 1.15.51 1.15 1.15zm8.85-5c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8zm-8-5.5c-1.93 0-3.5 1.57-3.5 3.5h2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5c-.55 0-1 .45-1 1v1.5h2v-.65c1.44-.43 2.5-1.77 2.5-3.35 0-1.93-1.57-3.5-3.5-3.5z" fill="currentColor"/></svg>',tags:"nordicon interface help speech bubble support circle round question mark tooltip info",title:d});const b="interface-info";var m=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m8.7 6c0-.72.58-1.3 1.3-1.3s1.3.58 1.3 1.3-.58 1.3-1.3 1.3-1.3-.58-1.3-1.3zm-8.7 4c0-5.51 4.49-10 10-10s10 4.49 10 10-4.49 10-10 10-10-4.49-10-10zm2 0c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8-8 3.59-8 8zm7 5h2v-6h-2z" fill="currentColor"/></svg>',tags:"nordicon interface info circle round alert notice information",title:b});const g="interface-warning";var p=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.1502 13c0 .64-.51 1.15-1.15 1.15-.63998 0-1.14998-.51-1.14998-1.15s.51-1.15 1.14998-1.15c.64 0 1.15.51 1.15 1.15zm-2.14998-2h1.99998v-5h-1.99998zm10.51998 6.01c-.36.62-1.01.99-1.73.99h-15.58998c-.72 0-1.360004-.37-1.730004-.99-.36-.62-.37-1.36-.02-1.99l7.800004-13.95c.36-.629997 1.03-1.0199969 1.74998-1.0199969.72 0 1.39.3899999 1.75 1.0199969l7.8 13.95c.35.63.34 1.37-.02 1.99zm-1.72-1.01-7.8-13.95-7.79998 13.95z" fill="currentColor"/></svg>',tags:"nordicon interface warning exclamation mark triangle shape alert error sign",title:g});const u=n`:host{--_n-banner-box-shadow:var(--n-banner-box-shadow, none);--_n-banner-border-radius:var(--n-banner-border-radius, var(--n-border-radius));--_n-banner-color:var(--n-color-text-info);--_n-banner-background:var(--n-color-status-info-weak);--_n-banner-border-color:var(--n-color-border-info)}.n-banner{background:var(--_n-banner-background);border:1px solid var(--_n-banner-border-color);border-radius:var(--_n-banner-border-radius);box-shadow:var(--_n-banner-box-shadow);padding:calc(var(--n-space-m)/ 1.25) var(--n-space-m);margin:0;inline-size:100%}.n-banner-content{inline-size:calc(100% - calc(var(--n-space-m) * 2));color:var(--_n-banner-color)}nord-icon{transform:translateY(2px) translateX(2px);color:var(--_n-banner-color)}::slotted(a){color:var(--_n-banner-color)!important;text-decoration:underline!important}::slotted(p){color:var(--_n-banner-color)!important;margin:0!important}:host([variant=success]){--_n-banner-color:var(--n-color-text-success);--_n-banner-background:var(--n-color-status-success-weak);--_n-banner-border-color:var(--n-color-border-success)}:host([variant=danger]){--_n-banner-color:var(--n-color-text-danger);--_n-banner-background:var(--n-color-status-danger-weak);--_n-banner-border-color:var(--n-color-border-danger)}:host([variant=warning]){--_n-banner-color:var(--n-color-text-warning);--_n-banner-background:var(--n-color-status-warning-weak);--_n-banner-border-color:var(--n-color-border-warning)}`;s.registerIcon(v),s.registerIcon(p),s.registerIcon(m),s.registerIcon(l);const f={warning:d,danger:g,info:b,success:i};let _=class extends o{constructor(){super(...arguments),this.variant="info"}render(){const r=f[this.variant]||f.info;return e`<div class="n-banner" role="alert"><nord-stack align-items="start" direction="horizontal"><nord-icon name="${r}" size="m"></nord-icon><div class="n-banner-content"><slot></slot></div></nord-stack></div>`}};_.styles=[c,u],r([a({reflect:!0})],_.prototype,"variant",void 0),_=r([t("nord-banner")],_);var w=_;export{w as default};
+import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as o,html as e,nothing as a}from"lit";import{property as t,customElement as s}from"lit/decorators.js";import{S as c}from"./SlotController-Z6eG7LSZ.js";import{s as i}from"./Component-BJ5O5n8k.js";import l from"./Icon.js";import"./Stack.js";import"./EventController-BBOmvfLa.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const d="interface-checked-circle";var v=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m13.3 6.38 1.49 1.33-5.32 5.95c-.18.21-.44.33-.72.33 0 0-.02 0-.03 0-.26 0-.52-.1-.71-.29l-2.86-2.86 1.41-1.41 2.12 2.12 4.61-5.17zm6.7 3.62c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8z" fill="currentColor"/></svg>',tags:"nordicon interface circle round checked checkmark ready done success ok",title:d});const b="interface-help";var m=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.15 15c0 .64-.51 1.15-1.15 1.15s-1.15-.51-1.15-1.15.51-1.15 1.15-1.15 1.15.51 1.15 1.15zm8.85-5c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8zm-8-5.5c-1.93 0-3.5 1.57-3.5 3.5h2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5c-.55 0-1 .45-1 1v1.5h2v-.65c1.44-.43 2.5-1.77 2.5-3.35 0-1.93-1.57-3.5-3.5-3.5z" fill="currentColor"/></svg>',tags:"nordicon interface help speech bubble support circle round question mark tooltip info",title:b});const g="interface-info";var p=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m8.7 6c0-.72.58-1.3 1.3-1.3s1.3.58 1.3 1.3-.58 1.3-1.3 1.3-1.3-.58-1.3-1.3zm-8.7 4c0-5.51 4.49-10 10-10s10 4.49 10 10-4.49 10-10 10-10-4.49-10-10zm2 0c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8-8 3.59-8 8zm7 5h2v-6h-2z" fill="currentColor"/></svg>',tags:"nordicon interface info circle round alert notice information",title:g});const f="interface-warning";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.1502 13c0 .64-.51 1.15-1.15 1.15-.63998 0-1.14998-.51-1.14998-1.15s.51-1.15 1.14998-1.15c.64 0 1.15.51 1.15 1.15zm-2.14998-2h1.99998v-5h-1.99998zm10.51998 6.01c-.36.62-1.01.99-1.73.99h-15.58998c-.72 0-1.360004-.37-1.730004-.99-.36-.62-.37-1.36-.02-1.99l7.800004-13.95c.36-.629997 1.03-1.0199969 1.74998-1.0199969.72 0 1.39.3899999 1.75 1.0199969l7.8 13.95c.35.63.34 1.37-.02 1.99zm-1.72-1.01-7.8-13.95-7.79998 13.95z" fill="currentColor"/></svg>',tags:"nordicon interface warning exclamation mark triangle shape alert error sign",title:f});const h=n`:host{--_n-banner-box-shadow:var(--n-banner-box-shadow,none);--_n-banner-border-radius:var(--n-banner-border-radius,var(--n-border-radius));--_n-banner-color:var(--n-color-text-info);--_n-banner-background:var(--n-color-status-info-weak);--_n-banner-border-color:var(--n-color-border-info)}.n-banner{background:var(--_n-banner-background);border:1px solid var(--_n-banner-border-color);border-radius:var(--_n-banner-border-radius);box-shadow:var(--_n-banner-box-shadow);inline-size:100%;margin:0;padding:calc(var(--n-space-m)/1.25) var(--n-space-m)}.n-banner-content{color:var(--_n-banner-color);flex:1;min-inline-size:0}.n-banner-actions{align-items:center;display:flex;flex-shrink:0;gap:var(--n-space-s)}nord-icon{color:var(--_n-banner-color);transform:translateY(2px) translateX(2px)}::slotted(a){color:var(--_n-banner-color)!important;text-decoration:underline!important}::slotted(p){color:var(--_n-banner-color)!important;margin:0!important}:host([variant=success]){--_n-banner-color:var(--n-color-text-success);--_n-banner-background:var(--n-color-status-success-weak);--_n-banner-border-color:var(--n-color-border-success)}:host([variant=danger]){--_n-banner-color:var(--n-color-text-danger);--_n-banner-background:var(--n-color-status-danger-weak);--_n-banner-border-color:var(--n-color-border-danger)}:host([variant=warning]){--_n-banner-color:var(--n-color-text-warning);--_n-banner-background:var(--n-color-status-warning-weak);--_n-banner-border-color:var(--n-color-border-warning)}`;l.registerIcon(m),l.registerIcon(u),l.registerIcon(p),l.registerIcon(v);const _={warning:b,danger:f,info:g,success:d};let w=class extends o{constructor(){super(...arguments),this.variant="info",this.actionsSlot=new c(this,"actions")}render(){const r=_[this.variant]||_.info;return e`<div class="n-banner" role="alert"><nord-stack align-items="start" direction="horizontal"><nord-icon name="${r}" size="m"></nord-icon><div class="n-banner-content"><slot></slot></div>${this.actionsSlot.hasContent?e`<div class="n-banner-actions"><slot name="actions"></slot></div>`:a}</nord-stack></div>`}};w.styles=[i,h],r([t({reflect:!0})],w.prototype,"variant",void 0),w=r([s("nord-banner")],w);var x=w;export{x as default};
 //# sourceMappingURL=Banner.js.map

package/lib/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../icons/lib/assets/interface-checked-circle.js","../../icons/lib/assets/interface-help.js","../../icons/lib/assets/interface-info.js","../../icons/lib/assets/interface-warning.js","../src/banner/Banner.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.3 6.38 1.49 1.33-5.32 5.95c-.18.21-.44.33-.72.33 0 0-.02 0-.03 0-.26 0-.52-.1-.71-.29l-2.86-2.86 1.41-1.41 2.12 2.12 4.61-5.17zm6.7 3.62c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-checked-circle\";\nexport const tags =\n  \"nordicon interface circle round checked checkmark ready done success ok\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.15 15c0 .64-.51 1.15-1.15 1.15s-1.15-.51-1.15-1.15.51-1.15 1.15-1.15 1.15.51 1.15 1.15zm8.85-5c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8zm-8-5.5c-1.93 0-3.5 1.57-3.5 3.5h2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5c-.55 0-1 .45-1 1v1.5h2v-.65c1.44-.43 2.5-1.77 2.5-3.35 0-1.93-1.57-3.5-3.5-3.5z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-help\";\nexport const tags =\n  \"nordicon interface help speech bubble support circle round question mark tooltip info\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m8.7 6c0-.72.58-1.3 1.3-1.3s1.3.58 1.3 1.3-.58 1.3-1.3 1.3-1.3-.58-1.3-1.3zm-8.7 4c0-5.51 4.49-10 10-10s10 4.49 10 10-4.49 10-10 10-10-4.49-10-10zm2 0c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8-8 3.59-8 8zm7 5h2v-6h-2z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-info\";\nexport const tags =\n  \"nordicon interface info circle round alert notice information\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.1502 13c0 .64-.51 1.15-1.15 1.15-.63998 0-1.14998-.51-1.14998-1.15s.51-1.15 1.14998-1.15c.64 0 1.15.51 1.15 1.15zm-2.14998-2h1.99998v-5h-1.99998zm10.51998 6.01c-.36.62-1.01.99-1.73.99h-15.58998c-.72 0-1.360004-.37-1.730004-.99-.36-.62-.37-1.36-.02-1.99l7.800004-13.95c.36-.629997 1.03-1.0199969 1.74998-1.0199969.72 0 1.39.3899999 1.75 1.0199969l7.8 13.95c.35.63.34 1.37-.02 1.99zm-1.72-1.01-7.8-13.95-7.79998 13.95z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-warning\";\nexport const tags =\n  \"nordicon interface warning exclamation mark triangle shape alert error sign\";\n","import * as successIcon from '@nordhealth/icons/lib/assets/interface-checked-circle.js'\nimport * as warningIcon from '@nordhealth/icons/lib/assets/interface-help.js'\nimport * as infoIcon from '@nordhealth/icons/lib/assets/interface-info.js'\nimport * as dangerIcon from '@nordhealth/icons/lib/assets/interface-warning.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport Icon from '../icon/Icon.js'\nimport style from './Banner.css'\n\nIcon.registerIcon(warningIcon)\nIcon.registerIcon(dangerIcon)\nIcon.registerIcon(infoIcon)\nIcon.registerIcon(successIcon)\n\nconst iconMap: Record<Banner['variant'], string> = {\n  warning: warningIcon.title,\n  danger: dangerIcon.title,\n  info: infoIcon.title,\n  success: successIcon.title,\n}\n\n/**\n * Banner informs users about important changes or conditions in the\n * interface. Use this component if you need to communicate to users\n * in a prominent way.\n *\n * @status ready\n * @category feedback\n * @slot - default slot\n *\n * @cssprop [--n-banner-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-banner-box-shadow=var(--n-box-shadow-card)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n */\n@customElement('nord-banner')\nexport default class Banner extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The style variant of the banner.\n   */\n  @property({ reflect: true }) variant: 'info' | 'danger' | 'success' | 'warning' = 'info'\n\n  render() {\n    const icon = iconMap[this.variant] || iconMap.info\n\n    return html`\n      <div class=\"n-banner\" role=\"alert\">\n        <nord-stack align-items=\"start\" direction=\"horizontal\">\n          <nord-icon name=${icon} size=\"m\"></nord-icon>\n          <div class=\"n-banner-content\">\n            <slot></slot>\n          </div>\n        </nord-stack>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-banner': Banner\n  }\n}\n"],"names":["title","Icon","registerIcon","warningIcon","dangerIcon","infoIcon","successIcon","iconMap","warning","warningIcon.title","danger","dangerIcon.title","info","infoIcon.title","success","successIcon.title","Banner","LitElement","constructor","this","variant","render","icon","html","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"kYACO,MAAMA,EAAQ,uEADN,iXAGb,oFCFK,MAAMA,EAAQ,6DADN,6eAGb,kGCFK,MAAMA,EAAQ,6DADN,iUAGb,0ECFK,MAAMA,EAAQ,gEADN,8gBAGb,mgDCQFC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAClBJ,EAAKC,aAAaI,GAElB,MAAMC,EAA6C,CACjDC,QAASC,EACTC,OAAQC,EACRC,KAAMC,EACNC,QAASC,GAgBI,IAAMC,EAAN,cAAqBC,EAArB,WAAAC,uBAMgBC,KAAOC,QAA8C,MAgBnF,CAdC,MAAAC,GACE,MAAMC,EAAOf,EAAQY,KAAKC,UAAYb,EAAQK,KAE9C,OAAOW,CAAI,8GAGaD,8FAOzB,GApBMN,EAAAQ,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmEb,EAAAc,UAAA,eAAA,GANrEd,EAAMW,EAAA,CAD1BI,EAAc,gBACMf,SAAAA"}
+{"version":3,"file":"Banner.js","sources":["../../icons/lib/assets/interface-checked-circle.js","../../icons/lib/assets/interface-help.js","../../icons/lib/assets/interface-info.js","../../icons/lib/assets/interface-warning.js","../src/banner/Banner.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.3 6.38 1.49 1.33-5.32 5.95c-.18.21-.44.33-.72.33 0 0-.02 0-.03 0-.26 0-.52-.1-.71-.29l-2.86-2.86 1.41-1.41 2.12 2.12 4.61-5.17zm6.7 3.62c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-checked-circle\";\nexport const tags =\n  \"nordicon interface circle round checked checkmark ready done success ok\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.15 15c0 .64-.51 1.15-1.15 1.15s-1.15-.51-1.15-1.15.51-1.15 1.15-1.15 1.15.51 1.15 1.15zm8.85-5c0 5.51-4.49 10-10 10s-10-4.49-10-10 4.49-10 10-10 10 4.49 10 10zm-2 0c0-4.41-3.59-8-8-8s-8 3.59-8 8 3.59 8 8 8 8-3.59 8-8zm-8-5.5c-1.93 0-3.5 1.57-3.5 3.5h2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5c-.55 0-1 .45-1 1v1.5h2v-.65c1.44-.43 2.5-1.77 2.5-3.35 0-1.93-1.57-3.5-3.5-3.5z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-help\";\nexport const tags =\n  \"nordicon interface help speech bubble support circle round question mark tooltip info\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m8.7 6c0-.72.58-1.3 1.3-1.3s1.3.58 1.3 1.3-.58 1.3-1.3 1.3-1.3-.58-1.3-1.3zm-8.7 4c0-5.51 4.49-10 10-10s10 4.49 10 10-4.49 10-10 10-10-4.49-10-10zm2 0c0 4.41 3.59 8 8 8s8-3.59 8-8-3.59-8-8-8-8 3.59-8 8zm7 5h2v-6h-2z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-info\";\nexport const tags =\n  \"nordicon interface info circle round alert notice information\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m11.1502 13c0 .64-.51 1.15-1.15 1.15-.63998 0-1.14998-.51-1.14998-1.15s.51-1.15 1.14998-1.15c.64 0 1.15.51 1.15 1.15zm-2.14998-2h1.99998v-5h-1.99998zm10.51998 6.01c-.36.62-1.01.99-1.73.99h-15.58998c-.72 0-1.360004-.37-1.730004-.99-.36-.62-.37-1.36-.02-1.99l7.800004-13.95c.36-.629997 1.03-1.0199969 1.74998-1.0199969.72 0 1.39.3899999 1.75 1.0199969l7.8 13.95c.35.63.34 1.37-.02 1.99zm-1.72-1.01-7.8-13.95-7.79998 13.95z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-warning\";\nexport const tags =\n  \"nordicon interface warning exclamation mark triangle shape alert error sign\";\n","import * as successIcon from '@nordhealth/icons/lib/assets/interface-checked-circle.js'\nimport * as warningIcon from '@nordhealth/icons/lib/assets/interface-help.js'\nimport * as infoIcon from '@nordhealth/icons/lib/assets/interface-info.js'\nimport * as dangerIcon from '@nordhealth/icons/lib/assets/interface-warning.js'\nimport { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport Icon from '../icon/Icon.js'\nimport style from './Banner.css'\nimport '../stack/Stack.js'\n\nIcon.registerIcon(warningIcon)\nIcon.registerIcon(dangerIcon)\nIcon.registerIcon(infoIcon)\nIcon.registerIcon(successIcon)\n\nconst iconMap: Record<Banner['variant'], string> = {\n  warning: warningIcon.title,\n  danger: dangerIcon.title,\n  info: infoIcon.title,\n  success: successIcon.title,\n}\n\n/**\n * Banner informs users about important changes or conditions in the\n * interface. Use this component if you need to communicate to users\n * in a prominent way.\n *\n * @status ready\n * @category feedback\n * @slot - default slot\n * @slot actions - Optional slot for action buttons (a call to action and/or a dismiss button), shown at the trailing end of the banner.\n *\n * @cssprop [--n-banner-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-banner-box-shadow=var(--n-box-shadow-card)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n */\n@customElement('nord-banner')\nexport default class Banner extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The style variant of the banner.\n   */\n  @property({ reflect: true }) variant: 'info' | 'danger' | 'success' | 'warning' = 'info'\n\n  private actionsSlot = new SlotController(this, 'actions')\n\n  render() {\n    const icon = iconMap[this.variant] || iconMap.info\n\n    return html`\n      <div class=\"n-banner\" role=\"alert\">\n        <nord-stack align-items=\"start\" direction=\"horizontal\">\n          <nord-icon name=${icon} size=\"m\"></nord-icon>\n          <div class=\"n-banner-content\">\n            <slot></slot>\n          </div>\n          ${this.actionsSlot.hasContent\n            ? html`\n                <div class=\"n-banner-actions\">\n                  <slot name=\"actions\"></slot>\n                </div>\n              `\n            : nothing}\n        </nord-stack>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-banner': Banner\n  }\n}\n"],"names":["title","Icon","registerIcon","warningIcon","dangerIcon","infoIcon","successIcon","iconMap","warning","warningIcon.title","danger","dangerIcon.title","info","infoIcon.title","success","successIcon.title","Banner","LitElement","constructor","this","variant","actionsSlot","SlotController","render","icon","html","hasContent","nothing","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"yfACO,MAAMA,EAAQ,uEADN,iXAGb,oFCFK,MAAMA,EAAQ,6DADN,6eAGb,kGCFK,MAAMA,EAAQ,6DADN,iUAGb,0ECFK,MAAMA,EAAQ,gEADN,8gBAGb,0jDCUFC,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAClBH,EAAKC,aAAaG,GAClBJ,EAAKC,aAAaI,GAElB,MAAMC,EAA6C,CACjDC,QAASC,EACTC,OAAQC,EACRC,KAAMC,EACNC,QAASC,GAiBI,IAAMC,EAAN,cAAqBC,EAArB,WAAAC,uBAMgBC,KAAOC,QAA8C,OAE1ED,KAAWE,YAAG,IAAIC,EAAeH,KAAM,UAuBhD,CArBC,MAAAI,GACE,MAAMC,EAAOjB,EAAQY,KAAKC,UAAYb,EAAQK,KAE9C,OAAOa,CAAI,8GAGaD,4EAIhBL,KAAKE,YAAYK,WACfD,CAAI,mEAKJE,sBAIX,GA7BMX,EAAAY,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmEjB,EAAAkB,UAAA,eAAA,GANrElB,EAAMe,EAAA,CAD1BI,EAAc,gBACMnB,SAAAA"}

package/lib/Button.js

@@ -1,13 +1,8 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as n,nothing as r,LitElement as e}from"lit";import{property as a,customElement as i}from"lit/decorators.js";import{createRef as s,ref as l}from"lit/directives/ref.js";import{E as b}from"./EventController-BBOmvfLa.js";import{L as d}from"./LightDomController-DIwtVelV.js";import{S as c}from"./SlotController-Z6eG7LSZ.js";import{c as u}from"./cond-CI1KbneT.js";import{F as v}from"./FocusableMixin-BlQLNPdJ.js";import{I as h}from"./InputMixin-LetXsCyv.js";import{s as p}from"./Component-DSU3Qp0O.js";import"./Spinner.js";import"lit/directives/if-defined.js";const g=o`:host{--_n-button-border-radius:var(--n-button-border-radius, var(--n-border-radius-s));--_n-button-gap:var(--n-button-gap, var(--n-space-s));--_n-button-gradient:var(
-    --n-button-gradient,
-    linear-gradient(to bottom, rgb(0, 0, 0, 0) 50%, rgb(0, 0, 0, 0.013) 100%)
-  );--_n-button-background-color:var(--n-button-background-color, var(--n-color-button));--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-strong));--_n-button-text-align:var(--n-button-text-align, center);--_n-button-box-shadow:var(--n-button-box-shadow, var(--n-box-shadow));--_n-button-color:var(--n-button-color, var(--n-color-text));--_n-button-padding-inline:var(--n-button-padding-inline, calc(var(--n-space-m) / 1.2));--_n-button-font-size:var(--n-button-font-size, var(--n-font-size-m));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight));--_n-button-min-block-size:var(--n-button-min-block-size, var(--n-space-xl));--_n-button-toggle-icon-color:var(--n-button-toggle-icon-color, var(--n-color-icon));--_n-button-overflow:var(--n-button-overflow, hidden);--_n-button-user-select:var(--n-button-user-select, none);--_n-button-opacity:1;--_n-button-border-style:solid;--_n-button-inline-size:fit-content;--_n-button-padding-block:calc(var(--n-space-s) / 1.6);--_n-button-icon-size:var(--n-size-icon-s);display:inline-block}.n-button{align-items:center;justify-content:var(--n-button-justify-content,flex-start);appearance:none;background:var(--_n-button-background-color);opacity:var(--_n-button-opacity);border-radius:var(--_n-button-border-radius);border:1px var(--_n-button-border-style) var(--_n-button-border-color);box-shadow:var(--_n-button-box-shadow);color:var(--_n-button-color);cursor:pointer;display:flex;gap:var(--_n-button-gap);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-button-font-size);font-weight:var(--_n-button-font-weight);line-height:var(--n-line-height-form);margin:0;min-block-size:var(--_n-button-min-block-size);padding:var(--_n-button-padding-block) var(--_n-button-padding-inline);text-align:var(--_n-button-text-align);text-decoration:none;transition:var(--n-transition-quickly);transition-property:background-color,opacity,color,box-shadow,border-color;-webkit-user-select:var(--_n-button-user-select);user-select:var(--_n-button-user-select);position:relative;inline-size:var(--_n-button-inline-size)}.n-button::after{content:'';position:absolute;background:0 0;background-image:var(--_n-button-gradient);border-radius:var(--_n-button-border-radius);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([expand]){--_n-button-inline-size:100%;display:block}.n-content{display:var(--n-button-content-display,block);flex:1;overflow:var(--_n-button-overflow);text-overflow:ellipsis;white-space:nowrap;position:relative}.n-button:hover{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}.n-button:focus{outline:0}.n-button:focus-visible{--_n-button-border-color:var(--n-button-border-color, var(--n-color-accent));--_n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow));--_n-button-border-style:solid}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-on-accent));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active))}:host([variant=primary]),:host([variant=primary]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-accent))}:host([variant=primary]) .n-button:hover{filter:brightness(93%)}:host([variant=primary]) .n-button:focus{--_n-button-box-shadow:var(
-    --n-button-box-shadow,
-    0 0 0 1px var(--n-color-surface),
-    0 0 0 3px var(--_n-button-border-color)
-  )}:host([variant=dashed]){--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-weaker));--_n-button-border-style:dashed}:host([variant=dashed]) .n-button:hover{--_n-button-color:var(--n-button-color, var(--n-color-text))}:host([variant=dashed]) .n-button::after{display:none}:host([variant=plain]){--_n-button-box-shadow:var(--n-button-box-shadow, none)}:host([variant=plain]),:host([variant=plain]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent)}:host([variant=plain]) .n-button::after{display:none}:host([variant=danger]){--_n-button-box-shadow:var(--n-button-box-shadow, none);--_n-button-color:var(--n-button-color, var(--n-color-text-on-accent));--_n-button-font-weight:var(--n-button-font-weight, var(--n-font-weight-active))}:host([variant=danger]),:host([variant=danger]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color, transparent);--_n-button-background-color:var(--n-button-background-color, var(--n-color-status-danger))}:host([variant=danger]) .n-button:hover{filter:brightness(93%)}:host([variant=danger]) .n-button:focus{--_n-button-border-color:var(--n-button-border-color, var(--n-color-status-danger));--_n-button-box-shadow:var(
-    --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.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};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as n,nothing as r,LitElement as e}from"lit";import{property as a,customElement as i}from"lit/decorators.js";import{createRef as s,ref as l}from"lit/directives/ref.js";import{E as b}from"./EventController-BBOmvfLa.js";import{L as d}from"./LightDomController-DIwtVelV.js";import{S as c}from"./SlotController-Z6eG7LSZ.js";import{c as u}from"./cond-CI1KbneT.js";import{F as v}from"./FocusableMixin-BlQLNPdJ.js";import{I as h}from"./InputMixin-LetXsCyv.js";import{s as p}from"./Component-BJ5O5n8k.js";import"./Spinner.js";import"lit/directives/if-defined.js";const g=o`:host{--_n-button-border-radius:var(--n-button-border-radius,var(--n-border-radius-s));--_n-button-gap:var(--n-button-gap,var(--n-space-s));--_n-button-gradient:var(
+    --n-button-gradient,linear-gradient(to bottom,#0000 50%,rgba(0,0,0,.013) 100%)
+  );--_n-button-background-color:var(--n-button-background-color,var(--n-color-button));--_n-button-border-color:var(--n-button-border-color,var(--n-color-border-strong));--_n-button-text-align:var(--n-button-text-align,center);--_n-button-box-shadow:var(--n-button-box-shadow,var(--n-box-shadow));--_n-button-color:var(--n-button-color,var(--n-color-text));--_n-button-padding-inline:var(--n-button-padding-inline,calc(var(--n-space-m)/1.2));--_n-button-font-size:var(--n-button-font-size,var(--n-font-size-m));--_n-button-font-weight:var(--n-button-font-weight,var(--n-font-weight));--_n-button-min-block-size:var(--n-button-min-block-size,var(--n-space-xl));--_n-button-toggle-icon-color:var(--n-button-toggle-icon-color,var(--n-color-icon));--_n-button-overflow:var(--n-button-overflow,hidden);--_n-button-user-select:var(--n-button-user-select,none);--_n-button-opacity:1;--_n-button-border-style:solid;--_n-button-inline-size:fit-content;--_n-button-padding-block:calc(var(--n-space-s)/1.6);--_n-button-icon-size:var(--n-size-icon-s);display:inline-block}.n-button{align-items:center;appearance:none;background:var(--_n-button-background-color);border:1px var(--_n-button-border-style) var(--_n-button-border-color);border-radius:var(--_n-button-border-radius);box-shadow:var(--_n-button-box-shadow);color:var(--_n-button-color);cursor:pointer;display:flex;font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-button-font-size);font-weight:var(--_n-button-font-weight);gap:var(--_n-button-gap);inline-size:var(--_n-button-inline-size);justify-content:var(--n-button-justify-content,flex-start);line-height:var(--n-line-height-form);margin:0;min-block-size:var(--_n-button-min-block-size);opacity:var(--_n-button-opacity);padding:var(--_n-button-padding-block) var(--_n-button-padding-inline);position:relative;text-align:var(--_n-button-text-align);text-decoration:none;transition:var(--n-transition-quickly);transition-property:background-color,opacity,color,box-shadow,border-color;-webkit-user-select:var(--_n-button-user-select);user-select:var(--_n-button-user-select)}.n-button:after{background:#0000;background-image:var(--_n-button-gradient);background-repeat:repeat-x;block-size:100%;border-radius:var(--_n-button-border-radius);content:"";inline-size:100%;inset-block-start:0;inset-inline:0;position:absolute}:host([expand]){--_n-button-inline-size:100%;display:block}.n-content{display:var(--n-button-content-display,block);flex:1;overflow:var(--_n-button-overflow);position:relative;text-overflow:ellipsis;white-space:nowrap}.n-button:hover{--_n-button-border-color:var(--n-button-border-color,var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color,var(--n-color-button-hover))}.n-button:focus{outline:none}.n-button:focus-visible{--_n-button-border-color:var(--n-button-border-color,var(--n-color-accent));--_n-button-box-shadow:var(--n-button-box-shadow,0 0 0 1px var(--n-color-accent),var(--n-box-shadow));--_n-button-border-style:solid}.n-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([variant=primary]){--_n-button-box-shadow:var(--n-button-box-shadow,none);--_n-button-color:var(--n-button-color,var(--n-color-text-on-accent));--_n-button-font-weight:var(--n-button-font-weight,var(--n-font-weight-active))}:host([variant=primary]),:host([variant=primary]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color,#0000);--_n-button-background-color:var(--n-button-background-color,var(--n-color-accent))}:host([variant=primary]) .n-button:hover{filter:brightness(93%)}:host([variant=primary]) .n-button:focus{--_n-button-box-shadow:var(
+    --n-button-box-shadow,0 0 0 1px var(--n-color-surface),0 0 0 3px var(--_n-button-border-color)
+  )}:host([variant=dashed]){--_n-button-border-color:var(--n-button-border-color,var(--n-color-border-hover));--_n-button-box-shadow:var(--n-button-box-shadow,none);--_n-button-color:var(--n-button-color,var(--n-color-text-weaker));--_n-button-border-style:dashed}:host([variant=dashed]) .n-button:hover{--_n-button-color:var(--n-button-color,var(--n-color-text))}:host([variant=dashed]) .n-button:after{display:none}:host([variant=plain]){--_n-button-box-shadow:var(--n-button-box-shadow,none)}:host([variant=plain]),:host([variant=plain]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color,#0000)}:host([variant=plain]) .n-button:after{display:none}:host([variant=danger]){--_n-button-box-shadow:var(--n-button-box-shadow,none);--_n-button-color:var(--n-button-color,var(--n-color-text-on-accent));--_n-button-font-weight:var(--n-button-font-weight,var(--n-font-weight-active))}:host([variant=danger]),:host([variant=danger]) .n-button:hover{--_n-button-border-color:var(--n-button-border-color,#0000);--_n-button-background-color:var(--n-button-background-color,var(--n-color-status-danger))}:host([variant=danger]) .n-button:hover{filter:brightness(93%)}:host([variant=danger]) .n-button:focus{--_n-button-border-color:var(--n-button-border-color,var(--n-color-status-danger));--_n-button-box-shadow:var(
+    --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{inset-block-start:50%;inset-inline-start:50%;position:absolute;transform:translateX(-50%) translateY(-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{align-items:center;display:flex;justify-content: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 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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"}
+{"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 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};
+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-BJ5O5n8k.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{background:var(--n-color-text);content:"";opacity:.25;position:absolute;z-index:var(--n-index-mask)}: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 * @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"}
+{"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 action\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":"kmIAqBe,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"}