@nordhealth/components 5.0.0 → 5.0.2

package/lib/{Popout-CFtFoCaA.js.map → Popout-B6Hirj3y.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Popout-CFtFoCaA.js","sources":["../src/common/mixins/FloatingComponentMixin.ts","../src/popout/Popout.ts"],"sourcesContent":["import type { Alignment } from '@floating-ui/dom'\nimport type { LitElement } from 'lit'\nimport type { LogicalSide } from '../positioning.js'\nimport { property } from 'lit/decorators.js'\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FloatingMixinInterface {\n  open: boolean\n  align: Alignment\n  position: LogicalSide | 'auto'\n  sideOffset: number\n  alignOffset: number\n}\n\nexport function FloatingMixin<T extends Constructor<LitElement>>(\n  superClass: T,\n): Constructor<FloatingMixinInterface> & T {\n  class FloatingElement extends superClass {\n    /**\n     * Controls whether the component is open or not.\n     */\n    @property({ type: Boolean, reflect: true }) open = false\n\n    /**\n     * Set the alignment in relation to the toggle (or anchor) depending on the position.\n     * `start` will align it to the left of the toggle (or anchor).\n     * `end` will align it to the right of the toggle (or anchor).\n     * Setting the `position` to `inline-start` or `inline-end` will switch\n     * `start` and `end` to the top and bottom respectively.\n     */\n    @property({ reflect: true }) align: 'start' | 'end' = 'start'\n\n    /**\n     * Set the position in relation to the toggle (or anchor).\n     * Options follow logical properties.\n     * `block-start` and `block-end` referring to top and bottom respectively,\n     * `inline-start` and `inline-end` referring to left and right respectively.\n     * You can also set it to `auto` for automatic positioning depending on\n     * which side has the most space available.\n     */\n    @property({ reflect: true }) position: 'block-end' | 'block-start' | 'inline-start' | 'inline-end' | 'auto'\n      = 'block-end'\n\n    /**\n     * Distance in pixels from the toggle (or anchor) along the main axis — the\n     * gap between the floating element and the side it opens against. Fed into\n     * Floating UI's `offset` middleware as `mainAxis`. Defaults to `8`.\n     */\n    @property({ reflect: true, type: Number, attribute: 'side-offset' }) sideOffset = 8\n\n    /**\n     * Offset in pixels along the alignment axis — slides the floating element\n     * toward the `start` or `end` of the toggle (or anchor). Fed into Floating\n     * UI's `offset` middleware as `alignmentAxis`. Defaults to `0`.\n     */\n    @property({ reflect: true, type: Number, attribute: 'align-offset' }) alignOffset = 0\n  }\n\n  return FloatingElement\n}\n","import type {\n  ComputePositionConfig,\n  Placement,\n} from '@floating-ui/dom'\nimport {\n  autoPlacement,\n  autoUpdate,\n  computePosition,\n  flip,\n  hide,\n  offset,\n  shift,\n} from '@floating-ui/dom'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { ScrollbarController } from '../common/controllers/ScrollbarController.js'\n\nimport { observe } from '../common/decorators/observe.js'\nimport { NordEvent, transition } from '../common/events.js'\nimport { FloatingMixin } from '../common/mixins/FloatingComponentMixin.js'\nimport { logicalToPhysical } from '../common/positioning.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Popout.css'\n\n/*\n * The breakpoint width to switch between \"sheet\" design and floating design\n */\nconst mediaQuery\n  = typeof matchMedia === 'undefined'\n    ? ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n    : matchMedia('(max-width: 35.9375em)')\n\n/**\n * Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.\n *\n * @status ready\n * @category overlay\n * @slot - The popout content.\n *\n * @cssprop [--n-popout-background=var(--n-color-surface)] - Background of the popout container. Set to `transparent` to suppress the popout's own surface (e.g. when a slotted element paints its own background).\n * @cssprop [--n-popout-box-shadow=var(--n-box-shadow-popout)] - Box-shadow of the popout container. Set to `none` to suppress the popout's own shadow.\n */\n@customElement('nord-popout')\nexport default class Popout extends FloatingMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private targetElement?: HTMLElement\n  private anchorElement?: HTMLElement\n  private cleanupAutoUpdate?: ReturnType<typeof autoUpdate>\n\n  @query('.n-popout', true) private popout!: HTMLDivElement\n\n  private scrollBar = new ScrollbarController(this)\n\n  /**\n   * Handle dismissal of the popout, clicking outside the target button and popout.\n   */\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== 'click'),\n    isDismissible: node => node !== this.popout && node !== this.targetElement,\n  })\n\n  private events = new EventController(this)\n  private direction = new DirectionController(this)\n\n  @state() private computedPosition?: Placement\n\n  @state() private smallViewport = mediaQuery.matches\n\n  /**\n   * The id for the active element to reference via aria-controls.\n   */\n\n  @property({ reflect: true }) id: string = ''\n\n  /**\n   * Set an optional anchor element to align against, replacing the triggering element.\n   */\n  @property({ reflect: true }) anchor?: string\n\n  /**\n   * Set to true to always display the popout as a floating overlay, even on smaller viewports.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'always-floating' }) alwaysFloating: boolean = false\n\n  /**\n   * Set to true when the consuming component owns the `open` state and drives\n   * the popout itself (e.g. via its own trigger `@click` and `show()`/`hide()`).\n   * The popout stays presentational — positioning, top layer, light dismiss and\n   * transitions all still work — but it does NOT attach its own click-to-toggle\n   * listener to the `aria-controls` trigger, avoiding a competing second toggle\n   * on the same click.\n   */\n  @property({ reflect: true, type: Boolean }) controlled: boolean = false\n\n  /**\n   * Show the popout.\n   * A promise that resolves to a `TransitionEvent` when the popout's show animation ends or is cancelled.\n   * If the popout is already open, the promise resolves immediately with `undefined`.\n   */\n  async show(): Promise<TransitionEvent | void> {\n    if (this.open) {\n      return Promise.resolve()\n    }\n\n    this.enterTopLayer()\n    this.open = true\n\n    // we should only focus once the popout is visible after render is complete\n    await this.updateComplete\n\n    /**\n     * Dispatched when the popout is opened.\n     */\n    this.dispatchEvent(new NordEvent('open'))\n\n    return transition(this.popout)\n  }\n\n  /**\n   * Hide the popout.\n   * Returns a promise that resolves to a `TransitionEvent` when the popout's hide animation ends or is cancelled.\n   * If the popout is already closed, the promise resolves immediately with `undefined`.\n   * @param {boolean} moveFocusToButton prevent focus returning to the target button. Default is true.\n   */\n  async hide(moveFocusToButton: boolean = true): Promise<TransitionEvent | void> {\n    if (!this.open) {\n      return Promise.resolve()\n    }\n\n    this.open = false\n\n    this.cleanupAutoUpdate?.()\n\n    /**\n     * Dispatched when the popout is closed.\n     */\n    this.dispatchEvent(new NordEvent('close'))\n\n    if (moveFocusToButton) {\n      this.targetElement?.focus({ preventScroll: true })\n    }\n\n    const result = await transition(this.popout)\n    this.leaveTopLayer()\n    return result\n  }\n\n  /**\n   * Position the popout on load.\n   */\n  firstUpdated() {\n    if (!this.smallViewport || this.alwaysFloating) {\n      this.updatePosition()\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.events.listen(mediaQuery, 'change', this.handleMediaQueryChange)\n\n    this.initializeElements()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.cleanupAutoUpdate?.()\n    this.targetElement?.removeAttribute('aria-expanded')\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"n-popout ${this.computedPosition} is-${this.direction.dir}\"\n        aria-hidden=${this.open ? 'false' : 'true'}\n        @transitionend=${this.enableScroll}\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n\n  @observe('id')\n  protected handleIdChange() {\n    // clean up any old listeners\n    this.targetElement?.removeEventListener('click', this.toggleOpen)\n\n    if (!this.id) {\n      console.warn('NORD: popout requires an id attribute and value')\n    }\n    else {\n      this.initializeElements()\n    }\n  }\n\n  private initializeElements() {\n    this.targetElement = this.getToggle()\n    this.anchorElement = this.getAnchor()\n\n    // In controlled mode the consuming component owns the toggle, so the popout\n    // resolves its trigger (for positioning, aria-expanded and light dismiss) but\n    // does not attach its own click-to-toggle listener.\n    if (!this.controlled) {\n      this.events.listen(this.targetElement, 'click', this.toggleOpen)\n    }\n  }\n\n  @observe('open')\n  protected handleOpenChange() {\n    this.targetElement?.setAttribute('aria-expanded', `${this.open}`)\n\n    if (this.open) {\n      this.enterTopLayer()\n\n      if (this.smallViewport && !this.alwaysFloating) {\n        // hide scrollbar and prevent scroll on body\n        this.scrollBar.lockScroll()\n      }\n      else if (this.anchorElement) {\n        this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n      }\n    }\n    else {\n      this.cleanupAutoUpdate?.()\n    }\n  }\n\n  @observe('anchor')\n  protected handleAnchorChange() {\n    this.cleanupAutoUpdate?.()\n    this.anchorElement = this.getAnchor()\n\n    // if the popout is already open when the anchor changes, we should update its position\n    if (this.open && (!this.smallViewport || this.alwaysFloating) && this.anchorElement) {\n      this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n    }\n  }\n\n  private enableScroll = () => {\n    // scrollbar should only be restored when the backdrop has transitioned\n    // that way we avoid awkward double scrollbars.\n    if (!this.open) {\n      this.scrollBar.unlockScroll()\n      this.leaveTopLayer()\n    }\n  }\n\n  /**\n   * Place the element in the top layer via the Popover API so that\n   * position: fixed works relative to the viewport regardless of\n   * container queries or other containing block ancestors.\n   */\n  private enterTopLayer() {\n    if (typeof this.showPopover !== 'function')\n      return\n\n    try {\n      this.setAttribute('popover', 'manual')\n      this.showPopover()\n    }\n    catch {\n      this.removeAttribute('popover')\n    }\n  }\n\n  private leaveTopLayer() {\n    this.removeAttribute('popover')\n  }\n\n  /**\n   * Get the position of the element toggling the popout\n   * and position the popout underneath it, taking into account the optional placement.\n   */\n  private updatePosition = async () => {\n    if (!this.anchorElement) {\n      return\n    }\n\n    const computePositionConfig: ComputePositionConfig = {\n      strategy: 'fixed',\n    }\n\n    if (this.position === 'auto') {\n      computePositionConfig.middleware = [\n        offset({ mainAxis: this.sideOffset, alignmentAxis: this.alignOffset }),\n        autoPlacement({ alignment: this.align, padding: 8 }),\n        shift({\n          padding: 8,\n        }),\n        hide(),\n      ]\n    }\n    else {\n      computePositionConfig.placement = logicalToPhysical(this.position, this.align, this.direction.dir)\n      computePositionConfig.middleware = [\n        offset({ mainAxis: this.sideOffset, alignmentAxis: this.alignOffset }),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n        hide(),\n      ]\n    }\n\n    const { x, y, placement, middlewareData } = await computePosition(this.anchorElement, this, computePositionConfig)\n\n    this.computedPosition = placement\n\n    // use physical properties here since floating-ui\n    // works exclusively in physical dimensions\n    // we do all the mapping in logicalToPhysical\n    this.style.setProperty('--_n-popout-position-x', `${x}px`)\n    this.style.setProperty('--_n-popout-position-y', `${y}px`)\n\n    if (middlewareData.hide?.referenceHidden) {\n      this.hide()\n    }\n  }\n\n  /**\n   * Toggle the popout open or closed using state.\n   * Updating the position to underneath the target button before the popout is opened.\n   */\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n    if (this.open) {\n      this.hide(false)\n    }\n    else if (!this.smallViewport || this.alwaysFloating) {\n      this.enterTopLayer()\n      this.updatePosition().then(() => this.show())\n    }\n    else {\n      this.show()\n    }\n  }\n\n  private getToggle() {\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const allToggles = rootNode.querySelectorAll<HTMLElement>(`[aria-controls='${this.id}']`)\n\n    let toggle = allToggles[0]\n\n    // When multiple toggles share the same aria-controls (duplicate IDs on page),\n    // pair each toggle with its corresponding popout by document order.\n    if (allToggles.length > 1) {\n      const index = [...rootNode.querySelectorAll<HTMLElement>(`[id='${this.id}']`)].indexOf(this)\n      if (index >= 0 && index < allToggles.length) {\n        toggle = allToggles[index]\n      }\n    }\n\n    if (toggle instanceof HTMLSlotElement) {\n      return toggle.assignedElements()[0] as HTMLElement\n    }\n\n    return toggle\n  }\n\n  private getAnchor() {\n    if (!this.anchor) {\n      return this.targetElement\n    }\n\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const anchor = <HTMLElement>rootNode.querySelector(`#${this.anchor}`)\n\n    if (anchor instanceof HTMLSlotElement) {\n      return anchor.assignedElements()[0] as HTMLElement\n    }\n\n    return anchor\n  }\n\n  /**\n   * Update the smallViewport flag to switch between \"sheet\" and \"floating\".\n   * autoUpdate is needed when a viewport gets larger and the popout is open.\n   */\n  private handleMediaQueryChange = () => {\n    this.smallViewport = mediaQuery.matches\n\n    this.cleanupAutoUpdate?.()\n\n    if ((!this.smallViewport || this.alwaysFloating) && this.open && this.anchorElement) {\n      this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n      this.scrollBar.unlockScroll()\n    }\n    else if (this.open) {\n      this.scrollBar.lockScroll()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-popout': Popout\n  }\n}\n"],"names":["FloatingMixin","superClass","FloatingElement","constructor","this","open","align","position","sideOffset","alignOffset","__decorate","property","type","Boolean","reflect","prototype","Number","attribute","mediaQuery","matchMedia","matches","addEventListener","Popout","LitElement","scrollBar","ScrollbarController","dismiss","LightDismissController","isOpen","onDismiss","e","hide","isDismissible","node","popout","targetElement","events","EventController","direction","DirectionController","smallViewport","id","alwaysFloating","controlled","enableScroll","unlockScroll","leaveTopLayer","updatePosition","async","anchorElement","computePositionConfig","strategy","middleware","offset","mainAxis","alignmentAxis","autoPlacement","alignment","padding","shift","placement","logicalToPhysical","dir","flip","x","y","middlewareData","computePosition","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","enterTopLayer","then","show","handleMediaQueryChange","cleanupAutoUpdate","call","autoUpdate","lockScroll","Promise","resolve","updateComplete","dispatchEvent","NordEvent","transition","moveFocusToButton","_b","focus","preventScroll","result","firstUpdated","connectedCallback","super","listen","initializeElements","disconnectedCallback","removeAttribute","render","html","handleIdChange","removeEventListener","console","warn","getToggle","getAnchor","handleOpenChange","setAttribute","handleAnchorChange","showPopover","rootNode","getRootNode","allToggles","querySelectorAll","toggle","length","index","indexOf","HTMLSlotElement","assignedElements","anchor","querySelector","styles","componentStyle","query","state","observe","customElement"],"mappings":"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"}
+{"version":3,"file":"Popout-B6Hirj3y.js","sources":["../src/common/mixins/FloatingComponentMixin.ts","../src/popout/Popout.ts"],"sourcesContent":["import type { Alignment } from '@floating-ui/dom'\nimport type { LitElement } from 'lit'\nimport type { LogicalSide } from '../positioning.js'\nimport { property } from 'lit/decorators.js'\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FloatingMixinInterface {\n  open: boolean\n  align: Alignment\n  position: LogicalSide | 'auto'\n  sideOffset: number\n  alignOffset: number\n}\n\nexport function FloatingMixin<T extends Constructor<LitElement>>(\n  superClass: T,\n): Constructor<FloatingMixinInterface> & T {\n  class FloatingElement extends superClass {\n    /**\n     * Controls whether the component is open or not.\n     */\n    @property({ type: Boolean, reflect: true }) open = false\n\n    /**\n     * Set the alignment in relation to the toggle (or anchor) depending on the position.\n     * `start` will align it to the left of the toggle (or anchor).\n     * `end` will align it to the right of the toggle (or anchor).\n     * Setting the `position` to `inline-start` or `inline-end` will switch\n     * `start` and `end` to the top and bottom respectively.\n     */\n    @property({ reflect: true }) align: 'start' | 'end' = 'start'\n\n    /**\n     * Set the position in relation to the toggle (or anchor).\n     * Options follow logical properties.\n     * `block-start` and `block-end` referring to top and bottom respectively,\n     * `inline-start` and `inline-end` referring to left and right respectively.\n     * You can also set it to `auto` for automatic positioning depending on\n     * which side has the most space available.\n     */\n    @property({ reflect: true }) position: 'block-end' | 'block-start' | 'inline-start' | 'inline-end' | 'auto'\n      = 'block-end'\n\n    /**\n     * Distance in pixels from the toggle (or anchor) along the main axis — the\n     * gap between the floating element and the side it opens against. Fed into\n     * Floating UI's `offset` middleware as `mainAxis`. Defaults to `8`.\n     */\n    @property({ reflect: true, type: Number, attribute: 'side-offset' }) sideOffset = 8\n\n    /**\n     * Offset in pixels along the alignment axis — slides the floating element\n     * toward the `start` or `end` of the toggle (or anchor). Fed into Floating\n     * UI's `offset` middleware as `alignmentAxis`. Defaults to `0`.\n     */\n    @property({ reflect: true, type: Number, attribute: 'align-offset' }) alignOffset = 0\n  }\n\n  return FloatingElement\n}\n","import type {\n  ComputePositionConfig,\n  Placement,\n} from '@floating-ui/dom'\nimport {\n  autoPlacement,\n  autoUpdate,\n  computePosition,\n  flip,\n  hide,\n  offset,\n  shift,\n} from '@floating-ui/dom'\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { EventController } from '../common/controllers/EventController.js'\nimport { LightDismissController } from '../common/controllers/LightDismissController.js'\nimport { ScrollbarController } from '../common/controllers/ScrollbarController.js'\n\nimport { observe } from '../common/decorators/observe.js'\nimport { NordEvent, transition } from '../common/events.js'\nimport { FloatingMixin } from '../common/mixins/FloatingComponentMixin.js'\nimport { logicalToPhysical } from '../common/positioning.js'\nimport componentStyle from '../common/styles/Component.css'\nimport style from './Popout.css'\n\n/*\n * The breakpoint width to switch between \"sheet\" design and floating design\n */\nconst mediaQuery\n  = typeof matchMedia === 'undefined'\n    ? ({\n        matches: false,\n        addEventListener() {\n          /* noop */\n        },\n      } as unknown as MediaQueryList)\n    : matchMedia('(max-width: 35.9375em)')\n\n/**\n * Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.\n *\n * @status ready\n * @category overlay\n * @slot - The popout content.\n *\n * @cssprop [--n-popout-background=var(--n-color-surface)] - Background of the popout container. Set to `transparent` to suppress the popout's own surface (e.g. when a slotted element paints its own background).\n * @cssprop [--n-popout-box-shadow=var(--n-box-shadow-popout)] - Box-shadow of the popout container. Set to `none` to suppress the popout's own shadow.\n */\n@customElement('nord-popout')\nexport default class Popout extends FloatingMixin(LitElement) {\n  static styles = [componentStyle, style]\n\n  private targetElement?: HTMLElement\n  private anchorElement?: HTMLElement\n  private cleanupAutoUpdate?: ReturnType<typeof autoUpdate>\n\n  @query('.n-popout', true) private popout!: HTMLDivElement\n\n  private scrollBar = new ScrollbarController(this)\n\n  /**\n   * Handle dismissal of the popout, clicking outside the target button and popout.\n   */\n  private dismiss = new LightDismissController(this, {\n    isOpen: () => this.open,\n    onDismiss: e => this.hide(e.type !== 'click'),\n    isDismissible: node => node !== this.popout && node !== this.targetElement,\n  })\n\n  private events = new EventController(this)\n  private direction = new DirectionController(this)\n\n  @state() private computedPosition?: Placement\n\n  @state() private smallViewport = mediaQuery.matches\n\n  /**\n   * The id for the active element to reference via aria-controls.\n   */\n\n  @property({ reflect: true }) id: string = ''\n\n  /**\n   * Set an optional anchor element to align against, replacing the triggering element.\n   */\n  @property({ reflect: true }) anchor?: string\n\n  /**\n   * Set to true to always display the popout as a floating overlay, even on smaller viewports.\n   */\n  @property({ reflect: true, type: Boolean, attribute: 'always-floating' }) alwaysFloating: boolean = false\n\n  /**\n   * Set to true when the consuming component owns the `open` state and drives\n   * the popout itself (e.g. via its own trigger `@click` and `show()`/`hide()`).\n   * The popout stays presentational — positioning, top layer, light dismiss and\n   * transitions all still work — but it does NOT attach its own click-to-toggle\n   * listener to the `aria-controls` trigger, avoiding a competing second toggle\n   * on the same click.\n   */\n  @property({ reflect: true, type: Boolean }) controlled: boolean = false\n\n  /**\n   * Show the popout.\n   * A promise that resolves to a `TransitionEvent` when the popout's show animation ends or is cancelled.\n   * If the popout is already open, the promise resolves immediately with `undefined`.\n   */\n  async show(): Promise<TransitionEvent | void> {\n    if (this.open) {\n      return Promise.resolve()\n    }\n\n    this.enterTopLayer()\n    this.open = true\n\n    // we should only focus once the popout is visible after render is complete\n    await this.updateComplete\n\n    /**\n     * Dispatched when the popout is opened.\n     */\n    this.dispatchEvent(new NordEvent('open'))\n\n    return transition(this.popout)\n  }\n\n  /**\n   * Hide the popout.\n   * Returns a promise that resolves to a `TransitionEvent` when the popout's hide animation ends or is cancelled.\n   * If the popout is already closed, the promise resolves immediately with `undefined`.\n   * @param {boolean} moveFocusToButton prevent focus returning to the target button. Default is true.\n   */\n  async hide(moveFocusToButton: boolean = true): Promise<TransitionEvent | void> {\n    if (!this.open) {\n      return Promise.resolve()\n    }\n\n    this.open = false\n\n    this.cleanupAutoUpdate?.()\n\n    /**\n     * Dispatched when the popout is closed.\n     */\n    this.dispatchEvent(new NordEvent('close'))\n\n    if (moveFocusToButton) {\n      this.targetElement?.focus({ preventScroll: true })\n    }\n\n    const result = await transition(this.popout)\n    this.leaveTopLayer()\n    return result\n  }\n\n  /**\n   * Position the popout on load.\n   */\n  firstUpdated() {\n    if (!this.smallViewport || this.alwaysFloating) {\n      this.updatePosition()\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.events.listen(mediaQuery, 'change', this.handleMediaQueryChange)\n\n    this.initializeElements()\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.cleanupAutoUpdate?.()\n    this.targetElement?.removeAttribute('aria-expanded')\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"n-popout ${this.computedPosition} is-${this.direction.dir}\"\n        aria-hidden=${this.open ? 'false' : 'true'}\n        @transitionend=${this.enableScroll}\n      >\n        <slot></slot>\n      </div>\n    `\n  }\n\n  @observe('id')\n  protected handleIdChange() {\n    // clean up any old listeners\n    this.targetElement?.removeEventListener('click', this.toggleOpen)\n\n    if (!this.id) {\n      console.warn('NORD: popout requires an id attribute and value')\n    }\n    else {\n      this.initializeElements()\n    }\n  }\n\n  private initializeElements() {\n    this.targetElement = this.getToggle()\n    this.anchorElement = this.getAnchor()\n\n    // In controlled mode the consuming component owns the toggle, so the popout\n    // resolves its trigger (for positioning, aria-expanded and light dismiss) but\n    // does not attach its own click-to-toggle listener.\n    if (!this.controlled) {\n      this.events.listen(this.targetElement, 'click', this.toggleOpen)\n    }\n  }\n\n  @observe('open')\n  protected handleOpenChange() {\n    this.targetElement?.setAttribute('aria-expanded', `${this.open}`)\n\n    if (this.open) {\n      this.enterTopLayer()\n\n      if (this.smallViewport && !this.alwaysFloating) {\n        // hide scrollbar and prevent scroll on body\n        this.scrollBar.lockScroll()\n      }\n      else if (this.anchorElement) {\n        this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n      }\n    }\n    else {\n      this.cleanupAutoUpdate?.()\n    }\n  }\n\n  @observe('anchor')\n  protected handleAnchorChange() {\n    this.cleanupAutoUpdate?.()\n    this.anchorElement = this.getAnchor()\n\n    // if the popout is already open when the anchor changes, we should update its position\n    if (this.open && (!this.smallViewport || this.alwaysFloating) && this.anchorElement) {\n      this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n    }\n  }\n\n  private enableScroll = () => {\n    // scrollbar should only be restored when the backdrop has transitioned\n    // that way we avoid awkward double scrollbars.\n    if (!this.open) {\n      this.scrollBar.unlockScroll()\n      this.leaveTopLayer()\n    }\n  }\n\n  /**\n   * Place the element in the top layer via the Popover API so that\n   * position: fixed works relative to the viewport regardless of\n   * container queries or other containing block ancestors.\n   */\n  private enterTopLayer() {\n    if (typeof this.showPopover !== 'function')\n      return\n\n    try {\n      this.setAttribute('popover', 'manual')\n      this.showPopover()\n    }\n    catch {\n      this.removeAttribute('popover')\n    }\n  }\n\n  private leaveTopLayer() {\n    this.removeAttribute('popover')\n  }\n\n  /**\n   * Get the position of the element toggling the popout\n   * and position the popout underneath it, taking into account the optional placement.\n   */\n  private updatePosition = async () => {\n    if (!this.anchorElement) {\n      return\n    }\n\n    const computePositionConfig: ComputePositionConfig = {\n      strategy: 'fixed',\n    }\n\n    if (this.position === 'auto') {\n      computePositionConfig.middleware = [\n        offset({ mainAxis: this.sideOffset, alignmentAxis: this.alignOffset }),\n        autoPlacement({ alignment: this.align, padding: 8 }),\n        shift({\n          padding: 8,\n        }),\n        hide(),\n      ]\n    }\n    else {\n      computePositionConfig.placement = logicalToPhysical(this.position, this.align, this.direction.dir)\n      computePositionConfig.middleware = [\n        offset({ mainAxis: this.sideOffset, alignmentAxis: this.alignOffset }),\n        flip(),\n        shift({\n          padding: 8,\n        }),\n        hide(),\n      ]\n    }\n\n    const { x, y, placement, middlewareData } = await computePosition(this.anchorElement, this, computePositionConfig)\n\n    this.computedPosition = placement\n\n    // use physical properties here since floating-ui\n    // works exclusively in physical dimensions\n    // we do all the mapping in logicalToPhysical\n    this.style.setProperty('--_n-popout-position-x', `${x}px`)\n    this.style.setProperty('--_n-popout-position-y', `${y}px`)\n\n    if (middlewareData.hide?.referenceHidden) {\n      this.hide()\n    }\n  }\n\n  /**\n   * Toggle the popout open or closed using state.\n   * Updating the position to underneath the target button before the popout is opened.\n   */\n  private toggleOpen = (e: Event) => {\n    e.preventDefault()\n    if (this.open) {\n      this.hide(false)\n    }\n    else if (!this.smallViewport || this.alwaysFloating) {\n      this.enterTopLayer()\n      this.updatePosition().then(() => this.show())\n    }\n    else {\n      this.show()\n    }\n  }\n\n  private getToggle() {\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const allToggles = rootNode.querySelectorAll<HTMLElement>(`[aria-controls='${this.id}']`)\n\n    let toggle = allToggles[0]\n\n    // When multiple toggles share the same aria-controls (duplicate IDs on page),\n    // pair each toggle with its corresponding popout by document order.\n    if (allToggles.length > 1) {\n      const index = [...rootNode.querySelectorAll<HTMLElement>(`[id='${this.id}']`)].indexOf(this)\n      if (index >= 0 && index < allToggles.length) {\n        toggle = allToggles[index]\n      }\n    }\n\n    if (toggle instanceof HTMLSlotElement) {\n      return toggle.assignedElements()[0] as HTMLElement\n    }\n\n    return toggle\n  }\n\n  private getAnchor() {\n    if (!this.anchor) {\n      return this.targetElement\n    }\n\n    const rootNode = this.getRootNode() as Document | ShadowRoot\n    const anchor = <HTMLElement>rootNode.querySelector(`#${this.anchor}`)\n\n    if (anchor instanceof HTMLSlotElement) {\n      return anchor.assignedElements()[0] as HTMLElement\n    }\n\n    return anchor\n  }\n\n  /**\n   * Update the smallViewport flag to switch between \"sheet\" and \"floating\".\n   * autoUpdate is needed when a viewport gets larger and the popout is open.\n   */\n  private handleMediaQueryChange = () => {\n    this.smallViewport = mediaQuery.matches\n\n    this.cleanupAutoUpdate?.()\n\n    if ((!this.smallViewport || this.alwaysFloating) && this.open && this.anchorElement) {\n      this.cleanupAutoUpdate = autoUpdate(this.anchorElement, this, this.updatePosition)\n      this.scrollBar.unlockScroll()\n    }\n    else if (this.open) {\n      this.scrollBar.lockScroll()\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-popout': Popout\n  }\n}\n"],"names":["FloatingMixin","superClass","FloatingElement","constructor","this","open","align","position","sideOffset","alignOffset","__decorate","property","type","Boolean","reflect","prototype","Number","attribute","mediaQuery","matchMedia","matches","addEventListener","Popout","LitElement","scrollBar","ScrollbarController","dismiss","LightDismissController","isOpen","onDismiss","e","hide","isDismissible","node","popout","targetElement","events","EventController","direction","DirectionController","smallViewport","id","alwaysFloating","controlled","enableScroll","unlockScroll","leaveTopLayer","updatePosition","async","anchorElement","computePositionConfig","strategy","middleware","offset","mainAxis","alignmentAxis","autoPlacement","alignment","padding","shift","placement","logicalToPhysical","dir","flip","x","y","middlewareData","computePosition","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","enterTopLayer","then","show","handleMediaQueryChange","cleanupAutoUpdate","call","autoUpdate","lockScroll","Promise","resolve","updateComplete","dispatchEvent","NordEvent","transition","moveFocusToButton","_b","focus","preventScroll","result","firstUpdated","connectedCallback","super","listen","initializeElements","disconnectedCallback","removeAttribute","render","html","handleIdChange","removeEventListener","console","warn","getToggle","getAnchor","handleOpenChange","setAttribute","handleAnchorChange","showPopover","rootNode","getRootNode","allToggles","querySelectorAll","toggle","length","index","indexOf","HTMLSlotElement","assignedElements","anchor","querySelector","styles","componentStyle","query","state","observe","customElement"],"mappings":"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"}

package/lib/Popout.js

@@ -1,2 +1,2 @@
-import"./tslib.es6-CmLYFWVC.js";import"./positioning-D-K8Mueq.js";import"lit";import"lit/decorators.js";import"./DirectionController-ChvNGESZ.js";import"./EventController-BBOmvfLa.js";import"./LightDismissController-wcL1ziJa.js";import"./ScrollbarController-BFC67Y2x.js";import"./observe-D0n0zOfU.js";import"./events-Bv6wNHwJ.js";export{P as default}from"./Popout-CFtFoCaA.js";import"./Component-BJ5O5n8k.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.js";
+import"./tslib.es6-CmLYFWVC.js";import"./positioning-D-K8Mueq.js";import"lit";import"lit/decorators.js";import"./DirectionController-ChvNGESZ.js";import"./EventController-BBOmvfLa.js";import"./LightDismissController-wcL1ziJa.js";import"./ScrollbarController-BFC67Y2x.js";import"./observe-D0n0zOfU.js";import"./events-Bv6wNHwJ.js";export{P as default}from"./Popout-B6Hirj3y.js";import"./Component-BJ5O5n8k.js";import"./ShortcutController-CV5b0BZl.js";import"./tinykeys-DwvDXsEb.js";
 //# sourceMappingURL=Popout.js.map

package/lib/Range.js

@@ -1,2 +1,2 @@
-import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as n,nothing as a,LitElement as o}from"lit";import{property as t,customElement as i}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{ref as c}from"lit/directives/ref.js";import{D as d}from"./DirectionController-ChvNGESZ.js";import{N as m}from"./events-Bv6wNHwJ.js";import{A as b}from"./AutocompleteMixin-D8eiOxvO.js";import{F as u}from"./FocusableMixin-BlQLNPdJ.js";import{F as g}from"./FormAssociatedMixin-D9aPREgv.js";import{I as h}from"./InputMixin-LetXsCyv.js";import{R as p}from"./ReadonlyMixin-BdJPGtQ3.js";import{s as v}from"./Component-BJ5O5n8k.js";import{s as f}from"./FormField-CMgEFZCK.js";import{s as _}from"./TextField-CSKvieoG.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.js";const x=e`:host{--_n-range-progress:0%;--_n-range-thumb-focus-ring:0 0 0 1px var(--n-color-accent);--_n-range-thumb-color:var(--n-color-text-on-accent);--_n-range-thumb-border-size:1px;--_n-range-thumb-border-color:var(--n-color-border-strong);--_n-range-gradient-direction:right;--_n-range-thumb-size:var(--n-range-thumb-size,20px);--_n-range-track-color-active:var(--n-range-track-color-active,var(--n-color-accent));--_n-range-track-color-inactive:var(--n-range-track-color-inactive,var(--n-color-border-strong));--_n-range-track-size:var(--n-range-track-size,3px)}.n-range{appearance:none;background:linear-gradient(to var(--_n-range-gradient-direction),var(--_n-range-track-color-active) 0,var(--_n-range-track-color-active) var(--_n-range-progress),var(--_n-range-track-color-inactive) var(--_n-range-progress));border-radius:var(--n-border-radius-s);inline-size:100%}.n-range.is-rtl{--_n-range-gradient-direction:left}.n-range::-webkit-slider-runnable-track{block-size:var(--_n-range-track-size);inline-size:100%}.n-range::-webkit-slider-thumb{appearance:none;background:var(--_n-range-thumb-color);block-size:var(--_n-range-thumb-size);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);border-radius:var(--n-border-radius-circle);box-shadow:var(--n-box-shadow),var(--n-box-shadow);cursor:pointer;inline-size:var(--_n-range-thumb-size);margin-block-start:calc(var(--_n-range-thumb-size)/2*-1 - var(--_n-range-track-size)/2*-1)}.n-range::-moz-range-track{block-size:var(--_n-range-track-size);border:var(--n-space-s) solid var(--n-color-surface);inline-size:100%}.n-range::-moz-range-thumb{appearance:none;background:var(--_n-range-thumb-color);block-size:var(--_n-range-thumb-size);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);border-radius:var(--n-border-radius-circle);box-shadow:var(--n-box-shadow);cursor:pointer;inline-size:var(--_n-range-thumb-size);margin-block-start:calc(var(--_n-range-thumb-size)/2*-1 - var(--_n-range-track-size)/2*-1)}.n-label-container{inline-size:100%;margin-block-end:0}label{display:flex!important}.n-range-output{color:var(--n-color-text-weaker);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);margin-inline-start:auto}.n-range:focus{outline:none}.n-label-container:hover+.n-input-container .n-input:disabled,.n-range:disabled{opacity:.5}.n-range:disabled::-webkit-slider-thumb,.n-range[readonly]::-webkit-slider-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:disabled::-moz-range-thumb,.n-range[readonly]::-moz-range-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:focus::-webkit-slider-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}.n-range:focus::-moz-range-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}`;let z=class extends(g(b(p(h(u(o)))))){constructor(){super(...arguments),this.direction=new d(this),this.min=0,this.max=10,this.step=1,this.expand=!1}render(){const r=Number(this.value)||0,e=Math.max(0,(r-this.min)/(this.max-this.min));return n`<div class="n-input-container">${this.renderLabel(n`<span class="n-range-output" aria-hidden="true">${r}</span>`)} <input ${c(this.focusableRef)} id="${this.inputId}" type="range" class="${s({"n-range":!0,"is-rtl":this.direction.isRTL})}" name="${l(this.name)}" min="${this.min}" step="${this.step}" max="${this.max}" style="${`--_n-range-progress: ${100*e}%`}" ?disabled="${this.effectiveDisabled}" ?required="${this.required}" ?readonly="${this.readonly}" .value="${this.value?this.value:"0"}" @input="${this.handleInput}" @change="${this.handleChange}" aria-label="${l(this.controlAriaLabel)}" aria-describedby="${l(this.controlAriaDescribedby)}" aria-invalid="${l(this.controlAriaInvalid)}"></div>${this.renderError()} ${this.isHintBelow?this.renderHint():a}`}handleInput(r){r.stopPropagation();const e=r.target;if(this.readonly)return r.preventDefault(),void(e.value=this.value);this.value=e.value,this.dispatchEvent(new m("input"))}};z.styles=[v,f,_,x],r([t({reflect:!0,type:Number})],z.prototype,"min",void 0),r([t({reflect:!0,type:Number})],z.prototype,"max",void 0),r([t({reflect:!0,type:Number})],z.prototype,"step",void 0),r([t({reflect:!0,type:Boolean})],z.prototype,"expand",void 0),z=r([i("nord-range")],z);var k=z;export{k as default};
+import{_ as r}from"./tslib.es6-CmLYFWVC.js";import{css as e,html as n,nothing as a,LitElement as o}from"lit";import{property as t,customElement as i}from"lit/decorators.js";import{classMap as s}from"lit/directives/class-map.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{ref as c}from"lit/directives/ref.js";import{D as d}from"./DirectionController-ChvNGESZ.js";import{N as m}from"./events-Bv6wNHwJ.js";import{A as b}from"./AutocompleteMixin-D8eiOxvO.js";import{F as u}from"./FocusableMixin-BlQLNPdJ.js";import{F as g}from"./FormAssociatedMixin-D9aPREgv.js";import{I as h}from"./InputMixin-LetXsCyv.js";import{R as p}from"./ReadonlyMixin-BdJPGtQ3.js";import{s as v}from"./Component-BJ5O5n8k.js";import{s as f}from"./FormField-CMgEFZCK.js";import{s as _}from"./TextField-BYSciLeB.js";import"./FormDataController-OUt5L5uC.js";import"./FieldControlMixin-BXNZJXu9.js";import"./context-consumer-BJVUulGf.js";import"./context-request-event-CCRlXoeR.js";import"./field-context.js";import"./create-context-CJ69ntlY.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"./light-dom-styles-DXsbiKU9.js";import"./VisuallyHidden.js";const x=e`:host{--_n-range-progress:0%;--_n-range-thumb-focus-ring:0 0 0 1px var(--n-color-accent);--_n-range-thumb-color:var(--n-color-text-on-accent);--_n-range-thumb-border-size:1px;--_n-range-thumb-border-color:var(--n-color-border-strong);--_n-range-gradient-direction:right;--_n-range-thumb-size:var(--n-range-thumb-size,20px);--_n-range-track-color-active:var(--n-range-track-color-active,var(--n-color-accent));--_n-range-track-color-inactive:var(--n-range-track-color-inactive,var(--n-color-border-strong));--_n-range-track-size:var(--n-range-track-size,3px)}.n-range{appearance:none;background:linear-gradient(to var(--_n-range-gradient-direction),var(--_n-range-track-color-active) 0,var(--_n-range-track-color-active) var(--_n-range-progress),var(--_n-range-track-color-inactive) var(--_n-range-progress));border-radius:var(--n-border-radius-s);inline-size:100%}.n-range.is-rtl{--_n-range-gradient-direction:left}.n-range::-webkit-slider-runnable-track{block-size:var(--_n-range-track-size);inline-size:100%}.n-range::-webkit-slider-thumb{appearance:none;background:var(--_n-range-thumb-color);block-size:var(--_n-range-thumb-size);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);border-radius:var(--n-border-radius-circle);box-shadow:var(--n-box-shadow),var(--n-box-shadow);cursor:pointer;inline-size:var(--_n-range-thumb-size);margin-block-start:calc(var(--_n-range-thumb-size)/2*-1 - var(--_n-range-track-size)/2*-1)}.n-range::-moz-range-track{block-size:var(--_n-range-track-size);border:var(--n-space-s) solid var(--n-color-surface);inline-size:100%}.n-range::-moz-range-thumb{appearance:none;background:var(--_n-range-thumb-color);block-size:var(--_n-range-thumb-size);border:var(--_n-range-thumb-border-size) solid var(--_n-range-thumb-border-color);border-radius:var(--n-border-radius-circle);box-shadow:var(--n-box-shadow);cursor:pointer;inline-size:var(--_n-range-thumb-size);margin-block-start:calc(var(--_n-range-thumb-size)/2*-1 - var(--_n-range-track-size)/2*-1)}.n-label-container{inline-size:100%;margin-block-end:0}label{display:flex!important}.n-range-output{color:var(--n-color-text-weaker);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);margin-inline-start:auto}.n-range:focus{outline:none}.n-label-container:hover+.n-input-container .n-input:disabled,.n-range:disabled{opacity:.5}.n-range:disabled::-webkit-slider-thumb,.n-range[readonly]::-webkit-slider-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:disabled::-moz-range-thumb,.n-range[readonly]::-moz-range-thumb{--_n-range-thumb-color:var(--n-color-border);--_n-range-thumb-border-color:var(--n-color-border);box-shadow:none;cursor:default}.n-range:focus::-webkit-slider-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}.n-range:focus::-moz-range-thumb{--_n-range-thumb-border-color:var(--n-color-accent);box-shadow:var(--_n-range-thumb-focus-ring)}`;let z=class extends(g(b(p(h(u(o)))))){constructor(){super(...arguments),this.direction=new d(this),this.min=0,this.max=10,this.step=1,this.expand=!1}render(){const r=Number(this.value)||0,e=Math.max(0,(r-this.min)/(this.max-this.min));return n`<div class="n-input-container">${this.renderLabel(n`<span class="n-range-output" aria-hidden="true">${r}</span>`)} <input ${c(this.focusableRef)} id="${this.inputId}" type="range" class="${s({"n-range":!0,"is-rtl":this.direction.isRTL})}" name="${l(this.name)}" min="${this.min}" step="${this.step}" max="${this.max}" style="${`--_n-range-progress: ${100*e}%`}" ?disabled="${this.effectiveDisabled}" ?required="${this.required}" ?readonly="${this.readonly}" .value="${this.value?this.value:"0"}" @input="${this.handleInput}" @change="${this.handleChange}" aria-label="${l(this.controlAriaLabel)}" aria-describedby="${l(this.controlAriaDescribedby)}" aria-invalid="${l(this.controlAriaInvalid)}"></div>${this.renderError()} ${this.isHintBelow?this.renderHint():a}`}handleInput(r){r.stopPropagation();const e=r.target;if(this.readonly)return r.preventDefault(),void(e.value=this.value);this.value=e.value,this.dispatchEvent(new m("input"))}};z.styles=[v,f,_,x],r([t({reflect:!0,type:Number})],z.prototype,"min",void 0),r([t({reflect:!0,type:Number})],z.prototype,"max",void 0),r([t({reflect:!0,type:Number})],z.prototype,"step",void 0),r([t({reflect:!0,type:Boolean})],z.prototype,"expand",void 0),z=r([i("nord-range")],z);var k=z;export{k as default};
 //# sourceMappingURL=Range.js.map

package/lib/SegmentedControlItem.js

@@ -6,7 +6,7 @@ import{_ as e}from"./tslib.es6-CmLYFWVC.js";import{css as t,html as n,nothing as
     --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;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-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-block:calc(var(--n-space-xs) - 1px)!important;padding-inline: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)

package/lib/Tag.js

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

package/lib/Tag.js.map

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

package/lib/TextField-BYSciLeB.js

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

package/lib/TextField-BYSciLeB.js.map

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

package/lib/Textarea.js

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

package/lib/Textarea.js.map

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

package/lib/TimePicker.js

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

package/lib/TimePicker.js.map

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