@nordhealth/components 3.12.0 → 3.13.0
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 +1 -1
- package/custom-elements.json +5140 -5128
- package/lib/ButtonGroup.js +1 -1
- package/lib/ButtonGroup.js.map +1 -1
- package/lib/DropdownItem-8d334475.js +2 -0
- package/lib/DropdownItem-8d334475.js.map +1 -0
- package/lib/DropdownItem.js +1 -1
- package/lib/DropdownItem.js.map +1 -1
- package/lib/Message.js +1 -1
- package/lib/TagGroup.js +1 -1
- package/lib/TagGroup.js.map +1 -1
- package/lib/bundle.js +1 -1
- package/lib/bundle.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/src/dropdown-item/DropdownItem.d.ts +3 -0
- package/package.json +6 -6
- package/lib/DropdownItem-588f5a6b.js +0 -2
- package/lib/DropdownItem-588f5a6b.js.map +0 -1
package/lib/ButtonGroup.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as t,_ as r,s as o,x as a,e as n}from"./query-assigned-elements-92ce7494.js";import{n as e}from"./property-c78323b1.js";import{o as i}from"./class-map-512f0bc1.js";import{S as s}from"./SlotController-d733c575.js";import{D as d}from"./DirectionController-f35f5476.js";import{s as l}from"./Component-2253424f.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";const u=t`:host{--_n-button-group-border-radius:var(--n-button-group-border-radius, var(--n-border-radius-s));--_n-button-group-box-shadow:var(--n-button-group-box-shadow, var(--n-box-shadow));--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}:host([variant=default]){--n-button-border-radius:0;--n-button-box-shadow:none}.n-button-group{display:flex;flex-direction:var(--_n-button-group-flex-direction);max-inline-size:var(--_n-button-group-max-inline-size)}:host([variant=default]) .n-button-group{border-radius:var(--_n-button-group-border-radius);box-shadow:var(--_n-button-group-box-shadow)}:host([variant=spaced]) .n-button-group{gap:calc(var(--n-space-s) + var(--n-space-xs))}:host([variant=spaced]) .n-button-group.n-small-gap{gap:var(--n-space-s)}:host([variant=default][direction=horizontal]) ::slotted(*){margin-inline-end:-1px}:host([variant=default]) ::slotted(:is(:hover,:focus,:focus-within,[aria-pressed=true])){z-index:var(--n-index-mask)}:host([variant=default]) ::slotted([aria-pressed=true]){--n-button-background-color:var(--n-color-status-info-weak);--n-button-border-color:var(--n-color-accent)}:host([variant=default]) ::slotted(*){border-radius:var(--n-button-border-radius)}:host([variant=default]) .n-rtl ::slotted(:last-child),:host([variant=default]) :not(.n-rtl) ::slotted(:first-child){--n-button-border-radius:var(--_n-button-group-border-radius) 0 0 var(--_n-button-group-border-radius)}:host([variant=default]) .n-rtl ::slotted(:first-child),:host([variant=default]) :not(.n-rtl) ::slotted(:last-child){--n-button-border-radius:0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0}:host([direction=vertical]) .n-button-group{--_n-button-group-flex-direction:column}:host([variant=default][direction=vertical]) ::slotted(*){margin-block-end:-1px}:host([variant=default][direction=vertical]) ::slotted(:first-child){--n-button-border-radius:var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0 0}:host([variant=default][direction=vertical]) ::slotted(:last-child){--n-button-border-radius:0 0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius)}:host([variant=spaced][wrap]) .n-button-group{flex-wrap:wrap}:host([variant=default]) ::slotted(nord-button[variant=primary]){position:relative}:host([variant=default]) ::slotted(nord-button[variant=primary]:not(:is(:focus,:first-child)))::before,:host([variant=default]) ::slotted(nord-button[variant=primary]:not(:is(:focus,:last-child)))::after{content:"";position:absolute;z-index:var(--n-index-mask);background:var(--n-color-text);opacity:.25}:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::after,:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::before{inline-size:1px;inset-block:0}:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::after{inset-inline-end:0}:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::after,:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::before{block-size:1px;inset-inline:0}:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::after{inset-block-end:0}`;let b=class extends o{constructor(){super(...arguments),this.defaultSlot=new s(this),this.dirController=new d(this),this.variant="default",this.direction="horizontal",this.wrap=!1,this.role="group"}render(){const t=this.defaultSlot.assigned.every((t=>"nord-button"!==t.localName&&"nord-select"!==t.localName||"s"===t.getAttribute("size")));return a`<div class="${i({"n-button-group":!0,"n-rtl":this.dirController.isRTL,"n-small-gap":t&&"spaced"===this.variant})}"><slot></slot></div>`}};b.styles=[l,u],r([e({reflect:!0})],b.prototype,"variant",void 0),r([e({reflect:!0})],b.prototype,"direction",void 0),r([e({reflect:!0,type:Boolean})],b.prototype,"wrap",void 0),r([e({reflect:!0})],b.prototype,"role",void 0),b=r([n("nord-button-group")],b);var
|
|
1
|
+
import{i as t,_ as r,s as o,x as a,e as n}from"./query-assigned-elements-92ce7494.js";import{n as e}from"./property-c78323b1.js";import{o as i}from"./class-map-512f0bc1.js";import{S as s}from"./SlotController-d733c575.js";import{D as d}from"./DirectionController-f35f5476.js";import{s as l}from"./Component-2253424f.js";import"./directive-e9ce14b4.js";import"./EventController-d99ebeef.js";const u=t`:host{--_n-button-group-border-radius:var(--n-button-group-border-radius, var(--n-border-radius-s));--_n-button-group-box-shadow:var(--n-button-group-box-shadow, var(--n-box-shadow));--_n-button-group-flex-direction:row;--_n-button-group-max-inline-size:max-content}:host([variant=default]){--n-button-border-radius:0;--n-button-box-shadow:none}.n-button-group{display:flex;flex-direction:var(--_n-button-group-flex-direction);max-inline-size:var(--_n-button-group-max-inline-size)}:host([variant=default]) .n-button-group{border-radius:var(--_n-button-group-border-radius);box-shadow:var(--_n-button-group-box-shadow)}:host([variant=spaced]) .n-button-group{gap:calc(var(--n-space-s) + var(--n-space-xs))}:host([variant=spaced]) .n-button-group.n-small-gap{gap:var(--n-space-s)}:host([variant=default][direction=horizontal]) ::slotted(*){margin-inline-end:-1px}:host([variant=default]) ::slotted(:is(:hover,:focus,:focus-within,[aria-pressed=true])){z-index:var(--n-index-mask)}:host([variant=default]) ::slotted(:is(:focus,:focus-within)){--n-button-box-shadow:var(--n-button-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow))}:host([variant=default]) ::slotted([aria-pressed=true]){--n-button-background-color:var(--n-color-status-info-weak);--n-button-border-color:var(--n-color-accent)}:host([variant=default]) ::slotted(*){border-radius:var(--n-button-border-radius)}:host([variant=default]) .n-rtl ::slotted(:last-child),:host([variant=default]) :not(.n-rtl) ::slotted(:first-child){--n-button-border-radius:var(--_n-button-group-border-radius) 0 0 var(--_n-button-group-border-radius)}:host([variant=default]) .n-rtl ::slotted(:first-child),:host([variant=default]) :not(.n-rtl) ::slotted(:last-child){--n-button-border-radius:0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0}:host([direction=vertical]) .n-button-group{--_n-button-group-flex-direction:column}:host([variant=default][direction=vertical]) ::slotted(*){margin-block-end:-1px}:host([variant=default][direction=vertical]) ::slotted(:first-child){--n-button-border-radius:var(--_n-button-group-border-radius) var(--_n-button-group-border-radius) 0 0}:host([variant=default][direction=vertical]) ::slotted(:last-child){--n-button-border-radius:0 0 var(--_n-button-group-border-radius) var(--_n-button-group-border-radius)}:host([variant=spaced][wrap]) .n-button-group{flex-wrap:wrap}:host([variant=default]) ::slotted(nord-button[variant=primary]){position:relative}:host([variant=default]) ::slotted(nord-button[variant=primary]:not(:is(:focus,:first-child)))::before,:host([variant=default]) ::slotted(nord-button[variant=primary]:not(:is(:focus,:last-child)))::after{content:"";position:absolute;z-index:var(--n-index-mask);background:var(--n-color-text);opacity:.25}:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::after,:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::before{inline-size:1px;inset-block:0}:host([variant=default][direction=horizontal]) ::slotted(nord-button[variant=primary])::after{inset-inline-end:0}:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::after,:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::before{block-size:1px;inset-inline:0}:host([variant=default][direction=vertical]) ::slotted(nord-button[variant=primary])::after{inset-block-end:0}`;let b=class extends o{constructor(){super(...arguments),this.defaultSlot=new s(this),this.dirController=new d(this),this.variant="default",this.direction="horizontal",this.wrap=!1,this.role="group"}render(){const t=this.defaultSlot.assigned.every((t=>"nord-button"!==t.localName&&"nord-select"!==t.localName||"s"===t.getAttribute("size")));return a`<div class="${i({"n-button-group":!0,"n-rtl":this.dirController.isRTL,"n-small-gap":t&&"spaced"===this.variant})}"><slot></slot></div>`}};b.styles=[l,u],r([e({reflect:!0})],b.prototype,"variant",void 0),r([e({reflect:!0})],b.prototype,"direction",void 0),r([e({reflect:!0,type:Boolean})],b.prototype,"wrap",void 0),r([e({reflect:!0})],b.prototype,"role",void 0),b=r([n("nord-button-group")],b);var c=b;export{c as default};
|
|
2
2
|
//# sourceMappingURL=ButtonGroup.js.map
|
package/lib/ButtonGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonGroup.js","sources":["../src/button-group/ButtonGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./ButtonGroup.css\"\n\n/**\n * Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.\n *\n * @status new\n * @category structure\n * @slot - The button group content\n *\n * @cssprop [--n-button-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.\n * @cssprop [--n-button-group-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.\n */\n@customElement(\"nord-button-group\")\nexport default class ButtonGroup extends LitElement {\n static styles = [componentStyle, style]\n\n private defaultSlot = new SlotController(this)\n private dirController = new DirectionController(this)\n\n /**\n * The style variant of the button group.\n */\n @property({ reflect: true }) variant: \"default\" | \"spaced\" = \"default\"\n\n /**\n * The direction of the button group.\n */\n @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"horizontal\"\n\n /**\n * Defines whether the buttons are forced in a single line\n * or can be flowed into multiple lines (only applied when variant is set to `spaced`).\n */\n @property({ reflect: true, type: Boolean }) wrap = false\n\n /**\n * The appropriate role for the containing element.\n */\n // eslint-disable-next-line lit/no-native-attributes\n @property({ reflect: true }) role: string = \"group\"\n\n render() {\n const hasSmallButtons = this.defaultSlot.assigned.every(node => {\n if (node.localName === \"nord-button\" || node.localName === \"nord-select\") {\n return node.getAttribute(\"size\") === \"s\"\n }\n\n return true\n })\n\n return html`\n <div\n class=${classMap({\n \"n-button-group\": true,\n \"n-rtl\": this.dirController.isRTL,\n \"n-small-gap\": hasSmallButtons && this.variant === \"spaced\",\n })}\n >\n <slot></slot>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-button-group\": ButtonGroup\n }\n}\n"],"names":["ButtonGroup","LitElement","constructor","this","defaultSlot","SlotController","dirController","DirectionController","variant","direction","wrap","role","render","hasSmallButtons","assigned","every","node","localName","getAttribute","html","classMap","isRTL","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ButtonGroup.js","sources":["../src/button-group/ButtonGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./ButtonGroup.css\"\n\n/**\n * Button groups are designed to bring together button controls that are of a similar nature. For example text formatting controls.\n *\n * @status new\n * @category structure\n * @slot - The button group content\n *\n * @cssprop [--n-button-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the button group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.\n * @cssprop [--n-button-group-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.\n */\n@customElement(\"nord-button-group\")\nexport default class ButtonGroup extends LitElement {\n static styles = [componentStyle, style]\n\n private defaultSlot = new SlotController(this)\n private dirController = new DirectionController(this)\n\n /**\n * The style variant of the button group.\n */\n @property({ reflect: true }) variant: \"default\" | \"spaced\" = \"default\"\n\n /**\n * The direction of the button group.\n */\n @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"horizontal\"\n\n /**\n * Defines whether the buttons are forced in a single line\n * or can be flowed into multiple lines (only applied when variant is set to `spaced`).\n */\n @property({ reflect: true, type: Boolean }) wrap = false\n\n /**\n * The appropriate role for the containing element.\n */\n // eslint-disable-next-line lit/no-native-attributes\n @property({ reflect: true }) role: string = \"group\"\n\n render() {\n const hasSmallButtons = this.defaultSlot.assigned.every(node => {\n if (node.localName === \"nord-button\" || node.localName === \"nord-select\") {\n return node.getAttribute(\"size\") === \"s\"\n }\n\n return true\n })\n\n return html`\n <div\n class=${classMap({\n \"n-button-group\": true,\n \"n-rtl\": this.dirController.isRTL,\n \"n-small-gap\": hasSmallButtons && this.variant === \"spaced\",\n })}\n >\n <slot></slot>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-button-group\": ButtonGroup\n }\n}\n"],"names":["ButtonGroup","LitElement","constructor","this","defaultSlot","SlotController","dirController","DirectionController","variant","direction","wrap","role","render","hasSmallButtons","assigned","every","node","localName","getAttribute","html","classMap","isRTL","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"kwHAoBe,IAAMA,EAAN,cAA0BC,EAA1B,WAAAC,uBAGLC,KAAAC,YAAc,IAAIC,EAAeF,MACjCA,KAAAG,cAAgB,IAAIC,EAAoBJ,MAKnBA,KAAOK,QAAyB,UAKhCL,KAASM,UAA8B,aAMxBN,KAAIO,MAAG,EAMtBP,KAAIQ,KAAW,OAuB7C,CArBC,MAAAC,GACE,MAAMC,EAAkBV,KAAKC,YAAYU,SAASC,OAAMC,GAC/B,gBAAnBA,EAAKC,WAAkD,gBAAnBD,EAAKC,WACN,MAA9BD,EAAKE,aAAa,UAM7B,OAAOC,CAAI,eAECC,EAAS,CACf,kBAAkB,EAClB,QAASjB,KAAKG,cAAce,MAC5B,cAAeR,GAAoC,WAAjBV,KAAKK,gCAM9C,GA/CMR,EAAAsB,OAAS,CAACC,EAAgBC,GAQJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiD3B,EAAA4B,UAAA,eAAA,GAKzCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2D3B,EAAA4B,UAAA,iBAAA,GAMpCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAuB9B,EAAA4B,UAAA,YAAA,GAM3BH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA8B3B,EAAA4B,UAAA,YAAA,GA1BhC5B,EAAWyB,EAAA,CAD/BM,EAAc,sBACM/B,SAAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{i as o}from"./query-assigned-elements-92ce7494.js";const n=o`:host{--_n-dropdown-item-background-color:var(--n-dropdown-item-background-color, transparent);--_n-dropdown-item-color:var(--n-dropdown-item-color, var(--n-color-text));display:flex;line-height:var(--n-line-height-tight)}.n-dropdown-item{-webkit-appearance:none;appearance:none;cursor:pointer;display:flex;flex:1;gap:var(--n-space-s);align-items:center;font-family:inherit;font-size:inherit;font-weight:var(--n-font-weight);text-decoration:none;border:0;color:var(--_n-dropdown-item-color);padding:var(--n-space-s);border-radius:var(--n-border-radius-s);background:var(--_n-dropdown-item-background-color);text-align:start;box-shadow:var(--n-dropdown-item-box-shadow,none);min-inline-size:0}.n-dropdown-item:hover{--_n-dropdown-item-background-color:var(--n-dropdown-item-background-color, var(--n-color-accent));--_n-dropdown-item-color:var(--n-dropdown-item-color, var(--n-color-text-on-accent))}.n-dropdown-item:hover ::slotted(*){color:var(--n-dropdown-item-color,var(--n-color-text-on-accent))!important}.n-dropdown-item ::slotted(nord-icon){color:var(--n-color-icon)}.n-dropdown-item:hover ::slotted(nord-icon){color:currentColor}.n-dropdown-item:active{opacity:.7}.n-dropdown-item:focus{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-dropdown-item:focus{--n-dropdown-item-box-shadow:none}.n-dropdown-item:focus-visible{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent)}}@media (max-width:35.9375em){.n-dropdown-item{gap:var(--n-space-m);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-dropdown-item ::slotted(nord-icon){block-size:var(--n-size-icon-m);inline-size:var(--n-size-icon-m)}}slot[name=end],slot[name=start]{flex:0 0 auto}slot[name=end]{display:flex;margin-inline-start:auto}.n-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-s)}`;export{n as s};
|
|
2
|
+
//# sourceMappingURL=DropdownItem-8d334475.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropdownItem-8d334475.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/lib/DropdownItem.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{_ as t,e,x as s,s as o}from"./query-assigned-elements-92ce7494.js";import{n as r}from"./property-c78323b1.js";import{l as a}from"./if-defined-cccde88f.js";import{n}from"./ref-99418ab4.js";import{F as i}from"./FocusableMixin-d30213b4.js";import{s as f}from"./Component-2253424f.js";import{s as m}from"./DropdownItem-
|
|
1
|
+
import{_ as t,e,x as s,s as o}from"./query-assigned-elements-92ce7494.js";import{n as r}from"./property-c78323b1.js";import{l as a}from"./if-defined-cccde88f.js";import{n}from"./ref-99418ab4.js";import{F as i}from"./FocusableMixin-d30213b4.js";import{s as f}from"./Component-2253424f.js";import{s as m}from"./DropdownItem-8d334475.js";import"./directive-e9ce14b4.js";let p=class extends(i(o)){constructor(){super(...arguments),this.target="_self"}render(){return(this.href?t=>s`<a href="${a(this.href)}" ${n(this.focusableRef)} target="${this.target}" class="n-dropdown-item">${t}</a>`:t=>s`<button ${n(this.focusableRef)} class="n-dropdown-item">${t}</button>`)(s`<slot name="start"></slot><span class="n-truncate"><slot></slot></span><slot name="end"></slot>`)}};p.styles=[f,m],t([r({reflect:!0})],p.prototype,"href",void 0),t([r()],p.prototype,"target",void 0),p=t([e("nord-dropdown-item")],p);var d=p;export{d as default};
|
|
2
2
|
//# sourceMappingURL=DropdownItem.js.map
|
package/lib/DropdownItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownItem.js","sources":["../src/dropdown-item/DropdownItem.ts"],"sourcesContent":["import { LitElement, html, TemplateResult } 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 { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./DropdownItem.css\"\n\n/**\n * Dropdown item populates dropdown with actions. Items can be\n * placed either inside a dropdown group or directly inside a\n * dropdown component.\n *\n * @status ready\n * @category action\n * @slot - The dropdown item content.\n * @slot start - Used to place content before dropdown item text. Typically used for icons.\n * @slot end - Used to place content after dropdown item text. Typically used for icons.\n */\n@customElement(\"nord-dropdown-item\")\nexport default class DropdownItem extends FocusableMixin(LitElement) {\n static styles = [componentStyle, style]\n\n /**\n * The url the dropdown item should link to.\n */\n @property({ reflect: true }) href?: string\n\n /**\n * When provided together with a href property, determines where\n * to open the linked URL. The keywords have special meanings for\n * where to load the URL: “_self” means the current browsing context,\n * “_blank” usually a new tab but users can configure browsers this to\n * open a new window instead, “_parent” means the parent browsing\n * context of the current one, but if no parent exists, behaves as\n * _self, and finally “top” means the topmost browsing context.\n */\n @property() target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\"\n\n render() {\n const link = (content: TemplateResult) =>\n html`<a href=${ifDefined(this.href)} ${ref(this.focusableRef)} target=${this.target} class=\"n-dropdown-item\">\n ${content}\n </a>`\n const button = (content: TemplateResult) =>\n html`<button ${ref(this.focusableRef)} class=\"n-dropdown-item\">${content}</button>`\n\n const container = this.href ? link : button\n\n return container(html`\n <slot name=\"start\"></slot>\n <span class=\"n-truncate\"><slot></slot></span>\n <slot name=\"end\"></slot>\n `)\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-dropdown-item\": DropdownItem\n }\n}\n"],"names":["DropdownItem","FocusableMixin","LitElement","constructor","this","target","render","href","content","html","ifDefined","ref","focusableRef","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"+
|
|
1
|
+
{"version":3,"file":"DropdownItem.js","sources":["../src/dropdown-item/DropdownItem.ts"],"sourcesContent":["import { LitElement, html, TemplateResult } 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 { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./DropdownItem.css\"\n\n/**\n * Dropdown item populates dropdown with actions. Items can be\n * placed either inside a dropdown group or directly inside a\n * dropdown component.\n *\n * @status ready\n * @category action\n * @slot - The dropdown item content.\n * @slot start - Used to place content before dropdown item text. Typically used for icons.\n * @slot end - Used to place content after dropdown item text. Typically used for icons.\n *\n * @cssprop [--n-dropdown-item-background-color=transparent] - Controls the background color of the item, using our [color tokens](/tokens/#color).\n * @cssprop [--n-dropdown-item-color=var(--n-color-text)] - Controls the color of the text within the item, using our [color tokens](/tokens/#color).\n */\n@customElement(\"nord-dropdown-item\")\nexport default class DropdownItem extends FocusableMixin(LitElement) {\n static styles = [componentStyle, style]\n\n /**\n * The url the dropdown item should link to.\n */\n @property({ reflect: true }) href?: string\n\n /**\n * When provided together with a href property, determines where\n * to open the linked URL. The keywords have special meanings for\n * where to load the URL: “_self” means the current browsing context,\n * “_blank” usually a new tab but users can configure browsers this to\n * open a new window instead, “_parent” means the parent browsing\n * context of the current one, but if no parent exists, behaves as\n * _self, and finally “top” means the topmost browsing context.\n */\n @property() target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\"\n\n render() {\n const link = (content: TemplateResult) =>\n html`<a href=${ifDefined(this.href)} ${ref(this.focusableRef)} target=${this.target} class=\"n-dropdown-item\">\n ${content}\n </a>`\n const button = (content: TemplateResult) =>\n html`<button ${ref(this.focusableRef)} class=\"n-dropdown-item\">${content}</button>`\n\n const container = this.href ? link : button\n\n return container(html`\n <slot name=\"start\"></slot>\n <span class=\"n-truncate\"><slot></slot></span>\n <slot name=\"end\"></slot>\n `)\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-dropdown-item\": DropdownItem\n }\n}\n"],"names":["DropdownItem","FocusableMixin","LitElement","constructor","this","target","render","href","content","html","ifDefined","ref","focusableRef","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"+WAwBe,IAAMA,EAAN,cAA2BC,EAAeC,IAA1C,WAAAC,uBAiBDC,KAAMC,OAA4C,OAkB/D,CAhBC,MAAAC,GAUE,OAFkBF,KAAKG,KAPTC,GACZC,CAAI,YAAWC,EAAUN,KAAKG,UAASI,EAAIP,KAAKQ,yBAAwBR,KAAKC,mCACzEG,QAEUA,GACdC,CAAI,WAAWE,EAAIP,KAAKQ,yCAAyCJ,cAIlDC,CAAI,kGAKtB,GAjCMT,EAAAa,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBlB,EAAAmB,UAAA,YAAA,GAW9BH,EAAA,CAAXC,KAAoEjB,EAAAmB,UAAA,cAAA,GAjBlDnB,EAAYgB,EAAA,CADhCI,EAAc,uBACMpB,SAAAA"}
|
package/lib/Message.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as o,x as r,e as i,s as t}from"./query-assigned-elements-92ce7494.js";import{n}from"./property-c78323b1.js";import{l as s}from"./if-defined-cccde88f.js";import{n as a}from"./ref-99418ab4.js";import{F as l}from"./FocusableMixin-d30213b4.js";import{s as c}from"./Component-2253424f.js";import{s as d}from"./DropdownItem-
|
|
1
|
+
import{i as e,_ as o,x as r,e as i,s as t}from"./query-assigned-elements-92ce7494.js";import{n}from"./property-c78323b1.js";import{l as s}from"./if-defined-cccde88f.js";import{n as a}from"./ref-99418ab4.js";import{F as l}from"./FocusableMixin-d30213b4.js";import{s as c}from"./Component-2253424f.js";import{s as d}from"./DropdownItem-8d334475.js";import{LocalizeController as m}from"./LocalizeController.js";import"./directive-e9ce14b4.js";import"./translation.js";import"./en-us.js";import"./localization.js";import"./localization2.js";import"./localization3.js";import"./localization4.js";import"./localization5.js";import"./localization6.js";import"./localization7.js";import"./localization8.js";import"./localization9.js";const p=e`:host{--_n-message-border-color:var(--n-message-border-color, var(--n-color-border));padding:var(--n-space-s);border-block-end:1px solid var(--_n-message-border-color)}.n-message{flex-direction:column;gap:var(--n-space-xs);align-items:flex-start;padding-inline-start:var(--n-space-xl);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight);line-height:var(--n-line-height-heading);margin:0;color:var(--n-color-text);position:relative}slot[name=footer]{font-size:var(--n-font-size-s);font-weight:var(--n-font-weight);color:var(--n-color-text-weaker);line-height:var(--n-line-height-heading)}:host([highlight]) .n-message::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--n-index-deep);border-radius:var(--n-border-radius-s);block-size:100%;inline-size:100%;opacity:.15;background:var(--n-color-accent);filter:brightness(150%)}.n-unread{position:absolute;min-inline-size:var(--n-size-icon-xxs);min-block-size:var(--n-size-icon-xxs);inset-block-start:calc(var(--n-space-s) + var(--n-space-xs));inset-inline-start:var(--n-space-m);background:var(--n-color-accent);border-radius:var(--n-border-radius-circle)}.n-message:hover .n-unread{background:var(--n-color-text-on-accent)}`;let f=class extends(l(t)){constructor(){super(...arguments),this.localize=new m(this)}render(){return(this.href?e=>r`<a href="${s(this.href)}" ${a(this.focusableRef)} class="n-dropdown-item n-message">${e}</a>`:e=>r`<button ${a(this.focusableRef)} class="n-dropdown-item n-message">${e}</button>`)(r`<div role="img" class="n-unread" aria-label="${this.localize.term("unreadLabel")}" ?hidden="${!this.unread}"></div><slot></slot><slot name="footer"></slot>`)}};f.styles=[c,d,p],o([n({reflect:!0})],f.prototype,"href",void 0),o([n({reflect:!0,type:Boolean})],f.prototype,"highlight",void 0),o([n({reflect:!0,type:Boolean})],f.prototype,"unread",void 0),f=o([i("nord-message")],f);var h=f;export{h as default};
|
|
2
2
|
//# sourceMappingURL=Message.js.map
|
package/lib/TagGroup.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as r,x as t,_ as a,e as o,s as e}from"./query-assigned-elements-92ce7494.js";import{n as i}from"./property-c78323b1.js";import{o as n}from"./class-map-512f0bc1.js";import{D as s}from"./DraftComponentMixin-9e4b7b34.js";import{D as d}from"./DirectionController-f35f5476.js";import{s as l}from"./Component-2253424f.js";import"./directive-e9ce14b4.js";const u=r`:host{--_n-tag-group-border-radius:var(--n-tag-group-border-radius, var(--n-border-radius-s));--_n-tag-group-box-shadow:var(--n-tag-group-box-shadow, var(--n-box-shadow));--_n-tag-group-flex-direction:row;--_n-tag-group-max-inline-size:max-content}:host([variant=default]){--n-tag-border-radius:0;--n-tag-box-shadow:none}.n-tag-group{display:flex;flex-direction:var(--_n-tag-group-flex-direction);max-inline-size:var(--_n-tag-group-max-inline-size)}:host([variant=default]) .n-tag-group{border-radius:var(--_n-tag-group-border-radius);box-shadow:var(--_n-tag-group-box-shadow)}:host([variant=spaced]) .n-tag-group{gap:var(--n-space-s)}:host([variant=default][direction=horizontal]) ::slotted(*){margin-inline-end:-1px}:host([variant=default]) ::slotted(:is(:hover,:focus,:focus-within)){z-index:var(--n-index-mask)}:host([variant=default]) ::slotted(*){border-radius:var(--n-tag-border-radius)}:host([variant=default]) .n-rtl ::slotted(:last-child),:host([variant=default]) :not(.n-rtl) ::slotted(:first-child){--n-tag-border-radius:var(--_n-tag-group-border-radius) 0 0 var(--_n-tag-group-border-radius)}:host([variant=default]) .n-rtl ::slotted(:first-child),:host([variant=default]) :not(.n-rtl) ::slotted(:last-child){--n-tag-border-radius:0 var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius) 0}:host([direction=vertical]) .n-tag-group{--_n-tag-group-flex-direction:column}:host([variant=default][direction=vertical]) ::slotted(*){margin-block-end:-1px}:host([variant=default][direction=vertical]) ::slotted(:first-child){--n-tag-border-radius:var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius) 0 0}:host([variant=default][direction=vertical]) ::slotted(:last-child){--n-tag-border-radius:0 0 var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius)}:host([variant=spaced][wrap]) .n-tag-group{flex-wrap:wrap}`;let g=class extends(s(e)){constructor(){super(...arguments),this.dirController=new d(this),this.variant="default",this.direction="horizontal",this.wrap=!1,this.role="group"}render(){return t`<div class="${n({"n-tag-group":!0,"n-rtl":this.dirController.isRTL})}"><slot></slot></div>`}};g.styles=[l,u],a([i({reflect:!0})],g.prototype,"variant",void 0),a([i({reflect:!0})],g.prototype,"direction",void 0),a([i({reflect:!0,type:Boolean})],g.prototype,"wrap",void 0),a([i({reflect:!0})],g.prototype,"role",void 0),g=a([o("nord-tag-group")],g);var p=g;export{p as default};
|
|
1
|
+
import{i as r,x as t,_ as a,e as o,s as e}from"./query-assigned-elements-92ce7494.js";import{n as i}from"./property-c78323b1.js";import{o as n}from"./class-map-512f0bc1.js";import{D as s}from"./DraftComponentMixin-9e4b7b34.js";import{D as d}from"./DirectionController-f35f5476.js";import{s as l}from"./Component-2253424f.js";import"./directive-e9ce14b4.js";const u=r`:host{--_n-tag-group-border-radius:var(--n-tag-group-border-radius, var(--n-border-radius-s));--_n-tag-group-box-shadow:var(--n-tag-group-box-shadow, var(--n-box-shadow));--_n-tag-group-flex-direction:row;--_n-tag-group-max-inline-size:max-content}:host([variant=default]){--n-tag-border-radius:0;--n-tag-box-shadow:none}.n-tag-group{display:flex;flex-direction:var(--_n-tag-group-flex-direction);max-inline-size:var(--_n-tag-group-max-inline-size)}:host([variant=default]) .n-tag-group{border-radius:var(--_n-tag-group-border-radius);box-shadow:var(--_n-tag-group-box-shadow)}:host([variant=spaced]) .n-tag-group{gap:var(--n-space-s)}:host([variant=default][direction=horizontal]) ::slotted(*){margin-inline-end:-1px}:host([variant=default]) ::slotted(:is(:hover,:focus,:focus-within)){z-index:var(--n-index-mask)}:host([variant=default]) ::slotted(:is(:focus,:focus-within)){--n-tag-box-shadow:var(--n-tag-box-shadow, 0 0 0 1px var(--n-color-accent), var(--n-box-shadow))}:host([variant=default]) ::slotted(*){border-radius:var(--n-tag-border-radius)}:host([variant=default]) .n-rtl ::slotted(:last-child),:host([variant=default]) :not(.n-rtl) ::slotted(:first-child){--n-tag-border-radius:var(--_n-tag-group-border-radius) 0 0 var(--_n-tag-group-border-radius)}:host([variant=default]) .n-rtl ::slotted(:first-child),:host([variant=default]) :not(.n-rtl) ::slotted(:last-child){--n-tag-border-radius:0 var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius) 0}:host([direction=vertical]) .n-tag-group{--_n-tag-group-flex-direction:column}:host([variant=default][direction=vertical]) ::slotted(*){margin-block-end:-1px}:host([variant=default][direction=vertical]) ::slotted(:first-child){--n-tag-border-radius:var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius) 0 0}:host([variant=default][direction=vertical]) ::slotted(:last-child){--n-tag-border-radius:0 0 var(--_n-tag-group-border-radius) var(--_n-tag-group-border-radius)}:host([variant=spaced][wrap]) .n-tag-group{flex-wrap:wrap}`;let g=class extends(s(e)){constructor(){super(...arguments),this.dirController=new d(this),this.variant="default",this.direction="horizontal",this.wrap=!1,this.role="group"}render(){return t`<div class="${n({"n-tag-group":!0,"n-rtl":this.dirController.isRTL})}"><slot></slot></div>`}};g.styles=[l,u],a([i({reflect:!0})],g.prototype,"variant",void 0),a([i({reflect:!0})],g.prototype,"direction",void 0),a([i({reflect:!0,type:Boolean})],g.prototype,"wrap",void 0),a([i({reflect:!0})],g.prototype,"role",void 0),g=a([o("nord-tag-group")],g);var p=g;export{p as default};
|
|
2
2
|
//# sourceMappingURL=TagGroup.js.map
|
package/lib/TagGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagGroup.js","sources":["../src/tag-group/TagGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TagGroup.css\"\n\n/**\n * Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.\n *\n * @status draft\n * @category structure\n * @slot - The tag group content\n *\n * @cssprop [--n-tag-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the tag group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.\n * @cssprop [--n-tag-group-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.\n */\n@customElement(\"nord-tag-group\")\nexport default class TagGroup extends DraftComponentMixin(LitElement) {\n static styles = [componentStyle, style]\n\n private dirController = new DirectionController(this)\n\n /**\n * The style variant of the tag group.\n */\n @property({ reflect: true }) variant: \"default\" | \"spaced\" = \"default\"\n\n /**\n * The direction of the tag group.\n */\n @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"horizontal\"\n\n /**\n * Defines whether the tags are forced in a single line\n * or can be flowed into multiple lines (only applied when variant is set to `spaced`).\n */\n @property({ reflect: true, type: Boolean }) wrap = false\n\n /**\n * The appropriate role for the containing element.\n */\n // eslint-disable-next-line lit/no-native-attributes\n @property({ reflect: true }) role: string = \"group\"\n\n render() {\n return html`<div\n class=${classMap({\n \"n-tag-group\": true,\n \"n-rtl\": this.dirController.isRTL,\n })}\n >\n <slot></slot>\n </div>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-tag-group\": TagGroup\n }\n}\n"],"names":["TagGroup","DraftComponentMixin","LitElement","constructor","this","dirController","DirectionController","variant","direction","wrap","role","render","html","classMap","isRTL","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TagGroup.js","sources":["../src/tag-group/TagGroup.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { classMap } from \"lit/directives/class-map.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\nimport { DirectionController } from \"../common/controllers/DirectionController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TagGroup.css\"\n\n/**\n * Tag groups are designed to bring together selectable tags that are of a similar nature. For example categories you can filter by.\n *\n * @status draft\n * @category structure\n * @slot - The tag group content\n *\n * @cssprop [--n-tag-group-border-radius=var(--n-border-radius-s)] - Controls the rounded corners of the tag group, using [border radius tokens](/tokens/#border-radius). Only relevant for the default variant.\n * @cssprop [--n-tag-group-box-shadow=var(--n-box-shadow)] - Controls the surrounding shadow, using [box shadow tokens](/tokens/#box-shadow). Only relevant for the default variant.\n */\n@customElement(\"nord-tag-group\")\nexport default class TagGroup extends DraftComponentMixin(LitElement) {\n static styles = [componentStyle, style]\n\n private dirController = new DirectionController(this)\n\n /**\n * The style variant of the tag group.\n */\n @property({ reflect: true }) variant: \"default\" | \"spaced\" = \"default\"\n\n /**\n * The direction of the tag group.\n */\n @property({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"horizontal\"\n\n /**\n * Defines whether the tags are forced in a single line\n * or can be flowed into multiple lines (only applied when variant is set to `spaced`).\n */\n @property({ reflect: true, type: Boolean }) wrap = false\n\n /**\n * The appropriate role for the containing element.\n */\n // eslint-disable-next-line lit/no-native-attributes\n @property({ reflect: true }) role: string = \"group\"\n\n render() {\n return html`<div\n class=${classMap({\n \"n-tag-group\": true,\n \"n-rtl\": this.dirController.isRTL,\n })}\n >\n <slot></slot>\n </div>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-tag-group\": TagGroup\n }\n}\n"],"names":["TagGroup","DraftComponentMixin","LitElement","constructor","this","dirController","DirectionController","variant","direction","wrap","role","render","html","classMap","isRTL","styles","componentStyle","style","__decorate","property","reflect","prototype","type","Boolean","customElement"],"mappings":"i1EAoBe,IAAMA,EAAN,cAAuBC,EAAoBC,IAA3C,WAAAC,uBAGLC,KAAAC,cAAgB,IAAIC,EAAoBF,MAKnBA,KAAOG,QAAyB,UAKhCH,KAASI,UAA8B,aAMxBJ,KAAIK,MAAG,EAMtBL,KAAIM,KAAW,OAY7C,CAVC,MAAAC,GACE,OAAOC,CAAI,eACDC,EAAS,CACf,eAAe,EACf,QAAST,KAAKC,cAAcS,8BAKjC,GAnCMd,EAAAe,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAiDpB,EAAAqB,UAAA,eAAA,GAKzCH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA2DpB,EAAAqB,UAAA,iBAAA,GAMpCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMC,WAAuBvB,EAAAqB,UAAA,YAAA,GAM3BH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA8BpB,EAAAqB,UAAA,YAAA,GAzBhCrB,EAAQkB,EAAA,CAD5BM,EAAc,mBACMxB,SAAAA"}
|