@nordhealth/components 4.26.2 → 5.0.0-alpha.0

package/lib/TabGroup.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as r,html as a,isServer as s}from"lit";import{property as o,state as i,customElement as n}from"lit/decorators.js";import{D as l}from"./DirectionController-ChvNGESZ.js";import{s as d}from"./Component-DSU3Qp0O.js";import{s as b}from"./Sticky-DqnqENYN.js";import c from"./Tab.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./observe-D0n0zOfU.js";const p=e`:host{--_n-tab-group-padding:var(--n-tab-group-padding, 0);--_n-tab-group-list-background:var(--n-color-surface);--_n-tab-group-list-border:inset 0 -1px 0 0 var(--n-color-border);--_n-tab-group-list-shadow:var(--n-box-shadow-header);--_n-sticky-size:46px;border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}.n-tab-group-list{list-style:none;display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior:none;box-shadow:var(--_n-tab-group-list-border);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0;gap:var(--n-space-s);background-color:var(--_n-tab-group-list-background);background-image:radial-gradient(ellipse farthest-side at 0 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background)),radial-gradient(ellipse farthest-side at 100% 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background));background-repeat:no-repeat;background-position:0 var(--n-space-xs),100% var(--n-space-xs);background-size:var(--n-space-s) var(--n-space-xl),var(--n-space-s) var(--n-space-xl)}.n-tab-group-list::after,.n-tab-group-list::before{content:'';box-sizing:content-box;align-self:stretch;min-inline-size:var(--n-space-l);margin-block-end:1px}.n-tab-group-list::before{margin-inline-end:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-start:var(--_n-tab-group-padding)}.n-tab-group-list::after{margin-inline-start:calc(-1 * (var(--n-space-l) + var(--n-space-s)));padding-inline-end:var(--_n-tab-group-padding);flex:1}.n-tab-group-list::before,.n-tab-group.is-rtl .n-tab-group-list::after{box-shadow:inset var(--n-space-l) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--_n-tab-group-list-background)}.n-tab-group-list::after,.n-tab-group.is-rtl .n-tab-group-list::before{box-shadow:inset calc(-1 * var(--n-space-l)) 0 var(--n-space-s) calc(-1 * var(--n-space-s)) var(--_n-tab-group-list-background)}::slotted(nord-tab-panel){display:none;padding:var(--_n-tab-group-padding)}::slotted(nord-tab-panel[aria-hidden=false]){display:block}::slotted(nord-tab){z-index:var(--n-index-default)}:host([padding='m']){--_n-tab-group-padding:var(--n-tab-group-padding, var(--n-space-m))}:host([padding='l']){--_n-tab-group-padding:var(--n-tab-group-padding, var(--n-space-l))}:host([sticky]) .n-sticky{box-shadow:var(--_n-tab-group-list-border),var(--_n-tab-group-list-shadow);inset-inline:0;inset-block-end:auto}:host([sticky]),:host([sticky]) .n-tab-group-list{border-radius:0}`;var u;let h=1,v=u=class extends r{constructor(){super(...arguments),this.direction=new l(this),this.tabGroupId="nord-tab-group-"+h++,this.label="",this.padding="m",this.sticky=!1,this.selectedTab=this.initialSelectedTab,this.handleMutation=t=>{t.forEach((t=>{var e,r;if("selected"===t.attributeName&&null===t.oldValue){const a=t.target;null===(e=this.observer)||void 0===e||e.disconnect(),this.updateSelectedTab(a),null===(r=this.observer)||void 0===r||r.observe(this,u.observerOptions)}}))}}render(){return a`<div class="n-tab-group is-${this.direction.dir}"><div class="n-tab-group-list n-sticky" role="tablist" aria-label="${this.label}" @click="${this.handleTabChange}" @keydown="${this.handleKeydown}"><slot name="tab"></slot></div><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.updateSlots(),this.hasUpdated&&!this.observer&&this.setupObserver()}firstUpdated(){this.setupObserver()}updateSlots(){this.setupTabs(),this.setupPanels()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.observer)||void 0===t||t.disconnect(),this.observer=void 0}setupObserver(){this.observer||(this.observer=new MutationObserver(this.handleMutation),this.observer.observe(this,u.observerOptions))}get initialSelectedTab(){return s?null:this.querySelector("nord-tab[selected]")||this.querySelector("nord-tab")}setupTabs(){this.querySelectorAll("nord-tab").forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-controls",`${this.tabGroupId}-panel-${e+1}`),t.toggleAttribute("selected",t===this.selectedTab)}))}setupPanels(){var t;const e=this.querySelectorAll("nord-tab-panel"),r=null===(t=this.selectedTab)||void 0===t?void 0:t.getAttribute("aria-controls");e.forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-panel-${e+1}`),t.setAttribute("aria-labelledby",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-hidden",`${t.getAttribute("id")!==r}`)}))}handleTabChange(t){this.scrollTo({top:0}),t.target instanceof c&&t.target!==this.selectedTab&&this.updateSelectedTab(t.target)}previousTab(t){const e=[...this.querySelectorAll("nord-tab")],r=e.indexOf(t);return e[r-1]}handleKeydown(t){const e=t.target,r=this.querySelector("nord-tab:first-of-type"),a=this.querySelector("nord-tab:last-of-type"),s=this.querySelector(`#${e.getAttribute("id")} ~ nord-tab`)||r,o=this.previousTab(e)||a,i=(t,e)=>{e.preventDefault(),this.scrollTo({top:0}),this.updateSelectedTab(t)};switch(t.key){case"ArrowLeft":case"ArrowUp":i(this.direction.isLTR?o:s,t);break;case"ArrowRight":case"ArrowDown":i(this.direction.isLTR?s:o,t);break;case"Home":i(r,t);break;case"End":i(a,t)}}updateSelectedTab(t){const e=this.querySelector(`#${t.getAttribute("aria-controls")}`);t!==this.selectedTab&&(this.querySelectorAll("nord-tab").forEach((e=>{e.removeAttribute("selected"),e===t&&(e.setAttribute("selected",""),e.focus(),e.scrollIntoView({block:"nearest",inline:"nearest"}),this.selectedTab=e)})),this.querySelectorAll("nord-tab-panel").forEach((t=>{t.setAttribute("aria-hidden",`${t!==e}`)})))}};v.styles=[d,b,p],v.observerOptions={attributes:!0,subtree:!0,attributeFilter:["selected"],attributeOldValue:!0},t([o({reflect:!0})],v.prototype,"label",void 0),t([o({reflect:!0})],v.prototype,"padding",void 0),t([o({reflect:!0,type:Boolean})],v.prototype,"sticky",void 0),t([i()],v.prototype,"selectedTab",void 0),v=u=t([n("nord-tab-group")],v);var g=v;export{g as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as r,html as a,isServer as s}from"lit";import{property as o,state as i,customElement as n}from"lit/decorators.js";import{D as l}from"./DirectionController-ChvNGESZ.js";import{s as d}from"./Component-BJ5O5n8k.js";import{s as b}from"./Sticky-CZImMrGj.js";import c from"./Tab.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./observe-D0n0zOfU.js";const p=e`:host{--_n-tab-group-padding:var(--n-tab-group-padding,0);--_n-tab-group-list-background:var(--n-color-surface);--_n-tab-group-list-border:inset 0 -1px 0 0 var(--n-color-border);--_n-tab-group-list-shadow:var(--n-box-shadow-header);--_n-sticky-size:46px;border-radius:var(--n-border-radius) var(--n-border-radius) 0 0}.n-tab-group-list{background-color:var(--_n-tab-group-list-background);background-image:radial-gradient(ellipse farthest-side at 0 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background)),radial-gradient(ellipse farthest-side at 100% 50%,var(--n-color-border-strong) 0,var(--_n-tab-group-list-background));background-position:0 var(--n-space-xs),100% var(--n-space-xs);background-repeat:no-repeat;background-size:var(--n-space-s) var(--n-space-xl),var(--n-space-s) var(--n-space-xl);border-radius:var(--n-border-radius) var(--n-border-radius) 0 0;box-shadow:var(--_n-tab-group-list-border);display:flex;gap:var(--n-space-s);list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior:none}.n-tab-group-list:after,.n-tab-group-list:before{align-self:stretch;box-sizing:initial;content:"";margin-block-end:1px;min-inline-size:var(--n-space-l)}.n-tab-group-list:before{margin-inline-end:calc((var(--n-space-l) + var(--n-space-s))*-1);padding-inline-start:var(--_n-tab-group-padding)}.n-tab-group-list:after{flex:1;margin-inline-start:calc((var(--n-space-l) + var(--n-space-s))*-1);padding-inline-end:var(--_n-tab-group-padding)}.n-tab-group-list:before,.n-tab-group.is-rtl .n-tab-group-list:after{box-shadow:inset var(--n-space-l) 0 var(--n-space-s) calc(var(--n-space-s)*-1) var(--_n-tab-group-list-background)}.n-tab-group-list:after,.n-tab-group.is-rtl .n-tab-group-list:before{box-shadow:inset calc(var(--n-space-l)*-1) 0 var(--n-space-s) calc(var(--n-space-s)*-1) var(--_n-tab-group-list-background)}::slotted(nord-tab-panel){display:none;padding:var(--_n-tab-group-padding)}::slotted(nord-tab-panel[aria-hidden=false]){display:block}::slotted(nord-tab){z-index:var(--n-index-default)}:host([padding=m]){--_n-tab-group-padding:var(--n-tab-group-padding,var(--n-space-m))}:host([padding=l]){--_n-tab-group-padding:var(--n-tab-group-padding,var(--n-space-l))}:host([sticky]) .n-sticky{box-shadow:var(--_n-tab-group-list-border),var(--_n-tab-group-list-shadow);inset-block-end:auto;inset-inline:0}:host([sticky]),:host([sticky]) .n-tab-group-list{border-radius:0}`;var u;let h=1,g=u=class extends r{constructor(){super(...arguments),this.direction=new l(this),this.tabGroupId="nord-tab-group-"+h++,this.label="",this.padding="m",this.sticky=!1,this.selectedTab=this.initialSelectedTab,this.handleMutation=t=>{t.forEach((t=>{var e,r;if("selected"===t.attributeName&&null===t.oldValue){const a=t.target;null===(e=this.observer)||void 0===e||e.disconnect(),this.updateSelectedTab(a),null===(r=this.observer)||void 0===r||r.observe(this,u.observerOptions)}}))}}render(){return a`<div class="n-tab-group is-${this.direction.dir}"><div class="n-tab-group-list n-sticky" role="tablist" aria-label="${this.label}" @click="${this.handleTabChange}" @keydown="${this.handleKeydown}"><slot name="tab"></slot></div><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.selectedTab||(this.selectedTab=this.initialSelectedTab),this.updateSlots(),this.hasUpdated&&!this.observer&&this.setupObserver()}firstUpdated(){this.setupObserver()}updateSlots(){this.setupTabs(),this.setupPanels()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.observer)||void 0===t||t.disconnect(),this.observer=void 0}setupObserver(){this.observer||(this.observer=new MutationObserver(this.handleMutation),this.observer.observe(this,u.observerOptions))}get initialSelectedTab(){return s?null:this.querySelector("nord-tab[selected]")||this.querySelector("nord-tab")}setupTabs(){this.querySelectorAll("nord-tab").forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-controls",`${this.tabGroupId}-panel-${e+1}`),t.toggleAttribute("selected",t===this.selectedTab)}))}setupPanels(){var t;const e=this.querySelectorAll("nord-tab-panel"),r=null===(t=this.selectedTab)||void 0===t?void 0:t.getAttribute("aria-controls");e.forEach(((t,e)=>{t.setAttribute("id",`${this.tabGroupId}-panel-${e+1}`),t.setAttribute("aria-labelledby",`${this.tabGroupId}-tab-${e+1}`),t.setAttribute("aria-hidden",`${t.getAttribute("id")!==r}`)}))}handleTabChange(t){this.scrollTo({top:0}),t.target instanceof c&&t.target!==this.selectedTab&&this.updateSelectedTab(t.target)}previousTab(t){const e=[...this.querySelectorAll("nord-tab")],r=e.indexOf(t);return e[r-1]}handleKeydown(t){const e=t.target,r=this.querySelector("nord-tab:first-of-type"),a=this.querySelector("nord-tab:last-of-type"),s=this.querySelector(`#${e.getAttribute("id")} ~ nord-tab`)||r,o=this.previousTab(e)||a,i=(t,e)=>{e.preventDefault(),this.scrollTo({top:0}),this.updateSelectedTab(t)};switch(t.key){case"ArrowLeft":case"ArrowUp":i(this.direction.isLTR?o:s,t);break;case"ArrowRight":case"ArrowDown":i(this.direction.isLTR?s:o,t);break;case"Home":i(r,t);break;case"End":i(a,t)}}updateSelectedTab(t){const e=this.querySelector(`#${t.getAttribute("aria-controls")}`);t!==this.selectedTab&&(this.querySelectorAll("nord-tab").forEach((e=>{e.removeAttribute("selected"),e===t&&(e.setAttribute("selected",""),e.focus(),e.scrollIntoView({block:"nearest",inline:"nearest"}),this.selectedTab=e)})),this.querySelectorAll("nord-tab-panel").forEach((t=>{t.setAttribute("aria-hidden",`${t!==e}`)})))}};g.styles=[d,b,p],g.observerOptions={attributes:!0,subtree:!0,attributeFilter:["selected"],attributeOldValue:!0},t([o({reflect:!0})],g.prototype,"label",void 0),t([o({reflect:!0})],g.prototype,"padding",void 0),t([o({reflect:!0,type:Boolean})],g.prototype,"sticky",void 0),t([i()],g.prototype,"selectedTab",void 0),g=u=t([n("nord-tab-group")],g);var v=g;export{v as default};
 //# sourceMappingURL=TabGroup.js.map

package/lib/TabGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabGroup.js","sources":["../src/tab-group/TabGroup.ts"],"sourcesContent":["import { html, isServer, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport stickyStyle from '../common/styles/Sticky.css'\nimport Tab from '../tab/Tab.js'\n\nimport style from './TabGroup.css'\n\nlet tabGroupCount = 1\n\n/**\n * Tab Group allows multiple panels to be contained within a single window,\n * using tabs as a navigational element.\n *\n * @status ready\n * @category navigation\n * @slot - The element which contains the content to be revealed.\n * @slot tab - The element which contains all tabs to reveal tabbed content.\n *\n * @cssprop [--n-tab-group-padding=0] - Controls the padding around the tab group (including the tab list), using our [spacing tokens](/tokens/#space).\n */\n@customElement('nord-tab-group')\nexport default class TabGroup extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private direction = new DirectionController(this)\n\n  private observer?: MutationObserver\n\n  private static observerOptions = {\n    attributes: true,\n    subtree: true,\n    attributeFilter: ['selected'],\n    attributeOldValue: true,\n  }\n\n  /**\n   * Unique ID for each tab group component present.\n   */\n  private tabGroupId = `nord-tab-group-${tabGroupCount++}`\n\n  /**\n   * Adds an accessible label to the tab list container.\n   */\n  @property({ reflect: true }) label: string = ''\n\n  /**\n   * Controls the padding of the tab group component.\n   */\n  @property({ reflect: true }) padding?: 'm' | 'l' | 'none' = 'm'\n\n  /**\n   * Whether the tab list sticks to the top of the tab group as you scroll.\n   */\n  @property({ reflect: true, type: Boolean }) sticky: boolean = false\n\n  /**\n   * The current tab node selected in the tab group.\n   */\n  @state() private selectedTab = this.initialSelectedTab\n\n  render() {\n    return html`\n      <div class=\"n-tab-group is-${this.direction.dir}\">\n        <div\n          class=\"n-tab-group-list n-sticky\"\n          role=\"tablist\"\n          aria-label=\"${this.label}\"\n          @click=${this.handleTabChange}\n          @keydown=${this.handleKeydown}\n        >\n          <slot name=\"tab\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.updateSlots()\n    // Re-setup observer after reconnection (firstUpdated only runs once per instance)\n    if (this.hasUpdated && !this.observer) {\n      this.setupObserver()\n    }\n  }\n\n  firstUpdated() {\n    this.setupObserver()\n  }\n\n  private updateSlots() {\n    this.setupTabs()\n    this.setupPanels()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // Clean up observer to prevent memory leaks\n    this.observer?.disconnect()\n    this.observer = undefined\n  }\n\n  private setupObserver() {\n    // Avoid creating multiple observers\n    if (this.observer) {\n      return\n    }\n\n    this.observer = new MutationObserver(this.handleMutation)\n    this.observer.observe(this, TabGroup.observerOptions)\n  }\n\n  /**\n   * If the selected tab is selected programmatically update all the tabs.\n   */\n  private handleMutation = (mutations: MutationRecord[]) => {\n    mutations.forEach((mutation) => {\n      if (mutation.attributeName === 'selected' && mutation.oldValue === null) {\n        const selectedTab = <Tab>mutation.target\n        this.observer?.disconnect()\n        this.updateSelectedTab(selectedTab)\n        this.observer?.observe(this, TabGroup.observerOptions)\n      }\n    })\n  }\n\n  /**\n   * Get the selected tab button, or the first tab button.\n   */\n  private get initialSelectedTab() {\n    if (isServer) {\n      return null\n    }\n\n    return this.querySelector('nord-tab[selected]') || this.querySelector('nord-tab')\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab buttons.\n   */\n  private setupTabs() {\n    const tabs = this.querySelectorAll('nord-tab')\n\n    tabs.forEach((tab, index) => {\n      tab.setAttribute('id', `${this.tabGroupId}-tab-${index + 1}`)\n      tab.setAttribute('aria-controls', `${this.tabGroupId}-panel-${index + 1}`)\n      tab.toggleAttribute('selected', tab === this.selectedTab)\n    })\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab panels.\n   */\n  private setupPanels() {\n    const panels = this.querySelectorAll('nord-tab-panel')\n    const selectedPanelId = this.selectedTab?.getAttribute('aria-controls')\n\n    panels.forEach((panel, index) => {\n      panel.setAttribute('id', `${this.tabGroupId}-panel-${index + 1}`)\n      panel.setAttribute('aria-labelledby', `${this.tabGroupId}-tab-${index + 1}`)\n      panel.setAttribute('aria-hidden', `${panel.getAttribute('id') !== selectedPanelId}`)\n    })\n  }\n\n  private handleTabChange(event: Event) {\n    // Always reset the scroll when a tab is selected.\n    this.scrollTo({ top: 0 })\n\n    /**\n     * Return handler if it's not a tab or if it's already selected\n     */\n    if (!(event.target instanceof Tab) || event.target === this.selectedTab)\n      return\n\n    this.updateSelectedTab(event.target)\n  }\n\n  /**\n   * Get the previous tab button in the tab group\n   */\n  private previousTab(tab: Tab) {\n    const tabs = [...this.querySelectorAll('nord-tab')]\n    const selectedTabIndex = tabs.indexOf(tab)\n    return tabs[selectedTabIndex - 1]\n  }\n\n  /**\n   * Handle keyboard accessible controls.\n   */\n  private handleKeydown(event: KeyboardEvent) {\n    const tab = <Tab>event.target\n\n    const firstTab = <Tab> this.querySelector('nord-tab:first-of-type')\n    const lastTab = <Tab> this.querySelector('nord-tab:last-of-type')\n    const nextTab = <Tab> this.querySelector(`#${tab.getAttribute('id')} ~ nord-tab`) || firstTab\n    const previousTab = <Tab> this.previousTab(tab) || lastTab\n\n    const updateTab = (selectedTab: Tab, keyEvent: Event) => {\n      keyEvent.preventDefault()\n\n      // Always reset the scroll when a tab is selected.\n      this.scrollTo({ top: 0 })\n      this.updateSelectedTab(selectedTab)\n    }\n\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        updateTab(this.direction.isLTR ? previousTab : nextTab, event)\n        break\n\n      case 'ArrowRight':\n      case 'ArrowDown':\n        updateTab(this.direction.isLTR ? nextTab : previousTab, event)\n        break\n\n      case 'Home':\n        updateTab(firstTab, event)\n        break\n\n      case 'End':\n        updateTab(lastTab, event)\n        break\n\n      default:\n        break\n    }\n  }\n\n  /**\n   * Update the selected tab button with attributes and values.\n   * Update the tab group state.\n   */\n  private updateSelectedTab(selectedTab: Tab) {\n    const selectedPanel = this.querySelector(`#${selectedTab.getAttribute('aria-controls')}`)\n\n    if (selectedTab === this.selectedTab)\n      return\n\n    /**\n     * Reset all the selected state of the tabs, and select the clicked tab\n     */\n    this.querySelectorAll('nord-tab').forEach((tab) => {\n      tab.removeAttribute('selected')\n      if (tab === selectedTab) {\n        tab.setAttribute('selected', '')\n        tab.focus()\n        tab.scrollIntoView({ block: 'nearest', inline: 'nearest' })\n        this.selectedTab = tab\n      }\n    })\n\n    /**\n     * Reset all the visibility of the panels,\n     * and show the panel related to the selected tab\n     */\n    this.querySelectorAll('nord-tab-panel').forEach((panel) => {\n      panel.setAttribute('aria-hidden', `${panel !== selectedPanel}`)\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tab-group': TabGroup\n  }\n}\n"],"names":["tabGroupCount","TabGroup","TabGroup_1","LitElement","constructor","this","direction","DirectionController","tabGroupId","label","padding","sticky","selectedTab","initialSelectedTab","handleMutation","mutations","forEach","mutation","attributeName","oldValue","target","_a","observer","disconnect","updateSelectedTab","_b","observe","observerOptions","render","html","dir","handleTabChange","handleKeydown","connectedCallback","super","updateSlots","hasUpdated","setupObserver","firstUpdated","setupTabs","setupPanels","disconnectedCallback","undefined","MutationObserver","isServer","querySelector","querySelectorAll","tab","index","setAttribute","toggleAttribute","panels","selectedPanelId","getAttribute","panel","event","scrollTo","top","Tab","previousTab","tabs","selectedTabIndex","indexOf","firstTab","lastTab","nextTab","updateTab","keyEvent","preventDefault","key","isLTR","selectedPanel","removeAttribute","focus","scrollIntoView","block","inline","styles","componentStyle","stickyStyle","style","attributes","subtree","attributeFilter","attributeOldValue","__decorate","property","reflect","prototype","type","Boolean","state","customElement"],"mappings":"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"}
+{"version":3,"file":"TabGroup.js","sources":["../src/tab-group/TabGroup.ts"],"sourcesContent":["import { html, isServer, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport componentStyle from '../common/styles/Component.css'\nimport stickyStyle from '../common/styles/Sticky.css'\nimport Tab from '../tab/Tab.js'\n\nimport style from './TabGroup.css'\n\nlet tabGroupCount = 1\n\n/**\n * Tab Group allows multiple panels to be contained within a single window,\n * using tabs as a navigational element.\n *\n * @status ready\n * @category navigation\n * @slot - The element which contains the content to be revealed.\n * @slot tab - The element which contains all tabs to reveal tabbed content.\n *\n * @cssprop [--n-tab-group-padding=0] - Controls the padding around the tab group (including the tab list), using our [spacing tokens](/tokens/#space).\n *\n * @parent Tab\n */\n@customElement('nord-tab-group')\nexport default class TabGroup extends LitElement {\n  static styles = [componentStyle, stickyStyle, style]\n\n  private direction = new DirectionController(this)\n\n  private observer?: MutationObserver\n\n  private static observerOptions = {\n    attributes: true,\n    subtree: true,\n    attributeFilter: ['selected'],\n    attributeOldValue: true,\n  }\n\n  /**\n   * Unique ID for each tab group component present.\n   */\n  private tabGroupId = `nord-tab-group-${tabGroupCount++}`\n\n  /**\n   * Adds an accessible label to the tab list container.\n   */\n  @property({ reflect: true }) label: string = ''\n\n  /**\n   * Controls the padding of the tab group component.\n   */\n  @property({ reflect: true }) padding?: 'm' | 'l' | 'none' = 'm'\n\n  /**\n   * Whether the tab list sticks to the top of the tab group as you scroll.\n   */\n  @property({ reflect: true, type: Boolean }) sticky: boolean = false\n\n  /**\n   * The current tab node selected in the tab group.\n   */\n  @state() private selectedTab = this.initialSelectedTab\n\n  render() {\n    return html`\n      <div class=\"n-tab-group is-${this.direction.dir}\">\n        <div\n          class=\"n-tab-group-list n-sticky\"\n          role=\"tablist\"\n          aria-label=\"${this.label}\"\n          @click=${this.handleTabChange}\n          @keydown=${this.handleKeydown}\n        >\n          <slot name=\"tab\"></slot>\n        </div>\n        <slot></slot>\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    // Resolve the initial tab now the children are present. The field\n    // initializer for `selectedTab` runs at construction, but a framework\n    // (Vue/React) may create the group before slotting its `<nord-tab>`\n    // children — leaving `selectedTab` null and nothing pre-selected.\n    if (!this.selectedTab) {\n      this.selectedTab = this.initialSelectedTab\n    }\n    this.updateSlots()\n    // Re-setup observer after reconnection (firstUpdated only runs once per instance)\n    if (this.hasUpdated && !this.observer) {\n      this.setupObserver()\n    }\n  }\n\n  firstUpdated() {\n    this.setupObserver()\n  }\n\n  private updateSlots() {\n    this.setupTabs()\n    this.setupPanels()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // Clean up observer to prevent memory leaks\n    this.observer?.disconnect()\n    this.observer = undefined\n  }\n\n  private setupObserver() {\n    // Avoid creating multiple observers\n    if (this.observer) {\n      return\n    }\n\n    this.observer = new MutationObserver(this.handleMutation)\n    this.observer.observe(this, TabGroup.observerOptions)\n  }\n\n  /**\n   * If the selected tab is selected programmatically update all the tabs.\n   */\n  private handleMutation = (mutations: MutationRecord[]) => {\n    mutations.forEach((mutation) => {\n      if (mutation.attributeName === 'selected' && mutation.oldValue === null) {\n        const selectedTab = <Tab>mutation.target\n        this.observer?.disconnect()\n        this.updateSelectedTab(selectedTab)\n        this.observer?.observe(this, TabGroup.observerOptions)\n      }\n    })\n  }\n\n  /**\n   * Get the selected tab button, or the first tab button.\n   */\n  private get initialSelectedTab() {\n    if (isServer) {\n      return null\n    }\n\n    return this.querySelector('nord-tab[selected]') || this.querySelector('nord-tab')\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab buttons.\n   */\n  private setupTabs() {\n    const tabs = this.querySelectorAll('nord-tab')\n\n    tabs.forEach((tab, index) => {\n      tab.setAttribute('id', `${this.tabGroupId}-tab-${index + 1}`)\n      tab.setAttribute('aria-controls', `${this.tabGroupId}-panel-${index + 1}`)\n      tab.toggleAttribute('selected', tab === this.selectedTab)\n    })\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab panels.\n   */\n  private setupPanels() {\n    const panels = this.querySelectorAll('nord-tab-panel')\n    const selectedPanelId = this.selectedTab?.getAttribute('aria-controls')\n\n    panels.forEach((panel, index) => {\n      panel.setAttribute('id', `${this.tabGroupId}-panel-${index + 1}`)\n      panel.setAttribute('aria-labelledby', `${this.tabGroupId}-tab-${index + 1}`)\n      panel.setAttribute('aria-hidden', `${panel.getAttribute('id') !== selectedPanelId}`)\n    })\n  }\n\n  private handleTabChange(event: Event) {\n    // Always reset the scroll when a tab is selected.\n    this.scrollTo({ top: 0 })\n\n    /**\n     * Return handler if it's not a tab or if it's already selected\n     */\n    if (!(event.target instanceof Tab) || event.target === this.selectedTab)\n      return\n\n    this.updateSelectedTab(event.target)\n  }\n\n  /**\n   * Get the previous tab button in the tab group\n   */\n  private previousTab(tab: Tab) {\n    const tabs = [...this.querySelectorAll('nord-tab')]\n    const selectedTabIndex = tabs.indexOf(tab)\n    return tabs[selectedTabIndex - 1]\n  }\n\n  /**\n   * Handle keyboard accessible controls.\n   */\n  private handleKeydown(event: KeyboardEvent) {\n    const tab = <Tab>event.target\n\n    const firstTab = <Tab> this.querySelector('nord-tab:first-of-type')\n    const lastTab = <Tab> this.querySelector('nord-tab:last-of-type')\n    const nextTab = <Tab> this.querySelector(`#${tab.getAttribute('id')} ~ nord-tab`) || firstTab\n    const previousTab = <Tab> this.previousTab(tab) || lastTab\n\n    const updateTab = (selectedTab: Tab, keyEvent: Event) => {\n      keyEvent.preventDefault()\n\n      // Always reset the scroll when a tab is selected.\n      this.scrollTo({ top: 0 })\n      this.updateSelectedTab(selectedTab)\n    }\n\n    switch (event.key) {\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        updateTab(this.direction.isLTR ? previousTab : nextTab, event)\n        break\n\n      case 'ArrowRight':\n      case 'ArrowDown':\n        updateTab(this.direction.isLTR ? nextTab : previousTab, event)\n        break\n\n      case 'Home':\n        updateTab(firstTab, event)\n        break\n\n      case 'End':\n        updateTab(lastTab, event)\n        break\n\n      default:\n        break\n    }\n  }\n\n  /**\n   * Update the selected tab button with attributes and values.\n   * Update the tab group state.\n   */\n  private updateSelectedTab(selectedTab: Tab) {\n    const selectedPanel = this.querySelector(`#${selectedTab.getAttribute('aria-controls')}`)\n\n    if (selectedTab === this.selectedTab)\n      return\n\n    /**\n     * Reset all the selected state of the tabs, and select the clicked tab\n     */\n    this.querySelectorAll('nord-tab').forEach((tab) => {\n      tab.removeAttribute('selected')\n      if (tab === selectedTab) {\n        tab.setAttribute('selected', '')\n        tab.focus()\n        tab.scrollIntoView({ block: 'nearest', inline: 'nearest' })\n        this.selectedTab = tab\n      }\n    })\n\n    /**\n     * Reset all the visibility of the panels,\n     * and show the panel related to the selected tab\n     */\n    this.querySelectorAll('nord-tab-panel').forEach((panel) => {\n      panel.setAttribute('aria-hidden', `${panel !== selectedPanel}`)\n    })\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tab-group': TabGroup\n  }\n}\n"],"names":["tabGroupCount","TabGroup","TabGroup_1","LitElement","constructor","this","direction","DirectionController","tabGroupId","label","padding","sticky","selectedTab","initialSelectedTab","handleMutation","mutations","forEach","mutation","attributeName","oldValue","target","_a","observer","disconnect","updateSelectedTab","_b","observe","observerOptions","render","html","dir","handleTabChange","handleKeydown","connectedCallback","super","updateSlots","hasUpdated","setupObserver","firstUpdated","setupTabs","setupPanels","disconnectedCallback","undefined","MutationObserver","isServer","querySelector","querySelectorAll","tab","index","setAttribute","toggleAttribute","panels","selectedPanelId","getAttribute","panel","event","scrollTo","top","Tab","previousTab","tabs","selectedTabIndex","indexOf","firstTab","lastTab","nextTab","updateTab","keyEvent","preventDefault","key","isLTR","selectedPanel","removeAttribute","focus","scrollIntoView","block","inline","styles","componentStyle","stickyStyle","style","attributes","subtree","attributeFilter","attributeOldValue","__decorate","property","reflect","prototype","type","Boolean","state","customElement"],"mappings":"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"}

package/lib/TabPanel.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as s,html as o}from"lit";import{customElement as r}from"lit/decorators.js";import{s as a}from"./Component-DSU3Qp0O.js";const n=e`.n-tab-panel{font-size:var(--n-font-size-m);color:var(--n-color-text)}::slotted(*){margin:0}`;let l=class extends s{render(){return o`<div class="n-tab-panel"><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tabpanel"),this.setAttribute("tabindex","0")}};l.styles=[a,n],l=t([r("nord-tab-panel")],l);var i=l;export{i as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as s,html as o}from"lit";import{customElement as r}from"lit/decorators.js";import{s as a}from"./Component-BJ5O5n8k.js";const n=e`.n-tab-panel{color:var(--n-color-text);font-size:var(--n-font-size-m)}::slotted(*){margin:0}`;let l=class extends s{render(){return o`<div class="n-tab-panel"><slot></slot></div>`}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tabpanel"),this.setAttribute("tabindex","0")}};l.styles=[a,n],l=t([r("nord-tab-panel")],l);var i=l;export{i as default};
 //# sourceMappingURL=TabPanel.js.map

package/lib/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../src/tab-panel/TabPanel.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './TabPanel.css'\n\n/**\n * The panel which contains content that can be revealed using a tab\n * in the tab group component.\n *\n * @status ready\n * @category navigation\n * @slot - The tab panel content.\n */\n@customElement('nord-tab-panel')\nexport default class TabPanel extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`<div class=\"n-tab-panel\"><slot></slot></div>`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    /**\n     * Apply accessible attributes and values to the tab panel.\n     */\n    this.setAttribute('role', 'tabpanel')\n    this.setAttribute('tabindex', '0')\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tab-panel': TabPanel\n  }\n}\n"],"names":["TabPanel","LitElement","render","html","connectedCallback","super","this","setAttribute","styles","componentStyle","style","__decorate","customElement"],"mappings":"sSAee,IAAMA,EAAN,cAAuBC,EAGpC,MAAAC,GACE,OAAOC,CAAI,8CACZ,CAED,iBAAAC,GACEC,MAAMD,oBAKNE,KAAKC,aAAa,OAAQ,YAC1BD,KAAKC,aAAa,WAAY,IAC/B,GAdMP,EAAAQ,OAAS,CAACC,EAAgBC,GADdV,EAAQW,EAAA,CAD5BC,EAAc,mBACMZ,SAAAA"}
+{"version":3,"file":"TabPanel.js","sources":["../src/tab-panel/TabPanel.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './TabPanel.css'\n\n/**\n * The panel which contains content that can be revealed using a tab\n * in the tab group component.\n *\n * @status ready\n * @category navigation\n * @slot - The tab panel content.\n *\n * @parent Tab\n */\n@customElement('nord-tab-panel')\nexport default class TabPanel extends LitElement {\n  static styles = [componentStyle, style]\n\n  render() {\n    return html`<div class=\"n-tab-panel\"><slot></slot></div>`\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    /**\n     * Apply accessible attributes and values to the tab panel.\n     */\n    this.setAttribute('role', 'tabpanel')\n    this.setAttribute('tabindex', '0')\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tab-panel': TabPanel\n  }\n}\n"],"names":["TabPanel","LitElement","render","html","connectedCallback","super","this","setAttribute","styles","componentStyle","style","__decorate","customElement"],"mappings":"sSAiBe,IAAMA,EAAN,cAAuBC,EAGpC,MAAAC,GACE,OAAOC,CAAI,8CACZ,CAED,iBAAAC,GACEC,MAAMD,oBAKNE,KAAKC,aAAa,OAAQ,YAC1BD,KAAKC,aAAa,WAAY,IAC/B,GAdMP,EAAAQ,OAAS,CAACC,EAAgBC,GADdV,EAAQW,EAAA,CAD5BC,EAAc,mBACMZ,SAAAA"}

package/lib/Table.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as e,render as a,html as o}from"lit";import{property as n,customElement as d}from"lit/decorators.js";const l=r`nord-table{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 0.8));--_n-table-border-radius:var(--n-table-border-radius, var(--n-border-radius));all:unset;color:var(--n-color-text);user-select:inherit;display:block;max-inline-size:100%;overflow-x:auto}nord-table table{inline-size:100%;font-size:var(--n-font-size-m);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-tight);text-align:start;border-spacing:0;border-collapse:separate;color:var(--n-color-text);font-variant-numeric:tabular-nums}nord-table th{border-block-end:1px solid var(--n-color-border);font-weight:var(--n-font-weight-active);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker);text-align:start;background:var(--n-color-surface-raised)}nord-table td{border-block-end:1px solid var(--n-color-border);white-space:nowrap}nord-table :is(td, th){padding:var(--_n-table-td-padding) var(--n-space-s)}nord-table :is(td,th):first-child{padding-inline-start:var(--n-space-m)}nord-table :is(td,th):last-child{padding-inline-end:var(--n-space-m)}nord-table tbody tr:hover{background:var(--n-color-active)}nord-table tbody :is(.n-row-selected, .n-row-selected:hover){background:var(--n-color-active);color:var(--n-color-text);opacity:1;cursor:default}nord-table tbody :is(tr:hover,.n-row-selected) td{color:var(--n-color-text)}nord-table th[aria-sort]{cursor:pointer}nord-table th[aria-sort]:not([aria-sort=none]){color:var(--n-color-text)}nord-table[density=condensed]{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 0.5))}nord-table[density=relaxed]{--_n-table-td-padding:var(--n-table-td-padding, calc(var(--n-space-m) * 1.1))}nord-card nord-table tbody tr:last-child td{border-block-end-color:transparent}nord-card nord-table th:first-child{border-start-start-radius:var(--_n-table-border-radius)}nord-card nord-table th:last-child{border-start-end-radius:var(--_n-table-border-radius)}nord-card [slot=header]~nord-table th:is(:first-child, :last-child){border-radius:0}nord-card nord-table tbody tr:last-child td:first-child{border-end-start-radius:var(--_n-table-border-radius)}nord-card nord-table tbody tr:last-child td:last-child{border-end-end-radius:var(--_n-table-border-radius)}nord-table[scroll-snap]{scroll-snap-type:inline mandatory;scroll-behavior:smooth}nord-table[scroll-snap] :is(th, td){scroll-snap-align:start}nord-table:where([striped]) tbody tr:where(:nth-child(even)){background:var(--n-color-surface-raised)}nord-table .n-table-ellipsis{max-inline-size:0;inline-size:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nord-table .n-table-align-right{text-align:end}nord-table .n-table-actions{display:flex;justify-content:center}nord-table .n-table-actions nord-button{margin-block:-10px}`;let s=class extends e{constructor(){super(...arguments),this.density="default",this.scrollSnap=!1,this.striped=!1}connectedCallback(){super.connectedCallback(),this.renderStyles()}renderStyles(){const t=this.getRootNode(),r=t.nodeType===Node.DOCUMENT_NODE?t.head:t;const e=this.localName;if(t.querySelector(`style[data-component=${e}]`))return;const n=document.createDocumentFragment();a(o`<style data-component="${e}">${l}</style>`,n),r.appendChild(n)}createRenderRoot(){return this}};t([n({reflect:!0})],s.prototype,"density",void 0),t([n({reflect:!0,type:Boolean,attribute:"scroll-snap"})],s.prototype,"scrollSnap",void 0),t([n({type:Boolean,reflect:!0})],s.prototype,"striped",void 0),s=t([d("nord-table")],s);var i=s;export{i as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as e,render as a,html as o}from"lit";import{property as n,customElement as d}from"lit/decorators.js";const l=r`nord-table{--_n-table-td-padding:var(--n-table-td-padding,calc(var(--n-space-m)*0.8));--_n-table-border-radius:var(--n-table-border-radius,var(--n-border-radius));all:unset;color:var(--n-color-text);display:block;max-inline-size:100%;overflow-x:auto;user-select:inherit}nord-table table{border-collapse:initial;border-spacing:0;color:var(--n-color-text);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-font-size-m);font-variant-numeric:tabular-nums;inline-size:100%;line-height:var(--n-line-height-tight);text-align:start}nord-table th{background:var(--n-color-surface-raised);color:var(--n-color-text-weaker);font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);text-align:start}nord-table td,nord-table th{border-block-end:1px solid var(--n-color-border)}nord-table td{white-space:nowrap}nord-table :is(td,th){padding:var(--_n-table-td-padding) var(--n-space-s)}nord-table :is(td,th):first-child{padding-inline-start:var(--n-space-m)}nord-table :is(td,th):last-child{padding-inline-end:var(--n-space-m)}nord-table tbody tr:hover{background:var(--n-color-active)}nord-table tbody :is(.n-row-selected,.n-row-selected:hover){background:var(--n-color-active);color:var(--n-color-text);cursor:default;opacity:1}nord-table tbody :is(tr:hover,.n-row-selected) td{color:var(--n-color-text)}nord-table th[aria-sort]{cursor:pointer}nord-table th[aria-sort]:not([aria-sort=none]){color:var(--n-color-text)}nord-table[density=condensed]{--_n-table-td-padding:var(--n-table-td-padding,calc(var(--n-space-m)*0.5))}nord-table[density=relaxed]{--_n-table-td-padding:var(--n-table-td-padding,calc(var(--n-space-m)*1.1))}nord-card nord-table tbody tr:last-child td{border-block-end-color:#0000}nord-card nord-table th:first-child{border-start-start-radius:var(--_n-table-border-radius)}nord-card nord-table th:last-child{border-start-end-radius:var(--_n-table-border-radius)}nord-card [slot=header]~nord-table th:is(:first-child,:last-child){border-radius:0}nord-card nord-table tbody tr:last-child td:first-child{border-end-start-radius:var(--_n-table-border-radius)}nord-card nord-table tbody tr:last-child td:last-child{border-end-end-radius:var(--_n-table-border-radius)}nord-table[scroll-snap]{scroll-behavior:smooth;scroll-snap-type:inline mandatory}nord-table[scroll-snap] :is(th,td){scroll-snap-align:start}nord-table:where([striped]) tbody tr:where(:nth-child(2n)){background:var(--n-color-surface-raised)}nord-table .n-table-ellipsis{inline-size:90%;max-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nord-table .n-table-align-right{text-align:end}nord-table .n-table-actions{display:flex;justify-content:center}nord-table .n-table-actions nord-button{margin-block:-10px}`;let i=class extends e{constructor(){super(...arguments),this.density="default",this.scrollSnap=!1,this.striped=!1}connectedCallback(){super.connectedCallback(),this.renderStyles()}renderStyles(){const t=this.getRootNode(),r=t.nodeType===Node.DOCUMENT_NODE?t.head:t;const e=this.localName;if(t.querySelector(`style[data-component=${e}]`))return;const n=document.createDocumentFragment();a(o`<style data-component="${e}">${l}</style>`,n),r.appendChild(n)}createRenderRoot(){return this}};t([n({reflect:!0})],i.prototype,"density",void 0),t([n({reflect:!0,type:Boolean,attribute:"scroll-snap"})],i.prototype,"scrollSnap",void 0),t([n({type:Boolean,reflect:!0})],i.prototype,"striped",void 0),i=t([d("nord-table")],i);var s=i;export{s as default};
 //# sourceMappingURL=Table.js.map

package/lib/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../src/table/Table.ts"],"sourcesContent":["import { html, LitElement, render } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport style from './Table.css'\n\nfunction isDocument(node: Node): node is Document {\n  return node.nodeType === Node.DOCUMENT_NODE\n}\n\n/**\n * Table is used to organize and display information from a data set.\n * Provides table styles in addition to features like sticky\n * headers and support for narrow viewports.\n *\n * @status ready\n * @category list\n * @slot - Default slot which holds the HTML `<table>` element.\n *\n * @cssprop [--n-table-td-padding=calc(var(--n-space-m) * 0.95)] - Controls the padding around the table cells.\n * @cssprop [--n-table-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n *\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview - with react and tanstack table\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview - with react and ag grid\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview - with vue and tanstack table\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview - with vue and ag grid\n */\n@customElement('nord-table')\nexport default class Table extends LitElement {\n  /**\n   * Controls the density of the table's rows and headers.\n   * Relaxed increases space, condensed reduces space.\n   */\n  @property({ reflect: true }) density: 'condensed' | 'default' | 'relaxed' = 'default'\n\n  /**\n   * Enables scroll-snapping, meaning the scroll position is always column-aligned.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'scroll-snap' }) scrollSnap = false\n\n  /**\n   * Controls whether to use zebra striping on tables, which can improve readability.\n   */\n  @property({ type: Boolean, reflect: true }) striped = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.renderStyles()\n  }\n\n  /**\n   * renders table styles into nearest root.\n   * this is necessary since we do not use shadow dom.\n   */\n  private renderStyles() {\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const renderTarget = isDocument(rootNode) ? rootNode.head : rootNode\n    const tagName = this.localName\n\n    const componentStyles = rootNode.querySelector(`style[data-component=${tagName}]`)\n    if (componentStyles) {\n      return\n    }\n\n    const fragment = document.createDocumentFragment()\n    render(\n      html`\n        <style data-component=${tagName}>\n          ${style}\n        </style>\n      `,\n      fragment,\n    )\n    renderTarget.appendChild(fragment)\n  }\n\n  /**\n   * opt out of shadow dom\n   */\n  protected createRenderRoot() {\n    return this\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-table': Table\n  }\n}\n"],"names":["Table","LitElement","constructor","this","density","scrollSnap","striped","connectedCallback","super","renderStyles","rootNode","getRootNode","renderTarget","nodeType","Node","DOCUMENT_NODE","head","tagName","localName","querySelector","fragment","document","createDocumentFragment","render","html","style","appendChild","createRenderRoot","__decorate","property","reflect","prototype","type","Boolean","attribute","customElement"],"mappings":"w6FA0Be,IAAMA,EAAN,cAAoBC,EAApB,WAAAC,uBAKgBC,KAAOC,QAAwC,UAKND,KAAUE,YAAG,EAKvCF,KAAOG,SAAG,CAuCvD,CArCC,iBAAAC,GACEC,MAAMD,oBACNJ,KAAKM,cACN,CAMO,YAAAA,GACN,MAAMC,EAAWP,KAAKQ,cAChBC,EAA0BF,EAjDtBG,WAAaC,KAAKC,cAiDgBL,EAASM,KAAON,EAC5D,MAAMO,EAAUd,KAAKe,UAGrB,GADwBR,EAASS,cAAc,wBAAwBF,MAErE,OAGF,MAAMG,EAAWC,SAASC,yBAC1BC,EACEC,CAAI,0BACsBP,MACpBQ,YAGNL,GAEFR,EAAac,YAAYN,EAC1B,CAKS,gBAAAO,GACR,OAAOxB,IACR,GAhD4ByB,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgE9B,EAAA+B,UAAA,eAAA,GAKfH,EAAA,CAArEC,EAAS,CAAEC,SAAS,EAAME,KAAMC,QAASC,UAAW,iBAAmClC,EAAA+B,UAAA,kBAAA,GAK5CH,EAAA,CAA3CC,EAAS,CAAEG,KAAMC,QAASH,SAAS,KAAuB9B,EAAA+B,UAAA,eAAA,GAfxC/B,EAAK4B,EAAA,CADzBO,EAAc,eACMnC,SAAAA"}
+{"version":3,"file":"Table.js","sources":["../src/table/Table.ts"],"sourcesContent":["import { html, LitElement, render } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport style from './Table.css'\n\nfunction isDocument(node: Node): node is Document {\n  return node.nodeType === Node.DOCUMENT_NODE\n}\n\n/**\n * Table is used to organize and display information from a data set.\n * Provides table styles in addition to features like sticky\n * headers and support for narrow viewports.\n *\n * @status ready\n * @category list\n * @slot - Default slot which holds the HTML `<table>` element.\n *\n * @cssprop [--n-table-td-padding=calc(var(--n-space-m) * 0.95)] - Controls the padding around the table cells.\n * @cssprop [--n-table-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n *\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-tanstack-table?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview - with react and tanstack table\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-react-ag-grid?embed=1&file=src/DataTable/DataTable.tsx&hideNavigation=1&view=preview - with react and ag grid\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-tanstack-table?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview - with vue and tanstack table\n * @usage https://stackblitz.com/github/nordhealth/advanced-table-examples/tree/main/nord-vue-ag-grid?embed=1&file=src/components/DataTable/DataTable.vue&hideNavigation=1&view=preview - with vue and ag grid\n */\n@customElement('nord-table')\nexport default class Table extends LitElement {\n  /**\n   * Controls the density of the table's rows and headers.\n   * Relaxed increases space, condensed reduces space.\n   */\n  @property({ reflect: true }) density: 'condensed' | 'default' | 'relaxed' = 'default'\n\n  /**\n   * Enables scroll-snapping, meaning the scroll position is always column-aligned.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'scroll-snap' }) scrollSnap = false\n\n  /**\n   * Controls whether to use zebra striping on tables, which can improve readability.\n   */\n  @property({ type: Boolean, reflect: true }) striped = false\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.renderStyles()\n  }\n\n  /**\n   * renders table styles into nearest root.\n   * this is necessary since we do not use shadow dom.\n   */\n  private renderStyles() {\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const renderTarget = isDocument(rootNode) ? rootNode.head : rootNode\n    const tagName = this.localName\n\n    const componentStyles = rootNode.querySelector(`style[data-component=${tagName}]`)\n    if (componentStyles) {\n      return\n    }\n\n    const fragment = document.createDocumentFragment()\n    render(\n      html`\n        <style data-component=${tagName}>\n          ${style}\n        </style>\n      `,\n      fragment,\n    )\n    renderTarget.appendChild(fragment)\n  }\n\n  /**\n   * opt out of shadow dom\n   */\n  protected createRenderRoot() {\n    return this\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-table': Table\n  }\n}\n"],"names":["Table","LitElement","constructor","this","density","scrollSnap","striped","connectedCallback","super","renderStyles","rootNode","getRootNode","renderTarget","nodeType","Node","DOCUMENT_NODE","head","tagName","localName","querySelector","fragment","document","createDocumentFragment","render","html","style","appendChild","createRenderRoot","__decorate","property","reflect","prototype","type","Boolean","attribute","customElement"],"mappings":"43FA0Be,IAAMA,EAAN,cAAoBC,EAApB,WAAAC,uBAKgBC,KAAOC,QAAwC,UAKND,KAAUE,YAAG,EAKvCF,KAAOG,SAAG,CAuCvD,CArCC,iBAAAC,GACEC,MAAMD,oBACNJ,KAAKM,cACN,CAMO,YAAAA,GACN,MAAMC,EAAWP,KAAKQ,cAChBC,EAA0BF,EAjDtBG,WAAaC,KAAKC,cAiDgBL,EAASM,KAAON,EAC5D,MAAMO,EAAUd,KAAKe,UAGrB,GADwBR,EAASS,cAAc,wBAAwBF,MAErE,OAGF,MAAMG,EAAWC,SAASC,yBAC1BC,EACEC,CAAI,0BACsBP,MACpBQ,YAGNL,GAEFR,EAAac,YAAYN,EAC1B,CAKS,gBAAAO,GACR,OAAOxB,IACR,GAhD4ByB,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAgE9B,EAAA+B,UAAA,eAAA,GAKfH,EAAA,CAArEC,EAAS,CAAEC,SAAS,EAAME,KAAMC,QAASC,UAAW,iBAAmClC,EAAA+B,UAAA,kBAAA,GAK5CH,EAAA,CAA3CC,EAAS,CAAEG,KAAMC,QAASH,SAAS,KAAuB9B,EAAA+B,UAAA,eAAA,GAfxC/B,EAAK4B,EAAA,CADzBO,EAAc,eACMnC,SAAAA"}

package/lib/Tag.js

@@ -1,2 +1,2 @@
-import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-checked-small-BQmkNgCI.js";import{c as r}from"./interface-close-small-CnpAFMO3.js";import{css as n,html as t,LitElement as a}from"lit";import{property as i,customElement as c}from"lit/decorators.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{ref as l}from"lit/directives/ref.js";import{F as d}from"./FormDataController-OUt5L5uC.js";import{N as v}from"./events-Bv6wNHwJ.js";import{F as b}from"./FocusableMixin-BlQLNPdJ.js";import{I as h}from"./InputMixin-LetXsCyv.js";import{s as p}from"./Component-DSU3Qp0O.js";import u from"./Icon.js";import{LocalizeController as g}from"./LocalizeController.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const m=n`:host{--_n-tag-box-shadow:var(--n-tag-box-shadow, none);--_n-tag-border-radius:var(--n-tag-border-radius, var(--n-border-radius-s));--_n-tag-background-color:var(--n-color-nav-hover);--_n-tag-border-color:var(--n-color-border-neutral);--_n-tag-checkbox-size:var(--n-size-icon-s);--_n-tag-checkbox-accent-color:var(--n-color-accent);--_n-tag-checkbox-border-color:var(--n-color-border-hover);--_n-tag-font-size:var(--n-font-size-m);--_n-tag-inline-size:fit-content;display:inline;vertical-align:middle}.n-tag{border-radius:var(--_n-tag-border-radius);border:1px solid var(--_n-tag-border-color);background:var(--_n-tag-background-color);font-size:var(--_n-tag-font-size);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-tight);letter-spacing:0;min-block-size:1.75rem;padding:0 var(--n-space-s);color:var(--n-color-text);gap:calc(var(--n-space-xs) * 1.5);align-items:center;display:inline-flex;white-space:nowrap;position:relative;box-shadow:var(--_n-tag-box-shadow);inline-size:var(--_n-tag-inline-size)}.n-input-container{position:relative}input{appearance:none;background:var(--n-color-surface);border:1px solid var(--_n-tag-checkbox-border-color);border-radius:var(--n-border-radius-s);display:block;inline-size:var(--_n-tag-checkbox-size);block-size:var(--_n-tag-checkbox-size);cursor:pointer}.n-content{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative}:host([expand]){--_n-tag-inline-size:100%;display:block}:host(:is([variant=selectable],[variant=removable])) .n-tag{--_n-tag-border-color:var(--n-color-border-strong);--_n-tag-box-shadow:var(--n-tag-box-shadow, var(--n-box-shadow))}:host([variant=selectable]) .n-tag:hover{--_n-tag-border-color:var(--n-color-border-hover)}.n-tag:has(input:checked){--_n-tag-background-color:var(--n-color-button)}input:checked{--_n-tag-checkbox-border-color:var(--n-color-accent);background:var(--_n-tag-checkbox-accent-color)}input:focus-visible{outline:0!important}input:focus{outline:0!important}:host([variant=selectable]:focus-within) .n-tag{--_n-tag-border-color:var(--n-color-accent);--_n-tag-box-shadow:var(--n-tag-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow))}:host(:not([disabled])) label:active{opacity:.8;transform:translateY(1px);transition:none}nord-icon.icon-checked{--_n-icon-size:var(--n-size-icon-xxs);display:none;position:absolute;color:var(--n-color-text-on-accent);inset:calc(var(--n-space-xs)/ 2);z-index:var(--n-index-default);pointer-events:none}input:checked~nord-icon.icon-checked{display:block}label{user-select:none;cursor:pointer}.n-remove-button{appearance:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border:1px solid transparent;color:var(--n-color-text);border-radius:var(--_n-tag-border-radius);background:0 0;margin-block-start:calc(var(--n-space-xs) * -1);margin-block-end:calc(var(--n-space-xs) * -1);margin-inline-start:0;margin-inline-end:calc(var(--n-space-s) * -1);padding:var(--n-space-s)}.n-remove-button nord-icon{--_n-icon-size:var(--n-size-icon-xxs);color:var(--n-color-icon)}.n-remove-button:hover{background:var(--n-color-surface-lowered)}.n-remove-button:hover nord-icon{color:var(--n-color-icon-hover)}.n-remove-button:focus-visible{outline:0!important}.n-remove-button:focus{outline:0!important;border:1px solid var(--n-color-accent);box-shadow:0 0 0 1px var(--n-color-accent)}:host(:not([disabled])) .n-remove-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([disabled]:not([variant=default])) .n-tag{--_n-tag-background-color:var(--n-color-surface-lowered);--_n-tag-border-color:var(--_n-tag-background-color);color:var(--n-color-text-weaker);cursor:default;opacity:.5}:host([disabled]) input{background:var(--_n-tag-checkbox-accent-color);cursor:default;opacity:1}:host([disabled]) input:not(:checked){--_n-tag-checkbox-accent-color:var(--n-color-background);--_n-tag-checkbox-border-color:var(--n-color-border-hover)}:host([disabled]) .n-remove-button{cursor:default}:host([disabled]) .n-remove-button:hover{background:0 0}:host([disabled]) .n-remove-button:hover nord-icon{color:var(--n-color-icon)}:host([disabled]:is([variant=selectable],[variant=removable])) .n-tag{--_n-tag-box-shadow:var(--n-tag-box-shadow, none)}:host([size='s']) .n-tag{--_n-tag-font-size:var(--n-font-size-s)}`;u.registerIcon(e),u.registerIcon(r);let f=class extends(h(b(a))){constructor(){super(...arguments),this.localize=new g(this),this.formData=new d(this,{value:()=>this.formValue}),this.inputId="input",this.variant="default",this.checked=!1,this.size="m",this.expand=!1}get formValue(){return"selectable"===this.variant&&this.checked?this.value||"on":void 0}handleChange(o){const e=o.target;this.checked=e.checked,o.stopPropagation(),this.dispatchEvent(new v("change"))}handleRemove(){this.dispatchEvent(new v("remove"))}render(){switch(this.variant){case"selectable":return this.renderSelectableTag();case"removable":return this.renderRemovableTag();default:return this.renderStaticTag()}}renderStaticTag(){return t`<div class="n-tag"><div class="n-content"><slot></slot></div></div>`}renderRemovableTag(){return t`<div class="n-tag"><div class="n-content"><slot></slot></div><button class="n-remove-button" @click="${this.handleRemove}" ?disabled="${this.disabled}"><nord-icon name="interface-close-small" label="${this.localize.term("removeLabel")}"></nord-icon></button></div>`}renderSelectableTag(){return t`<label for="${this.inputId}" class="n-tag"><div class="n-input-container"><input ${l(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${s(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small"></nord-icon></div><div class="n-content"><slot></slot></div></label>`}};f.styles=[p,m],o([i({reflect:!0})],f.prototype,"variant",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"checked",void 0),o([i({reflect:!0})],f.prototype,"size",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),f=o([c("nord-tag")],f);var x=f;export{x as default};
+import{_ as o}from"./tslib.es6-CmLYFWVC.js";import{c as e}from"./interface-checked-small-BQmkNgCI.js";import{c as t}from"./interface-close-small-CnpAFMO3.js";import{css as a,html as n,LitElement as r}from"lit";import{property as i,customElement as c}from"lit/decorators.js";import{ifDefined as s}from"lit/directives/if-defined.js";import{ref as l}from"lit/directives/ref.js";import{F as d}from"./FormDataController-OUt5L5uC.js";import{N as v}from"./events-Bv6wNHwJ.js";import{F as b}from"./FocusableMixin-BlQLNPdJ.js";import{I as p}from"./InputMixin-LetXsCyv.js";import{s as h}from"./Component-BJ5O5n8k.js";import m from"./Icon.js";import{LocalizeController as g}from"./LocalizeController.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";import"./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 u=a`:host{--_n-tag-box-shadow:var(--n-tag-box-shadow,none);--_n-tag-border-radius:var(--n-tag-border-radius,var(--n-border-radius-s));--_n-tag-block-size:var(--n-tag-block-size,1.75rem);--_n-tag-background-color:var(--n-color-nav-hover);--_n-tag-border-color:var(--n-color-border-neutral);--_n-tag-checkbox-size:var(--n-size-icon-s);--_n-tag-checkbox-accent-color:var(--n-color-accent);--_n-tag-checkbox-border-color:var(--n-color-border-hover);--_n-tag-font-size:var(--n-font-size-m);--_n-tag-inline-size:fit-content;display:inline;vertical-align:middle}.n-tag{align-items:center;background:var(--_n-tag-background-color);border:1px solid var(--_n-tag-border-color);border-radius:var(--_n-tag-border-radius);box-shadow:var(--_n-tag-box-shadow);color:var(--n-color-text);display:inline-flex;font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-tag-font-size);font-weight:var(--n-font-weight);gap:calc(var(--n-space-xs)*1.5);inline-size:var(--_n-tag-inline-size);letter-spacing:0;line-height:var(--n-line-height-tight);min-block-size:var(--_n-tag-block-size);padding:0 var(--n-space-s);white-space:nowrap}.n-input-container,.n-tag{position:relative}input{appearance:none;background:var(--n-color-surface);block-size:var(--_n-tag-checkbox-size);border:1px solid var(--_n-tag-checkbox-border-color);border-radius:var(--n-border-radius-s);cursor:pointer;display:block;inline-size:var(--_n-tag-checkbox-size)}.n-content{flex:1;overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap}:host([expand]){--_n-tag-inline-size:100%;display:block}:host(:is([variant=selectable],[variant=removable])) .n-tag{--_n-tag-border-color:var(--n-color-border-strong);--_n-tag-box-shadow:var(--n-tag-box-shadow,var(--n-box-shadow))}:host([variant=selectable]) .n-tag:hover{--_n-tag-border-color:var(--n-color-border-hover)}.n-tag:has(input:checked){--_n-tag-background-color:var(--n-color-button)}input:checked{--_n-tag-checkbox-border-color:var(--n-color-accent);background:var(--_n-tag-checkbox-accent-color)}input:focus,input:focus-visible{outline:none!important}:host([variant=selectable]:focus-within) .n-tag{--_n-tag-border-color:var(--n-color-accent);--_n-tag-box-shadow:var(--n-tag-box-shadow,0 0 0 1px var(--n-color-accent),var(--n-box-shadow))}:host(:not([disabled])) label:active{opacity:.8;transform:translateY(1px);transition:none}nord-icon.icon-checked{--_n-icon-size:var(--n-size-icon-xxs);color:var(--n-color-text-on-accent);display:none;inset:calc(var(--n-space-xs)/2);pointer-events:none;position:absolute;z-index:var(--n-index-default)}input:checked~nord-icon.icon-checked{display:block}label{cursor:pointer;user-select:none}.n-remove-button{align-items:center;appearance:none;background:#0000;border:1px solid #0000;border-radius:var(--_n-tag-border-radius);color:var(--n-color-text);cursor:pointer;display:flex;justify-content:center;margin-block-end:calc(var(--n-space-xs)*-1);margin-block-start:calc(var(--n-space-xs)*-1);margin-inline-end:calc(var(--n-space-s)*-1);margin-inline-start:0;padding:var(--n-space-s)}.n-remove-button nord-icon{--_n-icon-size:var(--n-size-icon-xxs);color:var(--n-color-icon)}.n-remove-button:hover{background:var(--n-color-surface-lowered)}.n-remove-button:hover nord-icon{color:var(--n-color-icon-hover)}.n-remove-button:focus-visible{outline:none!important}.n-remove-button:focus{border:1px solid var(--n-color-accent);box-shadow:0 0 0 1px var(--n-color-accent);outline:none!important}:host(:not([disabled])) .n-remove-button:active{opacity:.8;transform:translateY(1px);transition:none}:host([disabled]:not([variant=default])) .n-tag{--_n-tag-background-color:var(--n-color-surface-lowered);--_n-tag-border-color:var(--_n-tag-background-color);color:var(--n-color-text-weaker);cursor:default;opacity:.5}:host([disabled]) input{background:var(--_n-tag-checkbox-accent-color);cursor:default;opacity:1}:host([disabled]) input:not(:checked){--_n-tag-checkbox-accent-color:var(--n-color-background);--_n-tag-checkbox-border-color:var(--n-color-border-hover)}:host([disabled]) .n-remove-button{cursor:default}:host([disabled]) .n-remove-button:hover{background:#0000}:host([disabled]) .n-remove-button:hover nord-icon{color:var(--n-color-icon)}:host([disabled]:is([variant=selectable],[variant=removable])) .n-tag{--_n-tag-box-shadow:var(--n-tag-box-shadow,none)}:host([size=s]) .n-tag{--_n-tag-font-size:var(--n-font-size-s)}`;m.registerIcon(e),m.registerIcon(t);let f=class extends(p(b(r))){constructor(){super(...arguments),this.localize=new g(this),this.formData=new d(this,{value:()=>this.formValue}),this.inputId="input",this.variant="default",this.checked=!1,this.size="m",this.expand=!1}get formValue(){return"selectable"===this.variant&&this.checked?this.value||"on":void 0}handleChange(o){const e=o.target;this.checked=e.checked,o.stopPropagation(),this.dispatchEvent(new v("change"))}handleRemove(){this.dispatchEvent(new v("remove"))}render(){switch(this.variant){case"selectable":return this.renderSelectableTag();case"removable":return this.renderRemovableTag();default:return this.renderStaticTag()}}renderStaticTag(){return n`<div class="n-tag"><div class="n-content"><slot></slot></div></div>`}renderRemovableTag(){return n`<div class="n-tag"><div class="n-content"><slot></slot></div><button class="n-remove-button" @click="${this.handleRemove}" ?disabled="${this.disabled}"><nord-icon name="interface-close-small" label="${this.localize.term("removeLabel")}"></nord-icon></button></div>`}renderSelectableTag(){return n`<label for="${this.inputId}" class="n-tag"><div class="n-input-container"><input ${l(this.focusableRef)} class="n-input" id="${this.inputId}" type="checkbox" name="${s(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" @change="${this.handleChange}"><nord-icon class="icon-checked" name="interface-checked-small"></nord-icon></div><div class="n-content"><slot></slot></div></label>`}};f.styles=[h,u],o([i({reflect:!0})],f.prototype,"variant",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"checked",void 0),o([i({reflect:!0})],f.prototype,"size",void 0),o([i({reflect:!0,type:Boolean})],f.prototype,"expand",void 0),f=o([c("nord-tag")],f);var x=f;export{x as default};
 //# sourceMappingURL=Tag.js.map

package/lib/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../src/tag/Tag.ts"],"sourcesContent":["import * as checkedIcon from '@nordhealth/icons/lib/assets/interface-checked-small.js'\nimport * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { FormDataController } from '../common/controllers/FormDataController.js'\nimport { NordEvent } from '../common/events.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport Icon from '../icon/Icon.js'\n\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Tag.css'\n\nIcon.registerIcon(checkedIcon)\nIcon.registerIcon(closeIcon)\n\n/**\n * Tags represent a set of keywords that help label, categorize,\n * and organize objects. Commonly used to signify the attributes of an object.\n *\n * @status new\n * @category text\n * @slot - The tag content.\n *\n * @localization removeLabel - Accessible label for the remove button.\n */\n@customElement('nord-tag')\nexport default class Tag extends InputMixin(FocusableMixin(LitElement)) {\n  static styles = [componentStyle, style]\n\n  private localize = new LocalizeController<'nord-tag'>(this)\n\n  protected formData = new FormDataController(this, { value: () => this.formValue })\n\n  protected get formValue() {\n    return this.variant === 'selectable' && this.checked ? this.value || 'on' : undefined\n  }\n\n  protected inputId = 'input'\n\n  /**\n   * The behavioral variant of the tag.\n   */\n  @property({ reflect: true }) variant: 'default' | 'removable' | 'selectable' = 'default'\n\n  /**\n   * Controls whether the tag is checked or not (only relevant when variant is set to `selectable`).\n   */\n  @property({ reflect: true, type: Boolean }) checked: boolean = false\n\n  /**\n   * The size of the tag. This affects the font-size.\n   */\n  @property({ reflect: true }) size: 's' | 'm' = 'm'\n\n  /**\n   * Controls whether the tag expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  protected handleChange(e: Event) {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n\n    e.stopPropagation()\n\n    /**\n     * Fired whenever the tag has been checked or unchecked via user interaction.\n     */\n    this.dispatchEvent(new NordEvent('change'))\n  }\n\n  protected handleRemove() {\n    /**\n     * Fired when the remove button is activated. This event should be used to remove the tag from the DOM.\n     */\n    this.dispatchEvent(new NordEvent('remove'))\n  }\n\n  render() {\n    switch (this.variant) {\n      case 'selectable':\n        return this.renderSelectableTag()\n      case 'removable':\n        return this.renderRemovableTag()\n      case 'default':\n      default:\n        return this.renderStaticTag()\n    }\n  }\n\n  private renderStaticTag() {\n    return html`\n      <div class=\"n-tag\">\n        <div class=\"n-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n\n  private renderRemovableTag() {\n    return html`\n      <div class=\"n-tag\">\n        <div class=\"n-content\">\n          <slot></slot>\n        </div>\n        <button class=\"n-remove-button\" @click=${this.handleRemove} ?disabled=${this.disabled}>\n          <nord-icon name=\"interface-close-small\" label=${this.localize.term('removeLabel')}></nord-icon>\n        </button>\n      </div>\n    `\n  }\n\n  private renderSelectableTag() {\n    return html`\n      <label for=${this.inputId} class=\"n-tag\">\n        <div class=\"n-input-container\">\n          <input\n            ${ref(this.focusableRef)}\n            class=\"n-input\"\n            id=${this.inputId}\n            type=\"checkbox\"\n            name=${ifDefined(this.name)}\n            .value=${this.value}\n            .checked=${this.checked}\n            ?disabled=${this.disabled}\n            @change=${this.handleChange}\n          />\n          <nord-icon class=\"icon-checked\" name=\"interface-checked-small\"></nord-icon>\n        </div>\n        <div class=\"n-content\">\n          <slot></slot>\n        </div>\n      </label>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tag': Tag\n  }\n}\n"],"names":["Icon","registerIcon","checkedIcon","closeIcon","Tag","InputMixin","FocusableMixin","LitElement","constructor","this","localize","LocalizeController","formData","FormDataController","value","formValue","inputId","variant","checked","size","expand","undefined","handleChange","e","target","stopPropagation","dispatchEvent","NordEvent","handleRemove","render","renderSelectableTag","renderRemovableTag","renderStaticTag","html","disabled","term","ref","focusableRef","ifDefined","name","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"s3KAgBAA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAaH,IAAMC,EAAN,cAAkBC,EAAWC,EAAeC,KAA5C,WAAAC,uBAGLC,KAAAC,SAAW,IAAIC,EAA+BF,MAE5CA,KAAAG,SAAW,IAAIC,EAAmBJ,KAAM,CAAEK,MAAO,IAAML,KAAKM,YAM5DN,KAAOO,QAAG,QAKSP,KAAOQ,QAA2C,UAKnCR,KAAOS,SAAY,EAKlCT,KAAIU,KAAc,IAKHV,KAAMW,QAAG,CA+EtD,CAvGC,aAAcL,GACZ,MAAwB,eAAjBN,KAAKQ,SAA4BR,KAAKS,QAAUT,KAAKK,OAAS,UAAOO,CAC7E,CAwBS,YAAAC,CAAaC,GACrB,MAAMC,EAASD,EAAEC,OACjBf,KAAKS,QAAUM,EAAON,QAEtBK,EAAEE,kBAKFhB,KAAKiB,cAAc,IAAIC,EAAU,UAClC,CAES,YAAAC,GAIRnB,KAAKiB,cAAc,IAAIC,EAAU,UAClC,CAED,MAAAE,GACE,OAAQpB,KAAKQ,SACX,IAAK,aACH,OAAOR,KAAKqB,sBACd,IAAK,YACH,OAAOrB,KAAKsB,qBAEd,QACE,OAAOtB,KAAKuB,kBAEjB,CAEO,eAAAA,GACN,OAAOC,CAAI,qEAOZ,CAEO,kBAAAF,GACN,OAAOE,CAAI,wGAKkCxB,KAAKmB,4BAA0BnB,KAAKyB,4DAC3BzB,KAAKC,SAASyB,KAAK,6CAI1E,CAEO,mBAAAL,GACN,OAAOG,CAAI,eACIxB,KAAKO,gEAGVoB,EAAI3B,KAAK4B,qCAEN5B,KAAKO,kCAEHsB,EAAU7B,KAAK8B,kBACb9B,KAAKK,oBACHL,KAAKS,uBACJT,KAAKyB,sBACPzB,KAAKa,mJASxB,GA5GMlB,EAAAoC,OAAS,CAACC,EAAgBC,GAeJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmEzC,EAAA0C,UAAA,eAAA,GAK5CH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAmC5C,EAAA0C,UAAA,eAAA,GAKvCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6BzC,EAAA0C,UAAA,YAAA,GAKNH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyB5C,EAAA0C,UAAA,cAAA,GA/BvC1C,EAAGuC,EAAA,CADvBM,EAAc,aACM7C,SAAAA"}
+{"version":3,"file":"Tag.js","sources":["../src/tag/Tag.ts"],"sourcesContent":["import * as checkedIcon from '@nordhealth/icons/lib/assets/interface-checked-small.js'\nimport * as closeIcon from '@nordhealth/icons/lib/assets/interface-close-small.js'\nimport { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { FormDataController } from '../common/controllers/FormDataController.js'\nimport { NordEvent } from '../common/events.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport Icon from '../icon/Icon.js'\n\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Tag.css'\n\nIcon.registerIcon(checkedIcon)\nIcon.registerIcon(closeIcon)\n\n/**\n * Tags represent a set of keywords that help label, categorize,\n * and organize objects. Commonly used to signify the attributes of an object.\n *\n * @status new\n * @category text\n * @slot - The tag content.\n *\n * @localization removeLabel - Accessible label for the remove button.\n */\n@customElement('nord-tag')\nexport default class Tag extends InputMixin(FocusableMixin(LitElement)) {\n  static styles = [componentStyle, style]\n\n  private localize = new LocalizeController<'nord-tag'>(this)\n\n  protected formData = new FormDataController(this, { value: () => this.formValue })\n\n  protected get formValue() {\n    return this.variant === 'selectable' && this.checked ? this.value || 'on' : undefined\n  }\n\n  protected inputId = 'input'\n\n  /**\n   * The behavioral variant of the tag.\n   */\n  @property({ reflect: true }) variant: 'default' | 'removable' | 'selectable' = 'default'\n\n  /**\n   * Controls whether the tag is checked or not (only relevant when variant is set to `selectable`).\n   */\n  @property({ reflect: true, type: Boolean }) checked: boolean = false\n\n  /**\n   * The size of the tag. This affects the font-size.\n   */\n  @property({ reflect: true }) size: 's' | 'm' = 'm'\n\n  /**\n   * Controls whether the tag expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  protected handleChange(e: Event) {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n\n    e.stopPropagation()\n\n    /**\n     * Fired whenever the tag has been checked or unchecked via user interaction.\n     */\n    this.dispatchEvent(new NordEvent('change'))\n  }\n\n  protected handleRemove() {\n    /**\n     * Fired when the remove button is activated. This event should be used to remove the tag from the DOM.\n     */\n    this.dispatchEvent(new NordEvent('remove'))\n  }\n\n  render() {\n    switch (this.variant) {\n      case 'selectable':\n        return this.renderSelectableTag()\n      case 'removable':\n        return this.renderRemovableTag()\n      case 'default':\n      default:\n        return this.renderStaticTag()\n    }\n  }\n\n  private renderStaticTag() {\n    return html`\n      <div class=\"n-tag\">\n        <div class=\"n-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n\n  private renderRemovableTag() {\n    return html`\n      <div class=\"n-tag\">\n        <div class=\"n-content\">\n          <slot></slot>\n        </div>\n        <button class=\"n-remove-button\" @click=${this.handleRemove} ?disabled=${this.disabled}>\n          <nord-icon name=\"interface-close-small\" label=${this.localize.term('removeLabel')}></nord-icon>\n        </button>\n      </div>\n    `\n  }\n\n  private renderSelectableTag() {\n    return html`\n      <label for=${this.inputId} class=\"n-tag\">\n        <div class=\"n-input-container\">\n          <input\n            ${ref(this.focusableRef)}\n            class=\"n-input\"\n            id=${this.inputId}\n            type=\"checkbox\"\n            name=${ifDefined(this.name)}\n            .value=${this.value}\n            .checked=${this.checked}\n            ?disabled=${this.disabled}\n            @change=${this.handleChange}\n          />\n          <nord-icon class=\"icon-checked\" name=\"interface-checked-small\"></nord-icon>\n        </div>\n        <div class=\"n-content\">\n          <slot></slot>\n        </div>\n      </label>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tag': Tag\n  }\n}\n"],"names":["Icon","registerIcon","checkedIcon","closeIcon","Tag","InputMixin","FocusableMixin","LitElement","constructor","this","localize","LocalizeController","formData","FormDataController","value","formValue","inputId","variant","checked","size","expand","undefined","handleChange","e","target","stopPropagation","dispatchEvent","NordEvent","handleRemove","render","renderSelectableTag","renderRemovableTag","renderStaticTag","html","disabled","term","ref","focusableRef","ifDefined","name","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"8vLAgBAA,EAAKC,aAAaC,GAClBF,EAAKC,aAAaE,GAaH,IAAMC,EAAN,cAAkBC,EAAWC,EAAeC,KAA5C,WAAAC,uBAGLC,KAAAC,SAAW,IAAIC,EAA+BF,MAE5CA,KAAAG,SAAW,IAAIC,EAAmBJ,KAAM,CAAEK,MAAO,IAAML,KAAKM,YAM5DN,KAAOO,QAAG,QAKSP,KAAOQ,QAA2C,UAKnCR,KAAOS,SAAY,EAKlCT,KAAIU,KAAc,IAKHV,KAAMW,QAAG,CA+EtD,CAvGC,aAAcL,GACZ,MAAwB,eAAjBN,KAAKQ,SAA4BR,KAAKS,QAAUT,KAAKK,OAAS,UAAOO,CAC7E,CAwBS,YAAAC,CAAaC,GACrB,MAAMC,EAASD,EAAEC,OACjBf,KAAKS,QAAUM,EAAON,QAEtBK,EAAEE,kBAKFhB,KAAKiB,cAAc,IAAIC,EAAU,UAClC,CAES,YAAAC,GAIRnB,KAAKiB,cAAc,IAAIC,EAAU,UAClC,CAED,MAAAE,GACE,OAAQpB,KAAKQ,SACX,IAAK,aACH,OAAOR,KAAKqB,sBACd,IAAK,YACH,OAAOrB,KAAKsB,qBAEd,QACE,OAAOtB,KAAKuB,kBAEjB,CAEO,eAAAA,GACN,OAAOC,CAAI,qEAOZ,CAEO,kBAAAF,GACN,OAAOE,CAAI,wGAKkCxB,KAAKmB,4BAA0BnB,KAAKyB,4DAC3BzB,KAAKC,SAASyB,KAAK,6CAI1E,CAEO,mBAAAL,GACN,OAAOG,CAAI,eACIxB,KAAKO,gEAGVoB,EAAI3B,KAAK4B,qCAEN5B,KAAKO,kCAEHsB,EAAU7B,KAAK8B,kBACb9B,KAAKK,oBACHL,KAAKS,uBACJT,KAAKyB,sBACPzB,KAAKa,mJASxB,GA5GMlB,EAAAoC,OAAS,CAACC,EAAgBC,GAeJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAmEzC,EAAA0C,UAAA,eAAA,GAK5CH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAmC5C,EAAA0C,UAAA,eAAA,GAKvCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6BzC,EAAA0C,UAAA,YAAA,GAKNH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAyB5C,EAAA0C,UAAA,cAAA,GA/BvC1C,EAAGuC,EAAA,CADvBM,EAAc,aACM7C,SAAAA"}

package/lib/TagGroup.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as a,html as o}from"lit";import{property as e,customElement as i}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{D as n}from"./DirectionController-ChvNGESZ.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{s as d}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const u=r`:host{--_n-tag-group-border-radius:var(--n-tag-group-border-radius, var(--n-border-radius-s));--_n-tag-group-box-shadow:var(--n-tag-group-box-shadow, var(--n-box-shadow));--_n-tag-group-flex-direction:row;--_n-tag-group-max-inline-size:max-content}:host([variant=default]) .n-multiple-tags{--n-tag-border-radius:0;--n-tag-box-shadow:none}.n-tag-group{display:flex;flex-direction:var(--_n-tag-group-flex-direction);max-inline-size:var(--_n-tag-group-max-inline-size)}:host([variant=default]) .n-tag-group.n-multiple-tags{border-radius:var(--_n-tag-group-border-radius);box-shadow:var(--_n-tag-group-box-shadow)}:host([variant=spaced]) .n-tag-group{gap:var(--n-space-s)}:host([variant=default][direction=horizontal]) .n-multiple-tags ::slotted(*){margin-inline-end:-1px}:host([variant=default]) .n-multiple-tags ::slotted(:is(:hover,:focus)){z-index:var(--n-index-masked)}:host([variant=default]) .n-multiple-tags ::slotted(:focus-within){z-index:var(--n-index-masked)}:host([variant=default]) ::slotted(:is(:focus,:focus-within)){--n-tag-box-shadow:var(--n-tag-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow))}:host([variant=default]) .n-multiple-tags ::slotted(*){border-radius:var(--n-tag-border-radius)}:host([variant=default]) .n-multiple-tags.n-rtl ::slotted(:last-child),:host([variant=default]) .n-multiple-tags:not(.n-rtl) ::slotted(:first-child){--n-tag-border-radius:var(--_n-tag-group-border-radius) 0 0 var(--_n-tag-group-border-radius)}:host([variant=default]) .n-multiple-tags.n-rtl ::slotted(:first-child),:host([variant=default]) .n-multiple-tags:not(.n-rtl) ::slotted(:last-child){--n-tag-border-radius:0 var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius) 0}:host([direction=vertical]) .n-tag-group{--_n-tag-group-flex-direction:column}:host([variant=default][direction=vertical]) .n-multiple-tags ::slotted(*){margin-block-end:-1px}:host([variant=default][direction=vertical]) .n-multiple-tags ::slotted(:first-child){--n-tag-border-radius:var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius) 0 0}:host([variant=default][direction=vertical]) .n-multiple-tags ::slotted(:last-child){--n-tag-border-radius:0 0 var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius)}:host([variant=spaced][wrap]) .n-tag-group{flex-wrap:wrap}`;let g=class extends a{constructor(){super(...arguments),this.defaultSlot=new l(this),this.dirController=new n(this),this.variant="default",this.direction="horizontal",this.wrap=!1,this.role="group"}render(){const t=this.defaultSlot.assigned.length>1;return o`<div class="${s({"n-tag-group":!0,"n-rtl":this.dirController.isRTL,"n-multiple-tags":t})}"><slot></slot></div>`}};g.styles=[d,u],t([e({reflect:!0})],g.prototype,"variant",void 0),t([e({reflect:!0})],g.prototype,"direction",void 0),t([e({reflect:!0,type:Boolean})],g.prototype,"wrap",void 0),t([e({reflect:!0})],g.prototype,"role",void 0),g=t([i("nord-tag-group")],g);var p=g;export{p as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as a,html as o}from"lit";import{property as i,customElement as e}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{D as n}from"./DirectionController-ChvNGESZ.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{s as d}from"./Component-BJ5O5n8k.js";import"./EventController-BBOmvfLa.js";const u=r`:host{--_n-tag-group-border-radius:var(--n-tag-group-border-radius,var(--n-border-radius-s));--_n-tag-group-box-shadow:var(--n-tag-group-box-shadow,var(--n-box-shadow));--_n-tag-group-flex-direction:row;--_n-tag-group-max-inline-size:max-content}:host([variant=default]) .n-multiple-tags{--n-tag-border-radius:0;--n-tag-box-shadow:none}.n-tag-group{display:flex;flex-direction:var(--_n-tag-group-flex-direction);max-inline-size:var(--_n-tag-group-max-inline-size)}:host([variant=default]) .n-tag-group.n-multiple-tags{border-radius:var(--_n-tag-group-border-radius);box-shadow:var(--_n-tag-group-box-shadow)}:host([variant=spaced]) .n-tag-group{gap:var(--n-space-s)}:host([variant=default][direction=horizontal]) .n-multiple-tags ::slotted(*){margin-inline-end:-1px}:host([variant=default]) .n-multiple-tags ::slotted(:is(:hover,:focus)){z-index:var(--n-index-masked)}:host([variant=default]) .n-multiple-tags ::slotted(:focus-within){z-index:var(--n-index-masked)}:host([variant=default]) ::slotted(:is(:focus,:focus-within)){--n-tag-box-shadow:var(--n-tag-box-shadow,0 0 0 1px var(--n-color-accent),var(--n-box-shadow))}:host([variant=default]) .n-multiple-tags ::slotted(*){border-radius:var(--n-tag-border-radius)}:host([variant=default]) .n-multiple-tags.n-rtl ::slotted(:last-child),:host([variant=default]) .n-multiple-tags:not(.n-rtl) ::slotted(:first-child){--n-tag-border-radius:var(--_n-tag-group-border-radius) 0 0 var(--_n-tag-group-border-radius)}:host([variant=default]) .n-multiple-tags.n-rtl ::slotted(:first-child),:host([variant=default]) .n-multiple-tags:not(.n-rtl) ::slotted(:last-child){--n-tag-border-radius:0 var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius) 0}:host([direction=vertical]) .n-tag-group{--_n-tag-group-flex-direction:column}:host([variant=default][direction=vertical]) .n-multiple-tags ::slotted(*){margin-block-end:-1px}:host([variant=default][direction=vertical]) .n-multiple-tags ::slotted(:first-child){--n-tag-border-radius:var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius) 0 0}:host([variant=default][direction=vertical]) .n-multiple-tags ::slotted(:last-child){--n-tag-border-radius:0 0 var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius)}:host([variant=spaced][wrap]) .n-tag-group{flex-wrap:wrap}`;let g=class extends a{constructor(){super(...arguments),this.defaultSlot=new l(this),this.dirController=new n(this),this.variant="default",this.direction="horizontal",this.wrap=!1,this.role="group"}render(){const t=this.defaultSlot.assigned.length>1;return o`<div class="${s({"n-tag-group":!0,"n-rtl":this.dirController.isRTL,"n-multiple-tags":t})}"><slot></slot></div>`}};g.styles=[d,u],t([i({reflect:!0})],g.prototype,"variant",void 0),t([i({reflect:!0})],g.prototype,"direction",void 0),t([i({reflect:!0,type:Boolean})],g.prototype,"wrap",void 0),t([i({reflect:!0})],g.prototype,"role",void 0),g=t([e("nord-tag-group")],g);var p=g;export{p as default};
 //# sourceMappingURL=TagGroup.js.map

package/lib/TagGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.js","sources":["../src/tag-group/TagGroup.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './TagGroup.css'\n\n/**\n * Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.\n *\n * @status new\n * @category structure\n * @slot - The tag group content\n *\n * @fires {NordEvent} change - Fired whenever a tag has been checked or unchecked via user interaction.\n * @fires {NordEvent} remove - Fired when the remove button is activated on a tag. This event should be used to remove the tag from the DOM.\n *\n * @cssprop [--n-tag-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the tag group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.\n * @cssprop [--n-tag-group-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.\n */\n@customElement('nord-tag-group')\nexport default class TagGroup 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 tag group.\n   */\n  @property({ reflect: true }) variant: 'default' | 'spaced' = 'default'\n\n  /**\n   * The direction of the tag group.\n   */\n  @property({ reflect: true }) direction: 'vertical' | 'horizontal' = 'horizontal'\n\n  /**\n   * Defines whether the tags 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 hasMultipleTags = this.defaultSlot.assigned.length > 1\n\n    return html`<div\n      class=${classMap({\n        'n-tag-group': true,\n        'n-rtl': this.dirController.isRTL,\n        'n-multiple-tags': hasMultipleTags,\n      })}\n    >\n      <slot></slot>\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tag-group': TagGroup\n  }\n}\n"],"names":["TagGroup","LitElement","constructor","this","defaultSlot","SlotController","dirController","DirectionController","variant","direction","wrap","role","render","hasMultipleTags","assigned","length","html","classMap","isRTL","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"wpFAuBe,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAAAG,cAAgB,IAAIC,EAAoBJ,MAKnBA,KAAOK,QAAyB,UAKhCL,KAASM,UAA8B,aAMxBN,KAAIO,MAAG,EAMtBP,KAAIQ,KAAW,OAe7C,CAbC,MAAAC,GACE,MAAMC,EAAkBV,KAAKC,YAAYU,SAASC,OAAS,EAE3D,OAAOC,CAAI,eACDC,EAAS,CACf,eAAe,EACf,QAASd,KAAKG,cAAcY,MAC5B,kBAAmBL,0BAKxB,GAvCMb,EAAAmB,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiDxB,EAAAyB,UAAA,eAAA,GAKzCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2DxB,EAAAyB,UAAA,iBAAA,GAMpCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAuB3B,EAAAyB,UAAA,YAAA,GAM3BH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA8BxB,EAAAyB,UAAA,YAAA,GA1BhCzB,EAAQsB,EAAA,CAD5BM,EAAc,mBACM5B,SAAAA"}
+{"version":3,"file":"TagGroup.js","sources":["../src/tag-group/TagGroup.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './TagGroup.css'\n\n/**\n * Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.\n *\n * @status new\n * @category structure\n * @slot - The tag group content\n *\n * @fires {NordEvent} change - Fired whenever a tag has been checked or unchecked via user interaction.\n * @fires {NordEvent} remove - Fired when the remove button is activated on a tag. This event should be used to remove the tag from the DOM.\n *\n * @cssprop [--n-tag-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the tag group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.\n * @cssprop [--n-tag-group-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.\n *\n * @parent Tag\n */\n@customElement('nord-tag-group')\nexport default class TagGroup 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 tag group.\n   */\n  @property({ reflect: true }) variant: 'default' | 'spaced' = 'default'\n\n  /**\n   * The direction of the tag group.\n   */\n  @property({ reflect: true }) direction: 'vertical' | 'horizontal' = 'horizontal'\n\n  /**\n   * Defines whether the tags 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 hasMultipleTags = this.defaultSlot.assigned.length > 1\n\n    return html`<div\n      class=${classMap({\n        'n-tag-group': true,\n        'n-rtl': this.dirController.isRTL,\n        'n-multiple-tags': hasMultipleTags,\n      })}\n    >\n      <slot></slot>\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tag-group': TagGroup\n  }\n}\n"],"names":["TagGroup","LitElement","constructor","this","defaultSlot","SlotController","dirController","DirectionController","variant","direction","wrap","role","render","hasMultipleTags","assigned","length","html","classMap","isRTL","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"opFAyBe,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAAAG,cAAgB,IAAIC,EAAoBJ,MAKnBA,KAAOK,QAAyB,UAKhCL,KAASM,UAA8B,aAMxBN,KAAIO,MAAG,EAMtBP,KAAIQ,KAAW,OAe7C,CAbC,MAAAC,GACE,MAAMC,EAAkBV,KAAKC,YAAYU,SAASC,OAAS,EAE3D,OAAOC,CAAI,eACDC,EAAS,CACf,eAAe,EACf,QAASd,KAAKG,cAAcY,MAC5B,kBAAmBL,0BAKxB,GAvCMb,EAAAmB,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiDxB,EAAAyB,UAAA,eAAA,GAKzCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2DxB,EAAAyB,UAAA,iBAAA,GAMpCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAuB3B,EAAAyB,UAAA,YAAA,GAM3BH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA8BxB,EAAAyB,UAAA,YAAA,GA1BhCzB,EAAQsB,EAAA,CAD5BM,EAAc,mBACM5B,SAAAA"}

package/lib/TextField-CSKvieoG.js

@@ -0,0 +1,2 @@
+import{css as n}from"lit";const r=n`:host{--_n-input-inline-size:var(--n-input-inline-size,240px);--_n-input-block-size:var(--n-input-block-size,var(--n-space-xl));--_n-input-background:var(--n-input-background,var(--n-color-surface));--_n-input-color:var(--n-input-color,var(--n-color-text));--_n-input-font-size:var(--n-input-font-size,var(--n-font-size-m));--_n-input-border-color:var(--n-input-border-color,var(--n-color-border-strong));--_n-input-border-radius:var(--n-input-border-radius,var(--n-border-radius-s));--_n-input-text-align:var(--n-input-text-align,start);--_n-input-placeholder-color:var(--n-input-placeholder-color,var(--n-color-text-weakest));--_n-input-padding-block:calc(var(--_n-input-block-size)/2 - var(--n-line-height-form)/2 - 1px);--_n-input-padding-inline:calc(var(--n-space-s)*1.6);--_n-input-min-content-block-size:calc(var(--n-line-height-form) + var(--n-space-s)/1.6*2 + 2px)}.n-input-container{inline-size:var(--_n-input-inline-size);position:relative}.n-input{background:var(--_n-input-background);border:1px solid var(--_n-input-border-color);border-radius:var(--_n-input-border-radius);color:var(--_n-input-color);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--_n-input-font-size);inline-size:100%;line-height:var(--n-line-height-form);padding:var(--_n-input-padding-block) var(--_n-input-padding-inline);text-align:var(--_n-input-text-align);transition:border var(--n-transition-quickly),box-shadow var(--n-transition-quickly),background var(--n-transition-quickly)}@media (max-width:480px){:host{--_n-input-font-size:var(--n-input-font-size,var(--n-font-size-l))}}:host([expand]){--_n-input-inline-size:100%;inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container{--_n-input-border-color:var(--n-input-border-color,var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-input-border-color,var(--n-color-accent));--_n-input-background:var(--n-input-background,var(--n-color-surface));box-shadow:0 0 0 1px var(--_n-input-border-color);outline:none}.n-input::placeholder{color:var(--_n-input-placeholder-color);opacity:1}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-input-border-color,var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-background:var(--n-input-background-inactive,var(--n-color-active));--_n-input-border-color:var(--n-input-border-color,var(--n-color-active));--_n-input-color:var(--n-input-color,var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-input-color,var(--n-color-text))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-input-border-color,var(--n-color-accent))}:host([size=s]){--_n-input-font-size:var(--n-font-size-s);--_n-input-padding-block:calc(var(--n-space-xs) - 1px);--_n-input-padding-inline:calc(var(--n-space-xs)*1.6)}:host([size=l]){--_n-input-font-size:var(--n-font-size-l);--_n-input-block-size:max(var(--n-input-block-size,calc(var(--n-space-xxl) - var(--n-space-l))),var(--_n-input-min-content-block-size));--_n-input-padding-block:calc(var(--_n-input-block-size)/2 - var(--n-line-height-form)/2 - 1px)}`;export{r as s};
+//# sourceMappingURL=TextField-CSKvieoG.js.map

package/lib/TextField-CSKvieoG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField-CSKvieoG.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/TextSelectableMixin-Cfv__lHS.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextSelectableMixin-Cfv__lHS.js","sources":["../src/common/mixins/TextSelectableMixin.ts"],"sourcesContent":["import type { LitElement } from 'lit'\nimport type { Ref } from 'lit/directives/ref.js'\nimport type { InputMixinInterface } from './InputMixin.js'\nimport { createRef } from 'lit/directives/ref.js'\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class TextSelectableMixinInterface {\n  protected textSelectableRef: Ref<HTMLInputElement | HTMLTextAreaElement>\n  set selectionStart(value: number | null)\n  get selectionStart(): number | null\n  set selectionEnd(value: number | null)\n  get selectionEnd(): number | null\n  select(): void\n  setSelectionRange(start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none'): void\n  setRangeText(\n    replacement: string,\n    start?: number,\n    end?: number,\n    selectMode?: 'select' | 'start' | 'end' | 'preserve'\n  ): void\n}\n\nexport function TextSelectableMixin<T extends Constructable<InputMixinInterface & LitElement>>(superClass: T) {\n  class TextSelectableElement extends superClass {\n    protected textSelectableRef = createRef<HTMLInputElement | HTMLTextAreaElement>()\n\n    /**\n     * Gets or sets the starting position or offset of a text selection.\n     *\n     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionStart)\n     */\n    set selectionStart(value: number | null) {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.selectionStart = value\n      }\n    }\n\n    get selectionStart() {\n      return this.textSelectableRef.value?.selectionStart ?? null\n    }\n\n    /**\n     * Gets or sets the end position or offset of a text selection.\n     *\n     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionEnd)\n     */\n    set selectionEnd(value: number | null) {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.selectionEnd = value\n      }\n    }\n\n    get selectionEnd() {\n      return this.textSelectableRef.value?.selectionEnd ?? null\n    }\n\n    /**\n     * Gets or sets the direction in which selection occurred.\n     *\n     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/selectionDirection)\n     */\n    set selectionDirection(value: 'forward' | 'backward' | 'none' | null) {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.selectionDirection = value\n      }\n    }\n\n    get selectionDirection() {\n      return this.textSelectableRef.value?.selectionDirection ?? null\n    }\n\n    /**\n     * Selects all the text in the text field.\n     *\n     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select)\n     */\n    select() {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.select()\n      }\n    }\n\n    /**\n     * Sets the start and end positions of a selection in the text field.\n     *\n     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange)\n     *\n     * @param start The offset into the text field for the start of the selection.\n     * @param end The offset into the text field for the end of the selection.\n     * @param direction The direction in which the selection is performed.\n     */\n    setSelectionRange(start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none') {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.setSelectionRange(start, end, direction)\n      }\n    }\n\n    /**\n     * Replaces a range of text with a new string.\n     *\n     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText)\n     *\n     * @param replacement The string to insert.\n     * @param start The 0-based index of the first character to replace. Defaults to the current `selectionStart` value (the start of the user's current selection).\n     * @param end The 0-based index of the character after the last character to replace. Defaults to the current `selectionEnd` value (the end of the user's current selection).\n     * @param selectMode A string defining how the selection should be set after the text has been replaced.\n     */\n    setRangeText(\n      replacement: string,\n      start?: number,\n      end?: number,\n      selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve',\n    ) {\n      if (this.textSelectableRef.value) {\n        const selectionStart = start ?? this.textSelectableRef.value.selectionStart!\n\n        const selectionEnd = end ?? this.textSelectableRef.value.selectionEnd!\n\n        this.textSelectableRef.value.setRangeText(replacement, selectionStart, selectionEnd, selectMode)\n\n        if (this.value !== this.textSelectableRef.value.value) {\n          this.value = this.textSelectableRef.value.value\n        }\n      }\n    }\n\n    /**\n     * Returns the native `<input>` or `<textarea>` element used under the hood.\n     */\n    async getNativeElement() {\n      // wait for the element to be rendered\n      await this.updateComplete\n\n      return this.textSelectableRef.value\n    }\n  }\n\n  return TextSelectableElement as unknown as Constructable<TextSelectableMixinInterface> & T\n}\n"],"names":["TextSelectableMixin","superClass","constructor","this","textSelectableRef","createRef","selectionStart","value","_b","_a","selectionEnd","selectionDirection","select","setSelectionRange","start","end","direction","setRangeText","replacement","selectMode","getNativeElement","updateComplete"],"mappings":"kDAuBM,SAAUA,EAA+EC,GAmH7F,OAlHA,cAAoCA,EAApC,WAAAC,uBACYC,KAAiBC,kBAAGC,GA+G/B,CAxGC,kBAAIC,CAAeC,GACbJ,KAAKC,kBAAkBG,QACzBJ,KAAKC,kBAAkBG,MAAMD,eAAiBC,EAEjD,CAED,kBAAID,WACF,OAAuD,QAAhDE,EAA8B,QAA9BC,EAAAN,KAAKC,kBAAkBG,aAAO,IAAAE,OAAA,EAAAA,EAAAH,sBAAkB,IAAAE,EAAAA,EAAA,IACxD,CAOD,gBAAIE,CAAaH,GACXJ,KAAKC,kBAAkBG,QACzBJ,KAAKC,kBAAkBG,MAAMG,aAAeH,EAE/C,CAED,gBAAIG,WACF,OAAqD,QAA9CF,EAA8B,QAA9BC,EAAAN,KAAKC,kBAAkBG,aAAO,IAAAE,OAAA,EAAAA,EAAAC,oBAAgB,IAAAF,EAAAA,EAAA,IACtD,CAOD,sBAAIG,CAAmBJ,GACjBJ,KAAKC,kBAAkBG,QACzBJ,KAAKC,kBAAkBG,MAAMI,mBAAqBJ,EAErD,CAED,sBAAII,WACF,OAA2D,QAApDH,EAA8B,QAA9BC,EAAAN,KAAKC,kBAAkBG,aAAO,IAAAE,OAAA,EAAAA,EAAAE,0BAAsB,IAAAH,EAAAA,EAAA,IAC5D,CAOD,MAAAI,GACMT,KAAKC,kBAAkBG,OACzBJ,KAAKC,kBAAkBG,MAAMK,QAEhC,CAWD,iBAAAC,CAAkBC,EAAsBC,EAAoBC,GACtDb,KAAKC,kBAAkBG,OACzBJ,KAAKC,kBAAkBG,MAAMM,kBAAkBC,EAAOC,EAAKC,EAE9D,CAYD,YAAAC,CACEC,EACAJ,EACAC,EACAI,EAAsD,YAEtD,GAAIhB,KAAKC,kBAAkBG,MAAO,CAChC,MAAMD,EAAiBQ,QAAAA,EAASX,KAAKC,kBAAkBG,MAAMD,eAEvDI,EAAeK,QAAAA,EAAOZ,KAAKC,kBAAkBG,MAAMG,aAEzDP,KAAKC,kBAAkBG,MAAMU,aAAaC,EAAaZ,EAAgBI,EAAcS,GAEjFhB,KAAKI,QAAUJ,KAAKC,kBAAkBG,MAAMA,QAC9CJ,KAAKI,MAAQJ,KAAKC,kBAAkBG,MAAMA,MAE7C,CACF,CAKD,sBAAMa,GAIJ,aAFMjB,KAAKkB,eAEJlB,KAAKC,kBAAkBG,KAC/B,EAIL"}
+{"version":3,"file":"TextSelectableMixin-Cfv__lHS.js","sources":["../src/common/mixins/TextSelectableMixin.ts"],"sourcesContent":["import type { LitElement } from 'lit'\nimport type { Ref } from 'lit/directives/ref.js'\nimport type { InputMixinInterface } from './InputMixin.js'\nimport { createRef } from 'lit/directives/ref.js'\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class TextSelectableMixinInterface {\n  protected textSelectableRef: Ref<HTMLInputElement | HTMLTextAreaElement>\n  set selectionStart(value: number | null)\n  get selectionStart(): number | null\n  set selectionEnd(value: number | null)\n  get selectionEnd(): number | null\n  select(): void\n  setSelectionRange(start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none'): void\n  setRangeText(\n    replacement: string,\n    start?: number,\n    end?: number,\n    selectMode?: 'select' | 'start' | 'end' | 'preserve'\n  ): void\n  getNativeElement(): Promise<HTMLInputElement | HTMLTextAreaElement | undefined>\n}\n\nexport function TextSelectableMixin<T extends Constructable<InputMixinInterface & LitElement>>(superClass: T) {\n  class TextSelectableElement extends superClass {\n    protected textSelectableRef = createRef<HTMLInputElement | HTMLTextAreaElement>()\n\n    /**\n     * Gets or sets the starting position or offset of a text selection.\n     *\n     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionStart)\n     */\n    set selectionStart(value: number | null) {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.selectionStart = value\n      }\n    }\n\n    get selectionStart() {\n      return this.textSelectableRef.value?.selectionStart ?? null\n    }\n\n    /**\n     * Gets or sets the end position or offset of a text selection.\n     *\n     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/selectionEnd)\n     */\n    set selectionEnd(value: number | null) {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.selectionEnd = value\n      }\n    }\n\n    get selectionEnd() {\n      return this.textSelectableRef.value?.selectionEnd ?? null\n    }\n\n    /**\n     * Gets or sets the direction in which selection occurred.\n     *\n     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/selectionDirection)\n     */\n    set selectionDirection(value: 'forward' | 'backward' | 'none' | null) {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.selectionDirection = value\n      }\n    }\n\n    get selectionDirection() {\n      return this.textSelectableRef.value?.selectionDirection ?? null\n    }\n\n    /**\n     * Selects all the text in the text field.\n     *\n     * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select)\n     */\n    select() {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.select()\n      }\n    }\n\n    /**\n     * Sets the start and end positions of a selection in the text field.\n     *\n     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setSelectionRange)\n     *\n     * @param start The offset into the text field for the start of the selection.\n     * @param end The offset into the text field for the end of the selection.\n     * @param direction The direction in which the selection is performed.\n     */\n    setSelectionRange(start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none') {\n      if (this.textSelectableRef.value) {\n        this.textSelectableRef.value.setSelectionRange(start, end, direction)\n      }\n    }\n\n    /**\n     * Replaces a range of text with a new string.\n     *\n     * [MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLInputElement/setRangeText)\n     *\n     * @param replacement The string to insert.\n     * @param start The 0-based index of the first character to replace. Defaults to the current `selectionStart` value (the start of the user's current selection).\n     * @param end The 0-based index of the character after the last character to replace. Defaults to the current `selectionEnd` value (the end of the user's current selection).\n     * @param selectMode A string defining how the selection should be set after the text has been replaced.\n     */\n    setRangeText(\n      replacement: string,\n      start?: number,\n      end?: number,\n      selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve',\n    ) {\n      if (this.textSelectableRef.value) {\n        const selectionStart = start ?? this.textSelectableRef.value.selectionStart!\n\n        const selectionEnd = end ?? this.textSelectableRef.value.selectionEnd!\n\n        this.textSelectableRef.value.setRangeText(replacement, selectionStart, selectionEnd, selectMode)\n\n        if (this.value !== this.textSelectableRef.value.value) {\n          this.value = this.textSelectableRef.value.value\n        }\n      }\n    }\n\n    /**\n     * Returns the native `<input>` or `<textarea>` element used under the hood.\n     */\n    async getNativeElement() {\n      // wait for the element to be rendered\n      await this.updateComplete\n\n      return this.textSelectableRef.value\n    }\n  }\n\n  return TextSelectableElement as unknown as Constructable<TextSelectableMixinInterface> & T\n}\n"],"names":["TextSelectableMixin","superClass","constructor","this","textSelectableRef","createRef","selectionStart","value","_b","_a","selectionEnd","selectionDirection","select","setSelectionRange","start","end","direction","setRangeText","replacement","selectMode","getNativeElement","updateComplete"],"mappings":"kDAwBM,SAAUA,EAA+EC,GAmH7F,OAlHA,cAAoCA,EAApC,WAAAC,uBACYC,KAAiBC,kBAAGC,GA+G/B,CAxGC,kBAAIC,CAAeC,GACbJ,KAAKC,kBAAkBG,QACzBJ,KAAKC,kBAAkBG,MAAMD,eAAiBC,EAEjD,CAED,kBAAID,WACF,OAAuD,QAAhDE,EAA8B,QAA9BC,EAAAN,KAAKC,kBAAkBG,aAAO,IAAAE,OAAA,EAAAA,EAAAH,sBAAkB,IAAAE,EAAAA,EAAA,IACxD,CAOD,gBAAIE,CAAaH,GACXJ,KAAKC,kBAAkBG,QACzBJ,KAAKC,kBAAkBG,MAAMG,aAAeH,EAE/C,CAED,gBAAIG,WACF,OAAqD,QAA9CF,EAA8B,QAA9BC,EAAAN,KAAKC,kBAAkBG,aAAO,IAAAE,OAAA,EAAAA,EAAAC,oBAAgB,IAAAF,EAAAA,EAAA,IACtD,CAOD,sBAAIG,CAAmBJ,GACjBJ,KAAKC,kBAAkBG,QACzBJ,KAAKC,kBAAkBG,MAAMI,mBAAqBJ,EAErD,CAED,sBAAII,WACF,OAA2D,QAApDH,EAA8B,QAA9BC,EAAAN,KAAKC,kBAAkBG,aAAO,IAAAE,OAAA,EAAAA,EAAAE,0BAAsB,IAAAH,EAAAA,EAAA,IAC5D,CAOD,MAAAI,GACMT,KAAKC,kBAAkBG,OACzBJ,KAAKC,kBAAkBG,MAAMK,QAEhC,CAWD,iBAAAC,CAAkBC,EAAsBC,EAAoBC,GACtDb,KAAKC,kBAAkBG,OACzBJ,KAAKC,kBAAkBG,MAAMM,kBAAkBC,EAAOC,EAAKC,EAE9D,CAYD,YAAAC,CACEC,EACAJ,EACAC,EACAI,EAAsD,YAEtD,GAAIhB,KAAKC,kBAAkBG,MAAO,CAChC,MAAMD,EAAiBQ,QAAAA,EAASX,KAAKC,kBAAkBG,MAAMD,eAEvDI,EAAeK,QAAAA,EAAOZ,KAAKC,kBAAkBG,MAAMG,aAEzDP,KAAKC,kBAAkBG,MAAMU,aAAaC,EAAaZ,EAAgBI,EAAcS,GAEjFhB,KAAKI,QAAUJ,KAAKC,kBAAkBG,MAAMA,QAC9CJ,KAAKI,MAAQJ,KAAKC,kBAAkBG,MAAMA,MAE7C,CACF,CAKD,sBAAMa,GAIJ,aAFMjB,KAAKkB,eAEJlB,KAAKC,kBAAkBG,KAC/B,EAIL"}

package/lib/Textarea.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,html as r,nothing as o,LitElement as n}from"lit";import{property as a,customElement as i}from"lit/decorators.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{ref as s}from"lit/directives/ref.js";import{o as c}from"./observe-D0n0zOfU.js";import{N as p}from"./events-Bv6wNHwJ.js";import{A as d}from"./AutocompleteMixin-D8eiOxvO.js";import{F as u}from"./FocusableMixin-BlQLNPdJ.js";import{F as h}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as m}from"./InputMixin-LetXsCyv.js";import{R as v,s as x}from"./TextField-B955GOhe.js";import{S as b}from"./SizeMixin-CU9cLbLC.js";import{T as f}from"./TextSelectableMixin-Cfv__lHS.js";import{s as g}from"./Component-DSU3Qp0O.js";import{s as z}from"./FormField-BFaVzUjk.js";import{LocalizeController as j}from"./LocalizeController.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./VisuallyHidden.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";const y=t`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size, 240px);--_n-textarea-block-size:var(--n-textarea-block-size, 76px);--_n-textarea-max-block-size:var(--n-textarea-max-block-size, 500px);--_n-input-background:var(--n-textarea-background, var(--n-color-surface));--_n-input-color:var(--n-textarea-color, var(--n-color-text));--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-strong));--_n-input-border-radius:var(--n-textarea-border-radius, var(--n-border-radius-s))}.n-input-container{position:relative;inline-size:var(--_n-textarea-inline-size)}.n-input{min-block-size:var(--_n-textarea-block-size);max-block-size:var(--_n-textarea-max-block-size);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:auto}:host([expand]){--_n-textarea-inline-size:100%}.n-character-counter{margin-block-start:var(--n-space-xs);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker)}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent));--_n-input-background:var(--n-textarea-background, var(--n-color-surface))}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-background:var(--n-textarea-background-inactive, var(--n-color-active));--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-active));--_n-input-color:var(--n-textarea-color, var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-textarea-color, var(--n-color-text))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color, var(--n-color-accent))}`;let $=class extends(b(h(d(v(f(m(u(n)))))))){constructor(){super(...arguments),this.inputId="textarea",this.localize=new j(this,{onLangChange:()=>this.handleLangChange()}),this.resize="vertical",this.expand=!1,this.characterCounter=!1}render(){var e;return r`${this.renderLabel()}<div class="n-input-container"><textarea ${s(this.textSelectableRef)} ${s(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${l(this.name)}" maxlength="${l(this.maxLength)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${l(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" @select="${this.handleSelect}" aria-describedby="${l(this.getDescribedBy())}" aria-invalid="${l(this.getInvalid())}" autocomplete="${this.autocomplete}"></textarea> ${this.characterCounter?this.renderCharacterCounter():o}</div>${this.renderError()} ${this.isHintBelow?this.renderHint():o}`}handleSelect(e){e.stopPropagation(),this.dispatchEvent(new p("select"))}renderCharacterCounter(){const{value:e,maxLength:t}=this,o="string"==typeof e?this.lengthMeasurer(e):0,n=t?t-o:null,a=t?`${o}/${t}`:o;return r`<nord-visually-hidden aria-live="polite" aria-atomic="true">${null!=n&&n<=10?this.localize.term("remainingCharacters",n):""}</nord-visually-hidden><div class="n-character-counter">${a}</div>`}handleLangChange(){const e=this.localize.resolvedLang;this.lengthMeasurer=function(e){if(Intl.Segmenter){const t=new Intl.Segmenter(e);return e=>[...t.segment(e)].length}return e=>e.length}(e)}resizeToFitContent(){const e=this.focusableRef.value;if(e)if("auto"===this.resize){e.style.height="auto";const t=getComputedStyle(e),r=e.offsetHeight-e.clientHeight,o=Number.parseFloat(t.minBlockSize)||0,n=Number.parseFloat(t.maxBlockSize)||Number.POSITIVE_INFINITY,a=e.scrollHeight+r;e.style.height=`${Math.min(Math.max(a,o),n)}px`}else e.style.height=""}};$.styles=[g,z,x,y],e([a({reflect:!0})],$.prototype,"resize",void 0),e([a({reflect:!0,type:Boolean})],$.prototype,"expand",void 0),e([a({reflect:!0,attribute:"maxlength",type:Number})],$.prototype,"maxLength",void 0),e([a({reflect:!0,type:Boolean,attribute:"character-counter"})],$.prototype,"characterCounter",void 0),e([c("resize","updated"),c("value","updated")],$.prototype,"resizeToFitContent",null),$=e([i("nord-textarea")],$);var _=$;export{_ as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as r,nothing as o,LitElement as i}from"lit";import{property as a,customElement as n}from"lit/decorators.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{ref as s}from"lit/directives/ref.js";import{o as c}from"./observe-D0n0zOfU.js";import{N as p}from"./events-Bv6wNHwJ.js";import{A as d}from"./AutocompleteMixin-D8eiOxvO.js";import{F as u}from"./FocusableMixin-BlQLNPdJ.js";import{F as m}from"./FormAssociatedMixin-D9aPREgv.js";import{I as h}from"./InputMixin-LetXsCyv.js";import{R as v}from"./ReadonlyMixin-BdJPGtQ3.js";import{S as x}from"./SizeMixin-CU9cLbLC.js";import{T as b}from"./TextSelectableMixin-Cfv__lHS.js";import{s as z}from"./Component-BJ5O5n8k.js";import{s as j}from"./FormField-CMgEFZCK.js";import{s as f}from"./TextField-CSKvieoG.js";import{LocalizeController as g}from"./LocalizeController.js";import"./FormDataController-OUt5L5uC.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"./EventController-BBOmvfLa.js";import"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.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 y=e`:host{--_n-textarea-inline-size:var(--n-textarea-inline-size,240px);--_n-textarea-block-size:var(--n-textarea-block-size,76px);--_n-textarea-max-block-size:var(--n-textarea-max-block-size,500px);--_n-input-background:var(--n-textarea-background,var(--n-color-surface));--_n-input-color:var(--n-textarea-color,var(--n-color-text));--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-border-strong));--_n-input-border-radius:var(--n-textarea-border-radius,var(--n-border-radius-s))}.n-input-container{inline-size:var(--_n-textarea-inline-size);position:relative}.n-input{display:block;max-block-size:var(--_n-textarea-max-block-size);min-block-size:var(--_n-textarea-block-size);resize:vertical;transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly)}:host([resize=auto]) .n-input{overflow:auto;resize:none}:host([expand]){--_n-textarea-inline-size:100%}.n-character-counter{color:var(--n-color-text-weaker);font-size:var(--n-font-size-s);margin-block-start:var(--n-space-xs)}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-border-hover))}.n-input:focus{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-accent));--_n-input-background:var(--n-textarea-background,var(--n-color-surface))}.n-input[aria-invalid=true]{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-status-danger))!important}.n-input:disabled,.n-input[readonly],.n-label-container:hover+.n-input-container .n-input:disabled,.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-background:var(--n-textarea-background-inactive,var(--n-color-active));--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-active));--_n-input-color:var(--n-textarea-color,var(--n-color-text-weakest))}.n-input[readonly],.n-label-container:hover+.n-input-container .n-input[readonly]{--_n-input-color:var(--n-textarea-color,var(--n-color-text))}.n-input[readonly]:focus{--_n-input-border-color:var(--n-textarea-border-color,var(--n-color-accent))}`;let $=class extends(x(m(d(v(b(h(u(i)))))))){constructor(){super(...arguments),this.inputId="textarea",this.localize=new g(this,{onLangChange:()=>this.handleLangChange()}),this.resize="vertical",this.expand=!1,this.characterCounter=!1}render(){var t;return r`${this.renderLabel()}<div class="n-input-container"><textarea ${s(this.textSelectableRef)} ${s(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.effectiveDisabled}" ?readonly="${this.readonly}" ?required="${this.required}" name="${l(this.name)}" maxlength="${l(this.maxLength)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${l(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" @select="${this.handleSelect}" aria-label="${l(this.controlAriaLabel)}" aria-describedby="${l(this.controlAriaDescribedby)}" aria-invalid="${l(this.controlAriaInvalid)}" autocomplete="${this.autocomplete}"></textarea> ${this.characterCounter?this.renderCharacterCounter():o}</div>${this.renderError()} ${this.isHintBelow?this.renderHint():o}`}handleSelect(t){t.stopPropagation(),this.dispatchEvent(new p("select"))}renderCharacterCounter(){const{value:t,maxLength:e}=this,o="string"==typeof t?this.lengthMeasurer(t):0,i=e?e-o:null,a=e?`${o}/${e}`:o;return r`<nord-visually-hidden aria-live="polite" aria-atomic="true">${null!=i&&i<=10?this.localize.term("remainingCharacters",i):""}</nord-visually-hidden><div class="n-character-counter">${a}</div>`}handleLangChange(){const t=this.localize.resolvedLang;this.lengthMeasurer=function(t){if(Intl.Segmenter){const e=new Intl.Segmenter(t);return t=>[...e.segment(t)].length}return t=>t.length}(t)}resizeToFitContent(){const t=this.focusableRef.value;if(t)if("auto"===this.resize){t.style.height="auto";const e=getComputedStyle(t),r=t.offsetHeight-t.clientHeight,o=Number.parseFloat(e.minBlockSize)||0,i=Number.parseFloat(e.maxBlockSize)||Number.POSITIVE_INFINITY,a=t.scrollHeight+r;t.style.height=`${Math.min(Math.max(a,o),i)}px`}else t.style.height=""}};$.styles=[z,j,f,y],t([a({reflect:!0})],$.prototype,"resize",void 0),t([a({reflect:!0,type:Boolean})],$.prototype,"expand",void 0),t([a({reflect:!0,attribute:"maxlength",type:Number})],$.prototype,"maxLength",void 0),t([a({reflect:!0,type:Boolean,attribute:"character-counter"})],$.prototype,"characterCounter",void 0),t([c("resize","updated"),c("value","updated")],$.prototype,"resizeToFitContent",null),$=t([n("nord-textarea")],$);var _=$;export{_ as default};
 //# sourceMappingURL=Textarea.js.map

package/lib/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { observe } from '../common/decorators/observe.js'\n\nimport { NordEvent } from '../common/events.js'\nimport { AutocompleteMixin } from '../common/mixins/AutocompleteMixin.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { ReadonlyMixin } from '../common/mixins/ReadonlyMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\n\nimport { TextSelectableMixin } from '../common/mixins/TextSelectableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport formFieldStyle from '../common/styles/FormField.css'\nimport textFieldStyle from '../common/styles/TextField.css'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Textarea.css'\n\nfunction createLengthMeasurer(locale: string) {\n  if (Intl.Segmenter) {\n    const segmenter = new Intl.Segmenter(locale)\n    return (value: string) => [...segmenter.segment(value)].length\n  }\n\n  return (value: string) => value.length\n}\n\n/**\n * Textarea is a component that allows user to write text over\n * multiple rows. Used when the expected user input is long.\n * For shorter input, use the Input component.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the textarea.\n * @slot error - Optional slot that holds error text for the textarea.\n *\n * @cssprop [--n-textarea-inline-size=240px] - Controls the inline size, or width, of the textarea.\n * @cssprop [--n-textarea-block-size=76px] - Controls the minimum block size, or height, of the textarea. When `resize=\"auto\"`, the textarea grows from this height as content is added.\n * @cssprop [--n-textarea-max-block-size=500px] - Controls the maximum block size, or height, of the textarea. When `resize=\"auto\"`, the textarea stops growing at this height and a scrollbar appears.\n * @cssprop [--n-textarea-background=var(--n-color-active)] - Controls the background of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-color=var(--n-color-text)] - Controls the text color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-color=var(--n-color-border-strong)] - Controls the border color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n *\n * @localization remainingCharacters - A function which receives the number of remaining characters and returns a string to be used as the aria-live message.\n */\n@customElement('nord-textarea')\nexport default class Textarea extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(TextSelectableMixin(InputMixin(FocusableMixin(LitElement)))))),\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  protected inputId = 'textarea'\n\n  private lengthMeasurer!: (value: string) => number\n  private localize = new LocalizeController<'nord-textarea'>(this, {\n    onLangChange: () => this.handleLangChange(),\n  })\n\n  /**\n   * Controls whether the textarea is resizable.\n   * By default is manually resizable vertically.\n   * Set to \"auto\" to enable auto-resizing as content grows.\n   */\n  @property({ reflect: true }) resize: 'vertical' | 'auto' = 'vertical'\n\n  /**\n   * Controls whether the textarea expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * Controls the max allowed length for the textarea.\n   */\n  @property({ reflect: true, attribute: 'maxlength', type: Number }) maxLength?: number\n\n  /**\n   * Controls whether to show a count of the number of characters in the textarea.\n   * When combined with `maxlength`, both the count and the max length are shown.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'character-counter' }) characterCounter = false\n\n  render() {\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <textarea\n          ${ref(this.textSelectableRef)}\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          maxlength=${ifDefined(this.maxLength)}\n          .value=${this.value ?? ''}\n          placeholder=${ifDefined(this.placeholder)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          @select=${this.handleSelect}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          autocomplete=${this.autocomplete as any}\n        ></textarea>\n\n        ${this.characterCounter ? this.renderCharacterCounter() : nothing}\n      </div>\n\n      ${this.renderError()}\n      ${this.isHintBelow ? this.renderHint() : nothing}\n    `\n  }\n\n  protected handleSelect(e: Event) {\n    e.stopPropagation()\n\n    /**\n     * Fired when some text has been selected.\n     */\n    this.dispatchEvent(new NordEvent('select'))\n  }\n\n  private renderCharacterCounter() {\n    const { value, maxLength } = this\n    const length = typeof value === 'string' ? this.lengthMeasurer(value) : 0\n\n    const remainder = maxLength ? maxLength - length : null\n    const counter = maxLength ? `${length}/${maxLength}` : length\n\n    return html`\n      <nord-visually-hidden aria-live=\"polite\" aria-atomic=\"true\">\n        ${remainder != null && remainder <= 10 ? this.localize.term('remainingCharacters', remainder) : ''}\n      </nord-visually-hidden>\n      <div class=\"n-character-counter\">${counter}</div>\n    `\n  }\n\n  private handleLangChange() {\n    const lang = this.localize.resolvedLang\n    this.lengthMeasurer = createLengthMeasurer(lang)\n  }\n\n  @observe('resize', 'updated')\n  @observe('value', 'updated')\n  protected resizeToFitContent() {\n    const textarea = this.focusableRef.value\n\n    if (!textarea) {\n      return\n    }\n\n    if (this.resize === 'auto') {\n      textarea.style.height = 'auto'\n      // scrollHeight includes padding but not border. With box-sizing: border-box,\n      // setting height directly to scrollHeight would shrink the content area by the\n      // border width and clip the last line. Add the border so padding-block is preserved,\n      // then clamp the result to the resolved min/max so the inline height never\n      // overshoots the cap.\n      const computed = getComputedStyle(textarea)\n      const borderSize = textarea.offsetHeight - textarea.clientHeight\n      const minHeight = Number.parseFloat(computed.minBlockSize) || 0\n      const maxHeight = Number.parseFloat(computed.maxBlockSize) || Number.POSITIVE_INFINITY\n      const desired = textarea.scrollHeight + borderSize\n\n      textarea.style.height = `${Math.min(Math.max(desired, minHeight), maxHeight)}px`\n    }\n    else {\n      textarea.style.height = ''\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-textarea': Textarea\n  }\n}\n"],"names":["Textarea","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","TextSelectableMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","localize","LocalizeController","onLangChange","handleLangChange","resize","expand","characterCounter","render","html","renderLabel","ref","textSelectableRef","focusableRef","disabled","readonly","required","ifDefined","name","maxLength","_a","value","placeholder","handleChange","handleInput","handleSelect","getDescribedBy","getInvalid","autocomplete","renderCharacterCounter","nothing","renderError","isHintBelow","renderHint","e","stopPropagation","dispatchEvent","NordEvent","length","lengthMeasurer","remainder","counter","term","lang","resolvedLang","locale","Intl","Segmenter","segmenter","segment","createLengthMeasurer","resizeToFitContent","textarea","style","height","computed","getComputedStyle","borderSize","offsetHeight","clientHeight","minHeight","Number","parseFloat","minBlockSize","maxHeight","maxBlockSize","POSITIVE_INFINITY","desired","scrollHeight","Math","min","max","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","type","Boolean","attribute","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../src/textarea/Textarea.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { observe } from '../common/decorators/observe.js'\n\nimport { NordEvent } from '../common/events.js'\nimport { AutocompleteMixin } from '../common/mixins/AutocompleteMixin.js'\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { ReadonlyMixin } from '../common/mixins/ReadonlyMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\n\nimport { TextSelectableMixin } from '../common/mixins/TextSelectableMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport formFieldStyle from '../common/styles/FormField.css'\nimport textFieldStyle from '../common/styles/TextField.css'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Textarea.css'\n\nfunction createLengthMeasurer(locale: string) {\n  if (Intl.Segmenter) {\n    const segmenter = new Intl.Segmenter(locale)\n    return (value: string) => [...segmenter.segment(value)].length\n  }\n\n  return (value: string) => value.length\n}\n\n/**\n * Textarea is a component that allows user to write text over\n * multiple rows. Used when the expected user input is long.\n * For shorter input, use the Input component.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the textarea.\n * @slot error - Optional slot that holds error text for the textarea.\n *\n * @cssprop [--n-textarea-inline-size=240px] - Controls the inline size, or width, of the textarea.\n * @cssprop [--n-textarea-block-size=76px] - Controls the minimum block size, or height, of the textarea. When `resize=\"auto\"`, the textarea grows from this height as content is added.\n * @cssprop [--n-textarea-max-block-size=500px] - Controls the maximum block size, or height, of the textarea. When `resize=\"auto\"`, the textarea stops growing at this height and a scrollbar appears.\n * @cssprop [--n-textarea-background=var(--n-color-active)] - Controls the background of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-color=var(--n-color-text)] - Controls the text color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-color=var(--n-color-border-strong)] - Controls the border color of the textarea, using our [color tokens](/tokens/#color).\n * @cssprop [--n-textarea-border-radius=var(--n-border-radius-s)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n *\n * @localization remainingCharacters - A function which receives the number of remaining characters and returns a string to be used as the aria-live message.\n */\n@customElement('nord-textarea')\nexport default class Textarea extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(ReadonlyMixin(TextSelectableMixin(InputMixin(FocusableMixin(LitElement)))))),\n) {\n  static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n  protected inputId = 'textarea'\n\n  private lengthMeasurer!: (value: string) => number\n  private localize = new LocalizeController<'nord-textarea'>(this, {\n    onLangChange: () => this.handleLangChange(),\n  })\n\n  /**\n   * Controls whether the textarea is resizable.\n   * By default is manually resizable vertically.\n   * Set to \"auto\" to enable auto-resizing as content grows.\n   */\n  @property({ reflect: true }) resize: 'vertical' | 'auto' = 'vertical'\n\n  /**\n   * Controls whether the textarea expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * Controls the max allowed length for the textarea.\n   */\n  @property({ reflect: true, attribute: 'maxlength', type: Number }) maxLength?: number\n\n  /**\n   * Controls whether to show a count of the number of characters in the textarea.\n   * When combined with `maxlength`, both the count and the max length are shown.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'character-counter' }) characterCounter = false\n\n  render() {\n    return html`\n      ${this.renderLabel()}\n\n      <div class=\"n-input-container\">\n        <textarea\n          ${ref(this.textSelectableRef)}\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          class=\"n-input\"\n          ?disabled=${this.effectiveDisabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          maxlength=${ifDefined(this.maxLength)}\n          .value=${this.value ?? ''}\n          placeholder=${ifDefined(this.placeholder)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          @select=${this.handleSelect}\n          aria-label=${ifDefined(this.controlAriaLabel)}\n          aria-describedby=${ifDefined(this.controlAriaDescribedby)}\n          aria-invalid=${ifDefined(this.controlAriaInvalid)}\n          autocomplete=${this.autocomplete as any}\n        ></textarea>\n\n        ${this.characterCounter ? this.renderCharacterCounter() : nothing}\n      </div>\n\n      ${this.renderError()}\n      ${this.isHintBelow ? this.renderHint() : nothing}\n    `\n  }\n\n  protected handleSelect(e: Event) {\n    e.stopPropagation()\n\n    /**\n     * Fired when some text has been selected.\n     */\n    this.dispatchEvent(new NordEvent('select'))\n  }\n\n  private renderCharacterCounter() {\n    const { value, maxLength } = this\n    const length = typeof value === 'string' ? this.lengthMeasurer(value) : 0\n\n    const remainder = maxLength ? maxLength - length : null\n    const counter = maxLength ? `${length}/${maxLength}` : length\n\n    return html`\n      <nord-visually-hidden aria-live=\"polite\" aria-atomic=\"true\">\n        ${remainder != null && remainder <= 10 ? this.localize.term('remainingCharacters', remainder) : ''}\n      </nord-visually-hidden>\n      <div class=\"n-character-counter\">${counter}</div>\n    `\n  }\n\n  private handleLangChange() {\n    const lang = this.localize.resolvedLang\n    this.lengthMeasurer = createLengthMeasurer(lang)\n  }\n\n  @observe('resize', 'updated')\n  @observe('value', 'updated')\n  protected resizeToFitContent() {\n    const textarea = this.focusableRef.value\n\n    if (!textarea) {\n      return\n    }\n\n    if (this.resize === 'auto') {\n      textarea.style.height = 'auto'\n      // scrollHeight includes padding but not border. With box-sizing: border-box,\n      // setting height directly to scrollHeight would shrink the content area by the\n      // border width and clip the last line. Add the border so padding-block is preserved,\n      // then clamp the result to the resolved min/max so the inline height never\n      // overshoots the cap.\n      const computed = getComputedStyle(textarea)\n      const borderSize = textarea.offsetHeight - textarea.clientHeight\n      const minHeight = Number.parseFloat(computed.minBlockSize) || 0\n      const maxHeight = Number.parseFloat(computed.maxBlockSize) || Number.POSITIVE_INFINITY\n      const desired = textarea.scrollHeight + borderSize\n\n      textarea.style.height = `${Math.min(Math.max(desired, minHeight), maxHeight)}px`\n    }\n    else {\n      textarea.style.height = ''\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-textarea': Textarea\n  }\n}\n"],"names":["Textarea","SizeMixin","FormAssociatedMixin","AutocompleteMixin","ReadonlyMixin","TextSelectableMixin","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","localize","LocalizeController","onLangChange","handleLangChange","resize","expand","characterCounter","render","html","renderLabel","ref","textSelectableRef","focusableRef","effectiveDisabled","readonly","required","ifDefined","name","maxLength","_a","value","placeholder","handleChange","handleInput","handleSelect","controlAriaLabel","controlAriaDescribedby","controlAriaInvalid","autocomplete","renderCharacterCounter","nothing","renderError","isHintBelow","renderHint","e","stopPropagation","dispatchEvent","NordEvent","length","lengthMeasurer","remainder","counter","term","lang","resolvedLang","locale","Intl","Segmenter","segmenter","segment","createLengthMeasurer","resizeToFitContent","textarea","style","height","computed","getComputedStyle","borderSize","offsetHeight","clientHeight","minHeight","Number","parseFloat","minBlockSize","maxHeight","maxBlockSize","POSITIVE_INFINITY","desired","scrollHeight","Math","min","max","styles","componentStyle","formFieldStyle","textFieldStyle","__decorate","property","reflect","prototype","type","Boolean","attribute","observe","customElement"],"mappings":"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"}

package/lib/TimePicker.js

@@ -0,0 +1,2 @@
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as i,html as o,nothing as e,LitElement as r}from"lit";import{property as l,query as n,customElement as s}from"lit/decorators.js";import{repeat as a}from"lit/directives/repeat.js";import{N as d}from"./events-Bv6wNHwJ.js";import{D as p}from"./DraftComponentMixin-4qug5Rky.js";import{s as m}from"./Component-BJ5O5n8k.js";import{LocalizeController as h}from"./LocalizeController.js";import"./Input.js";import"./Dropdown.js";import"./DropdownItem.js";import"./Button.js";import"./Icon.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";import"./navigation-search-CBbIGzo2.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";import"lit/directives/ref.js";import"lit/directives/style-map.js";import"./DirectionController-ChvNGESZ.js";import"./ResizeController-14PUwRQy.js";import"./cond-CI1KbneT.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./FocusableMixin-BlQLNPdJ.js";import"./FormAssociatedMixin-D9aPREgv.js";import"./FormDataController-OUt5L5uC.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"./EventController-BBOmvfLa.js";import"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.js";import"./InputMixin-LetXsCyv.js";import"./ReadonlyMixin-BdJPGtQ3.js";import"./SizeMixin-CU9cLbLC.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./FormField-CMgEFZCK.js";import"./TextField-CSKvieoG.js";import"./observe-D0n0zOfU.js";import"./Popout-DpN7PP9h.js";import"./positioning-D-K8Mueq.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-BFC67Y2x.js";import"./DropdownItem-BYbOLth6.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";const u=i`:host{display:inline-block}nord-input{--n-input-picker-indicator-display:none}:host([expand]){display:block}`;function c(t){const i=t.match(/^(\d{2}):(\d{2})$/);return i?60*Number(i[1])+Number(i[2]):null}function v(t){const i=Math.floor(t/60)%24;return`${String(i).padStart(2,"0")}:${String(t%60).padStart(2,"0")}`}let j=class extends(p(r)){constructor(){super(...arguments),this.localize=new h(this),this.start="09:00",this.end="17:00",this.interval=30,this.roundToInterval=!1,this.size="m",this.expand=!1,this.disabled=!1,this.readonly=!1,this.required=!1,this.hideLabel=!1,this.hintBelow=!1,this.hideRequired=!1,this.handleFieldChange=t=>{const i=t.target.value;this.setValue(this.roundToInterval?this.roundToNearestInterval(i):i)}}connectedCallback(){var t;super.connectedCallback(),null!==(t=this.ariaObserver)&&void 0!==t||(this.ariaObserver=new MutationObserver((()=>this.requestUpdate()))),this.ariaObserver.observe(this,{attributes:!0,attributeFilter:["aria-label","aria-labelledby"]})}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.ariaObserver)||void 0===t||t.disconnect(),this.ariaObserver=void 0}focus(){var t;null===(t=this.input)||void 0===t||t.focus()}get clampedInterval(){return this.interval>1&&this.interval<360?this.interval:30}get hostAccessibleName(){const t=this.getAttribute("aria-label");if(t)return t;const i=this.getAttribute("aria-labelledby");if(!i)return"";const o=this.getRootNode();return i.split(/\s+/).map((t=>{var i,e,r,l;return null!==(l=null===(r=null===(e=null===(i=o.getElementById)||void 0===i?void 0:i.call(o,t))||void 0===e?void 0:e.textContent)||void 0===r?void 0:r.trim())&&void 0!==l?l:""})).filter(Boolean).join(" ")}formatLabel(t){const i=c(t);if(null===i)return t;const o=new Date(2e3,0,1,Math.floor(i/60),i%60);try{return new Intl.DateTimeFormat(void 0,{hour:"numeric",minute:"2-digit",...this.hourFormat?{hour12:"12h"===this.hourFormat}:{}}).format(o)}catch(i){return t}}get options(){var t,i;const o=null!==(t=c(this.start))&&void 0!==t?t:540,e=null!==(i=c(this.end))&&void 0!==i?i:1020;if(e<o)return[];const r=[];for(let t=o;t<=e;t+=this.clampedInterval){const i=v(t);r.push({value:i,label:this.formatLabel(i)})}return r}roundToNearestInterval(t){var i,o;const e=c(t),r=null!==(i=c(this.start))&&void 0!==i?i:540,l=null!==(o=c(this.end))&&void 0!==o?o:1020;if(null===e||l<r)return t;const n=this.clampedInterval,s=r+Math.round((e-r)/n)*n;return v(Math.min(Math.max(s,r),l))}setValue(t){this.value!==t&&(this.value=t,this.dispatchEvent(new d("change")))}handleSelect(t){var i;this.setValue(t),null===(i=this.dropdown)||void 0===i||i.hide()}render(){var t,i,r,l,n,s,d;return o`<nord-input type="time" label="${null!==(t=this.label)&&void 0!==t?t:e}" hint="${null!==(i=this.hint)&&void 0!==i?i:e}" error="${null!==(r=this.error)&&void 0!==r?r:e}" ?hide-label="${this.hideLabel}" ?hint-below="${this.hintBelow}" ?hide-required="${this.hideRequired}" aria-label="${this.hostAccessibleName||e}" name="${null!==(l=this.name)&&void 0!==l?l:e}" size="${this.size}" min="${null!==(n=this.min)&&void 0!==n?n:e}" max="${null!==(s=this.max)&&void 0!==s?s:e}" ?expand="${this.expand}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" .value="${null!==(d=this.value)&&void 0!==d?d:""}" @change="${this.handleFieldChange}"><nord-dropdown slot="end" align="end" size="s"><nord-button slot="toggle" size="${this.size}" square ?disabled="${this.disabled||this.readonly}"><nord-icon name="interface-time" label="${this.localize.term("chooseTime")}"></nord-icon></nord-button>${a(this.options,(t=>t.value),(t=>o`<nord-dropdown-item ?active="${t.value===this.value}" @click="${()=>this.handleSelect(t.value)}">${t.label}</nord-dropdown-item>`))}</nord-dropdown></nord-input>`}};j.styles=[m,u],t([l()],j.prototype,"value",void 0),t([l()],j.prototype,"name",void 0),t([l()],j.prototype,"start",void 0),t([l()],j.prototype,"end",void 0),t([l({type:Number})],j.prototype,"interval",void 0),t([l({type:Boolean,reflect:!0,attribute:"round-to-interval"})],j.prototype,"roundToInterval",void 0),t([l({reflect:!0,attribute:"hour-format"})],j.prototype,"hourFormat",void 0),t([l()],j.prototype,"min",void 0),t([l()],j.prototype,"max",void 0),t([l({reflect:!0})],j.prototype,"size",void 0),t([l({type:Boolean})],j.prototype,"expand",void 0),t([l({type:Boolean})],j.prototype,"disabled",void 0),t([l({type:Boolean})],j.prototype,"readonly",void 0),t([l({type:Boolean})],j.prototype,"required",void 0),t([l()],j.prototype,"label",void 0),t([l()],j.prototype,"hint",void 0),t([l()],j.prototype,"error",void 0),t([l({type:Boolean,attribute:"hide-label"})],j.prototype,"hideLabel",void 0),t([l({type:Boolean,attribute:"hint-below"})],j.prototype,"hintBelow",void 0),t([l({type:Boolean,attribute:"hide-required"})],j.prototype,"hideRequired",void 0),t([n("nord-input")],j.prototype,"input",void 0),t([n("nord-dropdown")],j.prototype,"dropdown",void 0),j=t([s("nord-time-picker")],j);var b=j;export{b as default};
+//# sourceMappingURL=TimePicker.js.map

package/lib/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","sources":["../src/time-picker/TimePicker.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { repeat } from 'lit/directives/repeat.js'\n\nimport { NordEvent } from '../common/events.js'\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './TimePicker.css'\nimport '../input/Input.js'\nimport '../dropdown/Dropdown.js'\nimport '../dropdown-item/DropdownItem.js'\nimport '../button/Button.js'\nimport '../icon/Icon.js'\n\ninterface TimeOption {\n  value: string\n  label: string\n}\n\n/** Minutes since midnight from an ISO `HH:mm` value, or null. */\nfunction isoToMinutes(value: string): number | null {\n  const match = value.match(/^(\\d{2}):(\\d{2})$/)\n  return match ? Number(match[1]) * 60 + Number(match[2]) : null\n}\n\n/** ISO `HH:mm` from minutes since midnight. */\nfunction minutesToIso(total: number): string {\n  const hours = Math.floor(total / 60) % 24\n  return `${String(hours).padStart(2, '0')}:${String(total % 60).padStart(2, '0')}`\n}\n\n/**\n * Time Picker pairs the browser's native time field with a dropdown of quick\n * options, generated at a configurable `interval` between `start` and `end`.\n * The native field handles typing, locale-aware display and validation; the\n * dropdown is a shortcut for common times.\n *\n * The value is held in ISO `HH:mm` format.\n *\n * Like a native input, Time Picker is a control only — it has no built-in\n * label, hint or error. Compose it inside a [Field](/components/field/) (with a\n * [Field Label](/components/field-label/), [Field Description](/components/field-description/)\n * and [Field Error](/components/field-error/)) to label it and add help or error text.\n *\n * @status draft\n * @category form\n *\n * @fires change - Fired when the selected time changes.\n *\n * @localization chooseTime - Accessible label for the dropdown toggle button.\n */\n@customElement('nord-time-picker')\nexport default class TimePicker extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private localize = new LocalizeController<'nord-time-picker'>(this)\n\n  private ariaObserver?: MutationObserver\n\n  /** The selected time, in ISO `HH:mm` format. */\n  @property() value?: string\n\n  /** Name submitted with the form. */\n  @property() name?: string\n\n  /** Earliest time offered in the dropdown, ISO `HH:mm`. @default \"09:00\" */\n  @property() start = '09:00'\n\n  /** Latest time offered in the dropdown, ISO `HH:mm`. @default \"17:00\" */\n  @property() end = '17:00'\n\n  /** Minutes between each option in the dropdown. @default 30 */\n  @property({ type: Number }) interval = 30\n\n  /** When set, a typed time is rounded to the nearest interval option; otherwise any time is accepted. */\n  @property({ type: Boolean, reflect: true, attribute: 'round-to-interval' }) roundToInterval = false\n\n  /** Display dropdown times in 12-hour (AM/PM) or 24-hour format; omit to use the locale default. */\n  @property({ reflect: true, attribute: 'hour-format' }) hourFormat?: '12h' | '24h'\n\n  /** Earliest time the field will accept, ISO `HH:mm`. */\n  @property() min?: string\n\n  /** Latest time the field will accept, ISO `HH:mm`. */\n  @property() max?: string\n\n  /** Size of the field. @default \"m\" */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 'm'\n\n  /** Whether the field expands to fill its container. */\n  @property({ type: Boolean }) expand = false\n\n  /** Whether the field is disabled. */\n  @property({ type: Boolean }) disabled = false\n\n  /** Whether the field is read-only. */\n  @property({ type: Boolean }) readonly = false\n\n  /** Whether a value is required when submitting a form. */\n  @property({ type: Boolean }) required = false\n\n  /**\n   * Label for the control. Rendered by the inner input when used standalone;\n   * ignored when wrapped in a `<nord-field>` (the Field provides the label).\n   */\n  @property() label?: string\n\n  /** Optional hint text. Ignored inside a `<nord-field>`. */\n  @property() hint?: string\n\n  /** Optional error text. Ignored inside a `<nord-field>`. */\n  @property() error?: string\n\n  /** Visually hide the label, but keep it for assistive technology. */\n  @property({ type: Boolean, attribute: 'hide-label' }) hideLabel = false\n\n  /** Render the hint below the control instead of below the label. */\n  @property({ type: Boolean, attribute: 'hint-below' }) hintBelow = false\n\n  /** Visually hide the required indicator, but keep the required state for AT. */\n  @property({ type: Boolean, attribute: 'hide-required' }) hideRequired = false\n\n  @query('nord-input') private input?: HTMLElement & { focus: () => void, value: string }\n\n  @query('nord-dropdown') private dropdown?: HTMLElement & { hide: () => void }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    // Inside a <nord-field> the inner nord-input consumes the field context\n    // directly (the request event crosses this shadow boundary), so it names and\n    // describes itself. Standalone, it renders the forwarded label/hint/error.\n    // We still re-render when a consumer sets aria-label on the host so it forwards.\n    this.ariaObserver ??= new MutationObserver(() => this.requestUpdate())\n    this.ariaObserver.observe(this, {\n      attributes: true,\n      attributeFilter: ['aria-label', 'aria-labelledby'],\n    })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.ariaObserver?.disconnect()\n    this.ariaObserver = undefined\n  }\n\n  /** Move focus to the field, so a Field Label's click-to-focus works. */\n  override focus(): void {\n    this.input?.focus()\n  }\n\n  private get clampedInterval(): number {\n    return this.interval > 1 && this.interval < 360 ? this.interval : 30\n  }\n\n  /**\n   * Accessible name from a consumer-set host `aria-label` / `aria-labelledby`,\n   * forwarded to the inner input as `aria-label` (an external `aria-labelledby`\n   * can't cross the shadow boundary). Inside a `<nord-field>` the inner input\n   * takes its name from the field context instead.\n   */\n  private get hostAccessibleName(): string {\n    const ariaLabel = this.getAttribute('aria-label')\n    if (ariaLabel) {\n      return ariaLabel\n    }\n    const labelledby = this.getAttribute('aria-labelledby')\n    if (!labelledby) {\n      return ''\n    }\n    const root = this.getRootNode() as Document | ShadowRoot\n    return labelledby\n      .split(/\\s+/)\n      .map(id => root.getElementById?.(id)?.textContent?.trim() ?? '')\n      .filter(Boolean)\n      .join(' ')\n  }\n\n  /** Locale-aware label for a `HH:mm` value (matches how the native field reads). */\n  private formatLabel(iso: string): string {\n    const minutes = isoToMinutes(iso)\n    if (minutes === null) {\n      return iso\n    }\n    const date = new Date(2000, 0, 1, Math.floor(minutes / 60), minutes % 60)\n    try {\n      return new Intl.DateTimeFormat(undefined, {\n        hour: 'numeric',\n        minute: '2-digit',\n        ...(this.hourFormat ? { hour12: this.hourFormat === '12h' } : {}),\n      }).format(date)\n    }\n    catch {\n      return iso\n    }\n  }\n\n  /** Generated dropdown options between `start` and `end`. */\n  private get options(): TimeOption[] {\n    const startMin = isoToMinutes(this.start) ?? 540\n    const endMin = isoToMinutes(this.end) ?? 1020\n    if (endMin < startMin) {\n      return []\n    }\n    const out: TimeOption[] = []\n    for (let m = startMin; m <= endMin; m += this.clampedInterval) {\n      const iso = minutesToIso(m)\n      out.push({ value: iso, label: this.formatLabel(iso) })\n    }\n    return out\n  }\n\n  /** Round a `HH:mm` value to the nearest interval option, clamped within `start`/`end`. */\n  private roundToNearestInterval(iso: string): string {\n    const minutes = isoToMinutes(iso)\n    const startMin = isoToMinutes(this.start) ?? 540\n    const endMin = isoToMinutes(this.end) ?? 1020\n    if (minutes === null || endMin < startMin) {\n      return iso\n    }\n    const step = this.clampedInterval\n    const rounded = startMin + Math.round((minutes - startMin) / step) * step\n    const clamped = Math.min(Math.max(rounded, startMin), endMin)\n    return minutesToIso(clamped)\n  }\n\n  private setValue(iso: string): void {\n    if (this.value === iso) {\n      return\n    }\n    this.value = iso\n    this.dispatchEvent(new NordEvent('change'))\n  }\n\n  private handleFieldChange = (event: Event): void => {\n    const value = (event.target as HTMLInputElement).value\n    this.setValue(this.roundToInterval ? this.roundToNearestInterval(value) : value)\n  }\n\n  private handleSelect(iso: string): void {\n    this.setValue(iso)\n    this.dropdown?.hide()\n  }\n\n  render() {\n    return html`\n      <nord-input\n        type=\"time\"\n        label=${this.label ?? nothing}\n        hint=${this.hint ?? nothing}\n        error=${this.error ?? nothing}\n        ?hide-label=${this.hideLabel}\n        ?hint-below=${this.hintBelow}\n        ?hide-required=${this.hideRequired}\n        aria-label=${this.hostAccessibleName || nothing}\n        name=${this.name ?? nothing}\n        size=${this.size}\n        min=${this.min ?? nothing}\n        max=${this.max ?? nothing}\n        ?expand=${this.expand}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        .value=${this.value ?? ''}\n        @change=${this.handleFieldChange}\n      >\n        <nord-dropdown slot=\"end\" align=\"end\" size=\"s\">\n          <nord-button slot=\"toggle\" size=${this.size} square ?disabled=${this.disabled || this.readonly}>\n            <nord-icon name=\"interface-time\" label=${this.localize.term('chooseTime')}></nord-icon>\n          </nord-button>\n          ${repeat(\n            this.options,\n            option => option.value,\n            option => html`\n              <nord-dropdown-item\n                ?active=${option.value === this.value}\n                @click=${() => this.handleSelect(option.value)}\n              >\n                ${option.label}\n              </nord-dropdown-item>\n            `,\n          )}\n        </nord-dropdown>\n      </nord-input>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-time-picker': TimePicker\n  }\n}\n"],"names":["isoToMinutes","value","match","Number","minutesToIso","total","hours","Math","floor","String","padStart","TimePicker","DraftComponentMixin","LitElement","constructor","this","localize","LocalizeController","start","end","interval","roundToInterval","size","expand","disabled","readonly","required","hideLabel","hintBelow","hideRequired","handleFieldChange","event","target","setValue","roundToNearestInterval","connectedCallback","super","_a","ariaObserver","MutationObserver","requestUpdate","observe","attributes","attributeFilter","disconnectedCallback","disconnect","undefined","focus","input","clampedInterval","hostAccessibleName","ariaLabel","getAttribute","labelledby","root","getRootNode","split","map","id","_b","_c","_d","getElementById","call","textContent","trim","filter","Boolean","join","formatLabel","iso","minutes","date","Date","Intl","DateTimeFormat","hour","minute","hourFormat","hour12","format","options","startMin","endMin","out","m","push","label","step","rounded","round","min","max","dispatchEvent","NordEvent","handleSelect","dropdown","hide","render","html","nothing","hint","error","name","_e","_f","_g","term","repeat","option","styles","componentStyle","style","__decorate","property","prototype","type","reflect","attribute","query","customElement"],"mappings":"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"}

package/lib/Toast.js

@@ -1,2 +1,2 @@
-import{_ as s}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as t,LitElement as i}from"lit";import{property as r,customElement as e}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{ref as a}from"lit/directives/ref.js";import{o as c}from"./observe-D0n0zOfU.js";import{N as d}from"./NotificationMixin-DOUQsx7N.js";import{s as l}from"./Component-DSU3Qp0O.js";import m from"./Icon.js";import"./events-Bv6wNHwJ.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";var u=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m11.41 10 8.29 8.29-1.41 1.41-8.29-8.29-8.28996 8.3-1.410001-1.41 8.290001-8.3-8.300001-8.28996 1.420001-1.420001 8.28996 8.300001 8.29-8.300001 1.41 1.410001z" fill="currentColor"/></svg>',tags:"nordicon interface close cross remove delete erase symbol times",title:"interface-close"});const p=o`:host{--_n-toast-color:var(--n-color-surface);--_n-toast-background-color:var(--n-color-text)}.n-toast{display:flex;gap:var(--n-space-l);align-items:flex-start;background-color:var(--_n-toast-background-color);color:var(--_n-toast-color);border-radius:var(--n-border-radius);animation:n-enter var(--n-transition-slowly) forwards 1;z-index:var(--n-index-toast);box-shadow:var(--n-box-shadow-popout)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{from{transform:translateY(50%);opacity:0}}@keyframes n-exit{to{transform:scale(.97);opacity:0}}.n-toast-inner{padding:var(--n-space-m);flex:1}.n-dismiss{--_n-toast-focus-ring:0 0 0 2px var(--n-color-accent);border:none;display:flex;justify-content:center;align-items:center;block-size:var(--n-space-xl);inline-size:var(--n-space-xl);position:relative;inset-inline-end:var(--n-space-s);inset-block-start:var(--n-space-s);background-color:transparent;border-radius:var(--n-border-radius);cursor:pointer}.n-dismiss::after,.n-dismiss::before{content:'';position:absolute;display:block;border-radius:var(--n-border-radius)}.n-dismiss::before{inset:0;background:var(--_n-toast-color);transition:opacity var(--n-transition-quickly);opacity:0}.n-dismiss:is(:hover,:focus)::before{opacity:.06}.n-dismiss::after{inset:calc(var(--n-space-s) * -1)}.n-dismiss:active{transform:translateY(1px)}.n-dismiss:focus{outline:0;box-shadow:var(--_n-toast-focus-ring)}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--_n-toast-focus-ring)}}.n-dismiss nord-icon{opacity:.53;transition:opacity var(--n-transition-quickly);color:var(--_n-toast-color)}.n-dismiss:is(:hover,:focus) nord-icon{opacity:1}:host([variant=danger]){--_n-toast-background-color:var(--n-color-status-danger);--_n-toast-color:var(--n-color-text-on-accent)}`;m.registerIcon(u);let v=class extends(d(i)){constructor(){super(...arguments),this.variant="default",this.autoDismiss=1e4}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.timeoutId)}async dismiss(){return clearTimeout(this.timeoutId),super.dismiss()}render(){return t`<div ${a(this.notificationRef)} class="${n({"n-toast":!0,"n-dismissed":this.dismissed})}"><div class="n-toast-inner"><slot></slot></div><button class="n-dismiss" @click="${this.dismiss}" aria-hidden="true"><nord-icon name="interface-close" size="s"></nord-icon></button></div>`}handleAutoDismissChange(){clearTimeout(this.timeoutId),null!=this.autoDismiss&&this.autoDismiss>=0&&setTimeout((()=>this.dismiss()),this.autoDismiss)}};v.styles=[l,p],s([r({reflect:!0})],v.prototype,"variant",void 0),s([r({reflect:!0,type:Number,attribute:"auto-dismiss"})],v.prototype,"autoDismiss",void 0),s([c("autoDismiss")],v.prototype,"handleAutoDismissChange",null),v=s([e("nord-toast")],v);var f=v;export{f as default};
+import{_ as s}from"./tslib.es6-CmLYFWVC.js";import{c as o}from"./interface-close-BvKnv9eh.js";import{css as i,html as t,LitElement as r}from"lit";import{property as n,customElement as a}from"lit/decorators.js";import{classMap as e}from"lit/directives/class-map.js";import{ref as c}from"lit/directives/ref.js";import{o as d}from"./observe-D0n0zOfU.js";import{N as l}from"./NotificationMixin-DOUQsx7N.js";import{s as m}from"./Component-BJ5O5n8k.js";import u from"./Icon.js";import"./events-Bv6wNHwJ.js";import"lit/directives/if-defined.js";import"lit/directives/unsafe-html.js";import"./cond-CI1KbneT.js";import"./IconManager.js";const p=i`:host{--_n-toast-color:var(--n-color-surface);--_n-toast-background-color:var(--n-color-text)}.n-toast{align-items:flex-start;animation:n-enter var(--n-transition-slowly) forwards 1;background-color:var(--_n-toast-background-color);border-radius:var(--n-border-radius);box-shadow:var(--n-box-shadow-popout);color:var(--_n-toast-color);display:flex;gap:var(--n-space-l);z-index:var(--n-index-toast)}.n-dismissed{animation-name:n-exit}@keyframes n-enter{0%{opacity:0;transform:translateY(50%)}}@keyframes n-exit{to{opacity:0;transform:scale(.97)}}.n-toast-inner{flex:1;padding:var(--n-space-m)}.n-dismiss{--_n-toast-focus-ring:0 0 0 2px var(--n-color-accent);align-items:center;background-color:initial;block-size:var(--n-space-xl);border:none;border-radius:var(--n-border-radius);cursor:pointer;display:flex;inline-size:var(--n-space-xl);inset-block-start:var(--n-space-s);inset-inline-end:var(--n-space-s);justify-content:center;position:relative}.n-dismiss:after,.n-dismiss:before{border-radius:var(--n-border-radius);content:"";display:block;position:absolute}.n-dismiss:before{background:var(--_n-toast-color);inset:0;opacity:0;transition:opacity var(--n-transition-quickly)}.n-dismiss:is(:hover,:focus):before{opacity:.06}.n-dismiss:after{inset:calc(var(--n-space-s)*-1)}.n-dismiss:active{transform:translateY(1px)}.n-dismiss:focus{box-shadow:var(--_n-toast-focus-ring);outline:none}@supports selector(:focus-visible){.n-dismiss:focus{box-shadow:none}.n-dismiss:focus-visible{box-shadow:var(--_n-toast-focus-ring)}}.n-dismiss nord-icon{color:var(--_n-toast-color);opacity:.53;transition:opacity var(--n-transition-quickly)}.n-dismiss:is(:hover,:focus) nord-icon{opacity:1}:host([variant=danger]){--_n-toast-background-color:var(--n-color-status-danger);--_n-toast-color:var(--n-color-text-on-accent)}`;u.registerIcon(o);let f=class extends(l(r)){constructor(){super(...arguments),this.variant="default",this.autoDismiss=1e4}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.timeoutId)}async dismiss(){return clearTimeout(this.timeoutId),super.dismiss()}render(){return t`<div ${c(this.notificationRef)} class="${e({"n-toast":!0,"n-dismissed":this.dismissed})}"><div class="n-toast-inner"><slot></slot></div><button class="n-dismiss" @click="${this.dismiss}" aria-hidden="true"><nord-icon name="interface-close" size="s"></nord-icon></button></div>`}handleAutoDismissChange(){clearTimeout(this.timeoutId),null!=this.autoDismiss&&this.autoDismiss>=0&&setTimeout((()=>this.dismiss()),this.autoDismiss)}};f.styles=[m,p],s([n({reflect:!0})],f.prototype,"variant",void 0),s([n({reflect:!0,type:Number,attribute:"auto-dismiss"})],f.prototype,"autoDismiss",void 0),s([d("autoDismiss")],f.prototype,"handleAutoDismissChange",null),f=s([a("nord-toast")],f);var v=f;export{v as default};
 //# sourceMappingURL=Toast.js.map