npm - @nordhealth/components - Versions diffs - 1.0.0-beta.13 → 1.0.0-beta.16 - Mend

@nordhealth/components 1.0.0-beta.13 → 1.0.0-beta.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/custom-elements.json +738 -720
package/lib/Avatar.js +1 -1
package/lib/Avatar.js.map +1 -1
package/lib/Button.js +1 -1
package/lib/Button.js.map +1 -1
package/lib/Calendar-4cb3c8f2.js +13 -0
package/lib/{Calendar-664c2b4c.js.map → Calendar-4cb3c8f2.js.map} +1 -1
package/lib/Calendar.js +1 -1
package/lib/Checkbox.js +1 -1
package/lib/Checkbox.js.map +1 -1
package/lib/CommandMenuAction.js +1 -1
package/lib/CommandMenuAction.js.map +1 -1
package/lib/DatePicker.js +1 -1
package/lib/DatePicker.js.map +1 -1
package/lib/Input.js +1 -1
package/lib/Layout.js +1 -1
package/lib/Layout.js.map +1 -1
package/lib/NavItem.js +1 -1
package/lib/NavItem.js.map +1 -1
package/lib/Radio.js +1 -1
package/lib/Radio.js.map +1 -1
package/lib/Select.js +1 -1
package/lib/Select.js.map +1 -1
package/lib/Spinner.js +1 -1
package/lib/Spinner.js.map +1 -1
package/lib/Stack.js +1 -1
package/lib/Stack.js.map +1 -1
package/lib/{TextField-b4155167.js → TextField-d799db1a.js} +2 -2
package/lib/TextField-d799db1a.js.map +1 -0
package/lib/Textarea.js +1 -1
package/lib/Tooltip.js +1 -1
package/lib/Tooltip.js.map +1 -1
package/lib/bundle.js +3 -3
package/lib/bundle.js.map +1 -1
package/lib/index.js +1 -1
package/lib/src/stack/Stack.d.ts +4 -0
package/package.json +5 -5
package/lib/Calendar-664c2b4c.js +0 -13
package/lib/TextField-b4155167.js.map +0 -1

package/lib/DatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../../icons/lib/assets/interface-close-small.js","../src/date-picker/DatePicker.ts","../src/common/input.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 21h126v112H7zM35 7v28m70-28v28M7 63h126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z\"/></svg>'\nexport const title = \"interface-close-small\"\nexport const tags = \"nordicon interface close remove small cross delete erase symbol\"\n","import { LitElement, html, nothing, PropertyValues } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport type Button from \"../button/Button.js\"\n\nimport \"../calendar/Calendar.js\"\nimport { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DateDisabledPredicate } from \"../calendar/Calendar.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\nimport localization, { DatePickerLocalizedText } from \"./date-localization.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst DISALLOWED_CHARACTERS = /[^0-9./-]+/g\nconst isDateDisabled = () => false\n\n/*\n \n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n \n @status ready\n * @category form\n /\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n @query(`.n-date-toggle`, true) private toggleButton!: Button\n @query(`.n-date-close`, true) private closeButton!: HTMLButtonElement\n @query(`nord-calendar`, true) private calendar!: Calendar\n @query(`[role=\"dialog\"]`, true) private dialog!: HTMLElement\n\n private dismiss = new LightDismissController(this, {\n isOpen: () => this.open,\n onDismiss: e => this.hide(e.type !== \"click\"),\n isDismissible: node => node !== this.calendar && node !== this.toggleButton,\n })\n\n private swipe = new SwipeController(this, {\n target: () => this.dialog,\n matchesGesture: isDownwardsSwipe,\n onSwipeEnd: () => this.hide(false),\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 dateFormatLong!: Intl.DateTimeFormat\n\n @state() private open = false\n\n /\n Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n /\n @property() value: string = \"\"\n\n get valueAsDate(): Date \| undefined {\n return parseISODate(this.value)\n }\n\n /\n Get/set the value of the picker as a Date object.\n /\n set valueAsDate(date: Date \| undefined) {\n this.value = date ? printISODate(date) : \"\"\n }\n\n get valueAsNumber(): number {\n return this.valueAsDate?.getTime() ?? NaN\n }\n\n /\n Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n /\n set valueAsNumber(date: number) {\n this.value = date ? printISODate(new Date(date)) : \"\"\n }\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() 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() max: string = \"\"\n\n /\n Forces the opening direction of the calendar modal to be always left or right.\n * This setting can be useful when the input is smaller than the opening date picker\n * would be as by default the picker always opens towards right.\n /\n @property() direction: \"left\" \| \"right\" = \"right\"\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({ attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n /\n Button labels, day names, month names, etc, used for localization.\n * Default is English.\n /\n @property({ attribute: false }) localization: DatePickerLocalizedText = localization\n\n /\n Date adapter, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n * Default is IS0-8601 parsing and formatting.\n /\n @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\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: DateDisabledPredicate = isDateDisabled\n\n /\n Show the calendar modal, moving focus to the calendar inside.\n /\n show() {\n this.open = true\n /\n Dispatched when the calendar is toggled open.\n /\n this.dispatchEvent(new NordEvent(\"open\"))\n\n // we should only focus once the calendar is visible after render is complete\n this.updateComplete.then(() => this.calendar.focus({ target: \"month\" }))\n }\n\n /\n Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus\n * returning to the date picker's button. Default is true.\n /\n hide(moveFocusToButton = true) {\n this.open = false\n /\n Dispatched when the calendar is closed.\n */\n this.dispatchEvent(new NordEvent(\"close\"))\n\n if (moveFocusToButton) {\n this.toggleButton.focus()\n }\n }\n\n willUpdate(_changedProperties: PropertyValues<this>) {\n if (_changedProperties.has(\"localization\")) {\n this.createDateFormatters()\n }\n }\n\n private createDateFormatters() {\n this.dateFormatLong = new Intl.DateTimeFormat(this.localization.locale, {\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\",\n })\n }\n\n render() {\n const { valueAsDate } = this\n const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n return html`\n ${this.renderLabel()}\n\n <div class=\"n-input-container\">\n <input\n class=\"n-input\"\n name=${this.name}\n .value=${formattedDate}\n placeholder=${ifDefined(this.placeholder)}\n id=${this.inputId}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-autocomplete=\"none\"\n @input=${this.handleInputChange}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n autocomplete=\"off\"\n ${ref(this.focusableRef)}\n aria-invalid=${ifDefined(this.error ? \"true\" : undefined)}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n />\n <button class=\"n-date-toggle\" @click=${this.toggleOpen} ?disabled=${this.disabled} type=\"button\">\n <nord-icon name=\"interface-calendar\" size=\"s\"></nord-icon>\n <nord-visually-hidden>\n ${localization.buttonLabel}\n ${valueAsDate\n ? html`<span>, ${localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)} </span>`\n : nothing}\n </nord-visually-hidden>\n </button>\n </div>\n\n ${this.renderError()}\n\n <div\n class=${classMap({\n \"is-left\": this.direction === \"left\",\n \"is-active\": this.open,\n })}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n aria-labelledby=\"dialog-header\"\n >\n <div class=\"n-date-dialog-content\">\n <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n <div class=\"n-date-mobile\">\n <div class=\"n-date-mobile-heading\" id=\"dialog-header\">${this.localization.calendarHeading}</div>\n <button class=\"n-date-close\" @click=${this.hide} type=\"button\">\n <nord-icon color=\"var(--n-color-icon)\" name=\"interface-close-small\" size=\"xs\"></nord-icon>\n <nord-visually-hidden>${this.localization.closeLabel}</nord-visually-hidden>\n </button>\n </div>\n <nord-calendar\n value=${this.value}\n min=${this.min}\n max=${this.max}\n .localization=${this.localization}\n .firstDayOfWeek=${this.firstDayOfWeek}\n .isDateDisabled=${this.isDateDisabled}\n @nord-select=${this.handleDaySelect}\n ></nord-calendar>\n\n <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n </div>\n </div>\n `\n }\n\n private focusFirst() {\n this.closeButton.focus()\n }\n\n private focusLast() {\n this.calendar.focus({ target: \"day\" })\n }\n\n private handleDaySelect = (e: DateSelectEvent) => {\n this.setValue(e.date)\n this.hide()\n }\n\n private toggleOpen = (e: Event) => {\n e.preventDefault()\n\n if (this.open) {\n this.hide(false)\n } else {\n this.show()\n }\n }\n\n private handleBlur = (event: Event) => {\n event.stopPropagation()\n this.dispatchEvent(new NordEvent(\"blur\"))\n }\n\n private handleFocus = (event: Event) => {\n event.stopPropagation()\n this.dispatchEvent(new NordEvent(\"focus\"))\n }\n\n private handleInputChange = (e: Event) => {\n const target = e.target as HTMLInputElement\n\n // clean up any invalid characters\n cleanValue(target, DISALLOWED_CHARACTERS)\n this.dispatchEvent(new NordEvent(\"input\"))\n\n const parsed = this.dateAdapter.parse(target.value, createDate)\n if (parsed \|\| target.value === \"\") {\n this.setValue(parsed)\n }\n }\n\n private setValue(date?: Date) {\n this.value = date ? printISODate(date) : \"\"\n this.dispatchEvent(new NordEvent(\"change\"))\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-date-picker\": DatePicker\n }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n const { value } = inputEl\n const cursor = inputEl.selectionStart as number\n\n const beforeCursor = value.slice(0, cursor)\n const afterCursor = value.slice(cursor, value.length)\n\n const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n const newValue = filteredBeforeCursor + filterAfterCursor\n const newCursor = filteredBeforeCursor.length\n\n inputEl.value = newValue\n inputEl.selectionStart = newCursor\n inputEl.selectionEnd = newCursor\n\n return newValue\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","DISALLOWED_CHARACTERS","isDateDisabled","DatePicker","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","calendar","toggleButton","SwipeController","target","dialog","matchesGesture","isDownwardsSwipe","onSwipeEnd","localization","isoAdapter","setValue","date","preventDefault","show","event","stopPropagation","dispatchEvent","NordEvent","inputEl","regex","value","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","parsed","dateAdapter","parse","createDate","valueAsDate","parseISODate","printISODate","valueAsNumber","getTime","NaN","Date","updateComplete","then","focus","moveFocusToButton","willUpdate","_changedProperties","has","createDateFormatters","dateFormatLong","Intl","DateTimeFormat","locale","day","month","year","render","formattedDate","format","html","renderLabel","name","ifDefined","placeholder","inputId","disabled","required","handleInputChange","handleFocus","handleBlur","ref","focusableRef","error","undefined","getDescribedBy","toggleOpen","buttonLabel","selectedDateMessage","nothing","renderError","classMap","direction","focusLast","calendarHeading","closeLabel","min","max","firstDayOfWeek","handleDaySelect","focusFirst","closeButton","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","state","property","attribute","Number","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"DatePicker.js","sources":["../../icons/lib/assets/interface-calendar.js","../../icons/lib/assets/interface-close-small.js","../src/date-picker/DatePicker.ts","../src/common/input.ts"],"sourcesContent":["export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7 21h126v112H7zM35 7v28m70-28v28M7 63h126\" stroke-width=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>'\nexport const title = \"interface-calendar\"\nexport const tags = \"nordicon interface calendar date time day week month year\"\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M89.796 74.956a7 7 0 0 1 0-9.912L136.92 17.92a10.5 10.5 0 0 0-14.84-14.84L74.956 50.204a7 7 0 0 1-9.912 0L17.92 3.08A10.5 10.5 0 0 0 3.08 17.92l47.124 47.124a7 7 0 0 1 0 9.912L3.08 122.08a10.5 10.5 0 1 0 14.84 14.84l47.124-47.124a7 7 0 0 1 9.912 0l47.124 47.124a10.5 10.5 0 0 0 14.84-14.84z\"/></svg>'\nexport const title = \"interface-close-small\"\nexport const tags = \"nordicon interface close remove small cross delete erase symbol\"\n","import { LitElement, html, nothing, PropertyValues } from \"lit\"\nimport { customElement, property, query, state } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport * as calendarIcon from \"@nordhealth/icons/lib/assets/interface-calendar.js\"\nimport * as closeIcon from \"@nordhealth/icons/lib/assets/interface-close-small.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport { createDate, DaysOfWeek, parseISODate, printISODate } from \"../common/dates.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { cleanValue } from \"../common/input.js\"\nimport { isDownwardsSwipe, SwipeController } from \"../common/controllers/SwipeController.js\"\n\nimport \"../button/Button.js\"\nimport Icon from \"../icon/Icon.js\"\nimport \"../visually-hidden/VisuallyHidden.js\"\nimport type Button from \"../button/Button.js\"\n\nimport \"../calendar/Calendar.js\"\nimport { DateSelectEvent } from \"../calendar/DateSelectEvent.js\"\nimport type Calendar from \"../calendar/Calendar.js\"\nimport type { DateDisabledPredicate } from \"../calendar/Calendar.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport textFieldStyle from \"../common/styles/TextField.css\"\nimport style from \"./DatePicker.css\"\n\nimport { DateAdapter, isoAdapter } from \"./date-adapter.js\"\nimport localization, { DatePickerLocalizedText } from \"./date-localization.js\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\n\nIcon.registerIcon(calendarIcon)\nIcon.registerIcon(closeIcon)\n\nconst DISALLOWED_CHARACTERS = /[^0-9./-]+/g\nconst isDateDisabled = () => false\n\n/*\n \n * Date Picker allows user to enter a date either through text input,\n * or by choosing a date from the calendar. Please note that the date\n * must be passed in ISO-8601 format: YYYY-MM-DD.\n \n @status ready\n * @category form\n /\n@customElement(\"nord-date-picker\")\nexport default class DatePicker extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, textFieldStyle, style]\n\n @query(`.n-date-toggle`, true) private toggleButton!: Button\n @query(`.n-date-close`, true) private closeButton!: HTMLButtonElement\n @query(`nord-calendar`, true) private calendar!: Calendar\n @query(`[role=\"dialog\"]`, true) private dialog!: HTMLElement\n\n private dismiss = new LightDismissController(this, {\n isOpen: () => this.open,\n onDismiss: e => this.hide(e.type !== \"click\"),\n isDismissible: node => node !== this.calendar && node !== this.toggleButton,\n })\n\n private swipe = new SwipeController(this, {\n target: () => this.dialog,\n matchesGesture: isDownwardsSwipe,\n onSwipeEnd: () => this.hide(false),\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 dateFormatLong!: Intl.DateTimeFormat\n\n @state() private open = false\n\n /\n Date value. Must be in IS0-8601 format: YYYY-MM-DD.\n /\n @property() value: string = \"\"\n\n get valueAsDate(): Date \| undefined {\n return parseISODate(this.value)\n }\n\n /\n Get/set the value of the picker as a Date object.\n /\n set valueAsDate(date: Date \| undefined) {\n this.value = date ? printISODate(date) : \"\"\n }\n\n get valueAsNumber(): number {\n return this.valueAsDate?.getTime() ?? NaN\n }\n\n /\n Get/set the value of the picker as the number of milliseconds elapsed since the UNIX epoch.\n /\n set valueAsNumber(date: number) {\n this.value = date ? printISODate(new Date(date)) : \"\"\n }\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() 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() max: string = \"\"\n\n /\n Forces the opening direction of the calendar modal to be always left or right.\n * This setting can be useful when the input is smaller than the opening date picker\n * would be as by default the picker always opens towards right.\n /\n @property() direction: \"left\" \| \"right\" = \"right\"\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({ attribute: \"first-day-of-week\", type: Number }) firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n /\n Button labels, day names, month names, etc, used for localization.\n * Default is English.\n /\n @property({ attribute: false }) localization: DatePickerLocalizedText = localization\n\n /\n Date adapter, for custom parsing/formatting.\n * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n * and a `format` function which accepts a `Date` and returns a `string`.\n * Default is IS0-8601 parsing and formatting.\n /\n @property({ attribute: false }) dateAdapter: DateAdapter = isoAdapter\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: DateDisabledPredicate = isDateDisabled\n\n /\n Show the calendar modal, moving focus to the calendar inside.\n /\n show() {\n this.open = true\n /\n Dispatched when the calendar is toggled open.\n /\n this.dispatchEvent(new NordEvent(\"open\"))\n\n // we should only focus once the calendar is visible after render is complete\n this.updateComplete.then(() => this.calendar.focus({ target: \"month\" }))\n }\n\n /\n Hide the calendar modal. Set `moveFocusToButton` to false to prevent focus\n * returning to the date picker's button. Default is true.\n /\n hide(moveFocusToButton = true) {\n this.open = false\n /\n Dispatched when the calendar is closed.\n */\n this.dispatchEvent(new NordEvent(\"close\"))\n\n if (moveFocusToButton) {\n this.toggleButton.focus()\n }\n }\n\n willUpdate(_changedProperties: PropertyValues<this>) {\n if (_changedProperties.has(\"localization\")) {\n this.createDateFormatters()\n }\n }\n\n private createDateFormatters() {\n this.dateFormatLong = new Intl.DateTimeFormat(this.localization.locale, {\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\",\n })\n }\n\n render() {\n const { valueAsDate } = this\n const formattedDate = valueAsDate ? this.dateAdapter.format(valueAsDate) : \"\"\n\n return html`\n ${this.renderLabel()}\n\n <div class=\"n-input-container\">\n <input\n class=\"n-input\"\n name=${this.name}\n .value=${formattedDate}\n placeholder=${ifDefined(this.placeholder)}\n id=${this.inputId}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-autocomplete=\"none\"\n @input=${this.handleInputChange}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n autocomplete=\"off\"\n ${ref(this.focusableRef)}\n aria-invalid=${ifDefined(this.error ? \"true\" : undefined)}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n />\n <button class=\"n-date-toggle\" @click=${this.toggleOpen} ?disabled=${this.disabled} type=\"button\">\n <nord-icon name=\"interface-calendar\" size=\"s\"></nord-icon>\n <nord-visually-hidden>\n ${localization.buttonLabel}\n ${valueAsDate\n ? html`<span>, ${localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)} </span>`\n : nothing}\n </nord-visually-hidden>\n </button>\n </div>\n\n ${this.renderError()}\n\n <div\n class=${classMap({\n \"is-left\": this.direction === \"left\",\n \"is-active\": this.open,\n })}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n aria-labelledby=\"dialog-header\"\n >\n <div class=\"n-date-dialog-content\">\n <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusLast}></div>\n\n <div class=\"n-date-mobile\">\n <div class=\"n-date-mobile-heading\" id=\"dialog-header\">${this.localization.calendarHeading}</div>\n <button class=\"n-date-close\" @click=${this.hide} type=\"button\">\n <nord-icon color=\"var(--n-color-icon)\" name=\"interface-close-small\" size=\"xs\"></nord-icon>\n <nord-visually-hidden>${this.localization.closeLabel}</nord-visually-hidden>\n </button>\n </div>\n <nord-calendar\n value=${this.value}\n min=${this.min}\n max=${this.max}\n .localization=${this.localization}\n .firstDayOfWeek=${this.firstDayOfWeek}\n .isDateDisabled=${this.isDateDisabled}\n @nord-select=${this.handleDaySelect}\n ></nord-calendar>\n\n <div aria-hidden=\"true\" tabindex=\"0\" @focus=${this.focusFirst}></div>\n </div>\n </div>\n `\n }\n\n private focusFirst() {\n this.closeButton.focus()\n }\n\n private focusLast() {\n this.calendar.focus({ target: \"day\" })\n }\n\n private handleDaySelect = (e: DateSelectEvent) => {\n this.setValue(e.date)\n this.hide()\n }\n\n private toggleOpen = (e: Event) => {\n e.preventDefault()\n\n if (this.open) {\n this.hide(false)\n } else {\n this.show()\n }\n }\n\n private handleBlur = (event: Event) => {\n event.stopPropagation()\n this.dispatchEvent(new NordEvent(\"blur\"))\n }\n\n private handleFocus = (event: Event) => {\n event.stopPropagation()\n this.dispatchEvent(new NordEvent(\"focus\"))\n }\n\n private handleInputChange = (e: Event) => {\n const target = e.target as HTMLInputElement\n\n // clean up any invalid characters\n cleanValue(target, DISALLOWED_CHARACTERS)\n this.dispatchEvent(new NordEvent(\"input\"))\n\n const parsed = this.dateAdapter.parse(target.value, createDate)\n if (parsed \|\| target.value === \"\") {\n this.setValue(parsed)\n }\n }\n\n private setValue(date?: Date) {\n this.value = date ? printISODate(date) : \"\"\n this.dispatchEvent(new NordEvent(\"change\"))\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-date-picker\": DatePicker\n }\n}\n","export function cleanValue(inputEl: HTMLInputElement, regex: RegExp): string {\n const { value } = inputEl\n const cursor = inputEl.selectionStart as number\n\n const beforeCursor = value.slice(0, cursor)\n const afterCursor = value.slice(cursor, value.length)\n\n const filteredBeforeCursor = beforeCursor.replace(regex, \"\")\n const filterAfterCursor = afterCursor.replace(regex, \"\")\n\n const newValue = filteredBeforeCursor + filterAfterCursor\n const newCursor = filteredBeforeCursor.length\n\n inputEl.value = newValue\n inputEl.selectionStart = newCursor\n inputEl.selectionEnd = newCursor\n\n return newValue\n}\n"],"names":["Icon","registerIcon","calendarIcon","closeIcon","DISALLOWED_CHARACTERS","isDateDisabled","DatePicker","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","calendar","toggleButton","SwipeController","target","dialog","matchesGesture","isDownwardsSwipe","onSwipeEnd","localization","isoAdapter","setValue","date","preventDefault","show","event","stopPropagation","dispatchEvent","NordEvent","inputEl","regex","value","cursor","selectionStart","beforeCursor","slice","afterCursor","length","filteredBeforeCursor","replace","newValue","newCursor","selectionEnd","cleanValue","parsed","dateAdapter","parse","createDate","valueAsDate","parseISODate","printISODate","valueAsNumber","getTime","NaN","Date","updateComplete","then","focus","moveFocusToButton","willUpdate","_changedProperties","has","createDateFormatters","dateFormatLong","Intl","DateTimeFormat","locale","day","month","year","render","formattedDate","format","html","renderLabel","name","ifDefined","placeholder","inputId","disabled","required","handleInputChange","handleFocus","handleBlur","ref","focusableRef","error","undefined","getDescribedBy","toggleOpen","buttonLabel","selectedDateMessage","nothing","renderError","classMap","direction","focusLast","calendarHeading","closeLabel","min","max","firstDayOfWeek","handleDaySelect","focusFirst","closeButton","componentStyle","formFieldStyle","textFieldStyle","style","__decorate","query","state","property","attribute","Number","customElement"],"mappings":"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"}

package/lib/Input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,w as s,$ as r,s as n}from"./lit-element-9646ab7e.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-2a4c6dbc.js";import{n as l}from"./ref-eb5cfa10.js";import{o as d}from"./unsafe-html-4da54dd2.js";import{F as p}from"./FocusableMixin-98e13999.js";import{F as c}from"./FormAssociatedMixin-bfbbe389.js";import{I as m}from"./InputMixin-94d15730.js";import{s as h}from"./Component-6762b5eb.js";import{s as b}from"./FormField-b1c18e6e.js";import{s as u}from"./TextField-b4155167.js";import{S as f}from"./SlotController-5bfc47d1.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const v=i`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}slot[name=before]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;color:var(--n-color-icon)}slot[name=before]:not([hidden])+.n-input{padding-inline-start:var(--n-space-xl)}::slotted(svg),svg{block-size:var(--n-size-icon-s);inline-size:var(--n-size-icon-s)}`;let y=class extends(c(m(p(n)))){constructor(){super(...arguments),this.beforeSlot=new f(this,"before"),this.type="text"}render(){var e;const t="search"===this.type||this.beforeSlot.hasContent,i="number"===this.type,n="search"===this.type?d('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):s;return r`${this.renderLabel()}<div class="n-input-container"><slot name="before" ?hidden="${!t}">${n}</slot><input ${l(this.focusableRef)} id="${this.inputId}" class="n-input" type="${i?"text":this.type}" inputmode="${a(i?"numeric":void 0)}" pattern="${a(i?"[0-9]*":void 0)}" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInput}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false"></div>${this.renderError()}`}handleKeydown(e){var t;"Enter"===e.key&&this.form&&(null===(t=this.form.querySelector('button[type="submit"]'))||void 0===t||t.click())}};y.styles=[h,b,u,v],e([o()],y.prototype,"type",void 0),y=e([t("nord-input")],y);var $=y;export{$ as default};
+import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,w as s,$ as r,s as n}from"./lit-element-9646ab7e.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-2a4c6dbc.js";import{n as d}from"./ref-eb5cfa10.js";import{o as l}from"./unsafe-html-4da54dd2.js";import{F as p}from"./FocusableMixin-98e13999.js";import{F as c}from"./FormAssociatedMixin-bfbbe389.js";import{I as m}from"./InputMixin-94d15730.js";import{s as h}from"./Component-6762b5eb.js";import{s as b}from"./FormField-b1c18e6e.js";import{s as u}from"./TextField-d799db1a.js";import{S as f}from"./SlotController-5bfc47d1.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const v=i`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}slot[name=before]{display:flex;align-items:center;position:absolute;margin-inline-start:var(--n-space-m);block-size:100%;pointer-events:none;color:var(--n-color-icon)}slot[name=before]:not([hidden])+.n-input{padding-inline-start:var(--n-space-xl)}::slotted(svg),svg{block-size:var(--n-size-icon-s);inline-size:var(--n-size-icon-s)}`;let y=class extends(c(m(p(n)))){constructor(){super(...arguments),this.beforeSlot=new f(this,"before"),this.type="text"}render(){var e;const t="search"===this.type||this.beforeSlot.hasContent,i="number"===this.type,n="search"===this.type?l('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path d="M7 59.5a52.5 52.5 0 1 0 105 0 52.5 52.5 0 1 0-105 0zM133 133 96.628 96.628" stroke-width="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>'):s;return r`${this.renderLabel()}<div class="n-input-container"><slot name="before" ?hidden="${!t}">${n}</slot><input ${d(this.focusableRef)} id="${this.inputId}" class="n-input" type="${i?"text":this.type}" inputmode="${a(i?"numeric":void 0)}" pattern="${a(i?"[0-9]*":void 0)}" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @input="${this.handleInput}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}" spellcheck="false"></div>${this.renderError()}`}handleKeydown(e){var t;"Enter"===e.key&&this.form&&(null===(t=this.form.querySelector('button[type="submit"]'))||void 0===t||t.click())}};y.styles=[h,b,u,v],e([o()],y.prototype,"type",void 0),y=e([t("nord-input")],y);var $=y;export{$ as default};
 //# sourceMappingURL=Input.js.map

package/lib/Layout.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as n,n as t}from"./query-assigned-elements-37b095c4.js";import{r as a,$ as e,s as o}from"./lit-element-9646ab7e.js";import{D as i}from"./DraftComponentMixin-9e4b7b34.js";import{s}from"./Component-6762b5eb.js";const l=a`:host{--n-nav-width:250px;background:var(--n-color-background);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{inset-block-start:0;min-block-size:100%;position:absolute}.n-layout-nav{position:fixed;transition:transform .3s ease;user-select:none;inline-size:var(--n-nav-width);z-index:2;inset-block-start:0;inset-inline-start:0;inset-block-end:0}@media (max-width:768px){.n-layout-nav{transform:translateX(-100%)}}.n-layout-main{inset-inline-end:0;z-index:1;transition:width .2s ease;inline-size:calc(100% - var(--n-nav-width))}@media (max-width:768px){.n-layout-main{inline-size:100%}}main{padding:var(--n-space-l)}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let r=class extends(i(o)){render(){return e`<div class="n-layout"><div class="n-layout-nav"><slot name="nav"></slot></div><div class="n-layout-main"><slot name="header"></slot><main><slot></slot></main></div></div>`}};r.styles=[s,l],r=n([t("nord-layout")],r);var d=r;export{d as default};
+import{_ as n,n as t}from"./query-assigned-elements-37b095c4.js";import{r as a,$ as e,s as o}from"./lit-element-9646ab7e.js";import{D as i}from"./DraftComponentMixin-9e4b7b34.js";import{s}from"./Component-6762b5eb.js";const r=a`:host{--n-nav-width:250px;background:var(--n-color-background);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-layout-main,.n-layout-nav{background:var(--n-color-background);inset-block-start:0;min-block-size:100%;position:absolute}.n-layout-nav{position:fixed;transition:transform .3s ease;user-select:none;inline-size:var(--n-nav-width);z-index:2;inset-block-start:0;inset-inline-start:0;inset-block-end:0}@media (max-width:768px){.n-layout-nav{transform:translateX(-100%)}}.n-layout-main{inset-inline-end:0;z-index:1;transition:width .2s ease;inline-size:calc(100% - var(--n-nav-width))}@media (max-width:768px){.n-layout-main{inline-size:100%}}main{padding:var(--n-space-l)}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}`;let l=class extends(i(o)){render(){return e`<div class="n-layout"><div class="n-layout-nav"><slot name="nav"></slot></div><div class="n-layout-main"><slot name="header"></slot><main><slot></slot></main></div></div>`}};l.styles=[s,r],l=n([t("nord-layout")],l);var d=l;export{d as default};
 //# sourceMappingURL=Layout.js.map

package/lib/Layout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\n\n/*\n Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n \n @status draft\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot header - Used to place content inside the header section.\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends DraftComponentMixin(LitElement) {\n static styles = [componentStyle, style]\n\n render() {\n return html`\n <div class=\"n-layout\">\n <div class=\"n-layout-nav\">\n <slot name=\"nav\"></slot>\n </div>\n <div class=\"n-layout-main\">\n <slot name=\"header\"></slot>\n <main>\n <slot></slot>\n </main>\n </div>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-layout\": Layout\n }\n}\n"],"names":["Layout","DraftComponentMixin","LitElement","render","html","componentStyle","style","customElement"],"mappings":"~~i+BAkBA~~,IAAqBA,EAArB,cAAoCC,EAAoBC,IAGtDC,SACE,OAAOC,CAAI,+KAHNJ,SAAS,CAACK,EAAgBC,GADdN,KADpBO,EAAc,gBACMP,SAAAA"}
1	+ {"version":3,"file":"Layout.js","sources":["../src/layout/Layout.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Layout.css\"\n\n/*\n Layout component is used to create the main layout of an app. Layout\n * currently comes with one main configuration: two-column.\n \n @status draft\n * @category structure\n * @slot - The default main section content.\n * @slot nav - Used to place content inside the navigation sidebar.\n * @slot header - Used to place content inside the header section.\n */\n@customElement(\"nord-layout\")\nexport default class Layout extends DraftComponentMixin(LitElement) {\n static styles = [componentStyle, style]\n\n render() {\n return html`\n <div class=\"n-layout\">\n <div class=\"n-layout-nav\">\n <slot name=\"nav\"></slot>\n </div>\n <div class=\"n-layout-main\">\n <slot name=\"header\"></slot>\n <main>\n <slot></slot>\n </main>\n </div>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-layout\": Layout\n }\n}\n"],"names":["Layout","DraftComponentMixin","LitElement","render","html","componentStyle","style","customElement"],"mappings":"sgCAkBA,IAAqBA,EAArB,cAAoCC,EAAoBC,IAGtDC,SACE,OAAOC,CAAI,+KAHNJ,SAAS,CAACK,EAAgBC,GADdN,KADpBO,EAAc,gBACMP,SAAAA"}

package/lib/NavItem.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e,n}from"./query-assigned-elements-37b095c4.js";import{r as t,$ as o,w as r,s as i}from"./lit-element-9646ab7e.js";import{e as a}from"./property-03f59dce.js";import{o as s}from"./class-map-61e9e8c1.js";import{l as c}from"./if-defined-2a4c6dbc.js";import{n as l}from"./ref-eb5cfa10.js";import{D as d}from"./DirectionController-82794ee9.js";import{S as v}from"./SlotController-5bfc47d1.js";import{N as p}from"./events-731d0007.js";import{D as h}from"./DraftComponentMixin-9e4b7b34.js";import{F as m}from"./FocusableMixin-98e13999.js";import"./directive-de55b00a.js";import"./directive-helpers-e7b6bf4b.js";const f=t`:host{all:unset;display:block;font-size:var(--n-font-size-m);font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.n-nav-item{display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--n-nav-item-box-shadow,none)}.n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 2px var(--n-color-primary);outline:0;position:relative;z-index:var(--n-index-masked)}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([active]) .n-nav-item{--n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-primary);color:var(--n-color-text-inverse);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-primary)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-highlight);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight-active);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;margin-inline-start:var(--n-space-s);font-size:var(--n-font-size-xs);display:inline-block}`;let g=class extends(m(h(i))){constructor(){super(...arguments),this.subnavSlot=new v(this,"subnav"),this.direction=new d(this),this.active=!1,this.open=!1}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=o`${this.icon?o`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:r}<div class="n-content"><slot></slot></div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),o`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return o`<a class="n-nav-item" ${l(this.focusableRef)} aria-current="${c(this.active?"page":void 0)}" href="${this.href||""}">${e} ${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:r}</a>`}renderToggle(e){return o`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${l(this.focusableRef)}>${e}<nord-icon size="xs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return o`<button class="n-nav-item" ${l(this.focusableRef)}>${e} ${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:r}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};g.styles=f,e([a({type:Boolean,reflect:!0})],g.prototype,"active",void 0),e([a()],g.prototype,"icon",void 0),e([a()],g.prototype,"href",void 0),e([a()],g.prototype,"badge",void 0),e([a({type:Boolean})],g.prototype,"open",void 0),g=e([n("nord-nav-item")],g);var b=g;export{b as default};
+import{_ as e,n}from"./query-assigned-elements-37b095c4.js";import{r as t,$ as o,w as a,s as r}from"./lit-element-9646ab7e.js";import{e as i}from"./property-03f59dce.js";import{o as s}from"./class-map-61e9e8c1.js";import{l as c}from"./if-defined-2a4c6dbc.js";import{n as l}from"./ref-eb5cfa10.js";import{D as d}from"./DirectionController-82794ee9.js";import{S as v}from"./SlotController-5bfc47d1.js";import{N as p}from"./events-731d0007.js";import{D as h}from"./DraftComponentMixin-9e4b7b34.js";import{F as f}from"./FocusableMixin-98e13999.js";import"./directive-de55b00a.js";import"./directive-helpers-e7b6bf4b.js";const m=t`:host{all:unset;display:block;font-size:var(--n-font-size-m);font-feature-settings:var(--n-font-features);font-family:var(--n-font-family)}*,::after,::before{box-sizing:border-box}.n-nav-item{display:flex;align-items:center;font-family:inherit;font-size:inherit;line-height:var(--n-line-height-tight);-webkit-appearance:none;appearance:none;color:var(--n-color-text-weak);padding:var(--n-space-s);min-block-size:28px;margin-block-end:1px;border-radius:var(--n-border-radius-s);text-decoration:none;inline-size:100%;background:0 0;cursor:pointer;border:0;text-align:start;box-shadow:var(--n-nav-item-box-shadow,none)}.n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}.n-nav-item:hover{background:var(--n-color-nav-hover);color:var(--n-color-text)}.n-nav-item:active{opacity:.7}.n-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([active]) .n-nav-item{--n-nav-item-box-shadow:var(--n-box-shadow);background:var(--n-color-accent);color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active)}:host([active]) .n-nav-item:focus{--n-nav-item-box-shadow:0 0 0 1px var(--n-color-nav-surface),0 0 0 3px var(--n-color-accent)}:host([active]) nord-icon{color:currentColor}.n-toggle-icon{color:var(--n-color-icon);margin-inline-end:var(--n-space-s);margin-inline-start:var(--n-space-s)}.n-toggle-icon.n-rtl{transform:rotate(-180deg)}[aria-expanded=true] .n-toggle-icon{transform:rotate(90deg)}.n-nav-icon{margin-inline-end:calc(var(--n-space-s) * 1.4);flex-shrink:0}::slotted(nord-nav-group){margin-inline-start:calc(var(--n-space-m) + calc(var(--n-space-s) * 1.3))}.n-nav-badge{border-radius:var(--n-border-radius-pill);background:var(--n-color-status-highlight);color:rgba(0,0,0,.8);font-weight:var(--n-font-weight-active);font-feature-settings:var(--n-font-features-reduced);padding:4px 6px;text-align:center;min-inline-size:20px;margin-inline-start:var(--n-space-s);font-size:var(--n-font-size-xs);display:inline-block}`;let g=class extends(f(h(r))){constructor(){super(...arguments),this.subnavSlot=new v(this,"subnav"),this.direction=new d(this),this.active=!1,this.open=!1}connectedCallback(){super.connectedCallback(),this.querySelector("nord-nav-item[active]")&&(this.open=!0)}render(){const e=o`${this.icon?o`<nord-icon class="n-nav-icon" name="${this.icon}" size="m"></nord-icon>`:a}<div class="n-content"><slot></slot></div>`;let n;return n=this.subnavSlot.hasContent?this.renderToggle(e):this.href?this.renderLink(e):this.renderButton(e),o`<div role="listitem">${n}<slot name="${this.subnavSlot.slotName}" ?hidden="${!this.open}"></slot></div>`}renderLink(e){return o`<a class="n-nav-item" ${l(this.focusableRef)} aria-current="${c(this.active?"page":void 0)}" href="${this.href||""}">${e} ${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:a}</a>`}renderToggle(e){return o`<button class="n-nav-item" @click="${this.toggleOpen}" aria-expanded="${this.open?"true":"false"}" ${l(this.focusableRef)}>${e}<nord-icon size="xs" class="${s({"n-toggle-icon":!0,"n-rtl":this.direction.isRTL})}" name="arrow-expand-right-small"></nord-icon></button>`}renderButton(e){return o`<button class="n-nav-item" ${l(this.focusableRef)}>${e} ${this.badge?o`<span class="n-nav-badge">${this.badge}</span>`:a}</button>`}toggleOpen(){this.open=!this.open,this.dispatchEvent(new p("toggle"))}};g.styles=m,e([i({type:Boolean,reflect:!0})],g.prototype,"active",void 0),e([i()],g.prototype,"icon",void 0),e([i()],g.prototype,"href",void 0),e([i()],g.prototype,"badge",void 0),e([i({type:Boolean})],g.prototype,"open",void 0),g=e([n("nord-nav-item")],g);var b=g;export{b as default};
 //# sourceMappingURL=NavItem.js.map

package/lib/NavItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\n\n/*\n Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n \n @status draft\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n /\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(DraftComponentMixin(LitElement)) {\n static styles = style\n\n private subnavSlot = new SlotController(this, \"subnav\")\n private direction = new DirectionController(this)\n\n /\n Used for indicating the current page. This gives a prominent background to the nav item,\n * and marks the item as the current page for assistive technology.\n /\n @property({ type: Boolean, reflect: true }) active = false\n\n /\n The name of an icon from Nordicons to display for the nav item.\n /\n @property() icon?: string\n\n /\n The url the nav item should link to.\n * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n /\n @property() href?: string\n\n /\n Allows you to add a notification badge with a number next to the nav item.\n /\n @property() badge?: string\n\n /\n When the nav items contains a subnav, controls whether the section is expanded or not.\n * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n */\n @property({ type: Boolean }) open = false\n\n connectedCallback() {\n super.connectedCallback()\n\n // in cases where there is nested nav, and one of the items is active\n // we should auto-open the nav item for developer convenience\n if (this.querySelector(`nord-nav-item[active]`)) {\n this.open = true\n }\n }\n\n render() {\n const innards = html`\n ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n <div class=\"n-content\">\n <slot></slot>\n </div>\n `\n let element: TemplateResult\n\n if (this.subnavSlot.hasContent) {\n element = this.renderToggle(innards)\n } else if (this.href) {\n element = this.renderLink(innards)\n } else {\n element = this.renderButton(innards)\n }\n\n return html`\n <div role=\"listitem\">\n ${element}\n <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n </div>\n `\n }\n\n private renderLink(innards: TemplateResult) {\n return html`\n <a\n class=\"n-nav-item\"\n ${ref(this.focusableRef)}\n aria-current=${ifDefined(this.active ? \"page\" : undefined)}\n href=${this.href \|\| \"\"}\n >\n ${innards} ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n </a>\n `\n }\n\n private renderToggle(innards: TemplateResult) {\n return html`\n <button\n class=\"n-nav-item\"\n @click=${this.toggleOpen}\n aria-expanded=${this.open ? \"true\" : \"false\"}\n ${ref(this.focusableRef)}\n >\n ${innards}\n\n <nord-icon\n size=\"xs\"\n class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n name=\"arrow-expand-right-small\"\n ></nord-icon>\n </button>\n `\n }\n\n private renderButton(innards: TemplateResult) {\n return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>\n ${innards} ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n </button>`\n }\n\n private toggleOpen() {\n this.open = !this.open\n this.dispatchEvent(new NordEvent(\"toggle\"))\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-nav-item\": NavItem\n }\n}\n"],"names":["NavItem","FocusableMixin","DraftComponentMixin","LitElement","constructor","this","SlotController","DirectionController","connectedCallback","super","querySelector","open","render","innards","html","icon","nothing","element","subnavSlot","hasContent","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","ifDefined","active","undefined","badge","toggleOpen","classMap","direction","isRTL","dispatchEvent","NordEvent","style","__decorate","property","type","Boolean","reflect","customElement"],"mappings":"~~0mFAwBA~~,IAAqBA,EAArB,cAAqCC,EAAeC,EAAoBC,KAAxEC,kCAGUC,gBAAa,IAAIC,EAAeD,KAAM,UACtCA,eAAY,IAAIE,EAAoBF,MAMAA,aAAS,EAsBxBA,WAAO,EAEpCG,oBACEC,MAAMD,oBAIFH,KAAKK,cAAc,2BACrBL,KAAKM,MAAO,GAIhBC,SACE,MAAMC,EAAUC,CAAI,GAChBT,KAAKU,KAAOD,CAAI,uCAAsCT,KAAKU,8BAA+BC,8CAK9F,IAAIC,EAUJ,OAPEA,EADEZ,KAAKa,WAAWC,WACRd,KAAKe,aAAaP,GACnBR,KAAKgB,KACJhB,KAAKiB,WAAWT,GAEhBR,KAAKkB,aAAaV,GAGvBC,CAAI,wBAELG,gBACWZ,KAAKa,WAAWM,uBAAqBnB,KAAKM,sBAKrDW,WAAWT,GACjB,OAAOC,CAAI,yBAGLW,EAAIpB,KAAKqB,+BACIC,EAAUtB,KAAKuB,OAAS,YAASC,aACzCxB,KAAKgB,MAAQ,OAElBR,KAAWR,KAAKyB,MAAQhB,CAAI,6BAA6BT,KAAKyB,eAAiBd,QAK/EI,aAAaP,GACnB,OAAOC,CAAI,sCAGET,KAAK0B,8BACE1B,KAAKM,KAAO,OAAS,YACnCc,EAAIpB,KAAKqB,iBAETb,gCAIQmB,EAAS,CAAE,iBAAiB,EAAM,QAAS3B,KAAK4B,UAAUC,iEAOlEX,aAAaV,GACnB,OAAOC,CAAI,8BAA8BW,EAAIpB,KAAKqB,iBAC9Cb,KAAWR,KAAKyB,MAAQhB,CAAI,6BAA6BT,KAAKyB,eAAiBd,aAI7Ee,aACN1B,KAAKM,MAAQN,KAAKM,KAClBN,KAAK8B,cAAc,IAAIC,EAAU,aA5G5BpC,SAASqC,EAS4BC,GAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,kCAKxBJ,GAAXC,gCAMWD,GAAXC,gCAKWD,GAAXC,iCAM4BD,GAA5BC,EAAS,CAAEC,KAAMC,sCAhCCzC,KADpB2C,EAAc,kBACM3C,SAAAA"}
1	+ {"version":3,"file":"NavItem.js","sources":["../src/nav-item/NavItem.ts"],"sourcesContent":["import { LitElement, html, nothing, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { NordEvent } from \"../common/events.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport style from \"./NavItem.css\"\n\n/*\n Navigation item populates sidebar navigation with links.\n * Every item should be placed inside a navigation group.\n \n @status draft\n * @category navigation\n * @slot - The default slot used for the nav item's text.\n * @slot subnav - Used for nesting navigation. When used the nav-item becomes a button to collapse the subnav, rather than a link.\n * @fires toggle - Dispatched whenever a nav item's state changes between open and closed.\n /\n@customElement(\"nord-nav-item\")\nexport default class NavItem extends FocusableMixin(DraftComponentMixin(LitElement)) {\n static styles = style\n\n private subnavSlot = new SlotController(this, \"subnav\")\n private direction = new DirectionController(this)\n\n /\n Used for indicating the current page. This gives a prominent background to the nav item,\n * and marks the item as the current page for assistive technology.\n /\n @property({ type: Boolean, reflect: true }) active = false\n\n /\n The name of an icon from Nordicons to display for the nav item.\n /\n @property() icon?: string\n\n /\n The url the nav item should link to.\n * Note: this is not used if you have nested navigation using the \"subnav\" slot.\n /\n @property() href?: string\n\n /\n Allows you to add a notification badge with a number next to the nav item.\n /\n @property() badge?: string\n\n /\n When the nav items contains a subnav, controls whether the section is expanded or not.\n * Note: this is only used if you have nested navigation using the \"subnav\" slot.\n */\n @property({ type: Boolean }) open = false\n\n connectedCallback() {\n super.connectedCallback()\n\n // in cases where there is nested nav, and one of the items is active\n // we should auto-open the nav item for developer convenience\n if (this.querySelector(`nord-nav-item[active]`)) {\n this.open = true\n }\n }\n\n render() {\n const innards = html`\n ${this.icon ? html`<nord-icon class=\"n-nav-icon\" name=${this.icon} size=\"m\"></nord-icon>` : nothing}\n <div class=\"n-content\">\n <slot></slot>\n </div>\n `\n let element: TemplateResult\n\n if (this.subnavSlot.hasContent) {\n element = this.renderToggle(innards)\n } else if (this.href) {\n element = this.renderLink(innards)\n } else {\n element = this.renderButton(innards)\n }\n\n return html`\n <div role=\"listitem\">\n ${element}\n <slot name=${this.subnavSlot.slotName} ?hidden=${!this.open}></slot>\n </div>\n `\n }\n\n private renderLink(innards: TemplateResult) {\n return html`\n <a\n class=\"n-nav-item\"\n ${ref(this.focusableRef)}\n aria-current=${ifDefined(this.active ? \"page\" : undefined)}\n href=${this.href \|\| \"\"}\n >\n ${innards} ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n </a>\n `\n }\n\n private renderToggle(innards: TemplateResult) {\n return html`\n <button\n class=\"n-nav-item\"\n @click=${this.toggleOpen}\n aria-expanded=${this.open ? \"true\" : \"false\"}\n ${ref(this.focusableRef)}\n >\n ${innards}\n\n <nord-icon\n size=\"xs\"\n class=${classMap({ \"n-toggle-icon\": true, \"n-rtl\": this.direction.isRTL })}\n name=\"arrow-expand-right-small\"\n ></nord-icon>\n </button>\n `\n }\n\n private renderButton(innards: TemplateResult) {\n return html`<button class=\"n-nav-item\" ${ref(this.focusableRef)}>\n ${innards} ${this.badge ? html`<span class=\"n-nav-badge\">${this.badge}</span>` : nothing}\n </button>`\n }\n\n private toggleOpen() {\n this.open = !this.open\n this.dispatchEvent(new NordEvent(\"toggle\"))\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-nav-item\": NavItem\n }\n}\n"],"names":["NavItem","FocusableMixin","DraftComponentMixin","LitElement","constructor","this","SlotController","DirectionController","connectedCallback","super","querySelector","open","render","innards","html","icon","nothing","element","subnavSlot","hasContent","renderToggle","href","renderLink","renderButton","slotName","ref","focusableRef","ifDefined","active","undefined","badge","toggleOpen","classMap","direction","isRTL","dispatchEvent","NordEvent","style","__decorate","property","type","Boolean","reflect","customElement"],"mappings":"ymFAwBA,IAAqBA,EAArB,cAAqCC,EAAeC,EAAoBC,KAAxEC,kCAGUC,gBAAa,IAAIC,EAAeD,KAAM,UACtCA,eAAY,IAAIE,EAAoBF,MAMAA,aAAS,EAsBxBA,WAAO,EAEpCG,oBACEC,MAAMD,oBAIFH,KAAKK,cAAc,2BACrBL,KAAKM,MAAO,GAIhBC,SACE,MAAMC,EAAUC,CAAI,GAChBT,KAAKU,KAAOD,CAAI,uCAAsCT,KAAKU,8BAA+BC,8CAK9F,IAAIC,EAUJ,OAPEA,EADEZ,KAAKa,WAAWC,WACRd,KAAKe,aAAaP,GACnBR,KAAKgB,KACJhB,KAAKiB,WAAWT,GAEhBR,KAAKkB,aAAaV,GAGvBC,CAAI,wBAELG,gBACWZ,KAAKa,WAAWM,uBAAqBnB,KAAKM,sBAKrDW,WAAWT,GACjB,OAAOC,CAAI,yBAGLW,EAAIpB,KAAKqB,+BACIC,EAAUtB,KAAKuB,OAAS,YAASC,aACzCxB,KAAKgB,MAAQ,OAElBR,KAAWR,KAAKyB,MAAQhB,CAAI,6BAA6BT,KAAKyB,eAAiBd,QAK/EI,aAAaP,GACnB,OAAOC,CAAI,sCAGET,KAAK0B,8BACE1B,KAAKM,KAAO,OAAS,YACnCc,EAAIpB,KAAKqB,iBAETb,gCAIQmB,EAAS,CAAE,iBAAiB,EAAM,QAAS3B,KAAK4B,UAAUC,iEAOlEX,aAAaV,GACnB,OAAOC,CAAI,8BAA8BW,EAAIpB,KAAKqB,iBAC9Cb,KAAWR,KAAKyB,MAAQhB,CAAI,6BAA6BT,KAAKyB,eAAiBd,aAI7Ee,aACN1B,KAAKM,MAAQN,KAAKM,KAClBN,KAAK8B,cAAc,IAAIC,EAAU,aA5G5BpC,SAASqC,EAS4BC,GAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,kCAKxBJ,GAAXC,gCAMWD,GAAXC,gCAKWD,GAAXC,iCAM4BD,GAA5BC,EAAS,CAAEC,KAAMC,sCAhCCzC,KADpB2C,EAAc,kBACM3C,SAAAA"}

package/lib/Radio.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{w as i,r as o,$ as n,s as r}from"./lit-element-9646ab7e.js";import{e as s}from"./property-03f59dce.js";import{l as a}from"./if-defined-2a4c6dbc.js";import{n as l}from"./ref-eb5cfa10.js";import{L as d}from"./LightDomController-f56fa1a4.js";import{S as c}from"./SlotController-5bfc47d1.js";import{F as h}from"./FocusableMixin-98e13999.js";import{F as p}from"./FormAssociatedMixin-bfbbe389.js";import{I as b}from"./InputMixin-94d15730.js";import{s as u}from"./Component-6762b5eb.js";import{s as m}from"./FormField-b1c18e6e.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";import"./events-731d0007.js";import"./VisuallyHidden.js";class v extends c{constructor(e,t){super(e,t.slotName),this.options=t,this.onChange=()=>{this.syncLightDom()},this.options=t,this.renderHook=document.createComment(this.slotName),this.lightDom=new d(e,{render:()=>this.hasContent?i:this.options.render(),renderOptions:{renderBefore:this.renderHook}})}hostConnected(){super.hostConnected(),this.host.appendChild(this.renderHook),this.syncLightDom()}hostDisconnected(){super.hostDisconnected(),this.renderHook.remove()}syncLightDom(){const e=this.content;e&&this.options.syncLightDom(e)}}const f=o`:host{--n-radio-size:calc(var(--n-space-m) * 1.25);display:inline-block;line-height:var(--n-line-height);font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}::slotted(input){--n-radio-accent-color:var(--n-color-primary);-moz-appearance:none;-webkit-appearance:none;appearance:none;margin:0!important;border:1px solid var(--n-radio-border-color,var(--n-color-border-hover));border-radius:var(--n-border-radius-circle);display:block;inline-size:var(--n-radio-size);block-size:var(--n-radio-size);cursor:pointer}::slotted(input:checked){--n-radio-border-color:var(--n-color-primary);background:var(--n-radio-accent-color)}::slotted(input[aria-invalid]){--n-radio-accent-color:var(--n-color-status-danger);--n-radio-border-color:var(--n-radio-accent-color)}::slotted(input:active){opacity:.8}::slotted(input:focus-visible){outline:0!important}::slotted(input:focus){outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-primary)}:host([disabled]) ::slotted(input){--n-radio-accent-color:var(--n-color-border-strong);--n-radio-border-color:var(--n-radio-accent-color);background:var(--n-radio-accent-color);cursor:default;opacity:1}:host([disabled]) ::slotted(label){color:var(--n-color-text-weaker);cursor:default}.n-dot{--n-radio-dot-size:var(--n-space-s);--n-radio-dot-inset:calc((var(--n-radio-size) - var(--n-radio-dot-size)) / 2);position:absolute;border-radius:var(--n-border-radius-circle);inline-size:var(--n-radio-dot-size);block-size:var(--n-radio-dot-size);background-color:var(--n-color-text-inverse);inset-inline-start:var(--n-radio-dot-inset);inset-block-start:var(--n-radio-dot-inset);z-index:var(--n-index-default);pointer-events:none}.n-label-container{padding-block-end:0}::slotted(label){-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l);padding-inline-start:var(--n-space-s);cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}`;let g=0;const k=e=>`nord-radio-${e}-${g++}`;let y=class extends(p(b(h(r)))){constructor(){super(...arguments),this.inputId=k("input"),this.hintId=k("hint"),this.errorId=k("error"),this.hintSlot=new v(this,{slotName:"hint",render:()=>this.hint?n`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:i,syncLightDom:e=>{e.id=this.hintId}}),this.labelSlot=new v(this,{slotName:"label",render:()=>this.label?n`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:i,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in radio\'s "label" slot'):e.htmlFor=this.inputId}}),this.errorSlot=new v(this,{slotName:"error",render:()=>this.error?n`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:i,syncLightDom:e=>{e.id=this.hintId}}),this.inputSlot=new d(this,{render:()=>n`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${l(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}">`}),this.checked=!1,this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}get formValue(){}willUpdate(e){if(e.has("checked")){!e.get("checked")&&this.checked&&this.uncheckSiblings()}}render(){return n`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?n`<div class="n-dot"></div>`:i}</div><div class="n-expand"><div class="n-label-container">${e=this.hideLabel,t=()=>n`<slot name="label"></slot><slot name="label-internal"></slot>`,o=e=>n`<nord-visually-hidden>${e}</nord-visually-hidden>`,e?o(t()):t()}<div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint"></slot><slot name="hint-internal"></slot></div></div><div class="n-caption n-error" role="alert" ?hidden="${!this.hasError}"><slot name="error"></slot><slot name="error-internal"></slot></div></div></div>`;var e,t,o}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-radio[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){e.stopPropagation();const t=e.target;this.checked=t.checked,super.handleChange(e)}};y.styles=[u,m,f],e([s({type:Boolean,reflect:!0})],y.prototype,"checked",void 0),y=e([t("nord-radio")],y);var $=y;export{$ as default};
+import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{w as i,r as n,$ as o,s as r}from"./lit-element-9646ab7e.js";import{e as s}from"./property-03f59dce.js";import{l as a}from"./if-defined-2a4c6dbc.js";import{n as l}from"./ref-eb5cfa10.js";import{L as d}from"./LightDomController-f56fa1a4.js";import{S as c}from"./SlotController-5bfc47d1.js";import{F as h}from"./FocusableMixin-98e13999.js";import{F as p}from"./FormAssociatedMixin-bfbbe389.js";import{I as m}from"./InputMixin-94d15730.js";import{s as b}from"./Component-6762b5eb.js";import{s as u}from"./FormField-b1c18e6e.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";import"./events-731d0007.js";import"./VisuallyHidden.js";class v extends c{constructor(e,t){super(e,t.slotName),this.options=t,this.onChange=()=>{this.syncLightDom()},this.options=t,this.renderHook=document.createComment(this.slotName),this.lightDom=new d(e,{render:()=>this.hasContent?i:this.options.render(),renderOptions:{renderBefore:this.renderHook}})}hostConnected(){super.hostConnected(),this.host.appendChild(this.renderHook),this.syncLightDom()}hostDisconnected(){super.hostDisconnected(),this.renderHook.remove()}syncLightDom(){const e=this.content;e&&this.options.syncLightDom(e)}}const f=n`:host{--n-radio-size:calc(var(--n-space-m) * 1.25);display:inline-block;line-height:var(--n-line-height);font-size:var(--n-font-size-m)}.n-flex{display:flex}.n-expand{flex:1}.n-input-container{position:relative}::slotted(input){--n-radio-accent-color:var(--n-color-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;margin:0!important;border:1px solid var(--n-radio-border-color,var(--n-color-border-hover))!important;border-radius:var(--n-border-radius-circle)!important;display:block!important;inline-size:var(--n-radio-size)!important;block-size:var(--n-radio-size)!important;cursor:pointer}::slotted(input:checked){--n-radio-border-color:var(--n-color-accent);background:var(--n-radio-accent-color)}::slotted(input[aria-invalid]){--n-radio-accent-color:var(--n-color-status-danger);--n-radio-border-color:var(--n-radio-accent-color)}::slotted(input:active){opacity:.8}::slotted(input:focus-visible){outline:0!important}::slotted(input:focus){outline:0!important;box-shadow:0 0 0 1px var(--n-color-surface),0 0 0 3px var(--n-color-accent)}:host([disabled]) ::slotted(input){--n-radio-accent-color:var(--n-color-border-strong);--n-radio-border-color:var(--n-radio-accent-color);background:var(--n-radio-accent-color);cursor:default;opacity:1}:host([disabled]) ::slotted(label){color:var(--n-color-text-weaker);cursor:default}.n-dot{--n-radio-dot-size:var(--n-space-s);--n-radio-dot-inset:calc((var(--n-radio-size) - var(--n-radio-dot-size)) / 2);position:absolute;border-radius:var(--n-border-radius-circle);inline-size:var(--n-radio-dot-size);block-size:var(--n-radio-dot-size);background-color:var(--n-color-text-on-accent);inset-inline-start:var(--n-radio-dot-inset);inset-block-start:var(--n-radio-dot-inset);z-index:var(--n-index-default);pointer-events:none}.n-label-container{padding-block-end:0}::slotted(label){-webkit-user-select:none;user-select:none;font-weight:var(--n-font-weight)!important;line-height:var(--n-line-height-l)!important;padding-inline-start:var(--n-space-s)!important;cursor:pointer}.n-hint{padding-inline-start:var(--n-space-s)}.n-error{margin-block-start:calc(var(--n-space-s)/ 2);padding-inline-start:var(--n-space-s)}`;let g=0;const k=e=>`nord-radio-${e}-${g++}`;let $=class extends(p(m(h(r)))){constructor(){super(...arguments),this.inputId=k("input"),this.hintId=k("hint"),this.errorId=k("error"),this.hintSlot=new v(this,{slotName:"hint",render:()=>this.hint?o`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:i,syncLightDom:e=>{e.id=this.hintId}}),this.labelSlot=new v(this,{slotName:"label",render:()=>this.label?o`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:i,syncLightDom:e=>{!function(e){return"label"===e.localName}(e)?console.warn('NORD: Only <label> elements should be placed in radio\'s "label" slot'):e.htmlFor=this.inputId}}),this.errorSlot=new v(this,{slotName:"error",render:()=>this.error?o`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:i,syncLightDom:e=>{e.id=this.hintId}}),this.inputSlot=new d(this,{render:()=>o`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${l(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" name="${a(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}">`}),this.checked=!1,this.handleBlur=e=>{e.stopPropagation(),this.dispatchEvent(new Event("blur",{bubbles:!1,cancelable:!0}))},this.handleFocus=e=>{e.stopPropagation(),this.dispatchEvent(new Event("focus",{bubbles:!1,cancelable:!0}))}}get formValue(){}willUpdate(e){if(e.has("checked")){!e.get("checked")&&this.checked&&this.uncheckSiblings()}}render(){return o`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?o`<div class="n-dot"></div>`:i}</div><div class="n-expand"><div class="n-label-container">${e=this.hideLabel,t=()=>o`<slot name="label"></slot><slot name="label-internal"></slot>`,n=e=>o`<nord-visually-hidden>${e}</nord-visually-hidden>`,e?n(t()):t()}<div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint"></slot><slot name="hint-internal"></slot></div></div><div class="n-caption n-error" role="alert" ?hidden="${!this.hasError}"><slot name="error"></slot><slot name="error-internal"></slot></div></div></div>`;var e,t,n}uncheckSiblings(){this.getRootNode().querySelectorAll(`nord-radio[name="${this.name}"]`).forEach((e=>{e!==this&&(e.checked=!1)}))}handleChange(e){e.stopPropagation();const t=e.target;this.checked=t.checked,super.handleChange(e)}};$.styles=[b,u,f],e([s({type:Boolean,reflect:!0})],$.prototype,"checked",void 0),$=e([t("nord-radio")],$);var y=$;export{y as default};
 //# sourceMappingURL=Radio.js.map

package/lib/Radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.js","sources":["../src/common/controllers/LightSlotController.ts","../src/radio/Radio.ts","../src/common/directives/wrapIf.ts"],"sourcesContent":["import { nothing, ReactiveControllerHost } from \"lit\"\nimport { LightDomController } from \"./LightDomController.js\"\nimport { SlotController } from \"./SlotController.js\"\n\ntype LightSlotOptions = {\n slotName: string\n render: () => unknown\n syncLightDom: (element: Element) => void\n}\n\n/*\n Handles cases where a component needs to render to light DOM,\n * and potentially sync component properties to user-supplied content.\n /\nexport class LightSlotController extends SlotController {\n private renderHook: Comment\n private lightDom: LightDomController\n\n constructor(host: ReactiveControllerHost & HTMLElement, private options: LightSlotOptions) {\n super(host, options.slotName)\n this.options = options\n\n // we need a node to hook onto for rendering\n // without this, multiple controllers rendering to the light DOM\n // will overwrite each others' content\n this.renderHook = document.createComment(this.slotName)\n\n this.lightDom = new LightDomController(host, {\n render: () => (this.hasContent ? nothing : this.options.render()),\n renderOptions: { renderBefore: this.renderHook },\n })\n }\n\n hostConnected() {\n super.hostConnected()\n this.host.appendChild(this.renderHook)\n this.syncLightDom()\n }\n\n hostDisconnected() {\n super.hostDisconnected()\n this.renderHook.remove()\n }\n\n protected override onChange = () => {\n this.syncLightDom()\n }\n\n private syncLightDom() {\n const node = this.content\n\n if (node) {\n this.options.syncLightDom(node)\n }\n }\n}\n","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 { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { LightSlotController } from \"../common/controllers/LightSlotController.js\"\nimport { wrapIf } from \"../common/directives/wrapIf.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Radio.css\"\n\nlet id = 0\nconst createId = (suffix: string) => `nord-radio-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n return element.localName === \"label\"\n}\n\n/\n Radio buttons are graphical user interface elements that allow user to choose only one option from\n * a predefined set of mutually exclusive options.\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 input.\n * @slot error - Optional slot that holds error text for the input.\n /\n@customElement(\"nord-radio\")\nexport default class Radio extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override inputId = createId(\"input\")\n protected override hintId = createId(\"hint\")\n protected override errorId = createId(\"error\")\n\n /\n For accessibility reasons, we render some parts of the component to the light DOM.\n /\n protected override hintSlot = new LightSlotController(this, {\n slotName: \"hint\",\n render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n syncLightDom: element => {\n element.id = this.hintId\n },\n })\n\n protected override labelSlot = new LightSlotController(this, {\n slotName: \"label\",\n render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n syncLightDom: element => {\n if (!isLabel(element)) {\n // eslint-disable-next-line no-console\n console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n } else {\n element.htmlFor = this.inputId\n }\n },\n })\n\n protected override errorSlot = new LightSlotController(this, {\n slotName: \"error\",\n render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n syncLightDom: element => {\n element.id = this.hintId\n },\n })\n\n protected inputSlot = new LightDomController(this, {\n render: () =>\n html`\n <input\n slot=\"input\"\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n ${ref(this.focusableRef)}\n class=\"n-input\"\n id=${this.inputId}\n type=\"radio\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .checked=${this.checked}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n />\n `,\n })\n\n // eslint-disable-next-line class-methods-use-this\n protected override get formValue() {\n // opt out of formdata event, since radio button is in light dom\n return undefined\n }\n\n /\n Controls whether the checkbox is checked or not.\n /\n @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n willUpdate(changedProperties: Map<string \| number \| symbol, unknown>) {\n if (changedProperties.has(\"checked\")) {\n const previousChecked = changedProperties.get(\"checked\")\n\n // if this component was previous unchecked but is now checked,\n // then we need to uncheck any radios in the same group\n if (!previousChecked && this.checked) {\n this.uncheckSiblings()\n }\n }\n }\n\n render() {\n return html`\n <div class=\"n-flex\">\n <div class=\"n-input-container\" @change=${this.handleChange}>\n <slot name=\"input\"></slot>\n ${this.checked ? html`<div class=\"n-dot\"></div>` : nothing}\n </div>\n <div class=\"n-expand\">\n <div class=\"n-label-container\">\n ${wrapIf(\n this.hideLabel,\n () => html`\n <slot name=\"label\"></slot>\n <slot name=\"label-internal\"></slot>\n `,\n content => html`<nord-visually-hidden>${content}</nord-visually-hidden>`\n )}\n <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n <slot name=\"hint\"></slot>\n <slot name=\"hint-internal\"></slot>\n </div>\n </div>\n <div class=\"n-caption n-error\" role=\"alert\" ?hidden=${!this.hasError}>\n <slot name=\"error\"></slot>\n <slot name=\"error-internal\"></slot>\n </div>\n </div>\n </div>\n `\n }\n\n private uncheckSiblings() {\n const root = this.getRootNode() as Document \| ShadowRoot\n\n root.querySelectorAll<Radio>(`nord-radio[name=\"${this.name}\"]`).forEach(radio => {\n if (radio !== this) {\n radio.checked = false\n }\n })\n }\n\n protected handleChange(e: Event): void {\n e.stopPropagation()\n const target = e.target as HTMLInputElement\n\n this.checked = target.checked\n super.handleChange(e)\n }\n\n private handleBlur = (e: Event) => {\n e.stopPropagation()\n this.dispatchEvent(new Event(\"blur\", { bubbles: false, cancelable: true }))\n }\n\n private handleFocus = (e: Event) => {\n e.stopPropagation()\n this.dispatchEvent(new Event(\"focus\", { bubbles: false, cancelable: true }))\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-radio\": Radio\n }\n}\n","// some clever typing so that TS knows what happens if you pass true/false values\nexport function wrapIf<TInner, TWrapper>(\n condition: false,\n inner: () => TInner,\n wrapper: (inner: TInner) => TWrapper\n): TInner\nexport function wrapIf<TInner, TWrapper>(\n condition: true,\n inner: () => TInner,\n wrapper: (inner: TInner) => TWrapper\n): TWrapper\nexport function wrapIf<TInner, TWrapper>(\n condition: unknown,\n inner: () => TInner,\n wrapper: (inner: TInner) => TWrapper\n): TInner \| TWrapper\n\n/\n @returns if condition is truthy, return result of wrapper, passing result of inner as arg. if falsy, return result of inner\n */\nexport function wrapIf<TInner, TWrapper>(condition: any, inner: () => TInner, wrapper: (innards: TInner) => TWrapper) {\n return condition ? wrapper(inner()) : inner()\n}\n"],"names":["LightSlotController","SlotController","constructor","host","options","super","slotName","this","syncLightDom","renderHook","document","createComment","lightDom","LightDomController","render","hasContent","nothing","renderOptions","renderBefore","hostConnected","appendChild","hostDisconnected","remove","node","content","id","createId","suffix","Radio","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","hint","html","hintId","element","label","inputId","localName","isLabel","console","warn","htmlFor","error","errorId","handleBlur","handleFocus","ref","focusableRef","ifDefined","name","value","checked","disabled","required","getDescribedBy","getInvalid","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","formValue","willUpdate","changedProperties","has","get","uncheckSiblings","handleChange","condition","hideLabel","inner","wrapper","hasHint","hasError","getRootNode","querySelectorAll","forEach","radio","target","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","reflect","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"Radio.js","sources":["../src/common/controllers/LightSlotController.ts","../src/radio/Radio.ts","../src/common/directives/wrapIf.ts"],"sourcesContent":["import { nothing, ReactiveControllerHost } from \"lit\"\nimport { LightDomController } from \"./LightDomController.js\"\nimport { SlotController } from \"./SlotController.js\"\n\ntype LightSlotOptions = {\n slotName: string\n render: () => unknown\n syncLightDom: (element: Element) => void\n}\n\n/*\n Handles cases where a component needs to render to light DOM,\n * and potentially sync component properties to user-supplied content.\n /\nexport class LightSlotController extends SlotController {\n private renderHook: Comment\n private lightDom: LightDomController\n\n constructor(host: ReactiveControllerHost & HTMLElement, private options: LightSlotOptions) {\n super(host, options.slotName)\n this.options = options\n\n // we need a node to hook onto for rendering\n // without this, multiple controllers rendering to the light DOM\n // will overwrite each others' content\n this.renderHook = document.createComment(this.slotName)\n\n this.lightDom = new LightDomController(host, {\n render: () => (this.hasContent ? nothing : this.options.render()),\n renderOptions: { renderBefore: this.renderHook },\n })\n }\n\n hostConnected() {\n super.hostConnected()\n this.host.appendChild(this.renderHook)\n this.syncLightDom()\n }\n\n hostDisconnected() {\n super.hostDisconnected()\n this.renderHook.remove()\n }\n\n protected override onChange = () => {\n this.syncLightDom()\n }\n\n private syncLightDom() {\n const node = this.content\n\n if (node) {\n this.options.syncLightDom(node)\n }\n }\n}\n","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 { LightDomController } from \"../common/controllers/LightDomController.js\"\nimport { LightSlotController } from \"../common/controllers/LightSlotController.js\"\nimport { wrapIf } from \"../common/directives/wrapIf.js\"\n\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Radio.css\"\n\nlet id = 0\nconst createId = (suffix: string) => `nord-radio-${suffix}-${id++}`\n\nfunction isLabel(element: Element): element is HTMLLabelElement {\n return element.localName === \"label\"\n}\n\n/\n Radio buttons are graphical user interface elements that allow user to choose only one option from\n * a predefined set of mutually exclusive options.\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 input.\n * @slot error - Optional slot that holds error text for the input.\n /\n@customElement(\"nord-radio\")\nexport default class Radio extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override inputId = createId(\"input\")\n protected override hintId = createId(\"hint\")\n protected override errorId = createId(\"error\")\n\n /\n For accessibility reasons, we render some parts of the component to the light DOM.\n /\n protected override hintSlot = new LightSlotController(this, {\n slotName: \"hint\",\n render: () => (this.hint ? html`<div slot=\"hint-internal\" id=${this.hintId}>${this.hint}</div>` : nothing),\n syncLightDom: element => {\n element.id = this.hintId\n },\n })\n\n protected override labelSlot = new LightSlotController(this, {\n slotName: \"label\",\n render: () => (this.label ? html`<label slot=\"label-internal\" for=${this.inputId}>${this.label}</label>` : nothing),\n syncLightDom: element => {\n if (!isLabel(element)) {\n // eslint-disable-next-line no-console\n console.warn(`NORD: Only <label> elements should be placed in radio's \"label\" slot`)\n } else {\n element.htmlFor = this.inputId\n }\n },\n })\n\n protected override errorSlot = new LightSlotController(this, {\n slotName: \"error\",\n render: () => (this.error ? html`<div slot=\"error-internal\" id=${this.errorId}>${this.error}</div>` : nothing),\n syncLightDom: element => {\n element.id = this.hintId\n },\n })\n\n protected inputSlot = new LightDomController(this, {\n render: () =>\n html`\n <input\n slot=\"input\"\n @blur=${this.handleBlur}\n @focus=${this.handleFocus}\n ${ref(this.focusableRef)}\n class=\"n-input\"\n id=${this.inputId}\n type=\"radio\"\n name=${ifDefined(this.name)}\n .value=${this.value}\n .checked=${this.checked}\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n />\n `,\n })\n\n // eslint-disable-next-line class-methods-use-this\n protected override get formValue() {\n // opt out of formdata event, since radio button is in light dom\n return undefined\n }\n\n /\n Controls whether the checkbox is checked or not.\n /\n @property({ type: Boolean, reflect: true }) checked: boolean = false\n\n willUpdate(changedProperties: Map<string \| number \| symbol, unknown>) {\n if (changedProperties.has(\"checked\")) {\n const previousChecked = changedProperties.get(\"checked\")\n\n // if this component was previous unchecked but is now checked,\n // then we need to uncheck any radios in the same group\n if (!previousChecked && this.checked) {\n this.uncheckSiblings()\n }\n }\n }\n\n render() {\n return html`\n <div class=\"n-flex\">\n <div class=\"n-input-container\" @change=${this.handleChange}>\n <slot name=\"input\"></slot>\n ${this.checked ? html`<div class=\"n-dot\"></div>` : nothing}\n </div>\n <div class=\"n-expand\">\n <div class=\"n-label-container\">\n ${wrapIf(\n this.hideLabel,\n () => html`\n <slot name=\"label\"></slot>\n <slot name=\"label-internal\"></slot>\n `,\n content => html`<nord-visually-hidden>${content}</nord-visually-hidden>`\n )}\n <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n <slot name=\"hint\"></slot>\n <slot name=\"hint-internal\"></slot>\n </div>\n </div>\n <div class=\"n-caption n-error\" role=\"alert\" ?hidden=${!this.hasError}>\n <slot name=\"error\"></slot>\n <slot name=\"error-internal\"></slot>\n </div>\n </div>\n </div>\n `\n }\n\n private uncheckSiblings() {\n const root = this.getRootNode() as Document \| ShadowRoot\n\n root.querySelectorAll<Radio>(`nord-radio[name=\"${this.name}\"]`).forEach(radio => {\n if (radio !== this) {\n radio.checked = false\n }\n })\n }\n\n protected handleChange(e: Event): void {\n e.stopPropagation()\n const target = e.target as HTMLInputElement\n\n this.checked = target.checked\n super.handleChange(e)\n }\n\n private handleBlur = (e: Event) => {\n e.stopPropagation()\n this.dispatchEvent(new Event(\"blur\", { bubbles: false, cancelable: true }))\n }\n\n private handleFocus = (e: Event) => {\n e.stopPropagation()\n this.dispatchEvent(new Event(\"focus\", { bubbles: false, cancelable: true }))\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-radio\": Radio\n }\n}\n","// some clever typing so that TS knows what happens if you pass true/false values\nexport function wrapIf<TInner, TWrapper>(\n condition: false,\n inner: () => TInner,\n wrapper: (inner: TInner) => TWrapper\n): TInner\nexport function wrapIf<TInner, TWrapper>(\n condition: true,\n inner: () => TInner,\n wrapper: (inner: TInner) => TWrapper\n): TWrapper\nexport function wrapIf<TInner, TWrapper>(\n condition: unknown,\n inner: () => TInner,\n wrapper: (inner: TInner) => TWrapper\n): TInner \| TWrapper\n\n/\n @returns if condition is truthy, return result of wrapper, passing result of inner as arg. if falsy, return result of inner\n */\nexport function wrapIf<TInner, TWrapper>(condition: any, inner: () => TInner, wrapper: (innards: TInner) => TWrapper) {\n return condition ? wrapper(inner()) : inner()\n}\n"],"names":["LightSlotController","SlotController","constructor","host","options","super","slotName","this","syncLightDom","renderHook","document","createComment","lightDom","LightDomController","render","hasContent","nothing","renderOptions","renderBefore","hostConnected","appendChild","hostDisconnected","remove","node","content","id","createId","suffix","Radio","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","hint","html","hintId","element","label","inputId","localName","isLabel","console","warn","htmlFor","error","errorId","handleBlur","handleFocus","ref","focusableRef","ifDefined","name","value","checked","disabled","required","getDescribedBy","getInvalid","e","stopPropagation","dispatchEvent","Event","bubbles","cancelable","formValue","willUpdate","changedProperties","has","get","uncheckSiblings","handleChange","condition","hideLabel","inner","wrapper","hasHint","hasError","getRootNode","querySelectorAll","forEach","radio","target","componentStyle","formFieldStyle","style","__decorate","property","type","Boolean","reflect","customElement"],"mappings":"2tBAcaA,UAA4BC,EAIvCC,YAAYC,EAAoDC,GAC9DC,MAAMF,EAAMC,EAAQE,UAD0CC,aAAAH,EA0B7CG,cAAW,KAC5BA,KAAKC,gBAzBLD,KAAKH,QAAUA,EAKfG,KAAKE,WAAaC,SAASC,cAAcJ,KAAKD,UAE9CC,KAAKK,SAAW,IAAIC,EAAmBV,EAAM,CAC3CW,OAAQ,IAAOP,KAAKQ,WAAaC,EAAUT,KAAKH,QAAQU,SACxDG,cAAe,CAAEC,aAAcX,KAAKE,cAIxCU,gBACEd,MAAMc,gBACNZ,KAAKJ,KAAKiB,YAAYb,KAAKE,YAC3BF,KAAKC,eAGPa,mBACEhB,MAAMgB,mBACNd,KAAKE,WAAWa,SAOVd,eACN,MAAMe,EAAOhB,KAAKiB,QAEdD,GACFhB,KAAKH,QAAQI,aAAae,2oECpChC,IAAIE,EAAK,EACT,MAAMC,EAAYC,GAAmB,cAAcA,KAAUF,MAiB7D,IAAqBG,EAArB,cAAmCC,EAAoBC,EAAWC,EAAeC,MAAjF9B,kCAGqBK,aAAUmB,EAAS,SACnBnB,YAASmB,EAAS,QAClBnB,aAAUmB,EAAS,SAKnBnB,cAAW,IAAIP,EAAoBO,KAAM,CAC1DD,SAAU,OACVQ,OAAQ,IAAOP,KAAK0B,KAAOC,CAAI,iCAAgC3B,KAAK4B,WAAU5B,KAAK0B,aAAejB,EAClGR,aAAc4B,IACZA,EAAQX,GAAKlB,KAAK4B,UAIH5B,eAAY,IAAIP,EAAoBO,KAAM,CAC3DD,SAAU,QACVQ,OAAQ,IAAOP,KAAK8B,MAAQH,CAAI,qCAAoC3B,KAAK+B,YAAW/B,KAAK8B,gBAAkBrB,EAC3GR,aAAc4B,KApClB,SAAiBA,GACf,MAA6B,UAAtBA,EAAQG,UAoCNC,CAAQJ,GAEXK,QAAQC,KAAK,yEAEbN,EAAQO,QAAUpC,KAAK+B,WAKV/B,eAAY,IAAIP,EAAoBO,KAAM,CAC3DD,SAAU,QACVQ,OAAQ,IAAOP,KAAKqC,MAAQV,CAAI,kCAAiC3B,KAAKsC,YAAWtC,KAAKqC,cAAgB5B,EACtGR,aAAc4B,IACZA,EAAQX,GAAKlB,KAAK4B,UAIZ5B,eAAY,IAAIM,EAAmBN,KAAM,CACjDO,OAAQ,IACNoB,CAAI,8BAGQ3B,KAAKuC,uBACJvC,KAAKwC,gBACZC,EAAIzC,KAAK0C,qCAEN1C,KAAK+B,+BAEHY,EAAU3C,KAAK4C,kBACb5C,KAAK6C,oBACH7C,KAAK8C,uBACJ9C,KAAK+C,wBACL/C,KAAKgD,+BACEL,EAAU3C,KAAKiD,oCACnBN,EAAU3C,KAAKkD,oBAcMlD,cAAmB,EA+DvDA,gBAAcmD,IACpBA,EAAEC,kBACFpD,KAAKqD,cAAc,IAAIC,MAAM,OAAQ,CAAEC,SAAS,EAAOC,YAAY,MAG7DxD,iBAAemD,IACrBA,EAAEC,kBACFpD,KAAKqD,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,EAAOC,YAAY,MA9E/CC,iBAUvBC,WAAWC,GACT,GAAIA,EAAkBC,IAAI,WAAY,EACZD,EAAkBE,IAAI,YAItB7D,KAAK8C,SAC3B9C,KAAK8D,mBAKXvD,SACE,OAAOoB,CAAI,+DAEkC3B,KAAK+D,2CAE1C/D,KAAK8C,QAAUnB,CAAI,4BAA8BlB,+DCvGpBuD,ED4G3BhE,KAAKiE,UC5GsCC,ED6G3C,IAAMvC,CAAI,gEC7GsDwC,EDiHhElD,GAAWU,CAAI,yBAAyBV,2BChH7C+C,EAAYG,EAAQD,KAAWA,8CDkHalE,KAAKoE,yIAKOpE,KAAKqE,gGCxH7BL,EAAgBE,EAAqBC,EDiIpEL,kBACO9D,KAAKsE,cAEbC,iBAAwB,oBAAoBvE,KAAK4C,UAAU4B,SAAQC,IAClEA,IAAUzE,OACZyE,EAAM3B,SAAU,MAKZiB,aAAaZ,GACrBA,EAAEC,kBACF,MAAMsB,EAASvB,EAAEuB,OAEjB1E,KAAK8C,QAAU4B,EAAO5B,QACtBhD,MAAMiE,aAAaZ,KAjId9B,SAAS,CAACsD,EAAgBC,EAAgBC,GAqELC,GAA3CC,EAAS,CAAEC,KAAMC,QAASC,SAAS,mCAtEjB7D,KADpB8D,EAAc,eACM9D,SAAAA"}

package/lib/Select.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as o,$ as n,s as r}from"./lit-element-9646ab7e.js";import{l as i}from"./if-defined-2a4c6dbc.js";import{n as s}from"./ref-eb5cfa10.js";import{o as a}from"./unsafe-html-4da54dd2.js";import"./Button.js";import{I as l}from"./InputMixin-94d15730.js";import{F as d}from"./FocusableMixin-98e13999.js";import{F as c}from"./FormAssociatedMixin-bfbbe389.js";import{s as p}from"./Component-6762b5eb.js";import{s as b}from"./FormField-b1c18e6e.js";import{S as u}from"./SlotController-5bfc47d1.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./LightDomController-f56fa1a4.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const m=o`.n-select-container{position:relative;inline-size:fit-content}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:2}nord-button{--n-button-text-align:start}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-label-container:hover+.n-select-container nord-button svg,select:hover+nord-button svg{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-primary);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}::slotted(:not([slot])){display:none}[slot=after] svg{color:var(--n-color-icon);margin-inline-start:var(--n-space-m);margin-inline-end:calc(var(--n-space-s)/ -2);min-inline-size:calc(var(--n-space-l)/ 2.2);max-inline-size:calc(var(--n-space-l)/ 2.2)}::slotted([slot=before]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;let v=class extends(c(l(d(r)))){constructor(){super(...arguments),this.defaultSlot=new u(this),this.inputId="select"}get formValue(){return this.value||void 0}render(){const e=this.options,t=this.getButtonText(e);return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${s(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${i(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="before" name="before"></slot>${t}<div slot="after">${a('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></svg>')}</div></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return n`<option value="${i(e.value)}" ?disabled="${e.disabled}" ?selected="${e.value===this.value}">${e.text}</option>`}};v.styles=[p,b,m],v=e([t("nord-select")],v);var h=v;export{h as default};
+import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as o,$ as n,s as r}from"./lit-element-9646ab7e.js";import{l as i}from"./if-defined-2a4c6dbc.js";import{n as s}from"./ref-eb5cfa10.js";import{o as a}from"./unsafe-html-4da54dd2.js";import"./Button.js";import{I as l}from"./InputMixin-94d15730.js";import{F as d}from"./FocusableMixin-98e13999.js";import{F as c}from"./FormAssociatedMixin-bfbbe389.js";import{s as p}from"./Component-6762b5eb.js";import{s as b}from"./FormField-b1c18e6e.js";import{S as u}from"./SlotController-5bfc47d1.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./LightDomController-f56fa1a4.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const m=o`.n-select-container{position:relative;inline-size:fit-content}:host([expand]){inline-size:100%}:host([expand]) .n-select-container{inline-size:100%}select{-webkit-appearance:none;appearance:none;position:absolute;font-size:var(--n-font-size-m);font-family:var(--n-font-family);color:var(--n-color-text);inline-size:100%;opacity:.0001;cursor:pointer;background:0 0;border:0;block-size:var(--n-space-xl);inset-block-end:0;inset-inline-start:0;z-index:2}nord-button{--n-button-text-align:start}.n-label-container:hover+.n-select-container nord-button,select:hover+nord-button{--n-button-background-color:var(--n-color-button-hover);--n-button-border-color:var(--n-color-border-hover)}.n-label-container:hover+.n-select-container nord-button svg,select:hover+nord-button svg{color:var(--n-color-icon-hover)}select:focus+nord-button{--n-button-border-color:var(--n-color-accent);--n-button-box-shadow:0 0 0 1px var(--n-button-border-color)}:host([disabled]){cursor:auto;pointer-events:none}::slotted(:not([slot])){display:none}[slot=after] svg{color:var(--n-color-icon);margin-inline-start:var(--n-space-m);margin-inline-end:calc(var(--n-space-s)/ -2);min-inline-size:calc(var(--n-space-l)/ 2.2);max-inline-size:calc(var(--n-space-l)/ 2.2)}::slotted([slot=before]){margin-inline-start:calc(var(--n-space-s) * -1);margin-inline-end:var(--n-space-s)}select[aria-invalid=true]+nord-button{--n-button-border-color:var(--n-color-status-danger)}`;let v=class extends(c(l(d(r)))){constructor(){super(...arguments),this.defaultSlot=new u(this),this.inputId="select"}get formValue(){return this.value||void 0}render(){const e=this.options,t=this.getButtonText(e);return n`<slot></slot>${this.renderLabel()}<div class="n-select-container"><select ${s(this.focusableRef)} id="${this.inputId}" ?disabled="${this.disabled}" ?required="${this.required}" name="${i(this.name)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${i(this.getDescribedBy())}" aria-invalid="${i(this.getInvalid())}">${this.placeholder&&n`<option value="" disabled="disabled" ?selected="${!this.value}">${this.placeholder}</option>`} ${e.map((e=>this.renderOption(e)))}</select><nord-button tabindex="-1" ?disabled="${this.disabled}" ?expand="${this.expand}" aria-hidden="true" type="button"><slot slot="before" name="before"></slot>${t}<div slot="after">${a('<svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z"/></svg>')}</div></nord-button></div>${this.renderError()}`}get options(){return Array.from(this.querySelectorAll("option"))}getButtonText(e){const t=e.find((e=>e.value===this.value));return t?t.text:this.placeholder?this.placeholder:e[0]?e[0].text:""}renderOption(e){return n`<option value="${i(e.value)}" ?disabled="${e.disabled}" ?selected="${e.value===this.value}">${e.text}</option>`}};v.styles=[p,b,m],v=e([t("nord-select")],v);var h=v;export{h as default};
 //# sourceMappingURL=Select.js.map

package/lib/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","sources":["../src/select/Select.ts","../../icons/lib/assets/interface-dropdown-small.js"],"sourcesContent":["/* eslint-disable lit-a11y/no-invalid-change-handler /\nimport { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport \"../button/Button.js\"\n\nimport dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/\n Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n \n @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-select\")\nexport default class Select extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.value \|\| undefined\n }\n\n private defaultSlot = new SlotController(this)\n\n protected inputId = \"select\"\n\n render() {\n const slottedOptions = this.options\n const buttonText = this.getButtonText(slottedOptions)\n\n return html`\n <slot></slot>\n ${this.renderLabel()}\n\n <div class=\"n-select-container\">\n <select\n ${ref(this.focusableRef)}\n id=${this.inputId}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n >\n ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n ${slottedOptions.map(option => this.renderOption(option))}\n </select>\n\n <nord-button tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n <slot slot=\"before\" name=\"before\"></slot>\n ${buttonText}\n <div slot=\"after\">${unsafeHTML(dropdownIcon)}</div>\n </nord-button>\n </div>\n\n ${this.renderError()}\n `\n }\n\n private get options() {\n return Array.from(this.querySelectorAll(\"option\"))\n }\n\n private getButtonText(options: HTMLOptionElement[]): string {\n const selected = options.find(option => option.value === this.value)\n\n if (selected) {\n return selected.text\n }\n\n if (this.placeholder) {\n return this.placeholder\n }\n\n if (options[0]) {\n return options[0].text\n }\n\n return \"\"\n }\n\n private renderOption(option: HTMLOptionElement) {\n return html`\n <option value=${ifDefined(option.value)} ?disabled=${option.disabled} ?selected=${option.value === this.value}>\n ${option.text}\n </option>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-select\": Select\n }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z\"/></svg>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n"],"names":["Select","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","SlotController","formValue","value","undefined","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","inputId","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","placeholder","map","option","renderOption","expand","unsafeHTML","renderError","Array","from","querySelectorAll","selected","find","text","componentStyle","formFieldStyle","style","customElement"],"mappings":"~~8nEA~~+BA,IAAqBA,EAArB,cAAoCC,EAAoBC,EAAWC,EAAeC,MAAlFC,kCAOUC,iBAAc,IAAIC,EAAeD,MAE/BA,aAAU,SANGE,gBACrB,OAAOF,KAAKG,YAASC,EAOvBC,SACE,MAAMC,EAAiBN,KAAKO,QACtBC,EAAaR,KAAKS,cAAcH,GAEtC,OAAOI,CAAI,gBAEPV,KAAKW,wDAIDC,EAAIZ,KAAKa,qBACNb,KAAKc,uBACEd,KAAKe,wBACLf,KAAKgB,mBACVC,EAAUjB,KAAKkB,mBACZlB,KAAKmB,yBACNnB,KAAKoB,kCACKH,EAAUjB,KAAKqB,oCACnBJ,EAAUjB,KAAKsB,kBAE5BtB,KAAKuB,aAAeb,CAAI,oDAAwCV,KAAKG,UAASH,KAAKuB,0BACnFjB,EAAekB,KAAIC,GAAUzB,KAAK0B,aAAaD,sDAGZzB,KAAKe,sBAAoBf,KAAK2B,qFAEjEnB,sBACkBoB,ECrEf,ofDyEP5B,KAAK6B,gBAICtB,cACV,OAAOuB,MAAMC,KAAK/B,KAAKgC,iBAAiB,WAGlCvB,cAAcF,GACpB,MAAM0B,EAAW1B,EAAQ2B,MAAKT,GAAUA,EAAOtB,QAAUH,KAAKG,QAE9D,OAAI8B,EACKA,EAASE,KAGdnC,KAAKuB,YACAvB,KAAKuB,YAGVhB,EAAQ,GACHA,EAAQ,GAAG4B,KAGb,GAGDT,aAAaD,GACnB,OAAOf,CAAI,kBACOO,EAAUQ,EAAOtB,sBAAoBsB,EAAOV,wBAAsBU,EAAOtB,QAAUH,KAAKG,UACpGsB,EAAOU,kBAtERzC,SAAS,CAAC0C,EAAgBC,EAAgBC,GAD9B5C,KADpB6C,EAAc,gBACM7C,SAAAA"}
1	+ {"version":3,"file":"Select.js","sources":["../src/select/Select.ts","../../icons/lib/assets/interface-dropdown-small.js"],"sourcesContent":["/* eslint-disable lit-a11y/no-invalid-change-handler /\nimport { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\n\nimport \"../button/Button.js\"\n\nimport dropdownIcon from \"@nordhealth/icons/lib/assets/interface-dropdown-small.js\"\nimport { InputMixin } from \"../common/mixins/InputMixin.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { FormAssociatedMixin } from \"../common/mixins/FormAssociatedMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Select.css\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\n/\n Select lets users choose one option from an options menu.\n * Consider using select when you have 5 or more options to choose from.\n \n @status ready\n * @category form\n * @slot - Default slot for holding <option> elements.\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n */\n@customElement(\"nord-select\")\nexport default class Select extends FormAssociatedMixin(InputMixin(FocusableMixin(LitElement))) {\n static styles = [componentStyle, formFieldStyle, style]\n\n protected override get formValue() {\n return this.value \|\| undefined\n }\n\n private defaultSlot = new SlotController(this)\n\n protected inputId = \"select\"\n\n render() {\n const slottedOptions = this.options\n const buttonText = this.getButtonText(slottedOptions)\n\n return html`\n <slot></slot>\n ${this.renderLabel()}\n\n <div class=\"n-select-container\">\n <select\n ${ref(this.focusableRef)}\n id=${this.inputId}\n ?disabled=${this.disabled}\n ?required=${this.required}\n name=${ifDefined(this.name)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n aria-describedby=${ifDefined(this.getDescribedBy())}\n aria-invalid=${ifDefined(this.getInvalid())}\n >\n ${this.placeholder && html`<option value=\"\" disabled ?selected=${!this.value}>${this.placeholder}</option>`}\n ${slottedOptions.map(option => this.renderOption(option))}\n </select>\n\n <nord-button tabindex=\"-1\" ?disabled=${this.disabled} ?expand=${this.expand} aria-hidden=\"true\" type=\"button\">\n <slot slot=\"before\" name=\"before\"></slot>\n ${buttonText}\n <div slot=\"after\">${unsafeHTML(dropdownIcon)}</div>\n </nord-button>\n </div>\n\n ${this.renderError()}\n `\n }\n\n private get options() {\n return Array.from(this.querySelectorAll(\"option\"))\n }\n\n private getButtonText(options: HTMLOptionElement[]): string {\n const selected = options.find(option => option.value === this.value)\n\n if (selected) {\n return selected.text\n }\n\n if (this.placeholder) {\n return this.placeholder\n }\n\n if (options[0]) {\n return options[0].text\n }\n\n return \"\"\n }\n\n private renderOption(option: HTMLOptionElement) {\n return html`\n <option value=${ifDefined(option.value)} ?disabled=${option.disabled} ?selected=${option.value === this.value}>\n ${option.text}\n </option>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-select\": Select\n }\n}\n","export default '<svg viewBox=\"0 0 140 140\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"currentColor\" d=\"M105 56a10.416 10.416 0 0 1-7.42-3.08L72.478 27.818a3.528 3.528 0 0 0-4.956 0L42.42 52.92a10.5 10.5 0 0 1-14.84-14.84l35-35a10.486 10.486 0 0 1 14.84 0l35 35A10.5 10.5 0 0 1 105 56zm-35 84a10.416 10.416 0 0 1-7.42-3.08l-35-35a10.5 10.5 0 0 1 14.84-14.84l25.102 25.102a3.528 3.528 0 0 0 4.956 0L97.58 87.08a10.5 10.5 0 1 1 14.84 14.84l-35 35A10.416 10.416 0 0 1 70 140z\"/></svg>'\nexport const title = \"interface-dropdown-small\"\nexport const tags = \"nordicon small interface dropdown select arrow up down caret triangle chevron\"\n"],"names":["Select","FormAssociatedMixin","InputMixin","FocusableMixin","LitElement","constructor","this","SlotController","formValue","value","undefined","render","slottedOptions","options","buttonText","getButtonText","html","renderLabel","ref","focusableRef","inputId","disabled","required","ifDefined","name","handleChange","handleInput","getDescribedBy","getInvalid","placeholder","map","option","renderOption","expand","unsafeHTML","renderError","Array","from","querySelectorAll","selected","find","text","componentStyle","formFieldStyle","style","customElement"],"mappings":"8pEA+BA,IAAqBA,EAArB,cAAoCC,EAAoBC,EAAWC,EAAeC,MAAlFC,kCAOUC,iBAAc,IAAIC,EAAeD,MAE/BA,aAAU,SANGE,gBACrB,OAAOF,KAAKG,YAASC,EAOvBC,SACE,MAAMC,EAAiBN,KAAKO,QACtBC,EAAaR,KAAKS,cAAcH,GAEtC,OAAOI,CAAI,gBAEPV,KAAKW,wDAIDC,EAAIZ,KAAKa,qBACNb,KAAKc,uBACEd,KAAKe,wBACLf,KAAKgB,mBACVC,EAAUjB,KAAKkB,mBACZlB,KAAKmB,yBACNnB,KAAKoB,kCACKH,EAAUjB,KAAKqB,oCACnBJ,EAAUjB,KAAKsB,kBAE5BtB,KAAKuB,aAAeb,CAAI,oDAAwCV,KAAKG,UAASH,KAAKuB,0BACnFjB,EAAekB,KAAIC,GAAUzB,KAAK0B,aAAaD,sDAGZzB,KAAKe,sBAAoBf,KAAK2B,qFAEjEnB,sBACkBoB,ECrEf,ofDyEP5B,KAAK6B,gBAICtB,cACV,OAAOuB,MAAMC,KAAK/B,KAAKgC,iBAAiB,WAGlCvB,cAAcF,GACpB,MAAM0B,EAAW1B,EAAQ2B,MAAKT,GAAUA,EAAOtB,QAAUH,KAAKG,QAE9D,OAAI8B,EACKA,EAASE,KAGdnC,KAAKuB,YACAvB,KAAKuB,YAGVhB,EAAQ,GACHA,EAAQ,GAAG4B,KAGb,GAGDT,aAAaD,GACnB,OAAOf,CAAI,kBACOO,EAAUQ,EAAOtB,sBAAoBsB,EAAOV,wBAAsBU,EAAOtB,QAAUH,KAAKG,UACpGsB,EAAOU,kBAtERzC,SAAS,CAAC0C,EAAgBC,EAAgBC,GAD9B5C,KADpB6C,EAAc,gBACM7C,SAAAA"}

package/lib/Spinner.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e,n as r}from"./query-assigned-elements-37b095c4.js";import{r as i,$ as n,s as o}from"./lit-element-9646ab7e.js";import{e as s}from"./property-03f59dce.js";import{l as t}from"./if-defined-2a4c6dbc.js";import{s as a}from"./Component-6762b5eb.js";import{D as l}from"./DraftComponentMixin-9e4b7b34.js";const c=i`:host{--n-icon-size:var(--n-size-icon-m);block-size:var(--n-icon-size);color:inherit}:host([size=xs]){--n-icon-size:var(--n-size-icon-xs)}:host([size="s"]){--n-icon-size:var(--n-size-icon-s)}:host([size="l"]){--n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--n-icon-size:var(--n-size-icon-xxl)}.n-spinner,.n-spinner::after{position:absolute;inset-block-start:50%;inset-inline-start:50%;z-index:var(--n-index-spinner);transform:translateZ(0) translateX(-50%) translateY(-50%);transform-origin:0 0}.n-spinner{block-size:var(--n-icon-size);inline-size:var(--n-icon-size);font-size:var(--n-icon-size);color:var(--n-color-primary);border:.18em solid transparent;border-inline-start:.18em solid currentColor;border-radius:var(--n-border-radius-circle);animation:nRotate .66s linear infinite}.n-spinner::after{box-sizing:content-box;inline-size:100%;block-size:100%;overflow:hidden;content:"";border:.18em solid currentColor;border-radius:var(--n-border-radius-circle);opacity:.3}@keyframes nRotate{0%{transform:translateZ(0) rotate(0) translateX(-50%) translateY(-50%)}100%{transform:translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%)}}`;let d=class extends(l(o)){constructor(){super(...arguments),this.size="m"}render(){return n`<div class="n-spinner" role="${t(this.label?"img":void 0)}" aria-label="${t(this.label)}" style="${t(this.color?`color:${this.color}`:void 0)}"></div>`}};d.styles=[a,c],e([s({reflect:!0})],d.prototype,"size",void 0),e([s({reflect:!0})],d.prototype,"color",void 0),e([s({reflect:!0})],d.prototype,"label",void 0),d=e([r("nord-spinner")],d);var z=d;export{z as default};
+import{_ as e,n as r}from"./query-assigned-elements-37b095c4.js";import{r as n,$ as i,s as o}from"./lit-element-9646ab7e.js";import{e as s}from"./property-03f59dce.js";import{l as t}from"./if-defined-2a4c6dbc.js";import{s as a}from"./Component-6762b5eb.js";import{D as l}from"./DraftComponentMixin-9e4b7b34.js";const c=n`:host{--n-icon-size:var(--n-size-icon-m);block-size:var(--n-icon-size);color:inherit}:host([size=xs]){--n-icon-size:var(--n-size-icon-xs)}:host([size="s"]){--n-icon-size:var(--n-size-icon-s)}:host([size="l"]){--n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--n-icon-size:var(--n-size-icon-xxl)}.n-spinner,.n-spinner::after{position:absolute;inset-block-start:50%;inset-inline-start:50%;z-index:var(--n-index-spinner);transform:translateZ(0) translateX(-50%) translateY(-50%);transform-origin:0 0}.n-spinner{block-size:var(--n-icon-size);inline-size:var(--n-icon-size);font-size:var(--n-icon-size);color:var(--n-color-accent);border:.18em solid transparent;border-inline-start:.18em solid currentColor;border-radius:var(--n-border-radius-circle);animation:nRotate .66s linear infinite}.n-spinner::after{box-sizing:content-box;inline-size:100%;block-size:100%;overflow:hidden;content:"";border:.18em solid currentColor;border-radius:var(--n-border-radius-circle);opacity:.3}@keyframes nRotate{0%{transform:translateZ(0) rotate(0) translateX(-50%) translateY(-50%)}100%{transform:translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%)}}`;let d=class extends(l(o)){constructor(){super(...arguments),this.size="m"}render(){return i`<div class="n-spinner" role="${t(this.label?"img":void 0)}" aria-label="${t(this.label)}" style="${t(this.color?`color:${this.color}`:void 0)}"></div>`}};d.styles=[a,c],e([s({reflect:!0})],d.prototype,"size",void 0),e([s({reflect:!0})],d.prototype,"color",void 0),e([s({reflect:!0})],d.prototype,"label",void 0),d=e([r("nord-spinner")],d);var z=d;export{z as default};
 //# sourceMappingURL=Spinner.js.map

package/lib/Spinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Spinner.css\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\n/*\n Spinner component is used to indicate users that their action is being\n * processed. You can customize the size and color of the spinner with the\n * provided properties.\n \n @status draft\n * @category feedback\n /\n@customElement(\"nord-spinner\")\nexport default class Spinner extends DraftComponentMixin(LitElement) {\n static styles = [componentStyle, style]\n\n /\n The size of the spinner.\n /\n @property({ reflect: true }) size: \"xs\" \| \"s\" \| \"m\" \| \"l\" \| \"xl\" \| \"xxl\" = \"m\"\n\n /\n The color of the spinner.\n * Can accept any valid CSS color value, including custom properties.\n /\n @property({ reflect: true }) color?: string\n\n /\n An accessible label for the spinner.\n * If no label is supplied, the spinner is hidden from assistive technology.\n */\n @property({ reflect: true }) label?: string\n\n render() {\n // if a label is supplied, we give the div a role of img.\n // without this we could not use aria-label, since it is only valid on elements of certain roles.\n return html`<div\n class=\"n-spinner\"\n role=${ifDefined(this.label ? \"img\" : undefined)}\n aria-label=${ifDefined(this.label)}\n style=${ifDefined(this.color ? `color:${this.color}` : undefined)}\n ></div>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-spinner\": Spinner\n }\n}\n"],"names":["Spinner","DraftComponentMixin","LitElement","constructor","this","render","html","ifDefined","label","undefined","color","componentStyle","style","__decorate","property","reflect","customElement"],"mappings":"m/CAgBA,IAAqBA,EAArB,cAAqCC,EAAoBC,IAAzDC,kCAM+BC,UAA8C,IAc3EC,SAGE,OAAOC,CAAI,gCAEFC,EAAUH,KAAKI,MAAQ,WAAQC,mBACzBF,EAAUH,KAAKI,kBACpBD,EAAUH,KAAKM,MAAQ,SAASN,KAAKM,aAAUD,eA1BpDT,SAAS,CAACW,EAAgBC,GAKJC,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAlBFf,KADpBgB,EAAc,iBACMhB,SAAAA"}
1	+ {"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Spinner.css\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\n/*\n Spinner component is used to indicate users that their action is being\n * processed. You can customize the size and color of the spinner with the\n * provided properties.\n \n @status draft\n * @category feedback\n /\n@customElement(\"nord-spinner\")\nexport default class Spinner extends DraftComponentMixin(LitElement) {\n static styles = [componentStyle, style]\n\n /\n The size of the spinner.\n /\n @property({ reflect: true }) size: \"xs\" \| \"s\" \| \"m\" \| \"l\" \| \"xl\" \| \"xxl\" = \"m\"\n\n /\n The color of the spinner.\n * Can accept any valid CSS color value, including custom properties.\n /\n @property({ reflect: true }) color?: string\n\n /\n An accessible label for the spinner.\n * If no label is supplied, the spinner is hidden from assistive technology.\n */\n @property({ reflect: true }) label?: string\n\n render() {\n // if a label is supplied, we give the div a role of img.\n // without this we could not use aria-label, since it is only valid on elements of certain roles.\n return html`<div\n class=\"n-spinner\"\n role=${ifDefined(this.label ? \"img\" : undefined)}\n aria-label=${ifDefined(this.label)}\n style=${ifDefined(this.color ? `color:${this.color}` : undefined)}\n ></div>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-spinner\": Spinner\n }\n}\n"],"names":["Spinner","DraftComponentMixin","LitElement","constructor","this","render","html","ifDefined","label","undefined","color","componentStyle","style","__decorate","property","reflect","customElement"],"mappings":"k/CAgBA,IAAqBA,EAArB,cAAqCC,EAAoBC,IAAzDC,kCAM+BC,UAA8C,IAc3EC,SAGE,OAAOC,CAAI,gCAEFC,EAAUH,KAAKI,MAAQ,WAAQC,mBACzBF,EAAUH,KAAKI,kBACpBD,EAAUH,KAAKM,MAAQ,SAASN,KAAKM,aAAUD,eA1BpDT,SAAS,CAACW,EAAgBC,GAKJC,GAA5BC,EAAS,CAAEC,SAAS,gCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAMQF,GAA5BC,EAAS,CAAEC,SAAS,iCAlBFf,KADpBgB,EAAc,iBACMhB,SAAAA"}

package/lib/Stack.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as t,n as e}from"./query-assigned-elements-37b095c4.js";import{r as s,s as a,$ as o}from"./lit-element-9646ab7e.js";import{e as r}from"./property-03f59dce.js";import{s as n}from"./Component-6762b5eb.js";const i=s`:host{display:flex;flex-flow:column wrap;justify-content:flex-start;font-size:var(--n-font-size-m);color:var(--n-color-text);gap:var(--n-stack-gap,var(--n-space-m))}:host([direction=horizontal]){align-items:center;flex-direction:row}:host([align-items=center]){align-items:center}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}::slotted(*){margin:0!important}:host([gap=none]){--n-stack-gap:0}:host([gap="s"]){--n-stack-gap:var(--n-space-s)}:host([gap="m"]){--n-stack-gap:var(--n-space-m)}:host([gap="l"]){--n-stack-gap:var(--n-space-l)}:host([gap=xl]){--n-stack-gap:var(--n-space-xl)}:host([gap=xxl]){--n-stack-gap:var(--n-space-xxl)}`;let l=class extends a{constructor(){super(...arguments),this.gap="m",this.direction="vertical"}render(){return o`<slot></slot>`}};l.styles=[n,i],t([r({reflect:!0})],l.prototype,"gap",void 0),t([r({reflect:!0})],l.prototype,"direction",void 0),t([r({reflect:!0,attribute:"align-items"})],l.prototype,"alignItems",void 0),l=t([e("nord-stack")],l);var p=l;export{p as default};
+import{_ as t,n as e}from"./query-assigned-elements-37b095c4.js";import{r as s,s as n,$ as o}from"./lit-element-9646ab7e.js";import{e as a}from"./property-03f59dce.js";import{s as r}from"./Component-6762b5eb.js";const i=s`:host{display:flex;flex-flow:column wrap;justify-content:flex-start;font-size:var(--n-font-size-m);color:var(--n-color-text);gap:var(--n-stack-gap,var(--n-space-m))}:host([direction=horizontal]){align-items:center;flex-direction:row}:host([align-items=center]){align-items:center}:host([align-items=start]){align-items:flex-start}:host([align-items=end]){align-items:flex-end}:host([justify-content=center]){justify-content:center}:host([justify-content=start]){justify-content:flex-start}:host([justify-content=end]){justify-content:flex-end}::slotted(*){margin:0!important}:host([gap=none]){--n-stack-gap:0}:host([gap="s"]){--n-stack-gap:var(--n-space-s)}:host([gap="m"]){--n-stack-gap:var(--n-space-m)}:host([gap="l"]){--n-stack-gap:var(--n-space-l)}:host([gap=xl]){--n-stack-gap:var(--n-space-xl)}:host([gap=xxl]){--n-stack-gap:var(--n-space-xxl)}`;let c=class extends n{constructor(){super(...arguments),this.gap="m",this.direction="vertical"}render(){return o`<slot></slot>`}};c.styles=[r,i],t([a({reflect:!0})],c.prototype,"gap",void 0),t([a({reflect:!0})],c.prototype,"direction",void 0),t([a({reflect:!0,attribute:"align-items"})],c.prototype,"alignItems",void 0),t([a({reflect:!0,attribute:"justify-content"})],c.prototype,"justifyContent",void 0),c=t([e("nord-stack")],c);var l=c;export{l as default};
 //# sourceMappingURL=Stack.js.map

package/lib/Stack.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stack.js","sources":["../src/stack/Stack.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Stack.css\"\n\n/*\n Stack component manages layout of immediate children along the\n * vertical or horizontal axis with optional spacing between each child.\n \n @status ready\n * @category structure\n * @slot - The stack content.\n /\n@customElement(\"nord-stack\")\nexport default class Stack extends LitElement {\n static styles = [componentStyle, style]\n\n /\n The space injected between components.\n /\n @property({ reflect: true }) gap: \"none\" \| \"s\" \| \"m\" \| \"l\" \| \"xl\" \| \"xxl\" = \"m\"\n\n /\n The direction of the stack.\n /\n @property({ reflect: true }) direction: \"vertical\" \| \"horizontal\" = \"vertical\"\n\n /\n How to align the child items inside the stack.\n */\n @property({ reflect: true, attribute: \"align-items\" }) alignItems?: \"center\" \| \"start\" \| \"end\"\n\n render() {\n return html`<slot></slot>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-stack\": Stack\n }\n}\n"],"names":["Stack","LitElement","constructor","this","render","html","componentStyle","style","__decorate","property","reflect","attribute","customElement"],"mappings":"~~44BAcA~~,IAAqBA,EAArB,cAAmCC,EAAnCC,kCAM+BC,SAA+C,IAK/CA,eAAuC,~~WAOpEC~~,SACE,OAAOC,CAAI,~~kBAlBNL~~,SAAS,CAACM,EAAgBC,GAKJC,GAA5BC,EAAS,CAAEC,SAAS,+BAKQF,GAA5BC,EAAS,CAAEC,SAAS,qCAKkCF,GAAtDC,EAAS,CAAEC,SAAS,EAAMC,UAAW,~~kDAhBnBX~~,KADpBY,EAAc,eACMZ,SAAAA"}
1	+ {"version":3,"file":"Stack.js","sources":["../src/stack/Stack.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Stack.css\"\n\n/*\n Stack component manages layout of immediate children along the\n * vertical or horizontal axis with optional spacing between each child.\n \n @status ready\n * @category structure\n * @slot - The stack content.\n /\n@customElement(\"nord-stack\")\nexport default class Stack extends LitElement {\n static styles = [componentStyle, style]\n\n /\n The space injected between components.\n /\n @property({ reflect: true }) gap: \"none\" \| \"s\" \| \"m\" \| \"l\" \| \"xl\" \| \"xxl\" = \"m\"\n\n /\n The direction of the stack.\n /\n @property({ reflect: true }) direction: \"vertical\" \| \"horizontal\" = \"vertical\"\n\n /\n How to align the child items inside the stack.\n /\n @property({ reflect: true, attribute: \"align-items\" }) alignItems?: \"center\" \| \"start\" \| \"end\"\n\n /\n How to justify the child items inside the stack.\n */\n @property({ reflect: true, attribute: \"justify-content\" }) justifyContent?: \"center\" \| \"start\" \| \"end\"\n\n render() {\n return html`<slot></slot>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-stack\": Stack\n }\n}\n"],"names":["Stack","LitElement","constructor","this","render","html","componentStyle","style","__decorate","property","reflect","attribute","customElement"],"mappings":"mjCAcA,IAAqBA,EAArB,cAAmCC,EAAnCC,kCAM+BC,SAA+C,IAK/CA,eAAuC,WAYpEC,SACE,OAAOC,CAAI,kBAvBNL,SAAS,CAACM,EAAgBC,GAKJC,GAA5BC,EAAS,CAAEC,SAAS,+BAKQF,GAA5BC,EAAS,CAAEC,SAAS,qCAKkCF,GAAtDC,EAAS,CAAEC,SAAS,EAAMC,UAAW,kDAKqBH,GAA1DC,EAAS,CAAEC,SAAS,EAAMC,UAAW,0DArBnBX,KADpBY,EAAc,eACMZ,SAAAA"}

package/lib/{TextField-b4155167.js → TextField-d799db1a.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as n}from"./lit-element-9646ab7e.js";const r=n`.n-input-container{position:relative}.n-input{background:var(--n-color-active);color:var(--n-color-text);padding-block-start:calc(var(--n-space-s) - 1px);padding-block-end:calc(var(--n-space-s) - 1px);padding-inline-start:calc(var(--n-space-s) * 1.6);padding-inline-end:calc(var(--n-space-s) * 1.6);border-radius:var(--n-border-radius-s);border:1px solid var(--n-input-border-color,var(--n-color-border-strong));font-family:var(--n-font-family);font-size:var(--n-font-size-m);line-height:var(--n-line-height-form);min-inline-size:240px;transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:480px){.n-input{font-size:var(--n-font-size-l)}}:host([expand]) .n-input{display:block;inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--n-input-border-color:var(--n-color-border-hover)}.n-input:focus{--n-input-border-color:var(--n-color-primary);background:var(--n-color-surface);outline:0;box-shadow:0 0 0 1px var(--n-input-border-color)}.n-input::placeholder{color:var(--n-color-text-weaker)}.n-input:focus::placeholder{color:var(--n-color-text-weakest)}.n-input:disabled{--n-input-border-color:var(--n-color-active);color:var(--n-color-text-weakest)}.n-input[aria-invalid=true]{--n-input-border-color:var(--n-color-status-danger)!important}`;export{r as s};
-//# sourceMappingURL=TextField-b4155167.js.map
+import{r as n}from"./lit-element-9646ab7e.js";const r=n`.n-input-container{position:relative}.n-input{background:var(--n-color-active);color:var(--n-color-text);padding-block-start:calc(var(--n-space-s) - 1px);padding-block-end:calc(var(--n-space-s) - 1px);padding-inline-start:calc(var(--n-space-s) * 1.6);padding-inline-end:calc(var(--n-space-s) * 1.6);border-radius:var(--n-border-radius-s);border:1px solid var(--n-input-border-color,var(--n-color-border-strong));font-family:var(--n-font-family);font-size:var(--n-font-size-m);line-height:var(--n-line-height-form);min-inline-size:240px;transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly)}@media (max-width:480px){.n-input{font-size:var(--n-font-size-l)}}:host([expand]){inline-size:100%}:host([expand]) .n-input{display:block;min-inline-size:0;inline-size:100%}.n-input:hover,.n-label-container:hover+.n-input-container .n-input{--n-input-border-color:var(--n-color-border-hover)}.n-input:focus{--n-input-border-color:var(--n-color-accent);background:var(--n-color-surface);outline:0;box-shadow:0 0 0 1px var(--n-input-border-color)}.n-input::placeholder{color:var(--n-color-text-weakest)}.n-input:disabled{--n-input-border-color:var(--n-color-active);color:var(--n-color-text-weakest)}.n-input[aria-invalid=true]{--n-input-border-color:var(--n-color-status-danger)!important}`;export{r as s};
+//# sourceMappingURL=TextField-d799db1a.js.map

package/lib/TextField-d799db1a.js.map ADDED Viewed

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

package/lib/Textarea.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,$ as s,s as r}from"./lit-element-9646ab7e.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-2a4c6dbc.js";import{n}from"./ref-eb5cfa10.js";import{F as l}from"./FocusableMixin-98e13999.js";import{F as d}from"./FormAssociatedMixin-bfbbe389.js";import{I as h}from"./InputMixin-94d15730.js";import{s as p}from"./Component-6762b5eb.js";import{s as m}from"./FormField-b1c18e6e.js";import{s as c}from"./TextField-b4155167.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";import"./SlotController-5bfc47d1.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const u=i`.n-input{min-block-size:var(--n-textarea-height,76px);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:hidden}`;let b=class extends(d(h(l(r)))){constructor(){super(...arguments),this.inputId="textarea",this.resize="vertical"}updated(e){(e.has("resize")||e.has("value"))&&this.resizeToFitContent()}render(){var e;return s`${this.renderLabel()}<div class="n-input-container"><textarea ${n(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}"></textarea></div>${this.renderError()}`}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=null)}};b.styles=[p,m,c,u],e([o({reflect:!0})],b.prototype,"resize",void 0),b=e([t("nord-textarea")],b);var f=b;export{f as default};
+import{_ as e,n as t}from"./query-assigned-elements-37b095c4.js";import{r as i,$ as s,s as r}from"./lit-element-9646ab7e.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-2a4c6dbc.js";import{n}from"./ref-eb5cfa10.js";import{F as l}from"./FocusableMixin-98e13999.js";import{F as d}from"./FormAssociatedMixin-bfbbe389.js";import{I as h}from"./InputMixin-94d15730.js";import{s as p}from"./Component-6762b5eb.js";import{s as m}from"./FormField-b1c18e6e.js";import{s as c}from"./TextField-d799db1a.js";import"./directive-helpers-e7b6bf4b.js";import"./directive-de55b00a.js";import"./SlotController-5bfc47d1.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const u=i`.n-input{min-block-size:var(--n-textarea-height,76px);transition:border var(--n-transition-slowly),box-shadow var(--n-transition-slowly),background var(--n-transition-slowly);display:block;resize:vertical}:host([resize=auto]) .n-input{resize:none;overflow:hidden}`;let b=class extends(d(h(l(r)))){constructor(){super(...arguments),this.inputId="textarea",this.resize="vertical"}updated(e){(e.has("resize")||e.has("value"))&&this.resizeToFitContent()}render(){var e;return s`${this.renderLabel()}<div class="n-input-container"><textarea ${n(this.focusableRef)} id="${this.inputId}" class="n-input" ?disabled="${this.disabled}" ?required="${this.required}" name="${a(this.name)}" .value="${null!==(e=this.value)&&void 0!==e?e:""}" placeholder="${a(this.placeholder)}" @change="${this.handleChange}" @input="${this.handleInput}" aria-describedby="${a(this.getDescribedBy())}" aria-invalid="${a(this.getInvalid())}"></textarea></div>${this.renderError()}`}resizeToFitContent(){const e=this.focusableRef.value;e&&("auto"===this.resize?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=null)}};b.styles=[p,m,c,u],e([o({reflect:!0})],b.prototype,"resize",void 0),b=e([t("nord-textarea")],b);var f=b;export{f as default};
 //# sourceMappingURL=Textarea.js.map

package/lib/Tooltip.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{_ as t,n as e}from"./query-assigned-elements-37b095c4.js";import{r as n,s as o,$ as i}from"./lit-element-9646ab7e.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{S as l}from"./SlotController-5bfc47d1.js";import{s as a}from"./Component-6762b5eb.js";function c(t){return t.split("-")[0]}function d(t){return t.split("-")[1]}function f(t){return["top","bottom"].includes(c(t))?"x":"y"}function h(t){return"y"===t?"height":"width"}function u(t){let{reference:e,floating:n,placement:o}=t;const i=e.x+e.width/2-n.width/2,r=e.y+e.height/2-n.height/2;let s;switch(c(o)){case"top":s={x:i,y:e.y-n.height};break;case"bottom":s={x:i,y:e.y+e.height};break;case"right":s={x:e.x+e.width,y:r};break;case"left":s={x:e.x-n.width,y:r};break;default:s={x:e.x,y:e.y}}const l=f(o),a=h(l);switch(d(o)){case"start":s[l]=s[l]-(e[a]/2-n[a]/2);break;case"end":s[l]=s[l]+(e[a]/2-n[a]/2)}return s}function p(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function m(t,e){void 0===e&&(e={});const{x:n,y:o,platform:i,rects:r,elements:s,strategy:l}=t,{boundary:a="clippingParents",rootBoundary:c="viewport",elementContext:d="floating",altBoundary:f=!1,padding:h=0}=e,u=function(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}(h),m=s[f?"floating"===d?"reference":"floating":d],g=await i.getClippingClientRect({element:await i.isElement(m)?m:m.contextElement||await i.getDocumentElement({element:s.floating}),boundary:a,rootBoundary:c}),y=p(await i.convertOffsetParentRelativeRectToViewportRelativeRect({rect:"floating"===d?{...r.floating,x:n,y:o}:r.reference,offsetParent:await i.getOffsetParent({element:s.floating}),strategy:l}));return{top:g.top-y.top+u.top,bottom:y.bottom-g.bottom+u.bottom,left:g.left-y.left+u.left,right:y.right-g.right+u.right}}const g=Math.min,y=Math.max;function v(t,e,n){return y(t,g(e,n))}const b={left:"right",right:"left",bottom:"top",top:"bottom"};function x(t){return t.replace(/left|right|bottom|top/g,(t=>b[t]))}const w={start:"end",end:"start"};function E(t){return t.replace(/start|end/g,(t=>w[t]))}const k=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var n,o;const{placement:i,middlewareData:r,rects:s,initialPlacement:l}=e;if(null!=(n=r.flip)&&n.skip)return{};const{mainAxis:a=!0,crossAxis:u=!0,fallbackPlacements:p,fallbackStrategy:g="bestFit",flipAlignment:y=!0,...v}=t,b=c(i),w=p||(b===l||!y?[x(l)]:function(t){const e=x(t);return[E(t),e,E(e)]}(l)),k=[l,...w],L=await m(e,v),T=[];let R=(null==(o=r.flip)?void 0:o.overflows)||[];if(a&&T.push(L[b]),u){const{main:t,cross:e}=function(t,e){const n="start"===d(t),o=f(t),i=h(o);let r="x"===o?n?"right":"left":n?"bottom":"top";return e.reference[i]>e.floating[i]&&(r=x(r)),{main:r,cross:x(r)}}(i,s);T.push(L[t],L[e])}if(R=[...R,{placement:i,overflows:T}],!T.every((t=>t<=0))){var C,D;const t=(null!=(C=null==(D=r.flip)?void 0:D.index)?C:0)+1,e=k[t];if(e)return{data:{index:t,overflows:R},reset:{placement:e}};let n="bottom";switch(g){case"bestFit":{var S;const t=null==(S=R.slice().sort(((t,e)=>t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)-e.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)))[0])?void 0:S.placement;t&&(n=t);break}case"initialPlacement":n=l}return{data:{skip:!0},reset:{placement:n}}}return{}}}};const L=function(t){return void 0===t&&(t=0),{name:"offset",options:t,fn(e){const{x:n,y:o,placement:i,rects:r}=e,s=function(t){let{placement:e,rects:n,value:o}=t;const i=c(e),r=["left","top"].includes(i)?-1:1,s="function"==typeof o?o({...n,placement:e}):o,{mainAxis:l,crossAxis:a}="number"==typeof s?{mainAxis:s,crossAxis:0}:{mainAxis:0,crossAxis:0,...s};return"x"===f(i)?{x:a,y:l*r}:{x:l*r,y:a}}({placement:i,rects:r,value:t});return{x:n+s.x,y:o+s.y,data:s}}}};function T(t){return"[object Window]"===(null==t?void 0:t.toString())}function R(t){if(null==t)return window;if(!T(t)){const e=t.ownerDocument;return e&&e.defaultView||window}return t}function C(t){return R(t).getComputedStyle(t)}function D(t){return T(t)?"":t?(t.nodeName||"").toLowerCase():""}function S(t){return t instanceof R(t).HTMLElement}function P(t){return t instanceof R(t).Element}function A(t){return t instanceof R(t).ShadowRoot||t instanceof ShadowRoot}function W(t){const{overflow:e,overflowX:n,overflowY:o}=C(t);return/auto|scroll|overlay|hidden/.test(e+o+n)}function O(t){return["table","td","th"].includes(D(t))}function z(t){const e=navigator.userAgent.toLowerCase().includes("firefox"),n=C(t);return"none"!==n.transform||"none"!==n.perspective||"paint"===n.contain||["transform","perspective"].includes(n.willChange)||e&&"filter"===n.willChange||e&&!!n.filter&&"none"!==n.filter}const H=Math.min,N=Math.max,j=Math.round;function B(t,e){void 0===e&&(e=!1);const n=t.getBoundingClientRect();let o=1,i=1;return e&&S(t)&&(o=t.offsetWidth>0&&j(n.width)/t.offsetWidth||1,i=t.offsetHeight>0&&j(n.height)/t.offsetHeight||1),{width:n.width/o,height:n.height/i,top:n.top/i,right:n.right/o,bottom:n.bottom/i,left:n.left/o,x:n.left/o,y:n.top/i}}function M(t){return(e=t,(e instanceof R(e).Node?t.ownerDocument:t.document)||window.document).documentElement;var e}function V(t){return T(t)?{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}:{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function $(t){return B(M(t)).left+V(t).scrollLeft}function q(t,e,n){const o=S(e),i=M(e),r=B(t,o&&function(t){const e=B(t);return j(e.width)!==t.offsetWidth||j(e.height)!==t.offsetHeight}(e));let s={scrollLeft:0,scrollTop:0};const l={x:0,y:0};if(o||!o&&"fixed"!==n)if(("body"!==D(e)||W(i))&&(s=V(e)),S(e)){const t=B(e,!0);l.x=t.x+e.clientLeft,l.y=t.y+e.clientTop}else i&&(l.x=$(i));return{x:r.left+s.scrollLeft-l.x,y:r.top+s.scrollTop-l.y,width:r.width,height:r.height}}function F(t){return"html"===D(t)?t:t.assignedSlot||t.parentNode||(A(t)?t.host:null)||M(t)}function X(t){return S(t)&&"fixed"!==getComputedStyle(t).position?t.offsetParent:null}function Y(t){const e=R(t);let n=X(t);for(;n&&O(n)&&"static"===getComputedStyle(n).position;)n=X(n);return n&&("html"===D(n)||"body"===D(n)&&"static"===getComputedStyle(n).position&&!z(n))?e:n||function(t){let e=F(t);for(;S(e)&&!["html","body"].includes(D(e));){if(z(e))return e;e=e.parentNode}return null}(t)||e}function I(t){return{width:t.offsetWidth,height:t.offsetHeight}}function U(t){return["html","body","#document"].includes(D(t))?t.ownerDocument.body:S(t)&&W(t)?t:U(F(t))}function _(t,e){var n;void 0===e&&(e=[]);const o=U(t),i=o===(null==(n=t.ownerDocument)?void 0:n.body),r=R(o),s=i?[r].concat(r.visualViewport||[],W(o)?o:[]):o,l=e.concat(s);return i?l:l.concat(_(F(s)))}function G(t,e){return"viewport"===e?p(function(t){const e=R(t),n=M(t),o=e.visualViewport;let i=n.clientWidth,r=n.clientHeight,s=0,l=0;return o&&(i=o.width,r=o.height,Math.abs(e.innerWidth/o.scale-o.width)<.01&&(s=o.offsetLeft,l=o.offsetTop)),{width:i,height:r,x:s,y:l}}(t)):P(e)?function(t){const e=B(t),n=e.top+t.clientTop,o=e.left+t.clientLeft;return{top:n,left:o,x:o,y:n,right:o+t.clientWidth,bottom:n+t.clientHeight,width:t.clientWidth,height:t.clientHeight}}(e):p(function(t){var e;const n=M(t),o=V(t),i=null==(e=t.ownerDocument)?void 0:e.body,r=N(n.scrollWidth,n.clientWidth,i?i.scrollWidth:0,i?i.clientWidth:0),s=N(n.scrollHeight,n.clientHeight,i?i.scrollHeight:0,i?i.clientHeight:0);let l=-o.scrollLeft+$(t);const a=-o.scrollTop;return"rtl"===C(i||n).direction&&(l+=N(n.clientWidth,i?i.clientWidth:0)-r),{width:r,height:s,x:l,y:a}}(M(t)))}function J(t){const e=_(F(t)),n=["absolute","fixed"].includes(C(t).position)&&S(t)?Y(t):t;return P(n)?e.filter((t=>P(t)&&function(t,e){const n=null==e.getRootNode?void 0:e.getRootNode();if(t.contains(e))return!0;if(n&&A(n)){let n=e;do{if(n&&t===n)return!0;n=n.parentNode||n.host}while(n)}return!1}(t,n)&&"body"!==D(t))):[]}const K={getElementRects:t=>{let{reference:e,floating:n,strategy:o}=t;return{reference:q(e,Y(n),o),floating:{...I(n),x:0,y:0}}},convertOffsetParentRelativeRectToViewportRelativeRect:t=>function(t){let{rect:e,offsetParent:n,strategy:o}=t;const i=S(n),r=M(n);if(n===r)return e;let s={scrollLeft:0,scrollTop:0};const l={x:0,y:0};if((i||!i&&"fixed"!==o)&&(("body"!==D(n)||W(r))&&(s=V(n)),S(n))){const t=B(n,!0);l.x=t.x+n.clientLeft,l.y=t.y+n.clientTop}return{...e,x:e.x-s.scrollLeft+l.x,y:e.y-s.scrollTop+l.y}}(t),getOffsetParent:t=>{let{element:e}=t;return Y(e)},isElement:t=>P(t),getDocumentElement:t=>{let{element:e}=t;return M(e)},getClippingClientRect:t=>function(t){let{element:e,boundary:n,rootBoundary:o}=t;const i=[..."clippingParents"===n?J(e):[].concat(n),o],r=i[0],s=i.reduce(((t,n)=>{const o=G(e,n);return t.top=N(o.top,t.top),t.right=H(o.right,t.right),t.bottom=H(o.bottom,t.bottom),t.left=N(o.left,t.left),t}),G(e,r));return s.width=s.right-s.left,s.height=s.bottom-s.top,s.x=s.left,s.y=s.top,s}(t),getDimensions:t=>{let{element:e}=t;return I(e)},getClientRects:t=>{let{element:e}=t;return e.getClientRects()}},Q=(t,e,n)=>(async(t,e,n)=>{const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:s}=n;let l=await s.getElementRects({reference:t,floating:e,strategy:i}),{x:a,y:c}=u({...l,placement:o}),d=o,f={};for(let n=0;n<r.length;n++){const{name:h,fn:p}=r[n],{x:m,y:g,data:y,reset:v}=await p({x:a,y:c,initialPlacement:o,placement:d,strategy:i,middlewareData:f,rects:l,platform:s,elements:{reference:t,floating:e}});a=null!=m?m:a,c=null!=g?g:c,f={...f,[h]:null!=y?y:{}},v&&("object"==typeof v&&(v.placement&&(d=v.placement),v.rects&&(l=!0===v.rects?await s.getElementRects({reference:t,floating:e,strategy:i}):v.rects),({x:a,y:c}=u({...l,placement:d}))),n=-1)}return{x:a,y:c,placement:d,strategy:i,middlewareData:f}})(t,e,{platform:K,...n});function Z(t,e){const n=t.getAttribute(e);return n?n.split(/\s+/):[]}function tt(t,e,n){t.setAttribute(e,n.join(" "))}const et=n`:host{--n-tooltip-background:rgba(20, 20, 20, 0.95);--n-tooltip-key-border:rgba(255, 255, 255, 0.03);--n-tooltip-key-background:rgba(255, 255, 255, 0.1);position:absolute;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .4s ease,visibility .4s ease;z-index:var(--n-index-popout)}.n-tooltip{gap:var(--n-space-s);font-family:var(--n-font-family);font-size:var(--n-font-size-xs);line-height:var(--n-line-height);color:var(--n-color-text-inverse);padding:calc(var(--n-space-s)/ 1.5) var(--n-space-s);background-color:var(--n-tooltip-background);border-radius:var(--n-border-radius-s)}.n-tooltip,.n-tooltip-shortcut{display:flex;align-items:center}.n-tooltip-shortcut{gap:2px}::slotted([slot=shortcut]){box-sizing:border-box;margin:0;inline-size:var(--n-size-icon-m);block-size:var(--n-size-icon-m);border-radius:var(--n-border-radius-s);border:1px solid var(--n-tooltip-key-border)!important;padding:1px!important;text-align:center;font-size:var(--n-font-size-xs);line-height:var(--n-line-height-tight);letter-spacing:-.5px;vertical-align:middle!important;background-color:var(--n-tooltip-key-background)}`;var nt;let ot=nt=class extends o{constructor(){super(...arguments),this.shortcutSlot=new l(this,"shortcut"),this.proxy=document.createElement("span"),this.visible=!1,this.position="top",this.role="tooltip",this.id="",this.delay=300,this.updatePosition=()=>{return Q(this.targetElement,this,{placement:this.position,middleware:[(t={padding:8},void 0===t&&(t={}),{name:"shift",options:t,async fn(e){const{x:n,y:o,placement:i}=e,{mainAxis:r=!0,crossAxis:s=!1,limiter:l={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}},...a}=t,d={x:n,y:o},h=await m(e,a),u=f(c(i)),p="x"===u?"y":"x";let g=d[u],y=d[p];if(r){const t="y"===u?"bottom":"right";g=v(g+h["y"===u?"top":"left"],g,g-h[t])}if(s){const t="y"===p?"bottom":"right";y=v(y+h["y"===p?"top":"left"],y,y-h[t])}const b=l.fn({...e,[u]:g,[p]:y});return{...b,data:{x:b.x-n,y:b.y-o}}}}),L(8),k()]}).then((({x:t,y:e})=>{this.style.insetInlineStart=`${t}px`,this.style.insetBlockStart=`${e}px`}));var t},this.handleScroll=()=>{this.visible&&this.updatePosition()},this.showTooltip=()=>{var t;this.visible||(null===(t=nt.lastOpened)||void 0===t||t.hideTooltip(),nt.lastOpened=this,this.updatePosition().then((()=>{this.visible=!0})))},this.hideTooltip=()=>{this.visible=!1},this.hideOnEscape=t=>{this.visible&&"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{var t,e;const n=null===(e=null===(t=this.targetElement)||void 0===t?void 0:t.focusableRef)||void 0===e?void 0:e.value;n&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,n.insertAdjacentElement("afterend",this.proxy),function(t,e,n){const o=Z(t,e);o.includes(n)||tt(t,e,o.concat(n))}(n,"aria-describedby",this.id))},this.removeDescribedBy=()=>{var t,e;const n=null===(e=null===(t=this.targetElement)||void 0===t?void 0:t.focusableRef)||void 0===e?void 0:e.value;n&&(this.proxy.remove(),function(t,e,n){const o=Z(t,e);o.includes(n)&&tt(t,e,o.filter((t=>t!==n)))}(n,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback();const t=this.getRootNode(),e=`[aria-describedby='${this.id}']`,n=t.querySelector(e);n?(this.targetElement=n,n.addEventListener("keydown",this.hideOnEscape),n.addEventListener("mouseenter",this.showTooltip),n.addEventListener("mouseleave",this.hideTooltip),n.addEventListener("focus",this.showTooltip),n.addEventListener("blur",this.hideTooltip),window.addEventListener("resize",this.updatePosition,{passive:!0}),window.addEventListener("scroll",this.handleScroll,{passive:!0})):console.warn("NORD: tooltip found no element matching selector:",e)}disconnectedCallback(){super.disconnectedCallback(),this.targetElement&&(this.targetElement.removeEventListener("keydown",this.hideOnEscape),this.targetElement.removeEventListener("mouseenter",this.showTooltip),this.targetElement.removeEventListener("mouseleave",this.hideTooltip),this.targetElement.removeEventListener("focus",this.showTooltip),this.targetElement.removeEventListener("blur",this.hideTooltip),window.removeEventListener("resize",this.updatePosition),window.removeEventListener("scroll",this.handleScroll))}willUpdate(t){t.has("id")&&!this.id&&console.warn("NORD: The tooltip requires an id attribute and value"),t.has("visible")&&(this.visible?(this.addDescribedBy(),this.style.transitionDelay=`${this.delay}ms`,this.style.visibility="visible",this.style.opacity="1"):(this.removeDescribedBy(),this.style.transitionDelay="0ms",this.style.visibility="hidden",this.style.opacity="0"))}render(){return i`<div class="n-tooltip"><slot></slot><div class="n-tooltip-shortcut" ?hidden="${this.shortcutSlot.isEmpty}"><slot class="n-tooltip-key" name="shortcut"></slot></div></div>`}};ot.styles=[a,et],t([s()],ot.prototype,"visible",void 0),t([r({reflect:!0})],ot.prototype,"position",void 0),t([r({reflect:!0})],ot.prototype,"role",void 0),t([r({reflect:!0})],ot.prototype,"id",void 0),t([r({reflect:!0,type:Number})],ot.prototype,"delay",void 0),ot=nt=t([e("nord-tooltip")],ot);var it=ot;export{it as default};
+import{_ as t,n as e}from"./query-assigned-elements-37b095c4.js";import{r as n,s as o,$ as i}from"./lit-element-9646ab7e.js";import{e as r}from"./property-03f59dce.js";import{t as s}from"./state-70f38ceb.js";import{S as l}from"./SlotController-5bfc47d1.js";import{s as a}from"./Component-6762b5eb.js";function c(t){return t.split("-")[0]}function d(t){return t.split("-")[1]}function f(t){return["top","bottom"].includes(c(t))?"x":"y"}function h(t){return"y"===t?"height":"width"}function u(t){let{reference:e,floating:n,placement:o}=t;const i=e.x+e.width/2-n.width/2,r=e.y+e.height/2-n.height/2;let s;switch(c(o)){case"top":s={x:i,y:e.y-n.height};break;case"bottom":s={x:i,y:e.y+e.height};break;case"right":s={x:e.x+e.width,y:r};break;case"left":s={x:e.x-n.width,y:r};break;default:s={x:e.x,y:e.y}}const l=f(o),a=h(l);switch(d(o)){case"start":s[l]=s[l]-(e[a]/2-n[a]/2);break;case"end":s[l]=s[l]+(e[a]/2-n[a]/2)}return s}function p(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function m(t,e){void 0===e&&(e={});const{x:n,y:o,platform:i,rects:r,elements:s,strategy:l}=t,{boundary:a="clippingParents",rootBoundary:c="viewport",elementContext:d="floating",altBoundary:f=!1,padding:h=0}=e,u=function(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}(h),m=s[f?"floating"===d?"reference":"floating":d],g=await i.getClippingClientRect({element:await i.isElement(m)?m:m.contextElement||await i.getDocumentElement({element:s.floating}),boundary:a,rootBoundary:c}),y=p(await i.convertOffsetParentRelativeRectToViewportRelativeRect({rect:"floating"===d?{...r.floating,x:n,y:o}:r.reference,offsetParent:await i.getOffsetParent({element:s.floating}),strategy:l}));return{top:g.top-y.top+u.top,bottom:y.bottom-g.bottom+u.bottom,left:g.left-y.left+u.left,right:y.right-g.right+u.right}}const g=Math.min,y=Math.max;function v(t,e,n){return y(t,g(e,n))}const b={left:"right",right:"left",bottom:"top",top:"bottom"};function x(t){return t.replace(/left|right|bottom|top/g,(t=>b[t]))}const w={start:"end",end:"start"};function E(t){return t.replace(/start|end/g,(t=>w[t]))}const k=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var n,o;const{placement:i,middlewareData:r,rects:s,initialPlacement:l}=e;if(null!=(n=r.flip)&&n.skip)return{};const{mainAxis:a=!0,crossAxis:u=!0,fallbackPlacements:p,fallbackStrategy:g="bestFit",flipAlignment:y=!0,...v}=t,b=c(i),w=p||(b===l||!y?[x(l)]:function(t){const e=x(t);return[E(t),e,E(e)]}(l)),k=[l,...w],L=await m(e,v),T=[];let R=(null==(o=r.flip)?void 0:o.overflows)||[];if(a&&T.push(L[b]),u){const{main:t,cross:e}=function(t,e){const n="start"===d(t),o=f(t),i=h(o);let r="x"===o?n?"right":"left":n?"bottom":"top";return e.reference[i]>e.floating[i]&&(r=x(r)),{main:r,cross:x(r)}}(i,s);T.push(L[t],L[e])}if(R=[...R,{placement:i,overflows:T}],!T.every((t=>t<=0))){var C,D;const t=(null!=(C=null==(D=r.flip)?void 0:D.index)?C:0)+1,e=k[t];if(e)return{data:{index:t,overflows:R},reset:{placement:e}};let n="bottom";switch(g){case"bestFit":{var S;const t=null==(S=R.slice().sort(((t,e)=>t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)-e.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)))[0])?void 0:S.placement;t&&(n=t);break}case"initialPlacement":n=l}return{data:{skip:!0},reset:{placement:n}}}return{}}}};const L=function(t){return void 0===t&&(t=0),{name:"offset",options:t,fn(e){const{x:n,y:o,placement:i,rects:r}=e,s=function(t){let{placement:e,rects:n,value:o}=t;const i=c(e),r=["left","top"].includes(i)?-1:1,s="function"==typeof o?o({...n,placement:e}):o,{mainAxis:l,crossAxis:a}="number"==typeof s?{mainAxis:s,crossAxis:0}:{mainAxis:0,crossAxis:0,...s};return"x"===f(i)?{x:a,y:l*r}:{x:l*r,y:a}}({placement:i,rects:r,value:t});return{x:n+s.x,y:o+s.y,data:s}}}};function T(t){return"[object Window]"===(null==t?void 0:t.toString())}function R(t){if(null==t)return window;if(!T(t)){const e=t.ownerDocument;return e&&e.defaultView||window}return t}function C(t){return R(t).getComputedStyle(t)}function D(t){return T(t)?"":t?(t.nodeName||"").toLowerCase():""}function S(t){return t instanceof R(t).HTMLElement}function P(t){return t instanceof R(t).Element}function A(t){return t instanceof R(t).ShadowRoot||t instanceof ShadowRoot}function W(t){const{overflow:e,overflowX:n,overflowY:o}=C(t);return/auto|scroll|overlay|hidden/.test(e+o+n)}function O(t){return["table","td","th"].includes(D(t))}function z(t){const e=navigator.userAgent.toLowerCase().includes("firefox"),n=C(t);return"none"!==n.transform||"none"!==n.perspective||"paint"===n.contain||["transform","perspective"].includes(n.willChange)||e&&"filter"===n.willChange||e&&!!n.filter&&"none"!==n.filter}const H=Math.min,N=Math.max,j=Math.round;function B(t,e){void 0===e&&(e=!1);const n=t.getBoundingClientRect();let o=1,i=1;return e&&S(t)&&(o=t.offsetWidth>0&&j(n.width)/t.offsetWidth||1,i=t.offsetHeight>0&&j(n.height)/t.offsetHeight||1),{width:n.width/o,height:n.height/i,top:n.top/i,right:n.right/o,bottom:n.bottom/i,left:n.left/o,x:n.left/o,y:n.top/i}}function M(t){return(e=t,(e instanceof R(e).Node?t.ownerDocument:t.document)||window.document).documentElement;var e}function V(t){return T(t)?{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}:{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function $(t){return B(M(t)).left+V(t).scrollLeft}function q(t,e,n){const o=S(e),i=M(e),r=B(t,o&&function(t){const e=B(t);return j(e.width)!==t.offsetWidth||j(e.height)!==t.offsetHeight}(e));let s={scrollLeft:0,scrollTop:0};const l={x:0,y:0};if(o||!o&&"fixed"!==n)if(("body"!==D(e)||W(i))&&(s=V(e)),S(e)){const t=B(e,!0);l.x=t.x+e.clientLeft,l.y=t.y+e.clientTop}else i&&(l.x=$(i));return{x:r.left+s.scrollLeft-l.x,y:r.top+s.scrollTop-l.y,width:r.width,height:r.height}}function F(t){return"html"===D(t)?t:t.assignedSlot||t.parentNode||(A(t)?t.host:null)||M(t)}function X(t){return S(t)&&"fixed"!==getComputedStyle(t).position?t.offsetParent:null}function Y(t){const e=R(t);let n=X(t);for(;n&&O(n)&&"static"===getComputedStyle(n).position;)n=X(n);return n&&("html"===D(n)||"body"===D(n)&&"static"===getComputedStyle(n).position&&!z(n))?e:n||function(t){let e=F(t);for(;S(e)&&!["html","body"].includes(D(e));){if(z(e))return e;e=e.parentNode}return null}(t)||e}function I(t){return{width:t.offsetWidth,height:t.offsetHeight}}function U(t){return["html","body","#document"].includes(D(t))?t.ownerDocument.body:S(t)&&W(t)?t:U(F(t))}function _(t,e){var n;void 0===e&&(e=[]);const o=U(t),i=o===(null==(n=t.ownerDocument)?void 0:n.body),r=R(o),s=i?[r].concat(r.visualViewport||[],W(o)?o:[]):o,l=e.concat(s);return i?l:l.concat(_(F(s)))}function G(t,e){return"viewport"===e?p(function(t){const e=R(t),n=M(t),o=e.visualViewport;let i=n.clientWidth,r=n.clientHeight,s=0,l=0;return o&&(i=o.width,r=o.height,Math.abs(e.innerWidth/o.scale-o.width)<.01&&(s=o.offsetLeft,l=o.offsetTop)),{width:i,height:r,x:s,y:l}}(t)):P(e)?function(t){const e=B(t),n=e.top+t.clientTop,o=e.left+t.clientLeft;return{top:n,left:o,x:o,y:n,right:o+t.clientWidth,bottom:n+t.clientHeight,width:t.clientWidth,height:t.clientHeight}}(e):p(function(t){var e;const n=M(t),o=V(t),i=null==(e=t.ownerDocument)?void 0:e.body,r=N(n.scrollWidth,n.clientWidth,i?i.scrollWidth:0,i?i.clientWidth:0),s=N(n.scrollHeight,n.clientHeight,i?i.scrollHeight:0,i?i.clientHeight:0);let l=-o.scrollLeft+$(t);const a=-o.scrollTop;return"rtl"===C(i||n).direction&&(l+=N(n.clientWidth,i?i.clientWidth:0)-r),{width:r,height:s,x:l,y:a}}(M(t)))}function J(t){const e=_(F(t)),n=["absolute","fixed"].includes(C(t).position)&&S(t)?Y(t):t;return P(n)?e.filter((t=>P(t)&&function(t,e){const n=null==e.getRootNode?void 0:e.getRootNode();if(t.contains(e))return!0;if(n&&A(n)){let n=e;do{if(n&&t===n)return!0;n=n.parentNode||n.host}while(n)}return!1}(t,n)&&"body"!==D(t))):[]}const K={getElementRects:t=>{let{reference:e,floating:n,strategy:o}=t;return{reference:q(e,Y(n),o),floating:{...I(n),x:0,y:0}}},convertOffsetParentRelativeRectToViewportRelativeRect:t=>function(t){let{rect:e,offsetParent:n,strategy:o}=t;const i=S(n),r=M(n);if(n===r)return e;let s={scrollLeft:0,scrollTop:0};const l={x:0,y:0};if((i||!i&&"fixed"!==o)&&(("body"!==D(n)||W(r))&&(s=V(n)),S(n))){const t=B(n,!0);l.x=t.x+n.clientLeft,l.y=t.y+n.clientTop}return{...e,x:e.x-s.scrollLeft+l.x,y:e.y-s.scrollTop+l.y}}(t),getOffsetParent:t=>{let{element:e}=t;return Y(e)},isElement:t=>P(t),getDocumentElement:t=>{let{element:e}=t;return M(e)},getClippingClientRect:t=>function(t){let{element:e,boundary:n,rootBoundary:o}=t;const i=[..."clippingParents"===n?J(e):[].concat(n),o],r=i[0],s=i.reduce(((t,n)=>{const o=G(e,n);return t.top=N(o.top,t.top),t.right=H(o.right,t.right),t.bottom=H(o.bottom,t.bottom),t.left=N(o.left,t.left),t}),G(e,r));return s.width=s.right-s.left,s.height=s.bottom-s.top,s.x=s.left,s.y=s.top,s}(t),getDimensions:t=>{let{element:e}=t;return I(e)},getClientRects:t=>{let{element:e}=t;return e.getClientRects()}},Q=(t,e,n)=>(async(t,e,n)=>{const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:s}=n;let l=await s.getElementRects({reference:t,floating:e,strategy:i}),{x:a,y:c}=u({...l,placement:o}),d=o,f={};for(let n=0;n<r.length;n++){const{name:h,fn:p}=r[n],{x:m,y:g,data:y,reset:v}=await p({x:a,y:c,initialPlacement:o,placement:d,strategy:i,middlewareData:f,rects:l,platform:s,elements:{reference:t,floating:e}});a=null!=m?m:a,c=null!=g?g:c,f={...f,[h]:null!=y?y:{}},v&&("object"==typeof v&&(v.placement&&(d=v.placement),v.rects&&(l=!0===v.rects?await s.getElementRects({reference:t,floating:e,strategy:i}):v.rects),({x:a,y:c}=u({...l,placement:d}))),n=-1)}return{x:a,y:c,placement:d,strategy:i,middlewareData:f}})(t,e,{platform:K,...n});function Z(t,e){const n=t.getAttribute(e);return n?n.split(/\s+/):[]}function tt(t,e,n){t.setAttribute(e,n.join(" "))}const et=n`:host{--n-tooltip-background:rgba(20, 20, 20, 0.95);--n-tooltip-color:#fff;--n-tooltip-key-border:rgba(255, 255, 255, 0.03);--n-tooltip-key-background:rgba(255, 255, 255, 0.1);position:absolute;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .4s ease,visibility .4s ease;z-index:var(--n-index-popout)}.n-tooltip{gap:var(--n-space-s);font-family:var(--n-font-family);font-size:var(--n-font-size-xs);line-height:var(--n-line-height);color:var(--n-tooltip-color);padding:calc(var(--n-space-s)/ 1.5) var(--n-space-s);background-color:var(--n-tooltip-background);border-radius:var(--n-border-radius-s)}.n-tooltip,.n-tooltip-shortcut{display:flex;align-items:center}.n-tooltip-shortcut{gap:2px}::slotted([slot=shortcut]){box-sizing:border-box;margin:0;inline-size:var(--n-size-icon-m);block-size:var(--n-size-icon-m);border-radius:var(--n-border-radius-s);border:1px solid var(--n-tooltip-key-border)!important;padding:1px!important;text-align:center;font-size:var(--n-font-size-xs);line-height:var(--n-line-height-tight);letter-spacing:-.5px;vertical-align:middle!important;background-color:var(--n-tooltip-key-background)}`;var nt;let ot=nt=class extends o{constructor(){super(...arguments),this.shortcutSlot=new l(this,"shortcut"),this.proxy=document.createElement("span"),this.visible=!1,this.position="top",this.role="tooltip",this.id="",this.delay=300,this.updatePosition=()=>{return Q(this.targetElement,this,{placement:this.position,middleware:[(t={padding:8},void 0===t&&(t={}),{name:"shift",options:t,async fn(e){const{x:n,y:o,placement:i}=e,{mainAxis:r=!0,crossAxis:s=!1,limiter:l={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}},...a}=t,d={x:n,y:o},h=await m(e,a),u=f(c(i)),p="x"===u?"y":"x";let g=d[u],y=d[p];if(r){const t="y"===u?"bottom":"right";g=v(g+h["y"===u?"top":"left"],g,g-h[t])}if(s){const t="y"===p?"bottom":"right";y=v(y+h["y"===p?"top":"left"],y,y-h[t])}const b=l.fn({...e,[u]:g,[p]:y});return{...b,data:{x:b.x-n,y:b.y-o}}}}),L(8),k()]}).then((({x:t,y:e})=>{this.style.insetInlineStart=`${t}px`,this.style.insetBlockStart=`${e}px`}));var t},this.handleScroll=()=>{this.visible&&this.updatePosition()},this.showTooltip=()=>{var t;this.visible||(null===(t=nt.lastOpened)||void 0===t||t.hideTooltip(),nt.lastOpened=this,this.updatePosition().then((()=>{this.visible=!0})))},this.hideTooltip=()=>{this.visible=!1},this.hideOnEscape=t=>{this.visible&&"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{var t,e;const n=null===(e=null===(t=this.targetElement)||void 0===t?void 0:t.focusableRef)||void 0===e?void 0:e.value;n&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,n.insertAdjacentElement("afterend",this.proxy),function(t,e,n){const o=Z(t,e);o.includes(n)||tt(t,e,o.concat(n))}(n,"aria-describedby",this.id))},this.removeDescribedBy=()=>{var t,e;const n=null===(e=null===(t=this.targetElement)||void 0===t?void 0:t.focusableRef)||void 0===e?void 0:e.value;n&&(this.proxy.remove(),function(t,e,n){const o=Z(t,e);o.includes(n)&&tt(t,e,o.filter((t=>t!==n)))}(n,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback();const t=this.getRootNode(),e=`[aria-describedby='${this.id}']`,n=t.querySelector(e);n?(this.targetElement=n,n.addEventListener("keydown",this.hideOnEscape),n.addEventListener("mouseenter",this.showTooltip),n.addEventListener("mouseleave",this.hideTooltip),n.addEventListener("focus",this.showTooltip),n.addEventListener("blur",this.hideTooltip),window.addEventListener("resize",this.updatePosition,{passive:!0}),window.addEventListener("scroll",this.handleScroll,{passive:!0})):console.warn("NORD: tooltip found no element matching selector:",e)}disconnectedCallback(){super.disconnectedCallback(),this.targetElement&&(this.targetElement.removeEventListener("keydown",this.hideOnEscape),this.targetElement.removeEventListener("mouseenter",this.showTooltip),this.targetElement.removeEventListener("mouseleave",this.hideTooltip),this.targetElement.removeEventListener("focus",this.showTooltip),this.targetElement.removeEventListener("blur",this.hideTooltip),window.removeEventListener("resize",this.updatePosition),window.removeEventListener("scroll",this.handleScroll))}willUpdate(t){t.has("id")&&!this.id&&console.warn("NORD: The tooltip requires an id attribute and value"),t.has("visible")&&(this.visible?(this.addDescribedBy(),this.style.transitionDelay=`${this.delay}ms`,this.style.visibility="visible",this.style.opacity="1"):(this.removeDescribedBy(),this.style.transitionDelay="0ms",this.style.visibility="hidden",this.style.opacity="0"))}render(){return i`<div class="n-tooltip"><slot></slot><div class="n-tooltip-shortcut" ?hidden="${this.shortcutSlot.isEmpty}"><slot class="n-tooltip-key" name="shortcut"></slot></div></div>`}};ot.styles=[a,et],t([s()],ot.prototype,"visible",void 0),t([r({reflect:!0})],ot.prototype,"position",void 0),t([r({reflect:!0})],ot.prototype,"role",void 0),t([r({reflect:!0})],ot.prototype,"id",void 0),t([r({reflect:!0,type:Number})],ot.prototype,"delay",void 0),ot=nt=t([e("nord-tooltip")],ot);var it=ot;export{it as default};
 //# sourceMappingURL=Tooltip.js.map