@nordhealth/components 4.26.2 → 5.0.0

package/lib/vue.d.ts

@@ -18,6 +18,31 @@ type WCProps<TWebComponent extends HTMLElement> = Partial<
 >;
 
 interface NordComponents {
+  "nord-accordion": DefineComponent<
+    WCProps<Components.Accordion> & {
+      /**
+       * Dispatched when an item is expanded or collapsed. The event includes a `value` array of the currently open item values.
+       */
+      onChange?: (event: Event) => void;
+    }
+  >;
+
+  "nord-accordion-header": DefineComponent<
+    WCProps<Components.AccordionHeader> & {}
+  >;
+
+  "nord-accordion-item": DefineComponent<
+    WCProps<Components.AccordionItem> & {}
+  >;
+
+  "nord-accordion-panel": DefineComponent<
+    WCProps<Components.AccordionPanel> & {}
+  >;
+
+  "nord-accordion-trigger": DefineComponent<
+    WCProps<Components.AccordionTrigger> & {}
+  >;
+
   "nord-aside": DefineComponent<
     WCProps<Components.Aside> & {
       /**
@@ -58,6 +83,35 @@ interface NordComponents {
 
   "nord-aside-trigger": DefineComponent<WCProps<Components.AsideTrigger> & {}>;
 
+  "nord-autocomplete": DefineComponent<
+    WCProps<Components.Autocomplete> & {
+      /**
+       * Dispatched when the committed value changes via user interaction.
+       */
+      onChange?: (event: Event) => void;
+
+      /**
+       * Dispatched when the value is cleared via the clear button or `clear()`.
+       */
+      onClear?: (event: Event) => void;
+
+      /**
+       * Dispatched when the listbox is closed.
+       */
+      onClose?: (event: Event) => void;
+
+      /**
+       * Dispatched as the user types into the input.
+       */
+      onInput?: (event: Event) => void;
+
+      /**
+       * Dispatched when the listbox is opened.
+       */
+      onOpen?: (event: Event) => void;
+    }
+  >;
+
   "nord-avatar": DefineComponent<WCProps<Components.Avatar> & {}>;
 
   "nord-badge": DefineComponent<WCProps<Components.Badge> & {}>;
@@ -79,6 +133,11 @@ interface NordComponents {
        * Dispatched when the calendar's focused date changes.
        */
       onNordFocusDate?: (event: Event) => void;
+
+      /**
+       * Dispatched in `range` mode when a complete range (start and end) has been selected.
+       */
+      onRangeChange?: (event: Event) => void;
     }
   >;
 
@@ -98,6 +157,65 @@ interface NordComponents {
     }
   >;
 
+  "nord-collapsible": DefineComponent<
+    WCProps<Components.Collapsible> & {
+      /**
+       * Dispatched when the collapsible is opened or closed. The event includes an `open` property reflecting the new state.
+       */
+      onToggle?: (event: Event) => void;
+    }
+  >;
+
+  "nord-collapsible-panel": DefineComponent<
+    WCProps<Components.CollapsiblePanel> & {}
+  >;
+
+  "nord-collapsible-trigger": DefineComponent<
+    WCProps<Components.CollapsibleTrigger> & {}
+  >;
+
+  "nord-combobox": DefineComponent<
+    WCProps<Components.Combobox> & {
+      /**
+       * Dispatched when the committed value changes via user interaction.
+       */
+      onChange?: (event: Event) => void;
+
+      /**
+       * Dispatched when the value is cleared via the clear button or `clear()`.
+       */
+      onClear?: (event: Event) => void;
+
+      /**
+       * Dispatched when the listbox is closed.
+       */
+      onClose?: (event: Event) => void;
+
+      /**
+       * Dispatched when the user chooses the "Create" affordance in a `creatable` combobox.
+       */
+      onCreate?: (event: Event) => void;
+
+      /**
+       * Dispatched as the user types into the search input.
+       */
+      onInput?: (event: Event) => void;
+
+      /**
+       * Dispatched when the listbox is opened.
+       */
+      onOpen?: (event: Event) => void;
+    }
+  >;
+
+  "nord-combobox-group": DefineComponent<
+    WCProps<Components.ComboboxGroup> & {}
+  >;
+
+  "nord-combobox-option": DefineComponent<
+    WCProps<Components.ComboboxOption> & {}
+  >;
+
   "nord-command-menu": DefineComponent<
     WCProps<Components.CommandMenu> & {
       /**
@@ -151,6 +269,30 @@ interface NordComponents {
     }
   >;
 
+  "nord-date-range-picker": DefineComponent<
+    WCProps<Components.DateRangePicker> & {
+      /**
+       * Dispatched when the committed range changes (Apply or Clear).
+       */
+      onChange?: (event: Event) => void;
+
+      /**
+       * Dispatched when the popout is closed.
+       */
+      onClose?: (event: Event) => void;
+
+      /**
+       * Dispatched live as the pending range changes inside the popout.
+       */
+      onInput?: (event: Event) => void;
+
+      /**
+       * Dispatched when the popout is opened.
+       */
+      onOpen?: (event: Event) => void;
+    }
+  >;
+
   "nord-divider": DefineComponent<WCProps<Components.Divider> & {}>;
 
   "nord-drawer": DefineComponent<WCProps<Components.Drawer> & {}>;
@@ -196,8 +338,168 @@ interface NordComponents {
 
   "nord-empty-state": DefineComponent<WCProps<Components.EmptyState> & {}>;
 
+  "nord-field": DefineComponent<WCProps<Components.Field> & {}>;
+
+  "nord-field-content": DefineComponent<WCProps<Components.FieldContent> & {}>;
+
+  "nord-field-description": DefineComponent<
+    WCProps<Components.FieldDescription> & {}
+  >;
+
+  "nord-field-error": DefineComponent<WCProps<Components.FieldError> & {}>;
+
+  "nord-field-group": DefineComponent<WCProps<Components.FieldGroup> & {}>;
+
+  "nord-field-label": DefineComponent<WCProps<Components.FieldLabel> & {}>;
+
+  "nord-field-legend": DefineComponent<WCProps<Components.FieldLegend> & {}>;
+
+  "nord-field-separator": DefineComponent<
+    WCProps<Components.FieldSeparator> & {}
+  >;
+
   "nord-fieldset": DefineComponent<WCProps<Components.Fieldset> & {}>;
 
+  "nord-field-set": DefineComponent<WCProps<Components.FieldSet> & {}>;
+
+  "nord-field-title": DefineComponent<WCProps<Components.FieldTitle> & {}>;
+
+  "nord-filter-add-button": DefineComponent<
+    WCProps<Components.FilterAddButton> & {
+      /**
+       * Dispatched when the popout is closed.
+       */
+      onClose?: (event: Event) => void;
+
+      /**
+       * Dispatched when the popout is opened.
+       */
+      onOpen?: (event: Event) => void;
+
+      /**
+       * Dispatched with the chosen option's `id` when an option is selected.
+       */
+      onSelect?: (event: Event) => void;
+    }
+  >;
+
+  "nord-filter-bar": DefineComponent<WCProps<Components.FilterBar> & {}>;
+
+  "nord-filter-date-range": DefineComponent<
+    WCProps<Components.FilterDateRange> & {
+      /**
+       * Dispatched when the committed range changes (Apply or clear).
+       */
+      onChange?: (event: Event) => void;
+
+      /**
+       * Dispatched when the chip's clear affordance is pressed.
+       */
+      onClear?: (event: Event) => void;
+
+      /**
+       * Dispatched when the popout is closed.
+       */
+      onClose?: (event: Event) => void;
+
+      /**
+       * Dispatched when the popout is opened.
+       */
+      onOpen?: (event: Event) => void;
+
+      /**
+       * Dispatched when the chip's remove affordance is pressed.
+       */
+      onRemove?: (event: Event) => void;
+    }
+  >;
+
+  "nord-filter-dropdown": DefineComponent<
+    WCProps<Components.FilterDropdown> & {
+      /**
+       * Dispatched when the committed selection changes via user interaction.
+       */
+      onChange?: (event: Event) => void;
+
+      /**
+       * Dispatched when the selection is cleared, before `change`.
+       */
+      onClear?: (event: Event) => void;
+
+      /**
+       * Dispatched when the popout is closed.
+       */
+      onClose?: (event: Event) => void;
+
+      /**
+       * Dispatched when the list is scrolled near its end (infinite scroll).
+       */
+      onLoadMore?: (event: Event) => void;
+
+      /**
+       * Dispatched when the popout is opened.
+       */
+      onOpen?: (event: Event) => void;
+
+      /**
+       * Dispatched when the filter is removed (only when `removable`).
+       */
+      onRemove?: (event: Event) => void;
+
+      /**
+       * Dispatched as the user types when `searchable` (use with `internal-search="false"` for async search).
+       */
+      onSearchChange?: (event: Event) => void;
+    }
+  >;
+
+  "nord-filter-field": DefineComponent<
+    WCProps<Components.FilterField> & {
+      /**
+       * Dispatched when the clear affordance is pressed.
+       */
+      onClear?: (event: Event) => void;
+
+      /**
+       * Dispatched when the remove affordance is pressed.
+       */
+      onRemove?: (event: Event) => void;
+    }
+  >;
+
+  "nord-filter-input": DefineComponent<
+    WCProps<Components.FilterInput> & {
+      /**
+       * Dispatched when the value is committed.
+       */
+      onChange?: (event: Event) => void;
+
+      /**
+       * Dispatched when the chip-mode popout is closed.
+       */
+      onClose?: (event: Event) => void;
+
+      /**
+       * Dispatched as the user types into the input.
+       */
+      onInput?: (event: Event) => void;
+
+      /**
+       * Dispatched when the chip-mode popout is opened.
+       */
+      onOpen?: (event: Event) => void;
+    }
+  >;
+
+  "nord-filter-reset-button": DefineComponent<
+    WCProps<Components.FilterResetButton> & {
+      /**
+       * Dispatched when the button is pressed to clear all active filters.
+       */
+      onReset?: (event: Event) => void;
+    }
+  >;
+
   "nord-footer": DefineComponent<WCProps<Components.Footer> & {}>;
 
   "nord-header": DefineComponent<WCProps<Components.Header> & {}>;
@@ -223,6 +525,34 @@ interface NordComponents {
     }
   >;
 
+  "nord-item": DefineComponent<WCProps<Components.Item> & {}>;
+
+  "nord-item-actions": DefineComponent<WCProps<Components.ItemActions> & {}>;
+
+  "nord-item-content": DefineComponent<WCProps<Components.ItemContent> & {}>;
+
+  "nord-item-description": DefineComponent<
+    WCProps<Components.ItemDescription> & {}
+  >;
+
+  "nord-item-footer": DefineComponent<WCProps<Components.ItemFooter> & {}>;
+
+  "nord-item-group": DefineComponent<WCProps<Components.ItemGroup> & {}>;
+
+  "nord-item-header": DefineComponent<WCProps<Components.ItemHeader> & {}>;
+
+  "nord-item-media": DefineComponent<WCProps<Components.ItemMedia> & {}>;
+
+  "nord-item-separator": DefineComponent<
+    WCProps<Components.ItemSeparator> & {}
+  >;
+
+  "nord-item-title": DefineComponent<WCProps<Components.ItemTitle> & {}>;
+
+  "nord-kbd": DefineComponent<WCProps<Components.Kbd> & {}>;
+
+  "nord-kbd-group": DefineComponent<WCProps<Components.KbdGroup> & {}>;
+
   "nord-layout": DefineComponent<
     WCProps<Components.Layout> & {
       /**
@@ -239,6 +569,8 @@ interface NordComponents {
 
   "nord-message": DefineComponent<WCProps<Components.Message> & {}>;
 
+  "nord-meter": DefineComponent<WCProps<Components.Meter> & {}>;
+
   "nord-modal": DefineComponent<
     WCProps<Components.Modal> & {
       /**
@@ -315,6 +647,81 @@ interface NordComponents {
     }
   >;
 
+  "nord-number-field": DefineComponent<
+    WCProps<Components.NumberField> & {
+      /**
+       * Dispatched when the value is committed (on blur, keyboard step, or pointer-up after a button hold or scrub). Carries the numeric value and a `reason`.
+       */
+      onChange?: (event: Event) => void;
+
+      /**
+       * Dispatched as the value changes during interaction (typing a parseable value, clearing, each step, each button tick, each wheel notch, each scrub increment).
+       */
+      onInput?: (event: Event) => void;
+    }
+  >;
+
+  "nord-otp-field": DefineComponent<
+    WCProps<Components.OtpField> & {
+      /**
+       * Dispatched alongside `input` when the committed value changes via user interaction.
+       */
+      onChange?: (event: Event) => void;
+
+      /**
+       * Dispatched after the value updates when every cell becomes filled.
+       */
+      onComplete?: (event: Event) => void;
+
+      /**
+       * Dispatched whenever the OTP value changes through user interaction (typing, Backspace/Delete, paste, autofill).
+       */
+      onInput?: (event: Event) => void;
+
+      /**
+       * Dispatched when typed or pasted text contained characters rejected by `type`.
+       */
+      onValueInvalid?: (event: Event) => void;
+    }
+  >;
+
+  "nord-outline": DefineComponent<
+    WCProps<Components.Outline> & {
+      /**
+       * Dispatched when the active section changes. Includes an `activeId` property.
+       */
+      onChange?: (event: Event) => void;
+    }
+  >;
+
+  "nord-outline-item": DefineComponent<WCProps<Components.OutlineItem> & {}>;
+
+  "nord-pagination": DefineComponent<WCProps<Components.Pagination> & {}>;
+
+  "nord-pagination-content": DefineComponent<
+    WCProps<Components.PaginationContent> & {}
+  >;
+
+  "nord-pagination-ellipsis": DefineComponent<
+    WCProps<Components.PaginationEllipsis> & {}
+  >;
+
+  "nord-pagination-item": DefineComponent<
+    WCProps<Components.PaginationItem> & {}
+  >;
+
+  "nord-pagination-link": DefineComponent<
+    WCProps<Components.PaginationLink> & {}
+  >;
+
+  "nord-pagination-next": DefineComponent<
+    WCProps<Components.PaginationNext> & {}
+  >;
+
+  "nord-pagination-previous": DefineComponent<
+    WCProps<Components.PaginationPrevious> & {}
+  >;
+
   "nord-popout": DefineComponent<
     WCProps<Components.Popout> & {
       /**
@@ -363,6 +770,8 @@ interface NordComponents {
     }
   >;
 
+  "nord-scroll-area": DefineComponent<WCProps<Components.ScrollArea> & {}>;
+
   "nord-segmented-control": DefineComponent<
     WCProps<Components.SegmentedControl> & {
       /**
@@ -461,6 +870,15 @@ interface NordComponents {
     }
   >;
 
+  "nord-time-picker": DefineComponent<
+    WCProps<Components.TimePicker> & {
+      /**
+       * Fired when the selected time changes.
+       */
+      onChange?: (event: Event) => void;
+    }
+  >;
+
   "nord-toast": DefineComponent<
     WCProps<Components.Toast> & {
       /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nordhealth/components",
   "type": "module",
-  "version": "4.26.2",
+  "version": "5.0.0",
   "description": "This package includes Nord Design System Web Components",
   "author": "Nordhealth <support@nordhealth.design>",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -38,18 +38,20 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.5",
+    "@lit/context": "^1.1.6",
     "@nordhealth/icons": "^3.17.0",
+    "@tanstack/lit-virtual": "^3.13.30",
+    "@tanstack/virtual-core": "3.17.1",
     "lit": "^3.3.2",
     "qr": "^0.4.2",
-    "tinykeys": "^1.4.0"
+    "tinykeys": "^4.0.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@nordhealth/css": "^4.4.1",
     "@nordhealth/fonts": "^3.0.4",
-    "@nordhealth/themes": "^9.0.9",
-    "@nordhealth/tokens": "^8.1.0",
-    "@open-wc/eslint-config": "^12.0.3",
+    "@nordhealth/themes": "^9.1.0",
+    "@nordhealth/tokens": "^8.2.0",
     "@open-wc/testing-helpers": "^3.0.1",
     "@playwright/test": "1.58.0",
     "@rollup/plugin-node-resolve": "^15.3.1",
@@ -60,18 +62,12 @@
     "@storybook/addon-docs": "^10.4.6",
     "@storybook/addon-themes": "^10.4.6",
     "@storybook/web-components-vite": "^10.4.6",
+    "@tailwindcss/vite": "^4.2.0",
     "@types/node": "^22.19.11",
-    "@typescript-eslint/eslint-plugin": "^8.56.0",
-    "@typescript-eslint/parser": "^8.56.0",
     "@vitest/browser": "^4.0.18",
     "@vitest/browser-playwright": "^4.0.18",
     "axe-core": "^4.10.3",
     "concurrently": "^9.2.1",
-    "eslint": "^8.57.1",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-lit": "^1.15.0",
-    "eslint-plugin-lit-a11y": "^4.1.4",
-    "eslint-plugin-wc": "^1.5.0",
     "glob": "^11.1.0",
     "http-server": "^14.1.1",
     "prettier": "^3.8.1",
@@ -81,6 +77,7 @@
     "rollup-plugin-minify-html-literals-v3": "^1.3.4",
     "rollup-plugin-summary": "^2.0.1",
     "storybook": "^10.4.6",
+    "tailwindcss": "^4.2.0",
     "tslib": "^2.8.1",
     "typescript": "~5.5.4",
     "vitest": "^4.0.18",
@@ -91,5 +88,5 @@
       "rollup": "~4.21.3"
     }
   },
-  "gitHead": "3f129d3bee6b26dda6d61357ac15b5f0dba5aae5"
+  "gitHead": "2519b8c8f89f72bbb22d4e62528a58ea8c3d9150"
 }

package/lib/Calendar-ChNZdVRO.js

@@ -1,2 +0,0 @@
-import{_ as a}from"./tslib.es6-CmLYFWVC.js";import{css as e,LitElement as n,isServer as t,html as i}from"lit";import{query as r,property as s,state as o,customElement as d}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{repeat as c}from"lit/directives/repeat.js";import{o as h}from"./tinykeys.module-_6MZt7MP.js";import{m as u,c as v}from"./collection-Dvg2XbxV.js";import{D as p}from"./DirectionController-ChvNGESZ.js";import{E as g}from"./EventController-BBOmvfLa.js";import{D as f,i as b,p as m,a as y,s as w,e as x,b as D,g as z,d as k,f as _,h as $,j as F,k as Y,l as j,m as M,n as S,o as T}from"./dates-CAAlPKZi.js";import{o as C}from"./observe-D0n0zOfU.js";import{c as N}from"./cond-CI1KbneT.js";import{r as L}from"./number-Dg2vCfGd.js";import{s as O}from"./Component-DSU3Qp0O.js";import X from"./Icon.js";import{LocalizeController as E}from"./LocalizeController.js";import{DateSelectEvent as W}from"./DateSelectEvent.js";import"./Button.js";import"./VisuallyHidden.js";var A=Object.freeze({__proto__:null,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>',tags:"nordicon arrow down small caret pointing triangle chevron",title:"arrow-down-small"});var U=Object.freeze({__proto__:null,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>',tags:"nordicon arrow left small caret pointing triangle chevron",title:"arrow-left-small"});var I=Object.freeze({__proto__:null,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>',tags:"nordicon arrow right small caret pointing triangle chevron",title:"arrow-right-small"});const P=a=>a.preventDefault();class B{constructor(a,e){this.hadFirstUpdate=!1,this.initialTouchX=0,this.initialTouchY=0,this.handleTouchStart=a=>{const[{pageX:e,pageY:n}]=a.changedTouches;this.initialTouchX=e,this.initialTouchY=n},this.handleTouchEnd=a=>{const[{pageX:e,pageY:n}]=a.changedTouches,{matchesGesture:t,onSwipeEnd:i}=this.options,r=e-this.initialTouchX,s=n-this.initialTouchY,o={initialX:this.initialTouchX,initialY:this.initialTouchY,pageX:e,pageY:n,distX:r,distY:s};t(o)&&(a.preventDefault(),i(o))},a.addController(this),this.events=new g(a),this.options={target:()=>a,...e}}hostUpdated(){if(!this.hadFirstUpdate){this.hadFirstUpdate=!0;const a=this.options.target();this.events.listen(a,"touchstart",this.handleTouchStart),this.events.listen(a,"touchmove",P),this.events.listen(a,"touchend",this.handleTouchEnd)}}hostDisconnected(){this.hadFirstUpdate=!1}}function H({distX:a,distY:e}){return Math.abs(a)>=70&&Math.abs(e)<=70}function R({distX:a,distY:e}){return Math.abs(e)>=70&&Math.abs(a)<=70&&e>0}const V=e`:host{--_n-calendar-box-shadow:var(--n-calendar-box-shadow, var(--n-box-shadow-popout));--_n-calendar-border-radius:var(--n-calendar-border-radius, var(--n-border-radius-s));--_n-calendar-highlight-color:var(--n-calendar-highlight-color, var(--n-color-accent));--_n-calendar-padding-block-start:var(--n-calendar-padding-block, var(--n-space-m));--_n-calendar-padding-block-end:var(--n-calendar-padding-block, var(--n-space-m));--_n-calendar-padding-inline:var(--n-calendar-padding-inline, var(--n-space-m));--_n-calendar-day-size:var(--n-calendar-day-size, var(--n-space-xl));--_n-calendar-day-font-size:var(--n-calendar-day-font-size, var(--n-font-size-m));--_n-calendar-select-label-font-size:var(--n-calendar-select-label-font-size, var(--n-font-size-xl));--_n-calendar-nav-padding-inline:var(--n-calendar-nav-padding-inline, 11px);--_n-calendar-nav-gap:var(--n-calendar-nav-gap, var(--n-space-xs));--_n-calendar-header-margin-block-end:var(--n-calendar-header-margin-block-end, var(--n-space-m));--_n-calendar-header-padding-block-end:var(--n-calendar-header-padding-block-end, 0);--_n-calendar-header-gap:var(--n-calendar-header-gap, var(--n-space-s));--_n-calendar-inline-size:var(--n-calendar-inline-size, max-content);font-feature-settings:var(--n-font-features-reduced)}:host([size='s']){--_n-calendar-day-size:var(--n-calendar-day-size, calc(var(--n-space-l) + var(--n-space-xs)));--_n-calendar-day-font-size:var(--n-calendar-day-font-size, var(--n-font-size-s));--_n-calendar-select-label-font-size:var(--n-calendar-select-label-font-size, var(--n-font-size-l));--_n-calendar-nav-padding-inline:var(--n-calendar-nav-padding-inline, var(--n-space-s));--_n-calendar-header-margin-block-end:var(--n-calendar-header-margin-block-end, var(--n-space-s));--_n-calendar-header-padding-block-end:var(--n-calendar-header-padding-block-end, var(--n-space-xs))}.n-calendar{user-select:none;background:var(--n-color-surface);box-shadow:var(--_n-calendar-box-shadow);border-radius:var(--_n-calendar-border-radius);inline-size:var(--_n-calendar-inline-size);min-inline-size:min-content;padding-block-start:var(--_n-calendar-padding-block-start);padding-block-end:var(--_n-calendar-padding-block-end);padding-inline-start:var(--_n-calendar-padding-inline);padding-inline-end:var(--_n-calendar-padding-inline)}:host([expand]){--_n-calendar-inline-size:var(--n-calendar-inline-size, 100%)}.n-calendar-table{border-collapse:collapse;border-spacing:0;color:var(--n-color-text);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);text-align:center;inline-size:100%}.n-calendar-table-header{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight-active);letter-spacing:1px;padding-block-end:var(--n-space-s);text-decoration:none;text-transform:uppercase}.n-calendar-cell{text-align:center;padding:1px}.n-calendar-day{appearance:none;background:0 0;border:0;border-radius:var(--n-border-radius-s);color:var(--n-color-text);cursor:pointer;display:inline-block;font-family:var(--n-font-family);font-size:var(--_n-calendar-day-font-size);font-weight:var(--n-font-weight);font-variant-numeric:tabular-nums;block-size:var(--_n-calendar-day-size);inline-size:var(--_n-calendar-day-size);padding:0 0 1px;position:relative;text-align:center;vertical-align:middle}.n-calendar-day[aria-current=date]{box-shadow:0 0 0 1px var(--n-color-text-link);color:var(--n-color-text-link);position:relative}.n-calendar-day:hover{background:var(--n-color-active)}.n-calendar-day:focus,.n-calendar-day[aria-pressed=true]{background:var(--n-color-accent);box-shadow:none;color:var(--n-color-text-on-accent);outline:0}.n-calendar-day:active{background:var(--n-color-accent);box-shadow:none!important;color:var(--n-color-text-on-accent)}.n-calendar-day:focus{box-shadow:0 0 5px var(--n-color-accent)}.n-calendar-day:not(.is-month){box-shadow:none}.n-calendar-day:not(.is-month),.n-calendar-day[aria-disabled=true]{background:0 0;color:var(--n-color-text-weakest);cursor:default}.n-calendar-day[aria-disabled=true]{color:var(--n-color-text-weaker);text-decoration:line-through}.n-calendar-day:not(.is-month)[aria-disabled=true]{color:var(--n-color-text-weakest);text-decoration:none}.n-calendar-day[aria-disabled=true][aria-current=date]{box-shadow:0 0 0 1px var(--n-color-accent);color:var(--n-color-text-link)}.n-calendar-day[aria-disabled=true][aria-current=date]:focus{box-shadow:0 0 5px var(--n-color-accent);background:var(--n-color-accent);color:var(--n-color-text-on-accent)}.n-calendar-day[aria-disabled=true]:not([aria-current=date])::before{display:none}.n-calendar-day.is-outside{background:0 0;box-shadow:none;color:var(--n-color-text-weakest);cursor:default;pointer-events:none}.n-calendar-day.is-outside::before{display:none}.n-calendar-day.is-highlighted::after{--_n-calendar-highlight-size:5px;content:'';position:absolute;inset-inline-start:calc(50% - (var(--_n-calendar-highlight-size)/ 2));inset-block-end:var(--n-space-xs);block-size:var(--_n-calendar-highlight-size);inline-size:var(--_n-calendar-highlight-size);border-radius:var(--n-border-radius-circle);background-color:var(--_n-calendar-highlight-color)}.n-calendar-day.is-highlighted.is-month:is([aria-pressed=true],:focus):not([aria-disabled=true])::after{background-color:var(--n-color-text-on-accent)}.n-calendar-day.is-highlighted:is(:not(.is-month),.is-outside,[aria-disabled=true])::after{background-color:var(--n-color-text-weakest)}.n-calendar-header{align-items:center;display:flex;justify-content:space-between;column-gap:var(--_n-calendar-header-gap);margin-block-end:var(--_n-calendar-header-margin-block-end);padding-block-end:var(--_n-calendar-header-padding-block-end);inline-size:100%}.n-calendar-nav{display:flex;column-gap:var(--_n-calendar-nav-gap);white-space:nowrap}.n-calendar-nav nord-button{--_n-button-padding-inline:var(--_n-calendar-nav-padding-inline)}.n-calendar-select{display:inline-flex;position:relative;line-height:var(--n-line-height)}.n-calendar-select span{margin-inline-end:var(--n-space-s)}.n-calendar-select select{cursor:pointer;font-size:var(--n-font-size-l);block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%}.n-calendar-select select:focus+.n-calendar-select-label{box-shadow:0 0 0 2px var(--n-color-accent)}.n-calendar-select-label{display:flex;align-items:center;border-radius:var(--n-border-radius-s);color:var(--n-color-text);font-size:var(--_n-calendar-select-label-font-size);font-weight:var(--n-font-weight-active);padding-block:0;padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-xs);pointer-events:none;position:relative;inline-size:100%}`;function q(a){return e=>{e.preventDefault(),a(e)}}X.registerIcon(I),X.registerIcon(U),X.registerIcon(A);const G=()=>!1,J=()=>!1,K="dialog-header";let Q=class extends n{constructor(){super(...arguments),this.direction=new p(this),this.swipe=new B(this,{matchesGesture:H,onSwipeEnd:({distX:a})=>this.addMonths(a<0?1:-1)}),this.shortcuts=h({ArrowRight:q((()=>this.addDays(this.direction.isLTR?1:-1))),ArrowLeft:q((()=>this.addDays(this.direction.isLTR?-1:1))),ArrowDown:q((()=>this.addDays(7))),ArrowUp:q((()=>this.addDays(-7))),Home:q((()=>this.startOfWeek())),End:q((()=>this.endOfWeek())),PageUp:q((()=>this.addMonths(-1))),PageDown:q((()=>this.addMonths(1))),"Shift+PageUp":q((()=>this.addYears(-1))),"Shift+PageDown":q((()=>this.addYears(1)))}),this.localize=new E(this,{onLangChange:()=>this.handleLangChange()}),this.value="",this.firstDayOfWeek=f.Monday,this.expand=!1,this.size="m",this.isDateDisabled=G,this.isDateHighlighted=J,this.activeFocus=!1,this.focusedDay=new Date,this.handleDaySelect=a=>{const e=b(a,m(this.min||""),m(this.max||"")),n=!this.isDateDisabled(a);e&&n&&(this.value=y(a),this.dispatchEvent(new W("change",a)))},this.handleMonthSelect=a=>{this.setMonth(Number.parseInt(a.target.value,10))},this.handleYearSelect=a=>{this.setYear(Number.parseInt(a.target.value,10))},this.handleNextMonthClick=a=>{a.preventDefault(),this.addMonths(1)},this.handlePreviousMonthClick=a=>{a.preventDefault(),this.addMonths(-1)},this.enableActiveFocus=()=>{this.activeFocus=!0},this.disableActiveFocus=a=>{const e=a.currentTarget,n=a.relatedTarget;n&&!e.contains(n)&&(this.activeFocus=!1)}}focus(a){var e;const n=null!==(e=null==a?void 0:a.target)&&void 0!==e?e:"day";"day"===n?this.focusedDayNode.focus():"month"===n&&this.monthSelectNode.focus()}render(){const a=this.getToday(),e=m(this.value),n=this.focusedDay.getMonth(),r=this.focusedDay.getFullYear(),s=m(this.min||""),o=m(this.max||""),d=s?w(s):void 0,h=o?x(o):void 0,p=a.getFullYear(),g=s?s.getFullYear():p-100,f=o?o.getFullYear():p+10;return t&&this.handleLangChange(),i`<div class="n-calendar"><div class="n-calendar-header"><div><nord-visually-hidden><h2 id="${K}" aria-live="polite" aria-atomic="true">${this.monthNames[n]}, ${this.focusedDay.getFullYear()}</h2></nord-visually-hidden><div class="n-calendar-select"><select aria-label="${this.localize.term("monthSelectLabel")}" class="n-calendar-select-month" @input="${this.handleMonthSelect}">${this.monthNames.map(((a,e)=>i`<option value="${e}" ?selected="${e===n}" ?disabled="${!b(new Date(r,e,1),d,h)}">${a}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.monthNamesShort[n]}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xxs"></nord-icon></div></div><div class="n-calendar-select"><select aria-label="${this.localize.term("yearSelectLabel")}" class="n-calendar-select-year" @input="${this.handleYearSelect}">${c(L(g,f),(a=>a),(a=>i`<option ?selected="${a===r}">${a}</option>`))}</select><div class="n-calendar-select-label" aria-hidden="true"><span>${this.focusedDay.getFullYear()}</span><nord-icon color="var(--n-color-icon)" name="arrow-down-small" size="xxs"></nord-icon></div></div></div><div class="n-calendar-nav"><nord-button class="n-calendar-prev" size="${this.size}" square @click="${this.handlePreviousMonthClick}" ?disabled="${D(s,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("prevMonthLabel")}</nord-visually-hidden><nord-icon name="${this.direction.isLTR?"arrow-left-small":"arrow-right-small"}" size="${"s"===this.size?"xs":"s"}"></nord-icon></nord-button><nord-button class="n-calendar-next" size="${this.size}" square @click="${this.handleNextMonthClick}" ?disabled="${D(o,this.focusedDay)}" type="button"><nord-visually-hidden>${this.localize.term("nextMonthLabel")}</nord-visually-hidden><nord-icon name="${this.direction.isLTR?"arrow-right-small":"arrow-left-small"}" size="${"s"===this.size?"xs":"s"}"></nord-icon></nord-button></div></div><table class="n-calendar-table" aria-labelledby="${K}" @focusin="${this.enableActiveFocus}" @focusout="${this.disableActiveFocus}"><thead><tr>${u(this.dayNames,this.firstDayOfWeek,((a,e)=>i`<th class="n-calendar-table-header" scope="col"><span aria-hidden="true">${this.dayNamesShort[e]}</span><nord-visually-hidden>${a}</nord-visually-hidden></th>`))}</tr></thead><tbody>${v(z(this.focusedDay,this.firstDayOfWeek),7).map((n=>i`<tr class="n-calendar-row">${n.map((n=>{const t=!b(n,s,o),r=k(n,a),d=this.isDateDisabled(n),c=k(n,e),h=D(n,this.focusedDay),u=this.isDateHighlighted(n),v=this.dateFormatShort.format(n),p=u&&"string"==typeof u?`${v}, ${u}`:v;return i`<td class="n-calendar-cell"><button type="button" tabindex="${k(n,this.focusedDay)?0:-1}" class="${l({"n-calendar-day":!0,"is-outside":t,"is-month":h,"is-highlighted":u})}" @click="${()=>this.handleDaySelect(n)}" @keydown="${this.shortcuts}" ?disabled="${t}" aria-disabled="${N(d,"true")}" aria-pressed="${c?"true":"false"}" aria-current="${N(r,"date")}" aria-label="${p}"><span aria-hidden="true">${n.getDate()}</span></button></td>`}))}</tr>`))}</tbody></table></div>`}handleValueChange(){this.setFocusedDay(m(this.value)||this.getToday())}handleFocusedDayChange(){this.activeFocus&&this.focusedDayNode.focus()}handleLangChange(){const a=this.localize.resolvedLang;this.dateFormatShort=new Intl.DateTimeFormat(a,{day:"numeric",month:"long"}),this.monthNames=_(a,"long"),this.monthNamesShort=_(a,"short"),this.dayNames=$(a,"long"),this.dayNamesShort=$(a,"narrow")}getToday(){return m(this.today||"")||new Date}addDays(a){this.setFocusedDay(F(this.focusedDay,a))}addMonths(a){this.setMonth(this.focusedDay.getMonth()+a)}addYears(a){this.setYear(this.focusedDay.getFullYear()+a)}startOfWeek(){this.setFocusedDay(Y(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(j(this.focusedDay,this.firstDayOfWeek))}setMonth(a){const e=M(w(this.focusedDay),a),n=x(e),t=M(this.focusedDay,a);this.setFocusedDay(S(t,e,n))}setYear(a){const e=T(w(this.focusedDay),a),n=x(e),t=T(this.focusedDay,a);this.setFocusedDay(S(t,e,n))}setFocusedDay(a){this.focusedDay=S(a,m(this.min||""),m(this.max||"")),this.dispatchEvent(new W("nord-focus-date",this.focusedDay))}};Q.styles=[O,V],a([r(".n-calendar-select-month",!0)],Q.prototype,"monthSelectNode",void 0),a([r('button[tabindex="0"]')],Q.prototype,"focusedDayNode",void 0),a([s()],Q.prototype,"value",void 0),a([s({reflect:!0,type:Number,attribute:"first-day-of-week"})],Q.prototype,"firstDayOfWeek",void 0),a([s({reflect:!0})],Q.prototype,"min",void 0),a([s({reflect:!0})],Q.prototype,"max",void 0),a([s({reflect:!0})],Q.prototype,"today",void 0),a([s({reflect:!0,type:Boolean})],Q.prototype,"expand",void 0),a([s({reflect:!0})],Q.prototype,"size",void 0),a([s({attribute:!1})],Q.prototype,"isDateDisabled",void 0),a([s({attribute:!1})],Q.prototype,"isDateHighlighted",void 0),a([o()],Q.prototype,"activeFocus",void 0),a([o()],Q.prototype,"focusedDay",void 0),a([C("value")],Q.prototype,"handleValueChange",null),a([C("focusedDay","updated")],Q.prototype,"handleFocusedDayChange",null),Q=a([d("nord-calendar")],Q);var Z=Q;export{Z as C,B as S,R as i};
-//# sourceMappingURL=Calendar-ChNZdVRO.js.map