@nordhealth/components 3.4.0-alpha.1 → 3.4.0-alpha.2

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/lib/TopBar.js CHANGED
@@ -1,2 +1,2 @@
1
- import{i as n,x as o,_ as t,e as r,s as a}from"./query-assigned-elements-822fe360.js";import{D as e}from"./DraftComponentMixin-9e4b7b34.js";import{s as i}from"./Component-1f694235.js";const l=n`:host{background:var(--n-color-accent-secondary);block-size:52px;display:flex;align-items:center;color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active);padding-inline-start:calc(var(--n-space-m) + var(--_n-header-gutter,0px));padding-inline-end:var(--n-space-s);gap:var(--n-space-xs)}slot{display:block}slot:not([name]){flex:1}slot[name=end]{display:flex;margin-inline-start:auto;align-items:center;gap:1px}::slotted(:is(h1, h2, h3, h4, h5, h6, p, em, span)){color:var(--n-color-text-on-accent)!important;font-size:var(--n-font-size-m)!important;line-height:var(--n-line-height)!important;font-weight:var(--n-font-weight-active)!important;font-style:normal!important}::slotted(:is(nord-avatar, nord-dropdown)){--n-avatar-color:var(--n-color-accent-secondary);--n-avatar-box-shadow:inset 0 0 0 100px rgba(255, 255, 255, 0.2),0 0 0 1px rgba(255, 255, 255, 0.6)}::slotted(nord-input){--n-input-background:rgba(255, 255, 255, 0.15);--n-input-border-color:rgba(255, 255, 255, 0.4);--n-input-placeholder-color:rgba(255, 255, 255, 0.85);--n-input-icon-color:rgba(255, 255, 255, 0.85);--n-input-color:#fff;transition:inline-size var(--n-transition-slowly);inline-size:min(400px,100%)}::slotted(nord-input:hover){--n-input-border-color:rgba(255, 255, 255, 0.4);--n-input-placeholder-color:rgb(255, 255, 255);--n-input-icon-color:rgb(255, 255, 255)}::slotted(nord-input:focus){--n-input-background:var(--n-color-surface);--n-input-border-color:var(--n-color-surface);--n-input-placeholder-color:var(--n-color-text-weaker);--n-input-icon-color:var(--n-color-icon);--n-input-color:var(--n-color-text);--n-input-font-size:var(--n-font-size-l);inline-size:min(745px,100%)}::slotted(nord-dropdown){--n-button-gap:calc(var(--n-space-xs) / 2);--n-button-background-color:transparent;--n-button-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-button-padding-inline:calc(var(--n-space-s) + 2px);--n-button-overflow:visible}::slotted(nord-dropdown:is(:hover, [open], :focus-within)){--n-button-background-color:rgba(0, 0, 0, 0.25)}`;let s=class extends(e(a)){render(){return o`<slot></slot><slot name="end"></slot>`}};s.styles=[i,l],s=t([r("nord-top-bar")],s);var c=s;export{c as default};
1
+ import{i as n,x as o,_ as t,e as r,s as a}from"./query-assigned-elements-822fe360.js";import{D as e}from"./DraftComponentMixin-9e4b7b34.js";import{s as i}from"./Component-1f694235.js";const l=n`:host{background:var(--n-color-accent-secondary);block-size:52px;display:flex;align-items:center;color:var(--n-color-text-on-accent);font-weight:var(--n-font-weight-active);padding-inline-start:calc(var(--n-space-m) + var(--_n-header-gutter,0px));padding-inline-end:var(--n-space-s);gap:var(--n-space-xs)}slot{display:block}slot:not([name]){flex:1}slot[name=end]{display:flex;margin-inline-start:auto;align-items:center;gap:1px}::slotted(:is(h1, h2, h3, h4, h5, h6, p, em, span)){color:var(--n-color-text-on-accent)!important;font-size:var(--n-font-size-m)!important;line-height:var(--n-line-height)!important;font-weight:var(--n-font-weight-active)!important;font-style:normal!important}::slotted(:is(nord-avatar, nord-dropdown)){--n-avatar-color:var(--n-color-accent-secondary);--n-avatar-box-shadow:inset 0 0 0 100px rgba(255, 255, 255, 0.2),0 0 0 1px rgba(255, 255, 255, 0.6)}::slotted(nord-input){--n-input-background:rgba(255, 255, 255, 0.15);--n-input-border-color:rgba(255, 255, 255, 0.4);--n-input-placeholder-color:rgba(255, 255, 255, 0.85);--n-input-icon-color:rgba(255, 255, 255, 0.85);--n-input-color:#fff;transition:inline-size var(--n-transition-slowly);inline-size:min(400px,100%)}::slotted(nord-input:hover){--n-input-border-color:rgba(255, 255, 255, 0.4);--n-input-placeholder-color:rgb(255, 255, 255);--n-input-icon-color:rgb(255, 255, 255)}::slotted(nord-input:focus){--n-input-background:var(--n-color-surface);--n-input-border-color:var(--n-color-surface);--n-input-placeholder-color:var(--n-color-text-weaker);--n-input-icon-color:var(--n-color-icon);--n-input-color:var(--n-color-text);--n-input-font-size:var(--n-font-size-l);inline-size:min(745px,100%)}::slotted(nord-dropdown){--n-button-gap:calc(var(--n-space-xs) / 2);--n-button-background-color:transparent;--n-button-toggle-icon-color:rgba(255, 255, 255, 0.85);--n-button-padding-inline:calc(var(--n-space-s) + 2px);--n-button-overflow:visible}::slotted(nord-dropdown:is(:hover, [open], :focus-within)){--n-button-background-color:rgba(255, 255, 255, 0.18)}`;let s=class extends(e(a)){render(){return o`<slot></slot><slot name="end"></slot>`}};s.styles=[i,l],s=t([r("nord-top-bar")],s);var c=s;export{c as default};
2
2
  //# sourceMappingURL=TopBar.js.map
package/lib/TopBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TopBar.js","sources":["../src/top-bar/TopBar.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TopBar.css\"\n\n/**\n * Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.\n *\n * @status draft\n * @category structure\n * @slot - Used for the main content of the top bar. We recommend placing your application’s global search functionality into this slot.\n * @slot end - Optional slot for menus, buttons, toggles, etc.\n */\n@customElement(\"nord-top-bar\")\nexport default class TopBar extends DraftComponentMixin(LitElement) {\n static styles = [componentStyle, style]\n\n render() {\n return html`\n <slot></slot>\n <slot name=\"end\"></slot>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-top-bar\": TopBar\n }\n}\n"],"names":["TopBar","DraftComponentMixin","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"orEAgBe,IAAMA,EAAN,cAAqBC,EAAoBC,IAGtDC,SACE,OAAOC,CAAI,uCAIZ,GAPMJ,EAAAK,OAAS,CAACC,EAAgBC,GADdP,EAAMQ,EAAA,CAD1BC,EAAc,iBACMT,SAAAA"}
1
+ {"version":3,"file":"TopBar.js","sources":["../src/top-bar/TopBar.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\nimport { DraftComponentMixin } from \"../common/mixins/DraftComponentMixin.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./TopBar.css\"\n\n/**\n * Top bar is a header component that is always visible at the top of the interface. Top bar allows functionality such as search and contextual menus to be placed at the top of the interface.\n *\n * @status draft\n * @category structure\n * @slot - Used for the main content of the top bar. We recommend placing your application’s global search functionality into this slot.\n * @slot end - Optional slot for menus, buttons, toggles, etc.\n */\n@customElement(\"nord-top-bar\")\nexport default class TopBar extends DraftComponentMixin(LitElement) {\n static styles = [componentStyle, style]\n\n render() {\n return html`\n <slot></slot>\n <slot name=\"end\"></slot>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-top-bar\": TopBar\n }\n}\n"],"names":["TopBar","DraftComponentMixin","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"0rEAgBe,IAAMA,EAAN,cAAqBC,EAAoBC,IAGtDC,SACE,OAAOC,CAAI,uCAIZ,GAPMJ,EAAAK,OAAS,CAACC,EAAgBC,GADdP,EAAMQ,EAAA,CAD1BC,EAAc,iBACMT,SAAAA"}