@nordhealth/components 1.0.1 → 1.1.1
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.
- package/README.md +29 -1
- package/custom-elements.json +3009 -3023
- package/lib/Avatar.js +1 -1
- package/lib/Badge.js +1 -1
- package/lib/Banner.js +1 -1
- package/lib/Banner.js.map +1 -1
- package/lib/Button.js +1 -1
- package/lib/{Calendar-52774c03.js → Calendar-73a2fcfd.js} +2 -2
- package/lib/{Calendar-52774c03.js.map → Calendar-73a2fcfd.js.map} +1 -1
- package/lib/Calendar.js +1 -1
- package/lib/Card.js +1 -1
- package/lib/Checkbox.js +1 -1
- package/lib/CommandMenu.js +1 -1
- package/lib/CommandMenuAction.js +1 -1
- package/lib/{Component-6bf383d6.js → Component-fa316972.js} +2 -2
- package/lib/Component-fa316972.js.map +1 -0
- package/lib/DatePicker.js +1 -1
- package/lib/DatePicker.js.map +1 -1
- package/lib/Dropdown.js +1 -1
- package/lib/Dropdown.js.map +1 -1
- package/lib/DropdownGroup.js +1 -1
- package/lib/DropdownGroup.js.map +1 -1
- package/lib/DropdownItem.js +1 -1
- package/lib/DropdownItem.js.map +1 -1
- package/lib/EmptyState.js +1 -1
- package/lib/Fieldset.js +1 -1
- package/lib/FocusableMixin-4c85ced9.js +2 -0
- package/lib/{FocusableMixin-c010d3b3.js.map → FocusableMixin-4c85ced9.js.map} +1 -1
- package/lib/{FormAssociatedMixin-f69a60dd.js → FormAssociatedMixin-9d38814c.js} +2 -2
- package/lib/{FormAssociatedMixin-f69a60dd.js.map → FormAssociatedMixin-9d38814c.js.map} +1 -1
- package/lib/{FormField-900069ed.js → FormField-44e865a4.js} +2 -2
- package/lib/FormField-44e865a4.js.map +1 -0
- package/lib/Header.js +1 -1
- package/lib/Icon.js +1 -1
- package/lib/Input.js +1 -1
- package/lib/Layout.js +1 -1
- package/lib/{LightDomController-f21f0a7c.js → LightDomController-e0762f0d.js} +2 -2
- package/lib/{LightDomController-f21f0a7c.js.map → LightDomController-e0762f0d.js.map} +1 -1
- package/lib/NavGroup.js +1 -1
- package/lib/NavGroup.js.map +1 -1
- package/lib/NavItem.js +1 -1
- package/lib/NavItem.js.map +1 -1
- package/lib/Navigation.js +1 -1
- package/lib/Popout.js +1 -1
- package/lib/Popout.js.map +1 -1
- package/lib/ProgressBar.js +1 -1
- package/lib/ProgressBar.js.map +1 -1
- package/lib/Radio.js +1 -1
- package/lib/Select.js +1 -1
- package/lib/Spinner.js +1 -1
- package/lib/Stack.js +1 -1
- package/lib/Table.js +1 -1
- package/lib/TextField-f8848f28.js +2 -0
- package/lib/TextField-f8848f28.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/VisuallyHidden.js +1 -1
- package/lib/bundle.js +8 -8
- package/lib/bundle.js.map +1 -1
- package/lib/{class-map-f93f9ba8.js → class-map-9e39244c.js} +2 -2
- package/lib/{class-map-f93f9ba8.js.map → class-map-9e39244c.js.map} +1 -1
- package/lib/cond-ed8742b5.js +2 -0
- package/lib/{cond-a3e00141.js.map → cond-ed8742b5.js.map} +1 -1
- package/lib/{if-defined-ee2efb2f.js → if-defined-4d1db15c.js} +2 -2
- package/lib/{if-defined-ee2efb2f.js.map → if-defined-4d1db15c.js.map} +1 -1
- package/lib/index.js +1 -1
- package/lib/{lit-element-99bdfe5a.js → lit-element-e382250e.js} +3 -3
- package/lib/{lit-element-99bdfe5a.js.map → lit-element-e382250e.js.map} +1 -1
- package/lib/month-view.js +1 -1
- package/lib/number-1c122a1e.js +7 -0
- package/lib/{number-ff1c5d88.js.map → number-1c122a1e.js.map} +1 -1
- package/lib/{ref-7e1d4d24.js → ref-adf41565.js} +3 -3
- package/lib/{ref-7e1d4d24.js.map → ref-adf41565.js.map} +1 -1
- package/lib/src/fieldset/Fieldset.test.d.ts +2 -0
- package/lib/src/nav-group/NavGroup.d.ts +2 -4
- package/lib/src/nav-item/NavItem.d.ts +1 -1
- package/lib/src/popout/Popout.d.ts +3 -0
- package/lib/{unsafe-html-feceb926.js → unsafe-html-76575c49.js} +2 -2
- package/lib/{unsafe-html-feceb926.js.map → unsafe-html-76575c49.js.map} +1 -1
- package/package.json +8 -8
- package/lib/Component-6bf383d6.js.map +0 -1
- package/lib/FocusableMixin-c010d3b3.js +0 -2
- package/lib/FormField-900069ed.js.map +0 -1
- package/lib/TextField-0ba775e0.js +0 -2
- package/lib/TextField-0ba775e0.js.map +0 -1
- package/lib/cond-a3e00141.js +0 -2
- package/lib/number-ff1c5d88.js +0 -7
package/lib/Navigation.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,n as o}from"./query-assigned-elements-ef860822.js";import{r,$ as n,s as a}from"./lit-element-
|
|
1
|
+
import{_ as e,n as o}from"./query-assigned-elements-ef860822.js";import{r,$ as n,s as a}from"./lit-element-e382250e.js";import{D as l}from"./DraftComponentMixin-9e4b7b34.js";const s=r`:host{all:unset;display:flex;flex-direction:column;block-size:100%;background:var(--n-color-nav-surface);border-inline-end:1px solid var(--n-color-border);overflow:hidden auto}*,::after,::before{box-sizing:border-box}nav{flex-grow:1;padding:var(--n-space-m)}slot[name=footer],slot[name=header]{display:flex;flex-direction:column;justify-content:center}slot[name=header]{min-block-size:var(--n-space-xxl);border-block-end:1px solid var(--n-color-border)}slot[name=footer]{padding:var(--n-space-m)}`;let t=class extends(l(a)){render(){return n`<slot name="header"></slot><nav><slot></slot></nav><slot name="footer"></slot>`}};t.styles=s,t=e([o("nord-navigation")],t);var d=t;export{d as default};
|
|
2
2
|
//# sourceMappingURL=Navigation.js.map
|
package/lib/Popout.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t,n as
|
|
1
|
+
import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as o,s as i,$ as s}from"./lit-element-e382250e.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{a,c as p,l,o as d,f as h,s as m,h as c}from"./positioning-763efb3a.js";import{L as u}from"./LightDismissController-a2645ae6.js";import{N as f}from"./events-731d0007.js";import{s as v}from"./Component-fa316972.js";import{D as g}from"./DirectionController-8b298382.js";import{o as b}from"./observe-a9c6dfb6.js";import"./EventController-d99ebeef.js";import"./ShortcutController-87615e31.js";import"./tinykeys.module-84e6cc41.js";const y=o`:host{position:fixed;pointer-events:none;z-index:var(--n-index-popout);left:var(--x);top:var(--y);font-size:var(--n-font-size-m);color:var(--n-color-text)}.n-popout{visibility:hidden;opacity:0;pointer-events:none;transition:transform var(--n-transition-slowly),opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transform:translateY(-10px) scale(.97);transform-origin:top left;will-change:transform,opacity,visibility;background:var(--n-color-surface);box-shadow:var(--n-box-shadow-popout);border-radius:var(--n-border-radius-s)}@media (max-width:35.9375em){:host{inline-size:100%;inset:0;inset-block-start:auto;font-size:var(--n-font-size-l)}.n-popout{transition:transform var(--n-transition-mobile),opacity var(--n-transition-mobile),visibility var(--n-transition-mobile);transform:translateY(100%);transform-origin:bottom center;border-radius:0}}.n-popout.top-end,.n-popout.top-start{transform:translateY(10px) scale(.97)}.n-popout.left-start{transform:translateX(10px) scale(.97)}.n-popout.left-end,.n-popout.top-end{transform-origin:bottom right}.n-popout.bottom-end,.n-popout.left-start{transform-origin:top right}.n-popout.left-end{transform:translateX(10px) scale(.97);transform-origin:bottom right}.n-popout.right-end,.n-popout.right-start{transform:translateX(-10px) scale(.97);transform-origin:bottom left}.n-popout.right-start{transform-origin:top left}.n-popout.top-start.is-rtl{transform-origin:top right}.n-popout.top-end.is-rtl{transform-origin:top left}.n-popout.bottom-start.is-rtl{transform-origin:bottom right}.n-popout.bottom-end.is-rtl{transform-origin:bottom left}.n-popout[aria-hidden=false]{transition-property:transform,opacity;visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0) translateX(0) scale(1)}`;let w=class extends i{constructor(){super(...arguments),this.breakpoint="35.9375em",this.viewportObserver=new ResizeObserver((t=>{t.forEach((()=>{this.smallViewport=window.matchMedia(`(max-width: ${this.breakpoint})`).matches,this.smallViewport||(this.cleanupAutoUpdate=a(this.targetElement,this,this.updatePosition))}))})),this.dismiss=new u(this,{isOpen:()=>this.open,onDismiss:t=>this.hide("click"!==t.type),isDismissible:t=>t!==this&&t!==this.targetElement}),this.direction=new g(this),this.open=!1,this.smallViewport=!1,this.align="start",this.position="block-end",this.id="",this.updatePosition=async()=>{var t;const{x:e,y:o,placement:i,middlewareData:s}=await p(this.targetElement,this,{strategy:"fixed",placement:l(this.position,this.align,this.direction.dir),middleware:[d(8),h(),m({padding:8}),c()]});this.computedPosition=i,this.style.setProperty("--x",`${e}px`),this.style.setProperty("--y",`${o}px`),(null===(t=s.hide)||void 0===t?void 0:t.referenceHidden)&&this.hide()},this.toggleOpen=t=>{t.preventDefault(),this.open?this.hide(!1):this.smallViewport?this.show():this.updatePosition().then((()=>this.show()))}}show(){this.open||(this.open=!0,this.smallViewport=window.matchMedia(`(max-width: ${this.breakpoint})`).matches,this.viewportObserver.observe(document.documentElement),this.smallViewport||(this.cleanupAutoUpdate=a(this.targetElement,this,this.updatePosition)),this.updateComplete.then((()=>{this.dispatchEvent(new f("open"))})))}hide(t=!0){var e;this.open&&(this.open=!1,null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.viewportObserver.unobserve(document.documentElement),this.dispatchEvent(new f("close")),t&&this.targetElement.focus({preventScroll:!0}))}firstUpdated(){this.smallViewport||this.updatePosition()}connectedCallback(){super.connectedCallback(),this.targetElement=this.getToggle(),this.targetElement.addEventListener("click",this.toggleOpen)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.cleanupAutoUpdate)||void 0===t||t.call(this),this.viewportObserver.unobserve(document.documentElement),this.targetElement.removeAttribute("aria-expanded"),this.targetElement.removeEventListener("click",this.toggleOpen)}render(){return s`<div class="n-popout ${this.computedPosition} is-${this.direction.dir}" aria-hidden="${this.open?"false":"true"}"><slot></slot></div>`}handleIdChange(){this.id||console.warn("NORD: popout requires an id attribute and value")}handleOpenChange(){this.targetElement.setAttribute("aria-expanded",`${this.open}`)}getToggle(){const t=this.getRootNode().querySelector(`[aria-controls='${this.id}']`);return t instanceof HTMLSlotElement?t.assignedElements()[0]:t}};w.styles=[v,y],t([r()],w.prototype,"open",void 0),t([r()],w.prototype,"computedPosition",void 0),t([r()],w.prototype,"smallViewport",void 0),t([n({reflect:!0})],w.prototype,"align",void 0),t([n({reflect:!0})],w.prototype,"position",void 0),t([n({reflect:!0})],w.prototype,"id",void 0),t([b("id")],w.prototype,"handleIdChange",null),t([b("open")],w.prototype,"handleOpenChange",null),w=t([e("nord-popout")],w);var x=w;export{x as default};
|
|
2
2
|
//# sourceMappingURL=Popout.js.map
|
package/lib/Popout.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popout.js","sources":["../src/popout/Popout.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, shift, offset, flip, hide, autoUpdate, Placement } from \"@floating-ui/dom\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Popout.css\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n/**\n * Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.\n *\n * @status new\n * @category overlay\n * @slot - The popout content.\n */\n@customElement(\"nord-popout\")\nexport default class Popout extends LitElement {\n static styles = [componentStyle, style]\n\n private targetElement!: HTMLElement\n private cleanupAutoUpdate?: ReturnType<typeof autoUpdate>\n\n /**\n * Handle dismissal of the popout, clicking outside the target button and popout.\n */\n private dismiss = new LightDismissController(this, {\n isOpen: () => this.open,\n onDismiss: e => this.hide(e.type !== \"click\"),\n isDismissible: node => node !== this && node !== this.targetElement,\n })\n\n private direction = new DirectionController(this)\n\n @state() private open = false\n\n @state() private computedPosition?: Placement\n\n /**\n * Set the alignment of the popout in relation to the toggle depending on the position.\n * `start` will align the left of the popout to the left of the toggle.\n * `end` will align the right of the popout to the right of the toggle.\n * A popout with a set position of `inline-start` or `inline-end` will switch\n * `start` and `end` to the top and bottom of the popout respectively.\n */\n @property({ reflect: true }) align: \"start\" | \"end\" = \"start\"\n\n /**\n * Set the position of the popout in relation to the toggle.\n * Options follow logical properties.\n * `block-start` and `block-end` referring to top and bottom respectively,\n * `inline-start` and `inline-end` referring to left and right respectively.\n */\n @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-end\"\n\n /**\n * The id for the active element to reference via aria-controls.\n */\n @property({ reflect: true }) id: string = \"\"\n\n /**\n * Show the popout, moving focus to the calendar inside.\n */\n show() {\n if (this.open) {\n return\n }\n\n this.open = true\n this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n\n // we should only focus once the popout is visible after render is complete\n this.updateComplete.then(() => {\n /**\n * Dispatched when the popout is opened.\n */\n this.dispatchEvent(new NordEvent(\"open\"))\n })\n }\n\n /**\n * Hide the popout.\n * @param {boolean} moveFocusToButton prevent focus returning to the target\n * button. Default is true.\n */\n hide(moveFocusToButton = true) {\n if (!this.open) {\n return\n }\n\n this.open = false\n this.cleanupAutoUpdate?.()\n\n /**\n * Dispatched when the popout is closed.\n */\n this.dispatchEvent(new NordEvent(\"close\"))\n\n if (moveFocusToButton) {\n this.targetElement.focus({ preventScroll: true })\n }\n }\n\n /**\n * Position the popout on load.\n */\n firstUpdated() {\n this.updatePosition()\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.targetElement = this.getToggle()\n this.targetElement.addEventListener(\"click\", this.toggleOpen)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this.cleanupAutoUpdate?.()\n this.targetElement.removeAttribute(\"aria-expanded\")\n this.targetElement.removeEventListener(\"click\", this.toggleOpen)\n }\n\n render() {\n return html`\n <div\n class=\"n-popout ${this.computedPosition} is-${this.direction.dir}\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n >\n <slot></slot>\n </div>\n `\n }\n\n @observe(\"id\")\n protected handleIdChange() {\n if (!this.id) {\n // eslint-disable-next-line no-console\n console.warn(\"NORD: popout requires an id attribute and value\")\n }\n }\n\n @observe(\"open\")\n protected handleOpenChange() {\n this.targetElement.setAttribute(\"aria-expanded\", `${this.open}`)\n }\n\n /**\n * Get the position of the element toggling the popout\n * and position the popout underneath it, taking into account the optional placement.\n */\n private updatePosition = async () => {\n const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this, {\n strategy: \"fixed\",\n placement: logicalToPhysical(this.position, this.align, this.direction.dir),\n middleware: [\n shift({\n padding: 8,\n }),\n offset(8),\n flip(),\n hide(),\n ],\n })\n\n this.computedPosition = placement\n\n // use physical properties here since floating-ui\n // works exclusively in physical dimensions\n // we do all the mapping in logicalToPhysical\n this.style.left = `${x}px`\n this.style.top = `${y}px`\n\n if (middlewareData.hide?.referenceHidden) {\n this.hide()\n }\n }\n\n /**\n * Toggle the popout open or closed using state.\n * Updating the position to underneath the target button before the popout is opened.\n */\n private toggleOpen = (e: Event) => {\n e.preventDefault()\n if (this.open) {\n this.hide(false)\n } else {\n this.updatePosition().then(() => this.show())\n }\n }\n\n private getToggle() {\n const rootNode = this.getRootNode() as Document | ShadowRoot\n const toggle = <HTMLElement>rootNode.querySelector(`[aria-controls='${this.id}']`)\n\n if (toggle instanceof HTMLSlotElement) {\n return toggle.assignedElements()[0] as HTMLElement\n }\n\n return toggle\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-popout\": Popout\n }\n}\n"],"names":["Popout","LitElement","constructor","this","dismiss","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","targetElement","direction","DirectionController","align","position","id","updatePosition","async","x","y","placement","middlewareData","computePosition","strategy","logicalToPhysical","dir","middleware","shift","padding","offset","flip","computedPosition","style","left","top","_a","referenceHidden","toggleOpen","preventDefault","then","show","cleanupAutoUpdate","autoUpdate","updateComplete","dispatchEvent","NordEvent","moveFocusToButton","call","focus","preventScroll","firstUpdated","connectedCallback","super","getToggle","addEventListener","disconnectedCallback","removeAttribute","removeEventListener","render","html","handleIdChange","console","warn","handleOpenChange","setAttribute","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","styles","componentStyle","__decorate","state","prototype","property","reflect","observe","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Popout.js","sources":["../src/popout/Popout.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, shift, offset, flip, hide, autoUpdate, Placement } from \"@floating-ui/dom\"\nimport { LightDismissController } from \"../common/controllers/LightDismissController.js\"\nimport { NordEvent } from \"../common/events.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Popout.css\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n/**\n * Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.\n *\n * @status new\n * @category overlay\n * @slot - The popout content.\n */\n@customElement(\"nord-popout\")\nexport default class Popout extends LitElement {\n static styles = [componentStyle, style]\n\n private targetElement!: HTMLElement\n private cleanupAutoUpdate?: ReturnType<typeof autoUpdate>\n private breakpoint = \"35.9375em\"\n\n // Observe the browser window for resize events\n private viewportObserver = new ResizeObserver(entries => {\n entries.forEach(() => {\n // Update the viewport state\n this.smallViewport = window.matchMedia(`(max-width: ${this.breakpoint})`).matches\n\n // Ensure autoUpdate is ready when going from small to large viewports\n if (!this.smallViewport) {\n this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n }\n })\n })\n\n /**\n * Handle dismissal of the popout, clicking outside the target button and popout.\n */\n private dismiss = new LightDismissController(this, {\n isOpen: () => this.open,\n onDismiss: e => this.hide(e.type !== \"click\"),\n isDismissible: node => node !== this && node !== this.targetElement,\n })\n\n private direction = new DirectionController(this)\n\n @state() private open = false\n\n @state() private computedPosition?: Placement\n\n @state() private smallViewport = false\n\n /**\n * Set the alignment of the popout in relation to the toggle depending on the position.\n * `start` will align the left of the popout to the left of the toggle.\n * `end` will align the right of the popout to the right of the toggle.\n * A popout with a set position of `inline-start` or `inline-end` will switch\n * `start` and `end` to the top and bottom of the popout respectively.\n */\n @property({ reflect: true }) align: \"start\" | \"end\" = \"start\"\n\n /**\n * Set the position of the popout in relation to the toggle.\n * Options follow logical properties.\n * `block-start` and `block-end` referring to top and bottom respectively,\n * `inline-start` and `inline-end` referring to left and right respectively.\n */\n @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-end\"\n\n /**\n * The id for the active element to reference via aria-controls.\n */\n @property({ reflect: true }) id: string = \"\"\n\n /**\n * Show the popout, moving focus to the calendar inside.\n */\n show() {\n if (this.open) {\n return\n }\n\n this.open = true\n\n // Check the viewport width on show and update the state\n this.smallViewport = window.matchMedia(`(max-width: ${this.breakpoint})`).matches\n\n // Observe the document element, ergo the browser width\n this.viewportObserver.observe(document.documentElement)\n\n if (!this.smallViewport) {\n this.cleanupAutoUpdate = autoUpdate(this.targetElement, this, this.updatePosition)\n }\n\n // we should only focus once the popout is visible after render is complete\n this.updateComplete.then(() => {\n /**\n * Dispatched when the popout is opened.\n */\n this.dispatchEvent(new NordEvent(\"open\"))\n })\n }\n\n /**\n * Hide the popout.\n * @param {boolean} moveFocusToButton prevent focus returning to the target\n * button. Default is true.\n */\n hide(moveFocusToButton = true) {\n if (!this.open) {\n return\n }\n\n this.open = false\n\n this.cleanupAutoUpdate?.()\n\n // Stop observing the browser width when the popout is hidden\n this.viewportObserver.unobserve(document.documentElement)\n\n /**\n * Dispatched when the popout is closed.\n */\n this.dispatchEvent(new NordEvent(\"close\"))\n\n if (moveFocusToButton) {\n this.targetElement.focus({ preventScroll: true })\n }\n }\n\n /**\n * Position the popout on load.\n */\n firstUpdated() {\n if (!this.smallViewport) {\n this.updatePosition()\n }\n }\n\n connectedCallback() {\n super.connectedCallback()\n\n this.targetElement = this.getToggle()\n this.targetElement.addEventListener(\"click\", this.toggleOpen)\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n\n this.cleanupAutoUpdate?.()\n\n // Ensure we've stopped observing the document element\n this.viewportObserver.unobserve(document.documentElement)\n\n this.targetElement.removeAttribute(\"aria-expanded\")\n this.targetElement.removeEventListener(\"click\", this.toggleOpen)\n }\n\n render() {\n return html`\n <div\n class=\"n-popout ${this.computedPosition} is-${this.direction.dir}\"\n aria-hidden=${this.open ? \"false\" : \"true\"}\n >\n <slot></slot>\n </div>\n `\n }\n\n @observe(\"id\")\n protected handleIdChange() {\n if (!this.id) {\n // eslint-disable-next-line no-console\n console.warn(\"NORD: popout requires an id attribute and value\")\n }\n }\n\n @observe(\"open\")\n protected handleOpenChange() {\n this.targetElement.setAttribute(\"aria-expanded\", `${this.open}`)\n }\n\n /**\n * Get the position of the element toggling the popout\n * and position the popout underneath it, taking into account the optional placement.\n */\n private updatePosition = async () => {\n const { x, y, placement, middlewareData } = await computePosition(this.targetElement, this, {\n strategy: \"fixed\",\n placement: logicalToPhysical(this.position, this.align, this.direction.dir),\n middleware: [\n offset(8),\n flip(),\n shift({\n padding: 8,\n }),\n hide(),\n ],\n })\n\n this.computedPosition = placement\n\n // use physical properties here since floating-ui\n // works exclusively in physical dimensions\n // we do all the mapping in logicalToPhysical\n this.style.setProperty(\"--x\", `${x}px`)\n this.style.setProperty(\"--y\", `${y}px`)\n\n if (middlewareData.hide?.referenceHidden) {\n this.hide()\n }\n }\n\n /**\n * Toggle the popout open or closed using state.\n * Updating the position to underneath the target button before the popout is opened.\n */\n private toggleOpen = (e: Event) => {\n e.preventDefault()\n if (this.open) {\n this.hide(false)\n } else if (!this.smallViewport) {\n this.updatePosition().then(() => this.show())\n } else {\n this.show()\n }\n }\n\n private getToggle() {\n const rootNode = this.getRootNode() as Document | ShadowRoot\n const toggle = <HTMLElement>rootNode.querySelector(`[aria-controls='${this.id}']`)\n\n if (toggle instanceof HTMLSlotElement) {\n return toggle.assignedElements()[0] as HTMLElement\n }\n\n return toggle\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-popout\": Popout\n }\n}\n"],"names":["Popout","LitElement","constructor","this","breakpoint","viewportObserver","ResizeObserver","entries","forEach","smallViewport","window","matchMedia","matches","cleanupAutoUpdate","autoUpdate","targetElement","updatePosition","dismiss","LightDismissController","isOpen","open","onDismiss","e","hide","type","isDismissible","node","direction","DirectionController","align","position","id","async","x","y","placement","middlewareData","computePosition","strategy","logicalToPhysical","dir","middleware","offset","flip","shift","padding","computedPosition","style","setProperty","_a","referenceHidden","toggleOpen","preventDefault","show","then","observe","document","documentElement","updateComplete","dispatchEvent","NordEvent","moveFocusToButton","call","unobserve","focus","preventScroll","firstUpdated","connectedCallback","super","getToggle","addEventListener","disconnectedCallback","removeAttribute","removeEventListener","render","html","handleIdChange","console","warn","handleOpenChange","setAttribute","toggle","getRootNode","querySelector","HTMLSlotElement","assignedElements","styles","componentStyle","__decorate","state","prototype","property","reflect","customElement"],"mappings":"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"}
|
package/lib/ProgressBar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as r,n as e}from"./query-assigned-elements-ef860822.js";import{r as o
|
|
1
|
+
import{_ as r,n as e}from"./query-assigned-elements-ef860822.js";import{r as o,$ as a,s}from"./lit-element-e382250e.js";import{l as n}from"./if-defined-4d1db15c.js";import{e as i}from"./property-03f59dce.js";import{n as t}from"./ref-adf41565.js";import{F as d}from"./FocusableMixin-4c85ced9.js";import{s as l}from"./Component-fa316972.js";import"./directive-de55b00a.js";const p=o`:host{display:block;inline-size:100%}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;inline-size:100%;block-size:var(--n-progress-size,var(--n-space-s));background-color:var(--n-color-nav-hover);border-radius:var(--n-progress-border-radius,var(--n-border-radius-s));box-shadow:none;display:block;border:0;margin:0}label{display:block}progress::-webkit-progress-bar{background-color:transparent;border-radius:var(--n-progress-border-radius,var(--n-border-radius-s))}progress::-moz-progress-bar{background:var(--n-progress-color,var(--n-color-accent));border-radius:var(--n-progress-border-radius,var(--n-border-radius-s))}progress::-webkit-progress-value{background:var(--n-progress-color,var(--n-color-accent));border-radius:var(--n-progress-border-radius,var(--n-border-radius-s));transition:inline-size .25s ease-out}progress:indeterminate{background-color:var(--n-color-nav-hover);background-image:linear-gradient(to right,transparent 45%,var(--n-color-accent) 0,var(--n-color-accent) 55%,transparent 0);background-position:right;background-size:225% 100%;animation:animate-indeterminate 2s infinite ease}progress:indeterminate::-moz-progress-bar{background-color:transparent}progress:indeterminate::-webkit-progress-value{background-color:transparent}@keyframes animate-indeterminate{50%{background-position:left}}progress:focus{box-shadow:0 0 0 1px var(--n-color-background),0 0 0 3px var(--n-color-accent);outline:0}`;let c=class extends(d(s)){constructor(){super(...arguments),this.max=100,this.label="Current progress"}render(){return a`<label><nord-visually-hidden>${this.label}</nord-visually-hidden><progress ${t(this.focusableRef)} aria-valuenow="${n(this.value)}" aria-valuemin="0" aria-valuemax="${this.max}" tabindex="-1" max="${this.max}" value="${n(this.value)}"></progress></label>`}};c.styles=[l,p],r([i({reflect:!0,type:Number})],c.prototype,"value",void 0),r([i({reflect:!0,type:Number})],c.prototype,"max",void 0),r([i({reflect:!0})],c.prototype,"label",void 0),c=r([e("nord-progress-bar")],c);var b=c;export{b as default};
|
|
2
2
|
//# sourceMappingURL=ProgressBar.js.map
|
package/lib/ProgressBar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","sources":["../src/progress-bar/ProgressBar.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./ProgressBar.css\"\n\n/**\n * Progress Bar is used to visually represent the completion\n * of a task or process. It shows how much of the task has\n * been completed and how much is still left.\n *\n * @status new\n * @category feedback\n */\n@customElement(\"nord-progress-bar\")\nexport default class ProgressBar extends FocusableMixin(LitElement) {\n static styles = [componentStyle, style]\n\n /**\n * Specifies how much of the task has been completed. Must be a valid floating\n * point number between 0 and max, or between 0 and 100 if max is omitted. If\n * there is no value, the progress bar is indeterminate; this indicates that\n * an activity is ongoing with no indication of how long it’s expected to take.\n */\n @property({ reflect: true, type: Number }) value?: number\n\n /**\n * Describes how much work the task indicated by the progress element requires.\n * The max attribute, if present, must have a value greater than 0 and be a\n * valid floating point number.\n */\n @property({ reflect: true, type: Number }) max: number = 100\n\n /**\n * Accessible label for the progress indicator. Visually hidden, but shown\n * for assistive technology.\n */\n @property({ reflect: true }) label: string = \"Current progress\"\n\n render() {\n /**\n * The Aria properties are required for now due to a Chrome bug.\n * In the future we can probably get rid of them. For context:\n * https://bugs.chromium.org/p/chromium/issues/detail?id=1310779\n */\n return html`<label>\n <nord-visually-hidden>${this.label}</nord-visually-hidden>\n <progress\n ${ref(this.focusableRef)}\n aria-valuenow=${ifDefined(this.value)}\n aria-valuemin=\"0\"\n aria-valuemax=${this.max}\n tabindex=\"-1\"\n max=${this.max}\n value=${ifDefined(this.value)}\n ></progress>\n </label>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-progress-bar\": ProgressBar\n }\n}\n"],"names":["ProgressBar","FocusableMixin","LitElement","constructor","this","max","label","render","html","ref","focusableRef","ifDefined","value","styles","componentStyle","style","__decorate","property","reflect","type","Number","prototype","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sources":["../src/progress-bar/ProgressBar.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./ProgressBar.css\"\n\n/**\n * Progress Bar is used to visually represent the completion\n * of a task or process. It shows how much of the task has\n * been completed and how much is still left.\n *\n * @status new\n * @category feedback\n */\n@customElement(\"nord-progress-bar\")\nexport default class ProgressBar extends FocusableMixin(LitElement) {\n static styles = [componentStyle, style]\n\n /**\n * Specifies how much of the task has been completed. Must be a valid floating\n * point number between 0 and max, or between 0 and 100 if max is omitted. If\n * there is no value, the progress bar is indeterminate; this indicates that\n * an activity is ongoing with no indication of how long it’s expected to take.\n */\n @property({ reflect: true, type: Number }) value?: number\n\n /**\n * Describes how much work the task indicated by the progress element requires.\n * The max attribute, if present, must have a value greater than 0 and be a\n * valid floating point number.\n */\n @property({ reflect: true, type: Number }) max: number = 100\n\n /**\n * Accessible label for the progress indicator. Visually hidden, but shown\n * for assistive technology.\n */\n @property({ reflect: true }) label: string = \"Current progress\"\n\n render() {\n /**\n * The Aria properties are required for now due to a Chrome bug.\n * In the future we can probably get rid of them. For context:\n * https://bugs.chromium.org/p/chromium/issues/detail?id=1310779\n */\n return html`<label>\n <nord-visually-hidden>${this.label}</nord-visually-hidden>\n <progress\n ${ref(this.focusableRef)}\n aria-valuenow=${ifDefined(this.value)}\n aria-valuemin=\"0\"\n aria-valuemax=${this.max}\n tabindex=\"-1\"\n max=${this.max}\n value=${ifDefined(this.value)}\n ></progress>\n </label>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-progress-bar\": ProgressBar\n }\n}\n"],"names":["ProgressBar","FocusableMixin","LitElement","constructor","this","max","label","render","html","ref","focusableRef","ifDefined","value","styles","componentStyle","style","__decorate","property","reflect","type","Number","prototype","customElement"],"mappings":"myDAkBA,IAAqBA,EAArB,cAAyCC,EAAeC,IAAxDC,kCAgB6CC,KAAGC,IAAW,IAM5BD,KAAKE,MAAW,mBAE7CC,SAME,OAAOC,CAAI,gCACeJ,KAAKE,yCAEzBG,EAAIL,KAAKM,gCACKC,EAAUP,KAAKQ,4CAEfR,KAAKC,2BAEfD,KAAKC,eACHM,EAAUP,KAAKQ,gCAtCtBZ,EAAAa,OAAS,CAACC,EAAgBC,GAQUC,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,UAAwBpB,EAAAqB,UAAA,aAAA,GAOdL,EAAA,CAA1CC,EAAS,CAAEC,SAAS,EAAMC,KAAMC,UAA2BpB,EAAAqB,UAAA,WAAA,GAM/BL,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0ClB,EAAAqB,UAAA,aAAA,GAtB5CrB,EAAWgB,EAAA,CAD/BM,EAAc,sBACMtB,SAAAA"}
|
package/lib/Radio.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{w as n,r as o,$ as i,s as r}from"./lit-element-
|
|
1
|
+
import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{w as n,r as o,$ as i,s as r}from"./lit-element-e382250e.js";import{e as a}from"./property-03f59dce.js";import{l as s}from"./if-defined-4d1db15c.js";import{n as l}from"./ref-adf41565.js";import{L as d}from"./LightDomController-e0762f0d.js";import{S as c}from"./SlotController-ea6eff46.js";import{o as h}from"./observe-a9c6dfb6.js";import{F as p}from"./FocusableMixin-4c85ced9.js";import{F as m}from"./FormAssociatedMixin-9d38814c.js";import{I as u}from"./InputMixin-84ca72ae.js";import{s as v}from"./Component-fa316972.js";import{s as b}from"./FormField-44e865a4.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./events-731d0007.js";import"./VisuallyHidden.js";class f extends c{constructor(e,t){super(e,t.slotName),this.options=t,this.onChange=()=>{this.syncLightDom()},this.renderHook=document.createComment(this.slotName),this.lightDom=new d(e,{render:()=>this.hasContent?n:this.options.render(),renderOptions:{renderBefore:this.renderHook}})}hostConnected(){super.hostConnected(),this.host.appendChild(this.renderHook),this.syncLightDom()}hostDisconnected(){this.renderHook.remove()}syncLightDom(){const e=this.content;e&&this.options.syncLightDom(e)}}const g=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-accent);-moz-appearance:none;-webkit-appearance:none;appearance:none;margin:0!important;padding:0!important;border:1px solid var(--n-radio-border-color,var(--n-color-border-hover))!important;border-radius:var(--n-border-radius-circle)!important;transition:none!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)!important}::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)!important}: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 k=0;const y=e=>`nord-radio-${e}-${k++}`;let $=class extends(m(u(p(r)))){constructor(){super(...arguments),this.inputId=y("input"),this.hintId=y("hint"),this.errorId=y("error"),this.hintSlot=new f(this,{slotName:"hint",render:()=>this.hint?i`<div slot="hint-internal" id="${this.hintId}">${this.hint}</div>`:n,syncLightDom:e=>{e.id=this.hintId}}),this.labelSlot=new f(this,{slotName:"label",render:()=>this.label?i`<label slot="label-internal" for="${this.inputId}">${this.label}</label>`:n,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 f(this,{slotName:"error",render:()=>this.error?i`<div slot="error-internal" id="${this.errorId}">${this.error}</div>`:n,syncLightDom:e=>{e.id=this.hintId}}),this.inputSlot=new d(this,{render:()=>i`<input slot="input" @blur="${this.handleBlur}" @focus="${this.handleFocus}" ${l(this.focusableRef)} class="n-input" id="${this.inputId}" type="radio" name="${s(this.name)}" .value="${this.value}" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" aria-describedby="${s(this.getDescribedBy())}" aria-invalid="${s(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(){}render(){return i`<div class="n-flex"><div class="n-input-container" @change="${this.handleChange}"><slot name="input"></slot>${this.checked?i`<div class="n-dot"></div>`:n}</div><div class="n-expand"><div class="n-label-container">${e=this.hideLabel,t=()=>i`<slot name="label"></slot><slot name="label-internal"></slot>`,o=e=>i`<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}handleCheckedChange(e){!e&&this.checked&&this.uncheckSiblings()}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=[v,b,g],e([a({type:Boolean,reflect:!0})],$.prototype,"checked",void 0),e([h("checked")],$.prototype,"handleCheckedChange",null),$=e([t("nord-radio")],$);var x=$;export{x as default};
|
|
2
2
|
//# sourceMappingURL=Radio.js.map
|
package/lib/Select.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as o,$ as n,s as r}from"./lit-element-
|
|
1
|
+
import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as o,$ as n,s as r}from"./lit-element-e382250e.js";import{l as i}from"./if-defined-4d1db15c.js";import{n as s}from"./ref-adf41565.js";import{o as a}from"./unsafe-html-76575c49.js";import"./Button.js";import{I as l}from"./InputMixin-84ca72ae.js";import{F as d}from"./FocusableMixin-4c85ced9.js";import{F as c}from"./FormAssociatedMixin-9d38814c.js";import{s as p}from"./Component-fa316972.js";import{s as u}from"./FormField-44e865a4.js";import{S as b}from"./SlotController-ea6eff46.js";import"./directive-de55b00a.js";import"./property-03f59dce.js";import"./EventController-d99ebeef.js";import"./LightDomController-e0762f0d.js";import"./cond-ed8742b5.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const h=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=end] svg{color:var(--n-color-icon);min-inline-size:calc(var(--n-space-l)/ 2.2);max-inline-size:calc(var(--n-space-l)/ 2.2)}::slotted([slot=start]){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 m=class extends(c(l(d(r)))){constructor(){super(...arguments),this.defaultSlot=new b(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="start" name="start"></slot>${t}<div slot="end">${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.toString()));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.toString()}">${e.text}</option>`}};m.styles=[p,u,h],m=e([t("nord-select")],m);var v=m;export{v as default};
|
|
2
2
|
//# sourceMappingURL=Select.js.map
|
package/lib/Spinner.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,n as r}from"./query-assigned-elements-ef860822.js";import{r as n,s as i,$ as s}from"./lit-element-
|
|
1
|
+
import{_ as e,n as r}from"./query-assigned-elements-ef860822.js";import{r as n,s as i,$ as s}from"./lit-element-e382250e.js";import{e as o}from"./property-03f59dce.js";import{l as t}from"./if-defined-4d1db15c.js";import{c as a}from"./cond-ed8742b5.js";import{s as l}from"./Component-fa316972.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 i{constructor(){super(...arguments),this.size="m"}render(){return s`<div class="n-spinner" role="${a(this.label,"img")}" aria-label="${t(this.label)}" style="${a(this.color,`color:${this.color}`)}"></div>`}};d.styles=[l,c],e([o({reflect:!0})],d.prototype,"size",void 0),e([o({reflect:!0})],d.prototype,"color",void 0),e([o({reflect:!0})],d.prototype,"label",void 0),d=e([r("nord-spinner")],d);var z=d;export{z as default};
|
|
2
2
|
//# sourceMappingURL=Spinner.js.map
|
package/lib/Stack.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as s,s as n,$ as o}from"./lit-element-
|
|
1
|
+
import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as s,s as n,$ as o}from"./lit-element-e382250e.js";import{e as i}from"./property-03f59dce.js";import{s as a}from"./Component-fa316972.js";const r=s`:host{display:flex;flex-direction:column;align-items:stretch;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));max-inline-size:100%;inline-size:100%}:host([direction=horizontal]){flex-direction:row}:host([wrap]){flex-wrap:wrap}@media (max-width:768px){:host([responsive]){flex-direction:column!important}}: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}:host([justify-content=space-between]){justify-content:space-between}:host([justify-content=space-evenly]){justify-content:space-evenly}:host([justify-content=space-around]){justify-content:space-around}::slotted(*){margin:0!important;min-inline-size:0;max-inline-size:100%}:host([gap=none]){--n-stack-gap: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 p=class extends n{constructor(){super(...arguments),this.gap="m",this.direction="vertical",this.alignItems="stretch",this.responsive=!1,this.wrap=!1}render(){return o`<slot></slot>`}};p.styles=[a,r],t([i({reflect:!0})],p.prototype,"gap",void 0),t([i({reflect:!0})],p.prototype,"direction",void 0),t([i({reflect:!0,attribute:"align-items"})],p.prototype,"alignItems",void 0),t([i({reflect:!0,type:Boolean})],p.prototype,"responsive",void 0),t([i({reflect:!0,type:Boolean})],p.prototype,"wrap",void 0),t([i({reflect:!0,attribute:"justify-content"})],p.prototype,"justifyContent",void 0),p=t([e("nord-stack")],p);var c=p;export{c as default};
|
|
2
2
|
//# sourceMappingURL=Stack.js.map
|
package/lib/Table.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as a,s as n,x as o,$ as r}from"./lit-element-
|
|
1
|
+
import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as a,s as n,x as o,$ as r}from"./lit-element-e382250e.js";import{e as d}from"./property-03f59dce.js";const l=a`nord-table{all:initial;color:var(--n-color-text)}nord-table[density=condensed]{--n-table-td-padding:calc(var(--n-space-m) * 0.5)}nord-table[density=default]{--n-table-td-padding:calc(var(--n-space-m) * 0.95)}nord-table[density=relaxed]{--n-table-td-padding:calc(var(--n-space-m) * 1.2);--n-table-th-padding:var(--n-space-m)}nord-table table{inline-size:100%;font-size:var(--n-font-size-m);font-family:var(--n-font-family);font-feature-settings:var(--n-font-features);line-height:var(--n-line-height-tight);text-align:start;border-spacing:0;border-collapse:separate;color:var(--n-color-text);font-variant-numeric:tabular-nums}nord-table th{border-block-end:1px solid var(--n-color-border);font-weight:var(--n-font-weight-active);font-size:var(--n-font-size-s);color:var(--n-color-text-weaker);padding:calc(var(--n-table-th-padding,var(--n-table-td-padding))/ 1.1) var(--n-space-m);text-align:start;background:var(--n-color-surface-raised);position:-webkit-sticky;position:sticky;inset-block-start:0;z-index:3}nord-table td{border-block-end:1px solid var(--n-color-border);padding:var(--n-table-td-padding) var(--n-space-m);white-space:nowrap}@media (max-width:1000px){nord-table td,nord-table th{padding:var(--n-table-td-padding) var(--n-space-s)}}nord-table tbody tr:hover{background:var(--n-color-active)}nord-table tbody .active,nord-table tbody .active:hover{background:var(--n-color-active);color:var(--n-color-text);opacity:1;cursor:default}nord-table tbody .active td,nord-table tbody tr:hover td{color:var(--n-color-text)}nord-table tbody .active nord-badge,nord-table tbody tr:hover nord-badge{--n-badge-color:var(--n-color-text)}nord-card nord-table tbody tr:last-child td{border-block-end-color:transparent}nord-table .n-table-ellipsis{max-inline-size:0;inline-size:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nord-table .n-table-align-right{text-align:end}nord-table .n-table-actions{display:flex;justify-content:center}nord-table .n-table-actions nord-button{margin-block:-10px}`;let i=class extends n{constructor(){super(...arguments),this.density="default"}connectedCallback(){super.connectedCallback(),this.renderStyles()}renderStyles(){const t=this.getRootNode(),e=t.nodeType===Node.DOCUMENT_NODE?t.head:t;const a=this.localName;t.querySelector(`style[data-component=${a}]`)||o(r`<style data-component="${a}">${l}</style>`,e)}createRenderRoot(){return this}};i.styles=l,t([d({reflect:!0})],i.prototype,"density",void 0),i=t([e("nord-table")],i);var c=i;export{c as default};
|
|
2
2
|
//# sourceMappingURL=Table.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as n}from"./lit-element-e382250e.js";const r=n`.n-input-container{position:relative;inline-size:var(--n-input-width,240px)}.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);inline-size:100%;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-width: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-label-container:hover+.n-input-container .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};
|
|
2
|
+
//# sourceMappingURL=TextField-f8848f28.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextField-f8848f28.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/lib/Textarea.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as i,$ as r,s}from"./lit-element-
|
|
1
|
+
import{_ as e,n as t}from"./query-assigned-elements-ef860822.js";import{r as i,$ as r,s}from"./lit-element-e382250e.js";import{e as o}from"./property-03f59dce.js";import{l as a}from"./if-defined-4d1db15c.js";import{n}from"./ref-adf41565.js";import{o as l}from"./observe-a9c6dfb6.js";import{F as d}from"./FocusableMixin-4c85ced9.js";import{F as p}from"./FormAssociatedMixin-9d38814c.js";import{I as m}from"./InputMixin-84ca72ae.js";import{s as h}from"./Component-fa316972.js";import{s as u}from"./FormField-44e865a4.js";import{s as c}from"./TextField-f8848f28.js";import"./directive-de55b00a.js";import"./EventController-d99ebeef.js";import"./SlotController-ea6eff46.js";import"./events-731d0007.js";import"./VisuallyHidden.js";const f=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 v=class extends(p(m(d(s)))){constructor(){super(...arguments),this.inputId="textarea",this.resize="vertical"}render(){var e;return r`${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)}};v.styles=[h,u,c,f],e([o({reflect:!0})],v.prototype,"resize",void 0),e([l("resize","updated"),l("value","updated")],v.prototype,"resizeToFitContent",null),v=e([t("nord-textarea")],v);var b=v;export{b as default};
|
|
2
2
|
//# sourceMappingURL=Textarea.js.map
|
package/lib/Tooltip.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t,n as i}from"./query-assigned-elements-ef860822.js";import{r as e,s,$ as o}from"./lit-element-
|
|
1
|
+
import{_ as t,n as i}from"./query-assigned-elements-ef860822.js";import{r as e,s,$ as o}from"./lit-element-e382250e.js";import{e as n}from"./property-03f59dce.js";import{t as r}from"./state-70f38ceb.js";import{c as a,l as d,o as l,f as h,s as p}from"./positioning-763efb3a.js";import{S as c}from"./SlotController-ea6eff46.js";import{s as u}from"./Component-fa316972.js";import{E as v}from"./EventController-d99ebeef.js";import{f as m}from"./fsm-50373df9.js";import{o as f}from"./observe-a9c6dfb6.js";function y(t,i){const e=t.getAttribute(i);return e?e.split(/\s+/):[]}function b(t,i,e){t.setAttribute(i,e.join(" "))}const g=e`: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:fixed;pointer-events:none;visibility:hidden;opacity:0;transition:opacity var(--n-transition-slowly),visibility var(--n-transition-slowly);transition-timing-function: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 x;function w(t,i){return Boolean(i.id)&&t.nodeType===Node.ELEMENT_NODE&&t.getAttribute("aria-describedby")===i.id}const{transition:k}=m({hidden:{show:"waiting"},visible:{hide:"hidden",reposition:"positioning",show:"positioning"},waiting:{timeout:"positioning",hide:"hidden"},positioning:{positioned:"visible",hide:"hidden"}});let E=x=class extends s{constructor(){super(...arguments),this.shortcutSlot=new c(this,"shortcut"),this.events=new v(this),this.proxy=document.createElement("span"),this.state="hidden",this.coords=[0,0],this.position="block-start",this.role="tooltip",this.id="",this.delay=500,this.updatePosition=t=>a(t,this,{strategy:"fixed",placement:d(this.position),middleware:[l(8),h(),p({padding:8})]}).then((({x:t,y:i})=>{this.coords=[t,i],this.state=k(this.state,"positioned")})),this.hideTooltip=()=>{this.state=k(this.state,"hide")},this.reposition=()=>{this.state=k(this.state,"reposition")},this.handleShow=t=>{const i=t.target;w(i,this)&&(this.currentElement=i,this.state=k(this.state,"show"))},this.handleHide=t=>{t.target===this.currentElement&&this.hideTooltip()},this.hideOnEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addDescribedBy=()=>{var t,i;const e=null===(i=null===(t=this.currentElement)||void 0===t?void 0:t.focusableRef)||void 0===i?void 0:i.value;e&&(this.proxy.hidden=!0,this.proxy.id=this.id,this.proxy.textContent=this.textContent,e.insertAdjacentElement("afterend",this.proxy),function(t,i,e){const s=y(t,i);s.includes(e)||b(t,i,s.concat(e))}(e,"aria-describedby",this.id))},this.removeDescribedBy=()=>{var t,i;const e=null===(i=null===(t=this.currentElement)||void 0===t?void 0:t.focusableRef)||void 0===i?void 0:i.value;e&&(this.proxy.remove(),function(t,i,e){const s=y(t,i);s.includes(e)&&b(t,i,s.filter((t=>t!==e)))}(e,"aria-describedby",this.id))}}connectedCallback(){super.connectedCallback();const t=this.getRootNode();this.events.listen(t,"keydown",this.hideOnEscape),this.events.listen(t,"mouseover",this.handleShow),this.events.listen(t,"focusin",this.handleShow),this.events.listen(t,"mouseout",this.handleHide),this.events.listen(t,"focusout",this.handleHide),this.events.listen(t,"click",this.handleHide),this.events.listen(window,"resize",this.reposition,{passive:!0}),this.events.listen(window,"scroll",this.reposition,{passive:!0})}render(){return o`<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>`}handleIdChange(){this.id||console.warn("NORD: The tooltip requires an id attribute and value")}handleStateChange(t){var i;switch(this.state){case"hidden":"waiting"===t&&this.timeoutId&&clearTimeout(this.timeoutId),this.removeDescribedBy(),this.currentElement=void 0,this.style.visibility="hidden",this.style.opacity="0";break;case"visible":{this.timeoutId=void 0,x.lastOpened=this,this.addDescribedBy();const[t,i]=this.coords;this.style.left=`${t}px`,this.style.top=`${i}px`,this.style.visibility="visible",this.style.opacity="1";break}case"waiting":this.timeoutId=setTimeout((()=>{this.state=k(this.state,"timeout")}),this.delay);break;case"positioning":x.lastOpened!==this&&(null===(i=x.lastOpened)||void 0===i||i.hideTooltip()),this.currentElement&&this.updatePosition(this.currentElement)}}};E.styles=[u,g],t([r()],E.prototype,"state",void 0),t([n({reflect:!0})],E.prototype,"position",void 0),t([n({reflect:!0})],E.prototype,"role",void 0),t([n({reflect:!0})],E.prototype,"id",void 0),t([n({reflect:!0,type:Number})],E.prototype,"delay",void 0),t([f("id")],E.prototype,"handleIdChange",null),t([f("state")],E.prototype,"handleStateChange",null),E=x=t([i("nord-tooltip")],E);var j=E;export{j as default};
|
|
2
2
|
//# sourceMappingURL=Tooltip.js.map
|
package/lib/Tooltip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sources":["../src/common/attribute.ts","../src/tooltip/Tooltip.ts"],"sourcesContent":["function getTokens(element: Element, attr: string) {\n const value = element.getAttribute(attr)\n return value ? value.split(/\\s+/) : []\n}\n\nfunction setTokens(element: Element, attr: string, tokens: string[]) {\n element.setAttribute(attr, tokens.join(\" \"))\n}\n\n/**\n * Carefully adds a token to a space-separated attribute\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add\n */\nexport function add(element: Element, attr: string, token: string) {\n const tokens = getTokens(element, attr)\n\n if (!tokens.includes(token)) {\n setTokens(element, attr, tokens.concat(token))\n }\n}\n\n/**\n * Carefully removes a token from a space-separated attribute.\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove\n */\nexport function remove(element: Element, attr: string, token: string) {\n const tokens = getTokens(element, attr)\n\n if (tokens.includes(token)) {\n setTokens(\n element,\n attr,\n tokens.filter(t => t !== token)\n )\n }\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, flip, shift, offset } from \"@floating-ui/dom\"\n\nimport * as attr from \"../common/attribute.js\"\nimport type { FocusableMixinInterface } from \"../common/mixins/FocusableMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tooltip.css\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { States, fsm } from \"../common/fsm.js\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n// @ts-expect-error we're being naughty and accessing a protected field!\n// however this means we always get the correct types,\n// and it will ensure this file is not forgotten about if focusable mixin ever changes\ntype FocusableElement = HTMLElement & Pick<FocusableMixinInterface, \"focusableRef\">\n\nfunction isElement(el: Node): el is Element {\n return el.nodeType === Node.ELEMENT_NODE\n}\n\nfunction referencesTooltip(node: Node, tooltip: Tooltip) {\n return Boolean(tooltip.id) && isElement(node) && node.getAttribute(\"aria-describedby\") === tooltip.id\n}\n\nconst { transition } = fsm({\n hidden: {\n show: \"waiting\",\n },\n visible: {\n hide: \"hidden\",\n reposition: \"positioning\",\n show: \"positioning\",\n },\n waiting: {\n timeout: \"positioning\",\n hide: \"hidden\",\n },\n positioning: {\n positioned: \"visible\",\n hide: \"hidden\",\n },\n})\n\ntype TooltipStates = States<typeof transition>\n\n/**\n * Tooltips are floating containers for displaying additional information\n * for the currently focused element. A tooltip can be useful when you want\n * to e.g. give a hint about an existing Command Menu shortcut.\n *\n * @status ready\n * @category overlay\n * @slot - The tooltip content\n * @slot shortcut - Optional slot that holds shortcut keys to access the subject\n */\n@customElement(\"nord-tooltip\")\nexport default class Tooltip extends LitElement {\n static styles = [componentStyle, style]\n\n // tracks the last tooltip opened, so we can enforce only one is ever open at a time\n static lastOpened?: Tooltip\n\n private shortcutSlot = new SlotController(this, \"shortcut\")\n private events = new EventController(this)\n\n // The current element which revealed the tooltip shown\n private currentElement?: FocusableElement\n private timeoutId?: ReturnType<typeof setTimeout>\n\n /**\n * the proxy element is for cases where the targetElement is a web component,\n * and the WC has a focusable child in its shadow root e.g. a button component.\n * in this case, when the tooltip is shown, we inject the proxy into targetElement's shadow root\n * and wire up aria-describedby from the focusable element to the proxy.\n * when the tooltip is hidden, we remove the proxy and remove the aria-describedby relationship.\n */\n private proxy = document.createElement(\"span\")\n\n /**\n * The current state of the tooltip, dependent on the state machine\n */\n @state() private state: TooltipStates = \"hidden\"\n\n // The current coordinates for the tooltip\n private coords: [number, number] = [0, 0]\n\n /**\n * Control the position of the tooltip component.\n * When set to \"none\", the tooltip will be shown above\n * but accommodate for browser boundaries.\n */\n @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-start\"\n\n /**\n * The tooltip role, set on the component by default.\n */\n @property({ reflect: true }) role = \"tooltip\"\n\n /**\n * The id for the active element to reference via aria-describedby.\n */\n @property({ reflect: true }) id: string = \"\"\n\n /**\n * The delay in milliseconds before the tooltip is opened.\n */\n @property({ reflect: true, type: Number }) delay: number = 500\n\n /**\n * Apply all event listeners\n */\n connectedCallback() {\n super.connectedCallback()\n\n const rootNode = this.getRootNode() as Document\n\n this.events.listen(rootNode, \"keydown\", this.hideOnEscape)\n\n // we treat mouseover and focusin the same, since they both show tooltip\n this.events.listen(rootNode, \"mouseover\", this.handleShow)\n this.events.listen(rootNode, \"focusin\", this.handleShow)\n\n // we treat focusout, mouseout, click the same, since they all hide tooltip\n this.events.listen(rootNode, \"mouseout\", this.handleHide)\n this.events.listen(rootNode, \"focusout\", this.handleHide)\n this.events.listen(rootNode, \"click\", this.handleHide)\n\n this.events.listen(window, \"resize\", this.reposition, { passive: true })\n this.events.listen(window, \"scroll\", this.reposition, { passive: true })\n }\n\n render() {\n return html`\n <div class=\"n-tooltip\">\n <slot></slot>\n <div class=\"n-tooltip-shortcut\" ?hidden=${this.shortcutSlot.isEmpty}>\n <slot class=\"n-tooltip-key\" name=\"shortcut\"></slot>\n </div>\n </div>\n `\n }\n\n @observe(\"id\")\n protected handleIdChange() {\n if (!this.id) {\n // eslint-disable-next-line no-console\n console.warn(\"NORD: The tooltip requires an id attribute and value\")\n }\n }\n\n @observe(\"state\")\n private handleStateChange(prevState: TooltipStates) {\n switch (this.state) {\n case \"hidden\": {\n if (prevState === \"waiting\" && this.timeoutId) {\n clearTimeout(this.timeoutId)\n }\n\n this.removeDescribedBy()\n this.currentElement = undefined\n this.style.visibility = \"hidden\"\n this.style.opacity = \"0\"\n break\n }\n\n case \"visible\": {\n this.timeoutId = undefined\n Tooltip.lastOpened = this\n this.addDescribedBy()\n\n const [x, y] = this.coords\n\n // use physical properties here since floating-ui\n // works exclusively in physical dimensions\n // we do all the mapping in logicalToPhysical\n this.style.left = `${x}px`\n this.style.top = `${y}px`\n this.style.visibility = \"visible\"\n this.style.opacity = \"1\"\n break\n }\n\n case \"waiting\": {\n this.timeoutId = setTimeout(() => {\n this.state = transition(this.state, \"timeout\")\n }, this.delay)\n break\n }\n\n case \"positioning\": {\n if (Tooltip.lastOpened !== this) {\n Tooltip.lastOpened?.hideTooltip()\n }\n\n if (this.currentElement) {\n this.updatePosition(this.currentElement)\n }\n break\n }\n }\n }\n\n /**\n * Setting and updating the position of the tooltip\n */\n private updatePosition = (currentElement: HTMLElement) =>\n computePosition(currentElement, this, {\n strategy: \"fixed\",\n placement: logicalToPhysical(this.position),\n middleware: [\n shift({\n padding: 8,\n }),\n offset(8),\n flip(),\n ],\n }).then(({ x, y }) => {\n this.coords = [x, y]\n this.state = transition(this.state, \"positioned\")\n })\n\n private hideTooltip = () => {\n this.state = transition(this.state, \"hide\")\n }\n\n private reposition = () => {\n this.state = transition(this.state, \"reposition\")\n }\n\n private handleShow = (e: Event) => {\n const target = e.target as FocusableElement\n\n if (referencesTooltip(target, this)) {\n this.currentElement = target\n this.state = transition(this.state, \"show\")\n }\n }\n\n private handleHide = (e: Event) => {\n if (e.target === this.currentElement) {\n this.hideTooltip()\n }\n }\n\n private hideOnEscape = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n this.hideTooltip()\n }\n }\n\n private addDescribedBy = () => {\n const focusable = this.currentElement?.focusableRef?.value\n\n if (focusable) {\n this.proxy.hidden = true\n this.proxy.id = this.id\n this.proxy.textContent = this.textContent\n\n focusable.insertAdjacentElement(\"afterend\", this.proxy)\n attr.add(focusable, \"aria-describedby\", this.id)\n }\n }\n\n private removeDescribedBy = () => {\n const focusable = this.currentElement?.focusableRef?.value\n\n if (focusable) {\n this.proxy.remove()\n attr.remove(focusable, \"aria-describedby\", this.id)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-tooltip\": Tooltip\n }\n}\n"],"names":["getTokens","element","attr","value","getAttribute","split","setTokens","tokens","setAttribute","join","referencesTooltip","node","tooltip","Boolean","id","nodeType","Node","ELEMENT_NODE","transition","fsm","hidden","show","visible","hide","reposition","waiting","timeout","positioning","positioned","Tooltip","Tooltip_1","LitElement","constructor","this","shortcutSlot","SlotController","events","EventController","proxy","document","createElement","state","coords","position","role","delay","updatePosition","currentElement","computePosition","strategy","placement","logicalToPhysical","middleware","shift","padding","offset","flip","then","x","y","hideTooltip","handleShow","e","target","handleHide","hideOnEscape","key","addDescribedBy","focusable","_b","_a","focusableRef","textContent","insertAdjacentElement","token","includes","concat","attr.add","removeDescribedBy","remove","filter","t","attr.remove","connectedCallback","super","rootNode","getRootNode","listen","window","passive","render","html","isEmpty","handleIdChange","console","warn","handleStateChange","prevState","timeoutId","clearTimeout","undefined","style","visibility","opacity","lastOpened","left","top","setTimeout","styles","componentStyle","__decorate","prototype","property","reflect","type","Number","observe","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sources":["../src/common/attribute.ts","../src/tooltip/Tooltip.ts"],"sourcesContent":["function getTokens(element: Element, attr: string) {\n const value = element.getAttribute(attr)\n return value ? value.split(/\\s+/) : []\n}\n\nfunction setTokens(element: Element, attr: string, tokens: string[]) {\n element.setAttribute(attr, tokens.join(\" \"))\n}\n\n/**\n * Carefully adds a token to a space-separated attribute\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/add\n */\nexport function add(element: Element, attr: string, token: string) {\n const tokens = getTokens(element, attr)\n\n if (!tokens.includes(token)) {\n setTokens(element, attr, tokens.concat(token))\n }\n}\n\n/**\n * Carefully removes a token from a space-separated attribute.\n * Similar to classList, but for any attribute.\n * @see https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/remove\n */\nexport function remove(element: Element, attr: string, token: string) {\n const tokens = getTokens(element, attr)\n\n if (tokens.includes(token)) {\n setTokens(\n element,\n attr,\n tokens.filter(t => t !== token)\n )\n }\n}\n","import { LitElement, html } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { computePosition, flip, shift, offset } from \"@floating-ui/dom\"\n\nimport * as attr from \"../common/attribute.js\"\nimport type { FocusableMixinInterface } from \"../common/mixins/FocusableMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Tooltip.css\"\nimport { EventController } from \"../common/controllers/EventController.js\"\nimport { States, fsm } from \"../common/fsm.js\"\nimport { logicalToPhysical } from \"../common/positioning.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n// @ts-expect-error we're being naughty and accessing a protected field!\n// however this means we always get the correct types,\n// and it will ensure this file is not forgotten about if focusable mixin ever changes\ntype FocusableElement = HTMLElement & Pick<FocusableMixinInterface, \"focusableRef\">\n\nfunction isElement(el: Node): el is Element {\n return el.nodeType === Node.ELEMENT_NODE\n}\n\nfunction referencesTooltip(node: Node, tooltip: Tooltip) {\n return Boolean(tooltip.id) && isElement(node) && node.getAttribute(\"aria-describedby\") === tooltip.id\n}\n\nconst { transition } = fsm({\n hidden: {\n show: \"waiting\",\n },\n visible: {\n hide: \"hidden\",\n reposition: \"positioning\",\n show: \"positioning\",\n },\n waiting: {\n timeout: \"positioning\",\n hide: \"hidden\",\n },\n positioning: {\n positioned: \"visible\",\n hide: \"hidden\",\n },\n})\n\ntype TooltipStates = States<typeof transition>\n\n/**\n * Tooltips are floating containers for displaying additional information\n * for the currently focused element. A tooltip can be useful when you want\n * to e.g. give a hint about an existing Command Menu shortcut.\n *\n * @status ready\n * @category overlay\n * @slot - The tooltip content\n * @slot shortcut - Optional slot that holds shortcut keys to access the subject\n */\n@customElement(\"nord-tooltip\")\nexport default class Tooltip extends LitElement {\n static styles = [componentStyle, style]\n\n // tracks the last tooltip opened, so we can enforce only one is ever open at a time\n static lastOpened?: Tooltip\n\n private shortcutSlot = new SlotController(this, \"shortcut\")\n private events = new EventController(this)\n\n // The current element which revealed the tooltip shown\n private currentElement?: FocusableElement\n private timeoutId?: ReturnType<typeof setTimeout>\n\n /**\n * the proxy element is for cases where the targetElement is a web component,\n * and the WC has a focusable child in its shadow root e.g. a button component.\n * in this case, when the tooltip is shown, we inject the proxy into targetElement's shadow root\n * and wire up aria-describedby from the focusable element to the proxy.\n * when the tooltip is hidden, we remove the proxy and remove the aria-describedby relationship.\n */\n private proxy = document.createElement(\"span\")\n\n /**\n * The current state of the tooltip, dependent on the state machine\n */\n @state() private state: TooltipStates = \"hidden\"\n\n // The current coordinates for the tooltip\n private coords: [number, number] = [0, 0]\n\n /**\n * Control the position of the tooltip component.\n * When set to \"none\", the tooltip will be shown above\n * but accommodate for browser boundaries.\n */\n @property({ reflect: true }) position: \"block-end\" | \"block-start\" | \"inline-start\" | \"inline-end\" = \"block-start\"\n\n /**\n * The tooltip role, set on the component by default.\n */\n @property({ reflect: true }) role = \"tooltip\"\n\n /**\n * The id for the active element to reference via aria-describedby.\n */\n @property({ reflect: true }) id: string = \"\"\n\n /**\n * The delay in milliseconds before the tooltip is opened.\n */\n @property({ reflect: true, type: Number }) delay: number = 500\n\n /**\n * Apply all event listeners\n */\n connectedCallback() {\n super.connectedCallback()\n\n const rootNode = this.getRootNode() as Document\n\n this.events.listen(rootNode, \"keydown\", this.hideOnEscape)\n\n // we treat mouseover and focusin the same, since they both show tooltip\n this.events.listen(rootNode, \"mouseover\", this.handleShow)\n this.events.listen(rootNode, \"focusin\", this.handleShow)\n\n // we treat focusout, mouseout, click the same, since they all hide tooltip\n this.events.listen(rootNode, \"mouseout\", this.handleHide)\n this.events.listen(rootNode, \"focusout\", this.handleHide)\n this.events.listen(rootNode, \"click\", this.handleHide)\n\n this.events.listen(window, \"resize\", this.reposition, { passive: true })\n this.events.listen(window, \"scroll\", this.reposition, { passive: true })\n }\n\n render() {\n return html`\n <div class=\"n-tooltip\">\n <slot></slot>\n <div class=\"n-tooltip-shortcut\" ?hidden=${this.shortcutSlot.isEmpty}>\n <slot class=\"n-tooltip-key\" name=\"shortcut\"></slot>\n </div>\n </div>\n `\n }\n\n @observe(\"id\")\n protected handleIdChange() {\n if (!this.id) {\n // eslint-disable-next-line no-console\n console.warn(\"NORD: The tooltip requires an id attribute and value\")\n }\n }\n\n @observe(\"state\")\n private handleStateChange(prevState: TooltipStates) {\n switch (this.state) {\n case \"hidden\": {\n if (prevState === \"waiting\" && this.timeoutId) {\n clearTimeout(this.timeoutId)\n }\n\n this.removeDescribedBy()\n this.currentElement = undefined\n this.style.visibility = \"hidden\"\n this.style.opacity = \"0\"\n break\n }\n\n case \"visible\": {\n this.timeoutId = undefined\n Tooltip.lastOpened = this\n this.addDescribedBy()\n\n const [x, y] = this.coords\n\n // use physical properties here since floating-ui\n // works exclusively in physical dimensions\n // we do all the mapping in logicalToPhysical\n this.style.left = `${x}px`\n this.style.top = `${y}px`\n this.style.visibility = \"visible\"\n this.style.opacity = \"1\"\n break\n }\n\n case \"waiting\": {\n this.timeoutId = setTimeout(() => {\n this.state = transition(this.state, \"timeout\")\n }, this.delay)\n break\n }\n\n case \"positioning\": {\n if (Tooltip.lastOpened !== this) {\n Tooltip.lastOpened?.hideTooltip()\n }\n\n if (this.currentElement) {\n this.updatePosition(this.currentElement)\n }\n break\n }\n }\n }\n\n /**\n * Setting and updating the position of the tooltip\n */\n private updatePosition = (currentElement: HTMLElement) =>\n computePosition(currentElement, this, {\n strategy: \"fixed\",\n placement: logicalToPhysical(this.position),\n middleware: [\n offset(8),\n flip(),\n shift({\n padding: 8,\n }),\n ],\n }).then(({ x, y }) => {\n this.coords = [x, y]\n this.state = transition(this.state, \"positioned\")\n })\n\n private hideTooltip = () => {\n this.state = transition(this.state, \"hide\")\n }\n\n private reposition = () => {\n this.state = transition(this.state, \"reposition\")\n }\n\n private handleShow = (e: Event) => {\n const target = e.target as FocusableElement\n\n if (referencesTooltip(target, this)) {\n this.currentElement = target\n this.state = transition(this.state, \"show\")\n }\n }\n\n private handleHide = (e: Event) => {\n if (e.target === this.currentElement) {\n this.hideTooltip()\n }\n }\n\n private hideOnEscape = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n this.hideTooltip()\n }\n }\n\n private addDescribedBy = () => {\n const focusable = this.currentElement?.focusableRef?.value\n\n if (focusable) {\n this.proxy.hidden = true\n this.proxy.id = this.id\n this.proxy.textContent = this.textContent\n\n focusable.insertAdjacentElement(\"afterend\", this.proxy)\n attr.add(focusable, \"aria-describedby\", this.id)\n }\n }\n\n private removeDescribedBy = () => {\n const focusable = this.currentElement?.focusableRef?.value\n\n if (focusable) {\n this.proxy.remove()\n attr.remove(focusable, \"aria-describedby\", this.id)\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-tooltip\": Tooltip\n }\n}\n"],"names":["getTokens","element","attr","value","getAttribute","split","setTokens","tokens","setAttribute","join","referencesTooltip","node","tooltip","Boolean","id","nodeType","Node","ELEMENT_NODE","transition","fsm","hidden","show","visible","hide","reposition","waiting","timeout","positioning","positioned","Tooltip","Tooltip_1","LitElement","constructor","this","shortcutSlot","SlotController","events","EventController","proxy","document","createElement","state","coords","position","role","delay","updatePosition","currentElement","computePosition","strategy","placement","logicalToPhysical","middleware","offset","flip","shift","padding","then","x","y","hideTooltip","handleShow","e","target","handleHide","hideOnEscape","key","addDescribedBy","focusable","_b","_a","focusableRef","textContent","insertAdjacentElement","token","includes","concat","attr.add","removeDescribedBy","remove","filter","t","attr.remove","connectedCallback","super","rootNode","getRootNode","listen","window","passive","render","html","isEmpty","handleIdChange","console","warn","handleStateChange","prevState","timeoutId","clearTimeout","undefined","style","visibility","opacity","lastOpened","left","top","setTimeout","styles","componentStyle","__decorate","prototype","property","reflect","type","Number","observe","customElement"],"mappings":"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"}
|
package/lib/VisuallyHidden.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as i,s as o,$ as r}from"./lit-element-
|
|
1
|
+
import{_ as t,n as e}from"./query-assigned-elements-ef860822.js";import{r as i,s as o,$ as r}from"./lit-element-e382250e.js";const n=i`:host{all:initial;border:0!important;clip:rect(1px,1px,1px,1px)!important;block-size:1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;inset-block-start:0;inline-size:1px!important}`;let s=class extends o{render(){return r`<slot></slot>`}};s.styles=n,s=t([e("nord-visually-hidden")],s);var l=s;export{l as default};
|
|
2
2
|
//# sourceMappingURL=VisuallyHidden.js.map
|