@brad-frost-web/eddie-web-components 0.33.0 → 0.34.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/cdn/components/badge/badge.js +38 -19
- package/cdn/components/dot/dot.js +1 -1
- package/cdn/components/header/header.js +24 -20
- package/cdn/components/icon/icon.js +17 -9
- package/cdn/components/logo/logo.js +3 -3
- package/cdn/components/media-scrubber/media-scrubber.js +16 -16
- package/cdn/components/primary-nav/primary-nav.js +25 -16
- package/cdn/components/primary-nav-item/primary-nav-item.js +17 -17
- package/components/badge/badge.d.ts +47 -19
- package/components/badge/badge.d.ts.map +1 -1
- package/components/badge/badge.js +39 -20
- package/components/dot/dot.js +1 -1
- package/components/header/header.d.ts +12 -2
- package/components/header/header.d.ts.map +1 -1
- package/components/header/header.js +28 -24
- package/components/icon/icon.js +19 -11
- package/components/logo/logo.js +3 -3
- package/components/media-scrubber/media-scrubber.js +5 -5
- package/components/primary-nav/primary-nav.d.ts +14 -0
- package/components/primary-nav/primary-nav.d.ts.map +1 -1
- package/components/primary-nav/primary-nav.js +26 -17
- package/components/primary-nav-item/primary-nav-item.js +18 -18
- package/package.json +1 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { E as c } from "../../chunks/ed-base.CuGZbk3k.js";
|
|
2
|
-
import { d as h, r as
|
|
2
|
+
import { d as h, r as v, c as p, b as l, n } from "../../chunks/lit.Drf_LhNi.js";
|
|
3
3
|
import "../icon/icon.js";
|
|
4
|
-
const y = "
|
|
5
|
-
var
|
|
6
|
-
for (var
|
|
7
|
-
(s = o[m]) && (
|
|
8
|
-
return
|
|
4
|
+
const y = '@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-primary-nav__item{border-block-end:var(--ed-primary-nav-item-border-block-end, none)}.ed-c-primary-nav__link{font-family:var(--ed-primary-nav-link-font-family, var(--ed-theme-typography-primary-nav-default-mobile-font-family));font-weight:var(--ed-primary-nav-link-font-weight, var(--ed-theme-typography-primary-nav-default-mobile-font-weight));font-size:var(--ed-primary-nav-link-font-size, var(--ed-theme-typography-primary-nav-default-mobile-font-size));line-height:var(--ed-primary-nav-link-line-height, var(--ed-theme-typography-primary-nav-default-mobile-line-height));letter-spacing:var(--ed-primary-nav-link-letter-spacing, var(--ed-theme-typography-primary-nav-default-mobile-letter-spacing));text-transform:var(--ed-primary-nav-link-text-transform, var(--ed-theme-typography-primary-nav-default-mobile-text-transform));display:flex;align-items:center;appearance:none;background:none;border:none;border-radius:var(--ed-theme-border-radius-md);white-space:nowrap;width:100%;margin:0;padding:var(--ed-primary-nav-link-padding, 1rem 1rem );color:var(--ed-header-color-content, var(--ed-theme-color-content-knockout));text-decoration:none;transition:all var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease);cursor:pointer}.ed-c-primary-nav__link:hover,.ed-c-primary-nav__link:focus{transform:var(--ed-primary-nav-link-hover-transform, scale(1.05))}.ed-c-primary-nav__link:focus-visible{outline:var(--ed-theme-border-width-lg) solid var(--ed-header-focus-ring-color, var(--ed-theme-focus-ring-color-border-knockout));outline-offset:var(--ed-theme-offset-focus-ring, .25rem )}.ed-c-primary-nav__item--highlight .ed-c-primary-nav__link{padding:var(--ed-primary-nav-highlight-padding, 1rem );background:var(--ed-primary-nav-highlight-background, var(--ed-theme-color-background-brand-knockout));color:var(--ed-primary-nav-highlight-color, var(--ed-header-color-content, var(--ed-theme-color-content-knockout)));text-decoration:var(--ed-primary-nav-highlight-text-decoration, none);justify-content:var(--ed-primary-nav-highlight-justify, center)}.ed-c-primary-nav__item.ed-is-active .ed-c-primary-nav__link{background:var(--ed-theme-color-background-brand-knockout);color:var(--ed-theme-color-content-knockout)}@media all and (min-width:48rem){.ed-c-primary-nav__link{font-family:var(--ed-primary-nav-link-font-family, var(--ed-theme-typography-primary-nav-default-font-family));font-weight:var(--ed-primary-nav-link-font-weight, var(--ed-theme-typography-primary-nav-default-font-weight));font-size:var(--ed-primary-nav-link-font-size, var(--ed-theme-typography-primary-nav-default-font-size));line-height:var(--ed-primary-nav-link-line-height, var(--ed-theme-typography-primary-nav-default-line-height));letter-spacing:var(--ed-primary-nav-link-letter-spacing, var(--ed-theme-typography-primary-nav-default-letter-spacing));text-transform:var(--ed-primary-nav-link-text-transform, var(--ed-theme-typography-primary-nav-default-text-transform));padding:var(--ed-primary-nav-link-padding, 1rem 0)}}@media all and (min-width:60rem){.ed-c-primary-nav__link{padding:var(--ed-primary-nav-link-padding, 1rem 0);border-block-end:none}}ed-icon{--ed-icon-height: 1rem ;--ed-icon-width: 1rem ;margin-inline-start:auto;transition:transform var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-primary-nav__item.ed-is-active ed-icon{transform:rotate(-180deg)}@media all and (min-width:48rem){ed-icon{margin-inline-start:1rem}}.ed-c-primary-nav__item-panel{visibility:hidden;width:100%;height:0;overflow:hidden;background:transparent;opacity:0;transition:all var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease);z-index:-1}@media all and (min-width:48rem){.ed-c-primary-nav__item-panel{position:absolute;inset-block-start:100%;inset-inline-start:0;height:auto;box-shadow:var(--ed-theme-box-shadow-md)}}.ed-c-primary-nav__item.ed-is-active .ed-c-primary-nav__item-panel{display:block;visibility:visible;height:auto;padding-block-start:2rem;padding-block-end:2rem;background:var(--ed-theme-color-background-knockout);opacity:1;z-index:1;transition:opacity var(--ed-theme-animation-fade-quick) var(--ed-theme-animation-ease)}.ed-c-primary-nav__item--megamenu .ed-c-primary-nav__item-panel-inner{max-width:70rem;padding-inline-end:2rem;padding-inline-start:2rem;margin:0 auto}';
|
|
5
|
+
var f = Object.defineProperty, r = (o, e, i, d) => {
|
|
6
|
+
for (var t = void 0, m = o.length - 1, s; m >= 0; m--)
|
|
7
|
+
(s = o[m]) && (t = s(e, i, t) || t);
|
|
8
|
+
return t && f(e, i, t), t;
|
|
9
9
|
};
|
|
10
|
-
class
|
|
10
|
+
class a extends c {
|
|
11
11
|
/**
|
|
12
12
|
* Initialize functions
|
|
13
13
|
*/
|
|
@@ -15,7 +15,7 @@ class t extends c {
|
|
|
15
15
|
super(), this.text = "Nav item", this.href = "#", this.iconName = "keyboard-arrow-down", this.handleOnClickOutside = this.handleOnClickOutside.bind(this), this.clickHandler = this.clickHandler.bind(this);
|
|
16
16
|
}
|
|
17
17
|
static get styles() {
|
|
18
|
-
return
|
|
18
|
+
return v(y);
|
|
19
19
|
}
|
|
20
20
|
/**
|
|
21
21
|
* Connected Callback lifecycle
|
|
@@ -84,7 +84,7 @@ class t extends c {
|
|
|
84
84
|
<div class="${e}" @keydown=${this.handleOnKeyDown}>
|
|
85
85
|
<button class="ed-c-primary-nav__link" @click=${this.clickHandler} aria-expanded=${this.isActive === !0}>
|
|
86
86
|
${this.text}
|
|
87
|
-
<ed-icon styleModifier="ed-c-button__icon" aria-hidden="true" name="${
|
|
87
|
+
<ed-icon styleModifier="ed-c-button__icon" aria-hidden="true" name="${p(this.iconName)}"></ed-icon>
|
|
88
88
|
</button>
|
|
89
89
|
<div class="ed-c-primary-nav__item-panel">
|
|
90
90
|
<div class="ed-c-primary-nav__item-panel-inner">
|
|
@@ -101,23 +101,23 @@ class t extends c {
|
|
|
101
101
|
}
|
|
102
102
|
r([
|
|
103
103
|
n()
|
|
104
|
-
],
|
|
104
|
+
], a.prototype, "text");
|
|
105
105
|
r([
|
|
106
106
|
n()
|
|
107
|
-
],
|
|
107
|
+
], a.prototype, "href");
|
|
108
108
|
r([
|
|
109
109
|
n()
|
|
110
|
-
],
|
|
110
|
+
], a.prototype, "iconName");
|
|
111
111
|
r([
|
|
112
112
|
n({ type: Boolean })
|
|
113
|
-
],
|
|
113
|
+
], a.prototype, "isHighlighted");
|
|
114
114
|
r([
|
|
115
115
|
n({ type: Boolean })
|
|
116
|
-
],
|
|
116
|
+
], a.prototype, "megaMenu");
|
|
117
117
|
r([
|
|
118
118
|
h()
|
|
119
|
-
],
|
|
120
|
-
customElements.get("ed-primary-nav-item") === void 0 && customElements.define("ed-primary-nav-item",
|
|
119
|
+
], a.prototype, "isActive");
|
|
120
|
+
customElements.get("ed-primary-nav-item") === void 0 && customElements.define("ed-primary-nav-item", a);
|
|
121
121
|
export {
|
|
122
|
-
|
|
122
|
+
a as EdPrimaryNavItem
|
|
123
123
|
};
|
|
@@ -1,40 +1,68 @@
|
|
|
1
1
|
import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdElement';
|
|
2
2
|
/**
|
|
3
|
-
* Small
|
|
4
|
-
*
|
|
5
|
-
* (
|
|
3
|
+
* Small, non-interactive status / category indicator. Use badges to provide quick,
|
|
4
|
+
* decorative status or labelling alongside other content. For interactive chips
|
|
5
|
+
* (dismissible, selectable) use `ed-tag` instead.
|
|
6
6
|
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
7
|
+
* Three independent axes:
|
|
8
|
+
* - **variant** — semantic color. Unset renders the default (neutral) styling.
|
|
9
|
+
* `brand` · `info` · `success` · `warning` · `error`.
|
|
10
|
+
* - **appearance** — the emphasis/fill, orthogonal to `variant`: `subtle` (default:
|
|
11
|
+
* tinted surface, colored border + text) or `solid` (filled knockout surface with
|
|
12
|
+
* knockout text, no border).
|
|
13
|
+
* - **size** — `sm` (default, label-sm) or `md` (label-default).
|
|
9
14
|
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
15
|
+
* An optional leading `iconName` renders an icon before the label.
|
|
16
|
+
*
|
|
17
|
+
* @use Indicating status alongside content — "Active", "Pending", "Failed" — using `success`, `warning`, or `error` to reinforce meaning with color
|
|
18
|
+
* @use Labeling items with short, neutral metadata like a category, "Beta", or a version number — leave `variant` unset for the neutral default
|
|
19
|
+
* @use Drawing extra attention with `appearance="solid"`, or sizing up to `size="md"` in denser-typography contexts
|
|
12
20
|
* @use Inside tables, lists, or cards to visually differentiate items by state without adding interactive complexity
|
|
13
21
|
*
|
|
14
|
-
* @dontuse As a button or interactive element — badges are purely informational. Use `ed-button` for actions
|
|
22
|
+
* @dontuse As a button or interactive element — badges are purely informational. Use `ed-button` for actions or `ed-tag` for dismissible/selectable chips
|
|
15
23
|
* @dontuse For long text or sentences — badges are designed for 1–3 words. Anything longer should be a field note, alert, or inline message
|
|
16
|
-
* @dontuse As the sole indicator of critical state —
|
|
24
|
+
* @dontuse As the sole indicator of critical state — the badge always carries a text label so color is never the only signal
|
|
17
25
|
* @dontuse For notification counts on icons — this component is a label badge, not a dot/counter overlay
|
|
18
26
|
*
|
|
19
|
-
* @a11y Color
|
|
20
|
-
* @a11y
|
|
21
|
-
* @a11y
|
|
27
|
+
* @a11y Color is never the only signal of variant — the badge always renders its text label, so success/warning/error meaning is conveyed by words, not just color
|
|
28
|
+
* @a11y The optional leading icon is decorative (`aria-hidden`) — never rely on it alone to convey meaning
|
|
29
|
+
* @a11y Badges are not announced as distinct regions — ensure the badge text makes sense in the reading order of the surrounding content
|
|
22
30
|
*
|
|
23
|
-
* @slot - Badge content (
|
|
31
|
+
* @slot - Badge label content (falls back to the `text` property)
|
|
24
32
|
*/
|
|
25
33
|
export declare class EdBadge extends EdElement {
|
|
26
34
|
static get styles(): import('lit').CSSResult;
|
|
27
35
|
/**
|
|
28
|
-
* The badge text (alternative to slot content).
|
|
36
|
+
* The badge label text (alternative to slot content).
|
|
29
37
|
*/
|
|
30
38
|
text?: string;
|
|
31
39
|
/**
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
* - `
|
|
35
|
-
* - `
|
|
40
|
+
* Semantic color variant. When unset, the badge renders in the default
|
|
41
|
+
* (neutral) styling.
|
|
42
|
+
* - `brand`: Brand-colored badge
|
|
43
|
+
* - `info`: Informational or in-progress
|
|
44
|
+
* - `success`: Positive — approved, complete, active, working properly
|
|
45
|
+
* - `warning`: Cautionary — pending, needs review, approaching limit
|
|
46
|
+
* - `error`: Negative — failed, rejected, inactive, requires attention
|
|
47
|
+
*/
|
|
48
|
+
variant?: 'brand' | 'info' | 'success' | 'warning' | 'error';
|
|
49
|
+
/**
|
|
50
|
+
* Visual appearance — the badge's emphasis/fill, orthogonal to `variant`.
|
|
51
|
+
* - `subtle` (default): tinted background with a colored border and text
|
|
52
|
+
* - `solid`: filled knockout background with knockout text and no border
|
|
53
|
+
*/
|
|
54
|
+
appearance?: 'subtle' | 'solid';
|
|
55
|
+
/**
|
|
56
|
+
* Size variant — controls the badge typography and padding.
|
|
57
|
+
* - `sm` (default): `label-sm` typography
|
|
58
|
+
* - `md`: `label-default` typography
|
|
59
|
+
*/
|
|
60
|
+
size?: 'sm' | 'md';
|
|
61
|
+
/**
|
|
62
|
+
* Optional leading icon name (from the Eddie icon set). Rendered before the
|
|
63
|
+
* label and inherits the badge's content color.
|
|
36
64
|
*/
|
|
37
|
-
|
|
65
|
+
iconName?: string;
|
|
38
66
|
render(): import('lit-html').TemplateResult<1>;
|
|
39
67
|
}
|
|
40
68
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/badge/badge.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;
|
|
1
|
+
{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/badge/badge.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AACtF,OAAO,2DAA2D,CAAC;AAGnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACpC,MAAM,KAAK,MAAM,4BAEhB;IAED;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;;;;;OAQG;IAEH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAE7D;;;;OAIG;IAEH,UAAU,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAEhC;;;;OAIG;IAEH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAEnB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,MAAM;CAoBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
|
|
@@ -1,32 +1,51 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
2
|
-
import { property as
|
|
1
|
+
import { unsafeCSS as s, nothing as b, html as l } from "lit";
|
|
2
|
+
import { property as o } from "lit/decorators.js";
|
|
3
3
|
import { EdElement as g } from "../EdElement.js";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
import "../icon/icon.js";
|
|
5
|
+
const h = '@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-badge{font-family:var(--ed-theme-typography-label-sm-font-family);font-weight:var(--ed-theme-typography-label-sm-font-weight);font-size:var(--ed-theme-typography-label-sm-font-size);line-height:var(--ed-theme-typography-label-sm-line-height);letter-spacing:var(--ed-theme-typography-label-sm-letter-spacing);text-transform:var(--ed-theme-typography-label-sm-text-transform);display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border:var(--ed-theme-border-width-sm) solid var(--ed-theme-color-border-default);border-radius:var(--ed-theme-border-radius-md);background:var(--ed-theme-color-background-subtle);color:var(--ed-theme-color-content-default)}.ed-c-badge__label{white-space:nowrap}ed-icon{--ed-icon-height: .875rem ;--ed-icon-width: .875rem }.ed-c-badge--brand{background:var(--ed-theme-color-background-subtle);border-color:var(--ed-theme-color-border-brand);color:var(--ed-theme-color-content-brand)}.ed-c-badge--info{background:var(--ed-theme-color-background-utility-info);border-color:var(--ed-theme-color-border-utility-info);color:var(--ed-theme-color-content-utility-info)}.ed-c-badge--success{background:var(--ed-theme-color-background-utility-success);border-color:var(--ed-theme-color-border-utility-success);color:var(--ed-theme-color-content-utility-success)}.ed-c-badge--warning{background:var(--ed-theme-color-background-utility-warning);border-color:var(--ed-theme-color-border-utility-warning);color:var(--ed-theme-color-content-utility-warning)}.ed-c-badge--error{background:var(--ed-theme-color-background-utility-error);border-color:var(--ed-theme-color-border-utility-error);color:var(--ed-theme-color-content-utility-error)}.ed-c-badge--solid{border-color:transparent;background:var(--ed-theme-color-background-knockout);color:var(--ed-theme-color-content-knockout)}.ed-c-badge--solid.ed-c-badge--brand{background:var(--ed-theme-color-background-brand-knockout)}.ed-c-badge--solid.ed-c-badge--info{background:var(--ed-theme-color-background-utility-info-knockout)}.ed-c-badge--solid.ed-c-badge--success{background:var(--ed-theme-color-background-utility-success-knockout)}.ed-c-badge--solid.ed-c-badge--warning{background:var(--ed-theme-color-background-utility-warning-knockout)}.ed-c-badge--solid.ed-c-badge--error{background:var(--ed-theme-color-background-utility-error-knockout)}.ed-c-badge--md{font-family:var(--ed-theme-typography-label-default-font-family);font-weight:var(--ed-theme-typography-label-default-font-weight);font-size:var(--ed-theme-typography-label-default-font-size);line-height:var(--ed-theme-typography-label-default-line-height);letter-spacing:var(--ed-theme-typography-label-default-letter-spacing);text-transform:var(--ed-theme-typography-label-default-text-transform);padding:.25rem .75rem}.ed-c-badge--md ed-icon{--ed-icon-height: 1rem ;--ed-icon-width: 1rem }';
|
|
6
|
+
var m = Object.defineProperty, t = (d, a, c, u) => {
|
|
7
|
+
for (var e = void 0, n = d.length - 1, i; n >= 0; n--)
|
|
8
|
+
(i = d[n]) && (e = i(a, c, e) || e);
|
|
9
|
+
return e && m(a, c, e), e;
|
|
9
10
|
};
|
|
10
|
-
class
|
|
11
|
+
class r extends g {
|
|
11
12
|
static get styles() {
|
|
12
|
-
return
|
|
13
|
+
return s(h.toString());
|
|
13
14
|
}
|
|
14
15
|
render() {
|
|
15
|
-
const
|
|
16
|
+
const a = this.componentClassNames("ed-c-badge", {
|
|
17
|
+
"ed-c-badge--brand": this.variant === "brand",
|
|
18
|
+
"ed-c-badge--info": this.variant === "info",
|
|
16
19
|
"ed-c-badge--success": this.variant === "success",
|
|
17
20
|
"ed-c-badge--warning": this.variant === "warning",
|
|
18
|
-
"ed-c-badge--error": this.variant === "error"
|
|
21
|
+
"ed-c-badge--error": this.variant === "error",
|
|
22
|
+
"ed-c-badge--solid": this.appearance === "solid",
|
|
23
|
+
"ed-c-badge--md": this.size === "md"
|
|
19
24
|
});
|
|
20
|
-
return
|
|
25
|
+
return l`
|
|
26
|
+
<div class="${a}">
|
|
27
|
+
${this.iconName ? l`<ed-icon styleModifier="ed-c-badge__icon" aria-hidden="true" name="${this.iconName}"></ed-icon>` : b}
|
|
28
|
+
<span class="ed-c-badge__label"><slot>${this.text}</slot></span>
|
|
29
|
+
</div>
|
|
30
|
+
`;
|
|
21
31
|
}
|
|
22
32
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
],
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
],
|
|
29
|
-
|
|
33
|
+
t([
|
|
34
|
+
o()
|
|
35
|
+
], r.prototype, "text");
|
|
36
|
+
t([
|
|
37
|
+
o()
|
|
38
|
+
], r.prototype, "variant");
|
|
39
|
+
t([
|
|
40
|
+
o()
|
|
41
|
+
], r.prototype, "appearance");
|
|
42
|
+
t([
|
|
43
|
+
o()
|
|
44
|
+
], r.prototype, "size");
|
|
45
|
+
t([
|
|
46
|
+
o()
|
|
47
|
+
], r.prototype, "iconName");
|
|
48
|
+
customElements.get("ed-badge") === void 0 && customElements.define("ed-badge", r);
|
|
30
49
|
export {
|
|
31
|
-
|
|
50
|
+
r as EdBadge
|
|
32
51
|
};
|
package/components/dot/dot.js
CHANGED
|
@@ -2,7 +2,7 @@ import g from "classnames";
|
|
|
2
2
|
import { unsafeCSS as m, html as d, nothing as s } from "lit";
|
|
3
3
|
import { property as o } from "lit/decorators.js";
|
|
4
4
|
import { EdElement as v } from "../EdElement.js";
|
|
5
|
-
const p = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-dot{container-type:inline-size;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;width:6rem;height:6rem;aspect-ratio:1/1;background:var(--ed-theme-color-background-brand);color:var(--ed-theme-color-content-brand-knockout);border-radius:var(--ed-border-radius-round);text-align:center}.ed-c-dot--xs{width:4rem;height:4rem}.ed-c-dot--sm{width:6rem;height:6rem}.ed-c-dot--md{width:8rem;height:8rem}.ed-c-dot--lg{width:10rem;height:10rem}.ed-c-dot--xl{width:12rem;height:12rem}.ed-c-dot--accent-1{background:var(--ed-theme-color-background-accent-1);color:var(--ed-theme-color-content-on-accent-1)}.ed-c-dot--accent-2{background:var(--ed-theme-color-background-accent-2);color:var(--ed-theme-color-content-on-accent-2)}.ed-c-dot--accent-3{background:var(--ed-theme-color-background-accent-3);color:var(--ed-theme-color-content-on-accent-3)}.ed-c-dot--accent-4{background:var(--ed-theme-color-background-accent-4);color:var(--ed-theme-color-content-on-accent-4)}.ed-c-dot--accent-5{background:var(--ed-theme-color-background-accent-5);color:var(--ed-theme-color-content-on-accent-5)}.ed-c-dot--accent-6{background:var(--ed-theme-color-background-accent-6);color:var(--ed-theme-color-content-on-accent-6)}.ed-c-dot--accent-7{background:var(--ed-theme-color-background-accent-7);color:var(--ed-theme-color-content-on-accent-7)}.ed-c-dot--accent-8{background:var(--ed-theme-color-background-accent-8);color:var(--ed-theme-color-content-on-accent-8)}.ed-c-dot--viz-design{background:var(--ed-theme-color-background-viz-design);color:var(--ed-theme-color-content-on-viz-design)}.ed-c-dot--viz-repo{background:var(--ed-theme-color-background-viz-repo);color:var(--ed-theme-color-content-on-viz-repo)}.ed-c-dot--viz-package{background:var(--ed-theme-color-background-viz-package);color:var(--ed-theme-color-content-on-viz-package)}.ed-c-dot--viz-product{background:var(--ed-theme-color-background-viz-product);color:var(--ed-theme-color-content-on-viz-product)}::slotted(ed-icon){--ed-icon-height: 35cqi;--ed-icon-width: 35cqi}.ed-c-dot--stacked ::slotted(ed-icon){--ed-icon-height: 25cqi;--ed-icon-width: 25cqi}::slotted(svg){width:35cqi;height:35cqi}.ed-c-dot--stacked ::slotted(svg){width:25cqi;height:25cqi}.ed-c-dot__image{display:block;width:40cqi;height:40cqi;object-fit:contain}.ed-c-dot--stacked .ed-c-dot__image{width:30cqi;height:30cqi}.ed-c-dot__full-bleed-image{display:block;width:100%;height:100%;object-fit:cover}.ed-c-dot--full-bleed{padding:0;overflow:hidden}.ed-c-dot__label{font-family:var(--ed-theme-typography-viz-label-font-family);font-weight:var(--ed-theme-typography-viz-label-font-weight);font-size:var(--ed-theme-typography-viz-label-font-size);line-height:var(--ed-theme-typography-viz-label-line-height);letter-spacing:var(--ed-theme-typography-viz-label-letter-spacing);text-transform:var(--ed-theme-typography-viz-label-text-transform);text-align:center;text-wrap:balance;text-overflow:ellipsis;padding:0 .5rem;overflow:hidden}";
|
|
5
|
+
const p = ":root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-dot{container-type:inline-size;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;width:6rem;height:6rem;aspect-ratio:1/1;background:var(--ed-theme-color-background-brand);color:var(--ed-theme-color-content-brand-knockout);border-radius:var(--ed-theme-border-radius-round);text-align:center}.ed-c-dot--xs{width:4rem;height:4rem}.ed-c-dot--sm{width:6rem;height:6rem}.ed-c-dot--md{width:8rem;height:8rem}.ed-c-dot--lg{width:10rem;height:10rem}.ed-c-dot--xl{width:12rem;height:12rem}.ed-c-dot--accent-1{background:var(--ed-theme-color-background-accent-1);color:var(--ed-theme-color-content-on-accent-1)}.ed-c-dot--accent-2{background:var(--ed-theme-color-background-accent-2);color:var(--ed-theme-color-content-on-accent-2)}.ed-c-dot--accent-3{background:var(--ed-theme-color-background-accent-3);color:var(--ed-theme-color-content-on-accent-3)}.ed-c-dot--accent-4{background:var(--ed-theme-color-background-accent-4);color:var(--ed-theme-color-content-on-accent-4)}.ed-c-dot--accent-5{background:var(--ed-theme-color-background-accent-5);color:var(--ed-theme-color-content-on-accent-5)}.ed-c-dot--accent-6{background:var(--ed-theme-color-background-accent-6);color:var(--ed-theme-color-content-on-accent-6)}.ed-c-dot--accent-7{background:var(--ed-theme-color-background-accent-7);color:var(--ed-theme-color-content-on-accent-7)}.ed-c-dot--accent-8{background:var(--ed-theme-color-background-accent-8);color:var(--ed-theme-color-content-on-accent-8)}.ed-c-dot--viz-design{background:var(--ed-theme-color-background-viz-design);color:var(--ed-theme-color-content-on-viz-design)}.ed-c-dot--viz-repo{background:var(--ed-theme-color-background-viz-repo);color:var(--ed-theme-color-content-on-viz-repo)}.ed-c-dot--viz-package{background:var(--ed-theme-color-background-viz-package);color:var(--ed-theme-color-content-on-viz-package)}.ed-c-dot--viz-product{background:var(--ed-theme-color-background-viz-product);color:var(--ed-theme-color-content-on-viz-product)}::slotted(ed-icon){--ed-icon-height: 35cqi;--ed-icon-width: 35cqi}.ed-c-dot--stacked ::slotted(ed-icon){--ed-icon-height: 25cqi;--ed-icon-width: 25cqi}::slotted(svg){width:35cqi;height:35cqi}.ed-c-dot--stacked ::slotted(svg){width:25cqi;height:25cqi}.ed-c-dot__image{display:block;width:40cqi;height:40cqi;object-fit:contain}.ed-c-dot--stacked .ed-c-dot__image{width:30cqi;height:30cqi}.ed-c-dot__full-bleed-image{display:block;width:100%;height:100%;object-fit:cover}.ed-c-dot--full-bleed{padding:0;overflow:hidden}.ed-c-dot__label{font-family:var(--ed-theme-typography-viz-label-font-family);font-weight:var(--ed-theme-typography-viz-label-font-weight);font-size:var(--ed-theme-typography-viz-label-font-size);line-height:var(--ed-theme-typography-viz-label-line-height);letter-spacing:var(--ed-theme-typography-viz-label-letter-spacing);text-transform:var(--ed-theme-typography-viz-label-text-transform);text-align:center;text-wrap:balance;text-overflow:ellipsis;padding:0 .5rem;overflow:hidden}";
|
|
6
6
|
var b = Object.defineProperty, c = (i, r, a, l) => {
|
|
7
7
|
for (var e = void 0, n = i.length - 1, h; n >= 0; n--)
|
|
8
8
|
(h = i[n]) && (e = h(r, a, e) || e);
|
|
@@ -18,6 +18,7 @@ import { EdElement } from '@brad-frost-web/eddie-web-components/components/EdEle
|
|
|
18
18
|
*
|
|
19
19
|
* @a11y The component renders a `<header>` element with `role="banner"` — there should be only one `banner` landmark per page, so use this once at the top level
|
|
20
20
|
* @a11y When using colored `variant` backgrounds, verify all child text and interactive elements meet WCAG contrast ratios against the chosen background
|
|
21
|
+
* @a11y With `variant="bare"` the header has no background fill, so child text and interactive elements must meet WCAG contrast against the page background instead of a header fill
|
|
21
22
|
* @a11y The three slot regions (top, default, bottom) are visual layout divisions — they do not create separate landmarks, so screen readers traverse the header as one continuous region
|
|
22
23
|
* @a11y Set `fullWidth` only when the header design intentionally spans edge-to-edge — the default `ed-layout-container` wrapper ensures content stays within readable line lengths
|
|
23
24
|
*
|
|
@@ -33,16 +34,25 @@ export declare class EdHeader extends EdElement {
|
|
|
33
34
|
*/
|
|
34
35
|
isActive?: boolean;
|
|
35
36
|
/**
|
|
36
|
-
* Background color variant
|
|
37
|
+
* Background color variant
|
|
38
|
+
* - **bare** No background fill — the header sits transparently over the page background
|
|
39
|
+
* - **brand** Brand background with knockout content color
|
|
37
40
|
* - **brand-knockout** Inverted brand background with knockout content
|
|
38
41
|
* - **accent-1** through **accent-8** Accent background with corresponding on-accent content color
|
|
39
42
|
* */
|
|
40
|
-
variant?: 'brand' | 'brand-knockout' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4' | 'accent-5' | 'accent-6' | 'accent-7' | 'accent-8';
|
|
43
|
+
variant?: 'bare' | 'brand' | 'brand-knockout' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4' | 'accent-5' | 'accent-6' | 'accent-7' | 'accent-8';
|
|
41
44
|
/**
|
|
42
45
|
* When true, removes the inner `ed-layout-container` so header
|
|
43
46
|
* content spans the full width of the viewport.
|
|
44
47
|
*/
|
|
45
48
|
fullWidth?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Orientation of the header's main content row.
|
|
51
|
+
* - **vertical** Stacks the header content (logo, nav, actions) into a
|
|
52
|
+
* left-aligned column instead of the default horizontal row — for
|
|
53
|
+
* sidebar-style or stacked header layouts.
|
|
54
|
+
*/
|
|
55
|
+
orientation?: 'vertical';
|
|
46
56
|
render(): import('lit-html').TemplateResult<1>;
|
|
47
57
|
}
|
|
48
58
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/header/header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AACtF,OAAO,mFAAmF,CAAC;AAG3F
|
|
1
|
+
{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../packages/eddie-web-components/components/header/header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,2DAA2D,CAAC;AACtF,OAAO,mFAAmF,CAAC;AAG3F;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,MAAM,KAAK,MAAM,4BAEhB;IAED;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;SAMK;IAEL,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,gBAAgB,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC;IAEtJ;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IAEH,WAAW,CAAC,EAAE,UAAU,CAAC;IAEzB,MAAM;CAgCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
|
@@ -1,21 +1,22 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
2
|
-
import { state as
|
|
3
|
-
import { EdElement as
|
|
1
|
+
import { unsafeCSS as s, html as o } from "lit";
|
|
2
|
+
import { state as m, property as h } from "lit/decorators.js";
|
|
3
|
+
import { EdElement as v } from "../EdElement.js";
|
|
4
4
|
import "../layout-container/layout-container.js";
|
|
5
|
-
const u = "
|
|
6
|
-
var b = Object.defineProperty,
|
|
7
|
-
for (var e = void 0,
|
|
8
|
-
(
|
|
9
|
-
return e && b(
|
|
5
|
+
const u = '@charset "UTF-8";:root,:host{--size-base-unit: .5rem}*,::slotted(*),*:before,*:after{box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}.ed-c-header{--ed-header-color-content: var(--ed-theme-color-content-knockout);--ed-header-focus-ring-color: var(--ed-theme-focus-ring-color-border-knockout);background:var(--ed-theme-color-background-knockout);color:var(--ed-header-color-content);position:relative;z-index:3}@media all and (min-width:60rem){.ed-c-header--vertical{inline-size:var(--ed-sidebar-width, 18rem);min-block-size:100vh}}.ed-c-header__top{position:relative;inset-block-start:0;width:100%;z-index:3}.ed-c-header__top-inner{width:100%}.ed-c-header__middle{width:100%;display:flex;align-items:center;padding-block:.5rem}@media all and (min-width:60rem){.ed-c-header--vertical .ed-c-header__middle{flex-direction:column;align-items:flex-start;gap:1rem}}.ed-c-header--bare{--ed-header-color-content: var(--ed-theme-color-content-default);--ed-header-focus-ring-color: var(--ed-theme-focus-ring-color-border-default);background:transparent;color:var(--ed-header-color-content)}.ed-c-header--brand{--ed-header-color-content: var(--ed-theme-color-content-knockout);background:var(--ed-theme-color-background-brand);color:var(--ed-header-color-content)}.ed-c-header--brand-knockout{--ed-header-color-content: var(--ed-theme-color-content-knockout);background:var(--ed-theme-color-background-brand-knockout);color:var(--ed-header-color-content)}.ed-c-header--accent-1{--ed-header-color-content: var(--ed-theme-color-content-on-accent-1);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-1);background:var(--ed-theme-color-background-accent-1);color:var(--ed-header-color-content)}.ed-c-header--accent-2{--ed-header-color-content: var(--ed-theme-color-content-on-accent-2);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-2);background:var(--ed-theme-color-background-accent-2);color:var(--ed-header-color-content)}.ed-c-header--accent-3{--ed-header-color-content: var(--ed-theme-color-content-on-accent-3);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-3);background:var(--ed-theme-color-background-accent-3);color:var(--ed-header-color-content)}.ed-c-header--accent-4{--ed-header-color-content: var(--ed-theme-color-content-on-accent-4);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-4);background:var(--ed-theme-color-background-accent-4);color:var(--ed-header-color-content)}.ed-c-header--accent-5{--ed-header-color-content: var(--ed-theme-color-content-on-accent-5);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-5);background:var(--ed-theme-color-background-accent-5);color:var(--ed-header-color-content)}.ed-c-header--accent-6{--ed-header-color-content: var(--ed-theme-color-content-on-accent-6);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-6);background:var(--ed-theme-color-background-accent-6);color:var(--ed-header-color-content)}.ed-c-header--accent-7{--ed-header-color-content: var(--ed-theme-color-content-on-accent-7);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-7);background:var(--ed-theme-color-background-accent-7);color:var(--ed-header-color-content)}.ed-c-header--accent-8{--ed-header-color-content: var(--ed-theme-color-content-on-accent-8);--ed-header-focus-ring-color: var(--ed-theme-color-border-on-accent-8);background:var(--ed-theme-color-background-accent-8);color:var(--ed-header-color-content)}';
|
|
6
|
+
var b = Object.defineProperty, d = (a, c, t, n) => {
|
|
7
|
+
for (var e = void 0, l = a.length - 1, i; l >= 0; l--)
|
|
8
|
+
(i = a[l]) && (e = i(c, t, e) || e);
|
|
9
|
+
return e && b(c, t, e), e;
|
|
10
10
|
};
|
|
11
|
-
class
|
|
11
|
+
class r extends v {
|
|
12
12
|
static get styles() {
|
|
13
|
-
return
|
|
13
|
+
return s(u);
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
|
-
const
|
|
16
|
+
const c = this.variant ? `ed-c-header--${this.variant}` : "", t = this.componentClassNames("ed-c-header", {
|
|
17
17
|
"ed-is-active": this.isActive === !0,
|
|
18
|
-
|
|
18
|
+
"ed-c-header--vertical": this.orientation === "vertical",
|
|
19
|
+
[c]: !!this.variant
|
|
19
20
|
}), n = o`
|
|
20
21
|
${this.slotNotEmpty("top") && o`<div class="ed-c-header__top">
|
|
21
22
|
<slot name="top"></slot>
|
|
@@ -28,7 +29,7 @@ class t extends m {
|
|
|
28
29
|
</div>`}
|
|
29
30
|
`;
|
|
30
31
|
return o`
|
|
31
|
-
<header role="banner" class="${
|
|
32
|
+
<header role="banner" class="${t}">
|
|
32
33
|
${this.fullWidth ? n : o`<ed-layout-container class="ed-c-header__layout-container">
|
|
33
34
|
${n}
|
|
34
35
|
</ed-layout-container>`}
|
|
@@ -36,16 +37,19 @@ class t extends m {
|
|
|
36
37
|
`;
|
|
37
38
|
}
|
|
38
39
|
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
],
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
],
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
],
|
|
48
|
-
|
|
40
|
+
d([
|
|
41
|
+
m()
|
|
42
|
+
], r.prototype, "isActive");
|
|
43
|
+
d([
|
|
44
|
+
h()
|
|
45
|
+
], r.prototype, "variant");
|
|
46
|
+
d([
|
|
47
|
+
h({ type: Boolean })
|
|
48
|
+
], r.prototype, "fullWidth");
|
|
49
|
+
d([
|
|
50
|
+
h()
|
|
51
|
+
], r.prototype, "orientation");
|
|
52
|
+
customElements.get("ed-header") === void 0 && customElements.define("ed-header", r);
|
|
49
53
|
export {
|
|
50
|
-
|
|
54
|
+
r as EdHeader
|
|
51
55
|
};
|