@orange-halo/components 2.1.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 +968 -362
- package/dist/base.d.ts.map +1 -1
- package/dist/base.js +1 -2
- package/dist/base.js.map +1 -1
- package/dist/index.d.ts +4 -8
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -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 +99 -29
- 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 +96 -36
- 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 +38 -19
- 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 +66 -25
- 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.figma.js +1 -3
- package/dist/oh-button.figma.js.map +1 -1
- package/dist/oh-button.js +133 -82
- 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 +143 -96
- 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 +114 -49
- 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 +117 -60
- 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 +52 -24
- 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 +28 -21
- 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 +27 -9
- package/dist/oh-icon.js.map +1 -1
- package/dist/oh-input.d.ts +110 -21
- 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 +227 -71
- 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 +83 -38
- package/dist/oh-link.js.map +1 -1
- package/dist/oh-modal.d.ts +35 -6
- package/dist/oh-modal.d.ts.map +1 -1
- package/dist/oh-modal.js +90 -39
- 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 +44 -20
- 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 +35 -14
- 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 +122 -51
- 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 +120 -61
- package/dist/oh-radio.js.map +1 -1
- package/dist/oh-select.d.ts +59 -16
- package/dist/oh-select.d.ts.map +1 -1
- package/dist/oh-select.js +141 -69
- 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 +43 -32
- 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 +100 -76
- package/dist/oh-tabs.js.map +1 -1
- package/dist/oh-textarea.d.ts +129 -0
- package/dist/oh-textarea.d.ts.map +1 -0
- package/dist/oh-textarea.js +401 -0
- package/dist/oh-textarea.js.map +1 -0
- package/dist/oh-toggle.d.ts +45 -12
- package/dist/oh-toggle.d.ts.map +1 -1
- package/dist/oh-toggle.js +84 -34
- package/dist/oh-toggle.js.map +1 -1
- package/dist/styles/typography.js +1 -1
- package/package.json +7 -7
- package/dist/oh-hero.d.ts +0 -33
- package/dist/oh-hero.d.ts.map +0 -1
- package/dist/oh-hero.js +0 -246
- package/dist/oh-hero.js.map +0 -1
package/dist/base.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../src/base.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAO,SAAS,EAAE,MAAM,KAAK,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../src/base.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAO,SAAS,EAAE,MAAM,KAAK,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,SAiCxB,CAAC;AAEF;;GAEG;AACH,qBAAa,SAAU,SAAQ,UAAU;IACvC;;OAEG;IACH,MAAM,CAAC,MAAM,cAAgB;IAE7B;;OAEG;IACH,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG,OAAO,EACxB,SAAS,EAAE,MAAM,EACjB,MAAM,CAAC,EAAE,CAAC,EACV,OAAO,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,GAC3C,OAAO;IAWV;;OAEG;IACH,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM;CAM7D"}
|
package/dist/base.js
CHANGED
|
@@ -22,8 +22,7 @@ export const baseStyles = css `
|
|
|
22
22
|
|
|
23
23
|
/* Focus ring for keyboard navigation */
|
|
24
24
|
:host(:focus-visible) {
|
|
25
|
-
outline: var(--oh-focus-ring-width) solid
|
|
26
|
-
var(--oh-focus-ring-color);
|
|
25
|
+
outline: var(--oh-focus-ring-width) solid var(--oh-focus-ring-color);
|
|
27
26
|
outline-offset: var(--oh-focus-ring-offset);
|
|
28
27
|
}
|
|
29
28
|
|
package/dist/base.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base.js","sourceRoot":"","sources":["../src/base.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAE,GAAG,EAAa,MAAM,KAAK,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAc,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"base.js","sourceRoot":"","sources":["../src/base.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,UAAU,EAAE,GAAG,EAAa,MAAM,KAAK,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAc,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCvC,CAAC;AAEF;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IACvC;;OAEG;aACI,WAAM,GAAG,CAAC,UAAU,CAAC,CAAC;IAE7B;;OAEG;IACO,IAAI,CACZ,SAAiB,EACjB,MAAU,EACV,OAA4C;QAE5C,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,SAAS,EAAE;YACvC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI,EAAE,8BAA8B;YAC9C,UAAU,EAAE,IAAI;YAChB,GAAG,OAAO;YACV,MAAM;SACP,CAAC,CAAC;QACH,OAAO,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAED;;OAEG;IACO,QAAQ,CAAC,OAAgC;QACjD,OAAO,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;aAC3B,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC;aAC5B,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC;aACnB,IAAI,CAAC,GAAG,CAAC,CAAC;IACf,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -19,7 +19,6 @@ import "./oh-container.js";
|
|
|
19
19
|
import "./oh-drawer.js";
|
|
20
20
|
import "./oh-footer.js";
|
|
21
21
|
import "./oh-grid.js";
|
|
22
|
-
import "./oh-hero.js";
|
|
23
22
|
import "./oh-icon.js";
|
|
24
23
|
import "./oh-input.js";
|
|
25
24
|
import "./oh-link.js";
|
|
@@ -32,14 +31,15 @@ import "./oh-select.js";
|
|
|
32
31
|
import "./oh-skip-link.js";
|
|
33
32
|
import "./oh-stack.js";
|
|
34
33
|
import "./oh-tabs.js";
|
|
34
|
+
import "./oh-textarea.js";
|
|
35
35
|
import "./oh-toggle.js";
|
|
36
36
|
export { OhElement, baseStyles } from "./base.js";
|
|
37
37
|
export { OhAccordion } from "./oh-accordion.js";
|
|
38
|
-
export type { AccordionItem, AccordionVariant, HeadingLevel } from "./oh-accordion.js";
|
|
38
|
+
export type { AccordionItem, AccordionVariant, HeadingLevel, } from "./oh-accordion.js";
|
|
39
39
|
export { OhAlert } from "./oh-alert.js";
|
|
40
40
|
export type { AlertVariant } from "./oh-alert.js";
|
|
41
41
|
export { OhBadge } from "./oh-badge.js";
|
|
42
|
-
export type { BadgeVariant,
|
|
42
|
+
export type { BadgeVariant, BadgeAppearance } from "./oh-badge.js";
|
|
43
43
|
export { OhBreadcrumb } from "./oh-breadcrumb.js";
|
|
44
44
|
export type { BreadcrumbItem } from "./oh-breadcrumb.js";
|
|
45
45
|
export { OhButton } from "./oh-button.js";
|
|
@@ -54,14 +54,9 @@ export type { ClusterGap, ClusterJustify, ClusterAlign } from "./oh-cluster.js";
|
|
|
54
54
|
export { OhContainer } from "./oh-container.js";
|
|
55
55
|
export type { ContainerSize } from "./oh-container.js";
|
|
56
56
|
export { OhDrawer } from "./oh-drawer.js";
|
|
57
|
-
/** @deprecated Part of the Orange Halo brand: import from @orange-halo/brand-orange-halo. Removed from components in 3.0. */
|
|
58
57
|
export { OhFooter } from "./oh-footer.js";
|
|
59
58
|
export { OhGrid } from "./oh-grid.js";
|
|
60
59
|
export type { GridColumns, GridGap } from "./oh-grid.js";
|
|
61
|
-
/** @deprecated Part of the Orange Halo brand: import from @orange-halo/brand-orange-halo. Removed from components in 3.0. */
|
|
62
|
-
export { OhHero } from "./oh-hero.js";
|
|
63
|
-
/** @deprecated Part of the Orange Halo brand: import from @orange-halo/brand-orange-halo. Removed from components in 3.0. */
|
|
64
|
-
export type { HeroVariant, HeroSize } from "./oh-hero.js";
|
|
65
60
|
export { OhIcon } from "./oh-icon.js";
|
|
66
61
|
export type { IconName, IconSize } from "./oh-icon.js";
|
|
67
62
|
export { OhInput } from "./oh-input.js";
|
|
@@ -84,6 +79,7 @@ export { OhStack } from "./oh-stack.js";
|
|
|
84
79
|
export type { StackGap, StackAlign } from "./oh-stack.js";
|
|
85
80
|
export { OhTabs } from "./oh-tabs.js";
|
|
86
81
|
export type { TabItem } from "./oh-tabs.js";
|
|
82
|
+
export { OhTextarea } from "./oh-textarea.js";
|
|
87
83
|
export { OhToggle } from "./oh-toggle.js";
|
|
88
84
|
export { typographyStyles, typographyCSS } from "./styles/typography.js";
|
|
89
85
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AACtB,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gBAAgB,CAAC;AAOxB,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAGlD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,YAAY,GACb,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEhE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEhF,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEtE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,YAAY,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -22,7 +22,6 @@ import "./oh-container.js";
|
|
|
22
22
|
import "./oh-drawer.js";
|
|
23
23
|
import "./oh-footer.js";
|
|
24
24
|
import "./oh-grid.js";
|
|
25
|
-
import "./oh-hero.js";
|
|
26
25
|
import "./oh-icon.js";
|
|
27
26
|
import "./oh-input.js";
|
|
28
27
|
import "./oh-link.js";
|
|
@@ -35,6 +34,7 @@ import "./oh-select.js";
|
|
|
35
34
|
import "./oh-skip-link.js";
|
|
36
35
|
import "./oh-stack.js";
|
|
37
36
|
import "./oh-tabs.js";
|
|
37
|
+
import "./oh-textarea.js";
|
|
38
38
|
import "./oh-toggle.js";
|
|
39
39
|
// =============================================================================
|
|
40
40
|
// EXPORTS - For TypeScript users who want to extend or type components
|
|
@@ -53,11 +53,8 @@ export { OhCheckboxGroup } from "./oh-checkbox-group.js";
|
|
|
53
53
|
export { OhCluster } from "./oh-cluster.js";
|
|
54
54
|
export { OhContainer } from "./oh-container.js";
|
|
55
55
|
export { OhDrawer } from "./oh-drawer.js";
|
|
56
|
-
/** @deprecated Part of the Orange Halo brand: import from @orange-halo/brand-orange-halo. Removed from components in 3.0. */
|
|
57
56
|
export { OhFooter } from "./oh-footer.js";
|
|
58
57
|
export { OhGrid } from "./oh-grid.js";
|
|
59
|
-
/** @deprecated Part of the Orange Halo brand: import from @orange-halo/brand-orange-halo. Removed from components in 3.0. */
|
|
60
|
-
export { OhHero } from "./oh-hero.js";
|
|
61
58
|
export { OhIcon } from "./oh-icon.js";
|
|
62
59
|
export { OhInput } from "./oh-input.js";
|
|
63
60
|
export { OhLink } from "./oh-link.js";
|
|
@@ -70,6 +67,7 @@ export { OhSelect } from "./oh-select.js";
|
|
|
70
67
|
export { OhSkipLink } from "./oh-skip-link.js";
|
|
71
68
|
export { OhStack } from "./oh-stack.js";
|
|
72
69
|
export { OhTabs } from "./oh-tabs.js";
|
|
70
|
+
export { OhTextarea } from "./oh-textarea.js";
|
|
73
71
|
export { OhToggle } from "./oh-toggle.js";
|
|
74
72
|
// Styles
|
|
75
73
|
export { typographyStyles, typographyCSS } from "./styles/typography.js";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,gFAAgF;AAChF,kEAAkE;AAClE,gFAAgF;AAChF,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AACtB,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,gFAAgF;AAChF,kEAAkE;AAClE,gFAAgF;AAChF,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,gBAAgB,CAAC;AACxB,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gBAAgB,CAAC;AAExB,gFAAgF;AAChF,uEAAuE;AACvE,gFAAgF;AAEhF,OAAO;AACP,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAElD,kCAAkC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOhD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAGlD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAGzD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGxC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGtC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,SAAS;AACT,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC"}
|
package/dist/oh-accordion.d.ts
CHANGED
|
@@ -6,35 +6,80 @@
|
|
|
6
6
|
* DESIGN DECISIONS:
|
|
7
7
|
* ─────────────────
|
|
8
8
|
* 1. TWO VARIANTS
|
|
9
|
-
* - Subtle:
|
|
10
|
-
*
|
|
9
|
+
* - Subtle: inline with the content; the trigger follows the link rules
|
|
10
|
+
* (color.text.link, a decoration.underline* underline that clears on hover)
|
|
11
|
+
* - Standout: each item is a boxed surface (color.surface.raised,
|
|
12
|
+
* stroke.control, shape.container) with an elevation.offset.* shadow
|
|
13
|
+
* that moves by lift.hoverMd on hover
|
|
11
14
|
*
|
|
12
15
|
* 2. CONSISTENT ICON
|
|
13
|
-
* - Chevron that rotates
|
|
16
|
+
* - Chevron that rotates a quarter turn when expanded
|
|
14
17
|
* - Same icon for both variants
|
|
15
18
|
*
|
|
16
19
|
* 3. ACCESSIBLE
|
|
17
|
-
* - Button trigger with aria-expanded
|
|
18
|
-
* - Content region with aria-hidden
|
|
20
|
+
* - Button trigger with aria-expanded, inside a heading at a set level
|
|
21
|
+
* - Content region with aria-hidden, and inert while collapsed so
|
|
22
|
+
* nothing inside it can take focus
|
|
19
23
|
* - Keyboard support (Enter/Space)
|
|
20
24
|
* - Focus state with underline
|
|
21
25
|
*
|
|
22
|
-
*
|
|
26
|
+
* 4. ONE ITEM IS FINE
|
|
27
|
+
* - A single item is a show/hide section ("Show as table"). Each
|
|
28
|
+
* item's hiddenText adds heading text only screen readers hear, so
|
|
29
|
+
* several "Show as table" headings on a page can be told apart
|
|
30
|
+
*
|
|
31
|
+
* 5. ANY CONTENT
|
|
32
|
+
* - An item's content is any markup in a child with slot="item-<index>"
|
|
33
|
+
* (item-0 for the first), such as a paragraph or a table
|
|
23
34
|
*/
|
|
24
|
-
import { nothing } from "lit";
|
|
35
|
+
import { nothing, type PropertyValues } from "lit";
|
|
25
36
|
import { OhElement } from "./base.js";
|
|
26
37
|
export interface AccordionItem {
|
|
38
|
+
/** The visible heading */
|
|
27
39
|
heading: string;
|
|
28
|
-
|
|
40
|
+
/**
|
|
41
|
+
* Extra heading text that only screen readers hear, added after the
|
|
42
|
+
* heading, e.g. "(sales per year)" for a "Show as table" heading
|
|
43
|
+
*/
|
|
44
|
+
hiddenText?: string;
|
|
45
|
+
/** Starts open */
|
|
46
|
+
open?: boolean;
|
|
29
47
|
}
|
|
30
48
|
export type AccordionVariant = "subtle" | "standout";
|
|
31
49
|
export type HeadingLevel = 2 | 3 | 4 | 5 | 6;
|
|
50
|
+
/**
|
|
51
|
+
* Collapsible sections, each with a heading that shows and hides its content. Use one item for a single show/hide section.
|
|
52
|
+
*
|
|
53
|
+
* **Use it for** content readers scan by heading and open as needed (FAQs, details, a "Show as table" section). **Don't use it for** content most readers need (leave it visible); for switching between views of the same thing (use tabs); or for site navigation.
|
|
54
|
+
*
|
|
55
|
+
* **Parts:** `items` is an array of `{ heading, hiddenText?, open? }` (in HTML, a JSON array). Item N's content is any markup in a child with `slot="item-N"`, such as a paragraph or a table.
|
|
56
|
+
*
|
|
57
|
+
* **Variants:** `subtle` (default), inline with surrounding content, its trigger styled as a link; `standout`, each item a separate boxed surface, for when the sections are the page's main content.
|
|
58
|
+
*
|
|
59
|
+
* **States:** collapsed and expanded per item (any number can be open; `open` sets the starting state), plus hover and focus-visible on the trigger.
|
|
60
|
+
*
|
|
61
|
+
* **Behaviour:** each trigger is a `<button>` inside a heading at `heading-level` (default 3), so the items fit the page's outline. Click, Enter or Space toggles it. While collapsed, the panel is `aria-hidden` and `inert`, so nothing inside it takes focus. Motion is turned off under `prefers-reduced-motion`.
|
|
62
|
+
*
|
|
63
|
+
* **Accessibility:** the trigger has `aria-expanded` and `aria-controls`; the panel is a `region` labelled by its trigger. `hiddenText` adds heading text only screen readers hear, so several items with the same visible heading (e.g. "Show as table") can be told apart. Set `heading-level` to fit the headings around it.
|
|
64
|
+
*
|
|
65
|
+
* **Look:** set by tokens. `subtle`: the trigger uses `color.text.link` and an underline set by `decoration.underlineThickness`, `underlineDash` and `underlinePeriod`, which clears on hover; focus is a solid `color.brand.primary` underline; items are divided by `stroke.divider` in `color.border.subtle`. `standout`: each item uses `color.surface.raised`, a `stroke.control` border in `color.border.emphasis` (`color.brand.primary` when expanded), `shape.container` corners and an `elevation.offset.*` shadow in `elevation.color.neutral`, which moves by `lift.hoverMd` on hover. Type uses `typography.body.*`; motion uses `motion.*` tokens.
|
|
66
|
+
*
|
|
67
|
+
* @element oh-accordion
|
|
68
|
+
* @slot item-N - The content of the item at index N (item-0 is the first)
|
|
69
|
+
*/
|
|
32
70
|
export declare class OhAccordion extends OhElement {
|
|
33
71
|
static styles: import("lit").CSSResult[];
|
|
72
|
+
/**
|
|
73
|
+
* The sections: { heading, hiddenText?, open? }. In HTML, a JSON array.
|
|
74
|
+
* Each item's content is a child with slot="item-<index>".
|
|
75
|
+
*/
|
|
34
76
|
items: AccordionItem[];
|
|
77
|
+
/** subtle (inline) or standout (boxed) */
|
|
35
78
|
variant: AccordionVariant;
|
|
79
|
+
/** The heading level of each item's trigger, to fit the page's outline */
|
|
36
80
|
headingLevel: HeadingLevel;
|
|
37
81
|
private _expandedItems;
|
|
82
|
+
willUpdate(changed: PropertyValues): void;
|
|
38
83
|
private _toggleItem;
|
|
39
84
|
private _isExpanded;
|
|
40
85
|
render(): typeof nothing | import("lit").TemplateResult<1>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-accordion.d.ts","sourceRoot":"","sources":["../src/oh-accordion.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-accordion.d.ts","sourceRoot":"","sources":["../src/oh-accordion.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,EAAa,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE7C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,WAAY,SAAQ,SAAS;IACxC,OAAgB,MAAM,4BAyRpB;IAEF;;;OAGG;IAEH,KAAK,EAAE,aAAa,EAAE,CAAM;IAE5B,0CAA0C;IAE1C,OAAO,EAAE,gBAAgB,CAAY;IAErC,0EAA0E;IAE1E,YAAY,EAAE,YAAY,CAAK;IAG/B,OAAO,CAAC,cAAc,CAA0B;IAEhD,UAAU,CAAC,OAAO,EAAE,cAAc;IASlC,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,WAAW;IAInB,MAAM;CAmEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
|
package/dist/oh-accordion.js
CHANGED
|
@@ -6,20 +6,31 @@
|
|
|
6
6
|
* DESIGN DECISIONS:
|
|
7
7
|
* ─────────────────
|
|
8
8
|
* 1. TWO VARIANTS
|
|
9
|
-
* - Subtle:
|
|
10
|
-
*
|
|
9
|
+
* - Subtle: inline with the content; the trigger follows the link rules
|
|
10
|
+
* (color.text.link, a decoration.underline* underline that clears on hover)
|
|
11
|
+
* - Standout: each item is a boxed surface (color.surface.raised,
|
|
12
|
+
* stroke.control, shape.container) with an elevation.offset.* shadow
|
|
13
|
+
* that moves by lift.hoverMd on hover
|
|
11
14
|
*
|
|
12
15
|
* 2. CONSISTENT ICON
|
|
13
|
-
* - Chevron that rotates
|
|
16
|
+
* - Chevron that rotates a quarter turn when expanded
|
|
14
17
|
* - Same icon for both variants
|
|
15
18
|
*
|
|
16
19
|
* 3. ACCESSIBLE
|
|
17
|
-
* - Button trigger with aria-expanded
|
|
18
|
-
* - Content region with aria-hidden
|
|
20
|
+
* - Button trigger with aria-expanded, inside a heading at a set level
|
|
21
|
+
* - Content region with aria-hidden, and inert while collapsed so
|
|
22
|
+
* nothing inside it can take focus
|
|
19
23
|
* - Keyboard support (Enter/Space)
|
|
20
24
|
* - Focus state with underline
|
|
21
25
|
*
|
|
22
|
-
*
|
|
26
|
+
* 4. ONE ITEM IS FINE
|
|
27
|
+
* - A single item is a show/hide section ("Show as table"). Each
|
|
28
|
+
* item's hiddenText adds heading text only screen readers hear, so
|
|
29
|
+
* several "Show as table" headings on a page can be told apart
|
|
30
|
+
*
|
|
31
|
+
* 5. ANY CONTENT
|
|
32
|
+
* - An item's content is any markup in a child with slot="item-<index>"
|
|
33
|
+
* (item-0 for the first), such as a paragraph or a table
|
|
23
34
|
*/
|
|
24
35
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
25
36
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -31,11 +42,37 @@ import { html, css, nothing } from "lit";
|
|
|
31
42
|
import { unsafeStatic, html as staticHtml } from "lit/static-html.js";
|
|
32
43
|
import { customElement, property, state } from "lit/decorators.js";
|
|
33
44
|
import { OhElement, baseStyles } from "./base.js";
|
|
45
|
+
/**
|
|
46
|
+
* Collapsible sections, each with a heading that shows and hides its content. Use one item for a single show/hide section.
|
|
47
|
+
*
|
|
48
|
+
* **Use it for** content readers scan by heading and open as needed (FAQs, details, a "Show as table" section). **Don't use it for** content most readers need (leave it visible); for switching between views of the same thing (use tabs); or for site navigation.
|
|
49
|
+
*
|
|
50
|
+
* **Parts:** `items` is an array of `{ heading, hiddenText?, open? }` (in HTML, a JSON array). Item N's content is any markup in a child with `slot="item-N"`, such as a paragraph or a table.
|
|
51
|
+
*
|
|
52
|
+
* **Variants:** `subtle` (default), inline with surrounding content, its trigger styled as a link; `standout`, each item a separate boxed surface, for when the sections are the page's main content.
|
|
53
|
+
*
|
|
54
|
+
* **States:** collapsed and expanded per item (any number can be open; `open` sets the starting state), plus hover and focus-visible on the trigger.
|
|
55
|
+
*
|
|
56
|
+
* **Behaviour:** each trigger is a `<button>` inside a heading at `heading-level` (default 3), so the items fit the page's outline. Click, Enter or Space toggles it. While collapsed, the panel is `aria-hidden` and `inert`, so nothing inside it takes focus. Motion is turned off under `prefers-reduced-motion`.
|
|
57
|
+
*
|
|
58
|
+
* **Accessibility:** the trigger has `aria-expanded` and `aria-controls`; the panel is a `region` labelled by its trigger. `hiddenText` adds heading text only screen readers hear, so several items with the same visible heading (e.g. "Show as table") can be told apart. Set `heading-level` to fit the headings around it.
|
|
59
|
+
*
|
|
60
|
+
* **Look:** set by tokens. `subtle`: the trigger uses `color.text.link` and an underline set by `decoration.underlineThickness`, `underlineDash` and `underlinePeriod`, which clears on hover; focus is a solid `color.brand.primary` underline; items are divided by `stroke.divider` in `color.border.subtle`. `standout`: each item uses `color.surface.raised`, a `stroke.control` border in `color.border.emphasis` (`color.brand.primary` when expanded), `shape.container` corners and an `elevation.offset.*` shadow in `elevation.color.neutral`, which moves by `lift.hoverMd` on hover. Type uses `typography.body.*`; motion uses `motion.*` tokens.
|
|
61
|
+
*
|
|
62
|
+
* @element oh-accordion
|
|
63
|
+
* @slot item-N - The content of the item at index N (item-0 is the first)
|
|
64
|
+
*/
|
|
34
65
|
let OhAccordion = class OhAccordion extends OhElement {
|
|
35
66
|
constructor() {
|
|
36
67
|
super(...arguments);
|
|
68
|
+
/**
|
|
69
|
+
* The sections: { heading, hiddenText?, open? }. In HTML, a JSON array.
|
|
70
|
+
* Each item's content is a child with slot="item-<index>".
|
|
71
|
+
*/
|
|
37
72
|
this.items = [];
|
|
73
|
+
/** subtle (inline) or standout (boxed) */
|
|
38
74
|
this.variant = "subtle";
|
|
75
|
+
/** The heading level of each item's trigger, to fit the page's outline */
|
|
39
76
|
this.headingLevel = 3;
|
|
40
77
|
this._expandedItems = new Set();
|
|
41
78
|
}
|
|
@@ -43,7 +80,7 @@ let OhAccordion = class OhAccordion extends OhElement {
|
|
|
43
80
|
baseStyles,
|
|
44
81
|
css `
|
|
45
82
|
/* ═══════════════════════════════════════════════════════════════
|
|
46
|
-
|
|
83
|
+
ACCORDION
|
|
47
84
|
Subtle (inline) • Standout (boxed) • Accessible
|
|
48
85
|
═══════════════════════════════════════════════════════════════ */
|
|
49
86
|
|
|
@@ -68,7 +105,8 @@ let OhAccordion = class OhAccordion extends OhElement {
|
|
|
68
105
|
}
|
|
69
106
|
|
|
70
107
|
.accordion--subtle .accordion-item {
|
|
71
|
-
border-bottom: var(--oh-stroke-divider) solid
|
|
108
|
+
border-bottom: var(--oh-stroke-divider) solid
|
|
109
|
+
var(--oh-color-border-subtle);
|
|
72
110
|
}
|
|
73
111
|
|
|
74
112
|
.accordion--subtle .accordion-item:last-child {
|
|
@@ -88,12 +126,12 @@ let OhAccordion = class OhAccordion extends OhElement {
|
|
|
88
126
|
gap: var(--oh-spacing-2);
|
|
89
127
|
width: 100%;
|
|
90
128
|
padding: var(--oh-spacing-3) 0;
|
|
91
|
-
|
|
129
|
+
|
|
92
130
|
background: transparent;
|
|
93
131
|
border: none;
|
|
94
132
|
cursor: pointer;
|
|
95
133
|
text-align: left;
|
|
96
|
-
|
|
134
|
+
|
|
97
135
|
font-family: var(--oh-typography-body-font-family);
|
|
98
136
|
font-size: var(--oh-typography-body-base-font-size);
|
|
99
137
|
font-weight: var(--oh-typography-label-base-font-weight);
|
|
@@ -104,14 +142,14 @@ let OhAccordion = class OhAccordion extends OhElement {
|
|
|
104
142
|
outline: none;
|
|
105
143
|
}
|
|
106
144
|
|
|
107
|
-
/* Text span with
|
|
145
|
+
/* Text span with the link underline (decoration.underline*) */
|
|
108
146
|
.accordion--subtle .accordion-text {
|
|
109
147
|
position: relative;
|
|
110
148
|
padding-bottom: var(--oh-decoration-underline-thickness);
|
|
111
149
|
}
|
|
112
150
|
|
|
113
151
|
.accordion--subtle .accordion-text::after {
|
|
114
|
-
content:
|
|
152
|
+
content: "";
|
|
115
153
|
position: absolute;
|
|
116
154
|
left: 0;
|
|
117
155
|
bottom: 0;
|
|
@@ -127,14 +165,17 @@ let OhAccordion = class OhAccordion extends OhElement {
|
|
|
127
165
|
background-size: 100% 100%;
|
|
128
166
|
background-repeat: no-repeat;
|
|
129
167
|
transform-origin: right;
|
|
130
|
-
transition: transform var(--oh-motion-relaxed)
|
|
168
|
+
transition: transform var(--oh-motion-relaxed)
|
|
169
|
+
var(--oh-motion-ease-gentle);
|
|
131
170
|
}
|
|
132
171
|
|
|
133
172
|
.accordion--subtle .accordion-trigger:hover .accordion-text::after {
|
|
134
173
|
transform: scaleX(0);
|
|
135
174
|
}
|
|
136
175
|
|
|
137
|
-
.accordion--subtle
|
|
176
|
+
.accordion--subtle
|
|
177
|
+
.accordion-trigger:focus-visible
|
|
178
|
+
.accordion-text::after {
|
|
138
179
|
background-image: none;
|
|
139
180
|
background-color: var(--oh-color-brand-primary);
|
|
140
181
|
height: var(--oh-decoration-underline-thickness);
|
|
@@ -147,7 +188,7 @@ let OhAccordion = class OhAccordion extends OhElement {
|
|
|
147
188
|
}
|
|
148
189
|
|
|
149
190
|
/* ═══════════════════════════════════════════════════════════════
|
|
150
|
-
STANDOUT VARIANT — Boxed
|
|
191
|
+
STANDOUT VARIANT — Boxed; shadow moves by lift.hoverMd on hover
|
|
151
192
|
═══════════════════════════════════════════════════════════════ */
|
|
152
193
|
|
|
153
194
|
.accordion--standout {
|
|
@@ -159,18 +200,20 @@ let OhAccordion = class OhAccordion extends OhElement {
|
|
|
159
200
|
border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
|
|
160
201
|
border-radius: var(--oh-shape-container);
|
|
161
202
|
overflow: hidden;
|
|
162
|
-
|
|
203
|
+
|
|
163
204
|
/* Base shadow and lift animation */
|
|
164
|
-
box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md)
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
205
|
+
box-shadow: var(--oh-elevation-offset-md) var(--oh-elevation-offset-md)
|
|
206
|
+
0 0 var(--oh-elevation-color-neutral);
|
|
207
|
+
transition:
|
|
208
|
+
transform var(--oh-motion-snappy) var(--oh-motion-ease-emphasized),
|
|
209
|
+
box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-emphasized);
|
|
168
210
|
}
|
|
169
211
|
|
|
170
212
|
/* Lift whole accordion only when trigger is hovered */
|
|
171
213
|
.accordion--standout .accordion-item:has(.accordion-trigger:hover) {
|
|
172
214
|
transform: translate(var(--oh-lift-hover-md), var(--oh-lift-hover-md));
|
|
173
|
-
box-shadow: var(--oh-elevation-offset-xl) var(--oh-elevation-offset-xl)
|
|
215
|
+
box-shadow: var(--oh-elevation-offset-xl) var(--oh-elevation-offset-xl)
|
|
216
|
+
0 0 var(--oh-elevation-color-neutral-hover);
|
|
174
217
|
}
|
|
175
218
|
|
|
176
219
|
.accordion--standout .accordion-item[data-expanded="true"] {
|
|
@@ -183,12 +226,12 @@ let OhAccordion = class OhAccordion extends OhElement {
|
|
|
183
226
|
gap: var(--oh-spacing-3);
|
|
184
227
|
width: 100%;
|
|
185
228
|
padding: var(--oh-spacing-4);
|
|
186
|
-
|
|
229
|
+
|
|
187
230
|
background: transparent;
|
|
188
231
|
border: none;
|
|
189
232
|
cursor: pointer;
|
|
190
233
|
text-align: left;
|
|
191
|
-
|
|
234
|
+
|
|
192
235
|
font-family: var(--oh-typography-body-font-family);
|
|
193
236
|
font-size: var(--oh-typography-body-base-font-size);
|
|
194
237
|
font-weight: var(--oh-typography-control-font-weight);
|
|
@@ -204,14 +247,14 @@ let OhAccordion = class OhAccordion extends OhElement {
|
|
|
204
247
|
text-underline-offset: 3px;
|
|
205
248
|
}
|
|
206
249
|
|
|
207
|
-
/* Text span for standout
|
|
250
|
+
/* Text span for standout: the underline appears on hover */
|
|
208
251
|
.accordion--standout .accordion-text {
|
|
209
252
|
position: relative;
|
|
210
253
|
padding-bottom: var(--oh-decoration-underline-thickness);
|
|
211
254
|
}
|
|
212
255
|
|
|
213
256
|
.accordion--standout .accordion-text::after {
|
|
214
|
-
content:
|
|
257
|
+
content: "";
|
|
215
258
|
position: absolute;
|
|
216
259
|
left: 0;
|
|
217
260
|
bottom: 0;
|
|
@@ -228,7 +271,8 @@ let OhAccordion = class OhAccordion extends OhElement {
|
|
|
228
271
|
background-repeat: no-repeat;
|
|
229
272
|
transform-origin: left;
|
|
230
273
|
transform: scaleX(0);
|
|
231
|
-
transition: transform var(--oh-motion-relaxed)
|
|
274
|
+
transition: transform var(--oh-motion-relaxed)
|
|
275
|
+
var(--oh-motion-ease-gentle);
|
|
232
276
|
}
|
|
233
277
|
|
|
234
278
|
.accordion--standout .accordion-trigger:hover .accordion-text::after {
|
|
@@ -249,7 +293,8 @@ let OhAccordion = class OhAccordion extends OhElement {
|
|
|
249
293
|
flex-shrink: 0;
|
|
250
294
|
width: 1rem;
|
|
251
295
|
height: 1rem;
|
|
252
|
-
transition: transform var(--oh-motion-gentle)
|
|
296
|
+
transition: transform var(--oh-motion-gentle)
|
|
297
|
+
var(--oh-motion-ease-gentle);
|
|
253
298
|
}
|
|
254
299
|
|
|
255
300
|
.accordion--subtle .accordion-icon {
|
|
@@ -282,6 +327,19 @@ let OhAccordion = class OhAccordion extends OhElement {
|
|
|
282
327
|
overflow: hidden;
|
|
283
328
|
}
|
|
284
329
|
|
|
330
|
+
/* Heading text for screen readers only */
|
|
331
|
+
.visually-hidden {
|
|
332
|
+
position: absolute;
|
|
333
|
+
width: 1px;
|
|
334
|
+
height: 1px;
|
|
335
|
+
padding: 0;
|
|
336
|
+
margin: -1px;
|
|
337
|
+
overflow: hidden;
|
|
338
|
+
clip: rect(0, 0, 0, 0);
|
|
339
|
+
white-space: nowrap;
|
|
340
|
+
border: 0;
|
|
341
|
+
}
|
|
342
|
+
|
|
285
343
|
/* ═══════════════════════════════════════════════════════════════
|
|
286
344
|
REDUCED MOTION
|
|
287
345
|
═══════════════════════════════════════════════════════════════ */
|
|
@@ -293,13 +351,19 @@ let OhAccordion = class OhAccordion extends OhElement {
|
|
|
293
351
|
.accordion--subtle .accordion-text::after {
|
|
294
352
|
transition-duration: 0.01ms !important;
|
|
295
353
|
}
|
|
296
|
-
|
|
354
|
+
|
|
297
355
|
.accordion--standout .accordion-item:has(.accordion-trigger:hover) {
|
|
298
356
|
transform: none !important;
|
|
299
357
|
}
|
|
300
358
|
}
|
|
301
359
|
`,
|
|
302
360
|
]; }
|
|
361
|
+
willUpdate(changed) {
|
|
362
|
+
// New items start open or closed as each one says
|
|
363
|
+
if (changed.has("items")) {
|
|
364
|
+
this._expandedItems = new Set((this.items ?? []).flatMap((item, index) => (item.open ? [index] : [])));
|
|
365
|
+
}
|
|
366
|
+
}
|
|
303
367
|
_toggleItem(index) {
|
|
304
368
|
if (this._expandedItems.has(index)) {
|
|
305
369
|
this._expandedItems.delete(index);
|
|
@@ -345,6 +409,11 @@ let OhAccordion = class OhAccordion extends OhElement {
|
|
|
345
409
|
<path d="M6 4L10 8L6 12" />
|
|
346
410
|
</svg>
|
|
347
411
|
<span class="accordion-text">${item.heading}</span>
|
|
412
|
+
${item.hiddenText
|
|
413
|
+
? html `<span class="visually-hidden">
|
|
414
|
+
${item.hiddenText}</span
|
|
415
|
+
>`
|
|
416
|
+
: nothing}
|
|
348
417
|
</button>
|
|
349
418
|
</${headingTag}>
|
|
350
419
|
<div
|
|
@@ -353,11 +422,12 @@ let OhAccordion = class OhAccordion extends OhElement {
|
|
|
353
422
|
role="region"
|
|
354
423
|
aria-labelledby=${triggerId}
|
|
355
424
|
aria-hidden=${!isExpanded}
|
|
425
|
+
?inert=${!isExpanded}
|
|
356
426
|
data-expanded=${isExpanded ? "true" : "false"}
|
|
357
427
|
>
|
|
358
428
|
<div class="accordion-panel-inner">
|
|
359
429
|
<div class="accordion-content">
|
|
360
|
-
|
|
430
|
+
<slot name=${`item-${index}`}></slot>
|
|
361
431
|
</div>
|
|
362
432
|
</div>
|
|
363
433
|
</div>
|
package/dist/oh-accordion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-accordion.js","sourceRoot":"","sources":["../src/oh-accordion.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-accordion.js","sourceRoot":"","sources":["../src/oh-accordion.ts"],"names":[],"mappings":"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"}
|
package/dist/oh-alert.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* oh-alert
|
|
3
3
|
*
|
|
4
|
-
* A
|
|
5
|
-
* Subtle backgrounds only, supports rich content including links.
|
|
4
|
+
* A message box for feedback, optionally dismissible, that can hold links.
|
|
6
5
|
*
|
|
7
6
|
* DESIGN DECISIONS:
|
|
8
7
|
* ─────────────────
|
|
9
8
|
* 1. SUBTLE ONLY
|
|
10
|
-
* -
|
|
9
|
+
* - Background is the variant's color.feedback.*Subtle token; border and
|
|
10
|
+
* icon use color.feedback.*; text stays color.text.primary
|
|
11
11
|
* - Matches badge subtle variants
|
|
12
12
|
*
|
|
13
13
|
* 2. DISMISSIBLE
|
|
@@ -19,14 +19,32 @@
|
|
|
19
19
|
* - Default slot for flexible content
|
|
20
20
|
*
|
|
21
21
|
* 4. ACCESSIBLE
|
|
22
|
-
* - role="alert"
|
|
23
|
-
* - Close button has
|
|
24
|
-
* - Links within
|
|
25
|
-
*
|
|
26
|
-
* @element oh-alert
|
|
22
|
+
* - role="alert" only when live is set (alerts added after first render)
|
|
23
|
+
* - Close button has a visible text label
|
|
24
|
+
* - Links within take the variant's feedback colour
|
|
27
25
|
*/
|
|
28
26
|
import { OhElement } from "./base.js";
|
|
29
27
|
export type AlertVariant = "success" | "error" | "warning" | "info";
|
|
28
|
+
/**
|
|
29
|
+
* A message box that tells the user about the result of an action or something that needs their attention.
|
|
30
|
+
*
|
|
31
|
+
* **Use it for** feedback on what just happened (saved, failed) or a notice about the page or account, near the content it's about. **Don't use it for** a short status label (use `oh-badge`); for a field's validation error (use the field's own error message); or for a message that must interrupt the user (use `oh-modal`).
|
|
32
|
+
*
|
|
33
|
+
* **Variants:** `info` (default), `success`, `warning`, `error`, each by its feedback role. Each has its own icon, so the meaning isn't carried by colour alone.
|
|
34
|
+
*
|
|
35
|
+
* **Behaviour:** with `dismissible`, a "Close" button follows the content; selecting it fires `oh-dismiss` and sets `hidden` on the alert. Content goes in the default slot and can include links.
|
|
36
|
+
*
|
|
37
|
+
* **Accessibility:** set `live` only for an alert added after the page has rendered (e.g. after submit); it adds `role="alert"` so screen readers announce it. Leave it off for alerts present on page load. Icons are `aria-hidden`; put the meaning in the text. Links show a solid outline in the current text colour on focus; the close button shows an underline.
|
|
38
|
+
*
|
|
39
|
+
* **Look:** set by tokens. Each variant uses `color.feedback.<variant>Subtle` for the background and `color.feedback.<variant>` for the border, icon and links; text is `color.text.primary`. `stroke.control` sets the border, `shape.container` the corners, `typography.body.*` the text, and `decoration.underlineThickness`, `underlineDash` and `underlinePeriod` the link underline. The close button uses `closeButton.backgroundHover`, `closeButton.shadowHover`, `elevation.offset.*`, `lift.*` and `shape.compact`.
|
|
40
|
+
*
|
|
41
|
+
* @element oh-alert
|
|
42
|
+
* @slot - The message. Can include links.
|
|
43
|
+
* @csspart alert - The alert box.
|
|
44
|
+
* @csspart content - The message wrapper.
|
|
45
|
+
* @csspart close - The close button (only when `dismissible`).
|
|
46
|
+
* @fires oh-dismiss - When the close button is selected, before the alert hides.
|
|
47
|
+
*/
|
|
30
48
|
export declare class OhAlert extends OhElement {
|
|
31
49
|
static styles: import("lit").CSSResult[];
|
|
32
50
|
variant: AlertVariant;
|
package/dist/oh-alert.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-alert.d.ts","sourceRoot":"","sources":["../src/oh-alert.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-alert.d.ts","sourceRoot":"","sources":["../src/oh-alert.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BA0NpB;IAGF,OAAO,EAAE,YAAY,CAAU;IAG/B,WAAW,UAAS;IAEpB;;;OAGG;IAEH,IAAI,UAAS;IAEb,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,QAAQ;IAkEhB,MAAM;CAoCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
|