@orange-halo/components 2.2.0 → 3.0.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/custom-elements.json +551 -314
- package/dist/index.d.ts +1 -7
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -4
- package/dist/index.js.map +1 -1
- package/dist/oh-accordion.d.ts +53 -8
- package/dist/oh-accordion.d.ts.map +1 -1
- package/dist/oh-accordion.js +77 -15
- package/dist/oh-accordion.js.map +1 -1
- package/dist/oh-alert.d.ts +26 -8
- package/dist/oh-alert.d.ts.map +1 -1
- package/dist/oh-alert.js +32 -14
- package/dist/oh-alert.js.map +1 -1
- package/dist/oh-badge.d.ts +32 -13
- package/dist/oh-badge.d.ts.map +1 -1
- package/dist/oh-badge.js +35 -16
- package/dist/oh-badge.js.map +1 -1
- package/dist/oh-breadcrumb.d.ts +39 -12
- package/dist/oh-breadcrumb.d.ts.map +1 -1
- package/dist/oh-breadcrumb.js +39 -17
- package/dist/oh-breadcrumb.js.map +1 -1
- package/dist/oh-button.d.ts +49 -23
- package/dist/oh-button.d.ts.map +1 -1
- package/dist/oh-button.js +63 -44
- package/dist/oh-button.js.map +1 -1
- package/dist/oh-card.d.ts +47 -19
- package/dist/oh-card.d.ts.map +1 -1
- package/dist/oh-card.js +110 -82
- package/dist/oh-card.js.map +1 -1
- package/dist/oh-checkbox-group.d.ts +56 -12
- package/dist/oh-checkbox-group.d.ts.map +1 -1
- package/dist/oh-checkbox-group.figma.js +4 -6
- package/dist/oh-checkbox-group.figma.js.map +1 -1
- package/dist/oh-checkbox-group.js +86 -44
- package/dist/oh-checkbox-group.js.map +1 -1
- package/dist/oh-checkbox.d.ts +54 -17
- package/dist/oh-checkbox.d.ts.map +1 -1
- package/dist/oh-checkbox.js +85 -55
- package/dist/oh-checkbox.js.map +1 -1
- package/dist/oh-cluster.d.ts +19 -14
- package/dist/oh-cluster.d.ts.map +1 -1
- package/dist/oh-cluster.js +19 -19
- package/dist/oh-cluster.js.map +1 -1
- package/dist/oh-container.d.ts +19 -16
- package/dist/oh-container.d.ts.map +1 -1
- package/dist/oh-container.js +21 -23
- package/dist/oh-container.js.map +1 -1
- package/dist/oh-drawer.d.ts +28 -11
- package/dist/oh-drawer.d.ts.map +1 -1
- package/dist/oh-drawer.js +31 -14
- package/dist/oh-drawer.js.map +1 -1
- package/dist/oh-footer.d.ts +37 -18
- package/dist/oh-footer.d.ts.map +1 -1
- package/dist/oh-footer.js +38 -19
- package/dist/oh-footer.js.map +1 -1
- package/dist/oh-grid.d.ts +27 -14
- package/dist/oh-grid.d.ts.map +1 -1
- package/dist/oh-grid.js +27 -19
- package/dist/oh-grid.js.map +1 -1
- package/dist/oh-icon.d.ts +21 -5
- package/dist/oh-icon.d.ts.map +1 -1
- package/dist/oh-icon.js +21 -5
- package/dist/oh-icon.js.map +1 -1
- package/dist/oh-input.d.ts +104 -20
- package/dist/oh-input.d.ts.map +1 -1
- package/dist/oh-input.figma.js +2 -2
- package/dist/oh-input.figma.js.map +1 -1
- package/dist/oh-input.js +205 -66
- package/dist/oh-input.js.map +1 -1
- package/dist/oh-link.d.ts +42 -19
- package/dist/oh-link.d.ts.map +1 -1
- package/dist/oh-link.js +47 -29
- package/dist/oh-link.js.map +1 -1
- package/dist/oh-modal.d.ts +29 -6
- package/dist/oh-modal.d.ts.map +1 -1
- package/dist/oh-modal.js +37 -16
- package/dist/oh-modal.js.map +1 -1
- package/dist/oh-navbar.d.ts +42 -19
- package/dist/oh-navbar.d.ts.map +1 -1
- package/dist/oh-navbar.js +42 -19
- package/dist/oh-navbar.js.map +1 -1
- package/dist/oh-progress.d.ts +26 -7
- package/dist/oh-progress.d.ts.map +1 -1
- package/dist/oh-progress.js +31 -12
- package/dist/oh-progress.js.map +1 -1
- package/dist/oh-radio-group.d.ts +55 -13
- package/dist/oh-radio-group.d.ts.map +1 -1
- package/dist/oh-radio-group.figma.js +2 -2
- package/dist/oh-radio-group.figma.js.map +1 -1
- package/dist/oh-radio-group.js +83 -43
- package/dist/oh-radio-group.js.map +1 -1
- package/dist/oh-radio.d.ts +55 -17
- package/dist/oh-radio.d.ts.map +1 -1
- package/dist/oh-radio.js +87 -56
- package/dist/oh-radio.js.map +1 -1
- package/dist/oh-select.d.ts +58 -16
- package/dist/oh-select.d.ts.map +1 -1
- package/dist/oh-select.js +70 -33
- package/dist/oh-select.js.map +1 -1
- package/dist/oh-skip-link.d.ts +33 -15
- package/dist/oh-skip-link.d.ts.map +1 -1
- package/dist/oh-skip-link.js +38 -25
- package/dist/oh-skip-link.js.map +1 -1
- package/dist/oh-stack.d.ts +17 -14
- package/dist/oh-stack.d.ts.map +1 -1
- package/dist/oh-stack.js +18 -20
- package/dist/oh-stack.js.map +1 -1
- package/dist/oh-tabs.d.ts +55 -30
- package/dist/oh-tabs.d.ts.map +1 -1
- package/dist/oh-tabs.js +80 -65
- package/dist/oh-tabs.js.map +1 -1
- package/dist/oh-textarea.d.ts +37 -6
- package/dist/oh-textarea.d.ts.map +1 -1
- package/dist/oh-textarea.js +40 -9
- package/dist/oh-textarea.js.map +1 -1
- package/dist/oh-toggle.d.ts +45 -12
- package/dist/oh-toggle.d.ts.map +1 -1
- package/dist/oh-toggle.js +64 -29
- package/dist/oh-toggle.js.map +1 -1
- package/package.json +3 -7
- package/dist/oh-hero.d.ts +0 -33
- package/dist/oh-hero.d.ts.map +0 -1
- package/dist/oh-hero.js +0 -248
- package/dist/oh-hero.js.map +0 -1
package/dist/oh-link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-link.js","sourceRoot":"","sources":["../src/oh-link.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-link.js","sourceRoot":"","sources":["../src/oh-link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAIlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QAsSL,SAAI,GAAG,EAAE,CAAC;QAGV,WAAM,GAAG,EAAE,CAAC;QAGZ,QAAG,GAAG,EAAE,CAAC;QAGT,YAAO,GAAgB,QAAQ,CAAC;QAGhC,UAAK,GAAG,KAAK,CAAC;QAGd,YAAO,GAAG,KAAK,CAAC;IA2DlB,CAAC;aA/WiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+RF;KACF,AAlSqB,CAkSpB;IAoBF,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC;YAChC,IAAI,EAAE,IAAI;YACV,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YACzC,kBAAkB,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;SAClD,CAAC,CAAC;QAEH,wDAAwD;QACxD,MAAM,WAAW,GACf,IAAI,CAAC,MAAM,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;QAE3E,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC;QAE5C,OAAO,IAAI,CAAA;;gBAEC,WAAW;eACZ,IAAI,CAAC,IAAI;iBACP,IAAI,CAAC,MAAM,IAAI,OAAO;cACzB,WAAW,IAAI,OAAO;;uDAEmB,UAAU;YACvD,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;uEAgBuD;YAC7D,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU;YACtE,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;;;aAaH;YACH,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;;AAzED;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAClB;AAGT;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACK;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCACd;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC3B;AArTL,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAgXlB"}
|
package/dist/oh-modal.d.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* oh-modal
|
|
3
3
|
*
|
|
4
|
-
*
|
|
4
|
+
* An accessible modal dialog with focus trapping.
|
|
5
5
|
*
|
|
6
6
|
* DESIGN DECISIONS:
|
|
7
7
|
* ─────────────────
|
|
8
|
-
* 1.
|
|
8
|
+
* 1. LOOK FROM TOKENS
|
|
9
9
|
* - stroke.control border like other components
|
|
10
|
-
* - Offset shadow
|
|
11
|
-
* -
|
|
10
|
+
* - Offset shadow: elevation.offset.2xl in elevation.color.overlay
|
|
11
|
+
* - Backdrop: modal.overlay
|
|
12
12
|
*
|
|
13
13
|
* 2. ACCESSIBLE
|
|
14
14
|
* - Focus trap when open (focus guards at each end of the dialog)
|
|
@@ -20,11 +20,34 @@
|
|
|
20
20
|
* - Optional heading
|
|
21
21
|
* - Scrollable body content
|
|
22
22
|
* - Optional footer slot for actions
|
|
23
|
-
*
|
|
24
|
-
* @element oh-modal
|
|
25
23
|
*/
|
|
26
24
|
import { OhElement } from "./base.js";
|
|
27
25
|
export type ModalSize = "sm" | "md" | "lg";
|
|
26
|
+
/**
|
|
27
|
+
* A dialog that opens over the page and holds the user's attention until they close it or act on it.
|
|
28
|
+
*
|
|
29
|
+
* **Use it for** a short task or decision that must be done before going on: a confirmation, a small form. **Don't use it for** content the user may want alongside the page (use `oh-drawer`); for a message that doesn't need an answer (use `oh-alert`); or for long, multi-step flows (use a page).
|
|
30
|
+
*
|
|
31
|
+
* **Parts:** `heading` (a visible `h2`); the default slot for the body, which scrolls when it's taller than the viewport; the `footer` slot for actions.
|
|
32
|
+
*
|
|
33
|
+
* **Sizes:** `sm`, `md` (default) and `lg` set the dialog's width (never wider than the viewport).
|
|
34
|
+
*
|
|
35
|
+
* **Behaviour:** set `open` to show it. On open, focus moves to the Close button (or the first focusable element when there's none), Tab and Shift+Tab wrap inside the dialog, and the page behind stops scrolling. On close, focus returns to the element that had it. With `dismissible` (the default), the Close button, Escape and a click on the backdrop each fire `oh-close` and set `open` to false; without it, only your own buttons close it. Motion is reduced under `prefers-reduced-motion`.
|
|
36
|
+
*
|
|
37
|
+
* **Accessibility:** the panel is `role="dialog"` with `aria-modal="true"`, named by `heading`. Without a visible heading, set `accessible-label` (not `aria-label` on the host, which isn't forwarded). The close button has a visible "Close" label.
|
|
38
|
+
*
|
|
39
|
+
* **Look:** set by tokens. `modal.overlay` sets the backdrop; the panel uses `color.surface.base`, a `stroke.control` border in `color.border.emphasis`, `shape.container` corners and an `elevation.offset.2xl` shadow in `elevation.color.overlay`. Header and footer dividers use `stroke.control` in `color.border.subtle`; the title uses `typography.heading.h4.*`, the body `typography.body.*`. The close button uses `closeButton.*`, `lift.*` and `shape.compact`. Motion uses `motion.gentle` and `motion.easeEmphasized`.
|
|
40
|
+
*
|
|
41
|
+
* @element oh-modal
|
|
42
|
+
* @slot - The dialog body.
|
|
43
|
+
* @slot footer - Actions, below the body.
|
|
44
|
+
* @csspart modal - The dialog panel.
|
|
45
|
+
* @csspart header - The header (heading and close button).
|
|
46
|
+
* @csspart close - The close button (only when `dismissible`).
|
|
47
|
+
* @csspart body - The scrolling body.
|
|
48
|
+
* @csspart footer - The footer.
|
|
49
|
+
* @fires oh-close - When the user closes the dialog with the Close button, Escape or the backdrop. Not fired when you set `open` to false yourself.
|
|
50
|
+
*/
|
|
28
51
|
export declare class OhModal extends OhElement {
|
|
29
52
|
static styles: import("lit").CSSResult[];
|
|
30
53
|
open: boolean;
|
package/dist/oh-modal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-modal.d.ts","sourceRoot":"","sources":["../src/oh-modal.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-modal.d.ts","sourceRoot":"","sources":["../src/oh-modal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAGlD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BA8OpB;IAGF,IAAI,UAAS;IAGb,OAAO,SAAM;IAEb;;;;OAIG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,WAAW,UAAQ;IAGnB,IAAI,EAAE,SAAS,CAAQ;IAGvB,OAAO,CAAC,sBAAsB,CAA4B;IAG1D,OAAO,CAAC,YAAY,CAAqB;IAEzC,iBAAiB;IAKjB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU/C,OAAO,CAAC,OAAO;IAyBf,OAAO,CAAC,QAAQ;IAchB,OAAO,CAAC,cAAc;IAOtB,4EAA4E;IAC5E,OAAO,CAAC,qBAAqB;IAS7B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,aAAa;IAKrB,oBAAoB;IAMpB,MAAM;CAqFP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
|
package/dist/oh-modal.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* oh-modal
|
|
3
3
|
*
|
|
4
|
-
*
|
|
4
|
+
* An accessible modal dialog with focus trapping.
|
|
5
5
|
*
|
|
6
6
|
* DESIGN DECISIONS:
|
|
7
7
|
* ─────────────────
|
|
8
|
-
* 1.
|
|
8
|
+
* 1. LOOK FROM TOKENS
|
|
9
9
|
* - stroke.control border like other components
|
|
10
|
-
* - Offset shadow
|
|
11
|
-
* -
|
|
10
|
+
* - Offset shadow: elevation.offset.2xl in elevation.color.overlay
|
|
11
|
+
* - Backdrop: modal.overlay
|
|
12
12
|
*
|
|
13
13
|
* 2. ACCESSIBLE
|
|
14
14
|
* - Focus trap when open (focus guards at each end of the dialog)
|
|
@@ -20,8 +20,6 @@
|
|
|
20
20
|
* - Optional heading
|
|
21
21
|
* - Scrollable body content
|
|
22
22
|
* - Optional footer slot for actions
|
|
23
|
-
*
|
|
24
|
-
* @element oh-modal
|
|
25
23
|
*/
|
|
26
24
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
27
25
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -33,6 +31,31 @@ import { html, css, nothing } from "lit";
|
|
|
33
31
|
import { customElement, property, query, state } from "lit/decorators.js";
|
|
34
32
|
import { OhElement, baseStyles } from "./base.js";
|
|
35
33
|
import { getFocusableElementsDeep } from "@orange-halo/utils";
|
|
34
|
+
/**
|
|
35
|
+
* A dialog that opens over the page and holds the user's attention until they close it or act on it.
|
|
36
|
+
*
|
|
37
|
+
* **Use it for** a short task or decision that must be done before going on: a confirmation, a small form. **Don't use it for** content the user may want alongside the page (use `oh-drawer`); for a message that doesn't need an answer (use `oh-alert`); or for long, multi-step flows (use a page).
|
|
38
|
+
*
|
|
39
|
+
* **Parts:** `heading` (a visible `h2`); the default slot for the body, which scrolls when it's taller than the viewport; the `footer` slot for actions.
|
|
40
|
+
*
|
|
41
|
+
* **Sizes:** `sm`, `md` (default) and `lg` set the dialog's width (never wider than the viewport).
|
|
42
|
+
*
|
|
43
|
+
* **Behaviour:** set `open` to show it. On open, focus moves to the Close button (or the first focusable element when there's none), Tab and Shift+Tab wrap inside the dialog, and the page behind stops scrolling. On close, focus returns to the element that had it. With `dismissible` (the default), the Close button, Escape and a click on the backdrop each fire `oh-close` and set `open` to false; without it, only your own buttons close it. Motion is reduced under `prefers-reduced-motion`.
|
|
44
|
+
*
|
|
45
|
+
* **Accessibility:** the panel is `role="dialog"` with `aria-modal="true"`, named by `heading`. Without a visible heading, set `accessible-label` (not `aria-label` on the host, which isn't forwarded). The close button has a visible "Close" label.
|
|
46
|
+
*
|
|
47
|
+
* **Look:** set by tokens. `modal.overlay` sets the backdrop; the panel uses `color.surface.base`, a `stroke.control` border in `color.border.emphasis`, `shape.container` corners and an `elevation.offset.2xl` shadow in `elevation.color.overlay`. Header and footer dividers use `stroke.control` in `color.border.subtle`; the title uses `typography.heading.h4.*`, the body `typography.body.*`. The close button uses `closeButton.*`, `lift.*` and `shape.compact`. Motion uses `motion.gentle` and `motion.easeEmphasized`.
|
|
48
|
+
*
|
|
49
|
+
* @element oh-modal
|
|
50
|
+
* @slot - The dialog body.
|
|
51
|
+
* @slot footer - Actions, below the body.
|
|
52
|
+
* @csspart modal - The dialog panel.
|
|
53
|
+
* @csspart header - The header (heading and close button).
|
|
54
|
+
* @csspart close - The close button (only when `dismissible`).
|
|
55
|
+
* @csspart body - The scrolling body.
|
|
56
|
+
* @csspart footer - The footer.
|
|
57
|
+
* @fires oh-close - When the user closes the dialog with the Close button, Escape or the backdrop. Not fired when you set `open` to false yourself.
|
|
58
|
+
*/
|
|
36
59
|
let OhModal = class OhModal extends OhElement {
|
|
37
60
|
constructor() {
|
|
38
61
|
super(...arguments);
|
|
@@ -46,8 +69,8 @@ let OhModal = class OhModal extends OhElement {
|
|
|
46
69
|
baseStyles,
|
|
47
70
|
css `
|
|
48
71
|
/* ═══════════════════════════════════════════════════════════════
|
|
49
|
-
|
|
50
|
-
|
|
72
|
+
MODAL
|
|
73
|
+
Focus-trapped • Accessible
|
|
51
74
|
═══════════════════════════════════════════════════════════════ */
|
|
52
75
|
|
|
53
76
|
:host {
|
|
@@ -63,7 +86,7 @@ let OhModal = class OhModal extends OhElement {
|
|
|
63
86
|
inset: 0;
|
|
64
87
|
z-index: 1000;
|
|
65
88
|
|
|
66
|
-
/*
|
|
89
|
+
/* Overlay: modal.overlay */
|
|
67
90
|
background-color: var(--oh-modal-overlay);
|
|
68
91
|
|
|
69
92
|
/* Flexbox centering */
|
|
@@ -101,22 +124,20 @@ let OhModal = class OhModal extends OhElement {
|
|
|
101
124
|
max-height: calc(100vh - var(--oh-spacing-8));
|
|
102
125
|
max-width: 100%;
|
|
103
126
|
|
|
104
|
-
/* Warm surface */
|
|
105
127
|
background-color: var(--oh-color-surface-base);
|
|
106
128
|
|
|
107
|
-
/* Chunky border */
|
|
108
129
|
border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
|
|
109
130
|
border-radius: var(--oh-shape-container);
|
|
110
131
|
|
|
111
|
-
/* Offset shadow
|
|
132
|
+
/* Offset shadow: elevation.offset.2xl */
|
|
112
133
|
box-shadow: var(--oh-elevation-offset-2xl)
|
|
113
|
-
var(--oh-elevation-offset-2xl) 0 0 var(--oh-
|
|
134
|
+
var(--oh-elevation-offset-2xl) 0 0 var(--oh-elevation-color-overlay);
|
|
114
135
|
|
|
115
136
|
/* Animation */
|
|
116
137
|
transform: scale(0.95) translateY(10px);
|
|
117
138
|
opacity: 0;
|
|
118
139
|
transition:
|
|
119
|
-
transform var(--oh-motion-gentle) var(--oh-motion-ease-
|
|
140
|
+
transform var(--oh-motion-gentle) var(--oh-motion-ease-emphasized),
|
|
120
141
|
opacity var(--oh-motion-gentle) ease;
|
|
121
142
|
}
|
|
122
143
|
|
|
@@ -184,8 +205,8 @@ let OhModal = class OhModal extends OhElement {
|
|
|
184
205
|
color: var(--oh-color-text-primary);
|
|
185
206
|
|
|
186
207
|
transition:
|
|
187
|
-
transform var(--oh-motion-snappy) var(--oh-motion-ease-
|
|
188
|
-
box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-
|
|
208
|
+
transform var(--oh-motion-snappy) var(--oh-motion-ease-emphasized),
|
|
209
|
+
box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-emphasized),
|
|
189
210
|
background-color var(--oh-motion-quick) ease;
|
|
190
211
|
}
|
|
191
212
|
|
package/dist/oh-modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-modal.js","sourceRoot":"","sources":["../src/oh-modal.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-modal.js","sourceRoot":"","sources":["../src/oh-modal.ts"],"names":[],"mappings":"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"}
|
package/dist/oh-navbar.d.ts
CHANGED
|
@@ -1,30 +1,21 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* oh-navbar
|
|
3
3
|
*
|
|
4
|
-
* A responsive navigation bar component with logo, links, and mobile drawer.
|
|
5
|
-
*
|
|
6
4
|
* DESIGN DECISIONS:
|
|
7
5
|
* ─────────────────
|
|
8
6
|
* 1. LAYOUT
|
|
9
|
-
* - Logo on the left
|
|
10
|
-
*
|
|
11
|
-
* -
|
|
12
|
-
*
|
|
13
|
-
* 2. STYLING
|
|
14
|
-
* - Surface base background
|
|
15
|
-
* - Chunky bottom border
|
|
16
|
-
* - Links use oh-link styling
|
|
17
|
-
*
|
|
18
|
-
* 3. RESPONSIVE
|
|
19
|
-
* - Desktop: horizontal links
|
|
20
|
-
* - Mobile (< 768px): hamburger + drawer
|
|
21
|
-
*
|
|
22
|
-
* @element oh-navbar
|
|
7
|
+
* - Logo on the left, links pushed to the right, inside an
|
|
8
|
+
* oh-container (size lg)
|
|
9
|
+
* - At and below `size.breakpoint.md` the links hide and a menu button
|
|
10
|
+
* opens an oh-drawer from the left
|
|
23
11
|
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
12
|
+
* 2. DRAWER LINKS ARE A SEPARATE SLOT
|
|
13
|
+
* - The drawer lives outside the bar, so links for it are passed again
|
|
14
|
+
* in the `mobile` slot
|
|
26
15
|
*
|
|
27
|
-
*
|
|
16
|
+
* 3. LOOK FROM TOKENS
|
|
17
|
+
* - `color.surface.base` background, a shadow in `focus.glowColor`,
|
|
18
|
+
* `stroke.divider` / `color.border.subtle` between drawer links
|
|
28
19
|
*/
|
|
29
20
|
import { OhElement } from "./base.js";
|
|
30
21
|
import "./oh-container.js";
|
|
@@ -32,6 +23,38 @@ import "./oh-cluster.js";
|
|
|
32
23
|
import "./oh-drawer.js";
|
|
33
24
|
import "./oh-button.js";
|
|
34
25
|
import "./oh-icon.js";
|
|
26
|
+
/**
|
|
27
|
+
* A site header bar with a logo and the site's main navigation links, which move into a drawer on narrow viewports.
|
|
28
|
+
*
|
|
29
|
+
* **Use it for** the main navigation at the top of every page. **Don't use
|
|
30
|
+
* it for** in-page sections (use `oh-tabs`) or a trail through the hierarchy
|
|
31
|
+
* (use `oh-breadcrumb`).
|
|
32
|
+
*
|
|
33
|
+
* **Parts:** the `logo` slot (a link to the home page), the default slot for
|
|
34
|
+
* the bar's links (`oh-link`), and the `mobile` slot for the same links in the
|
|
35
|
+
* drawer. `drawer-heading` names the drawer (defaults to "Menu").
|
|
36
|
+
*
|
|
37
|
+
* **Behaviour:** at and below the `size.breakpoint.md` width the links hide
|
|
38
|
+
* and an icon-only menu button ("Open navigation menu") opens an `oh-drawer`
|
|
39
|
+
* from the left, which traps focus and closes on Escape or its close button.
|
|
40
|
+
*
|
|
41
|
+
* **Accessibility:** the bar and the drawer each wrap their links in a
|
|
42
|
+
* `<nav>`; the drawer is a modal dialog. Give the logo link an accessible
|
|
43
|
+
* name (`alt` on its image, or text).
|
|
44
|
+
*
|
|
45
|
+
* **Look:** set by tokens — `color.surface.base` the background,
|
|
46
|
+
* `focus.glowColor` the shadow, `typography.body.*` the text, `spacing.*` the
|
|
47
|
+
* padding and gaps, `stroke.divider` and `color.border.subtle` the dividers
|
|
48
|
+
* between drawer links. `--oh-navbar-logo-height` sets the logo height.
|
|
49
|
+
*
|
|
50
|
+
* @element oh-navbar
|
|
51
|
+
*
|
|
52
|
+
* @slot logo - Slot for logo/brand element
|
|
53
|
+
* @slot - Default slot for navigation links
|
|
54
|
+
* @slot mobile - The navigation links again, shown in the drawer
|
|
55
|
+
*
|
|
56
|
+
* @cssprop --oh-navbar-logo-height - Height of the slotted logo link or image
|
|
57
|
+
*/
|
|
35
58
|
export declare class OhNavbar extends OhElement {
|
|
36
59
|
static styles: import("lit").CSSResult[];
|
|
37
60
|
/** Heading shown in the mobile drawer */
|
package/dist/oh-navbar.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-navbar.d.ts","sourceRoot":"","sources":["../src/oh-navbar.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-navbar.d.ts","sourceRoot":"","sources":["../src/oh-navbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BA2EpB;IAEF,yCAAyC;IAEzC,aAAa,SAAU;IAGvB,OAAO,CAAC,WAAW,CAAS;IAE5B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAIpB,MAAM;CA0CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
package/dist/oh-navbar.js
CHANGED
|
@@ -1,30 +1,21 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* oh-navbar
|
|
3
3
|
*
|
|
4
|
-
* A responsive navigation bar component with logo, links, and mobile drawer.
|
|
5
|
-
*
|
|
6
4
|
* DESIGN DECISIONS:
|
|
7
5
|
* ─────────────────
|
|
8
6
|
* 1. LAYOUT
|
|
9
|
-
* - Logo on the left
|
|
10
|
-
*
|
|
11
|
-
* -
|
|
12
|
-
*
|
|
13
|
-
* 2. STYLING
|
|
14
|
-
* - Surface base background
|
|
15
|
-
* - Chunky bottom border
|
|
16
|
-
* - Links use oh-link styling
|
|
17
|
-
*
|
|
18
|
-
* 3. RESPONSIVE
|
|
19
|
-
* - Desktop: horizontal links
|
|
20
|
-
* - Mobile (< 768px): hamburger + drawer
|
|
21
|
-
*
|
|
22
|
-
* @element oh-navbar
|
|
7
|
+
* - Logo on the left, links pushed to the right, inside an
|
|
8
|
+
* oh-container (size lg)
|
|
9
|
+
* - At and below `size.breakpoint.md` the links hide and a menu button
|
|
10
|
+
* opens an oh-drawer from the left
|
|
23
11
|
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
12
|
+
* 2. DRAWER LINKS ARE A SEPARATE SLOT
|
|
13
|
+
* - The drawer lives outside the bar, so links for it are passed again
|
|
14
|
+
* in the `mobile` slot
|
|
26
15
|
*
|
|
27
|
-
*
|
|
16
|
+
* 3. LOOK FROM TOKENS
|
|
17
|
+
* - `color.surface.base` background, a shadow in `focus.glowColor`,
|
|
18
|
+
* `stroke.divider` / `color.border.subtle` between drawer links
|
|
28
19
|
*/
|
|
29
20
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
30
21
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -40,6 +31,38 @@ import "./oh-cluster.js";
|
|
|
40
31
|
import "./oh-drawer.js";
|
|
41
32
|
import "./oh-button.js";
|
|
42
33
|
import "./oh-icon.js";
|
|
34
|
+
/**
|
|
35
|
+
* A site header bar with a logo and the site's main navigation links, which move into a drawer on narrow viewports.
|
|
36
|
+
*
|
|
37
|
+
* **Use it for** the main navigation at the top of every page. **Don't use
|
|
38
|
+
* it for** in-page sections (use `oh-tabs`) or a trail through the hierarchy
|
|
39
|
+
* (use `oh-breadcrumb`).
|
|
40
|
+
*
|
|
41
|
+
* **Parts:** the `logo` slot (a link to the home page), the default slot for
|
|
42
|
+
* the bar's links (`oh-link`), and the `mobile` slot for the same links in the
|
|
43
|
+
* drawer. `drawer-heading` names the drawer (defaults to "Menu").
|
|
44
|
+
*
|
|
45
|
+
* **Behaviour:** at and below the `size.breakpoint.md` width the links hide
|
|
46
|
+
* and an icon-only menu button ("Open navigation menu") opens an `oh-drawer`
|
|
47
|
+
* from the left, which traps focus and closes on Escape or its close button.
|
|
48
|
+
*
|
|
49
|
+
* **Accessibility:** the bar and the drawer each wrap their links in a
|
|
50
|
+
* `<nav>`; the drawer is a modal dialog. Give the logo link an accessible
|
|
51
|
+
* name (`alt` on its image, or text).
|
|
52
|
+
*
|
|
53
|
+
* **Look:** set by tokens — `color.surface.base` the background,
|
|
54
|
+
* `focus.glowColor` the shadow, `typography.body.*` the text, `spacing.*` the
|
|
55
|
+
* padding and gaps, `stroke.divider` and `color.border.subtle` the dividers
|
|
56
|
+
* between drawer links. `--oh-navbar-logo-height` sets the logo height.
|
|
57
|
+
*
|
|
58
|
+
* @element oh-navbar
|
|
59
|
+
*
|
|
60
|
+
* @slot logo - Slot for logo/brand element
|
|
61
|
+
* @slot - Default slot for navigation links
|
|
62
|
+
* @slot mobile - The navigation links again, shown in the drawer
|
|
63
|
+
*
|
|
64
|
+
* @cssprop --oh-navbar-logo-height - Height of the slotted logo link or image
|
|
65
|
+
*/
|
|
43
66
|
let OhNavbar = class OhNavbar extends OhElement {
|
|
44
67
|
constructor() {
|
|
45
68
|
super(...arguments);
|
package/dist/oh-navbar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-navbar.js","sourceRoot":"","sources":["../src/oh-navbar.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-navbar.js","sourceRoot":"","sources":["../src/oh-navbar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QA8EL,yCAAyC;QAEzC,kBAAa,GAAG,MAAM,CAAC;QAGf,gBAAW,GAAG,KAAK,CAAC;IAoD9B,CAAC;aAtIiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwEF;KACF,AA3EqB,CA2EpB;IASM,WAAW;QACjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;uBAoBQ,IAAI,CAAC,WAAW;;;;;;;;;;;kBAWrB,IAAI,CAAC,aAAa;gBACpB,IAAI,CAAC,WAAW;oBACZ,IAAI,CAAC,YAAY;;;;;;KAMhC,CAAC;IACJ,CAAC;;AAtDD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;+CACjC;AAGf;IADP,KAAK,EAAE;6CACoB;AAnFjB,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAuIpB"}
|
package/dist/oh-progress.d.ts
CHANGED
|
@@ -9,23 +9,42 @@
|
|
|
9
9
|
* 1. FULLY ACCESSIBLE
|
|
10
10
|
* - role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
|
|
11
11
|
* - aria-label for screen reader context
|
|
12
|
-
* -
|
|
12
|
+
* - The visible percentage is aria-hidden; screen readers get the value
|
|
13
|
+
* from the progressbar's aria-value* attributes
|
|
13
14
|
*
|
|
14
15
|
* 2. VISUAL + NUMERIC
|
|
15
16
|
* - Bar shows progress visually
|
|
16
17
|
* - Percentage text for precise feedback
|
|
17
18
|
* - Text can be hidden if needed
|
|
18
19
|
*
|
|
19
|
-
* 3.
|
|
20
|
-
* -
|
|
21
|
-
*
|
|
22
|
-
* -
|
|
23
|
-
*
|
|
24
|
-
*
|
|
20
|
+
* 3. LOOK FROM TOKENS
|
|
21
|
+
* - Track: color.surface.inset, stroke.control, shape.pill and
|
|
22
|
+
* progress.track.insetShadow; fill: the variant's role colour
|
|
23
|
+
* - Inverse uses progress.inverse.*, one fill for every variant, so the
|
|
24
|
+
* fill keeps 3:1 against the track (a pair in contrast-pairs.json)
|
|
25
|
+
* - Width change animates over motion.relaxed, off under reduced motion
|
|
25
26
|
*/
|
|
26
27
|
import { OhElement } from "./base.js";
|
|
27
28
|
export type ProgressVariant = "brand" | "success" | "info" | "warning" | "error";
|
|
28
29
|
export type ProgressSize = "sm" | "md" | "lg";
|
|
30
|
+
/**
|
|
31
|
+
* A bar that shows how much of a task is done, with an optional percentage and visible label.
|
|
32
|
+
*
|
|
33
|
+
* **Use it for** a task with a known end: an upload, a download, steps completed. **Don't use it for** a wait of unknown length (it has no indeterminate state); or for a measurement that isn't progress, like storage used against a quota (a meter).
|
|
34
|
+
*
|
|
35
|
+
* **Variants:** `brand` (default), and `success`, `info`, `warning`, `error` by their feedback role. **Sizes:** `sm`, `md` (default), `lg` set the track height and the value's text size. **`inverse`:** for use on a brand-coloured or dark background.
|
|
36
|
+
*
|
|
37
|
+
* **Behaviour:** `value` runs from 0 to `max` (default 100) and is clamped to that range; the bar and the percentage show `value / max`, rounded. `show-value` (on by default) shows the percentage; `show-label` shows `label` above the bar. The fill's width animates when the value changes, except under `prefers-reduced-motion`.
|
|
38
|
+
*
|
|
39
|
+
* **Accessibility:** the bar is a `progressbar` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and `aria-label` from `label` (default "Progress"). Always set `label` to say what is progressing. The visible percentage is `aria-hidden`, since screen readers read the value from the progressbar.
|
|
40
|
+
*
|
|
41
|
+
* **Look:** set by tokens. The track uses `color.surface.inset`, a `stroke.control` border in `color.border.default`, `shape.pill` corners and an inset `elevation.offset.sm` shadow in `progress.track.insetShadow`. The fill is `color.brand.primary` or `color.feedback.<variant>`. Text uses `color.text.primary` and `typography.body.*`. Inverse uses `progress.inverse.trackBackground`, `progress.inverse.trackBorder`, `progress.inverse.fill` and `color.text.onBrand`. Motion uses `motion.relaxed` and `motion.easeGentle`.
|
|
42
|
+
*
|
|
43
|
+
* @element oh-progress
|
|
44
|
+
* @csspart track - The bar's track.
|
|
45
|
+
* @csspart fill - The filled part of the track.
|
|
46
|
+
* @csspart value - The percentage text.
|
|
47
|
+
*/
|
|
29
48
|
export declare class OhProgress extends OhElement {
|
|
30
49
|
static styles: import("lit").CSSResult[];
|
|
31
50
|
/** Current progress value (0-100 by default, or 0-max) */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-progress.d.ts","sourceRoot":"","sources":["../src/oh-progress.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-progress.d.ts","sourceRoot":"","sources":["../src/oh-progress.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,eAAe,GACvB,OAAO,GACP,SAAS,GACT,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AACZ,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,4BAgKpB;IAEF,0DAA0D;IAE1D,KAAK,SAAK;IAEV,kCAAkC;IAElC,GAAG,SAAO;IAEV,+DAA+D;IAE/D,KAAK,SAAc;IAEnB,sDAAsD;IAEtD,SAAS,UAAS;IAElB,4CAA4C;IAE5C,SAAS,UAAQ;IAEjB,mBAAmB;IAEnB,IAAI,EAAE,YAAY,CAAQ;IAE1B,oBAAoB;IAEpB,OAAO,EAAE,eAAe,CAAW;IAEnC,0CAA0C;IAE1C,OAAO,UAAS;IAEhB,2CAA2C;IAC3C,OAAO,KAAK,UAAU,GAGrB;IAED,MAAM;CAwCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
|
package/dist/oh-progress.js
CHANGED
|
@@ -9,19 +9,20 @@
|
|
|
9
9
|
* 1. FULLY ACCESSIBLE
|
|
10
10
|
* - role="progressbar" with aria-valuenow, aria-valuemin, aria-valuemax
|
|
11
11
|
* - aria-label for screen reader context
|
|
12
|
-
* -
|
|
12
|
+
* - The visible percentage is aria-hidden; screen readers get the value
|
|
13
|
+
* from the progressbar's aria-value* attributes
|
|
13
14
|
*
|
|
14
15
|
* 2. VISUAL + NUMERIC
|
|
15
16
|
* - Bar shows progress visually
|
|
16
17
|
* - Percentage text for precise feedback
|
|
17
18
|
* - Text can be hidden if needed
|
|
18
19
|
*
|
|
19
|
-
* 3.
|
|
20
|
-
* -
|
|
21
|
-
*
|
|
22
|
-
* -
|
|
23
|
-
*
|
|
24
|
-
*
|
|
20
|
+
* 3. LOOK FROM TOKENS
|
|
21
|
+
* - Track: color.surface.inset, stroke.control, shape.pill and
|
|
22
|
+
* progress.track.insetShadow; fill: the variant's role colour
|
|
23
|
+
* - Inverse uses progress.inverse.*, one fill for every variant, so the
|
|
24
|
+
* fill keeps 3:1 against the track (a pair in contrast-pairs.json)
|
|
25
|
+
* - Width change animates over motion.relaxed, off under reduced motion
|
|
25
26
|
*/
|
|
26
27
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
27
28
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -32,6 +33,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
32
33
|
import { html, css } from "lit";
|
|
33
34
|
import { customElement, property } from "lit/decorators.js";
|
|
34
35
|
import { OhElement, baseStyles } from "./base.js";
|
|
36
|
+
/**
|
|
37
|
+
* A bar that shows how much of a task is done, with an optional percentage and visible label.
|
|
38
|
+
*
|
|
39
|
+
* **Use it for** a task with a known end: an upload, a download, steps completed. **Don't use it for** a wait of unknown length (it has no indeterminate state); or for a measurement that isn't progress, like storage used against a quota (a meter).
|
|
40
|
+
*
|
|
41
|
+
* **Variants:** `brand` (default), and `success`, `info`, `warning`, `error` by their feedback role. **Sizes:** `sm`, `md` (default), `lg` set the track height and the value's text size. **`inverse`:** for use on a brand-coloured or dark background.
|
|
42
|
+
*
|
|
43
|
+
* **Behaviour:** `value` runs from 0 to `max` (default 100) and is clamped to that range; the bar and the percentage show `value / max`, rounded. `show-value` (on by default) shows the percentage; `show-label` shows `label` above the bar. The fill's width animates when the value changes, except under `prefers-reduced-motion`.
|
|
44
|
+
*
|
|
45
|
+
* **Accessibility:** the bar is a `progressbar` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and `aria-label` from `label` (default "Progress"). Always set `label` to say what is progressing. The visible percentage is `aria-hidden`, since screen readers read the value from the progressbar.
|
|
46
|
+
*
|
|
47
|
+
* **Look:** set by tokens. The track uses `color.surface.inset`, a `stroke.control` border in `color.border.default`, `shape.pill` corners and an inset `elevation.offset.sm` shadow in `progress.track.insetShadow`. The fill is `color.brand.primary` or `color.feedback.<variant>`. Text uses `color.text.primary` and `typography.body.*`. Inverse uses `progress.inverse.trackBackground`, `progress.inverse.trackBorder`, `progress.inverse.fill` and `color.text.onBrand`. Motion uses `motion.relaxed` and `motion.easeGentle`.
|
|
48
|
+
*
|
|
49
|
+
* @element oh-progress
|
|
50
|
+
* @csspart track - The bar's track.
|
|
51
|
+
* @csspart fill - The filled part of the track.
|
|
52
|
+
* @csspart value - The percentage text.
|
|
53
|
+
*/
|
|
35
54
|
let OhProgress = class OhProgress extends OhElement {
|
|
36
55
|
constructor() {
|
|
37
56
|
super(...arguments);
|
|
@@ -56,8 +75,8 @@ let OhProgress = class OhProgress extends OhElement {
|
|
|
56
75
|
baseStyles,
|
|
57
76
|
css `
|
|
58
77
|
/* ═══════════════════════════════════════════════════════════════
|
|
59
|
-
|
|
60
|
-
Accessible • Visual + Numeric
|
|
78
|
+
PROGRESS BAR
|
|
79
|
+
Accessible • Visual + Numeric
|
|
61
80
|
═══════════════════════════════════════════════════════════════ */
|
|
62
81
|
|
|
63
82
|
:host {
|
|
@@ -195,9 +214,9 @@ let OhProgress = class OhProgress extends OhElement {
|
|
|
195
214
|
color: var(--oh-color-text-on-brand);
|
|
196
215
|
}
|
|
197
216
|
|
|
198
|
-
/* Inverse fill — one
|
|
199
|
-
keeps 3:1
|
|
200
|
-
(the
|
|
217
|
+
/* Inverse fill — one progress.inverse.fill for every variant, so the
|
|
218
|
+
bar keeps 3:1 contrast against the track on brand/accent backgrounds
|
|
219
|
+
(per-variant fills failed; the pair is in contrast-pairs.json). */
|
|
201
220
|
:host([inverse]) .progress__fill {
|
|
202
221
|
background-color: var(--oh-progress-inverse-fill);
|
|
203
222
|
}
|
package/dist/oh-progress.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-progress.js","sourceRoot":"","sources":["../src/oh-progress.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-progress.js","sourceRoot":"","sources":["../src/oh-progress.ts"],"names":[],"mappings":"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"}
|