@orange-halo/components 2.1.0 → 2.2.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 +369 -0
- 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 +3 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/oh-accordion.d.ts.map +1 -1
- package/dist/oh-accordion.js +24 -16
- package/dist/oh-accordion.js.map +1 -1
- package/dist/oh-alert.d.ts.map +1 -1
- package/dist/oh-alert.js +64 -22
- package/dist/oh-alert.js.map +1 -1
- package/dist/oh-badge.d.ts.map +1 -1
- package/dist/oh-badge.js +3 -3
- package/dist/oh-badge.js.map +1 -1
- package/dist/oh-breadcrumb.d.ts.map +1 -1
- package/dist/oh-breadcrumb.js +27 -8
- package/dist/oh-breadcrumb.js.map +1 -1
- 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 +70 -38
- package/dist/oh-button.js.map +1 -1
- package/dist/oh-card.d.ts.map +1 -1
- package/dist/oh-card.js +42 -23
- package/dist/oh-card.js.map +1 -1
- package/dist/oh-checkbox-group.d.ts.map +1 -1
- package/dist/oh-checkbox-group.js +41 -18
- package/dist/oh-checkbox-group.js.map +1 -1
- package/dist/oh-checkbox.d.ts.map +1 -1
- package/dist/oh-checkbox.js +47 -20
- package/dist/oh-checkbox.js.map +1 -1
- package/dist/oh-drawer.d.ts.map +1 -1
- package/dist/oh-drawer.js +21 -10
- package/dist/oh-drawer.js.map +1 -1
- package/dist/oh-grid.d.ts.map +1 -1
- package/dist/oh-grid.js +1 -2
- package/dist/oh-grid.js.map +1 -1
- package/dist/oh-hero.d.ts.map +1 -1
- package/dist/oh-hero.js +3 -1
- package/dist/oh-hero.js.map +1 -1
- package/dist/oh-icon.d.ts.map +1 -1
- package/dist/oh-icon.js +6 -4
- package/dist/oh-icon.js.map +1 -1
- package/dist/oh-input.d.ts +9 -4
- package/dist/oh-input.d.ts.map +1 -1
- package/dist/oh-input.js +35 -18
- package/dist/oh-input.js.map +1 -1
- package/dist/oh-link.d.ts.map +1 -1
- package/dist/oh-link.js +36 -9
- package/dist/oh-link.js.map +1 -1
- package/dist/oh-modal.d.ts +6 -0
- package/dist/oh-modal.d.ts.map +1 -1
- package/dist/oh-modal.js +54 -24
- package/dist/oh-modal.js.map +1 -1
- package/dist/oh-navbar.d.ts.map +1 -1
- package/dist/oh-navbar.js +2 -1
- package/dist/oh-navbar.js.map +1 -1
- package/dist/oh-progress.d.ts.map +1 -1
- package/dist/oh-progress.js +4 -2
- package/dist/oh-progress.js.map +1 -1
- package/dist/oh-radio-group.d.ts.map +1 -1
- package/dist/oh-radio-group.js +53 -22
- package/dist/oh-radio-group.js.map +1 -1
- package/dist/oh-radio.d.ts.map +1 -1
- package/dist/oh-radio.js +49 -21
- package/dist/oh-radio.js.map +1 -1
- package/dist/oh-select.d.ts +1 -0
- package/dist/oh-select.d.ts.map +1 -1
- package/dist/oh-select.js +77 -42
- package/dist/oh-select.js.map +1 -1
- package/dist/oh-skip-link.d.ts.map +1 -1
- package/dist/oh-skip-link.js +7 -9
- package/dist/oh-skip-link.js.map +1 -1
- package/dist/oh-tabs.d.ts.map +1 -1
- package/dist/oh-tabs.js +25 -16
- package/dist/oh-tabs.js.map +1 -1
- package/dist/oh-textarea.d.ts +98 -0
- package/dist/oh-textarea.d.ts.map +1 -0
- package/dist/oh-textarea.js +370 -0
- package/dist/oh-textarea.js.map +1 -0
- package/dist/oh-toggle.d.ts.map +1 -1
- package/dist/oh-toggle.js +26 -11
- package/dist/oh-toggle.js.map +1 -1
- package/dist/styles/typography.js +1 -1
- package/package.json +7 -3
package/dist/oh-grid.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-grid.d.ts","sourceRoot":"","sources":["../src/oh-grid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,UAAU,GAAG,WAAW,CAAC;AAC3E,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhE,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,4BA8FpB;IAGF,OAAO,EAAE,WAAW,CAAc;IAGlC,GAAG,EAAE,OAAO,CAAQ;IAGpB,QAAQ,SAAW;IAGnB,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAa;IAEtD,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"oh-grid.d.ts","sourceRoot":"","sources":["../src/oh-grid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,UAAU,GAAG,WAAW,CAAC;AAC3E,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhE,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,4BA8FpB;IAGF,OAAO,EAAE,WAAW,CAAc;IAGlC,GAAG,EAAE,OAAO,CAAQ;IAGpB,QAAQ,SAAW;IAGnB,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAa;IAEtD,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAaxD,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
|
package/dist/oh-grid.js
CHANGED
|
@@ -135,8 +135,7 @@ let OhGrid = class OhGrid extends OhElement {
|
|
|
135
135
|
updated(changedProperties) {
|
|
136
136
|
super.updated(changedProperties);
|
|
137
137
|
// Handle auto-fit and auto-fill with dynamic min-width
|
|
138
|
-
if (changedProperties.has("columns") ||
|
|
139
|
-
changedProperties.has("minWidth")) {
|
|
138
|
+
if (changedProperties.has("columns") || changedProperties.has("minWidth")) {
|
|
140
139
|
if (this.columns === "auto-fit" || this.columns === "auto-fill") {
|
|
141
140
|
this.style.gridTemplateColumns = `repeat(${this.columns}, minmax(${this.minWidth}, 1fr))`;
|
|
142
141
|
}
|
package/dist/oh-grid.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-grid.js","sourceRoot":"","sources":["../src/oh-grid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;;;;;;;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;AAM3C,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QAkGL,YAAO,GAAgB,UAAU,CAAC;QAGlC,QAAG,GAAY,IAAI,CAAC;QAGpB,aAAQ,GAAG,OAAO,CAAC;QAGnB,eAAU,GAA2C,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"oh-grid.js","sourceRoot":"","sources":["../src/oh-grid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;;;;;;;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;AAM3C,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QAkGL,YAAO,GAAgB,UAAU,CAAC;QAGlC,QAAG,GAAY,IAAI,CAAC;QAGpB,aAAQ,GAAG,OAAO,CAAC;QAGnB,eAAU,GAA2C,SAAS,CAAC;IAkBjE,CAAC;aA5HiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2FF;KACF,AA9FqB,CA8FpB;IAcO,OAAO,CAAC,iBAAuC;QACtD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,uDAAuD;QACvD,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YAC1E,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;gBAChE,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,UAAU,IAAI,CAAC,OAAO,YAAY,IAAI,CAAC,QAAQ,SAAS,CAAC;YAC5F,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,EAAE,CAAC;YACtC,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AA1BD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACR;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCACtB;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;wCAChC;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACL;AA3GpD,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA6HlB"}
|
package/dist/oh-hero.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-hero.d.ts","sourceRoot":"","sources":["../src/oh-hero.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BA+IpB;IAGF,OAAO,EAAE,WAAW,CAAa;IAGjC,IAAI,EAAE,QAAQ,CAAQ;IAGtB,OAAO,SAAM;IAGb,QAAQ,SAAM;IAGd,WAAW,SAAM;IAGjB,WAAW,SAAK;IAGhB,UAAU,SAAK;IAEN,MAAM;
|
|
1
|
+
{"version":3,"file":"oh-hero.d.ts","sourceRoot":"","sources":["../src/oh-hero.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAa,UAAU,EAAW,MAAM,KAAK,CAAC;AAGrD,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BA+IpB;IAGF,OAAO,EAAE,WAAW,CAAa;IAGjC,IAAI,EAAE,QAAQ,CAAQ;IAGtB,OAAO,SAAM;IAGb,QAAQ,SAAM;IAGd,WAAW,SAAM;IAGjB,WAAW,SAAK;IAGhB,UAAU,SAAK;IAEN,MAAM;CA8ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
|
package/dist/oh-hero.js
CHANGED
|
@@ -182,7 +182,9 @@ let OhHero = class OhHero extends LitElement {
|
|
|
182
182
|
<div class="hero__container">
|
|
183
183
|
<h1 class="hero__journey-heading">
|
|
184
184
|
${this.journeyName
|
|
185
|
-
? html `<span class="hero__journey-name"
|
|
185
|
+
? html `<span class="hero__journey-name"
|
|
186
|
+
>${this.journeyName}</span
|
|
187
|
+
>`
|
|
186
188
|
: nothing}
|
|
187
189
|
<span class="hero__page-name">${this.heading}</span>
|
|
188
190
|
</h1>
|
package/dist/oh-hero.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-hero.js","sourceRoot":"","sources":["../src/oh-hero.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,kBAAkB,CAAC;AAMnB,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAmJL,YAAO,GAAgB,SAAS,CAAC;QAGjC,SAAI,GAAa,IAAI,CAAC;QAGtB,YAAO,GAAG,EAAE,CAAC;QAGb,aAAQ,GAAG,EAAE,CAAC;QAGd,gBAAW,GAAG,EAAE,CAAC;QAGjB,gBAAW,GAAG,CAAC,CAAC;QAGhB,eAAU,GAAG,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"oh-hero.js","sourceRoot":"","sources":["../src/oh-hero.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;;;;;;;AAEH,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,kBAAkB,CAAC;AAMnB,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QAmJL,YAAO,GAAgB,SAAS,CAAC;QAGjC,SAAI,GAAa,IAAI,CAAC;QAGtB,YAAO,GAAG,EAAE,CAAC;QAGb,aAAQ,GAAG,EAAE,CAAC;QAGd,gBAAW,GAAG,EAAE,CAAC;QAGjB,gBAAW,GAAG,CAAC,CAAC;QAGhB,eAAU,GAAG,CAAC,CAAC;IAgDjB,CAAC;aApNiB,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+I3B,AA/IqB,CA+IpB;IAuBO,MAAM;QACb,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC/B,MAAM,aAAa,GAAG,QAAQ,IAAI,CAAC,WAAW,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC;YACvE,OAAO,IAAI,CAAA;;;;gBAID,IAAI,CAAC,WAAW;gBAChB,CAAC,CAAC,IAAI,CAAA;uBACC,IAAI,CAAC,WAAW;oBACnB;gBACJ,CAAC,CAAC,OAAO;8CACqB,IAAI,CAAC,OAAO;;;;yBAIjC,IAAI,CAAC,WAAW;uBAClB,IAAI,CAAC,UAAU;wBACd,aAAa;;;;;;;;;OAS9B,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,OAAO,OAAO;YACtD,CAAC,CAAC,OAAO;YACT,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,6BAA6B,IAAI,CAAC,QAAQ,MAAM;YACtD,CAAC,CAAC,OAAO;;;;;;KAMhB,CAAC;IACJ,CAAC;;AAjED;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACT;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCACpB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CACrC;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;2CACtC;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;0CACtC;AArKJ,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAqNlB"}
|
package/dist/oh-icon.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-icon.d.ts","sourceRoot":"","sources":["../src/oh-icon.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,QAAQ,GAEhB,SAAS,GACT,QAAQ,GACR,UAAU,GACV,WAAW,GACX,SAAS,GACT,UAAU,GACV,OAAO,GACP,UAAU,GAEV,aAAa,GACb,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,eAAe,GACf,cAAc,GACd,YAAY,GACZ,cAAc,GACd,eAAe,GAEf,OAAO,GACP,MAAM,GACN,OAAO,GACP,OAAO,GACP,QAAQ,GACR,MAAM,GACN,UAAU,GACV,OAAO,GACP,SAAS,GAET,MAAM,GACN,SAAS,GACT,OAAO,GACP,SAAS,CAAC;AAEd,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAqIjD,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"oh-icon.d.ts","sourceRoot":"","sources":["../src/oh-icon.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAEzC,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,QAAQ,GAEhB,SAAS,GACT,QAAQ,GACR,UAAU,GACV,WAAW,GACX,SAAS,GACT,UAAU,GACV,OAAO,GACP,UAAU,GAEV,aAAa,GACb,YAAY,GACZ,UAAU,GACV,YAAY,GACZ,eAAe,GACf,cAAc,GACd,YAAY,GACZ,cAAc,GACd,eAAe,GAEf,OAAO,GACP,MAAM,GACN,OAAO,GACP,OAAO,GACP,QAAQ,GACR,MAAM,GACN,UAAU,GACV,OAAO,GACP,SAAS,GAET,MAAM,GACN,SAAS,GACT,OAAO,GACP,SAAS,CAAC;AAEd,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAqIjD,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,4BA+FpB;IAGF,IAAI,EAAE,QAAQ,CAAU;IAGxB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAGhB,OAAO,UAAS;IAGhB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,MAAM;CA6CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
|
package/dist/oh-icon.js
CHANGED
|
@@ -218,14 +218,15 @@ let OhIcon = class OhIcon extends OhElement {
|
|
|
218
218
|
border-radius: var(--oh-shape-compact);
|
|
219
219
|
padding: var(--oh-spacing-2);
|
|
220
220
|
margin: calc(-1 * var(--oh-spacing-2));
|
|
221
|
-
transition:
|
|
221
|
+
transition:
|
|
222
222
|
transform var(--oh-motion-snappy) var(--oh-motion-ease-gentle),
|
|
223
223
|
box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-gentle);
|
|
224
224
|
}
|
|
225
225
|
|
|
226
226
|
.icon-link:hover {
|
|
227
227
|
transform: translate(var(--oh-lift-hover-md), var(--oh-lift-hover-md));
|
|
228
|
-
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
|
|
228
|
+
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
|
|
229
|
+
0 0 var(--oh-color-border-default);
|
|
229
230
|
}
|
|
230
231
|
|
|
231
232
|
.icon-link:active {
|
|
@@ -243,7 +244,8 @@ let OhIcon = class OhIcon extends OhElement {
|
|
|
243
244
|
|
|
244
245
|
/* Inverse link styles (for dark/colored backgrounds) */
|
|
245
246
|
:host([inverse]) .icon-link:hover {
|
|
246
|
-
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
|
|
247
|
+
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
|
|
248
|
+
0 0 var(--oh-color-text-on-accent);
|
|
247
249
|
}
|
|
248
250
|
|
|
249
251
|
:host([inverse]) .icon-link:focus-visible {
|
|
@@ -268,7 +270,7 @@ let OhIcon = class OhIcon extends OhElement {
|
|
|
268
270
|
<svg
|
|
269
271
|
viewBox=${iconData.viewBox}
|
|
270
272
|
fill="currentColor"
|
|
271
|
-
aria-hidden=${this.href ? "true" :
|
|
273
|
+
aria-hidden=${this.href ? "true" : this.label ? "false" : "true"}
|
|
272
274
|
role=${!this.href && this.label ? "img" : nothing}
|
|
273
275
|
aria-label=${!this.href && this.label ? this.label : nothing}
|
|
274
276
|
>
|
package/dist/oh-icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-icon.js","sourceRoot":"","sources":["../src/oh-icon.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"oh-icon.js","sourceRoot":"","sources":["../src/oh-icon.ts"],"names":[],"mappings":"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"}
|
package/dist/oh-input.d.ts
CHANGED
|
@@ -16,10 +16,9 @@
|
|
|
16
16
|
* - Feels pressed into the surface
|
|
17
17
|
* - Opposite of button's outset sticker effect
|
|
18
18
|
*
|
|
19
|
-
* 3. FOCUS
|
|
20
|
-
* -
|
|
21
|
-
* -
|
|
22
|
-
* - Border turns brand orange
|
|
19
|
+
* 3. FOCUS THICKENS
|
|
20
|
+
* - An inset ring in focus.ringColor thickens the border inward
|
|
21
|
+
* - Background switches to color.surface.highlight
|
|
23
22
|
* - Clear visual hierarchy
|
|
24
23
|
*
|
|
25
24
|
* @element oh-input
|
|
@@ -37,6 +36,12 @@ export declare class OhInput extends OhElement {
|
|
|
37
36
|
helperText: string;
|
|
38
37
|
errorText: string;
|
|
39
38
|
required: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* The input's purpose, for autofill and assistive tech (WCAG 1.3.5):
|
|
41
|
+
* an HTML autocomplete token such as "email", "name" or "tel".
|
|
42
|
+
* Passed to the inner <input>.
|
|
43
|
+
*/
|
|
44
|
+
autocomplete?: string;
|
|
40
45
|
/**
|
|
41
46
|
* Force a visual state (for documentation/Figma sync only)
|
|
42
47
|
* Values: 'hover' | 'focus'
|
package/dist/oh-input.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-input.d.ts","sourceRoot":"","sources":["../src/oh-input.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-input.d.ts","sourceRoot":"","sources":["../src/oh-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,KAAK,GACL,KAAK,CAAC;AACV,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvD,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BAuKpB;IAGF,IAAI,EAAE,SAAS,CAAU;IAGzB,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,KAAK,SAAM;IAGX,UAAU,SAAM;IAGhB,SAAS,SAAM;IAGf,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IAEH,UAAU,EAAE,UAAU,CAAa;IAGnC,OAAO,CAAC,MAAM,CAAoB;IAElC,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IAIrB,KAAK;IAIL,IAAI;IAIJ;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,MAAM;CAqEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
|
package/dist/oh-input.js
CHANGED
|
@@ -16,10 +16,9 @@
|
|
|
16
16
|
* - Feels pressed into the surface
|
|
17
17
|
* - Opposite of button's outset sticker effect
|
|
18
18
|
*
|
|
19
|
-
* 3. FOCUS
|
|
20
|
-
* -
|
|
21
|
-
* -
|
|
22
|
-
* - Border turns brand orange
|
|
19
|
+
* 3. FOCUS THICKENS
|
|
20
|
+
* - An inset ring in focus.ringColor thickens the border inward
|
|
21
|
+
* - Background switches to color.surface.highlight
|
|
23
22
|
* - Clear visual hierarchy
|
|
24
23
|
*
|
|
25
24
|
* @element oh-input
|
|
@@ -96,18 +95,20 @@ let OhInput = class OhInput extends OhElement {
|
|
|
96
95
|
width: 100%;
|
|
97
96
|
font-family: var(--oh-typography-control-font-family);
|
|
98
97
|
color: var(--oh-color-text-primary);
|
|
99
|
-
|
|
98
|
+
|
|
100
99
|
/* Solid fill — no gradients */
|
|
101
100
|
background-color: var(--oh-color-surface-base);
|
|
102
|
-
|
|
101
|
+
|
|
103
102
|
/* Thick illustrative border (WCAG 3:1 compliant) */
|
|
104
|
-
border: var(--oh-input-base-border-width) solid
|
|
103
|
+
border: var(--oh-input-base-border-width) solid
|
|
104
|
+
var(--oh-color-border-emphasis);
|
|
105
105
|
border-radius: var(--oh-shape-control);
|
|
106
|
-
|
|
106
|
+
|
|
107
107
|
/* Inset offset shadow: pressed into page */
|
|
108
|
-
box-shadow: inset var(--oh-elevation-offset-md)
|
|
109
|
-
|
|
110
|
-
|
|
108
|
+
box-shadow: inset var(--oh-elevation-offset-md)
|
|
109
|
+
var(--oh-elevation-offset-md) 0 0 var(--oh-shadow-field);
|
|
110
|
+
|
|
111
|
+
transition:
|
|
111
112
|
border-color var(--oh-motion-snappy) ease,
|
|
112
113
|
box-shadow var(--oh-motion-snappy) ease,
|
|
113
114
|
background-color var(--oh-motion-quick) ease;
|
|
@@ -127,7 +128,7 @@ let OhInput = class OhInput extends OhElement {
|
|
|
127
128
|
outline: none;
|
|
128
129
|
background-color: var(--oh-color-surface-highlight);
|
|
129
130
|
border-color: var(--oh-focus-ring-color);
|
|
130
|
-
|
|
131
|
+
|
|
131
132
|
/* Inset ring + border, even on all sides */
|
|
132
133
|
box-shadow: inset 0 0 0 2px var(--oh-focus-ring-color);
|
|
133
134
|
}
|
|
@@ -150,7 +151,8 @@ let OhInput = class OhInput extends OhElement {
|
|
|
150
151
|
.input--error {
|
|
151
152
|
border-color: var(--oh-color-feedback-error);
|
|
152
153
|
background-color: var(--oh-color-feedback-error-subtle);
|
|
153
|
-
box-shadow: inset var(--oh-elevation-offset-md)
|
|
154
|
+
box-shadow: inset var(--oh-elevation-offset-md)
|
|
155
|
+
var(--oh-elevation-offset-md) 0 0 var(--oh-shadow-error);
|
|
154
156
|
}
|
|
155
157
|
|
|
156
158
|
.input--error:focus {
|
|
@@ -250,8 +252,8 @@ let OhInput = class OhInput extends OhElement {
|
|
|
250
252
|
<div class="input-wrapper">
|
|
251
253
|
${this.label
|
|
252
254
|
? html `
|
|
253
|
-
<label
|
|
254
|
-
class="label ${this.required ? "label--required" : ""}"
|
|
255
|
+
<label
|
|
256
|
+
class="label ${this.required ? "label--required" : ""}"
|
|
255
257
|
part="label"
|
|
256
258
|
for="input"
|
|
257
259
|
>
|
|
@@ -267,6 +269,7 @@ let OhInput = class OhInput extends OhElement {
|
|
|
267
269
|
type=${this.type}
|
|
268
270
|
.value=${this.value}
|
|
269
271
|
placeholder=${this.placeholder || nothing}
|
|
272
|
+
autocomplete=${this.autocomplete || nothing}
|
|
270
273
|
?required=${this.required}
|
|
271
274
|
aria-invalid=${hasError ? "true" : nothing}
|
|
272
275
|
aria-describedby=${helperContent ? "helper" : nothing}
|
|
@@ -282,14 +285,25 @@ let OhInput = class OhInput extends OhElement {
|
|
|
282
285
|
part="helper"
|
|
283
286
|
role=${this._announceError ? "alert" : nothing}
|
|
284
287
|
>
|
|
285
|
-
<svg
|
|
286
|
-
|
|
288
|
+
<svg
|
|
289
|
+
class="error-icon"
|
|
290
|
+
viewBox="0 0 20 20"
|
|
291
|
+
fill="currentColor"
|
|
292
|
+
aria-hidden="true"
|
|
293
|
+
>
|
|
294
|
+
<path
|
|
295
|
+
fill-rule="evenodd"
|
|
296
|
+
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
|
|
297
|
+
clip-rule="evenodd"
|
|
298
|
+
/>
|
|
287
299
|
</svg>
|
|
288
300
|
${this.errorText}
|
|
289
301
|
</span>
|
|
290
302
|
`
|
|
291
303
|
: this.helperText
|
|
292
|
-
? html `<span id="helper" class="helper" part="helper"
|
|
304
|
+
? html `<span id="helper" class="helper" part="helper"
|
|
305
|
+
>${this.helperText}</span
|
|
306
|
+
>`
|
|
293
307
|
: nothing}
|
|
294
308
|
</div>
|
|
295
309
|
`;
|
|
@@ -316,6 +330,9 @@ __decorate([
|
|
|
316
330
|
__decorate([
|
|
317
331
|
property({ type: Boolean, reflect: true })
|
|
318
332
|
], OhInput.prototype, "required", void 0);
|
|
333
|
+
__decorate([
|
|
334
|
+
property({ type: String })
|
|
335
|
+
], OhInput.prototype, "autocomplete", void 0);
|
|
319
336
|
__decorate([
|
|
320
337
|
property({ type: String, reflect: true, attribute: "force-state" })
|
|
321
338
|
], OhInput.prototype, "forceState", void 0);
|
package/dist/oh-input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-input.js","sourceRoot":"","sources":["../src/oh-input.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-input.js","sourceRoot":"","sources":["../src/oh-input.ts"],"names":[],"mappings":"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"}
|
package/dist/oh-link.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-link.d.ts","sourceRoot":"","sources":["../src/oh-link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,YAAY,CAAC;AAElD,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"oh-link.d.ts","sourceRoot":"","sources":["../src/oh-link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,YAAY,CAAC;AAElD,qBACa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,4BAuSpB;IAGF,IAAI,SAAM;IAGV,MAAM,SAAM;IAGZ,GAAG,SAAM;IAGT,OAAO,EAAE,WAAW,CAAY;IAGhC,KAAK,UAAS;IAGd,OAAO,UAAS;IAEhB,MAAM;CAyDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
|
package/dist/oh-link.js
CHANGED
|
@@ -76,7 +76,7 @@ let OhLink = class OhLink extends OhElement {
|
|
|
76
76
|
|
|
77
77
|
/* Dashed underline via pseudo-element (animatable) */
|
|
78
78
|
.link__text::after {
|
|
79
|
-
content:
|
|
79
|
+
content: "";
|
|
80
80
|
position: absolute;
|
|
81
81
|
left: 0;
|
|
82
82
|
right: 0;
|
|
@@ -291,7 +291,9 @@ let OhLink = class OhLink extends OhElement {
|
|
|
291
291
|
background-color: transparent;
|
|
292
292
|
}
|
|
293
293
|
|
|
294
|
-
:host([inverse])
|
|
294
|
+
:host([inverse])
|
|
295
|
+
.link--inline:focus:not(:focus-visible)
|
|
296
|
+
.link__text::after {
|
|
295
297
|
background: repeating-linear-gradient(
|
|
296
298
|
to right,
|
|
297
299
|
var(--oh-color-text-on-accent) 0,
|
|
@@ -313,7 +315,9 @@ let OhLink = class OhLink extends OhElement {
|
|
|
313
315
|
background-color: transparent;
|
|
314
316
|
}
|
|
315
317
|
|
|
316
|
-
:host([inverse])
|
|
318
|
+
:host([inverse])
|
|
319
|
+
.link--standalone:focus:not(:focus-visible)
|
|
320
|
+
.link__text::after {
|
|
317
321
|
background: repeating-linear-gradient(
|
|
318
322
|
to right,
|
|
319
323
|
var(--oh-color-text-on-accent) 0,
|
|
@@ -343,9 +347,7 @@ let OhLink = class OhLink extends OhElement {
|
|
|
343
347
|
"link--standalone": this.variant === "standalone",
|
|
344
348
|
});
|
|
345
349
|
// Auto-add rel="noopener noreferrer" for external links
|
|
346
|
-
const computedRel = this.target === "_blank" && !this.rel
|
|
347
|
-
? "noopener noreferrer"
|
|
348
|
-
: this.rel;
|
|
350
|
+
const computedRel = this.target === "_blank" && !this.rel ? "noopener noreferrer" : this.rel;
|
|
349
351
|
const isExternal = this.target === "_blank";
|
|
350
352
|
return html `
|
|
351
353
|
<a
|
|
@@ -355,11 +357,36 @@ let OhLink = class OhLink extends OhElement {
|
|
|
355
357
|
rel=${computedRel || nothing}
|
|
356
358
|
>
|
|
357
359
|
<span class="link__text"><slot></slot></span>${isExternal
|
|
358
|
-
? html `<svg
|
|
360
|
+
? html `<svg
|
|
361
|
+
class="link__external"
|
|
362
|
+
viewBox="0 0 20 20"
|
|
363
|
+
fill="currentColor"
|
|
364
|
+
aria-hidden="true"
|
|
365
|
+
>
|
|
366
|
+
<path
|
|
367
|
+
fill-rule="evenodd"
|
|
368
|
+
d="M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z"
|
|
369
|
+
clip-rule="evenodd"
|
|
370
|
+
/>
|
|
371
|
+
<path
|
|
372
|
+
fill-rule="evenodd"
|
|
373
|
+
d="M6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z"
|
|
374
|
+
clip-rule="evenodd"
|
|
375
|
+
/></svg
|
|
376
|
+
><span class="visually-hidden">(opens in new tab)</span>`
|
|
359
377
|
: nothing}${this.variant === "standalone" && this.arrow && !isExternal
|
|
360
378
|
? html `
|
|
361
|
-
<svg
|
|
362
|
-
|
|
379
|
+
<svg
|
|
380
|
+
class="link__arrow"
|
|
381
|
+
viewBox="0 0 20 20"
|
|
382
|
+
fill="currentColor"
|
|
383
|
+
aria-hidden="true"
|
|
384
|
+
>
|
|
385
|
+
<path
|
|
386
|
+
fill-rule="evenodd"
|
|
387
|
+
d="M3 10a.75.75 0 01.75-.75h10.638L10.23 5.29a.75.75 0 111.04-1.08l5.5 5.25a.75.75 0 010 1.08l-5.5 5.25a.75.75 0 11-1.04-1.08l4.158-3.96H3.75A.75.75 0 013 10z"
|
|
388
|
+
clip-rule="evenodd"
|
|
389
|
+
/>
|
|
363
390
|
</svg>
|
|
364
391
|
`
|
|
365
392
|
: nothing}
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;;;;;;;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;AAK3C,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;
|
|
1
|
+
{"version":3,"file":"oh-link.js","sourceRoot":"","sources":["../src/oh-link.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;;;;;;;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;AAK3C,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,SAAS;IAA9B;;QA2SL,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;aApXiB,WAAM,GAAG;QACvB,UAAU;QACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoSF;KACF,AAvSqB,CAuSpB;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;AA1TL,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAqXlB"}
|
package/dist/oh-modal.d.ts
CHANGED
|
@@ -29,6 +29,12 @@ export declare class OhModal extends OhElement {
|
|
|
29
29
|
static styles: import("lit").CSSResult[];
|
|
30
30
|
open: boolean;
|
|
31
31
|
heading: string;
|
|
32
|
+
/**
|
|
33
|
+
* Names the dialog when it has no visible heading. Use this rather than
|
|
34
|
+
* aria-label on the host, which isn't forwarded into the shadow root.
|
|
35
|
+
* A visible heading always wins.
|
|
36
|
+
*/
|
|
37
|
+
accessibleLabel?: string;
|
|
32
38
|
dismissible: boolean;
|
|
33
39
|
size: ModalSize;
|
|
34
40
|
private _previousActiveElement;
|
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;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAGlD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,
|
|
1
|
+
{"version":3,"file":"oh-modal.d.ts","sourceRoot":"","sources":["../src/oh-modal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAGlD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,qBACa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,4BAgPpB;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
|
@@ -62,16 +62,16 @@ let OhModal = class OhModal extends OhElement {
|
|
|
62
62
|
position: fixed;
|
|
63
63
|
inset: 0;
|
|
64
64
|
z-index: 1000;
|
|
65
|
-
|
|
65
|
+
|
|
66
66
|
/* Warm semi-transparent overlay */
|
|
67
67
|
background-color: var(--oh-modal-overlay);
|
|
68
|
-
|
|
68
|
+
|
|
69
69
|
/* Flexbox centering */
|
|
70
70
|
display: flex;
|
|
71
71
|
align-items: center;
|
|
72
72
|
justify-content: center;
|
|
73
73
|
padding: var(--oh-spacing-4);
|
|
74
|
-
|
|
74
|
+
|
|
75
75
|
/* Animation. Closing: fade, then hide once the fade ends. */
|
|
76
76
|
opacity: 0;
|
|
77
77
|
visibility: hidden;
|
|
@@ -100,21 +100,22 @@ let OhModal = class OhModal extends OhElement {
|
|
|
100
100
|
flex-direction: column;
|
|
101
101
|
max-height: calc(100vh - var(--oh-spacing-8));
|
|
102
102
|
max-width: 100%;
|
|
103
|
-
|
|
103
|
+
|
|
104
104
|
/* Warm surface */
|
|
105
105
|
background-color: var(--oh-color-surface-base);
|
|
106
|
-
|
|
106
|
+
|
|
107
107
|
/* Chunky border */
|
|
108
108
|
border: var(--oh-stroke-control) solid var(--oh-color-border-emphasis);
|
|
109
109
|
border-radius: var(--oh-shape-container);
|
|
110
|
-
|
|
110
|
+
|
|
111
111
|
/* Offset shadow — lifted surface */
|
|
112
|
-
box-shadow: var(--oh-elevation-offset-2xl)
|
|
113
|
-
|
|
112
|
+
box-shadow: var(--oh-elevation-offset-2xl)
|
|
113
|
+
var(--oh-elevation-offset-2xl) 0 0 var(--oh-shadow-overlay);
|
|
114
|
+
|
|
114
115
|
/* Animation */
|
|
115
116
|
transform: scale(0.95) translateY(10px);
|
|
116
117
|
opacity: 0;
|
|
117
|
-
transition:
|
|
118
|
+
transition:
|
|
118
119
|
transform var(--oh-motion-gentle) var(--oh-motion-ease-playful),
|
|
119
120
|
opacity var(--oh-motion-gentle) ease;
|
|
120
121
|
}
|
|
@@ -147,7 +148,8 @@ let OhModal = class OhModal extends OhElement {
|
|
|
147
148
|
justify-content: space-between;
|
|
148
149
|
gap: var(--oh-spacing-4);
|
|
149
150
|
padding: var(--oh-spacing-4) var(--oh-spacing-5);
|
|
150
|
-
border-bottom: var(--oh-stroke-control) solid
|
|
151
|
+
border-bottom: var(--oh-stroke-control) solid
|
|
152
|
+
var(--oh-color-border-subtle);
|
|
151
153
|
}
|
|
152
154
|
|
|
153
155
|
.modal-title {
|
|
@@ -168,20 +170,20 @@ let OhModal = class OhModal extends OhElement {
|
|
|
168
170
|
display: flex;
|
|
169
171
|
align-items: center;
|
|
170
172
|
gap: var(--oh-spacing-1);
|
|
171
|
-
|
|
173
|
+
|
|
172
174
|
padding: var(--oh-spacing-1) var(--oh-spacing-2);
|
|
173
|
-
|
|
175
|
+
|
|
174
176
|
font-family: var(--oh-typography-body-font-family);
|
|
175
177
|
font-size: var(--oh-typography-body-base-font-size);
|
|
176
178
|
font-weight: var(--oh-typography-label-base-font-weight);
|
|
177
|
-
|
|
179
|
+
|
|
178
180
|
background: transparent;
|
|
179
181
|
border: none;
|
|
180
182
|
border-radius: var(--oh-shape-compact);
|
|
181
183
|
cursor: pointer;
|
|
182
184
|
color: var(--oh-color-text-primary);
|
|
183
|
-
|
|
184
|
-
transition:
|
|
185
|
+
|
|
186
|
+
transition:
|
|
185
187
|
transform var(--oh-motion-snappy) var(--oh-motion-ease-playful),
|
|
186
188
|
box-shadow var(--oh-motion-snappy) var(--oh-motion-ease-playful),
|
|
187
189
|
background-color var(--oh-motion-quick) ease;
|
|
@@ -190,12 +192,14 @@ let OhModal = class OhModal extends OhElement {
|
|
|
190
192
|
.modal-close:hover {
|
|
191
193
|
background-color: var(--oh-close-button-background-hover);
|
|
192
194
|
transform: translate(var(--oh-lift-hover-md), var(--oh-lift-hover-md));
|
|
193
|
-
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
|
|
195
|
+
box-shadow: var(--oh-elevation-offset-lg) var(--oh-elevation-offset-lg)
|
|
196
|
+
0 0 var(--oh-close-button-shadow-hover);
|
|
194
197
|
}
|
|
195
198
|
|
|
196
199
|
.modal-close:active {
|
|
197
200
|
transform: translate(var(--oh-lift-press-sm), var(--oh-lift-press-sm));
|
|
198
|
-
box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
|
|
201
|
+
box-shadow: var(--oh-elevation-offset-xs) var(--oh-elevation-offset-xs)
|
|
202
|
+
0 0 var(--oh-close-button-shadow-hover);
|
|
199
203
|
}
|
|
200
204
|
|
|
201
205
|
.modal-close:focus-visible {
|
|
@@ -217,7 +221,7 @@ let OhModal = class OhModal extends OhElement {
|
|
|
217
221
|
flex: 1;
|
|
218
222
|
overflow-y: auto;
|
|
219
223
|
padding: var(--oh-spacing-5);
|
|
220
|
-
|
|
224
|
+
|
|
221
225
|
font-family: var(--oh-typography-body-font-family);
|
|
222
226
|
font-size: var(--oh-typography-body-base-font-size);
|
|
223
227
|
line-height: var(--oh-typography-body-base-line-height);
|
|
@@ -335,7 +339,9 @@ let OhModal = class OhModal extends OhElement {
|
|
|
335
339
|
/** Focusable elements in the dialog, in tab order, excluding the guards. */
|
|
336
340
|
_getFocusableElements() {
|
|
337
341
|
const dialog = this.renderRoot.querySelector(".modal");
|
|
338
|
-
return dialog
|
|
342
|
+
return dialog
|
|
343
|
+
? getFocusableElementsDeep(dialog).filter((el) => !el.classList.contains("focus-guard"))
|
|
344
|
+
: [];
|
|
339
345
|
}
|
|
340
346
|
/**
|
|
341
347
|
* Focus guards: Tab past the last control lands on the end guard, which
|
|
@@ -387,14 +393,23 @@ let OhModal = class OhModal extends OhElement {
|
|
|
387
393
|
role="dialog"
|
|
388
394
|
aria-modal="true"
|
|
389
395
|
aria-labelledby=${labelId || nothing}
|
|
396
|
+
aria-label=${!labelId && this.accessibleLabel
|
|
397
|
+
? this.accessibleLabel
|
|
398
|
+
: nothing}
|
|
390
399
|
part="modal"
|
|
391
400
|
>
|
|
392
|
-
<span
|
|
401
|
+
<span
|
|
402
|
+
class="focus-guard"
|
|
403
|
+
tabindex="0"
|
|
404
|
+
@focus=${() => this._focusEdge("last")}
|
|
405
|
+
></span>
|
|
393
406
|
${this.heading || this.dismissible
|
|
394
407
|
? html `
|
|
395
408
|
<header class="modal-header" part="header">
|
|
396
409
|
${this.heading
|
|
397
|
-
? html `<h2 id="modal-title" class="modal-title"
|
|
410
|
+
? html `<h2 id="modal-title" class="modal-title">
|
|
411
|
+
${this.heading}
|
|
412
|
+
</h2>`
|
|
398
413
|
: html `<span></span>`}
|
|
399
414
|
${this.dismissible
|
|
400
415
|
? html `
|
|
@@ -405,8 +420,16 @@ let OhModal = class OhModal extends OhElement {
|
|
|
405
420
|
part="close"
|
|
406
421
|
>
|
|
407
422
|
<span>Close</span>
|
|
408
|
-
<svg
|
|
409
|
-
|
|
423
|
+
<svg
|
|
424
|
+
viewBox="0 0 20 20"
|
|
425
|
+
fill="currentColor"
|
|
426
|
+
aria-hidden="true"
|
|
427
|
+
>
|
|
428
|
+
<path
|
|
429
|
+
fill-rule="evenodd"
|
|
430
|
+
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
431
|
+
clip-rule="evenodd"
|
|
432
|
+
/>
|
|
410
433
|
</svg>
|
|
411
434
|
</button>
|
|
412
435
|
`
|
|
@@ -422,7 +445,11 @@ let OhModal = class OhModal extends OhElement {
|
|
|
422
445
|
<footer class="modal-footer" part="footer">
|
|
423
446
|
<slot name="footer"></slot>
|
|
424
447
|
</footer>
|
|
425
|
-
<span
|
|
448
|
+
<span
|
|
449
|
+
class="focus-guard"
|
|
450
|
+
tabindex="0"
|
|
451
|
+
@focus=${() => this._focusEdge("first")}
|
|
452
|
+
></span>
|
|
426
453
|
</div>
|
|
427
454
|
</div>
|
|
428
455
|
`;
|
|
@@ -434,6 +461,9 @@ __decorate([
|
|
|
434
461
|
__decorate([
|
|
435
462
|
property({ type: String })
|
|
436
463
|
], OhModal.prototype, "heading", void 0);
|
|
464
|
+
__decorate([
|
|
465
|
+
property({ type: String, attribute: "accessible-label" })
|
|
466
|
+
], OhModal.prototype, "accessibleLabel", void 0);
|
|
437
467
|
__decorate([
|
|
438
468
|
property({ type: Boolean, reflect: true })
|
|
439
469
|
], OhModal.prototype, "dismissible", void 0);
|