@nordhealth/components 4.26.2 → 5.0.0-alpha.0

package/lib/ScrollArea.js

@@ -0,0 +1,2 @@
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as r,LitElement as o}from"lit";import{property as l,query as i,state as a,customElement as s}from"lit/decorators.js";import{D as n}from"./DraftComponentMixin-4qug5Rky.js";import{s as h}from"./Component-BJ5O5n8k.js";const c=e`:host{--n-scroll-area-fade-size:24px;--n-scroll-area-scrollbar-size:10px;--n-scroll-area-scrollbar-inset:2px;--n-scroll-area-thumb-color:var(--n-color-border);--n-scroll-area-thumb-color-hover:var(--n-color-border-strong);display:block;overflow:hidden;position:relative}[part~=viewport]{block-size:100%;inline-size:100%;overflow:scroll;overscroll-behavior:contain;scrollbar-width:none}[part~=viewport]::-webkit-scrollbar{display:none}:host([axis=block]) [part~=viewport]{overflow-x:hidden}:host([axis=inline]) [part~=viewport]{overflow-y:hidden}:host([fade][axis=block]) [part~=viewport]{mask-image:linear-gradient(to bottom,#0000 0,#000 min(var(--n-scroll-area-fade-size),var(--scroll-area-overflow-y-start,0px)),#000 calc(100% - min(var(--n-scroll-area-fade-size), var(--scroll-area-overflow-y-end, var(--n-scroll-area-fade-size)))),#0000 100%)}:host([fade][axis=inline]) [part~=viewport]{mask-image:linear-gradient(to right,#0000 0,#000 min(var(--n-scroll-area-fade-size),var(--scroll-area-overflow-x-start,0px)),#000 calc(100% - min(var(--n-scroll-area-fade-size), var(--scroll-area-overflow-x-end, var(--n-scroll-area-fade-size)))),#0000 100%)}:host([fade][axis=both]) [part~=viewport]{mask-composite:intersect;mask-image:linear-gradient(to bottom,#0000 0,#000 min(var(--n-scroll-area-fade-size),var(--scroll-area-overflow-y-start,0px)),#000 calc(100% - min(var(--n-scroll-area-fade-size), var(--scroll-area-overflow-y-end, var(--n-scroll-area-fade-size)))),#0000 100%),linear-gradient(to right,#0000 0,#000 min(var(--n-scroll-area-fade-size),var(--scroll-area-overflow-x-start,0px)),#000 calc(100% - min(var(--n-scroll-area-fade-size), var(--scroll-area-overflow-x-end, var(--n-scroll-area-fade-size)))),#0000 100%)}[part~=scrollbar-block],[part~=scrollbar-inline]{display:flex;opacity:0;padding:1px;position:absolute;touch-action:none;transition:opacity var(--n-transition-quickly,.15s) ease;user-select:none}[part~=scrollbar-block]{inline-size:var(--n-scroll-area-scrollbar-size);inset-block:var(--n-scroll-area-scrollbar-inset);inset-inline-end:var(--n-scroll-area-scrollbar-inset)}[part~=scrollbar-inline]{block-size:var(--n-scroll-area-scrollbar-size);inset-block-end:var(--n-scroll-area-scrollbar-inset);inset-inline:var(--n-scroll-area-scrollbar-inset)}:host([axis=both]) [part~=scrollbar-block]{inset-block-end:calc(var(--n-scroll-area-scrollbar-size) + var(--n-scroll-area-scrollbar-inset))}:host([axis=both]) [part~=scrollbar-inline]{inset-inline-end:calc(var(--n-scroll-area-scrollbar-size) + var(--n-scroll-area-scrollbar-inset))}:host([data-hovering]) [part~=scrollbar-block],:host([data-hovering]) [part~=scrollbar-inline],:host([data-scrolling]) [part~=scrollbar-block],:host([data-scrolling]) [part~=scrollbar-inline]{opacity:1}:host([always-show-scrollbar]) [part~=scrollbar-block],:host([always-show-scrollbar]) [part~=scrollbar-inline]{opacity:1}[part~=thumb-block],[part~=thumb-inline]{background-color:var(--n-scroll-area-thumb-color);border-radius:var(--n-border-radius-pill);transition:background-color var(--n-transition-quickly,.15s) ease}[part~=thumb-block]{block-size:var(--scroll-area-thumb-height,0);inline-size:100%}[part~=thumb-inline]{block-size:100%;inline-size:var(--scroll-area-thumb-width,0)}[part~=thumb-block]:hover,[part~=thumb-inline]:hover{background-color:var(--n-scroll-area-thumb-color-hover)}[part~=corner]{block-size:var(--n-scroll-area-scrollbar-size);inline-size:var(--n-scroll-area-scrollbar-size);inset-block-end:0;inset-inline-end:0;position:absolute}:host([data-touch]) [part~=viewport]{scrollbar-width:auto}:host([data-touch]) [part~=viewport]::-webkit-scrollbar{display:initial}:host([data-touch]) [part~=corner],:host([data-touch]) [part~=scrollbar-block],:host([data-touch]) [part~=scrollbar-inline]{display:none}@media (prefers-reduced-motion:reduce){[part~=scrollbar-block],[part~=scrollbar-inline],[part~=thumb-block],[part~=thumb-inline]{transition:none}}`;function d(t,e,r){return Math.min(Math.max(t,e),r)}function b(t,e,r){if(!t)return 0;const o=getComputedStyle(t),l="x"===r?"Inline":"Block";return Number.parseFloat(o[`${e}${l}Start`])+Number.parseFloat(o[`${e}${l}End`])}let v=class extends(n(o)){constructor(){super(...arguments),this.axis="block",this.overflowEdgeThreshold=0,this.fade=!1,this.alwaysShowScrollbar=!1,this.hasBlockOverflow=!1,this.hasInlineOverflow=!1,this.dragOrientation=null,this.dragStart=0,this.dragStartScroll=0,this.handleSlotChange=()=>{if(!this.resizeObserver)return;const t=this.viewport.querySelector("slot");null==t||t.assignedElements().forEach((t=>{var e;return null===(e=this.resizeObserver)||void 0===e?void 0:e.observe(t)})),this.measure()},this.handleCoarseChange=t=>{this.toggleAttribute("data-touch",t.matches)},this.handlePointerOver=t=>{"touch"!==t.pointerType?this.toggleAttribute("data-hovering",!0):this.toggleAttribute("data-touch",!0)},this.handlePointerLeave=()=>{this.removeAttribute("data-hovering")},this.handleScroll=()=>{this.flagScrolling(),this.measure()},this.handleThumbPointerMove=t=>{if(!this.dragOrientation)return;t.preventDefault();const e=this.viewport;if("block"===this.dragOrientation&&this.scrollbarBlock&&this.thumbBlock){const r=t.clientY-this.dragStart,o=b(this.scrollbarBlock,"padding","y"),l=b(this.thumbBlock,"margin","y"),i=this.scrollbarBlock.offsetHeight-this.thumbBlock.offsetHeight-o-l,a=0===i?0:r/i;e.scrollTop=this.dragStartScroll+a*(e.scrollHeight-e.clientHeight)}else if("inline"===this.dragOrientation&&this.scrollbarInline&&this.thumbInline){const r=t.clientX-this.dragStart,o=b(this.scrollbarInline,"padding","x"),l=b(this.thumbInline,"margin","x"),i=this.scrollbarInline.offsetWidth-this.thumbInline.offsetWidth-o-l,a=0===i?0:r/i;e.scrollLeft=this.dragStartScroll+a*(e.scrollWidth-e.clientWidth)}this.flagScrolling()},this.handleThumbPointerUp=()=>{this.dragOrientation=null,window.removeEventListener("pointermove",this.handleThumbPointerMove),window.removeEventListener("pointerup",this.handleThumbPointerUp)}}get hasBlock(){return"block"===this.axis||"both"===this.axis}get hasInline(){return"inline"===this.axis||"both"===this.axis}connectedCallback(){super.connectedCallback(),this.addEventListener("pointerenter",this.handlePointerOver),this.addEventListener("pointermove",this.handlePointerOver),this.addEventListener("pointerleave",this.handlePointerLeave),this.coarsePointer=window.matchMedia("(pointer: coarse)"),this.coarsePointer.addEventListener("change",this.handleCoarseChange),this.toggleAttribute("data-touch",this.coarsePointer.matches)}disconnectedCallback(){var t,e;super.disconnectedCallback(),this.removeEventListener("pointerenter",this.handlePointerOver),this.removeEventListener("pointermove",this.handlePointerOver),this.removeEventListener("pointerleave",this.handlePointerLeave),null===(t=this.coarsePointer)||void 0===t||t.removeEventListener("change",this.handleCoarseChange),null===(e=this.resizeObserver)||void 0===e||e.disconnect(),this.scrollTimeout&&clearTimeout(this.scrollTimeout)}firstUpdated(){this.resizeObserver=new ResizeObserver((()=>this.measure())),this.resizeObserver.observe(this.viewport);const t=this.viewport.querySelector("slot");null==t||t.assignedElements().forEach((t=>{var e;return null===(e=this.resizeObserver)||void 0===e?void 0:e.observe(t)})),this.measure()}updated(){this.measure()}flagScrolling(){this.toggleAttribute("data-scrolling",!0),this.scrollTimeout&&clearTimeout(this.scrollTimeout),this.scrollTimeout=setTimeout((()=>this.removeAttribute("data-scrolling")),500)}measure(){const t=this.viewport;if(!t)return;const{scrollHeight:e,clientHeight:r,scrollTop:o,scrollWidth:l,clientWidth:i,scrollLeft:a}=t,s=e>r,n=l>i;this.hasBlockOverflow=s,this.hasInlineOverflow=n,this.toggleAttribute("data-has-overflow-y",s),this.toggleAttribute("data-has-overflow-x",n);const h=Math.max(0,e-r),c=Math.max(0,l-i),v=s?d(o,0,h):0,p=s?h-v:0,u=n?d(a,0,c):0,m=n?c-u:0;t.style.setProperty("--scroll-area-overflow-y-start",`${v}px`),t.style.setProperty("--scroll-area-overflow-y-end",`${p}px`),t.style.setProperty("--scroll-area-overflow-x-start",`${u}px`),t.style.setProperty("--scroll-area-overflow-x-end",`${m}px`);const f=this.overflowEdgeThreshold;if(this.toggleAttribute("data-overflow-y-start",s&&v>f),this.toggleAttribute("data-overflow-y-end",s&&p>f),this.toggleAttribute("data-overflow-x-start",n&&u>f),this.toggleAttribute("data-overflow-x-end",n&&m>f),this.hasBlock&&this.scrollbarBlock&&this.thumbBlock){const t=b(this.scrollbarBlock,"padding","y"),l=b(this.thumbBlock,"margin","y"),i=this.scrollbarBlock.offsetHeight-t-l,a=Math.max(16,i*(r/e));this.scrollbarBlock.style.setProperty("--scroll-area-thumb-height",`${a}px`);const s=i-a,n=d((0===h?0:o/h)*s,0,s);this.thumbBlock.style.transform=`translate3d(0, ${n}px, 0)`}if(this.hasInline&&this.scrollbarInline&&this.thumbInline){const t=b(this.scrollbarInline,"padding","x"),e=b(this.thumbInline,"margin","x"),r=this.scrollbarInline.offsetWidth-t-e,o=Math.max(16,r*(i/l));this.scrollbarInline.style.setProperty("--scroll-area-thumb-width",`${o}px`);const s=r-o,n=d((0===c?0:a/c)*s,0,s);this.thumbInline.style.transform=`translate3d(${n}px, 0, 0)`}}handleThumbPointerDown(t,e){0===t.button&&(t.preventDefault(),t.stopPropagation(),this.dragOrientation=e,this.dragStart="block"===e?t.clientY:t.clientX,this.dragStartScroll="block"===e?this.viewport.scrollTop:this.viewport.scrollLeft,t.target.setPointerCapture(t.pointerId),window.addEventListener("pointermove",this.handleThumbPointerMove),window.addEventListener("pointerup",this.handleThumbPointerUp))}handleTrackPointerDown(t,e){if(0!==t.button)return;const r=this.viewport;if("block"===e&&this.scrollbarBlock&&this.thumbBlock){const e=b(this.scrollbarBlock,"padding","y"),o=b(this.thumbBlock,"margin","y"),l=this.thumbBlock.offsetHeight,i=this.scrollbarBlock.getBoundingClientRect(),a=t.clientY-i.top-l/2-e+o/2,s=this.scrollbarBlock.offsetHeight-l-e-o,n=0===s?0:a/s;r.scrollTop=d(n,0,1)*(r.scrollHeight-r.clientHeight)}else if("inline"===e&&this.scrollbarInline&&this.thumbInline){const e=b(this.scrollbarInline,"padding","x"),o=b(this.thumbInline,"margin","x"),l=this.thumbInline.offsetWidth,i=this.scrollbarInline.getBoundingClientRect(),a=t.clientX-i.left-l/2-e+o/2,s=this.scrollbarInline.offsetWidth-l-e-o,n=0===s?0:a/s;r.scrollLeft=d(n,0,1)*(r.scrollWidth-r.clientWidth)}}handleScrollbarWheel(t,e){t.ctrlKey||(t.preventDefault(),"block"===e?this.viewport.scrollTop+=t.deltaY:this.viewport.scrollLeft+=t.deltaY||t.deltaX)}render(){return r`<div part="viewport" tabindex="${this.hasBlockOverflow||this.hasInlineOverflow?"0":"-1"}" @scroll="${this.handleScroll}"><slot @slotchange="${this.handleSlotChange}"></slot></div>${this.hasBlock?r`<div part="scrollbar-block" data-orientation="vertical" ?hidden="${!this.hasBlockOverflow}" @pointerdown="${t=>this.handleTrackPointerDown(t,"block")}" @wheel="${t=>this.handleScrollbarWheel(t,"block")}"><div part="thumb-block" @pointerdown="${t=>this.handleThumbPointerDown(t,"block")}"></div></div>`:""} ${this.hasInline?r`<div part="scrollbar-inline" data-orientation="horizontal" ?hidden="${!this.hasInlineOverflow}" @pointerdown="${t=>this.handleTrackPointerDown(t,"inline")}" @wheel="${t=>this.handleScrollbarWheel(t,"inline")}"><div part="thumb-inline" @pointerdown="${t=>this.handleThumbPointerDown(t,"inline")}"></div></div>`:""} ${"both"===this.axis?r`<div part="corner" ?hidden="${!(this.hasBlockOverflow&&this.hasInlineOverflow)}"></div>`:""}`}};v.styles=[h,c],t([l({reflect:!0})],v.prototype,"axis",void 0),t([l({type:Number,attribute:"overflow-edge-threshold"})],v.prototype,"overflowEdgeThreshold",void 0),t([l({type:Boolean,reflect:!0})],v.prototype,"fade",void 0),t([l({type:Boolean,reflect:!0,attribute:"always-show-scrollbar"})],v.prototype,"alwaysShowScrollbar",void 0),t([i('[part~="viewport"]')],v.prototype,"viewport",void 0),t([i('[part~="scrollbar-block"]')],v.prototype,"scrollbarBlock",void 0),t([i('[part~="thumb-block"]')],v.prototype,"thumbBlock",void 0),t([i('[part~="scrollbar-inline"]')],v.prototype,"scrollbarInline",void 0),t([i('[part~="thumb-inline"]')],v.prototype,"thumbInline",void 0),t([a()],v.prototype,"hasBlockOverflow",void 0),t([a()],v.prototype,"hasInlineOverflow",void 0),v=t([s("nord-scroll-area")],v);var p=v;export{p as default};
+//# sourceMappingURL=ScrollArea.js.map

package/lib/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.js","sources":["../src/scroll-area/ScrollArea.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { DraftComponentMixin } from '../common/mixins/DraftComponentMixin.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './ScrollArea.css'\n\n/** Time (ms) the `data-scrolling` state lingers after the last scroll. */\nconst SCROLL_TIMEOUT = 500\n/** Smallest the thumb is allowed to shrink to, in pixels. */\nconst MIN_THUMB_SIZE = 16\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max)\n}\n\n/** Computed margin/padding offset of an element along an axis, like Base UI's `getOffset`. */\nfunction getOffset(element: Element | null, prop: 'margin' | 'padding', axis: 'x' | 'y'): number {\n  if (!element) {\n    return 0\n  }\n  const styles = getComputedStyle(element)\n  const side = axis === 'x' ? 'Inline' : 'Block'\n  return Number.parseFloat(styles[`${prop}${side}Start` as never]) + Number.parseFloat(styles[`${prop}${side}End` as never])\n}\n\n/**\n * Scroll Area is a container that wraps overflowing content in a custom scroll\n * viewport with consistently-styled scrollbars. Native scrollbars are hidden and\n * replaced with a thin overlay thumb that appears on hover or while scrolling.\n *\n * It also exposes the distance from each edge as CSS custom properties\n * (`--scroll-area-overflow-*`), which can drive an edge-fade mask on\n * `::part(viewport)` — see the docs example.\n *\n * The scroll machinery lives in shadow DOM; slot your content directly inside.\n *\n * @status draft\n * @category structure\n *\n * @slot - The scrollable content.\n *\n * @csspart viewport - The scrolling container that holds the slotted content.\n * @csspart scrollbar-block - The scrollbar track for the block (vertical) axis.\n * @csspart scrollbar-inline - The scrollbar track for the inline (horizontal) axis.\n * @csspart thumb-block - The draggable thumb of the block-axis scrollbar.\n * @csspart thumb-inline - The draggable thumb of the inline-axis scrollbar.\n * @csspart corner - The square where the two scrollbars meet (when `axis=\"both\"`).\n *\n * @cssprop [--n-scroll-area-fade-size=24px] - Depth of the edge fade (when `fade` is set).\n * @cssprop [--n-scroll-area-scrollbar-size=10px] - Thickness of the scrollbar track and thumb.\n * @cssprop [--n-scroll-area-scrollbar-inset=2px] - Inset of the scrollbar from the viewport edge.\n * @cssprop [--n-scroll-area-thumb-color] - Thumb fill (defaults to the border token).\n * @cssprop [--n-scroll-area-thumb-color-hover] - Thumb fill on hover (defaults to the strong border token).\n * @cssprop [--scroll-area-overflow-y-start] - Read-only: pixels scrolled past the block start edge.\n * @cssprop [--scroll-area-overflow-y-end] - Read-only: pixels remaining to the block end edge.\n * @cssprop [--scroll-area-overflow-x-start] - Read-only: pixels scrolled past the inline start edge.\n * @cssprop [--scroll-area-overflow-x-end] - Read-only: pixels remaining to the inline end edge.\n */\n@customElement('nord-scroll-area')\nexport default class ScrollArea extends DraftComponentMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  /**\n   * Which scrollbars to render. `block` is vertical, `inline` is horizontal.\n   * @default \"block\"\n   */\n  @property({ reflect: true }) axis: 'block' | 'inline' | 'both' = 'block'\n\n  /**\n   * Distance in pixels past an edge before the matching `data-overflow-*` state\n   * (and edge-fade variable) is considered active.\n   * @default 0\n   */\n  @property({ type: Number, attribute: 'overflow-edge-threshold' }) overflowEdgeThreshold = 0\n\n  /**\n   * Fades the content in and out at the scroll edges with a mask, signalling\n   * there is more content beyond the edge.\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) fade = false\n\n  /** Always display the scrollbar instead of hiding it when idle. */\n  @property({ type: Boolean, reflect: true, attribute: 'always-show-scrollbar' }) alwaysShowScrollbar = false\n\n  @query('[part~=\"viewport\"]') private viewport!: HTMLDivElement\n  @query('[part~=\"scrollbar-block\"]') private scrollbarBlock?: HTMLDivElement | null\n  @query('[part~=\"thumb-block\"]') private thumbBlock?: HTMLDivElement | null\n  @query('[part~=\"scrollbar-inline\"]') private scrollbarInline?: HTMLDivElement | null\n  @query('[part~=\"thumb-inline\"]') private thumbInline?: HTMLDivElement | null\n\n  @state() private hasBlockOverflow = false\n  @state() private hasInlineOverflow = false\n\n  private resizeObserver?: ResizeObserver\n  private coarsePointer?: MediaQueryList\n  private scrollTimeout?: ReturnType<typeof setTimeout>\n\n  // Drag state\n  private dragOrientation: 'block' | 'inline' | null = null\n  private dragStart = 0\n  private dragStartScroll = 0\n\n  private get hasBlock(): boolean {\n    return this.axis === 'block' || this.axis === 'both'\n  }\n\n  private get hasInline(): boolean {\n    return this.axis === 'inline' || this.axis === 'both'\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.addEventListener('pointerenter', this.handlePointerOver)\n    this.addEventListener('pointermove', this.handlePointerOver)\n    this.addEventListener('pointerleave', this.handlePointerLeave)\n    this.coarsePointer = window.matchMedia('(pointer: coarse)')\n    this.coarsePointer.addEventListener('change', this.handleCoarseChange)\n    this.toggleAttribute('data-touch', this.coarsePointer.matches)\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.removeEventListener('pointerenter', this.handlePointerOver)\n    this.removeEventListener('pointermove', this.handlePointerOver)\n    this.removeEventListener('pointerleave', this.handlePointerLeave)\n    this.coarsePointer?.removeEventListener('change', this.handleCoarseChange)\n    this.resizeObserver?.disconnect()\n    if (this.scrollTimeout) {\n      clearTimeout(this.scrollTimeout)\n    }\n  }\n\n  firstUpdated(): void {\n    this.resizeObserver = new ResizeObserver(() => this.measure())\n    this.resizeObserver.observe(this.viewport)\n    // Observe the slotted content too, so growth/shrink re-measures.\n    const slot = this.viewport.querySelector('slot')\n    slot?.assignedElements().forEach(el => this.resizeObserver?.observe(el))\n    this.measure()\n  }\n\n  protected updated(): void {\n    // Re-measure when `axis` changes (scrollbars added/removed).\n    this.measure()\n  }\n\n  private handleSlotChange = (): void => {\n    if (!this.resizeObserver) {\n      return\n    }\n    const slot = this.viewport.querySelector('slot')\n    slot?.assignedElements().forEach(el => this.resizeObserver?.observe(el))\n    this.measure()\n  }\n\n  private handleCoarseChange = (event: MediaQueryListEvent): void => {\n    this.toggleAttribute('data-touch', event.matches)\n  }\n\n  private handlePointerOver = (event: PointerEvent): void => {\n    if (event.pointerType === 'touch') {\n      this.toggleAttribute('data-touch', true)\n      return\n    }\n    this.toggleAttribute('data-hovering', true)\n  }\n\n  private handlePointerLeave = (): void => {\n    this.removeAttribute('data-hovering')\n  }\n\n  /** Marks the area as actively scrolling, clearing the flag after a quiet period. */\n  private flagScrolling(): void {\n    this.toggleAttribute('data-scrolling', true)\n    if (this.scrollTimeout) {\n      clearTimeout(this.scrollTimeout)\n    }\n    this.scrollTimeout = setTimeout(() => this.removeAttribute('data-scrolling'), SCROLL_TIMEOUT)\n  }\n\n  private handleScroll = (): void => {\n    this.flagScrolling()\n    this.measure()\n  }\n\n  /**\n   * Measures overflow and positions/sizes the thumbs. Ported from Base UI's\n   * `ScrollAreaViewport#computeThumbPosition`.\n   */\n  private measure(): void {\n    const viewport = this.viewport\n    if (!viewport) {\n      return\n    }\n\n    const { scrollHeight, clientHeight, scrollTop, scrollWidth, clientWidth, scrollLeft } = viewport\n    const hasBlockOverflow = scrollHeight > clientHeight\n    const hasInlineOverflow = scrollWidth > clientWidth\n\n    this.hasBlockOverflow = hasBlockOverflow\n    this.hasInlineOverflow = hasInlineOverflow\n    this.toggleAttribute('data-has-overflow-y', hasBlockOverflow)\n    this.toggleAttribute('data-has-overflow-x', hasInlineOverflow)\n\n    const maxScrollTop = Math.max(0, scrollHeight - clientHeight)\n    const maxScrollLeft = Math.max(0, scrollWidth - clientWidth)\n    const topFromStart = hasBlockOverflow ? clamp(scrollTop, 0, maxScrollTop) : 0\n    const topFromEnd = hasBlockOverflow ? maxScrollTop - topFromStart : 0\n    const leftFromStart = hasInlineOverflow ? clamp(scrollLeft, 0, maxScrollLeft) : 0\n    const leftFromEnd = hasInlineOverflow ? maxScrollLeft - leftFromStart : 0\n\n    // Read-only overflow distances (drive consumer edge-fade masks on ::part(viewport)).\n    viewport.style.setProperty('--scroll-area-overflow-y-start', `${topFromStart}px`)\n    viewport.style.setProperty('--scroll-area-overflow-y-end', `${topFromEnd}px`)\n    viewport.style.setProperty('--scroll-area-overflow-x-start', `${leftFromStart}px`)\n    viewport.style.setProperty('--scroll-area-overflow-x-end', `${leftFromEnd}px`)\n\n    const t = this.overflowEdgeThreshold\n    this.toggleAttribute('data-overflow-y-start', hasBlockOverflow && topFromStart > t)\n    this.toggleAttribute('data-overflow-y-end', hasBlockOverflow && topFromEnd > t)\n    this.toggleAttribute('data-overflow-x-start', hasInlineOverflow && leftFromStart > t)\n    this.toggleAttribute('data-overflow-x-end', hasInlineOverflow && leftFromEnd > t)\n\n    // Block (vertical) thumb sizing + position.\n    if (this.hasBlock && this.scrollbarBlock && this.thumbBlock) {\n      const trackOffset = getOffset(this.scrollbarBlock, 'padding', 'y')\n      const thumbOffset = getOffset(this.thumbBlock, 'margin', 'y')\n      const track = this.scrollbarBlock.offsetHeight - trackOffset - thumbOffset\n      const thumbHeight = Math.max(MIN_THUMB_SIZE, track * (clientHeight / scrollHeight))\n      this.scrollbarBlock.style.setProperty('--scroll-area-thumb-height', `${thumbHeight}px`)\n      const maxThumbOffset = track - thumbHeight\n      const ratio = maxScrollTop === 0 ? 0 : scrollTop / maxScrollTop\n      const offset = clamp(ratio * maxThumbOffset, 0, maxThumbOffset)\n      this.thumbBlock.style.transform = `translate3d(0, ${offset}px, 0)`\n    }\n\n    // Inline (horizontal) thumb sizing + position.\n    if (this.hasInline && this.scrollbarInline && this.thumbInline) {\n      const trackOffset = getOffset(this.scrollbarInline, 'padding', 'x')\n      const thumbOffset = getOffset(this.thumbInline, 'margin', 'x')\n      const track = this.scrollbarInline.offsetWidth - trackOffset - thumbOffset\n      const thumbWidth = Math.max(MIN_THUMB_SIZE, track * (clientWidth / scrollWidth))\n      this.scrollbarInline.style.setProperty('--scroll-area-thumb-width', `${thumbWidth}px`)\n      const maxThumbOffset = track - thumbWidth\n      const ratio = maxScrollLeft === 0 ? 0 : scrollLeft / maxScrollLeft\n      const offset = clamp(ratio * maxThumbOffset, 0, maxThumbOffset)\n      this.thumbInline.style.transform = `translate3d(${offset}px, 0, 0)`\n    }\n  }\n\n  // --- Thumb dragging -------------------------------------------------------\n\n  private handleThumbPointerDown(event: PointerEvent, orientation: 'block' | 'inline'): void {\n    if (event.button !== 0) {\n      return\n    }\n    event.preventDefault()\n    event.stopPropagation()\n    this.dragOrientation = orientation\n    this.dragStart = orientation === 'block' ? event.clientY : event.clientX\n    this.dragStartScroll = orientation === 'block' ? this.viewport.scrollTop : this.viewport.scrollLeft\n    ;(event.target as HTMLElement).setPointerCapture(event.pointerId)\n    window.addEventListener('pointermove', this.handleThumbPointerMove)\n    window.addEventListener('pointerup', this.handleThumbPointerUp)\n  }\n\n  private handleThumbPointerMove = (event: PointerEvent): void => {\n    if (!this.dragOrientation) {\n      return\n    }\n    event.preventDefault()\n    const viewport = this.viewport\n    if (this.dragOrientation === 'block' && this.scrollbarBlock && this.thumbBlock) {\n      const delta = event.clientY - this.dragStart\n      const trackOffset = getOffset(this.scrollbarBlock, 'padding', 'y')\n      const thumbOffset = getOffset(this.thumbBlock, 'margin', 'y')\n      const maxThumbOffset = this.scrollbarBlock.offsetHeight - this.thumbBlock.offsetHeight - trackOffset - thumbOffset\n      const ratio = maxThumbOffset === 0 ? 0 : delta / maxThumbOffset\n      viewport.scrollTop = this.dragStartScroll + ratio * (viewport.scrollHeight - viewport.clientHeight)\n    }\n    else if (this.dragOrientation === 'inline' && this.scrollbarInline && this.thumbInline) {\n      const delta = event.clientX - this.dragStart\n      const trackOffset = getOffset(this.scrollbarInline, 'padding', 'x')\n      const thumbOffset = getOffset(this.thumbInline, 'margin', 'x')\n      const maxThumbOffset = this.scrollbarInline.offsetWidth - this.thumbInline.offsetWidth - trackOffset - thumbOffset\n      const ratio = maxThumbOffset === 0 ? 0 : delta / maxThumbOffset\n      viewport.scrollLeft = this.dragStartScroll + ratio * (viewport.scrollWidth - viewport.clientWidth)\n    }\n    this.flagScrolling()\n  }\n\n  private handleThumbPointerUp = (): void => {\n    this.dragOrientation = null\n    window.removeEventListener('pointermove', this.handleThumbPointerMove)\n    window.removeEventListener('pointerup', this.handleThumbPointerUp)\n  }\n\n  // --- Track click (page jump) ---------------------------------------------\n\n  private handleTrackPointerDown(event: PointerEvent, orientation: 'block' | 'inline'): void {\n    if (event.button !== 0) {\n      return\n    }\n    const viewport = this.viewport\n    if (orientation === 'block' && this.scrollbarBlock && this.thumbBlock) {\n      const trackOffset = getOffset(this.scrollbarBlock, 'padding', 'y')\n      const thumbOffset = getOffset(this.thumbBlock, 'margin', 'y')\n      const thumbHeight = this.thumbBlock.offsetHeight\n      const rect = this.scrollbarBlock.getBoundingClientRect()\n      const clickY = event.clientY - rect.top - thumbHeight / 2 - trackOffset + thumbOffset / 2\n      const maxThumbOffset = this.scrollbarBlock.offsetHeight - thumbHeight - trackOffset - thumbOffset\n      const ratio = maxThumbOffset === 0 ? 0 : clickY / maxThumbOffset\n      viewport.scrollTop = clamp(ratio, 0, 1) * (viewport.scrollHeight - viewport.clientHeight)\n    }\n    else if (orientation === 'inline' && this.scrollbarInline && this.thumbInline) {\n      const trackOffset = getOffset(this.scrollbarInline, 'padding', 'x')\n      const thumbOffset = getOffset(this.thumbInline, 'margin', 'x')\n      const thumbWidth = this.thumbInline.offsetWidth\n      const rect = this.scrollbarInline.getBoundingClientRect()\n      const clickX = event.clientX - rect.left - thumbWidth / 2 - trackOffset + thumbOffset / 2\n      const maxThumbOffset = this.scrollbarInline.offsetWidth - thumbWidth - trackOffset - thumbOffset\n      const ratio = maxThumbOffset === 0 ? 0 : clickX / maxThumbOffset\n      viewport.scrollLeft = clamp(ratio, 0, 1) * (viewport.scrollWidth - viewport.clientWidth)\n    }\n  }\n\n  /** Scrolling over a scrollbar track scrolls the viewport. */\n  private handleScrollbarWheel(event: WheelEvent, orientation: 'block' | 'inline'): void {\n    if (event.ctrlKey) {\n      return\n    }\n    event.preventDefault()\n    if (orientation === 'block') {\n      this.viewport.scrollTop += event.deltaY\n    }\n    else {\n      this.viewport.scrollLeft += event.deltaY || event.deltaX\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"viewport\"\n        tabindex=${this.hasBlockOverflow || this.hasInlineOverflow ? '0' : '-1'}\n        @scroll=${this.handleScroll}\n      >\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n      ${this.hasBlock\n        ? html`\n            <div\n              part=\"scrollbar-block\"\n              data-orientation=\"vertical\"\n              ?hidden=${!this.hasBlockOverflow}\n              @pointerdown=${(e: PointerEvent) => this.handleTrackPointerDown(e, 'block')}\n              @wheel=${(e: WheelEvent) => this.handleScrollbarWheel(e, 'block')}\n            >\n              <div\n                part=\"thumb-block\"\n                @pointerdown=${(e: PointerEvent) => this.handleThumbPointerDown(e, 'block')}\n              ></div>\n            </div>\n          `\n        : ''}\n      ${this.hasInline\n        ? html`\n            <div\n              part=\"scrollbar-inline\"\n              data-orientation=\"horizontal\"\n              ?hidden=${!this.hasInlineOverflow}\n              @pointerdown=${(e: PointerEvent) => this.handleTrackPointerDown(e, 'inline')}\n              @wheel=${(e: WheelEvent) => this.handleScrollbarWheel(e, 'inline')}\n            >\n              <div\n                part=\"thumb-inline\"\n                @pointerdown=${(e: PointerEvent) => this.handleThumbPointerDown(e, 'inline')}\n              ></div>\n            </div>\n          `\n        : ''}\n      ${this.axis === 'both' ? html`<div part=\"corner\" ?hidden=${!(this.hasBlockOverflow && this.hasInlineOverflow)}></div>` : ''}\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-scroll-area': ScrollArea\n  }\n}\n"],"names":["clamp","value","min","max","Math","getOffset","element","prop","axis","styles","getComputedStyle","side","Number","parseFloat","ScrollArea","DraftComponentMixin","LitElement","constructor","this","overflowEdgeThreshold","fade","alwaysShowScrollbar","hasBlockOverflow","hasInlineOverflow","dragOrientation","dragStart","dragStartScroll","handleSlotChange","resizeObserver","slot","viewport","querySelector","assignedElements","forEach","el","_a","observe","measure","handleCoarseChange","event","toggleAttribute","matches","handlePointerOver","pointerType","handlePointerLeave","removeAttribute","handleScroll","flagScrolling","handleThumbPointerMove","preventDefault","scrollbarBlock","thumbBlock","delta","clientY","trackOffset","thumbOffset","maxThumbOffset","offsetHeight","ratio","scrollTop","scrollHeight","clientHeight","scrollbarInline","thumbInline","clientX","offsetWidth","scrollLeft","scrollWidth","clientWidth","handleThumbPointerUp","window","removeEventListener","hasBlock","hasInline","connectedCallback","super","addEventListener","coarsePointer","matchMedia","disconnectedCallback","_b","disconnect","scrollTimeout","clearTimeout","firstUpdated","ResizeObserver","updated","setTimeout","maxScrollTop","maxScrollLeft","topFromStart","topFromEnd","leftFromStart","leftFromEnd","style","setProperty","t","track","thumbHeight","offset","transform","thumbWidth","handleThumbPointerDown","orientation","button","stopPropagation","target","setPointerCapture","pointerId","handleTrackPointerDown","rect","getBoundingClientRect","clickY","top","clickX","left","handleScrollbarWheel","ctrlKey","deltaY","deltaX","render","html","e","componentStyle","__decorate","property","reflect","prototype","type","attribute","Boolean","query","state","customElement"],"mappings":"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"}

package/lib/SegmentedControl.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as r,html as t}from"lit";import{property as n,customElement as s}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{s as i}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const a=o`:host{display:inline-block}:host([expand]){display:block}.n-segmented-control{border:1px solid var(--n-color-border);border-radius:var(--n-border-radius-s);background-color:var(--n-color-nav-hover);display:inline-flex;gap:1px}.n-disabled{opacity:.5;border-color:var(--n-color-border);background-color:var(--n-color-border)}::slotted(nord-segmented-control-item){inline-size:100%}::slotted(nord-segmented-control-item:not([checked]):first-of-type){--n-segmented-control-item-border-radius:calc(var(--n-border-radius-s) - 1px) 0 0 calc(var(--n-border-radius-s) - 1px)}::slotted(nord-segmented-control-item:not([checked]):last-of-type){--n-segmented-control-item-border-radius:0 calc(var(--n-border-radius-s) - 1px) calc(var(--n-border-radius-s) - 1px) 0}::slotted(nord-segmented-control-item)::after{content:'';background:var(--n-color-border);position:absolute;inline-size:1.5px;inset-block-start:27.5%;inset-inline-end:-1px;block-size:45%;z-index:var(--n-index-masked)}::slotted(nord-segmented-control-item:last-of-type)::after,::slotted(nord-segmented-control-item[checked])::after{display:none}:host([expand]) .n-segmented-control{--n-segmented-control-item-inline-size:100%;display:flex;flex-direction:row;align-items:stretch;gap:0}`;let c=class extends r{constructor(){super(...arguments),this.defaultSlot=new l(this),this.expand=!1}render(){const e=this.defaultSlot.assigned.every((e=>!!e.hasAttribute("disabled")));return t`<div class="${d({"n-segmented-control":!0,"n-disabled":e})}"><slot></slot></div>`}};c.styles=[i,a],e([n({reflect:!0,type:Boolean})],c.prototype,"expand",void 0),c=e([s("nord-segmented-control")],c);var m=c;export{m as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as o,LitElement as r,html as t}from"lit";import{property as n,customElement as s}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{S as l}from"./SlotController-Z6eG7LSZ.js";import{s as i}from"./Component-BJ5O5n8k.js";import"./EventController-BBOmvfLa.js";const a=o`:host{display:inline-block}:host([expand]){display:block}.n-segmented-control{background-color:var(--n-color-nav-hover);border:1px solid var(--n-color-border);border-radius:var(--n-border-radius-s);display:inline-flex;gap:1px}.n-disabled{background-color:var(--n-color-border);border-color:var(--n-color-border);opacity:.5}::slotted(nord-segmented-control-item){inline-size:100%}::slotted(nord-segmented-control-item:not([checked]):first-of-type){--n-segmented-control-item-border-radius:calc(var(--n-border-radius-s) - 1px) 0 0 calc(var(--n-border-radius-s) - 1px)}::slotted(nord-segmented-control-item:not([checked]):last-of-type){--n-segmented-control-item-border-radius:0 calc(var(--n-border-radius-s) - 1px) calc(var(--n-border-radius-s) - 1px) 0}::slotted(nord-segmented-control-item):after{background:var(--n-color-border);block-size:45%;content:"";inline-size:1.5px;inset-block-start:27.5%;inset-inline-end:-1px;position:absolute;z-index:var(--n-index-masked)}::slotted(nord-segmented-control-item:last-of-type):after,::slotted(nord-segmented-control-item[checked]):after{display:none}:host([expand]) .n-segmented-control{--n-segmented-control-item-inline-size:100%;align-items:stretch;display:flex;flex-direction:row;gap:0}`;let c=class extends r{constructor(){super(...arguments),this.defaultSlot=new l(this),this.expand=!1}render(){const e=this.defaultSlot.assigned.every((e=>!!e.hasAttribute("disabled")));return t`<div class="${d({"n-segmented-control":!0,"n-disabled":e})}"><slot></slot></div>`}};c.styles=[i,a],e([n({reflect:!0,type:Boolean})],c.prototype,"expand",void 0),c=e([s("nord-segmented-control")],c);var m=c;export{m as default};
 //# sourceMappingURL=SegmentedControl.js.map

package/lib/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sources":["../src/segmented-control/SegmentedControl.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './SegmentedControl.css'\n\n/**\n * Segmented control is used to pick one choice from a set of\n * closely related choices, and immediately apply that selection.\n *\n * @status new\n * @category action\n * @slot - Default slot.\n *\n * @fires {NordEvent} change - Fired whenever a segmented control item has been checked.\n */\n@customElement('nord-segmented-control')\nexport default class SegmentedControl extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n\n  /**\n   * Controls whether the segmented control expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const isDisabled = this.defaultSlot.assigned.every((node) => {\n      if (node.hasAttribute('disabled')) {\n        return true\n      }\n      return false\n    })\n\n    return html`<div\n      class=${classMap({\n        'n-segmented-control': true,\n        'n-disabled': isDisabled,\n      })}\n    >\n      <slot></slot>\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-segmented-control': SegmentedControl\n  }\n}\n"],"names":["SegmentedControl","LitElement","constructor","this","defaultSlot","SlotController","expand","render","isDisabled","assigned","every","node","hasAttribute","html","classMap","styles","componentStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"yjDAmBe,IAAMA,EAAN,cAA+BC,EAA/B,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MAKGA,KAAMG,QAAG,CAmBtD,CAjBC,MAAAC,GACE,MAAMC,EAAaL,KAAKC,YAAYK,SAASC,OAAOC,KAC9CA,EAAKC,aAAa,cAMxB,OAAOC,CAAI,eACDC,EAAS,CACf,uBAAuB,EACvB,aAAcN,0BAKnB,GAzBMR,EAAAe,OAAS,CAACC,EAAgBC,GAOWC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBtB,EAAAuB,UAAA,cAAA,GARvCvB,EAAgBkB,EAAA,CADpCM,EAAc,2BACMxB,SAAAA"}
+{"version":3,"file":"SegmentedControl.js","sources":["../src/segmented-control/SegmentedControl.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './SegmentedControl.css'\n\n/**\n * Segmented control is used to pick one choice from a set of\n * closely related choices, and immediately apply that selection.\n *\n * @status new\n * @category action\n * @slot - Default slot.\n *\n * @fires {NordEvent} change - Fired whenever a segmented control item has been checked.\n */\n@customElement('nord-segmented-control')\nexport default class SegmentedControl extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n\n  /**\n   * Controls whether the segmented control expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const isDisabled = this.defaultSlot.assigned.every((node) => {\n      if (node.hasAttribute('disabled')) {\n        return true\n      }\n      return false\n    })\n\n    return html`<div\n      class=${classMap({\n        'n-segmented-control': true,\n        'n-disabled': isDisabled,\n      })}\n    >\n      <slot></slot>\n    </div>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-segmented-control': SegmentedControl\n  }\n}\n"],"names":["SegmentedControl","LitElement","constructor","this","defaultSlot","SlotController","expand","render","isDisabled","assigned","every","node","hasAttribute","html","classMap","styles","componentStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"sjDAmBe,IAAMA,EAAN,cAA+BC,EAA/B,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MAKGA,KAAMG,QAAG,CAmBtD,CAjBC,MAAAC,GACE,MAAMC,EAAaL,KAAKC,YAAYK,SAASC,OAAOC,KAC9CA,EAAKC,aAAa,cAMxB,OAAOC,CAAI,eACDC,EAAS,CACf,uBAAuB,EACvB,aAAcN,0BAKnB,GAzBMR,EAAAe,OAAS,CAACC,EAAgBC,GAOWC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBtB,EAAAuB,UAAA,cAAA,GARvCvB,EAAgBkB,EAAA,CADpCM,EAAc,2BACMxB,SAAAA"}

package/lib/SegmentedControlItem.js

@@ -1,45 +1,28 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,html as n,nothing as o,LitElement as r}from"lit";import{property as i,customElement as a}from"lit/decorators.js";import{ref as s}from"lit/directives/ref.js";import{L as l}from"./LightDomController-DIwtVelV.js";import{L as c}from"./LightSlotController-Coyy4nqS.js";import{o as m}from"./observe-D0n0zOfU.js";import{c as d}from"./cond-CI1KbneT.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as p}from"./FocusableMixin-BlQLNPdJ.js";import{I as v}from"./InputMixin-LetXsCyv.js";import{s as h}from"./Component-DSU3Qp0O.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";const b=t`:host{--_n-segmented-control-item-gap:var(--n-segmented-control-item-gap, var(--n-space-xs));--_n-segmented-control-item-padding-inline:var(
-    --n-segmented-control-item-padding-inline,
-    calc(var(--n-space-m) / 1.2)
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,html as n,nothing as o,LitElement as r}from"lit";import{property as i,customElement as a}from"lit/decorators.js";import{ref as s}from"lit/directives/ref.js";import{L as l}from"./LightDomController-DIwtVelV.js";import{L as c}from"./LightSlotController-Coyy4nqS.js";import{o as m}from"./observe-D0n0zOfU.js";import{c as d}from"./cond-CI1KbneT.js";import{N as g}from"./events-Bv6wNHwJ.js";import{F as p}from"./FocusableMixin-BlQLNPdJ.js";import{I as v}from"./InputMixin-LetXsCyv.js";import{s as h}from"./Component-BJ5O5n8k.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";const b=t`:host{--_n-segmented-control-item-gap:var(--n-segmented-control-item-gap,var(--n-space-xs));--_n-segmented-control-item-padding-inline:var(
+    --n-segmented-control-item-padding-inline,calc(var(--n-space-m)/1.2)
   );--_n-segmented-control-item-min-block-size:var(
-    --n-segmented-control-item-min-block-size,
-    calc(var(--n-space-xl) - 2px)
-  );--_n-segmented-control-item-font-size:var(--n-segmented-control-item-font-size, var(--n-font-size-m));--_n-segmented-control-item-font-weight:var(--n-segmented-control-item-font-weight, var(--n-font-weight));--_n-segmented-control-item-gradient:var(
-    --n-segmented-control-item-gradient,
-    linear-gradient(to bottom, rgb(0, 0, 0, 0) 50%, rgb(0, 0, 0, 0.013) 100%)
+    --n-segmented-control-item-min-block-size,calc(var(--n-space-xl) - 2px)
+  );--_n-segmented-control-item-font-size:var(--n-segmented-control-item-font-size,var(--n-font-size-m));--_n-segmented-control-item-font-weight:var(--n-segmented-control-item-font-weight,var(--n-font-weight));--_n-segmented-control-item-gradient:var(
+    --n-segmented-control-item-gradient,linear-gradient(to bottom,#0000 50%,rgba(0,0,0,.013) 100%)
   );--_n-segmented-control-item-background-color:var(
-    --n-segmented-control-item-background-color,
-    var(--n-color-nav-hover)
-  );--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text-weaker));--_n-segmented-control-item-border-radius:var(--n-segmented-control-item-border-radius, 0);--_n-segmented-control-item-inline-size:var(--n-segmented-control-item-inline-size, auto);--_n-segmented-control-item-box-shadow:var(--n-segmented-control-item-box-shadow, none);--_n-segmented-control-item-icon-size:var(--n-size-icon-s);--_n-segmented-control-item-opacity:1;position:relative;flex:1}::slotted(label){--n-icon-size:var(--_n-segmented-control-item-icon-size);display:flex!important;align-items:center;justify-content:center;border-radius:var(--_n-segmented-control-item-border-radius)!important;transition:var(--n-transition-quickly)!important;transition-property:background-color,color,border-color!important;font-family:var(--n-font-family)!important;font-size:var(--_n-segmented-control-item-font-size)!important;font-feature-settings:var(--n-font-features);font-weight:var(--_n-segmented-control-item-font-weight)!important;line-height:var(--n-line-height-form)!important;color:var(--_n-segmented-control-item-color)!important;padding:calc(var(--n-space-xs) - 1px) var(--_n-segmented-control-item-padding-inline)!important;background-color:var(--_n-segmented-control-item-background-color)!important;box-shadow:var(--_n-segmented-control-item-box-shadow)!important;cursor:pointer;position:relative!important;gap:var(--_n-segmented-control-item-gap);white-space:nowrap!important;inline-size:var(--_n-segmented-control-item-inline-size);user-select:none;border:0!important;opacity:var(--_n-segmented-control-item-opacity);min-block-size:var(--_n-segmented-control-item-min-block-size)!important}::slotted(input){position:absolute!important;appearance:none!important;background:0 0!important;border:0!important;transition:var(--n-transition-quickly)!important;transition-property:background-color,color,border-color,box-shadow!important;border-radius:var(--n-border-radius-s)!important;inset-block-start:0!important;inset-inline-start:0!important;inline-size:100%!important;block-size:100%!important;padding:0!important;margin:0!important}::slotted(input:focus-visible),:host([checked]){z-index:var(--n-index-mask)}:host([checked]) ::slotted(label){--_n-segmented-control-item-background-color:var(
-    --n-segmented-control-item-background-color,
-    var(--n-color-surface)
-  );--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text));--_n-segmented-control-item-border-radius:var(--n-segmented-control-item-border-radius, var(--n-border-radius-s));--_n-segmented-control-item-box-shadow:var(
-    --n-segmented-control-item-box-shadow,
-    0 0 0 1px var(--n-color-border-strong),
-    var(--n-box-shadow),
-    var(--n-box-shadow)
-  );z-index:var(--n-index-mask)}:host([checked]) ::slotted(label)::after{content:'';position:absolute;background:0 0;background-image:var(--_n-segmented-control-item-gradient);border-radius:var(--n-border-radius-s);background-repeat:repeat-x;inline-size:100%;inset-inline:0;block-size:100%;inset-block-start:0}:host([checked]) ::slotted(label:hover){--_n-segmented-control-item-background-color:var(
-    --n-segmented-control-item-background-color,
-    var(--n-color-button-hover)
-  );--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text));--_n-segmented-control-item-box-shadow:var(
-    --n-segmented-control-item-box-shadow,
-    0 0 0 1px var(--n-color-border-hover),
-    var(--n-box-shadow),
-    var(--n-box-shadow)
-  )}:host([disabled]){--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text-weak));pointer-events:none}:host([disabled]:not([checked])){--_n-segmented-control-item-background-color:var(--n-segmented-control-item-background-color, transparent)}::slotted(label:hover){--_n-segmented-control-item-background-color:var(
-    --n-segmented-control-item-background-color,
-    var(--n-color-surface-lowered)
-  );--_n-segmented-control-item-color:var(--n-segmented-control-item-color, var(--n-color-text))}::slotted(input:focus){outline:0}::slotted(input:focus-visible){box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)!important;z-index:calc(var(--n-index-mask) + 1)!important}::slotted(label:active){opacity:.8;transition:none}:host([size='s']){--_n-segmented-control-item-gap:var(--n-segmented-control-item-gap, var(--n-space-xs));--_n-segmented-control-item-padding-inline:var(
-    --n-segmented-control-item-padding-inline,
-    calc(var(--n-space-s) + 1px)
+    --n-segmented-control-item-background-color,var(--n-color-nav-hover)
+  );--_n-segmented-control-item-color:var(--n-segmented-control-item-color,var(--n-color-text-weaker));--_n-segmented-control-item-border-radius:var(--n-segmented-control-item-border-radius,0);--_n-segmented-control-item-inline-size:var(--n-segmented-control-item-inline-size,auto);--_n-segmented-control-item-box-shadow:var(--n-segmented-control-item-box-shadow,none);--_n-segmented-control-item-icon-size:var(--n-size-icon-s);--_n-segmented-control-item-opacity:1;flex:1;position:relative}::slotted(label){--n-icon-size:var(--_n-segmented-control-item-icon-size);align-items:center;background-color:var(--_n-segmented-control-item-background-color)!important;border:0!important;border-radius:var(--_n-segmented-control-item-border-radius)!important;box-shadow:var(--_n-segmented-control-item-box-shadow)!important;color:var(--_n-segmented-control-item-color)!important;cursor:pointer;display:flex!important;font-family:var(--n-font-family)!important;font-feature-settings:var(--n-font-features);font-size:var(--_n-segmented-control-item-font-size)!important;font-weight:var(--_n-segmented-control-item-font-weight)!important;gap:var(--_n-segmented-control-item-gap);inline-size:var(--_n-segmented-control-item-inline-size);justify-content:center;line-height:var(--n-line-height-form)!important;min-block-size:var(--_n-segmented-control-item-min-block-size)!important;opacity:var(--_n-segmented-control-item-opacity);padding:calc(var(--n-space-xs) - 1px) var(--_n-segmented-control-item-padding-inline)!important;position:relative!important;transition:var(--n-transition-quickly)!important;transition-property:background-color,color,border-color!important;user-select:none;white-space:nowrap!important}::slotted(input){appearance:none!important;background:#0000!important;block-size:100%!important;border:0!important;border-radius:var(--n-border-radius-s)!important;inline-size:100%!important;inset-block-start:0!important;inset-inline-start:0!important;margin:0!important;padding:0!important;position:absolute!important;transition:var(--n-transition-quickly)!important;transition-property:background-color,color,border-color,box-shadow!important}::slotted(input:focus-visible),:host([checked]){z-index:var(--n-index-mask)}:host([checked]) ::slotted(label){--_n-segmented-control-item-background-color:var(
+    --n-segmented-control-item-background-color,var(--n-color-surface)
+  );--_n-segmented-control-item-color:var(--n-segmented-control-item-color,var(--n-color-text));--_n-segmented-control-item-border-radius:var(--n-segmented-control-item-border-radius,var(--n-border-radius-s));--_n-segmented-control-item-box-shadow:var(
+    --n-segmented-control-item-box-shadow,0 0 0 1px var(--n-color-border-strong),var(--n-box-shadow),var(--n-box-shadow)
+  );z-index:var(--n-index-mask)}:host([checked]) ::slotted(label):after{background:#0000;background-image:var(--_n-segmented-control-item-gradient);background-repeat:repeat-x;block-size:100%;border-radius:var(--n-border-radius-s);content:"";inline-size:100%;inset-block-start:0;inset-inline:0;position:absolute}:host([checked]) ::slotted(label:hover){--_n-segmented-control-item-background-color:var(
+    --n-segmented-control-item-background-color,var(--n-color-button-hover)
+  );--_n-segmented-control-item-color:var(--n-segmented-control-item-color,var(--n-color-text));--_n-segmented-control-item-box-shadow:var(
+    --n-segmented-control-item-box-shadow,0 0 0 1px var(--n-color-border-hover),var(--n-box-shadow),var(--n-box-shadow)
+  )}:host([disabled]){--_n-segmented-control-item-color:var(--n-segmented-control-item-color,var(--n-color-text-weak));pointer-events:none}:host([disabled]:not([checked])){--_n-segmented-control-item-background-color:var(--n-segmented-control-item-background-color,#0000)}::slotted(label:hover){--_n-segmented-control-item-background-color:var(
+    --n-segmented-control-item-background-color,var(--n-color-surface-lowered)
+  );--_n-segmented-control-item-color:var(--n-segmented-control-item-color,var(--n-color-text))}::slotted(input:focus){outline:none}::slotted(input:focus-visible){box-shadow:0 0 0 2px var(--n-color-accent),var(--n-box-shadow)!important;z-index:calc(var(--n-index-mask) + 1)!important}::slotted(label:active){opacity:.8;transition:none}:host([size=s]){--_n-segmented-control-item-gap:var(--n-segmented-control-item-gap,var(--n-space-xs));--_n-segmented-control-item-padding-inline:var(
+    --n-segmented-control-item-padding-inline,calc(var(--n-space-s) + 1px)
   );--_n-segmented-control-item-min-block-size:var(
-    --n-segmented-control-item-min-block-size,
-    calc(var(--n-space-l) + var(--n-space-xs) - 2px)
-  );--_n-segmented-control-item-font-size:var(--n-segmented-control-item-font-size, var(--n-font-size-s));--_n-segmented-control-item-icon-size:var(--n-size-icon-xs)}:host([size='l']){--_n-segmented-control-item-gap:var(--n-segmented-control-item-gap, var(--n-space-s));--_n-segmented-control-item-padding-inline:var(
-    --n-segmented-control-item-padding-inline,
-    calc(var(--n-space-l) / 1.3)
+    --n-segmented-control-item-min-block-size,calc(var(--n-space-l) + var(--n-space-xs) - 2px)
+  );--_n-segmented-control-item-font-size:var(--n-segmented-control-item-font-size,var(--n-font-size-s));--_n-segmented-control-item-icon-size:var(--n-size-icon-xs)}:host([size=l]){--_n-segmented-control-item-gap:var(--n-segmented-control-item-gap,var(--n-space-s));--_n-segmented-control-item-padding-inline:var(
+    --n-segmented-control-item-padding-inline,calc(var(--n-space-l)/1.3)
   );--_n-segmented-control-item-min-block-size:var(
-    --n-segmented-control-item-min-block-size,
-    calc(var(--n-space-xxl) - var(--n-space-l) - 2px)
-  );--_n-segmented-control-item-font-size:var(--n-segmented-control-item-font-size, var(--n-font-size-l));--_n-segmented-control-item-font-weight:var(--n-segmented-control-item-font-weight, var(--n-font-weight-active));--_n-segmented-control-item-icon-size:var(--n-size-icon-m)}`;let u=0;let f=class extends(v(p(r))){constructor(){super(...arguments),this.inputId=`nord-segmented-control-item-${"input"}-${u++}`,this.inputSlot=new l(this,{render:()=>n`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${s(this.focusableRef)} id="${this.inputId}" type="radio" class="n-input" name="${d(this.name)}" .value="${d(this.value)}" .checked="${this.checked}" ?disabled="${this.disabled}" form="${d(this._formId)}">`}),this.labelSlot=new c(this,{slotName:"label",render:()=>this.label?n`<label slot="label-internal" for="${this.inputId}" class="n-segmented-control-item">${this.label}</label>`:o,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in Segmented Control\'s "label" slot'):e.htmlFor=this.inputId}}),this.checked=!1,this.size="m",this.label="",this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}render(){return n`<div class="n-segmented-control-item" @change="${this.handleChange}"><slot name="input"></slot><slot name="label"></slot><slot name="label-internal"></slot></div>`}handleCheckedChange(e){!e&&this.checked&&this.uncheckSiblings()}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-segmented-control-item[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){const t=e.target;this.checked=t.checked,e.stopPropagation(),this.dispatchEvent(new g("change"))}handleInput(e){e.stopPropagation();const t=e.target;this.value=t.value,this.dispatchEvent(new g("input"))}};f.styles=[h,b],e([i({type:Boolean,reflect:!0})],f.prototype,"checked",void 0),e([i({reflect:!0})],f.prototype,"size",void 0),e([i({reflect:!0})],f.prototype,"label",void 0),e([m("checked")],f.prototype,"handleCheckedChange",null),f=e([a("nord-segmented-control-item")],f);var k=f;export{k as default};
+    --n-segmented-control-item-min-block-size,calc(var(--n-space-xxl) - var(--n-space-l) - 2px)
+  );--_n-segmented-control-item-font-size:var(--n-segmented-control-item-font-size,var(--n-font-size-l));--_n-segmented-control-item-font-weight:var(--n-segmented-control-item-font-weight,var(--n-font-weight-active));--_n-segmented-control-item-icon-size:var(--n-size-icon-m)}`;let u=0;let f=class extends(v(p(r))){constructor(){super(...arguments),this.inputId=`nord-segmented-control-item-${"input"}-${u++}`,this.inputSlot=new l(this,{render:()=>n`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${s(this.focusableRef)} id="${this.inputId}" type="radio" class="n-input" name="${d(this.name)}" .value="${d(this.value)}" .checked="${this.checked}" ?disabled="${this.disabled}" form="${d(this._formId)}">`}),this.labelSlot=new c(this,{slotName:"label",render:()=>this.label?n`<label slot="label-internal" for="${this.inputId}" class="n-segmented-control-item">${this.label}</label>`:o,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in Segmented Control\'s "label" slot'):e.htmlFor=this.inputId}}),this.checked=!1,this.size="m",this.label="",this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}render(){return n`<div class="n-segmented-control-item" @change="${this.handleChange}"><slot name="input"></slot><slot name="label"></slot><slot name="label-internal"></slot></div>`}handleCheckedChange(e){!e&&this.checked&&this.uncheckSiblings()}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-segmented-control-item[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){const t=e.target;this.checked=t.checked,e.stopPropagation(),this.dispatchEvent(new g("change"))}handleInput(e){e.stopPropagation();const t=e.target;this.value=t.value,this.dispatchEvent(new g("input"))}};f.styles=[h,b],e([i({type:Boolean,reflect:!0})],f.prototype,"checked",void 0),e([i({reflect:!0})],f.prototype,"size",void 0),e([i({reflect:!0})],f.prototype,"label",void 0),e([m("checked")],f.prototype,"handleCheckedChange",null),f=e([a("nord-segmented-control-item")],f);var k=f;export{k as default};
 //# sourceMappingURL=SegmentedControlItem.js.map

package/lib/SegmentedControlItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItem.js","sources":["../src/segmented-control-item/SegmentedControlItem.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { LightDomController } from '../common/controllers/LightDomController.js'\nimport { LightSlotController } from '../common/controllers/LightSlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { NordEvent } from '../common/events.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './SegmentedControlItem.css'\n\nlet id = 0\nconst createId = (suffix: string) => `nord-segmented-control-item-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n  return element.localName === 'label'\n}\n\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\n/**\n * Segmented control items populate a segmented control with options.\n * Every item should be placed inside a segmented control.\n *\n * @status new\n * @category action\n * @slot label - Use when a label requires more than plain text.\n *\n * @cssprop [--n-segmented-control-item-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the item, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-segmented-control-item-gap=var(--n-space-xs)] - Controls the spacing between elements within the item, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-segmented-control-item-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the item.\n * @cssprop [--n-segmented-control-item-background-color=var(--n-color-nav-hover)] - Controls the background color of the item, using our [color tokens](/tokens/#color).\n * @cssprop [--n-segmented-control-item-color=var(--n-color-text-weaker)] - Controls the color of the text within the item, using our [color tokens](/tokens/#color).\n * @cssprop [--n-segmented-control-item-padding-inline=calc(var(--n-space-m) / 1.2)] - Controls the inline, or left and right, padding of the item.\n * @cssprop [--n-segmented-control-item-box-shadow=none] - Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-segmented-control-item-font-size=var(--n-font-size-m)] - Controls the size of the text within the item, using our [font tokens](/tokens/#font).\n * @cssprop [--n-segmented-control-item-font-weight=var(--n-font-weight)] - Controls the weight of the text within the item, using our [font tokens](/tokens/#font).\n * @cssprop [--n-segmented-control-item-min-block-size=calc(var(--n-space-xl) - 2px)] - Controls the minimum block size, or height, of the item using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-segmented-control-item-inline-size=auto] - Controls the inline size of the item.\n */\n@customElement('nord-segmented-control-item')\nexport default class SegmentedControlItem extends InputMixin(FocusableMixin(LitElement)) {\n  static styles = [componentStyle, style]\n\n  protected inputId = createId('input')\n\n  /**\n   * For accessibility reasons, we render the form parts of the component to the light DOM.\n   */\n  protected inputSlot = new LightDomController(this, {\n    render: () => html`\n      <input\n        slot=\"input\"\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        ${ref(this.focusableRef)}\n        id=${this.inputId}\n        type=\"radio\"\n        class=\"n-input\"\n        name=${cond(this.name)}\n        .value=${cond(this.value)}\n        .checked=${this.checked}\n        ?disabled=${this.disabled}\n        form=${cond(this._formId)}\n      />\n    `,\n  })\n\n  protected labelSlot = new LightSlotController(this, {\n    slotName: 'label',\n    render: () =>\n      this.label\n        ? html`<label slot=\"label-internal\" for=${this.inputId} class=\"n-segmented-control-item\">${this.label}</label>`\n        : nothing,\n    syncLightDom: (element) => {\n      if (!isLabel(element)) {\n        console.warn(`NORD: Only <label> elements should be placed in Segmented Control's \"label\" slot`)\n      }\n      else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })\n\n  /**\n   * Controls whether the segmented control item is checked or not.\n   */\n  @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n  /**\n   * The size of the segmented control item.\n   * This affects font-size and padding.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 'm'\n\n  /**\n   * Label for the segmented control item.\n   */\n  @property({ reflect: true }) label: string = ''\n\n  render() {\n    return html`<div class=\"n-segmented-control-item\" @change=${this.handleChange}>\n      <slot name=\"input\"></slot>\n      <slot name=\"label\"></slot>\n      <slot name=\"label-internal\"></slot>\n    </div>`\n  }\n\n  @observe('checked')\n  protected handleCheckedChange(previousChecked: boolean) {\n    // if this component was previous unchecked but is now checked,\n    // then we need to uncheck any items in the same group\n    if (!previousChecked && this.checked) {\n      this.uncheckSiblings()\n    }\n  }\n\n  private uncheckSiblings() {\n    const root = this.getRootNode() as Document | ShadowRoot\n\n    root\n      .querySelectorAll<SegmentedControlItem>(`nord-segmented-control-item[name=\"${this.name}\"]`)\n      .forEach((segmentedControlItem) => {\n        if (segmentedControlItem !== this) {\n          segmentedControlItem.checked = false\n        }\n      })\n  }\n\n  protected handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n\n    e.stopPropagation()\n\n    /**\n     * Fired whenever the segmented control item has been checked.\n     */\n    this.dispatchEvent(new NordEvent('change'))\n  }\n\n  private handleBlur = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event('blur', { bubbles: false, cancelable: true }))\n  }\n\n  private handleFocus = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event('focus', { bubbles: false, cancelable: true }))\n  }\n\n  protected handleInput(e: Event) {\n    e.stopPropagation()\n    const target = e.target as NativeInputElement\n    this.value = target.value\n\n    /**\n     * Fired as the user types into the input.\n     */\n    this.dispatchEvent(new NordEvent('input'))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-segmented-control-item': SegmentedControlItem\n  }\n}\n"],"names":["id","SegmentedControlItem","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","inputSlot","LightDomController","render","html","handleBlur","handleFocus","ref","focusableRef","cond","name","value","checked","disabled","_formId","labelSlot","LightSlotController","slotName","label","nothing","syncLightDom","element","localName","isLabel","console","warn","htmlFor","size","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","handleChange","handleCheckedChange","previousChecked","uncheckSiblings","getRootNode","querySelectorAll","forEach","segmentedControlItem","target","NordEvent","handleInput","styles","componentStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wRAeA,IAAIA,EAAK,EA8BM,IAAMC,EAAN,cAAmCC,EAAWC,EAAeC,KAA7D,WAAAC,uBAGHC,KAAAC,QAhCyB,+BAgCN,WAhC+CP,MAqClEM,KAAAE,UAAY,IAAIC,EAAmBH,KAAM,CACjDI,OAAQ,IAAMC,CAAI,8BAGNL,KAAKM,uBACJN,KAAKO,gBACZC,EAAIR,KAAKS,qBACNT,KAAKC,+CAGHS,EAAKV,KAAKW,kBACRD,EAAKV,KAAKY,qBACRZ,KAAKa,uBACJb,KAAKc,mBACVJ,EAAKV,KAAKe,eAKbf,KAAAgB,UAAY,IAAIC,EAAoBjB,KAAM,CAClDkB,SAAU,QACVd,OAAQ,IACNJ,KAAKmB,MACDd,CAAI,qCAAoCL,KAAKC,6CAA4CD,KAAKmB,gBAC9FC,EACNC,aAAeC,KA5DnB,SAAiBA,GACf,MAA6B,UAAtBA,EAAQC,SACjB,CA2DWC,CAAQF,GACXG,QAAQC,KAAK,qFAGbJ,EAAQK,QAAU3B,KAAKC,OACxB,IAOuCD,KAAOa,SAAY,EAMlCb,KAAI4B,KAAoB,IAKxB5B,KAAKmB,MAAW,GA2CrCnB,KAAAM,WAAcuB,IACpBA,EAAEC,kBACF9B,KAAK+B,cAAc,IAAIC,MAAM,OAAQ,CAAEC,SAAS,EAAOC,YAAY,IAAQ,EAGrElC,KAAAO,YAAesB,IACrBA,EAAEC,kBACF9B,KAAK+B,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAOC,YAAY,IAAQ,CAa/E,CA7DC,MAAA9B,GACE,OAAOC,CAAI,kDAAiDL,KAAKmC,6GAKlE,CAGS,mBAAAC,CAAoBC,IAGvBA,GAAmBrC,KAAKa,SAC3Bb,KAAKsC,iBAER,CAEO,eAAAA,GACOtC,KAAKuC,cAGfC,iBAAuC,qCAAqCxC,KAAKW,UACjF8B,SAASC,IACJA,IAAyB1C,OAC3B0C,EAAqB7B,SAAU,EAChC,GAEN,CAES,YAAAsB,CAAaN,GACrB,MAAMc,EAASd,EAAEc,OACjB3C,KAAKa,QAAU8B,EAAO9B,QAEtBgB,EAAEC,kBAKF9B,KAAK+B,cAAc,IAAIa,EAAU,UAClC,CAYS,WAAAC,CAAYhB,GACpBA,EAAEC,kBACF,MAAMa,EAASd,EAAEc,OACjB3C,KAAKY,MAAQ+B,EAAO/B,MAKpBZ,KAAK+B,cAAc,IAAIa,EAAU,SAClC,GAtHMjD,EAAAmD,OAAS,CAACC,EAAgBC,GA6CWC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAgC1D,EAAA2D,UAAA,eAAA,GAMvCL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAmC1D,EAAA2D,UAAA,YAAA,GAK3BL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAA0B1D,EAAA2D,UAAA,aAAA,GAWrCL,EAAA,CADTM,EAAQ,YAOR5D,EAAA2D,UAAA,sBAAA,MA1EkB3D,EAAoBsD,EAAA,CADxCO,EAAc,gCACM7D,SAAAA"}
+{"version":3,"file":"SegmentedControlItem.js","sources":["../src/segmented-control-item/SegmentedControlItem.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ref } from 'lit/directives/ref.js'\nimport { LightDomController } from '../common/controllers/LightDomController.js'\nimport { LightSlotController } from '../common/controllers/LightSlotController.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { NordEvent } from '../common/events.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './SegmentedControlItem.css'\n\nlet id = 0\nconst createId = (suffix: string) => `nord-segmented-control-item-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n  return element.localName === 'label'\n}\n\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\n/**\n * Segmented control items populate a segmented control with options.\n * Every item should be placed inside a segmented control.\n *\n * @status new\n * @category action\n * @slot label - Use when a label requires more than plain text.\n *\n * @cssprop [--n-segmented-control-item-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the item, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-segmented-control-item-gap=var(--n-space-xs)] - Controls the spacing between elements within the item, using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-segmented-control-item-gradient=linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.013) 100%))] - Controls the overlayed gradient background on the item.\n * @cssprop [--n-segmented-control-item-background-color=var(--n-color-nav-hover)] - Controls the background color of the item, using our [color tokens](/tokens/#color).\n * @cssprop [--n-segmented-control-item-color=var(--n-color-text-weaker)] - Controls the color of the text within the item, using our [color tokens](/tokens/#color).\n * @cssprop [--n-segmented-control-item-padding-inline=calc(var(--n-space-m) / 1.2)] - Controls the inline, or left and right, padding of the item.\n * @cssprop [--n-segmented-control-item-box-shadow=none] - Controls the surrounding shadow, using our [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-segmented-control-item-font-size=var(--n-font-size-m)] - Controls the size of the text within the item, using our [font tokens](/tokens/#font).\n * @cssprop [--n-segmented-control-item-font-weight=var(--n-font-weight)] - Controls the weight of the text within the item, using our [font tokens](/tokens/#font).\n * @cssprop [--n-segmented-control-item-min-block-size=calc(var(--n-space-xl) - 2px)] - Controls the minimum block size, or height, of the item using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-segmented-control-item-inline-size=auto] - Controls the inline size of the item.\n *\n * @parent SegmentedControl\n */\n@customElement('nord-segmented-control-item')\nexport default class SegmentedControlItem extends InputMixin(FocusableMixin(LitElement)) {\n  static styles = [componentStyle, style]\n\n  protected inputId = createId('input')\n\n  /**\n   * For accessibility reasons, we render the form parts of the component to the light DOM.\n   */\n  protected inputSlot = new LightDomController(this, {\n    render: () => html`\n      <input\n        slot=\"input\"\n        @blur=${this.handleBlur}\n        @focus=${this.handleFocus}\n        ${ref(this.focusableRef)}\n        id=${this.inputId}\n        type=\"radio\"\n        class=\"n-input\"\n        name=${cond(this.name)}\n        .value=${cond(this.value)}\n        .checked=${this.checked}\n        ?disabled=${this.disabled}\n        form=${cond(this._formId)}\n      />\n    `,\n  })\n\n  protected labelSlot = new LightSlotController(this, {\n    slotName: 'label',\n    render: () =>\n      this.label\n        ? html`<label slot=\"label-internal\" for=${this.inputId} class=\"n-segmented-control-item\">${this.label}</label>`\n        : nothing,\n    syncLightDom: (element) => {\n      if (!isLabel(element)) {\n        console.warn(`NORD: Only <label> elements should be placed in Segmented Control's \"label\" slot`)\n      }\n      else {\n        element.htmlFor = this.inputId\n      }\n    },\n  })\n\n  /**\n   * Controls whether the segmented control item is checked or not.\n   */\n  @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n  /**\n   * The size of the segmented control item.\n   * This affects font-size and padding.\n   */\n  @property({ reflect: true }) size: 's' | 'm' | 'l' = 'm'\n\n  /**\n   * Label for the segmented control item.\n   */\n  @property({ reflect: true }) label: string = ''\n\n  render() {\n    return html`<div class=\"n-segmented-control-item\" @change=${this.handleChange}>\n      <slot name=\"input\"></slot>\n      <slot name=\"label\"></slot>\n      <slot name=\"label-internal\"></slot>\n    </div>`\n  }\n\n  @observe('checked')\n  protected handleCheckedChange(previousChecked: boolean) {\n    // if this component was previous unchecked but is now checked,\n    // then we need to uncheck any items in the same group\n    if (!previousChecked && this.checked) {\n      this.uncheckSiblings()\n    }\n  }\n\n  private uncheckSiblings() {\n    const root = this.getRootNode() as Document | ShadowRoot\n\n    root\n      .querySelectorAll<SegmentedControlItem>(`nord-segmented-control-item[name=\"${this.name}\"]`)\n      .forEach((segmentedControlItem) => {\n        if (segmentedControlItem !== this) {\n          segmentedControlItem.checked = false\n        }\n      })\n  }\n\n  protected handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement\n    this.checked = target.checked\n\n    e.stopPropagation()\n\n    /**\n     * Fired whenever the segmented control item has been checked.\n     */\n    this.dispatchEvent(new NordEvent('change'))\n  }\n\n  private handleBlur = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event('blur', { bubbles: false, cancelable: true }))\n  }\n\n  private handleFocus = (e: Event) => {\n    e.stopPropagation()\n    this.dispatchEvent(new Event('focus', { bubbles: false, cancelable: true }))\n  }\n\n  protected handleInput(e: Event) {\n    e.stopPropagation()\n    const target = e.target as NativeInputElement\n    this.value = target.value\n\n    /**\n     * Fired as the user types into the input.\n     */\n    this.dispatchEvent(new NordEvent('input'))\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-segmented-control-item': SegmentedControlItem\n  }\n}\n"],"names":["id","SegmentedControlItem","InputMixin","FocusableMixin","LitElement","constructor","this","inputId","inputSlot","LightDomController","render","html","handleBlur","handleFocus","ref","focusableRef","cond","name","value","checked","disabled","_formId","labelSlot","LightSlotController","slotName","label","nothing","syncLightDom","element","localName","isLabel","console","warn","htmlFor","size","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","handleChange","handleCheckedChange","previousChecked","uncheckSiblings","getRootNode","querySelectorAll","forEach","segmentedControlItem","target","NordEvent","handleInput","styles","componentStyle","style","__decorate","property","type","Boolean","reflect","prototype","observe","customElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;sRAeA,IAAIA,EAAK,EAgCM,IAAMC,EAAN,cAAmCC,EAAWC,EAAeC,KAA7D,WAAAC,uBAGHC,KAAAC,QAlCyB,+BAkCN,WAlC+CP,MAuClEM,KAAAE,UAAY,IAAIC,EAAmBH,KAAM,CACjDI,OAAQ,IAAMC,CAAI,8BAGNL,KAAKM,uBACJN,KAAKO,gBACZC,EAAIR,KAAKS,qBACNT,KAAKC,+CAGHS,EAAKV,KAAKW,kBACRD,EAAKV,KAAKY,qBACRZ,KAAKa,uBACJb,KAAKc,mBACVJ,EAAKV,KAAKe,eAKbf,KAAAgB,UAAY,IAAIC,EAAoBjB,KAAM,CAClDkB,SAAU,QACVd,OAAQ,IACNJ,KAAKmB,MACDd,CAAI,qCAAoCL,KAAKC,6CAA4CD,KAAKmB,gBAC9FC,EACNC,aAAeC,KA9DnB,SAAiBA,GACf,MAA6B,UAAtBA,EAAQC,SACjB,CA6DWC,CAAQF,GACXG,QAAQC,KAAK,qFAGbJ,EAAQK,QAAU3B,KAAKC,OACxB,IAOuCD,KAAOa,SAAY,EAMlCb,KAAI4B,KAAoB,IAKxB5B,KAAKmB,MAAW,GA2CrCnB,KAAAM,WAAcuB,IACpBA,EAAEC,kBACF9B,KAAK+B,cAAc,IAAIC,MAAM,OAAQ,CAAEC,SAAS,EAAOC,YAAY,IAAQ,EAGrElC,KAAAO,YAAesB,IACrBA,EAAEC,kBACF9B,KAAK+B,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAOC,YAAY,IAAQ,CAa/E,CA7DC,MAAA9B,GACE,OAAOC,CAAI,kDAAiDL,KAAKmC,6GAKlE,CAGS,mBAAAC,CAAoBC,IAGvBA,GAAmBrC,KAAKa,SAC3Bb,KAAKsC,iBAER,CAEO,eAAAA,GACOtC,KAAKuC,cAGfC,iBAAuC,qCAAqCxC,KAAKW,UACjF8B,SAASC,IACJA,IAAyB1C,OAC3B0C,EAAqB7B,SAAU,EAChC,GAEN,CAES,YAAAsB,CAAaN,GACrB,MAAMc,EAASd,EAAEc,OACjB3C,KAAKa,QAAU8B,EAAO9B,QAEtBgB,EAAEC,kBAKF9B,KAAK+B,cAAc,IAAIa,EAAU,UAClC,CAYS,WAAAC,CAAYhB,GACpBA,EAAEC,kBACF,MAAMa,EAASd,EAAEc,OACjB3C,KAAKY,MAAQ+B,EAAO/B,MAKpBZ,KAAK+B,cAAc,IAAIa,EAAU,SAClC,GAtHMjD,EAAAmD,OAAS,CAACC,EAAgBC,GA6CWC,EAAA,CAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,KAAgC1D,EAAA2D,UAAA,eAAA,GAMvCL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAAmC1D,EAAA2D,UAAA,YAAA,GAK3BL,EAAA,CAA5BC,EAAS,CAAEG,SAAS,KAA0B1D,EAAA2D,UAAA,aAAA,GAWrCL,EAAA,CADTM,EAAQ,YAOR5D,EAAA2D,UAAA,sBAAA,MA1EkB3D,EAAoBsD,EAAA,CADxCO,EAAc,gCACM7D,SAAAA"}

package/lib/Select.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as o,html as e,nothing as n,isServer as r,LitElement as i}from"lit";import{property as s,customElement as l}from"lit/decorators.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{ref as c}from"lit/directives/ref.js";import{S as d}from"./SlotController-Z6eG7LSZ.js";import{A as p}from"./AutocompleteMixin-D8eiOxvO.js";import{F as u}from"./FocusableMixin-BlQLNPdJ.js";import{F as b}from"./FormAssociatedMixin-B4Qj-CQN.js";import{I as v}from"./InputMixin-LetXsCyv.js";import{S as h}from"./SizeMixin-CU9cLbLC.js";import{s as m}from"./Component-DSU3Qp0O.js";import{s as f}from"./FormField-BFaVzUjk.js";import g from"./Icon.js";import"./Button.js";import"./EventController-BBOmvfLa.js";import"./FormDataController-OUt5L5uC.js";import"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";var x=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z" fill="currentColor"/></svg>',tags:"nordicon small interface dropdown select arrow up down caret triangle chevron",title:"interface-dropdown-small"});const j=o`:host{--_n-select-inline-size:var(--n-select-inline-size, fit-content);--_n-select-block-size:var(--n-select-block-size, var(--n-space-xl))}.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--_n-select-block-size);inset-block-end:0;inset-inline-start:0;z-index:var(--n-index-default)}option{color:initial}nord-button{--n-button-text-align:start;--n-button-background-color:var(--n-input-background, var(--n-color-surface));--n-button-gradient:none;--n-button-box-shadow:none}nord-button:not([expand]){--_n-button-inline-size:var(--_n-select-inline-size)}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--_n-button-border-color:var(--n-button-border-color, var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color, var(--n-color-button-hover))}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-button-background-color:var(--n-input-background-inactive, var(--n-color-active));--n-button-border-color:var(--n-color-active);--n-button-color:var(--n-color-text-weakest);--n-button-toggle-icon-color:var(--n-color-text-weakest);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;g.registerIcon(x);let $=class extends(h(b(p(v(u(i)))))){constructor(){super(...arguments),this.defaultSlot=new d(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}firstUpdated(){this.setupOptionObserver()}connectedCallback(){super.connectedCallback(),this.hasUpdated&&!this.optionObserver&&this.setupOptionObserver()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.optionObserver)||void 0===t||t.disconnect(),this.optionObserver=void 0}setupOptionObserver(){this.optionObserver||(this.optionObserver=new MutationObserver((()=>this.requestUpdate())),this.optionObserver.observe(this,{subtree:!0,childList:!0,characterData:!0}))}render(){const t=this.options,o=this.getButtonText(t);return e`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${c(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" autocomplete="${this.autocomplete}">${this.placeholder&&e`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${t.map((t=>this.renderOption(t)))}</select><nord-button size="${this.size}" ?disabled="${this.disabled}" ?expand="${this.expand}" type="button" inert><slot slot="start" name="icon"></slot>${o}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()} ${this.isHintBelow?this.renderHint():n}`}get options(){return r?[]:Array.from(this.querySelectorAll("option"))}getButtonText(t){const o=t.find((t=>t.value===this.value.toString()));return o?o.text:this.placeholder?this.placeholder:t[0]?t[0].text:""}renderOption(t){return e`<option value="${a(t.value)}" ?disabled="${t.disabled}" .selected="${t.value===this.value.toString()}">${t.text}</option>`}};$.styles=[m,f,j],t([s({reflect:!0,type:Boolean})],$.prototype,"expand",void 0),$=t([l("nord-select")],$);var z=$;export{z as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{d as o}from"./interface-dropdown-small-CYvgxudU.js";import{css as e,html as n,nothing as r,isServer as i,LitElement as s}from"lit";import{property as a,customElement as l}from"lit/decorators.js";import{ifDefined as c}from"lit/directives/if-defined.js";import{ref as d}from"lit/directives/ref.js";import{S as p}from"./SlotController-Z6eG7LSZ.js";import{A as u}from"./AutocompleteMixin-D8eiOxvO.js";import{F as b}from"./FocusableMixin-BlQLNPdJ.js";import{F as v}from"./FormAssociatedMixin-D9aPREgv.js";import{I as h}from"./InputMixin-LetXsCyv.js";import{S as m}from"./SizeMixin-CU9cLbLC.js";import{s as f}from"./Component-BJ5O5n8k.js";import{s as x}from"./FormField-CMgEFZCK.js";import j from"./Icon.js";import"./Button.js";import"./EventController-BBOmvfLa.js";import"./FormDataController-OUt5L5uC.js";import"./events-Bv6wNHwJ.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"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.js";import"lit/directives/unsafe-html.js";import"./observe-D0n0zOfU.js";import"./cond-CI1KbneT.js";import"./IconManager.js";import"./LightDomController-DIwtVelV.js";import"./Spinner.js";const $=e`:host{--_n-select-inline-size:var(--n-select-inline-size,fit-content);--_n-select-block-size:var(--n-select-block-size,var(--n-space-xl))}.n-select-container{inline-size:fit-content;position:relative}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{appearance:none;background:#0000;block-size:var(--_n-select-block-size);border:0;color:var(--n-color-text);cursor:pointer;font-family:var(--n-font-family);font-size:var(--n-font-size-m);inline-size:100%;inset-block-end:0;inset-inline-start:0;opacity:.0001;position:absolute;z-index:var(--n-index-default)}option{color:initial}nord-button{--n-button-text-align:start;--n-button-background-color:var(--n-input-background,var(--n-color-surface));--n-button-gradient:none;--n-button-box-shadow:none}nord-button:not([expand]){--_n-button-inline-size:var(--_n-select-inline-size)}nord-icon{color:var(--n-color-icon)}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--_n-button-border-color:var(--n-button-border-color,var(--n-color-border-hover));--_n-button-background-color:var(--n-button-background-color,var(--n-color-button-hover))}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}:host([disabled]) nord-button{--n-button-background-color:var(--n-input-background-inactive,var(--n-color-active));--n-button-border-color:var(--n-color-active);--n-button-color:var(--n-color-text-weakest);--n-button-toggle-icon-color:var(--n-color-text-weakest);--_n-button-opacity:1}:host([disabled]) nord-icon{color:var(--n-color-text-weakest)}::slotted(:not([slot])){display:none}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;j.registerIcon(o);let g=class extends(m(v(u(h(b(s)))))){constructor(){super(...arguments),this.defaultSlot=new p(this),this.inputId="select",this.expand=!1}get formValue(){return this.value||void 0}firstUpdated(){this.setupOptionObserver()}connectedCallback(){super.connectedCallback(),this.hasUpdated&&!this.optionObserver&&this.setupOptionObserver()}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.optionObserver)||void 0===t||t.disconnect(),this.optionObserver=void 0}setupOptionObserver(){this.optionObserver||(this.optionObserver=new MutationObserver((()=>this.requestUpdate())),this.optionObserver.observe(this,{subtree:!0,childList:!0,characterData:!0}))}render(){const t=this.options,o=this.getButtonText(t);return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${d(this.focusableRef)} id="${this.inputId}" ?disabled="${this.effectiveDisabled}" ?required="${this.required}" name="${c(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-label="${c(this.controlAriaLabel)}" aria-describedby="${c(this.controlAriaDescribedby)}" aria-invalid="${c(this.controlAriaInvalid)}" autocomplete="${this.autocomplete}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${t.map((t=>this.renderOption(t)))}</select><nord-button size="${this.size}" ?disabled="${this.effectiveDisabled}" ?expand="${this.expand}" type="button" inert><slot slot="start" name="icon"></slot>${o}<nord-icon slot="end" name="interface-dropdown-small"></nord-icon></nord-button></div>${this.renderError()} ${this.isHintBelow?this.renderHint():r}`}get options(){return i?[]:Array.from(this.querySelectorAll("option"))}getButtonText(t){const o=t.find((t=>t.value===this.value.toString()));return o?o.text:this.placeholder?this.placeholder:t[0]?t[0].text:""}renderOption(t){return n`<option value="${c(t.value)}" ?disabled="${t.disabled}" .selected="${t.value===this.value.toString()}">${t.text}</option>`}};g.styles=[f,x,$],t([a({reflect:!0,type:Boolean})],g.prototype,"expand",void 0),g=t([l("nord-select")],g);var k=g;export{k as default};
 //# sourceMappingURL=Select.js.map

package/lib/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../icons/lib/assets/interface-dropdown-small.js","../src/select/Select.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m14.0864 12.0402 1.8138 1.8137-4.7724 4.7724c-.2573.2573-.5789.373-.9133.373-.33447 0-.65606-.1286-.91333-.373l-4.77238-4.7724 1.81377-1.8137 3.85904 3.859 3.8591-3.859zm-3.859-7.93687 3.859 3.85907 1.8138-1.81376-4.7724-4.77238c-.5017-.50168-1.31208-.50168-1.81376 0l-4.77238 4.77238 1.81376 1.81376 3.85908-3.85907z\" fill=\"currentColor\"/></svg>';\nexport const title = \"interface-dropdown-small\";\nexport const tags =\n  \"nordicon small interface dropdown select arrow up down caret triangle chevron\";\n","import * as dropdownIcon from '@nordhealth/icons/lib/assets/interface-dropdown-small.js'\nimport { html, isServer, 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'\n\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { AutocompleteMixin } from '../common/mixins/AutocompleteMixin.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport formFieldStyle from '../common/styles/FormField.css'\nimport Icon from '../icon/Icon.js'\nimport style from './Select.css'\nimport '../button/Button.js'\n\nIcon.registerIcon(dropdownIcon)\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n * @slot icon - Used to place an icon at the start of select.\n *\n * @cssprop [--n-select-block-size=var(--n-space-xl)] - Controls the block size, or height, of the select using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-select-inline-size=fit-content] - Controls the inline size, or width, of the select.\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement('nord-select')\nexport default class Select extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(InputMixin(FocusableMixin(LitElement)))),\n) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.value || undefined\n  }\n\n  private defaultSlot = new SlotController(this)\n  private optionObserver?: MutationObserver\n\n  protected inputId = 'select'\n\n  firstUpdated() {\n    this.setupOptionObserver()\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    // Re-setup observer after reconnection (firstUpdated only runs once per instance)\n    if (this.hasUpdated && !this.optionObserver) {\n      this.setupOptionObserver()\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // Clean up observer to prevent memory leaks\n    this.optionObserver?.disconnect()\n    this.optionObserver = undefined\n  }\n\n  private setupOptionObserver() {\n    // Avoid creating multiple observers\n    if (this.optionObserver) {\n      return\n    }\n\n    // Set up observer to watch for changes to slotted option content\n    this.optionObserver = new MutationObserver(() => this.requestUpdate())\n    this.optionObserver.observe(this, {\n      subtree: true,\n      childList: true,\n      characterData: true,\n    })\n  }\n\n  /**\n   * Controls whether the select expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const slottedOptions = this.options\n    const buttonText = this.getButtonText(slottedOptions)\n\n    return html`\n      <slot></slot>\n      ${this.renderLabel()}\n\n      <div class=\"n-select-container\">\n        <select\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          ?disabled=${this.disabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n          aria-describedby=${ifDefined(this.getDescribedBy())}\n          aria-invalid=${ifDefined(this.getInvalid())}\n          autocomplete=${this.autocomplete as any}\n        >\n          ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n          ${slottedOptions.map(option => this.renderOption(option))}\n        </select>\n\n        <nord-button size=${this.size} ?disabled=${this.disabled} ?expand=${this.expand} type=\"button\" inert>\n          <slot slot=\"start\" name=\"icon\"></slot>\n          ${buttonText}\n          <nord-icon slot=\"end\" name=\"interface-dropdown-small\"></nord-icon>\n        </nord-button>\n      </div>\n\n      ${this.renderError()}\n      ${this.isHintBelow ? this.renderHint() : nothing}\n    `\n  }\n\n  private get options() {\n    if (isServer) {\n      return []\n    }\n\n    return Array.from(this.querySelectorAll('option'))\n  }\n\n  private getButtonText(options: HTMLOptionElement[]): string {\n    const selected = options.find(option => option.value === this.value.toString())\n\n    if (selected) {\n      return selected.text\n    }\n\n    if (this.placeholder) {\n      return this.placeholder\n    }\n\n    if (options[0]) {\n      return options[0].text\n    }\n\n    return ''\n  }\n\n  private renderOption(option: HTMLOptionElement) {\n    return html`\n      <option\n        value=${ifDefined(option.value)}\n        ?disabled=${option.disabled}\n        .selected=${option.value === this.value.toString()}\n      >\n        ${option.text}\n      </option>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-select': Select\n  }\n}\n"],"names":["Icon","registerIcon","dropdownIcon","Select","SizeMixin","FormAssociatedMixin","AutocompleteMixin","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","inputId","expand","formValue","value","undefined","firstUpdated","setupOptionObserver","connectedCallback","super","hasUpdated","optionObserver","disconnectedCallback","_a","disconnect","MutationObserver","requestUpdate","observe","subtree","childList","characterData","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","autocomplete","placeholder","map","option","renderOption","size","renderError","isHintBelow","renderHint","nothing","isServer","Array","from","querySelectorAll","selected","find","toString","text","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"ojCAAe,uaAGb,sFAFmB,m0DCmBrBA,EAAKC,aAAaC,GAmBH,IAAMC,EAAN,cAAqBC,EAClCC,EAAoBC,EAAkBC,EAAWC,EAAeC,QADnD,WAAAC,uBASLC,KAAAC,YAAc,IAAIC,EAAeF,MAG/BA,KAAOG,QAAG,SAuCwBH,KAAMI,QAAG,CA4EtD,CA1HC,aAAuBC,GACrB,OAAOL,KAAKM,YAASC,CACtB,CAOD,YAAAC,GACER,KAAKS,qBACN,CAED,iBAAAC,GACEC,MAAMD,oBAEFV,KAAKY,aAAeZ,KAAKa,gBAC3Bb,KAAKS,qBAER,CAED,oBAAAK,SACEH,MAAMG,uBAEe,QAArBC,EAAAf,KAAKa,sBAAgB,IAAAE,GAAAA,EAAAC,aACrBhB,KAAKa,oBAAiBN,CACvB,CAEO,mBAAAE,GAEFT,KAAKa,iBAKTb,KAAKa,eAAiB,IAAII,kBAAiB,IAAMjB,KAAKkB,kBACtDlB,KAAKa,eAAeM,QAAQnB,KAAM,CAChCoB,SAAS,EACTC,WAAW,EACXC,eAAe,IAElB,CAOD,MAAAC,GACE,MAAMC,EAAiBxB,KAAKyB,QACtBC,EAAa1B,KAAK2B,cAAcH,GAEtC,OAAOI,CAAI,gBAEP5B,KAAK6B,wDAIDC,EAAI9B,KAAK+B,qBACN/B,KAAKG,uBACEH,KAAKgC,wBACLhC,KAAKiC,mBACVC,EAAUlC,KAAKmC,mBACZnC,KAAKoC,yBACNpC,KAAKqC,kCACKH,EAAUlC,KAAKsC,oCACnBJ,EAAUlC,KAAKuC,gCACfvC,KAAKwC,iBAElBxC,KAAKyC,aAAeb,CAAI,oDAAwC5B,KAAKM,UAASN,KAAKyC,0BACnFjB,EAAekB,KAAIC,GAAU3C,KAAK4C,aAAaD,mCAG/B3C,KAAK6C,oBAAkB7C,KAAKgC,sBAAoBhC,KAAKI,qEAErEsB,0FAKJ1B,KAAK8C,iBACL9C,KAAK+C,YAAc/C,KAAKgD,aAAeC,GAE5C,CAED,WAAYxB,GACV,OAAIyB,EACK,GAGFC,MAAMC,KAAKpD,KAAKqD,iBAAiB,UACzC,CAEO,aAAA1B,CAAcF,GACpB,MAAM6B,EAAW7B,EAAQ8B,MAAKZ,GAAUA,EAAOrC,QAAUN,KAAKM,MAAMkD,aAEpE,OAAIF,EACKA,EAASG,KAGdzD,KAAKyC,YACAzC,KAAKyC,YAGVhB,EAAQ,GACHA,EAAQ,GAAGgC,KAGb,EACR,CAEO,YAAAb,CAAaD,GACnB,OAAOf,CAAI,kBAECM,EAAUS,EAAOrC,sBACbqC,EAAOX,wBACPW,EAAOrC,QAAUN,KAAKM,MAAMkD,eAEtCb,EAAOc,eAGd,GA3HMjE,EAAMkE,OAAG,CAACC,EAAgBC,EAAgBC,GAgDLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyB1E,EAAA2E,UAAA,cAAA,GAnDvC3E,EAAMsE,EAAA,CAD1BM,EAAc,gBACM5E,SAAAA"}
+{"version":3,"file":"Select.js","sources":["../src/select/Select.ts"],"sourcesContent":["import * as dropdownIcon from '@nordhealth/icons/lib/assets/interface-dropdown-small.js'\nimport { html, isServer, 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'\n\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { AutocompleteMixin } from '../common/mixins/AutocompleteMixin.js'\n\nimport { FocusableMixin } from '../common/mixins/FocusableMixin.js'\nimport { FormAssociatedMixin } from '../common/mixins/FormAssociatedMixin.js'\nimport { InputMixin } from '../common/mixins/InputMixin.js'\nimport { SizeMixin } from '../common/mixins/SizeMixin.js'\nimport componentStyle from '../common/styles/Component.css'\n\nimport formFieldStyle from '../common/styles/FormField.css'\nimport Icon from '../icon/Icon.js'\nimport style from './Select.css'\nimport '../button/Button.js'\n\nIcon.registerIcon(dropdownIcon)\n\n/**\n * Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n *\n * @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n * @slot icon - Used to place an icon at the start of select.\n *\n * @cssprop [--n-select-block-size=var(--n-space-xl)] - Controls the block size, or height, of the select using our [spacing tokens](/tokens/#space).\n * @cssprop [--n-select-inline-size=fit-content] - Controls the inline size, or width, of the select.\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement('nord-select')\nexport default class Select extends SizeMixin(\n  FormAssociatedMixin(AutocompleteMixin(InputMixin(FocusableMixin(LitElement)))),\n) {\n  static styles = [componentStyle, formFieldStyle, style]\n\n  protected override get formValue() {\n    return this.value || undefined\n  }\n\n  private defaultSlot = new SlotController(this)\n  private optionObserver?: MutationObserver\n\n  protected inputId = 'select'\n\n  firstUpdated() {\n    this.setupOptionObserver()\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    // Re-setup observer after reconnection (firstUpdated only runs once per instance)\n    if (this.hasUpdated && !this.optionObserver) {\n      this.setupOptionObserver()\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    // Clean up observer to prevent memory leaks\n    this.optionObserver?.disconnect()\n    this.optionObserver = undefined\n  }\n\n  private setupOptionObserver() {\n    // Avoid creating multiple observers\n    if (this.optionObserver) {\n      return\n    }\n\n    // Set up observer to watch for changes to slotted option content\n    this.optionObserver = new MutationObserver(() => this.requestUpdate())\n    this.optionObserver.observe(this, {\n      subtree: true,\n      childList: true,\n      characterData: true,\n    })\n  }\n\n  /**\n   * Controls whether the select expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  render() {\n    const slottedOptions = this.options\n    const buttonText = this.getButtonText(slottedOptions)\n\n    return html`\n      <slot></slot>\n      ${this.renderLabel()}\n\n      <div class=\"n-select-container\">\n        <select\n          ${ref(this.focusableRef)}\n          id=${this.inputId}\n          ?disabled=${this.effectiveDisabled}\n          ?required=${this.required}\n          name=${ifDefined(this.name)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\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        >\n          ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n          ${slottedOptions.map(option => this.renderOption(option))}\n        </select>\n\n        <nord-button size=${this.size} ?disabled=${this.effectiveDisabled} ?expand=${this.expand} type=\"button\" inert>\n          <slot slot=\"start\" name=\"icon\"></slot>\n          ${buttonText}\n          <nord-icon slot=\"end\" name=\"interface-dropdown-small\"></nord-icon>\n        </nord-button>\n      </div>\n\n      ${this.renderError()}\n      ${this.isHintBelow ? this.renderHint() : nothing}\n    `\n  }\n\n  private get options() {\n    if (isServer) {\n      return []\n    }\n\n    return Array.from(this.querySelectorAll('option'))\n  }\n\n  private getButtonText(options: HTMLOptionElement[]): string {\n    const selected = options.find(option => option.value === this.value.toString())\n\n    if (selected) {\n      return selected.text\n    }\n\n    if (this.placeholder) {\n      return this.placeholder\n    }\n\n    if (options[0]) {\n      return options[0].text\n    }\n\n    return ''\n  }\n\n  private renderOption(option: HTMLOptionElement) {\n    return html`\n      <option\n        value=${ifDefined(option.value)}\n        ?disabled=${option.disabled}\n        .selected=${option.value === this.value.toString()}\n      >\n        ${option.text}\n      </option>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-select': Select\n  }\n}\n"],"names":["Icon","registerIcon","dropdownIcon","Select","SizeMixin","FormAssociatedMixin","AutocompleteMixin","InputMixin","FocusableMixin","LitElement","constructor","this","defaultSlot","SlotController","inputId","expand","formValue","value","undefined","firstUpdated","setupOptionObserver","connectedCallback","super","hasUpdated","optionObserver","disconnectedCallback","_a","disconnect","MutationObserver","requestUpdate","observe","subtree","childList","characterData","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","effectiveDisabled","required","ifDefined","name","handleChange","handleInput","controlAriaLabel","controlAriaDescribedby","controlAriaInvalid","autocomplete","placeholder","map","option","renderOption","size","renderError","isHintBelow","renderHint","nothing","isServer","Array","from","querySelectorAll","selected","find","toString","text","disabled","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","type","Boolean","prototype","customElement"],"mappings":"ukGAoBAA,EAAKC,aAAaC,GAmBH,IAAMC,EAAN,cAAqBC,EAClCC,EAAoBC,EAAkBC,EAAWC,EAAeC,QADnD,WAAAC,uBASLC,KAAAC,YAAc,IAAIC,EAAeF,MAG/BA,KAAOG,QAAG,SAuCwBH,KAAMI,QAAG,CA6EtD,CA3HC,aAAuBC,GACrB,OAAOL,KAAKM,YAASC,CACtB,CAOD,YAAAC,GACER,KAAKS,qBACN,CAED,iBAAAC,GACEC,MAAMD,oBAEFV,KAAKY,aAAeZ,KAAKa,gBAC3Bb,KAAKS,qBAER,CAED,oBAAAK,SACEH,MAAMG,uBAEe,QAArBC,EAAAf,KAAKa,sBAAgB,IAAAE,GAAAA,EAAAC,aACrBhB,KAAKa,oBAAiBN,CACvB,CAEO,mBAAAE,GAEFT,KAAKa,iBAKTb,KAAKa,eAAiB,IAAII,kBAAiB,IAAMjB,KAAKkB,kBACtDlB,KAAKa,eAAeM,QAAQnB,KAAM,CAChCoB,SAAS,EACTC,WAAW,EACXC,eAAe,IAElB,CAOD,MAAAC,GACE,MAAMC,EAAiBxB,KAAKyB,QACtBC,EAAa1B,KAAK2B,cAAcH,GAEtC,OAAOI,CAAI,gBAEP5B,KAAK6B,wDAIDC,EAAI9B,KAAK+B,qBACN/B,KAAKG,uBACEH,KAAKgC,iCACLhC,KAAKiC,mBACVC,EAAUlC,KAAKmC,mBACZnC,KAAKoC,yBACNpC,KAAKqC,4BACDH,EAAUlC,KAAKsC,wCACTJ,EAAUlC,KAAKuC,0CACnBL,EAAUlC,KAAKwC,sCACfxC,KAAKyC,iBAElBzC,KAAK0C,aAAed,CAAI,oDAAwC5B,KAAKM,UAASN,KAAK0C,0BACnFlB,EAAemB,KAAIC,GAAU5C,KAAK6C,aAAaD,mCAG/B5C,KAAK8C,oBAAkB9C,KAAKgC,+BAA6BhC,KAAKI,qEAE9EsB,0FAKJ1B,KAAK+C,iBACL/C,KAAKgD,YAAchD,KAAKiD,aAAeC,GAE5C,CAED,WAAYzB,GACV,OAAI0B,EACK,GAGFC,MAAMC,KAAKrD,KAAKsD,iBAAiB,UACzC,CAEO,aAAA3B,CAAcF,GACpB,MAAM8B,EAAW9B,EAAQ+B,MAAKZ,GAAUA,EAAOtC,QAAUN,KAAKM,MAAMmD,aAEpE,OAAIF,EACKA,EAASG,KAGd1D,KAAK0C,YACA1C,KAAK0C,YAGVjB,EAAQ,GACHA,EAAQ,GAAGiC,KAGb,EACR,CAEO,YAAAb,CAAaD,GACnB,OAAOhB,CAAI,kBAECM,EAAUU,EAAOtC,sBACbsC,EAAOe,wBACPf,EAAOtC,QAAUN,KAAKM,MAAMmD,eAEtCb,EAAOc,eAGd,GA5HMlE,EAAMoE,OAAG,CAACC,EAAgBC,EAAgBC,GAgDLC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyB5E,EAAA6E,UAAA,cAAA,GAnDvC7E,EAAMwE,EAAA,CAD1BM,EAAc,gBACM9E,SAAAA"}

package/lib/Skeleton.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as o,html as r}from"lit";import{property as s,customElement as t}from"lit/decorators.js";import{s as i}from"./Component-DSU3Qp0O.js";const a=n`:host{--_n-skeleton-border-radius:var(--n-skeleton-border-radius, var(--n-border-radius));--_n-skeleton-color:var(--n-skeleton-color, var(--n-color-border));--_n-skeleton-sheen-color:var(--n-skeleton-sheen-color, var(--n-color-border-strong));--_n-skeleton-animation:none;position:relative}.n-skeleton{display:flex;inline-size:100%;block-size:100%;min-block-size:var(--n-space-m)}.n-skeleton-indicator{flex:1 1 auto;background:var(--_n-skeleton-color);border-radius:var(--_n-skeleton-border-radius);opacity:.6;animation:var(--_n-skeleton-animation)}:host([effect=sheen]) .n-skeleton-indicator{background:linear-gradient(270deg,var(--_n-skeleton-sheen-color),var(--_n-skeleton-color),var(--_n-skeleton-color),var(--_n-skeleton-sheen-color));background-position:200% 0;background-size:400% 100%}@media (prefers-reduced-motion:no-preference){:host([effect=pulse]){--_n-skeleton-animation:n-pulse 1s ease-in-out 0.5s infinite alternate}:host([effect=sheen]){--_n-skeleton-animation:n-sheen 5s ease-in-out infinite}}@keyframes n-pulse{to{opacity:.2}}@keyframes n-sheen{to{background-position:-200% 0}}`;let l=class extends o{render(){return r`<div class="n-skeleton" aria-hidden="true"><div class="n-skeleton-indicator"></div></div>`}};l.styles=[i,a],e([s({reflect:!0})],l.prototype,"effect",void 0),l=e([t("nord-skeleton")],l);var d=l;export{d as default};
+import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as n,LitElement as o,html as r}from"lit";import{property as s,customElement as t}from"lit/decorators.js";import{s as i}from"./Component-BJ5O5n8k.js";const a=n`:host{--_n-skeleton-border-radius:var(--n-skeleton-border-radius,var(--n-border-radius));--_n-skeleton-color:var(--n-skeleton-color,var(--n-color-border));--_n-skeleton-sheen-color:var(--n-skeleton-sheen-color,var(--n-color-border-strong));--_n-skeleton-animation:none;position:relative}.n-skeleton{block-size:100%;display:flex;inline-size:100%;min-block-size:var(--n-space-m)}.n-skeleton-indicator{animation:var(--_n-skeleton-animation);background:var(--_n-skeleton-color);border-radius:var(--_n-skeleton-border-radius);flex:1 1 auto;opacity:.6}:host([effect=sheen]) .n-skeleton-indicator{background:linear-gradient(270deg,var(--_n-skeleton-sheen-color),var(--_n-skeleton-color),var(--_n-skeleton-color),var(--_n-skeleton-sheen-color));background-position:200% 0;background-size:400% 100%}@media (prefers-reduced-motion:no-preference){:host([effect=pulse]){--_n-skeleton-animation:n-pulse 1s ease-in-out 0.5s infinite alternate}:host([effect=sheen]){--_n-skeleton-animation:n-sheen 5s ease-in-out infinite}}@keyframes n-pulse{to{opacity:.2}}@keyframes n-sheen{to{background-position:-200% 0}}`;let l=class extends o{render(){return r`<div class="n-skeleton" aria-hidden="true"><div class="n-skeleton-indicator"></div></div>`}};l.styles=[i,a],e([s({reflect:!0})],l.prototype,"effect",void 0),l=e([t("nord-skeleton")],l);var d=l;export{d as default};
 //# sourceMappingURL=Skeleton.js.map

package/lib/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../src/skeleton/Skeleton.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Skeleton.css'\n\n/**\n * Skeletons are used to provide a low fidelity representation of content\n * before it appears in a view. This improves the perceived loading time\n * for our users.\n *\n * @status ready\n * @category feedback\n *\n * @cssprop [--n-skeleton-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-skeleton-color=var(--n-color-border)] - Controls the main color of the skeleton, using our [color tokens](/tokens/#color).\n * @cssprop [--n-skeleton-sheen-color=var(--n-color-border-strong)] - Controls the sheen color of the skeleton, using our [color tokens](/tokens/#color).\n */\n@customElement('nord-skeleton')\nexport default class Skeleton extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * Determines which animation effect the skeleton will use.\n   * The default is no animation.\n   */\n  @property({ reflect: true }) effect?: 'pulse' | 'sheen'\n\n  render() {\n    return html`\n      <div class=\"n-skeleton\" aria-hidden=\"true\">\n        <div class=\"n-skeleton-indicator\"></div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-skeleton': Skeleton\n  }\n}\n"],"names":["Skeleton","LitElement","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"gyCAmBe,IAAMA,EAAN,cAAuBC,EASpC,MAAAC,GACE,OAAOC,CAAI,2FAKZ,GAdMH,EAAAI,OAAS,CAACC,EAAgBC,GAMJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAkCT,EAAAU,UAAA,cAAA,GAPpCV,EAAQO,EAAA,CAD5BI,EAAc,kBACMX,SAAAA"}
+{"version":3,"file":"Skeleton.js","sources":["../src/skeleton/Skeleton.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Skeleton.css'\n\n/**\n * Skeletons are used to provide a low fidelity representation of content\n * before it appears in a view. This improves the perceived loading time\n * for our users.\n *\n * @status ready\n * @category feedback\n *\n * @cssprop [--n-skeleton-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-skeleton-color=var(--n-color-border)] - Controls the main color of the skeleton, using our [color tokens](/tokens/#color).\n * @cssprop [--n-skeleton-sheen-color=var(--n-color-border-strong)] - Controls the sheen color of the skeleton, using our [color tokens](/tokens/#color).\n */\n@customElement('nord-skeleton')\nexport default class Skeleton extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * Determines which animation effect the skeleton will use.\n   * The default is no animation.\n   */\n  @property({ reflect: true }) effect?: 'pulse' | 'sheen'\n\n  render() {\n    return html`\n      <div class=\"n-skeleton\" aria-hidden=\"true\">\n        <div class=\"n-skeleton-indicator\"></div>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-skeleton': Skeleton\n  }\n}\n"],"names":["Skeleton","LitElement","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"6xCAmBe,IAAMA,EAAN,cAAuBC,EASpC,MAAAC,GACE,OAAOC,CAAI,2FAKZ,GAdMH,EAAAI,OAAS,CAACC,EAAgBC,GAMJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAkCT,EAAAU,UAAA,cAAA,GAPpCV,EAAQO,EAAA,CAD5BI,EAAc,kBACMX,SAAAA"}

package/lib/Spinner.js

@@ -1,2 +1,2 @@
-import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as e,html as i}from"lit";import{property as s,customElement as o}from"lit/decorators.js";import{ifDefined as t}from"lit/directives/if-defined.js";import{c as a}from"./cond-CI1KbneT.js";import{s as l}from"./Component-DSU3Qp0O.js";const p=r`:host{--_n-spinner-color:var(--n-spinner-color, var(--n-color-accent));--_n-spinner-size:var(--n-size-icon-m);--_n-spinner-border-width:calc(var(--_n-spinner-size) * 0.18);--_n-spinner-duration:0.66s;inline-size:var(--_n-spinner-size);block-size:var(--_n-spinner-size);display:inline-flex;position:relative;color:inherit}:host([size=xs]){--_n-spinner-size:var(--n-size-icon-xs)}:host([size='s']){--_n-spinner-size:var(--n-size-icon-s)}:host([size='l']){--_n-spinner-size:var(--n-size-icon-l)}:host([size=xl]){--_n-spinner-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-spinner-size:var(--n-size-icon-xxl)}.n-spinner,.n-spinner::after{position:absolute;z-index:var(--n-index-spinner);border-radius:var(--n-border-radius-circle);border:var(--_n-spinner-border-width) solid}.n-spinner{inset:0;border-color:transparent;border-block-end-color:var(--_n-spinner-color);animation:nRotate var(--_n-spinner-duration) linear infinite}.n-spinner::after{content:'';inset:calc(var(--_n-spinner-border-width) * -1);opacity:.3;border-color:var(--_n-spinner-color);border-block-end-color:transparent}@keyframes nRotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}`;let c=class extends e{constructor(){super(...arguments),this.size="m"}render(){return i`<div class="n-spinner" role="${a(this.label,"img")}" aria-label="${t(this.label)}" style="${a(this.color,`--_n-spinner-color:${this.color}`)}"></div>`}};c.styles=[l,p],n([s({reflect:!0})],c.prototype,"size",void 0),n([s({reflect:!0})],c.prototype,"color",void 0),n([s({reflect:!0})],c.prototype,"label",void 0),c=n([o("nord-spinner")],c);var d=c;export{d as default};
+import{_ as n}from"./tslib.es6-CmLYFWVC.js";import{css as r,LitElement as e,html as i}from"lit";import{property as o,customElement as s}from"lit/decorators.js";import{ifDefined as t}from"lit/directives/if-defined.js";import{c as a}from"./cond-CI1KbneT.js";import{s as l}from"./Component-BJ5O5n8k.js";const c=r`:host{--_n-spinner-color:var(--n-spinner-color,var(--n-color-accent));--_n-spinner-size:var(--n-size-icon-m);--_n-spinner-border-width:calc(var(--_n-spinner-size)*0.18);--_n-spinner-duration:0.66s;block-size:var(--_n-spinner-size);color:inherit;display:inline-flex;inline-size:var(--_n-spinner-size);position:relative}:host([size=xs]){--_n-spinner-size:var(--n-size-icon-xs)}:host([size=s]){--_n-spinner-size:var(--n-size-icon-s)}:host([size=l]){--_n-spinner-size:var(--n-size-icon-l)}:host([size=xl]){--_n-spinner-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-spinner-size:var(--n-size-icon-xxl)}.n-spinner,.n-spinner:after{border:var(--_n-spinner-border-width) solid;border-radius:var(--n-border-radius-circle);position:absolute;z-index:var(--n-index-spinner)}.n-spinner{animation:nRotate var(--_n-spinner-duration) linear infinite;border-color:#0000;border-block-end-color:var(--_n-spinner-color);inset:0}.n-spinner:after{border-color:var(--_n-spinner-color);border-block-end-color:#0000;content:"";inset:calc(var(--_n-spinner-border-width)*-1);opacity:.3}@keyframes nRotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}`;let p=class extends e{constructor(){super(...arguments),this.size="m"}render(){return i`<div class="n-spinner" role="${a(this.label,"img")}" aria-label="${t(this.label)}" style="${a(this.color,`--_n-spinner-color:${this.color}`)}"></div>`}};p.styles=[l,c],n([o({reflect:!0})],p.prototype,"size",void 0),n([o({reflect:!0})],p.prototype,"color",void 0),n([o({reflect:!0})],p.prototype,"label",void 0),p=n([s("nord-spinner")],p);var d=p;export{d as default};
 //# sourceMappingURL=Spinner.js.map

package/lib/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { cond } from '../common/directives/cond.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Spinner.css'\n\n/**\n * Spinner component is used to indicate users that their action is being\n * processed. You can customize the size and color of the spinner with the\n * provided properties.\n *\n * @status ready\n * @category feedback\n * @cssprop [--n-spinner-color=var(--n-color-accent)] - Controls the color the spinner.\n */\n@customElement('nord-spinner')\nexport default class Spinner extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The size of the spinner.\n   */\n  @property({ reflect: true }) size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' = 'm'\n\n  /**\n   * The color of the spinner.\n   * Can accept any valid CSS color value, including custom properties.\n   * Takes precedence over the `--n-spinner-color` CSS custom property.\n   */\n  @property({ reflect: true }) color?: string\n\n  /**\n   * An accessible label for the spinner.\n   * If no label is supplied, the spinner is hidden from assistive technology.\n   */\n  @property({ reflect: true }) label?: string\n\n  render() {\n    // if a label is supplied, we give the div a role of img.\n    // without this we could not use aria-label, since it is only valid on elements of certain roles.\n    return html`\n      <div\n        class=\"n-spinner\"\n        role=${cond(this.label, 'img')}\n        aria-label=${ifDefined(this.label)}\n        style=${cond(this.color, `--_n-spinner-color:${this.color}`)}\n      ></div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-spinner': Spinner\n  }\n}\n"],"names":["Spinner","LitElement","constructor","this","size","render","html","cond","label","ifDefined","color","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"+7CAiBe,IAAMA,EAAN,cAAsBC,EAAtB,WAAAC,uBAMgBC,KAAIC,KAA0C,GA2B5E,CAZC,MAAAC,GAGE,OAAOC,CAAI,gCAGAC,EAAKJ,KAAKK,MAAO,uBACXC,EAAUN,KAAKK,kBACpBD,EAAKJ,KAAKO,MAAO,sBAAsBP,KAAKO,kBAGzD,GA/BMV,EAAAW,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDhB,EAAAiB,UAAA,YAAA,GAOjDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBhB,EAAAiB,UAAA,aAAA,GAMdH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBhB,EAAAiB,UAAA,aAAA,GAnBxBjB,EAAOc,EAAA,CAD3BI,EAAc,iBACMlB,SAAAA"}
+{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { cond } from '../common/directives/cond.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Spinner.css'\n\n/**\n * Spinner component is used to indicate users that their action is being\n * processed. You can customize the size and color of the spinner with the\n * provided properties.\n *\n * @status ready\n * @category feedback\n * @cssprop [--n-spinner-color=var(--n-color-accent)] - Controls the color the spinner.\n */\n@customElement('nord-spinner')\nexport default class Spinner extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The size of the spinner.\n   */\n  @property({ reflect: true }) size: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' = 'm'\n\n  /**\n   * The color of the spinner.\n   * Can accept any valid CSS color value, including custom properties.\n   * Takes precedence over the `--n-spinner-color` CSS custom property.\n   */\n  @property({ reflect: true }) color?: string\n\n  /**\n   * An accessible label for the spinner.\n   * If no label is supplied, the spinner is hidden from assistive technology.\n   */\n  @property({ reflect: true }) label?: string\n\n  render() {\n    // if a label is supplied, we give the div a role of img.\n    // without this we could not use aria-label, since it is only valid on elements of certain roles.\n    return html`\n      <div\n        class=\"n-spinner\"\n        role=${cond(this.label, 'img')}\n        aria-label=${ifDefined(this.label)}\n        style=${cond(this.color, `--_n-spinner-color:${this.color}`)}\n      ></div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-spinner': Spinner\n  }\n}\n"],"names":["Spinner","LitElement","constructor","this","size","render","html","cond","label","ifDefined","color","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"w6CAiBe,IAAMA,EAAN,cAAsBC,EAAtB,WAAAC,uBAMgBC,KAAIC,KAA0C,GA2B5E,CAZC,MAAAC,GAGE,OAAOC,CAAI,gCAGAC,EAAKJ,KAAKK,MAAO,uBACXC,EAAUN,KAAKK,kBACpBD,EAAKJ,KAAKO,MAAO,sBAAsBP,KAAKO,kBAGzD,GA/BMV,EAAAW,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDhB,EAAAiB,UAAA,YAAA,GAOjDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBhB,EAAAiB,UAAA,aAAA,GAMdH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBhB,EAAAiB,UAAA,aAAA,GAnBxBjB,EAAOc,EAAA,CAD3BI,EAAc,iBACMlB,SAAAA"}

package/lib/Stack.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as s,html as a}from"lit";import{property as n,customElement as i}from"lit/decorators.js";import{s as o}from"./Component-DSU3Qp0O.js";const r=e`:host{--_n-stack-gap:var(--n-stack-gap, var(--n-space-m));display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--_n-stack-gap);max-inline-size:100%;inline-size:100%}:host([direction=horizontal]){flex-direction:row}:host([wrap]){flex-wrap:wrap}:host([align-items=center]){align-items:center}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([align-items=baseline]){align-items:baseline}:host([justify-content=center]){justify-content:center}:host([justify-content=start]){justify-content:flex-start}:host([justify-content=end]){justify-content:flex-end}:host([justify-content=space-between]){justify-content:space-between}:host([justify-content=space-evenly]){justify-content:space-evenly}:host([justify-content=space-around]){justify-content:space-around}::slotted(*){margin:0!important;min-inline-size:0;max-inline-size:100%}:host([gap=none]){--_n-stack-gap:var(--n-stack-gap, 0)}:host([gap=xs]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xs))}:host([gap='s']){--_n-stack-gap:var(--n-stack-gap, var(--n-space-s))}:host([gap='m']){--_n-stack-gap:var(--n-stack-gap, var(--n-space-m))}:host([gap='l']){--_n-stack-gap:var(--n-stack-gap, var(--n-space-l))}:host([gap=xl]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xl))}:host([gap=xxl]){--_n-stack-gap:var(--n-stack-gap, var(--n-space-xxl))}`;let c=class extends s{constructor(){super(...arguments),this.gap="m",this.direction="vertical",this.alignItems="stretch",this.wrap=!1}render(){return a`<slot></slot>`}};c.styles=[o,r],t([n({reflect:!0})],c.prototype,"gap",void 0),t([n({reflect:!0})],c.prototype,"direction",void 0),t([n({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),t([n({reflect:!0,type:Boolean})],c.prototype,"wrap",void 0),t([n({reflect:!0,attribute:"justify-content"})],c.prototype,"justifyContent",void 0),c=t([i("nord-stack")],c);var p=c;export{p as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as s,html as a}from"lit";import{property as n,customElement as i}from"lit/decorators.js";import{s as o}from"./Component-BJ5O5n8k.js";const r=e`:host{--_n-stack-gap:var(--n-stack-gap,var(--n-space-m));align-items:stretch;display:flex;flex-direction:column;gap:var(--_n-stack-gap);inline-size:100%;justify-content:flex-start;max-inline-size:100%}:host([direction=horizontal]){flex-direction:row}:host([wrap]){flex-wrap:wrap}:host([align-items=center]){align-items:center}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([align-items=baseline]){align-items:baseline}:host([justify-content=center]){justify-content:center}:host([justify-content=start]){justify-content:flex-start}:host([justify-content=end]){justify-content:flex-end}:host([justify-content=space-between]){justify-content:space-between}:host([justify-content=space-evenly]){justify-content:space-evenly}:host([justify-content=space-around]){justify-content:space-around}::slotted(*){margin:0!important;max-inline-size:100%;min-inline-size:0}:host([gap=none]){--_n-stack-gap:var(--n-stack-gap,0)}:host([gap=xs]){--_n-stack-gap:var(--n-stack-gap,var(--n-space-xs))}:host([gap=s]){--_n-stack-gap:var(--n-stack-gap,var(--n-space-s))}:host([gap=m]){--_n-stack-gap:var(--n-stack-gap,var(--n-space-m))}:host([gap=l]){--_n-stack-gap:var(--n-stack-gap,var(--n-space-l))}:host([gap=xl]){--_n-stack-gap:var(--n-stack-gap,var(--n-space-xl))}:host([gap=xxl]){--_n-stack-gap:var(--n-stack-gap,var(--n-space-xxl))}`;let c=class extends s{constructor(){super(...arguments),this.gap="m",this.direction="vertical",this.alignItems="stretch",this.wrap=!1}render(){return a`<slot></slot>`}};c.styles=[o,r],t([n({reflect:!0})],c.prototype,"gap",void 0),t([n({reflect:!0})],c.prototype,"direction",void 0),t([n({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),t([n({reflect:!0,type:Boolean})],c.prototype,"wrap",void 0),t([n({reflect:!0,attribute:"justify-content"})],c.prototype,"justifyContent",void 0),c=t([i("nord-stack")],c);var p=c;export{p as default};
 //# sourceMappingURL=Stack.js.map

package/lib/Stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","sources":["../src/stack/Stack.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Stack.css'\n\n/**\n * Stack component manages layout of immediate children along the\n * vertical or horizontal axis with optional spacing between each child.\n *\n * @status ready\n * @category structure\n * @slot - The stack content.\n *\n * @cssprop [--n-stack-gap=var(--n-space-m)] - Controls the spacing between items, using our [spacing tokens](/tokens/#space).\n */\n@customElement('nord-stack')\nexport default class Stack extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The space injected between components.\n   */\n  @property({ reflect: true }) gap: 'none' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' = 'm'\n\n  /**\n   * The direction of the stack.\n   */\n  @property({ reflect: true }) direction: 'vertical' | 'horizontal' = 'vertical'\n\n  /**\n   * How to align the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: 'align-items' }) alignItems?:\n    | 'center'\n    | 'start'\n    | 'end'\n    | 'baseline'\n    | 'stretch' = 'stretch'\n\n  /**\n   * Defines whether the Stack items are forced in a single line\n   * or can be flowed into multiple lines.\n   */\n  @property({ reflect: true, type: Boolean }) wrap = false\n\n  /**\n   * How to justify the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: 'justify-content' }) justifyContent?:\n    | 'center'\n    | 'start'\n    | 'end'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n\n  render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-stack': Stack\n  }\n}\n"],"names":["Stack","LitElement","constructor","this","gap","direction","alignItems","wrap","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","type","Boolean","customElement"],"mappings":"kkDAgBe,IAAMA,EAAN,cAAoBC,EAApB,WAAAC,uBAMgBC,KAAGC,IAAmD,IAKtDD,KAASE,UAA8B,WAKbF,KAAUG,WAKjD,UAM4BH,KAAII,MAAG,CAgBpD,CAHC,MAAAC,GACE,OAAOC,CAAI,eACZ,GAzCMT,EAAAU,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiEf,EAAAgB,UAAA,WAAA,GAKzDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDf,EAAAgB,UAAA,iBAAA,GAKvBH,EAAA,CAAtDC,EAAS,CAAEC,SAAS,EAAME,UAAW,iBAKbjB,EAAAgB,UAAA,kBAAA,GAMmBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMG,KAAMC,WAAuBnB,EAAAgB,UAAA,YAAA,GAKGH,EAAA,CAA1DC,EAAS,CAAEC,SAAS,EAAME,UAAW,qBAMpBjB,EAAAgB,UAAA,sBAAA,GAtCChB,EAAKa,EAAA,CADzBO,EAAc,eACMpB,SAAAA"}
+{"version":3,"file":"Stack.js","sources":["../src/stack/Stack.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Stack.css'\n\n/**\n * Stack component manages layout of immediate children along the\n * vertical or horizontal axis with optional spacing between each child.\n *\n * @status ready\n * @category structure\n * @slot - The stack content.\n *\n * @cssprop [--n-stack-gap=var(--n-space-m)] - Controls the spacing between items, using our [spacing tokens](/tokens/#space).\n */\n@customElement('nord-stack')\nexport default class Stack extends LitElement {\n  static styles = [componentStyle, style]\n\n  /**\n   * The space injected between components.\n   */\n  @property({ reflect: true }) gap: 'none' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' = 'm'\n\n  /**\n   * The direction of the stack.\n   */\n  @property({ reflect: true }) direction: 'vertical' | 'horizontal' = 'vertical'\n\n  /**\n   * How to align the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: 'align-items' }) alignItems?:\n    | 'center'\n    | 'start'\n    | 'end'\n    | 'baseline'\n    | 'stretch' = 'stretch'\n\n  /**\n   * Defines whether the Stack items are forced in a single line\n   * or can be flowed into multiple lines.\n   */\n  @property({ reflect: true, type: Boolean }) wrap = false\n\n  /**\n   * How to justify the child items inside the stack.\n   */\n  @property({ reflect: true, attribute: 'justify-content' }) justifyContent?:\n    | 'center'\n    | 'start'\n    | 'end'\n    | 'space-between'\n    | 'space-around'\n    | 'space-evenly'\n\n  render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-stack': Stack\n  }\n}\n"],"names":["Stack","LitElement","constructor","this","gap","direction","alignItems","wrap","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","attribute","type","Boolean","customElement"],"mappings":"ojDAgBe,IAAMA,EAAN,cAAoBC,EAApB,WAAAC,uBAMgBC,KAAGC,IAAmD,IAKtDD,KAASE,UAA8B,WAKbF,KAAUG,WAKjD,UAM4BH,KAAII,MAAG,CAgBpD,CAHC,MAAAC,GACE,OAAOC,CAAI,eACZ,GAzCMT,EAAAU,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiEf,EAAAgB,UAAA,WAAA,GAKzDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyDf,EAAAgB,UAAA,iBAAA,GAKvBH,EAAA,CAAtDC,EAAS,CAAEC,SAAS,EAAME,UAAW,iBAKbjB,EAAAgB,UAAA,kBAAA,GAMmBH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMG,KAAMC,WAAuBnB,EAAAgB,UAAA,YAAA,GAKGH,EAAA,CAA1DC,EAAS,CAAEC,SAAS,EAAME,UAAW,qBAMpBjB,EAAAgB,UAAA,sBAAA,GAtCChB,EAAKa,EAAA,CADzBO,EAAc,eACMpB,SAAAA"}

package/lib/StateAttributesController-BIh96sXZ.js

@@ -0,0 +1,2 @@
+function t(t){const s=`data-${t}`;return t=>t?{[s]:""}:null}class s{constructor(t,s=()=>({}),o={}){this.host=t,this.getState=s,this.options=o,this.owned=new Set,this.hasFocus=!1,this.handleFocusIn=()=>{this.hasFocus||(this.hasFocus=!0,this.host.requestUpdate())},this.handleFocusOut=t=>{this.host.contains(t.relatedTarget)||this.hasFocus&&(this.hasFocus=!1,this.host.requestUpdate())},t.addController(this)}hostConnected(){this.options.trackFocus&&(this.host.addEventListener("focusin",this.handleFocusIn),this.host.addEventListener("focusout",this.handleFocusOut))}hostDisconnected(){this.host.removeEventListener("focusin",this.handleFocusIn),this.host.removeEventListener("focusout",this.handleFocusOut)}hostUpdated(){this.apply()}apply(){var s,o;const e={...this.getState()};this.options.trackFocus&&(e.focused=this.hasFocus);const h=null!==(s=this.options.mapping)&&void 0!==s?s:{},i=new Set;for(const[s,n]of Object.entries(e)){const e=(null!==(o=h[s])&&void 0!==o?o:t(s))(n);if(e)for(const[t,s]of Object.entries(e))this.host.getAttribute(t)!==s&&this.host.setAttribute(t,s),i.add(t)}for(const t of this.owned)i.has(t)||this.host.removeAttribute(t);this.owned=i}}export{s as S};
+//# sourceMappingURL=StateAttributesController-BIh96sXZ.js.map

package/lib/StateAttributesController-BIh96sXZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StateAttributesController-BIh96sXZ.js","sources":["../src/common/controllers/StateAttributesController.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit'\n\n/**\n * Maps a single state value to the `data-*` attributes it should set, or `null`\n * to set none. Mirrors Base UI's per-key entries in `stateAttributesMapping`\n * (e.g. a tri-state `valid` that resolves to `data-valid` or `data-invalid`).\n */\nexport type StateAttributeMapper = (value: unknown) => Record<string, string> | null\n\nexport type StateAttributesMapping = Record<string, StateAttributeMapper>\n\nexport interface StateAttributesOptions {\n  /**\n   * Track focus-within on the host and reflect it as `data-focused`. The host\n   * keeps the attribute while it or any descendant (including across a shadow\n   * boundary) holds focus. Saves each component from wiring its own\n   * focusin/focusout listeners.\n   */\n  trackFocus?: boolean\n  /** Custom per-key mapping; keys not listed fall back to the boolean default. */\n  mapping?: StateAttributesMapping\n}\n\n/** Default mapping for a boolean state key `foo`: present `data-foo` when truthy. */\nfunction defaultBooleanMapper(key: string): StateAttributeMapper {\n  const attribute = `data-${key}`\n  return value => (value ? { [attribute]: '' } : null)\n}\n\n/**\n * Reflects a host's state onto `data-*` attributes after every update — the Lit\n * equivalent of Base UI's `stateAttributesMapping` applied by `useRenderElement`.\n * Each state key toggles `data-<key>` by default; pass `mapping` to customise\n * specific keys. With `trackFocus`, it also tracks focus-within and reflects\n * `data-focused`. The controller only ever touches the attributes it sets itself,\n * so it never clobbers consumer- or Lit-managed ones.\n *\n * @example\n * ```ts\n * // data-invalid from a property, data-focused tracked automatically\n * new StateAttributesController(this, () => ({ invalid: this.invalid }), { trackFocus: true })\n * ```\n */\nexport class StateAttributesController implements ReactiveController {\n  private owned = new Set<string>()\n  private hasFocus = false\n\n  constructor(\n    private host: ReactiveControllerHost & HTMLElement,\n    private getState: () => Record<string, unknown> = () => ({}),\n    private options: StateAttributesOptions = {},\n  ) {\n    host.addController(this)\n  }\n\n  hostConnected() {\n    if (this.options.trackFocus) {\n      this.host.addEventListener('focusin', this.handleFocusIn)\n      this.host.addEventListener('focusout', this.handleFocusOut)\n    }\n  }\n\n  hostDisconnected() {\n    this.host.removeEventListener('focusin', this.handleFocusIn)\n    this.host.removeEventListener('focusout', this.handleFocusOut)\n  }\n\n  hostUpdated() {\n    this.apply()\n  }\n\n  private handleFocusIn = () => {\n    if (!this.hasFocus) {\n      this.hasFocus = true\n      this.host.requestUpdate()\n    }\n  }\n\n  private handleFocusOut = (e: FocusEvent) => {\n    // Keep focus while it moves between the host's own descendants; only clear\n    // when it leaves the host entirely.\n    if (this.host.contains(e.relatedTarget as Node | null)) {\n      return\n    }\n    if (this.hasFocus) {\n      this.hasFocus = false\n      this.host.requestUpdate()\n    }\n  }\n\n  private apply() {\n    const state: Record<string, unknown> = { ...this.getState() }\n    if (this.options.trackFocus) {\n      state.focused = this.hasFocus\n    }\n\n    const mapping = this.options.mapping ?? {}\n    const next = new Set<string>()\n\n    for (const [key, value] of Object.entries(state)) {\n      const mapper = mapping[key] ?? defaultBooleanMapper(key)\n      const attributes = mapper(value)\n      if (!attributes) {\n        continue\n      }\n      for (const [attribute, attributeValue] of Object.entries(attributes)) {\n        if (this.host.getAttribute(attribute) !== attributeValue) {\n          this.host.setAttribute(attribute, attributeValue)\n        }\n        next.add(attribute)\n      }\n    }\n\n    // Drop attributes we set on a previous run that no longer apply.\n    for (const attribute of this.owned) {\n      if (!next.has(attribute)) {\n        this.host.removeAttribute(attribute)\n      }\n    }\n    this.owned = next\n  }\n}\n"],"names":["defaultBooleanMapper","key","attribute","value","StateAttributesController","constructor","host","getState","options","this","owned","Set","hasFocus","handleFocusIn","requestUpdate","handleFocusOut","e","contains","relatedTarget","addController","hostConnected","trackFocus","addEventListener","hostDisconnected","removeEventListener","hostUpdated","apply","state","focused","mapping","_a","next","Object","entries","attributes","_b","attributeValue","getAttribute","setAttribute","add","has","removeAttribute"],"mappings":"AAwBA,SAASA,EAAqBC,GAC5B,MAAMC,EAAY,QAAQD,IAC1B,OAAOE,GAAUA,EAAQ,CAAED,CAACA,GAAY,IAAO,IACjD,OAgBaE,EAIX,WAAAC,CACUC,EACAC,EAA0C,KAAO,CAAE,GACnDC,EAAkC,IAFlCC,KAAIH,KAAJA,EACAG,KAAQF,SAARA,EACAE,KAAOD,QAAPA,EANFC,KAAAC,MAAQ,IAAIC,IACZF,KAAQG,UAAG,EA0BXH,KAAaI,cAAG,KACjBJ,KAAKG,WACRH,KAAKG,UAAW,EAChBH,KAAKH,KAAKQ,gBACX,EAGKL,KAAAM,eAAkBC,IAGpBP,KAAKH,KAAKW,SAASD,EAAEE,gBAGrBT,KAAKG,WACPH,KAAKG,UAAW,EAChBH,KAAKH,KAAKQ,gBACX,EAnCDR,EAAKa,cAAcV,KACpB,CAED,aAAAW,GACMX,KAAKD,QAAQa,aACfZ,KAAKH,KAAKgB,iBAAiB,UAAWb,KAAKI,eAC3CJ,KAAKH,KAAKgB,iBAAiB,WAAYb,KAAKM,gBAE/C,CAED,gBAAAQ,GACEd,KAAKH,KAAKkB,oBAAoB,UAAWf,KAAKI,eAC9CJ,KAAKH,KAAKkB,oBAAoB,WAAYf,KAAKM,eAChD,CAED,WAAAU,GACEhB,KAAKiB,OACN,CAqBO,KAAAA,WACN,MAAMC,EAAiC,IAAKlB,KAAKF,YAC7CE,KAAKD,QAAQa,aACfM,EAAMC,QAAUnB,KAAKG,UAGvB,MAAMiB,EAAkC,QAAxBC,EAAArB,KAAKD,QAAQqB,eAAW,IAAAC,EAAAA,EAAA,CAAA,EAClCC,EAAO,IAAIpB,IAEjB,IAAK,MAAOV,EAAKE,KAAU6B,OAAOC,QAAQN,GAAQ,CAChD,MACMO,GADqB,QAAZC,EAAAN,EAAQ5B,UAAI,IAAAkC,EAAAA,EAAInC,EAAqBC,IAC1BE,GAC1B,GAAK+B,EAGL,IAAK,MAAOhC,EAAWkC,KAAmBJ,OAAOC,QAAQC,GACnDzB,KAAKH,KAAK+B,aAAanC,KAAekC,GACxC3B,KAAKH,KAAKgC,aAAapC,EAAWkC,GAEpCL,EAAKQ,IAAIrC,EAEZ,CAGD,IAAK,MAAMA,KAAaO,KAAKC,MACtBqB,EAAKS,IAAItC,IACZO,KAAKH,KAAKmC,gBAAgBvC,GAG9BO,KAAKC,MAAQqB,CACd"}

package/lib/Sticky-CZImMrGj.js

@@ -0,0 +1,2 @@
+import{css as t}from"lit";const i=t`:host{--_n-sticky-size:0px;--_n-sticky-top:var(--n-sticky-top,0px);--_n-sticky-index:var(--n-sticky-index,var(--n-index-sticky))}:host([sticky]) .n-sticky{inset-block-start:var(--_n-sticky-top);position:sticky;z-index:var(--_n-sticky-index)}:host>*{--n-sticky-top:calc(var(--_n-sticky-top) + var(--_n-sticky-size));--n-sticky-index:calc(var(--_n-sticky-index) - 1)}`;export{i as s};
+//# sourceMappingURL=Sticky-CZImMrGj.js.map

package/lib/Sticky-CZImMrGj.js.map

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

package/lib/Tab.js

@@ -1,2 +1,2 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as o,html as a}from"lit";import{property as r,customElement as n}from"lit/decorators.js";import{S as s}from"./SlotController-Z6eG7LSZ.js";import{o as i}from"./observe-D0n0zOfU.js";import{s as l}from"./Component-DSU3Qp0O.js";import"./EventController-BBOmvfLa.js";const c=e`:host{--_n-tab-color:var(--n-tab-color, var(--n-color-text-weak));--_n-tab-font-weight:var(--n-tab-font-weight, var(--n-font-weight));--_n-tab-border:1px solid transparent;user-select:none;cursor:pointer;padding:calc(var(--n-space-l)/ 2) var(--n-space-xs);border-block-end:var(--_n-tab-border);transition:border var(--n-transition-quickly) ease}.n-tab{color:var(--_n-tab-color);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-font-size-m);font-weight:var(--_n-tab-font-weight);line-height:var(--n-line-height-form);border-radius:var(--n-border-radius-sharp);white-space:nowrap}.n-tab,.n-tab[data-text]:not([data-text=''])::before{font-weight:var(--_n-tab-font-weight)}.n-tab[data-text='']{display:flex;gap:var(--n-space-s);align-items:center}.n-tab[data-text]:not([data-text='']){text-align:center}.n-tab[data-text]:not([data-text=''])::before{content:attr(data-text);display:block;block-size:0;visibility:hidden}:host(:hover){--_n-tab-color:var(--n-tab-color, var(--n-color-text))}.n-tab[data-text]:not([data-text=''])::before,:host([aria-selected=true]){--_n-tab-color:var(--n-tab-color, var(--n-color-text-link));--_n-tab-font-weight:var(--n-tab-font-weight, var(--n-font-weight-active));--_n-tab-border:2px solid var(--n-color-text-link)}:host(:active){opacity:.8;transform:translateY(1px)}:host(:focus) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-accent);outline:0}@supports selector(:focus-visible){:host(:focus) .n-tab{box-shadow:none}:host(:focus-visible) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-accent)}}`;let b=class extends o{constructor(){super(...arguments),this.defaultSlot=new s(this),this.selected=!1}render(){return a`<div class="n-tab" data-text="${this.defaultSlot.isEmpty?this.textContent:""}"><slot></slot></div>`}handleSelectionChange(){this.setAttribute("aria-selected",`${this.selected}`),this.setAttribute("tabindex",this.selected?"0":"-1")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tab")}};b.styles=[l,c],t([r({reflect:!0,type:Boolean})],b.prototype,"selected",void 0),t([i("selected")],b.prototype,"handleSelectionChange",null),b=t([n("nord-tab")],b);var d=b;export{d as default};
+import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as o,html as a}from"lit";import{property as r,customElement as n}from"lit/decorators.js";import{S as s}from"./SlotController-Z6eG7LSZ.js";import{o as i}from"./observe-D0n0zOfU.js";import{s as l}from"./Component-BJ5O5n8k.js";import"./EventController-BBOmvfLa.js";const c=e`:host{--_n-tab-color:var(--n-tab-color,var(--n-color-text-weak));--_n-tab-font-weight:var(--n-tab-font-weight,var(--n-font-weight));--_n-tab-border:1px solid #0000;border-block-end:var(--_n-tab-border);cursor:pointer;padding:calc(var(--n-space-l)/2) var(--n-space-xs);transition:border var(--n-transition-quickly) ease;user-select:none}.n-tab{border-radius:var(--n-border-radius-sharp);color:var(--_n-tab-color);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);font-size:var(--n-font-size-m);line-height:var(--n-line-height-form);white-space:nowrap}.n-tab,.n-tab[data-text]:not([data-text=""]):before{font-weight:var(--_n-tab-font-weight)}.n-tab[data-text=""]{align-items:center;display:flex;gap:var(--n-space-s)}.n-tab[data-text]:not([data-text=""]){text-align:center}.n-tab[data-text]:not([data-text=""]):before{block-size:0;content:attr(data-text);display:block;visibility:hidden}:host(:hover){--_n-tab-color:var(--n-tab-color,var(--n-color-text))}.n-tab[data-text]:not([data-text=""]):before,:host([aria-selected=true]){--_n-tab-color:var(--n-tab-color,var(--n-color-text-link));--_n-tab-font-weight:var(--n-tab-font-weight,var(--n-font-weight-active));--_n-tab-border:2px solid var(--n-color-text-link)}:host(:active){opacity:.8;transform:translateY(1px)}:host(:focus) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-accent);outline:none}@supports selector(:focus-visible){:host(:focus) .n-tab{box-shadow:none}:host(:focus-visible) .n-tab{box-shadow:0 0 0 2px var(--n-color-background),0 0 0 4px var(--n-color-accent)}}`;let b=class extends o{constructor(){super(...arguments),this.defaultSlot=new s(this),this.selected=!1}render(){return a`<div class="n-tab" data-text="${this.defaultSlot.isEmpty?this.textContent:""}"><slot></slot></div>`}handleSelectionChange(){this.setAttribute("aria-selected",`${this.selected}`),this.setAttribute("tabindex",this.selected?"0":"-1")}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tab")}};b.styles=[l,c],t([r({reflect:!0,type:Boolean})],b.prototype,"selected",void 0),t([i("selected")],b.prototype,"handleSelectionChange",null),b=t([n("nord-tab")],b);var d=b;export{d as default};
 //# sourceMappingURL=Tab.js.map

package/lib/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../src/tab/Tab.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Tab.css'\n\n/**\n * The interactive tab button for use within the tab group component.\n *\n * @status ready\n * @category navigation\n * @slot - The tab button content.\n *\n * @cssprop [--n-tab-color=var(--n-color-text-weak)] - Controls the text color of the tab, using our [color tokens](/tokens/#color).\n * @cssprop [--n-tab-font-weight=var(--n-font-weight)] - Controls the font weight of the tab, using our [font tokens](/tokens/#font).\n */\n@customElement('nord-tab')\nexport default class Tab extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n\n  /**\n   * Whether the tab item is selected\n   */\n  @property({ reflect: true, type: Boolean }) selected: boolean = false\n\n  render() {\n    return html`<div class=\"n-tab\" data-text=\"${this.defaultSlot.isEmpty ? this.textContent : ''}\">\n      <slot></slot>\n    </div>`\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab button.\n   * Observe the selected property if it changes\n   */\n  @observe('selected')\n  protected handleSelectionChange() {\n    this.setAttribute('aria-selected', `${this.selected}`)\n    this.setAttribute('tabindex', this.selected ? '0' : '-1')\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('role', 'tab')\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tab': Tab\n  }\n}\n"],"names":["Tab","LitElement","constructor","this","defaultSlot","SlotController","selected","render","html","isEmpty","textContent","handleSelectionChange","setAttribute","connectedCallback","super","styles","componentStyle","style","__decorate","property","reflect","type","Boolean","prototype","observe","customElement"],"mappings":"07DAmBe,IAAMA,EAAN,cAAkBC,EAAlB,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MAKGA,KAAQG,UAAY,CAsBjE,CApBC,MAAAC,GACE,OAAOC,CAAI,iCAAiCL,KAAKC,YAAYK,QAAUN,KAAKO,YAAc,yBAG3F,CAOS,qBAAAC,GACRR,KAAKS,aAAa,gBAAiB,GAAGT,KAAKG,YAC3CH,KAAKS,aAAa,WAAYT,KAAKG,SAAW,IAAM,KACrD,CAED,iBAAAO,GACEC,MAAMD,oBACNV,KAAKS,aAAa,OAAQ,MAC3B,GA5BMZ,EAAAe,OAAS,CAACC,EAAgBC,GAOWC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAoCtB,EAAAuB,UAAA,gBAAA,GAa3DL,EAAA,CADTM,EAAQ,aAIRxB,EAAAuB,UAAA,wBAAA,MAxBkBvB,EAAGkB,EAAA,CADvBO,EAAc,aACMzB,SAAAA"}
+{"version":3,"file":"Tab.js","sources":["../src/tab/Tab.ts"],"sourcesContent":["import { html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { SlotController } from '../common/controllers/SlotController.js'\nimport { observe } from '../common/decorators/observe.js'\n\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Tab.css'\n\n/**\n * The interactive tab button for use within the tab group component.\n *\n * @status ready\n * @category navigation\n * @slot - The tab button content.\n *\n * @cssprop [--n-tab-color=var(--n-color-text-weak)] - Controls the text color of the tab, using our [color tokens](/tokens/#color).\n * @cssprop [--n-tab-font-weight=var(--n-font-weight)] - Controls the font weight of the tab, using our [font tokens](/tokens/#font).\n */\n@customElement('nord-tab')\nexport default class Tab extends LitElement {\n  static styles = [componentStyle, style]\n\n  private defaultSlot = new SlotController(this)\n\n  /**\n   * Whether the tab item is selected\n   */\n  @property({ reflect: true, type: Boolean }) selected: boolean = false\n\n  render() {\n    return html`<div class=\"n-tab\" data-text=\"${this.defaultSlot.isEmpty ? this.textContent : ''}\">\n      <slot></slot>\n    </div>`\n  }\n\n  /**\n   * Apply accessible attributes and values to the tab button.\n   * Observe the selected property if it changes\n   */\n  @observe('selected')\n  protected handleSelectionChange() {\n    this.setAttribute('aria-selected', `${this.selected}`)\n    this.setAttribute('tabindex', this.selected ? '0' : '-1')\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('role', 'tab')\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-tab': Tab\n  }\n}\n"],"names":["Tab","LitElement","constructor","this","defaultSlot","SlotController","selected","render","html","isEmpty","textContent","handleSelectionChange","setAttribute","connectedCallback","super","styles","componentStyle","style","__decorate","property","reflect","type","Boolean","prototype","observe","customElement"],"mappings":"w4DAmBe,IAAMA,EAAN,cAAkBC,EAAlB,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MAKGA,KAAQG,UAAY,CAsBjE,CApBC,MAAAC,GACE,OAAOC,CAAI,iCAAiCL,KAAKC,YAAYK,QAAUN,KAAKO,YAAc,yBAG3F,CAOS,qBAAAC,GACRR,KAAKS,aAAa,gBAAiB,GAAGT,KAAKG,YAC3CH,KAAKS,aAAa,WAAYT,KAAKG,SAAW,IAAM,KACrD,CAED,iBAAAO,GACEC,MAAMD,oBACNV,KAAKS,aAAa,OAAQ,MAC3B,GA5BMZ,EAAAe,OAAS,CAACC,EAAgBC,GAOWC,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAoCtB,EAAAuB,UAAA,gBAAA,GAa3DL,EAAA,CADTM,EAAQ,aAIRxB,EAAAuB,UAAA,wBAAA,MAxBkBvB,EAAGkB,EAAA,CADvBO,EAAc,aACMzB,SAAAA"}