@nordhealth/components 4.16.1 → 4.18.0

package/lib/index.js

@@ -1,2 +1,2 @@
-export{default as Avatar}from"./Avatar.js";export{default as Badge}from"./Badge.js";export{default as Banner}from"./Banner.js";export{default as ButtonGroup}from"./ButtonGroup.js";export{default as Button}from"./Button.js";export{C as Calendar}from"./Calendar-CKgiq2S1.js";export{default as Card}from"./Card.js";export{default as Checkbox}from"./Checkbox.js";export{default as CommandMenu}from"./CommandMenu.js";export{default as CommandMenuAction}from"./CommandMenuAction.js";export{default as DatePicker}from"./DatePicker.js";export{default as Divider}from"./Divider.js";export{default as Drawer}from"./Drawer.js";export{default as DropdownGroup}from"./DropdownGroup.js";export{default as DropdownItem}from"./DropdownItem.js";export{default as DropdownSubmenu}from"./DropdownSubmenu.js";export{default as Dropdown}from"./Dropdown.js";export{default as EmptyState}from"./EmptyState.js";export{default as Fieldset}from"./Fieldset.js";export{default as Footer}from"./Footer.js";export{default as Header}from"./Header.js";export{default as Icon}from"./Icon.js";export{default as Input}from"./Input.js";export{default as Layout}from"./Layout.js";export{isTranslationRegistered,registerTranslation}from"./translation.js";export{default as Message}from"./Message.js";export{default as Modal,ModalCancelEvent,ModalCloseEvent}from"./Modal.js";export{default as NavGroup}from"./NavGroup.js";export{default as NavItem}from"./NavItem.js";export{N as NavToggle}from"./NavToggle-DL74d1aQ.js";export{default as Navigation}from"./Navigation.js";export{default as NotificationGroup}from"./NotificationGroup.js";export{default as Notification}from"./Notification.js";export{P as Popout}from"./Popout-vR6LxNS9.js";export{default as ProgressBar}from"./ProgressBar.js";export{default as Progress}from"./Progress.js";export{default as Qrcode}from"./Qrcode.js";export{default as Radio}from"./Radio.js";export{default as Range}from"./Range.js";export{default as SegmentedControlItem}from"./SegmentedControlItem.js";export{default as SegmentedControl}from"./SegmentedControl.js";export{default as Select}from"./Select.js";export{default as Skeleton}from"./Skeleton.js";export{default as Spinner}from"./Spinner.js";export{default as Stack}from"./Stack.js";export{default as TabGroup}from"./TabGroup.js";export{default as TabPanel}from"./TabPanel.js";export{default as Tab}from"./Tab.js";export{default as Table}from"./Table.js";export{default as TagGroup}from"./TagGroup.js";export{default as Tag}from"./Tag.js";export{default as Textarea}from"./Textarea.js";export{default as ToastGroup}from"./ToastGroup.js";export{default as Toast}from"./Toast.js";export{default as Toggle}from"./Toggle.js";export{default as Tooltip}from"./Tooltip.js";export{default as TopBar}from"./TopBar.js";export{default as VisuallyHidden}from"./VisuallyHidden.js";import"./tslib.es6-CmLYFWVC.js";import"lit";import"lit/decorators.js";import"./observe-D0n0zOfU.js";import"./fsm-Bq5jMQrK.js";import"./Component-DSU3Qp0O.js";import"lit/directives/class-map.js";import"./DirectionController-ChvNGESZ.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"lit/directives/ref.js";import"./LightDomController-DIwtVelV.js";import"./cond-CI1KbneT.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./collection-Dvg2XbxV.js";import"./dates-CAAlPKZi.js";import"./number-Dg2vCfGd.js";import"./LocalizeController.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"./DateSelectEvent.js";import"./events-Bv6wNHwJ.js";import"./interface-checked-small-BtICPEsp.js";import"lit/directives/if-defined.js";import"./FormAssociatedMixin-DFL7yabe.js";import"./FormDataController-OUt5L5uC.js";import"./SizeMixin-CU9cLbLC.js";import"./FormField--eLuhPue.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./KeyboardController.js";import"./SelectEvent.js";import"./interface-close-small-CnpAFMO3.js";import"./TextField-BdEdZ0_b.js";import"./date-adapter.js";import"./DropdownItem-tmJQrv7d.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"lit/directives/style-map.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./Sticky-DqnqENYN.js";import"./ModalController.js";import"./ScrollbarController-BFC67Y2x.js";import"./NotificationMixin-DOUQsx7N.js";import"./positioning-D-K8Mueq.js";import"./LightSlotController-Coyy4nqS.js";
+export{default as Avatar}from"./Avatar.js";export{default as Badge}from"./Badge.js";export{default as Banner}from"./Banner.js";export{default as ButtonGroup}from"./ButtonGroup.js";export{default as Button}from"./Button.js";export{C as Calendar}from"./Calendar-20BBxuFj.js";export{default as Card}from"./Card.js";export{default as Checkbox}from"./Checkbox.js";export{default as CommandMenu}from"./CommandMenu.js";export{default as CommandMenuAction}from"./CommandMenuAction.js";export{default as DatePicker}from"./DatePicker.js";export{default as Divider}from"./Divider.js";export{default as Drawer}from"./Drawer.js";export{default as DropdownGroup}from"./DropdownGroup.js";export{default as DropdownItem}from"./DropdownItem.js";export{default as DropdownSubmenu}from"./DropdownSubmenu.js";export{default as Dropdown}from"./Dropdown.js";export{default as EmptyState}from"./EmptyState.js";export{default as Fieldset}from"./Fieldset.js";export{default as Footer}from"./Footer.js";export{default as Header}from"./Header.js";export{default as Icon}from"./Icon.js";export{default as Input}from"./Input.js";export{default as Layout}from"./Layout.js";export{isTranslationRegistered,registerTranslation}from"./translation.js";export{default as Message}from"./Message.js";export{default as Modal,ModalCancelEvent,ModalCloseEvent}from"./Modal.js";export{default as NavGroup}from"./NavGroup.js";export{default as NavItem}from"./NavItem.js";export{N as NavToggle}from"./NavToggle-DL74d1aQ.js";export{default as Navigation}from"./Navigation.js";export{default as NotificationGroup}from"./NotificationGroup.js";export{default as Notification}from"./Notification.js";export{P as Popout}from"./Popout-vR6LxNS9.js";export{default as ProgressBar}from"./ProgressBar.js";export{default as Progress}from"./Progress.js";export{default as Qrcode}from"./Qrcode.js";export{default as Radio}from"./Radio.js";export{default as Range}from"./Range.js";export{default as SegmentedControlItem}from"./SegmentedControlItem.js";export{default as SegmentedControl}from"./SegmentedControl.js";export{default as Select}from"./Select.js";export{default as Skeleton}from"./Skeleton.js";export{default as Spinner}from"./Spinner.js";export{default as Stack}from"./Stack.js";export{default as TabGroup}from"./TabGroup.js";export{default as TabPanel}from"./TabPanel.js";export{default as Tab}from"./Tab.js";export{default as Table}from"./Table.js";export{default as TagGroup}from"./TagGroup.js";export{default as Tag}from"./Tag.js";export{default as Textarea}from"./Textarea.js";export{default as ToastGroup}from"./ToastGroup.js";export{default as Toast}from"./Toast.js";export{default as Toggle}from"./Toggle.js";export{default as Tooltip}from"./Tooltip.js";export{default as TopBar}from"./TopBar.js";export{default as VisuallyHidden}from"./VisuallyHidden.js";import"./tslib.es6-CmLYFWVC.js";import"lit";import"lit/decorators.js";import"./observe-D0n0zOfU.js";import"./fsm-Bq5jMQrK.js";import"./Component-DSU3Qp0O.js";import"lit/directives/class-map.js";import"./DirectionController-ChvNGESZ.js";import"./SlotController-Z6eG7LSZ.js";import"./EventController-BBOmvfLa.js";import"lit/directives/ref.js";import"./LightDomController-DIwtVelV.js";import"./cond-CI1KbneT.js";import"./FocusableMixin-BlQLNPdJ.js";import"./InputMixin-LetXsCyv.js";import"lit/directives/repeat.js";import"./tinykeys.module-_6MZt7MP.js";import"./collection-Dvg2XbxV.js";import"./dates-CAAlPKZi.js";import"./number-Dg2vCfGd.js";import"./LocalizeController.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"./DateSelectEvent.js";import"./events-Bv6wNHwJ.js";import"./interface-checked-small-BtICPEsp.js";import"lit/directives/if-defined.js";import"./FormAssociatedMixin-B4Qj-CQN.js";import"./FormDataController-OUt5L5uC.js";import"./SizeMixin-CU9cLbLC.js";import"./FormField-BFaVzUjk.js";import"./LightDismissController-4pH8cdko.js";import"./ShortcutController-BIb3WGzH.js";import"./KeyboardController.js";import"./SelectEvent.js";import"./interface-close-small-CnpAFMO3.js";import"./TextField-BdEdZ0_b.js";import"./date-adapter.js";import"./DropdownItem-tmJQrv7d.js";import"lit/directives/unsafe-html.js";import"./IconManager.js";import"lit/directives/style-map.js";import"./AutocompleteMixin-D8eiOxvO.js";import"./TextSelectableMixin-Cfv__lHS.js";import"./Sticky-DqnqENYN.js";import"./ModalController.js";import"./ScrollbarController-BFC67Y2x.js";import"./NotificationMixin-DOUQsx7N.js";import"./positioning-D-K8Mueq.js";import"./LightSlotController-Coyy4nqS.js";
 //# sourceMappingURL=index.js.map

package/lib/src/common/mixins/FormAssociatedMixin.d.ts

@@ -9,6 +9,7 @@ export declare class FormAssociatedMixinInterface {
     required: boolean;
     hideRequired: boolean;
     hint?: string;
+    hintBelow: boolean;
     hideLabel: boolean;
     placeholder?: string;
     error?: string;
@@ -22,9 +23,11 @@ export declare class FormAssociatedMixinInterface {
     protected get formValue(): string | undefined;
     protected get hasError(): boolean;
     protected get hasHint(): boolean;
+    protected get isHintBelow(): boolean;
     protected handleChange(e: Event): void;
     protected handleInput(e: Event): void;
     protected renderLabel(additionalContent?: TemplateResult): TemplateResult;
+    protected renderHint(): TemplateResult;
     protected renderError(): TemplateResult;
     protected getDescribedBy(): string | undefined;
     protected getInvalid(): 'true' | undefined;

package/lib/src/fieldset/Fieldset.d.ts

@@ -16,6 +16,8 @@ export default class Fieldset extends LitElement {
     static styles: import("lit").CSSResult[];
     private errorSlot;
     private hintSlot;
+    private errorId;
+    private hintId;
     /**
      * Label for the fieldset. Rendered as a `<legend>` element.
      */
@@ -24,6 +26,10 @@ export default class Fieldset extends LitElement {
      * Optional hint text to be displayed with the input. Alternatively use the hint slot.
      */
     hint?: string;
+    /**
+     * Renders the hint below the grouped controls and any error instead of below the legend.
+     */
+    hintBelow: boolean;
     /**
      * Optional error to be shown with the fieldset. Alternatively use the error slot.
      */
@@ -48,8 +54,11 @@ export default class Fieldset extends LitElement {
      */
     size: 's' | 'm';
     render(): import("lit").TemplateResult<1>;
+    private renderHint;
+    private getDescribedBy;
     protected get hasHint(): boolean;
     protected get hasError(): boolean;
+    private get isHintBelow();
 }
 declare global {
     interface HTMLElementTagNameMap {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nordhealth/components",
   "type": "module",
-  "version": "4.16.1",
+  "version": "4.18.0",
   "description": "This package includes Nord Design System Web Components",
   "author": "Nordhealth <support@nordhealth.design>",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -46,8 +46,8 @@
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@nordhealth/css": "^4.4.1",
     "@nordhealth/fonts": "^3.0.4",
-    "@nordhealth/themes": "^9.0.3",
-    "@nordhealth/tokens": "^8.0.3",
+    "@nordhealth/themes": "^9.0.5",
+    "@nordhealth/tokens": "^8.0.5",
     "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing-helpers": "^3.0.1",
     "@playwright/test": "1.58.0",
@@ -90,5 +90,5 @@
       "rollup": "~4.21.3"
     }
   },
-  "gitHead": "12bbf2c6c1ea554be36738f9afcc1d27095bfb01"
+  "gitHead": "f00b5008ec573e96ba6fd9888dcbc36b915ef195"
 }

package/lib/Calendar-CKgiq2S1.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Calendar-CKgiq2S1.js","sources":["../../icons/lib/assets/arrow-down-small.js","../../icons/lib/assets/arrow-left-small.js","../../icons/lib/assets/arrow-right-small.js","../src/common/controllers/SwipeController.ts","../src/calendar/Calendar.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m.100342 6.92903 2.121318-2.12132 7.77818 7.77819 7.77826-7.77828 2.1213 2.12132-8.4853 8.48536c-.7811.7811-2.04743.7811-2.82848 0z\" fill=\"currentColor\"/></svg>';\nexport const title = \"arrow-down-small\";\nexport const tags = \"nordicon arrow down small caret pointing triangle chevron\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m13.0712.105225 2.1213 2.121315-7.77816 7.77816 7.77826 7.7783-2.1213 2.1213-8.48539-8.4854c-.78105-.781-.78105-2.04735 0-2.82839z\" fill=\"currentColor\"/></svg>';\nexport const title = \"arrow-left-small\";\nexport const tags = \"nordicon arrow left small caret pointing triangle chevron\";\n","export default '<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"m6.92903.100342-2.12132 2.121318 7.77819 7.77818-7.77828 7.77826 2.12132 2.1213 8.48536-8.4853c.7811-.7811.7811-2.04743 0-2.82848z\" fill=\"currentColor\"/></svg>';\nexport const title = \"arrow-right-small\";\nexport const tags =\n  \"nordicon arrow right small caret pointing triangle chevron\";\n","import type { ReactiveController, ReactiveElement } from 'lit'\nimport { EventController } from './EventController.js'\n\nexport interface SwipeDetails {\n  initialX: number\n  initialY: number\n  pageX: number\n  pageY: number\n  distX: number\n  distY: number\n}\n\nconst preventDefault = (e: Event) => e.preventDefault()\n\ntype SetRequired<T, K extends keyof T> = T & { [Property in K]-?: T[K] }\ninterface SwipeControllerOptions {\n  target?: () => HTMLElement\n  matchesGesture: (details: SwipeDetails) => boolean\n  onSwipeEnd: (details: SwipeDetails) => void\n}\n\nexport class SwipeController implements ReactiveController {\n  private events: EventController\n  private hadFirstUpdate = false\n\n  private initialTouchX: number = 0\n  private initialTouchY: number = 0\n  private options: SetRequired<SwipeControllerOptions, 'target'>\n\n  constructor(host: ReactiveElement, options: SwipeControllerOptions) {\n    host.addController(this)\n    this.events = new EventController(host)\n\n    this.options = {\n      target: () => host,\n      ...options,\n    }\n  }\n\n  hostUpdated() {\n    if (!this.hadFirstUpdate) {\n      this.hadFirstUpdate = true\n\n      const target = this.options.target()\n      this.events.listen(target, 'touchstart', this.handleTouchStart)\n      this.events.listen(target, 'touchmove', preventDefault)\n      this.events.listen(target, 'touchend', this.handleTouchEnd)\n    }\n  }\n\n  hostDisconnected() {\n    this.hadFirstUpdate = false\n  }\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const [{ pageX, pageY }] = event.changedTouches\n    this.initialTouchX = pageX\n    this.initialTouchY = pageY\n  }\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const [{ pageX, pageY }] = event.changedTouches\n    const { matchesGesture, onSwipeEnd } = this.options\n\n    const distX = pageX - this.initialTouchX\n    const distY = pageY - this.initialTouchY\n    const details = { initialX: this.initialTouchX, initialY: this.initialTouchY, pageX, pageY, distX, distY }\n\n    if (matchesGesture(details)) {\n      event.preventDefault()\n      onSwipeEnd(details)\n    }\n  }\n}\n\nconst THRESHOLD = 70\n\nexport function isHorizontalSwipe({ distX, distY }: SwipeDetails) {\n  return Math.abs(distX) >= THRESHOLD && Math.abs(distY) <= THRESHOLD\n}\n\nexport function isDownwardsSwipe({ distX, distY }: SwipeDetails) {\n  return Math.abs(distY) >= THRESHOLD && Math.abs(distX) <= THRESHOLD && distY > 0\n}\n","import * as arrowDownIcon from '@nordhealth/icons/lib/assets/arrow-down-small.js'\nimport * as arrowLeftIcon from '@nordhealth/icons/lib/assets/arrow-left-small.js'\nimport * as arrowRightIcon from '@nordhealth/icons/lib/assets/arrow-right-small.js'\nimport { html, isServer, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { createKeybindingsHandler } from 'tinykeys'\n\nimport { chunk, mapWithOffset } from '../common/collection.js'\nimport { DirectionController } from '../common/controllers/DirectionController.js'\nimport { isHorizontalSwipe, SwipeController } from '../common/controllers/SwipeController.js'\n\nimport {\n  addDays,\n  clamp,\n  DaysOfWeek,\n  endOfMonth,\n  endOfWeek,\n  getDayNames,\n  getMonthNames,\n  getViewOfMonth,\n  inRange,\n  isEqual,\n  isEqualMonth,\n  parseISODate,\n  printISODate,\n  setMonth,\n  setYear,\n  startOfMonth,\n  startOfWeek,\n} from '../common/dates.js'\nimport { observe } from '../common/decorators/observe.js'\nimport { cond } from '../common/directives/cond.js'\nimport { range } from '../common/number.js'\nimport componentStyle from '../common/styles/Component.css'\nimport Icon from '../icon/Icon.js'\nimport { LocalizeController } from '../localization/LocalizeController.js'\nimport style from './Calendar.css'\n\nimport { DateSelectEvent } from './DateSelectEvent.js'\nimport '../button/Button.js'\nimport '../visually-hidden/VisuallyHidden.js'\n\nexport type DatePredicate = (date: Date) => boolean\n\nIcon.registerIcon(arrowRightIcon)\nIcon.registerIcon(arrowLeftIcon)\nIcon.registerIcon(arrowDownIcon)\n\nfunction preventDefault(fn: EventListener) {\n  return (e: Event) => {\n    e.preventDefault()\n    fn(e)\n  }\n}\n\nconst isDateDisabled: DatePredicate = () => false\nconst isDateHighlighted = () => false\n\nconst dialogLabelId = 'dialog-header'\n\n/**\n * Calendar allows user to pick a date. It comes with built-in\n * functionality that allows you to set a minimum and a maximum allowed date.\n * Please note that the date must be passed in ISO-8601 format.\n *\n * @status ready\n * @category list\n * @fires {DateSelectEvent} change - Dispatched when a date is selected and the value changes.\n * @fires {DateSelectEvent} nord-focus-date - Dispatched when the calendar's focused date changes.\n *\n * @cssprop [--n-calendar-border-radius=var(--n-border-radius)] - Controls how rounded the corners are, using [border radius tokens](/tokens/#border-radius).\n * @cssprop [--n-calendar-box-shadow=var(--n-box-shadow-popout)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow).\n *\n * @localization prevMonthLabel - Accessible label for the previous month button.\n * @localization nextMonthLabel - Accessible label for the next month button.\n * @localization monthSelectLabel - Accessible label for the month select.\n * @localization yearSelectLabel - Accessible label for the year select.\n */\n@customElement('nord-calendar')\nexport default class Calendar extends LitElement {\n  static styles = [componentStyle, style]\n\n  @query('.n-calendar-select-month', true) private monthSelectNode!: HTMLElement\n  @query(`button[tabindex=\"0\"]`) private focusedDayNode!: HTMLButtonElement\n\n  private direction = new DirectionController(this)\n  private swipe = new SwipeController(this, {\n    matchesGesture: isHorizontalSwipe,\n    onSwipeEnd: ({ distX }) => this.addMonths(distX < 0 ? 1 : -1),\n  })\n\n  private shortcuts = createKeybindingsHandler({\n    'ArrowRight': preventDefault(() => this.addDays(this.direction.isLTR ? 1 : -1)),\n    'ArrowLeft': preventDefault(() => this.addDays(this.direction.isLTR ? -1 : 1)),\n    'ArrowDown': preventDefault(() => this.addDays(7)),\n    'ArrowUp': preventDefault(() => this.addDays(-7)),\n    'Home': preventDefault(() => this.startOfWeek()),\n    'End': preventDefault(() => this.endOfWeek()),\n    'PageUp': preventDefault(() => this.addMonths(-1)),\n    'PageDown': preventDefault(() => this.addMonths(1)),\n    'Shift+PageUp': preventDefault(() => this.addYears(-1)),\n    'Shift+PageDown': preventDefault(() => this.addYears(1)),\n  })\n\n  private localize = new LocalizeController<'nord-calendar'>(this, {\n    onLangChange: () => this.handleLangChange(),\n  })\n\n  /**\n   * Whilst dateAdapter is used for handling the formatting/parsing dates in the input,\n   * these are used to format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatShort!: Intl.DateTimeFormat\n  private monthNames!: string[]\n  private monthNamesShort!: string[]\n  private dayNames!: string[]\n  private dayNamesShort!: string[]\n\n  /**\n   * The selected date on the calendar. Must be in IS0-8601 format: YYYY-MM-DD.\n   */\n  @property() value: string = ''\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @property({ reflect: true, type: Number, attribute: 'first-day-of-week' }) firstDayOfWeek: DaysOfWeek\n    = DaysOfWeek.Monday\n\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @property({ reflect: true }) min?: string\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @property({ reflect: true }) max?: string\n\n  /**\n   * The date that is considered today. Must be in IS0-8601 format: YYYY-MM-DD.\n   * If not set, the current local date of the user is used.\n   */\n  @property({ reflect: true }) today?: string\n\n  /**\n   * Controls whether the calendar expands to fill the width of its container.\n   */\n  @property({ reflect: true, type: Boolean }) expand = false\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @property({ attribute: false }) isDateDisabled: DatePredicate = isDateDisabled\n\n  /**\n   * Controls which days are highlighted with a small indicator.\n   * Returning a \"falsy\" value will not show an indicator.\n   * Returning \"truthy\" value will show the indicator, but without an accessible label.\n   * Returning a string will show the indicator, and use the string as accessible label.\n   * It is recommended to return a string rather than a truthy value whenever possible.\n   */\n  @property({ attribute: false }) isDateHighlighted: (date: Date) => string | boolean = isDateHighlighted\n\n  @state() private activeFocus = false\n  @state() private focusedDay = new Date()\n\n  /**\n   * Programmatically move focus to the calendar.\n   * @param options An object which controls aspects of the focusing process.\n   */\n  focus(options?: FocusOptions & { target: 'day' | 'month' }) {\n    const target = options?.target ?? 'day'\n\n    if (target === 'day') {\n      this.focusedDayNode.focus()\n    }\n    else if (target === 'month') {\n      this.monthSelectNode.focus()\n    }\n  }\n\n  render() {\n    const today = this.getToday()\n    const valueAsDate = parseISODate(this.value)\n    const focusedMonth = this.focusedDay.getMonth()\n    const focusedYear = this.focusedDay.getFullYear()\n\n    const minDate = parseISODate(this.min || '')\n    const maxDate = parseISODate(this.max || '')\n    const minDateStartOfMonth = minDate ? startOfMonth(minDate) : undefined\n    const maxDateEndOfMonth = maxDate ? endOfMonth(maxDate) : undefined\n\n    const selectedYear = (valueAsDate || this.focusedDay).getFullYear()\n    const minYear = minDate ? minDate.getFullYear() : selectedYear - 10\n    const maxYear = maxDate ? maxDate.getFullYear() : selectedYear + 10\n\n    if (isServer) {\n      // Needed when run on a server, because the `onLangChange` callback does not get triggered, so we need to manually\n      // call `handleLangChange` to set the localized values for month and day names, which the `render` method relies on.\n      this.handleLangChange()\n    }\n\n    return html`\n      <div class=\"n-calendar\">\n        <div class=\"n-calendar-header\">\n          <div>\n            <nord-visually-hidden>\n              <h2 id=${dialogLabelId} aria-live=\"polite\" aria-atomic=\"true\">\n                ${this.monthNames[focusedMonth]}, ${this.focusedDay.getFullYear()}\n              </h2>\n            </nord-visually-hidden>\n\n            <div class=\"n-calendar-select\">\n              <select\n                aria-label=${this.localize.term('monthSelectLabel')}\n                class=\"n-calendar-select-month\"\n                @input=${this.handleMonthSelect}\n              >\n                ${this.monthNames.map(\n                  (month, i) => html`\n                    <option\n                      value=${i}\n                      ?selected=${i === focusedMonth}\n                      ?disabled=${!inRange(new Date(focusedYear, i, 1), minDateStartOfMonth, maxDateEndOfMonth)}\n                    >\n                      ${month}\n                    </option>\n                  `,\n                )}\n              </select>\n              <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n                <span>${this.monthNamesShort[focusedMonth]}</span>\n                <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n              </div>\n            </div>\n\n            <div class=\"n-calendar-select\">\n              <select\n                aria-label=${this.localize.term('yearSelectLabel')}\n                class=\"n-calendar-select-year\"\n                @input=${this.handleYearSelect}\n              >\n                ${repeat(\n                  range(minYear, maxYear),\n                  year => year,\n                  year => html`<option ?selected=${year === focusedYear}>${year}</option>`,\n                )}\n              </select>\n              <div class=\"n-calendar-select-label\" aria-hidden=\"true\">\n                <span>${this.focusedDay.getFullYear()}</span>\n                <nord-icon color=\"var(--n-color-icon)\" name=\"arrow-down-small\" size=\"xxs\"></nord-icon>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"n-calendar-nav\">\n            <nord-button\n              class=\"n-calendar-prev\"\n              @click=${this.handlePreviousMonthClick}\n              ?disabled=${isEqualMonth(minDate, this.focusedDay)}\n              type=\"button\"\n            >\n              <nord-visually-hidden>${this.localize.term('prevMonthLabel')}</nord-visually-hidden>\n              <nord-icon name=${this.direction.isLTR ? 'arrow-left-small' : 'arrow-right-small'} size=\"s\"></nord-icon>\n            </nord-button>\n\n            <nord-button\n              class=\"n-calendar-next\"\n              @click=${this.handleNextMonthClick}\n              ?disabled=${isEqualMonth(maxDate, this.focusedDay)}\n              type=\"button\"\n            >\n              <nord-visually-hidden>${this.localize.term('nextMonthLabel')}</nord-visually-hidden>\n              <nord-icon name=${this.direction.isLTR ? 'arrow-right-small' : 'arrow-left-small'} size=\"s\"></nord-icon>\n            </nord-button>\n          </div>\n        </div>\n\n        <table\n          class=\"n-calendar-table\"\n          aria-labelledby=${dialogLabelId}\n          @focusin=${this.enableActiveFocus}\n          @focusout=${this.disableActiveFocus}\n        >\n          <thead>\n            <tr>\n              ${mapWithOffset(\n                this.dayNames,\n                this.firstDayOfWeek,\n                (dayName, i) => html`\n                  <th class=\"n-calendar-table-header\" scope=\"col\">\n                    <span aria-hidden=\"true\">${this.dayNamesShort[i]}</span>\n                    <nord-visually-hidden>${dayName}</nord-visually-hidden>\n                  </th>\n                `,\n              )}\n            </tr>\n          </thead>\n          <tbody>\n            ${chunk(getViewOfMonth(this.focusedDay, this.firstDayOfWeek), 7).map(\n              week => html`\n                <tr class=\"n-calendar-row\">\n                  ${week.map((day) => {\n                    const outsideRange = !inRange(day, minDate, maxDate)\n                    const isToday = isEqual(day, today)\n                    const isDisabled = this.isDateDisabled(day)\n                    const isSelected = isEqual(day, valueAsDate)\n                    const isInMonth = isEqualMonth(day, this.focusedDay)\n                    const isHighlighted = this.isDateHighlighted(day)\n                    const formattedDate = this.dateFormatShort.format(day)\n\n                    const accessibleLabel\n                      = isHighlighted && typeof isHighlighted === 'string'\n                        ? `${formattedDate}, ${isHighlighted}`\n                        : formattedDate\n\n                    return html`\n                      <td class=\"n-calendar-cell\">\n                        <button\n                          type=\"button\"\n                          tabindex=${isEqual(day, this.focusedDay) ? 0 : -1}\n                          class=${classMap({\n                            'n-calendar-day': true,\n                            'is-outside': outsideRange,\n                            'is-month': isInMonth,\n                            'is-highlighted': isHighlighted,\n                          })}\n                          @click=${() => this.handleDaySelect(day)}\n                          @keydown=${this.shortcuts}\n                          ?disabled=${outsideRange}\n                          aria-disabled=${cond(isDisabled, 'true')}\n                          aria-pressed=${isSelected ? 'true' : 'false'}\n                          aria-current=${cond(isToday, 'date')}\n                          aria-label=${accessibleLabel}\n                        >\n                          <span aria-hidden=\"true\">${day.getDate()}</span>\n                        </button>\n                      </td>\n                    `\n                  })}\n                </tr>\n              `,\n            )}\n          </tbody>\n        </table>\n      </div>\n    `\n  }\n\n  @observe('value')\n  protected handleValueChange() {\n    this.setFocusedDay(parseISODate(this.value) || this.getToday())\n  }\n\n  @observe('focusedDay', 'updated')\n  protected handleFocusedDayChange() {\n    if (this.activeFocus) {\n      this.focusedDayNode.focus()\n    }\n  }\n\n  private handleLangChange() {\n    const lang = this.localize.resolvedLang\n    this.dateFormatShort = new Intl.DateTimeFormat(lang, { day: 'numeric', month: 'long' })\n    this.monthNames = getMonthNames(lang, 'long')\n    this.monthNamesShort = getMonthNames(lang, 'short')\n    this.dayNames = getDayNames(lang, 'long')\n    this.dayNamesShort = getDayNames(lang, 'narrow')\n  }\n\n  private handleDaySelect = (day: Date) => {\n    const isInRange = inRange(day, parseISODate(this.min || ''), parseISODate(this.max || ''))\n    const isAllowed = !this.isDateDisabled(day)\n\n    if (isInRange && isAllowed) {\n      this.value = printISODate(day)\n      this.dispatchEvent(new DateSelectEvent('change', day))\n    }\n  }\n\n  private getToday() {\n    return parseISODate(this.today || '') || new Date()\n  }\n\n  private addDays(days: number) {\n    this.setFocusedDay(addDays(this.focusedDay, days))\n  }\n\n  private addMonths(months: number) {\n    this.setMonth(this.focusedDay.getMonth() + months)\n  }\n\n  private addYears(years: number) {\n    this.setYear(this.focusedDay.getFullYear() + years)\n  }\n\n  private startOfWeek() {\n    this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek))\n  }\n\n  private endOfWeek() {\n    this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek))\n  }\n\n  private setMonth(month: number) {\n    const min = setMonth(startOfMonth(this.focusedDay), month)\n    const max = endOfMonth(min)\n    const date = setMonth(this.focusedDay, month)\n\n    this.setFocusedDay(clamp(date, min, max))\n  }\n\n  private setYear(year: number) {\n    const min = setYear(startOfMonth(this.focusedDay), year)\n    const max = endOfMonth(min)\n    const date = setYear(this.focusedDay, year)\n\n    this.setFocusedDay(clamp(date, min, max))\n  }\n\n  private setFocusedDay(day: Date) {\n    this.focusedDay = clamp(day, parseISODate(this.min || ''), parseISODate(this.max || ''))\n    this.dispatchEvent(new DateSelectEvent('nord-focus-date', this.focusedDay))\n  }\n\n  private handleMonthSelect = (e: Event) => {\n    this.setMonth(Number.parseInt((e.target as HTMLSelectElement).value, 10))\n  }\n\n  private handleYearSelect = (e: Event) => {\n    this.setYear(Number.parseInt((e.target as HTMLSelectElement).value, 10))\n  }\n\n  private handleNextMonthClick = (event: MouseEvent) => {\n    event.preventDefault()\n    this.addMonths(1)\n  }\n\n  private handlePreviousMonthClick = (event: MouseEvent) => {\n    event.preventDefault()\n    this.addMonths(-1)\n  }\n\n  private enableActiveFocus = () => {\n    this.activeFocus = true\n  }\n\n  private disableActiveFocus = (e: FocusEvent) => {\n    const table = e.currentTarget as Node\n    const relatedTarget = e.relatedTarget as Node\n\n    if (relatedTarget && !table.contains(relatedTarget)) {\n      this.activeFocus = false\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nord-calendar': Calendar\n  }\n}\n"],"names":["preventDefault","e","SwipeController","constructor","host","options","this","hadFirstUpdate","initialTouchX","initialTouchY","handleTouchStart","event","pageX","pageY","changedTouches","handleTouchEnd","matchesGesture","onSwipeEnd","distX","distY","details","initialX","initialY","addController","events","EventController","target","hostUpdated","listen","hostDisconnected","isHorizontalSwipe","Math","abs","isDownwardsSwipe","fn","Icon","registerIcon","arrowRightIcon","arrowLeftIcon","arrowDownIcon","isDateDisabled","isDateHighlighted","dialogLabelId","Calendar","LitElement","direction","DirectionController","swipe","addMonths","shortcuts","createKeybindingsHandler","ArrowRight","addDays","isLTR","ArrowLeft","ArrowDown","ArrowUp","Home","startOfWeek","End","endOfWeek","PageUp","PageDown","addYears","localize","LocalizeController","onLangChange","handleLangChange","value","firstDayOfWeek","DaysOfWeek","Monday","expand","activeFocus","focusedDay","Date","handleDaySelect","day","isInRange","inRange","parseISODate","min","max","isAllowed","printISODate","dispatchEvent","DateSelectEvent","handleMonthSelect","setMonth","Number","parseInt","handleYearSelect","setYear","handleNextMonthClick","handlePreviousMonthClick","enableActiveFocus","disableActiveFocus","table","currentTarget","relatedTarget","contains","focus","_a","focusedDayNode","monthSelectNode","render","today","getToday","valueAsDate","focusedMonth","getMonth","focusedYear","getFullYear","minDate","maxDate","minDateStartOfMonth","startOfMonth","undefined","maxDateEndOfMonth","endOfMonth","selectedYear","minYear","maxYear","isServer","html","monthNames","term","map","month","i","monthNamesShort","repeat","range","year","isEqualMonth","mapWithOffset","dayNames","dayName","dayNamesShort","chunk","getViewOfMonth","week","outsideRange","isToday","isEqual","isDisabled","isSelected","isInMonth","isHighlighted","formattedDate","dateFormatShort","format","accessibleLabel","classMap","cond","getDate","handleValueChange","setFocusedDay","handleFocusedDayChange","lang","resolvedLang","Intl","DateTimeFormat","getMonthNames","getDayNames","days","months","years","date","clamp","styles","componentStyle","style","__decorate","query","prototype","property","reflect","type","attribute","Boolean","state","observe","customElement"],"mappings":"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"}

package/lib/FormAssociatedMixin-DFL7yabe.js

@@ -1,2 +0,0 @@
-import{_ as t}from"./tslib.es6-CmLYFWVC.js";import{html as e}from"lit";import{property as r}from"lit/decorators.js";import{F as i}from"./FormDataController-OUt5L5uC.js";import{S as o}from"./SlotController-Z6eG7LSZ.js";import{N as s}from"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";function n(n){class h extends n{constructor(){super(...arguments),this.labelSlot=new o(this,"label"),this.errorSlot=new o(this,"error"),this.hintSlot=new o(this,"hint"),this.formData=new i(this,{value:()=>this.formValue}),this.inputId="input",this.errorId="error",this.hintId="hint",this.label="",this.hideLabel=!1,this.required=!1,this.hideRequired=!1}get formValue(){return this.value}handleInput(t){t.stopPropagation();const e=t.target;this.value=e.value,this.dispatchEvent(new s("input"))}handleChange(t){t.stopPropagation(),this.dispatchEvent(new s("change"))}renderLabel(t){const r=e`<label for="${this.inputId}"><slot name="label">${this.label}</slot><span ?hidden="${!this.required||this.hideRequired}" aria-hidden="true" class="n-required">*</span> ${t}</label><div class="n-caption n-hint" id="${this.hintId}" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div>`;return this.hideLabel?e`<nord-visually-hidden>${r}</nord-visually-hidden>`:e`<div class="n-label-container">${r}</div>`}renderError(){return e`<div class="n-caption n-error" id="${this.errorId}" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div>`}getDescribedBy(){const{hasHint:t,hasError:e}=this;return t&&e?`${this.hintId} ${this.errorId}`:t?this.hintId:e?this.errorId:void 0}getInvalid(){return this.hasError?"true":void 0}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}}return t([r({reflect:!0})],h.prototype,"label",void 0),t([r({reflect:!0})],h.prototype,"hint",void 0),t([r({reflect:!0,type:Boolean,attribute:"hide-label"})],h.prototype,"hideLabel",void 0),t([r({reflect:!0})],h.prototype,"placeholder",void 0),t([r({reflect:!0})],h.prototype,"error",void 0),t([r({reflect:!0,type:Boolean})],h.prototype,"required",void 0),t([r({reflect:!0,type:Boolean,attribute:"hide-required"})],h.prototype,"hideRequired",void 0),h}export{n as F};
-//# sourceMappingURL=FormAssociatedMixin-DFL7yabe.js.map

package/lib/FormAssociatedMixin-DFL7yabe.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormAssociatedMixin-DFL7yabe.js","sources":["../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["import type { LitElement, TemplateResult } from 'lit'\nimport type { InputMixinInterface } from './InputMixin.js'\nimport { html } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { FormDataController } from '../controllers/FormDataController.js'\nimport { SlotController } from '../controllers/SlotController.js'\nimport { NordEvent } from '../events.js'\nimport '../../visually-hidden/VisuallyHidden.js'\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n  label: string\n  required: boolean\n  hideRequired: boolean\n  hint?: string\n  hideLabel: boolean\n  placeholder?: string\n  error?: string\n\n  protected inputId: string\n  protected errorId: string\n  protected hintId: string\n  protected labelSlot: SlotController\n  protected hintSlot: SlotController\n  protected errorSlot: SlotController\n  protected formData: FormDataController\n\n  protected get formValue(): string | undefined\n  protected get hasError(): boolean\n  protected get hasHint(): boolean\n\n  protected handleChange(e: Event): void\n  protected handleInput(e: Event): void\n  protected renderLabel(additionalContent?: TemplateResult): TemplateResult\n  protected renderError(): TemplateResult\n  protected getDescribedBy(): string | undefined\n  protected getInvalid(): 'true' | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n  // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n  /**\n   * @slot label - Use when a label requires more than plain text.\n   * @slot hint - Use when a hint requires more than plain text.\n   * @slot error - Optional slot that holds error text for the input.\n   */\n  class FormAssociatedElement extends superClass {\n    protected labelSlot = new SlotController(this, 'label')\n    protected errorSlot = new SlotController(this, 'error')\n    protected hintSlot = new SlotController(this, 'hint')\n    protected formData = new FormDataController(this, { value: () => this.formValue })\n\n    protected get formValue() {\n      return this.value\n    }\n\n    protected inputId = 'input'\n    protected errorId = 'error'\n    protected hintId = 'hint'\n\n    /**\n     * Label for the input.\n     */\n    @property({ reflect: true }) label: string = ''\n\n    /**\n     * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n     */\n    @property({ reflect: true }) hint?: string\n\n    /**\n     * Visually hide the label, but still show it to assistive technologies like screen readers.\n     */\n    @property({ reflect: true, type: Boolean, attribute: 'hide-label' }) hideLabel = false\n\n    /**\n     * Placeholder text to display within the input.\n     */\n    @property({ reflect: true }) placeholder?: string\n\n    /**\n     * Optional error to be shown with the input. Alternatively use the error slot.\n     */\n    @property({ reflect: true }) error?: string\n\n    /**\n     * Determines whether the input is required or not.\n     * An input marked as required will be announced as such to users of assistive technology.\n     * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n     */\n    @property({ reflect: true, type: Boolean }) required = false\n\n    /**\n     * Visually hide the required indicator, but still show\n     * required attribute to assistive technologies like screen readers.\n     */\n    @property({ reflect: true, type: Boolean, attribute: 'hide-required' }) hideRequired = false\n\n    protected handleInput(e: Event) {\n      e.stopPropagation()\n      const target = e.target as NativeInputElement\n      this.value = target.value\n\n      /**\n       * Fired as the user types into the input.\n       */\n      this.dispatchEvent(new NordEvent('input'))\n    }\n\n    protected handleChange(e: Event) {\n      e.stopPropagation()\n\n      /**\n       * Fired whenever the input's value is changed via user interaction.\n       */\n      this.dispatchEvent(new NordEvent('change'))\n    }\n\n    protected renderLabel(additionalContent?: TemplateResult) {\n      const label = html`\n        <label for=${this.inputId}>\n          <slot name=\"label\">${this.label}</slot\n          ><span ?hidden=${!this.required || this.hideRequired} aria-hidden=\"true\" class=\"n-required\">*</span>\n          ${additionalContent}\n        </label>\n\n        <div class=\"n-caption n-hint\" id=${this.hintId} ?hidden=${!this.hasHint}>\n          <slot name=\"hint\">${this.hint}</slot>\n        </div>\n      `\n\n      return this.hideLabel\n        ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n        : html`<div class=\"n-label-container\">${label}</div>`\n    }\n\n    protected renderError() {\n      return html`\n        <div class=\"n-caption n-error\" id=${this.errorId} role=\"alert\" ?hidden=${!this.hasError}>\n          <slot name=\"error\">${this.error}</slot>\n        </div>\n      `\n    }\n\n    protected getDescribedBy() {\n      const { hasHint, hasError } = this\n\n      if (hasHint && hasError) {\n        return `${this.hintId} ${this.errorId}`\n      }\n      if (hasHint) {\n        return this.hintId\n      }\n      if (hasError) {\n        return this.errorId\n      }\n\n      return undefined\n    }\n\n    protected getInvalid() {\n      return this.hasError ? 'true' : undefined\n    }\n\n    protected get hasHint() {\n      return Boolean(this.hint) || this.hintSlot.hasContent\n    }\n\n    protected get hasError() {\n      return Boolean(this.error) || this.errorSlot.hasContent\n    }\n  }\n\n  return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormAssociatedMixin","superClass","FormAssociatedElement","constructor","this","labelSlot","SlotController","errorSlot","hintSlot","formData","FormDataController","value","formValue","inputId","errorId","hintId","label","hideLabel","required","hideRequired","handleInput","e","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","additionalContent","html","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","reflect","prototype","type","attribute"],"mappings":"+RAyCM,SAAUA,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApC,WAAAE,uBACYC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAASG,UAAG,IAAID,EAAeF,KAAM,SACrCA,KAAQI,SAAG,IAAIF,EAAeF,KAAM,QACpCA,KAAAK,SAAW,IAAIC,EAAmBN,KAAM,CAAEO,MAAO,IAAMP,KAAKQ,YAM5DR,KAAOS,QAAG,QACVT,KAAOU,QAAG,QACVV,KAAMW,OAAG,OAKUX,KAAKY,MAAW,GAUwBZ,KAASa,WAAG,EAiBrCb,KAAQc,UAAG,EAMiBd,KAAYe,cAAG,CA2ExF,CAvHC,aAAcP,GACZ,OAAOR,KAAKO,KACb,CA4CS,WAAAS,CAAYC,GACpBA,EAAEC,kBACF,MAAMC,EAASF,EAAEE,OACjBnB,KAAKO,MAAQY,EAAOZ,MAKpBP,KAAKoB,cAAc,IAAIC,EAAU,SAClC,CAES,YAAAC,CAAaL,GACrBA,EAAEC,kBAKFlB,KAAKoB,cAAc,IAAIC,EAAU,UAClC,CAES,WAAAE,CAAYC,GACpB,MAAMZ,EAAQa,CAAI,eACHzB,KAAKS,+BACKT,KAAKY,+BACRZ,KAAKc,UAAYd,KAAKe,gEACtCS,8CAG+BxB,KAAKW,qBAAmBX,KAAK0B,8BAC1C1B,KAAK2B,oBAI7B,OAAO3B,KAAKa,UACRY,CAAI,yBAAyBb,2BAC7Ba,CAAI,kCAAkCb,SAC3C,CAES,WAAAgB,GACR,OAAOH,CAAI,sCAC2BzB,KAAKU,mCAAiCV,KAAK6B,gCACxD7B,KAAK8B,oBAG/B,CAES,cAAAC,GACR,MAAML,QAAEA,EAAOG,SAAEA,GAAa7B,KAE9B,OAAI0B,GAAWG,EACN,GAAG7B,KAAKW,UAAUX,KAAKU,UAE5BgB,EACK1B,KAAKW,OAEVkB,EACK7B,KAAKU,aADd,CAKD,CAES,UAAAsB,GACR,OAAOhC,KAAK6B,SAAW,YAASI,CACjC,CAED,WAAcP,GACZ,OAAOQ,QAAQlC,KAAK2B,OAAS3B,KAAKI,SAAS+B,UAC5C,CAED,YAAcN,GACZ,OAAOK,QAAQlC,KAAK8B,QAAU9B,KAAKG,UAAUgC,UAC9C,EAGH,OA9G+BC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0BxC,EAAAyC,UAAA,aAAA,GAKlBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBxC,EAAAyC,UAAA,YAAA,GAK2BH,EAAA,CAApEC,EAAS,CAAEC,SAAS,EAAME,KAAMN,QAASO,UAAW,gBAAiC3C,EAAAyC,UAAA,iBAAA,GAKzDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA4BxC,EAAAyC,UAAA,mBAAA,GAKpBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBxC,EAAAyC,UAAA,aAAA,GAOCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMN,WAA2BpC,EAAAyC,UAAA,gBAAA,GAMYH,EAAA,CAAvEC,EAAS,CAAEC,SAAS,EAAME,KAAMN,QAASO,UAAW,mBAAuC3C,EAAAyC,UAAA,oBAAA,GA6EvFzC,CACT"}

package/lib/FormField--eLuhPue.js

@@ -1,2 +0,0 @@
-import{css as n}from"lit";const a=n`:host{--_n-label-color:var(--n-label-color, var(--n-color-text))}.n-caption,::slotted(.n-caption){font-size:var(--n-font-size-s);line-height:var(--n-line-height-caption)}.n-label-container{margin-block-end:var(--n-space-s);display:inline-block}.n-label,::slotted(label),label{display:block!important;color:var(--_n-label-color);font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading);margin:0!important}.n-hint{padding-block-start:var(--n-space-xs);color:var(--n-color-text-weaker)}:host([size='s']) ::slotted(label),:host([size='s']) :is(label,.n-label){font-size:var(--n-font-size-s)}.n-error{margin-block-start:var(--n-space-s);color:var(--n-color-text-error)}.n-required{color:var(--n-color-status-danger);margin-inline-start:var(--n-space-xs)}`;export{a as s};
-//# sourceMappingURL=FormField--eLuhPue.js.map

package/lib/FormField--eLuhPue.js.map

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