@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-checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-checkbox.js","sourceRoot":"","sources":["../src/oh-checkbox.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-checkbox.js","sourceRoot":"","sources":["../src/oh-checkbox.ts"],"names":[],"mappings":"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"}
|
package/dist/oh-cluster.d.ts
CHANGED
|
@@ -1,27 +1,32 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* oh-cluster
|
|
3
3
|
*
|
|
4
|
-
* Horizontal grouping with wrap and gap.
|
|
5
|
-
* Perfect for button groups, tags, navigation items.
|
|
6
|
-
*
|
|
7
4
|
* DESIGN DECISIONS:
|
|
8
5
|
* ─────────────────
|
|
9
|
-
* 1.
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
* 2. JUSTIFY OPTIONS
|
|
14
|
-
* - start, center, end, between, around
|
|
15
|
-
*
|
|
16
|
-
* 3. ALIGNMENT OPTIONS
|
|
17
|
-
* - start, center, end, baseline
|
|
18
|
-
*
|
|
19
|
-
* @element oh-cluster
|
|
6
|
+
* 1. A wrapping flex row (unless `nowrap`); `gap` maps named steps to
|
|
7
|
+
* `spacing.*` tokens, the same in both directions.
|
|
8
|
+
* 2. Justify: start, center, end, between, around.
|
|
9
|
+
* 3. Align: start, center (default), end, baseline.
|
|
20
10
|
*/
|
|
21
11
|
import { OhElement } from "./base.js";
|
|
22
12
|
export type ClusterGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
|
|
23
13
|
export type ClusterJustify = "start" | "center" | "end" | "between" | "around";
|
|
24
14
|
export type ClusterAlign = "start" | "center" | "end" | "baseline";
|
|
15
|
+
/**
|
|
16
|
+
* A horizontal group of items that wraps onto new lines when space runs out.
|
|
17
|
+
*
|
|
18
|
+
* **Use it for** button groups, tags and rows of links. **Don't use it for**
|
|
19
|
+
* vertical lists (use `oh-stack`) or equal-width columns (use `oh-grid`).
|
|
20
|
+
*
|
|
21
|
+
* **Gaps:** `gap` is `none`, `xs` (`spacing.1`), `sm` (`spacing.2`), `md`
|
|
22
|
+
* (default, `spacing.4`), `lg` (`spacing.6`) or `xl` (`spacing.8`), between
|
|
23
|
+
* items and between rows. `justify` is `start` (default), `center`, `end`,
|
|
24
|
+
* `between` or `around`; `align` is `start`, `center` (default), `end` or
|
|
25
|
+
* `baseline`. `nowrap` keeps everything on one line.
|
|
26
|
+
*
|
|
27
|
+
* @element oh-cluster
|
|
28
|
+
* @slot - The items to group.
|
|
29
|
+
*/
|
|
25
30
|
export declare class OhCluster extends OhElement {
|
|
26
31
|
static styles: import("lit").CSSResult[];
|
|
27
32
|
gap: ClusterGap;
|
package/dist/oh-cluster.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-cluster.d.ts","sourceRoot":"","sources":["../src/oh-cluster.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-cluster.d.ts","sourceRoot":"","sources":["../src/oh-cluster.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,CAAC;AAEnE;;;;;;;;;;;;;;GAcG;AACH,qBACa,SAAU,SAAQ,SAAS;IACtC,OAAgB,MAAM,4BA6EpB;IAGF,GAAG,EAAE,UAAU,CAAQ;IAGvB,OAAO,EAAE,cAAc,CAAW;IAGlC,KAAK,EAAE,YAAY,CAAY;IAG/B,MAAM,UAAS;IAEf,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
|
package/dist/oh-cluster.js
CHANGED
|
@@ -1,22 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* oh-cluster
|
|
3
3
|
*
|
|
4
|
-
* Horizontal grouping with wrap and gap.
|
|
5
|
-
* Perfect for button groups, tags, navigation items.
|
|
6
|
-
*
|
|
7
4
|
* DESIGN DECISIONS:
|
|
8
5
|
* ─────────────────
|
|
9
|
-
* 1.
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
* 2. JUSTIFY OPTIONS
|
|
14
|
-
* - start, center, end, between, around
|
|
15
|
-
*
|
|
16
|
-
* 3. ALIGNMENT OPTIONS
|
|
17
|
-
* - start, center, end, baseline
|
|
18
|
-
*
|
|
19
|
-
* @element oh-cluster
|
|
6
|
+
* 1. A wrapping flex row (unless `nowrap`); `gap` maps named steps to
|
|
7
|
+
* `spacing.*` tokens, the same in both directions.
|
|
8
|
+
* 2. Justify: start, center, end, between, around.
|
|
9
|
+
* 3. Align: start, center (default), end, baseline.
|
|
20
10
|
*/
|
|
21
11
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
22
12
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -27,6 +17,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
27
17
|
import { html, css } from "lit";
|
|
28
18
|
import { customElement, property } from "lit/decorators.js";
|
|
29
19
|
import { OhElement, baseStyles } from "./base.js";
|
|
20
|
+
/**
|
|
21
|
+
* A horizontal group of items that wraps onto new lines when space runs out.
|
|
22
|
+
*
|
|
23
|
+
* **Use it for** button groups, tags and rows of links. **Don't use it for**
|
|
24
|
+
* vertical lists (use `oh-stack`) or equal-width columns (use `oh-grid`).
|
|
25
|
+
*
|
|
26
|
+
* **Gaps:** `gap` is `none`, `xs` (`spacing.1`), `sm` (`spacing.2`), `md`
|
|
27
|
+
* (default, `spacing.4`), `lg` (`spacing.6`) or `xl` (`spacing.8`), between
|
|
28
|
+
* items and between rows. `justify` is `start` (default), `center`, `end`,
|
|
29
|
+
* `between` or `around`; `align` is `start`, `center` (default), `end` or
|
|
30
|
+
* `baseline`. `nowrap` keeps everything on one line.
|
|
31
|
+
*
|
|
32
|
+
* @element oh-cluster
|
|
33
|
+
* @slot - The items to group.
|
|
34
|
+
*/
|
|
30
35
|
let OhCluster = class OhCluster extends OhElement {
|
|
31
36
|
constructor() {
|
|
32
37
|
super(...arguments);
|
|
@@ -38,11 +43,6 @@ let OhCluster = class OhCluster extends OhElement {
|
|
|
38
43
|
static { this.styles = [
|
|
39
44
|
baseStyles,
|
|
40
45
|
css `
|
|
41
|
-
/* ═══════════════════════════════════════════════════════════════
|
|
42
|
-
ORANGE HALO CLUSTER
|
|
43
|
-
Horizontal grouping • Flex wrap • Consistent gaps
|
|
44
|
-
═══════════════════════════════════════════════════════════════ */
|
|
45
|
-
|
|
46
46
|
:host {
|
|
47
47
|
display: flex;
|
|
48
48
|
flex-wrap: wrap;
|
package/dist/oh-cluster.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-cluster.js","sourceRoot":"","sources":["../src/oh-cluster.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-cluster.js","sourceRoot":"","sources":["../src/oh-cluster.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAMlD;;;;;;;;;;;;;;GAcG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,SAAS;IAAjC;;QAiFL,QAAG,GAAe,IAAI,CAAC;QAGvB,YAAO,GAAmB,OAAO,CAAC;QAGlC,UAAK,GAAiB,QAAQ,CAAC;QAG/B,WAAM,GAAG,KAAK,CAAC;IAKjB,CAAC;aA9FiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0EF;KACF,AA7EqB,CA6EpB;IAcF,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAbD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACnB;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACR;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACX;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC5B;AA1FJ,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA+FrB"}
|
package/dist/oh-container.d.ts
CHANGED
|
@@ -1,29 +1,32 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* oh-container
|
|
3
3
|
*
|
|
4
|
-
* Max-width wrapper with centered content.
|
|
5
|
-
* Used to constrain content width and provide consistent horizontal padding.
|
|
6
|
-
*
|
|
7
4
|
* DESIGN DECISIONS:
|
|
8
5
|
* ─────────────────
|
|
9
|
-
* 1.
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
|
|
6
|
+
* 1. Max-widths come only from `layout.container.*` (sm, md, lg, xl);
|
|
7
|
+
* `full` is edge to edge with no padding.
|
|
8
|
+
* 2. Horizontal padding from `spacing.*`, stepping up at the
|
|
9
|
+
* `size.breakpoint.sm` and `size.breakpoint.lg` widths.
|
|
10
|
+
* 3. Centred with auto margins.
|
|
11
|
+
*/
|
|
12
|
+
import { OhElement } from "./base.js";
|
|
13
|
+
export type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
|
|
14
|
+
/**
|
|
15
|
+
* A centred wrapper that limits content to a maximum width and adds side padding.
|
|
16
|
+
*
|
|
17
|
+
* **Use it for** the outer width of a page or section. **Don't use it for**
|
|
18
|
+
* spacing between items (use `oh-stack`, `oh-cluster` or `oh-grid`).
|
|
15
19
|
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
20
|
+
* **Sizes:** `size` picks the max-width: `sm`, `md`, `lg` (default) and `xl`
|
|
21
|
+
* use `layout.container.sm` to `layout.container.xl`; `full` is the full
|
|
22
|
+
* width with no side padding. `center` centres the text.
|
|
19
23
|
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
24
|
+
* **Behaviour:** side padding is `spacing.4`, rising to `spacing.6` from the
|
|
25
|
+
* `size.breakpoint.sm` width and `spacing.8` from `size.breakpoint.lg`.
|
|
22
26
|
*
|
|
23
27
|
* @element oh-container
|
|
28
|
+
* @slot - The content to contain.
|
|
24
29
|
*/
|
|
25
|
-
import { OhElement } from "./base.js";
|
|
26
|
-
export type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
|
|
27
30
|
export declare class OhContainer extends OhElement {
|
|
28
31
|
static styles: import("lit").CSSResult[];
|
|
29
32
|
size: ContainerSize;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-container.d.ts","sourceRoot":"","sources":["../src/oh-container.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-container.d.ts","sourceRoot":"","sources":["../src/oh-container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE/D;;;;;;;;;;;;;;;GAeG;AACH,qBACa,WAAY,SAAQ,SAAS;IACxC,OAAgB,MAAM,4BAwDpB;IAGF,IAAI,EAAE,aAAa,CAAQ;IAG3B,MAAM,UAAS;IAEf,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
|
package/dist/oh-container.js
CHANGED
|
@@ -1,26 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* oh-container
|
|
3
3
|
*
|
|
4
|
-
* Max-width wrapper with centered content.
|
|
5
|
-
* Used to constrain content width and provide consistent horizontal padding.
|
|
6
|
-
*
|
|
7
4
|
* DESIGN DECISIONS:
|
|
8
5
|
* ─────────────────
|
|
9
|
-
* 1.
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
* - full: 100% (edge-to-edge)
|
|
15
|
-
*
|
|
16
|
-
* 2. CONSISTENT PADDING
|
|
17
|
-
* - Uses spacing tokens for horizontal padding
|
|
18
|
-
* - Responsive padding on smaller screens
|
|
19
|
-
*
|
|
20
|
-
* 3. CENTERED BY DEFAULT
|
|
21
|
-
* - margin: 0 auto for horizontal centering
|
|
22
|
-
*
|
|
23
|
-
* @element oh-container
|
|
6
|
+
* 1. Max-widths come only from `layout.container.*` (sm, md, lg, xl);
|
|
7
|
+
* `full` is edge to edge with no padding.
|
|
8
|
+
* 2. Horizontal padding from `spacing.*`, stepping up at the
|
|
9
|
+
* `size.breakpoint.sm` and `size.breakpoint.lg` widths.
|
|
10
|
+
* 3. Centred with auto margins.
|
|
24
11
|
*/
|
|
25
12
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
26
13
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -31,6 +18,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
31
18
|
import { html, css } from "lit";
|
|
32
19
|
import { customElement, property } from "lit/decorators.js";
|
|
33
20
|
import { OhElement, baseStyles } from "./base.js";
|
|
21
|
+
/**
|
|
22
|
+
* A centred wrapper that limits content to a maximum width and adds side padding.
|
|
23
|
+
*
|
|
24
|
+
* **Use it for** the outer width of a page or section. **Don't use it for**
|
|
25
|
+
* spacing between items (use `oh-stack`, `oh-cluster` or `oh-grid`).
|
|
26
|
+
*
|
|
27
|
+
* **Sizes:** `size` picks the max-width: `sm`, `md`, `lg` (default) and `xl`
|
|
28
|
+
* use `layout.container.sm` to `layout.container.xl`; `full` is the full
|
|
29
|
+
* width with no side padding. `center` centres the text.
|
|
30
|
+
*
|
|
31
|
+
* **Behaviour:** side padding is `spacing.4`, rising to `spacing.6` from the
|
|
32
|
+
* `size.breakpoint.sm` width and `spacing.8` from `size.breakpoint.lg`.
|
|
33
|
+
*
|
|
34
|
+
* @element oh-container
|
|
35
|
+
* @slot - The content to contain.
|
|
36
|
+
*/
|
|
34
37
|
let OhContainer = class OhContainer extends OhElement {
|
|
35
38
|
constructor() {
|
|
36
39
|
super(...arguments);
|
|
@@ -40,11 +43,6 @@ let OhContainer = class OhContainer extends OhElement {
|
|
|
40
43
|
static { this.styles = [
|
|
41
44
|
baseStyles,
|
|
42
45
|
css `
|
|
43
|
-
/* ═══════════════════════════════════════════════════════════════
|
|
44
|
-
ORANGE HALO CONTAINER
|
|
45
|
-
Max-width wrapper • Centered content • Responsive padding
|
|
46
|
-
═══════════════════════════════════════════════════════════════ */
|
|
47
|
-
|
|
48
46
|
:host {
|
|
49
47
|
display: block;
|
|
50
48
|
width: 100%;
|
package/dist/oh-container.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-container.js","sourceRoot":"","sources":["../src/oh-container.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-container.js","sourceRoot":"","sources":["../src/oh-container.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAIlD;;;;;;;;;;;;;;;GAeG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,SAAS;IAAnC;;QA4DL,SAAI,GAAkB,IAAI,CAAC;QAG3B,WAAM,GAAG,KAAK,CAAC;IAKjB,CAAC;aAnEiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqDF;KACF,AAxDqB,CAwDpB;IAQF,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAPD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACf;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAC5B;AA/DJ,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAoEvB"}
|
package/dist/oh-drawer.d.ts
CHANGED
|
@@ -7,31 +7,48 @@
|
|
|
7
7
|
* ─────────────────
|
|
8
8
|
* 1. POSITIONING
|
|
9
9
|
* - Slides in from left or right
|
|
10
|
-
* - Full height,
|
|
11
|
-
* - Overlays content with
|
|
10
|
+
* - Full height, width set by --oh-drawer-width
|
|
11
|
+
* - Overlays content with a color.surface.overlay backdrop
|
|
12
12
|
*
|
|
13
|
-
* 2.
|
|
14
|
-
* -
|
|
15
|
-
* -
|
|
16
|
-
*
|
|
13
|
+
* 2. LOOK FROM TOKENS
|
|
14
|
+
* - Panel: color.surface.base
|
|
15
|
+
* - Shadow: elevation.strong (left); an elevation.offset.lg offset in
|
|
16
|
+
* color.border.strong (right)
|
|
17
|
+
* - Slide: motion.relaxed with motion.easeGentle, off under reduced motion
|
|
17
18
|
*
|
|
18
19
|
* 3. ACCESSIBILITY
|
|
19
20
|
* - Focus trap when open (focus guards at each end of the panel)
|
|
20
21
|
* - Escape key closes
|
|
21
22
|
* - aria-modal and role="dialog"
|
|
22
23
|
* - Returns focus to trigger on close
|
|
24
|
+
* - inert while closed, and hidden once it has slid away
|
|
25
|
+
*/
|
|
26
|
+
import { OhElement } from "./base.js";
|
|
27
|
+
import "./oh-button.js";
|
|
28
|
+
import "./oh-icon.js";
|
|
29
|
+
/**
|
|
30
|
+
* A panel that slides in from the side of the viewport, over the page, for navigation or supplementary content.
|
|
31
|
+
*
|
|
32
|
+
* **Use it for** a site's navigation on small screens, filters, or settings that relate to the page behind. **Don't use it for** a decision the user must make before going on (use `oh-modal`); or for content that should always be visible (put it in the page).
|
|
33
|
+
*
|
|
34
|
+
* **Parts:** `heading` (an optional visible `h2`), a built-in Close button, and the default slot for the content, which scrolls when it's taller than the viewport.
|
|
35
|
+
*
|
|
36
|
+
* **Positions:** `left` (default) or `right`.
|
|
37
|
+
*
|
|
38
|
+
* **Behaviour:** set `open`, or call `show()` and `hide()`. On open, focus moves to the Close button, Tab and Shift+Tab wrap inside the panel, and the page behind stops scrolling. The Close button, Escape, a click on the backdrop and `hide()` close it and fire `oh-close`; focus then returns to the element that opened it. While closed the panel is `inert`. Motion is off under `prefers-reduced-motion`.
|
|
39
|
+
*
|
|
40
|
+
* **Accessibility:** the panel is `role="dialog"` with `aria-modal="true"`, labelled by `heading`, or "Navigation menu" when there's no heading, so set `heading` for any other use. The Close button's accessible name is "Close menu".
|
|
41
|
+
*
|
|
42
|
+
* **Look:** set by tokens. `color.surface.overlay` sets the backdrop and `color.surface.base` the panel. A left drawer's shadow is `elevation.strong`; a right drawer's is an `elevation.offset.lg` offset in `color.border.strong`. The heading uses `typography.heading.h5.fontSize` and `typography.emphasis.fontWeight`. Motion uses `motion.relaxed` and `motion.easeGentle`. `--oh-drawer-width` sets the width.
|
|
23
43
|
*
|
|
24
44
|
* @element oh-drawer
|
|
25
45
|
*
|
|
26
46
|
* @slot - Default slot for drawer content
|
|
27
47
|
*
|
|
28
|
-
* @fires oh-close - When the drawer is closed
|
|
48
|
+
* @fires oh-close - When the drawer is closed by the Close button, Escape, the backdrop or `hide()`. Not fired when you set `open` to false yourself.
|
|
29
49
|
*
|
|
30
|
-
* @cssprop --oh-drawer-width - Width of the drawer
|
|
50
|
+
* @cssprop --oh-drawer-width - Width of the drawer. It never fills the whole viewport width.
|
|
31
51
|
*/
|
|
32
|
-
import { OhElement } from "./base.js";
|
|
33
|
-
import "./oh-button.js";
|
|
34
|
-
import "./oh-icon.js";
|
|
35
52
|
export declare class OhDrawer extends OhElement {
|
|
36
53
|
static styles: import("lit").CSSResult[];
|
|
37
54
|
/** Whether the drawer is open */
|
package/dist/oh-drawer.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-drawer.d.ts","sourceRoot":"","sources":["../src/oh-drawer.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-drawer.d.ts","sourceRoot":"","sources":["../src/oh-drawer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAGlD,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AAEtB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAqHpB;IAEF,iCAAiC;IAEjC,IAAI,UAAS;IAEb,6BAA6B;IAE7B,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAU;IAEpC,uCAAuC;IAEvC,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,2DAA2D;IAE3D,OAAO,CAAC,eAAe,CAA4B;IAGnD,OAAO,CAAC,OAAO,CAAe;IAE9B,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU/C,OAAO,CAAC,OAAO;IAqBf,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,oBAAoB;IAI5B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAOlB,uCAAuC;IACvC,IAAI;IAIJ,wCAAwC;IACxC,IAAI;IAIJ,MAAM;CA0DP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
package/dist/oh-drawer.js
CHANGED
|
@@ -7,27 +7,21 @@
|
|
|
7
7
|
* ─────────────────
|
|
8
8
|
* 1. POSITIONING
|
|
9
9
|
* - Slides in from left or right
|
|
10
|
-
* - Full height,
|
|
11
|
-
* - Overlays content with
|
|
10
|
+
* - Full height, width set by --oh-drawer-width
|
|
11
|
+
* - Overlays content with a color.surface.overlay backdrop
|
|
12
12
|
*
|
|
13
|
-
* 2.
|
|
14
|
-
* -
|
|
15
|
-
* -
|
|
16
|
-
*
|
|
13
|
+
* 2. LOOK FROM TOKENS
|
|
14
|
+
* - Panel: color.surface.base
|
|
15
|
+
* - Shadow: elevation.strong (left); an elevation.offset.lg offset in
|
|
16
|
+
* color.border.strong (right)
|
|
17
|
+
* - Slide: motion.relaxed with motion.easeGentle, off under reduced motion
|
|
17
18
|
*
|
|
18
19
|
* 3. ACCESSIBILITY
|
|
19
20
|
* - Focus trap when open (focus guards at each end of the panel)
|
|
20
21
|
* - Escape key closes
|
|
21
22
|
* - aria-modal and role="dialog"
|
|
22
23
|
* - Returns focus to trigger on close
|
|
23
|
-
*
|
|
24
|
-
* @element oh-drawer
|
|
25
|
-
*
|
|
26
|
-
* @slot - Default slot for drawer content
|
|
27
|
-
*
|
|
28
|
-
* @fires oh-close - When the drawer is closed
|
|
29
|
-
*
|
|
30
|
-
* @cssprop --oh-drawer-width - Width of the drawer (default: 280px)
|
|
24
|
+
* - inert while closed, and hidden once it has slid away
|
|
31
25
|
*/
|
|
32
26
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
33
27
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -41,6 +35,29 @@ import { OhElement, baseStyles } from "./base.js";
|
|
|
41
35
|
import { getFocusableElementsDeep } from "@orange-halo/utils";
|
|
42
36
|
import "./oh-button.js";
|
|
43
37
|
import "./oh-icon.js";
|
|
38
|
+
/**
|
|
39
|
+
* A panel that slides in from the side of the viewport, over the page, for navigation or supplementary content.
|
|
40
|
+
*
|
|
41
|
+
* **Use it for** a site's navigation on small screens, filters, or settings that relate to the page behind. **Don't use it for** a decision the user must make before going on (use `oh-modal`); or for content that should always be visible (put it in the page).
|
|
42
|
+
*
|
|
43
|
+
* **Parts:** `heading` (an optional visible `h2`), a built-in Close button, and the default slot for the content, which scrolls when it's taller than the viewport.
|
|
44
|
+
*
|
|
45
|
+
* **Positions:** `left` (default) or `right`.
|
|
46
|
+
*
|
|
47
|
+
* **Behaviour:** set `open`, or call `show()` and `hide()`. On open, focus moves to the Close button, Tab and Shift+Tab wrap inside the panel, and the page behind stops scrolling. The Close button, Escape, a click on the backdrop and `hide()` close it and fire `oh-close`; focus then returns to the element that opened it. While closed the panel is `inert`. Motion is off under `prefers-reduced-motion`.
|
|
48
|
+
*
|
|
49
|
+
* **Accessibility:** the panel is `role="dialog"` with `aria-modal="true"`, labelled by `heading`, or "Navigation menu" when there's no heading, so set `heading` for any other use. The Close button's accessible name is "Close menu".
|
|
50
|
+
*
|
|
51
|
+
* **Look:** set by tokens. `color.surface.overlay` sets the backdrop and `color.surface.base` the panel. A left drawer's shadow is `elevation.strong`; a right drawer's is an `elevation.offset.lg` offset in `color.border.strong`. The heading uses `typography.heading.h5.fontSize` and `typography.emphasis.fontWeight`. Motion uses `motion.relaxed` and `motion.easeGentle`. `--oh-drawer-width` sets the width.
|
|
52
|
+
*
|
|
53
|
+
* @element oh-drawer
|
|
54
|
+
*
|
|
55
|
+
* @slot - Default slot for drawer content
|
|
56
|
+
*
|
|
57
|
+
* @fires oh-close - When the drawer is closed by the Close button, Escape, the backdrop or `hide()`. Not fired when you set `open` to false yourself.
|
|
58
|
+
*
|
|
59
|
+
* @cssprop --oh-drawer-width - Width of the drawer. It never fills the whole viewport width.
|
|
60
|
+
*/
|
|
44
61
|
let OhDrawer = class OhDrawer extends OhElement {
|
|
45
62
|
constructor() {
|
|
46
63
|
super(...arguments);
|
package/dist/oh-drawer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-drawer.js","sourceRoot":"","sources":["../src/oh-drawer.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-drawer.js","sourceRoot":"","sources":["../src/oh-drawer.ts"],"names":[],"mappings":"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"}
|
package/dist/oh-footer.d.ts
CHANGED
|
@@ -1,24 +1,48 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* oh-footer
|
|
3
3
|
*
|
|
4
|
-
* A footer component with logo, multi-column links, and social icons.
|
|
5
|
-
*
|
|
6
4
|
* DESIGN DECISIONS:
|
|
7
5
|
* ─────────────────
|
|
8
6
|
* 1. LAYOUT
|
|
9
|
-
* -
|
|
10
|
-
*
|
|
11
|
-
* -
|
|
7
|
+
* - A four-column oh-grid inside an oh-container (size lg): the logo,
|
|
8
|
+
* copyright and social icons first, then a column per slotted oh-stack
|
|
9
|
+
* - At and below `size.breakpoint.md` the first column spans the full width
|
|
10
|
+
*
|
|
11
|
+
* 2. LOOK FROM TOKENS
|
|
12
|
+
* - `color.accent.default` background, `color.text.onAccent` text; use
|
|
13
|
+
* `inverse` links and icons inside it
|
|
14
|
+
*
|
|
15
|
+
* 3. CORE, NOT A BRAND PATTERN
|
|
16
|
+
* - Every site needs a footer, and its shape (logo, copyright, social,
|
|
17
|
+
* link columns) isn't specific to one brand, so it stays in the core
|
|
18
|
+
*/
|
|
19
|
+
import { OhElement } from "./base.js";
|
|
20
|
+
import "./oh-container.js";
|
|
21
|
+
import "./oh-grid.js";
|
|
22
|
+
import "./oh-stack.js";
|
|
23
|
+
import "./oh-cluster.js";
|
|
24
|
+
/**
|
|
25
|
+
* A site footer with a logo, copyright line, social links and columns of links.
|
|
26
|
+
*
|
|
27
|
+
* **Use it for** the footer at the bottom of every page. **Don't use it for**
|
|
28
|
+
* the main navigation (use `oh-navbar`).
|
|
29
|
+
*
|
|
30
|
+
* **Parts:** the `logo` slot; `copyright`, a line of text under the logo;
|
|
31
|
+
* the `social` slot for `oh-icon` links (with `inverse`); and the default
|
|
32
|
+
* slot, where each `oh-stack` becomes a column (start it with a heading, then
|
|
33
|
+
* `oh-link`s with `inverse`).
|
|
12
34
|
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* - Generous padding
|
|
35
|
+
* **Behaviour:** the columns follow `oh-grid`'s four-column steps at the
|
|
36
|
+
* `size.breakpoint.*` widths; at and below `size.breakpoint.md` the logo
|
|
37
|
+
* column spans the full width.
|
|
17
38
|
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
39
|
+
* **Accessibility:** renders a `<footer>`. Give the logo an accessible name,
|
|
40
|
+
* each social icon a `label`, and the column headings a level that fits the
|
|
41
|
+
* page's outline.
|
|
42
|
+
*
|
|
43
|
+
* **Look:** set by tokens — `color.accent.default` the background,
|
|
44
|
+
* `color.text.onAccent` the text, `typography.body.*` the type, `spacing.8`
|
|
45
|
+
* the vertical padding.
|
|
22
46
|
*
|
|
23
47
|
* @element oh-footer
|
|
24
48
|
*
|
|
@@ -26,11 +50,6 @@
|
|
|
26
50
|
* @slot social - Slot for social media icons
|
|
27
51
|
* @slot - Default slot for link columns (use oh-stack for each column)
|
|
28
52
|
*/
|
|
29
|
-
import { OhElement } from "./base.js";
|
|
30
|
-
import "./oh-container.js";
|
|
31
|
-
import "./oh-grid.js";
|
|
32
|
-
import "./oh-stack.js";
|
|
33
|
-
import "./oh-cluster.js";
|
|
34
53
|
export declare class OhFooter extends OhElement {
|
|
35
54
|
static styles: import("lit").CSSResult[];
|
|
36
55
|
/** Copyright text */
|
package/dist/oh-footer.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-footer.d.ts","sourceRoot":"","sources":["../src/oh-footer.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-footer.d.ts","sourceRoot":"","sources":["../src/oh-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,4BAmCpB;IAEF,qBAAqB;IAErB,SAAS,SAAM;IAEf,MAAM;CAyBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
|
package/dist/oh-footer.js
CHANGED
|
@@ -1,30 +1,20 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* oh-footer
|
|
3
3
|
*
|
|
4
|
-
* A footer component with logo, multi-column links, and social icons.
|
|
5
|
-
*
|
|
6
4
|
* DESIGN DECISIONS:
|
|
7
5
|
* ─────────────────
|
|
8
6
|
* 1. LAYOUT
|
|
9
|
-
* -
|
|
10
|
-
*
|
|
11
|
-
* -
|
|
12
|
-
*
|
|
13
|
-
* 2. STYLING
|
|
14
|
-
* - Accent blue background (dark)
|
|
15
|
-
* - White/inverse text and links
|
|
16
|
-
* - Generous padding
|
|
7
|
+
* - A four-column oh-grid inside an oh-container (size lg): the logo,
|
|
8
|
+
* copyright and social icons first, then a column per slotted oh-stack
|
|
9
|
+
* - At and below `size.breakpoint.md` the first column spans the full width
|
|
17
10
|
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
* the brand package (brand plan phase 8).
|
|
11
|
+
* 2. LOOK FROM TOKENS
|
|
12
|
+
* - `color.accent.default` background, `color.text.onAccent` text; use
|
|
13
|
+
* `inverse` links and icons inside it
|
|
22
14
|
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
* @slot social - Slot for social media icons
|
|
27
|
-
* @slot - Default slot for link columns (use oh-stack for each column)
|
|
15
|
+
* 3. CORE, NOT A BRAND PATTERN
|
|
16
|
+
* - Every site needs a footer, and its shape (logo, copyright, social,
|
|
17
|
+
* link columns) isn't specific to one brand, so it stays in the core
|
|
28
18
|
*/
|
|
29
19
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
30
20
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -39,6 +29,35 @@ import "./oh-container.js";
|
|
|
39
29
|
import "./oh-grid.js";
|
|
40
30
|
import "./oh-stack.js";
|
|
41
31
|
import "./oh-cluster.js";
|
|
32
|
+
/**
|
|
33
|
+
* A site footer with a logo, copyright line, social links and columns of links.
|
|
34
|
+
*
|
|
35
|
+
* **Use it for** the footer at the bottom of every page. **Don't use it for**
|
|
36
|
+
* the main navigation (use `oh-navbar`).
|
|
37
|
+
*
|
|
38
|
+
* **Parts:** the `logo` slot; `copyright`, a line of text under the logo;
|
|
39
|
+
* the `social` slot for `oh-icon` links (with `inverse`); and the default
|
|
40
|
+
* slot, where each `oh-stack` becomes a column (start it with a heading, then
|
|
41
|
+
* `oh-link`s with `inverse`).
|
|
42
|
+
*
|
|
43
|
+
* **Behaviour:** the columns follow `oh-grid`'s four-column steps at the
|
|
44
|
+
* `size.breakpoint.*` widths; at and below `size.breakpoint.md` the logo
|
|
45
|
+
* column spans the full width.
|
|
46
|
+
*
|
|
47
|
+
* **Accessibility:** renders a `<footer>`. Give the logo an accessible name,
|
|
48
|
+
* each social icon a `label`, and the column headings a level that fits the
|
|
49
|
+
* page's outline.
|
|
50
|
+
*
|
|
51
|
+
* **Look:** set by tokens — `color.accent.default` the background,
|
|
52
|
+
* `color.text.onAccent` the text, `typography.body.*` the type, `spacing.8`
|
|
53
|
+
* the vertical padding.
|
|
54
|
+
*
|
|
55
|
+
* @element oh-footer
|
|
56
|
+
*
|
|
57
|
+
* @slot logo - Slot for logo element
|
|
58
|
+
* @slot social - Slot for social media icons
|
|
59
|
+
* @slot - Default slot for link columns (use oh-stack for each column)
|
|
60
|
+
*/
|
|
42
61
|
let OhFooter = class OhFooter extends OhElement {
|
|
43
62
|
constructor() {
|
|
44
63
|
super(...arguments);
|
package/dist/oh-footer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-footer.js","sourceRoot":"","sources":["../src/oh-footer.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-footer.js","sourceRoot":"","sources":["../src/oh-footer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAElD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,iBAAiB,CAAC;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,SAAS;IAAhC;;QAsCL,qBAAqB;QAErB,cAAS,GAAG,EAAE,CAAC;IA2BjB,CAAC;aAlEiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAgCF;KACF,AAnCqB,CAmCpB;IAMF,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;gBASC,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA,gCAAgC,IAAI,CAAC,SAAS,MAAM;YAC1D,CAAC,CAAC,IAAI;;;;;;;;;;;KAWjB,CAAC;IACJ,CAAC;;AA1BD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACZ;AAxCJ,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAmEpB"}
|