@aurodesignsystem-dev/auro-formkit 0.0.0-pr1608.1 → 0.0.0-pr1608.3
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/components/checkbox/demo/accessibility.md +1 -1
- package/components/checkbox/demo/api.md +4 -3
- package/components/checkbox/demo/customize.min.js +22 -7
- package/components/checkbox/demo/getting-started.min.js +22 -7
- package/components/checkbox/demo/index.min.js +22 -7
- package/components/checkbox/dist/auro-checkbox-group.d.ts +14 -3
- package/components/checkbox/dist/index.js +22 -7
- package/components/checkbox/dist/registered.js +22 -7
- package/components/combobox/demo/customize.min.js +3 -3
- package/components/combobox/demo/getting-started.min.js +3 -3
- package/components/combobox/demo/index.min.js +3 -3
- package/components/combobox/dist/index.js +3 -3
- package/components/combobox/dist/registered.js +3 -3
- package/components/counter/demo/customize.min.js +2 -2
- package/components/counter/demo/getting-started.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/customize.min.js +3 -3
- package/components/datepicker/demo/getting-started.min.js +3 -3
- package/components/datepicker/demo/index.min.js +3 -3
- package/components/datepicker/dist/index.js +3 -3
- package/components/datepicker/dist/registered.js +3 -3
- package/components/dropdown/demo/customize.min.js +1 -1
- package/components/dropdown/demo/getting-started.min.js +2 -2
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/customize.min.js +52 -25
- package/components/form/demo/getting-started.min.js +52 -25
- package/components/form/demo/index.min.js +52 -25
- package/components/form/demo/registerDemoDeps.min.js +52 -25
- package/components/input/demo/customize.min.js +1 -1
- package/components/input/demo/getting-started.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/radio/demo/accessibility.md +2 -0
- package/components/radio/demo/customize.min.js +19 -7
- package/components/radio/demo/getting-started.min.js +19 -7
- package/components/radio/demo/index.min.js +19 -7
- package/components/radio/dist/auro-radio-group.d.ts +12 -3
- package/components/radio/dist/index.js +19 -7
- package/components/radio/dist/registered.js +19 -7
- package/components/select/demo/customize.min.js +2 -2
- package/components/select/demo/getting-started.min.js +2 -2
- package/components/select/demo/index.min.js +2 -2
- package/components/select/dist/index.js +2 -2
- package/components/select/dist/registered.js +2 -2
- package/custom-elements.json +1507 -1479
- package/package.json +1 -1
|
@@ -32,7 +32,7 @@ While the group is invalid, `aria-invalid` is set on both the `<fieldset>` and e
|
|
|
32
32
|
The `checkbox` role is in `aria-invalid`'s supported-role list in every ARIA version, so the per-checkbox placement is unambiguous. The group-level placement is worth one note: `aria-invalid` is a global attribute in ARIA 1.1, applicable to any role including `group`, but ARIA 1.2 deprecates that global use in favor of a supported-role list that does not include `group`. Keeping it on the `<fieldset>` is a deliberate choice — it is not a *prohibited* attribute for `group`, current axe-core resolves it as global and reports no violation, and it gives the group a real invalid signal that would otherwise be lost. This is covered by an automated axe assertion in the component's test suite so that a future change in tooling surfaces here rather than in a consumer's audit.
|
|
33
33
|
|
|
34
34
|
<auro-header level="4" id="attributePlacementNote">Attribute placement</auro-header>
|
|
35
|
-
`aria-invalid` is applied to the internal `<fieldset>`, not to the `<auro-checkbox-group>` host element. Do not write CSS selectors or test assertions against `auro-checkbox-group[aria-invalid]`;
|
|
35
|
+
`aria-invalid` is applied to the internal `<fieldset>`, not to the `<auro-checkbox-group>` host element. Do not write CSS selectors or test assertions against `auro-checkbox-group[aria-invalid]`; target the `part="checkbox-group"` fieldset or read the `validity` property instead.
|
|
36
36
|
|
|
37
37
|
<auro-header level="2" id="screenReaderAnnouncements">Screen Reader Announcements</auro-header>
|
|
38
38
|
- **Focus** — When focus moves to a checkbox, the screen reader announces the checkbox label, its checked/unchecked state, and role ("checkbox").
|
|
@@ -46,9 +46,10 @@ The `auro-checkbox-group` element is a wrapper for `auro-checkbox` elements..
|
|
|
46
46
|
|
|
47
47
|
## CSS Shadow Parts
|
|
48
48
|
|
|
49
|
-
| Part
|
|
50
|
-
|
|
51
|
-
| `
|
|
49
|
+
| Part | Description |
|
|
50
|
+
|------------------|--------------------------------------------------|
|
|
51
|
+
| `checkbox-group` | Apply css to the fieldset element in the shadow DOM |
|
|
52
|
+
| `helpText` | Apply css to the help text element that displays helper or error messages. |
|
|
52
53
|
|
|
53
54
|
# auro-checkbox
|
|
54
55
|
|
|
@@ -1300,7 +1300,7 @@ class AuroHelpText extends i$2 {
|
|
|
1300
1300
|
}
|
|
1301
1301
|
}
|
|
1302
1302
|
|
|
1303
|
-
var formkitVersion = '
|
|
1303
|
+
var formkitVersion = '202609030056';
|
|
1304
1304
|
|
|
1305
1305
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1306
1306
|
// See LICENSE in the project root for license information.
|
|
@@ -1310,6 +1310,7 @@ var formkitVersion = '202609022217';
|
|
|
1310
1310
|
* The `auro-checkbox-group` element is a wrapper for `auro-checkbox` elements.
|
|
1311
1311
|
* @customElement auro-checkbox-group
|
|
1312
1312
|
*
|
|
1313
|
+
* @csspart checkbox-group - Apply css to the fieldset element in the shadow DOM
|
|
1313
1314
|
* @csspart helpText - Apply css to the help text element that displays helper or error messages.
|
|
1314
1315
|
*
|
|
1315
1316
|
* @slot legend - Allows for the legend to be overridden.
|
|
@@ -1636,16 +1637,29 @@ class AuroCheckboxGroup extends i$2 {
|
|
|
1636
1637
|
this.syncCheckboxValidity();
|
|
1637
1638
|
}
|
|
1638
1639
|
|
|
1640
|
+
/**
|
|
1641
|
+
* Whether the group is currently in an invalid state.
|
|
1642
|
+
* `validity` — not `error` — is the authoritative source: `validate()` resolves the
|
|
1643
|
+
* `error` attribute to `validity = 'customError'`, so `error` is already covered here.
|
|
1644
|
+
* Single definition of "invalid" for the whole component, consumed by `render()` and
|
|
1645
|
+
* `syncCheckboxValidity()` so the fieldset and its children can never disagree.
|
|
1646
|
+
* @private
|
|
1647
|
+
* @returns {boolean}
|
|
1648
|
+
*/
|
|
1649
|
+
get isInvalid() {
|
|
1650
|
+
return Boolean(this.validity && this.validity !== 'valid');
|
|
1651
|
+
}
|
|
1652
|
+
|
|
1639
1653
|
/**
|
|
1640
1654
|
* Method for mirroring the group's invalid state onto each checkbox.
|
|
1641
|
-
*
|
|
1642
|
-
* `
|
|
1643
|
-
*
|
|
1655
|
+
* Has to be re-applied from `handleItems()` as well, because a slot change can happen
|
|
1656
|
+
* without `validity` itself changing — a checkbox slotted into an already-invalid
|
|
1657
|
+
* group would otherwise be missed.
|
|
1644
1658
|
* @private
|
|
1645
1659
|
* @returns {void}
|
|
1646
1660
|
*/
|
|
1647
1661
|
syncCheckboxValidity() {
|
|
1648
|
-
const invalid =
|
|
1662
|
+
const invalid = this.isInvalid;
|
|
1649
1663
|
|
|
1650
1664
|
this.checkboxes.forEach((el) => {
|
|
1651
1665
|
if (invalid) {
|
|
@@ -1731,7 +1745,8 @@ class AuroCheckboxGroup extends i$2 {
|
|
|
1731
1745
|
return u`
|
|
1732
1746
|
<fieldset
|
|
1733
1747
|
class="${e(groupClasses)}"
|
|
1734
|
-
|
|
1748
|
+
part="checkbox-group"
|
|
1749
|
+
aria-invalid="${o$1(this.isInvalid ? 'true' : undefined)}"
|
|
1735
1750
|
aria-describedby="${this.uniqueId}"
|
|
1736
1751
|
>
|
|
1737
1752
|
<legend>
|
|
@@ -1741,7 +1756,7 @@ class AuroCheckboxGroup extends i$2 {
|
|
|
1741
1756
|
<slot @slotchange=${this.handleItems}></slot>
|
|
1742
1757
|
</fieldset>
|
|
1743
1758
|
|
|
1744
|
-
${!this.
|
|
1759
|
+
${!this.isInvalid
|
|
1745
1760
|
? u`
|
|
1746
1761
|
<${this.helpTextTag} id="${this.uniqueId}" part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
|
|
1747
1762
|
<slot name="helpText"></slot>
|
|
@@ -1300,7 +1300,7 @@ class AuroHelpText extends i$2 {
|
|
|
1300
1300
|
}
|
|
1301
1301
|
}
|
|
1302
1302
|
|
|
1303
|
-
var formkitVersion = '
|
|
1303
|
+
var formkitVersion = '202609030056';
|
|
1304
1304
|
|
|
1305
1305
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1306
1306
|
// See LICENSE in the project root for license information.
|
|
@@ -1310,6 +1310,7 @@ var formkitVersion = '202609022217';
|
|
|
1310
1310
|
* The `auro-checkbox-group` element is a wrapper for `auro-checkbox` elements.
|
|
1311
1311
|
* @customElement auro-checkbox-group
|
|
1312
1312
|
*
|
|
1313
|
+
* @csspart checkbox-group - Apply css to the fieldset element in the shadow DOM
|
|
1313
1314
|
* @csspart helpText - Apply css to the help text element that displays helper or error messages.
|
|
1314
1315
|
*
|
|
1315
1316
|
* @slot legend - Allows for the legend to be overridden.
|
|
@@ -1636,16 +1637,29 @@ class AuroCheckboxGroup extends i$2 {
|
|
|
1636
1637
|
this.syncCheckboxValidity();
|
|
1637
1638
|
}
|
|
1638
1639
|
|
|
1640
|
+
/**
|
|
1641
|
+
* Whether the group is currently in an invalid state.
|
|
1642
|
+
* `validity` — not `error` — is the authoritative source: `validate()` resolves the
|
|
1643
|
+
* `error` attribute to `validity = 'customError'`, so `error` is already covered here.
|
|
1644
|
+
* Single definition of "invalid" for the whole component, consumed by `render()` and
|
|
1645
|
+
* `syncCheckboxValidity()` so the fieldset and its children can never disagree.
|
|
1646
|
+
* @private
|
|
1647
|
+
* @returns {boolean}
|
|
1648
|
+
*/
|
|
1649
|
+
get isInvalid() {
|
|
1650
|
+
return Boolean(this.validity && this.validity !== 'valid');
|
|
1651
|
+
}
|
|
1652
|
+
|
|
1639
1653
|
/**
|
|
1640
1654
|
* Method for mirroring the group's invalid state onto each checkbox.
|
|
1641
|
-
*
|
|
1642
|
-
* `
|
|
1643
|
-
*
|
|
1655
|
+
* Has to be re-applied from `handleItems()` as well, because a slot change can happen
|
|
1656
|
+
* without `validity` itself changing — a checkbox slotted into an already-invalid
|
|
1657
|
+
* group would otherwise be missed.
|
|
1644
1658
|
* @private
|
|
1645
1659
|
* @returns {void}
|
|
1646
1660
|
*/
|
|
1647
1661
|
syncCheckboxValidity() {
|
|
1648
|
-
const invalid =
|
|
1662
|
+
const invalid = this.isInvalid;
|
|
1649
1663
|
|
|
1650
1664
|
this.checkboxes.forEach((el) => {
|
|
1651
1665
|
if (invalid) {
|
|
@@ -1731,7 +1745,8 @@ class AuroCheckboxGroup extends i$2 {
|
|
|
1731
1745
|
return u`
|
|
1732
1746
|
<fieldset
|
|
1733
1747
|
class="${e(groupClasses)}"
|
|
1734
|
-
|
|
1748
|
+
part="checkbox-group"
|
|
1749
|
+
aria-invalid="${o$1(this.isInvalid ? 'true' : undefined)}"
|
|
1735
1750
|
aria-describedby="${this.uniqueId}"
|
|
1736
1751
|
>
|
|
1737
1752
|
<legend>
|
|
@@ -1741,7 +1756,7 @@ class AuroCheckboxGroup extends i$2 {
|
|
|
1741
1756
|
<slot @slotchange=${this.handleItems}></slot>
|
|
1742
1757
|
</fieldset>
|
|
1743
1758
|
|
|
1744
|
-
${!this.
|
|
1759
|
+
${!this.isInvalid
|
|
1745
1760
|
? u`
|
|
1746
1761
|
<${this.helpTextTag} id="${this.uniqueId}" part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
|
|
1747
1762
|
<slot name="helpText"></slot>
|
|
@@ -1300,7 +1300,7 @@ class AuroHelpText extends i$2 {
|
|
|
1300
1300
|
}
|
|
1301
1301
|
}
|
|
1302
1302
|
|
|
1303
|
-
var formkitVersion = '
|
|
1303
|
+
var formkitVersion = '202609030056';
|
|
1304
1304
|
|
|
1305
1305
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1306
1306
|
// See LICENSE in the project root for license information.
|
|
@@ -1310,6 +1310,7 @@ var formkitVersion = '202609022217';
|
|
|
1310
1310
|
* The `auro-checkbox-group` element is a wrapper for `auro-checkbox` elements.
|
|
1311
1311
|
* @customElement auro-checkbox-group
|
|
1312
1312
|
*
|
|
1313
|
+
* @csspart checkbox-group - Apply css to the fieldset element in the shadow DOM
|
|
1313
1314
|
* @csspart helpText - Apply css to the help text element that displays helper or error messages.
|
|
1314
1315
|
*
|
|
1315
1316
|
* @slot legend - Allows for the legend to be overridden.
|
|
@@ -1636,16 +1637,29 @@ class AuroCheckboxGroup extends i$2 {
|
|
|
1636
1637
|
this.syncCheckboxValidity();
|
|
1637
1638
|
}
|
|
1638
1639
|
|
|
1640
|
+
/**
|
|
1641
|
+
* Whether the group is currently in an invalid state.
|
|
1642
|
+
* `validity` — not `error` — is the authoritative source: `validate()` resolves the
|
|
1643
|
+
* `error` attribute to `validity = 'customError'`, so `error` is already covered here.
|
|
1644
|
+
* Single definition of "invalid" for the whole component, consumed by `render()` and
|
|
1645
|
+
* `syncCheckboxValidity()` so the fieldset and its children can never disagree.
|
|
1646
|
+
* @private
|
|
1647
|
+
* @returns {boolean}
|
|
1648
|
+
*/
|
|
1649
|
+
get isInvalid() {
|
|
1650
|
+
return Boolean(this.validity && this.validity !== 'valid');
|
|
1651
|
+
}
|
|
1652
|
+
|
|
1639
1653
|
/**
|
|
1640
1654
|
* Method for mirroring the group's invalid state onto each checkbox.
|
|
1641
|
-
*
|
|
1642
|
-
* `
|
|
1643
|
-
*
|
|
1655
|
+
* Has to be re-applied from `handleItems()` as well, because a slot change can happen
|
|
1656
|
+
* without `validity` itself changing — a checkbox slotted into an already-invalid
|
|
1657
|
+
* group would otherwise be missed.
|
|
1644
1658
|
* @private
|
|
1645
1659
|
* @returns {void}
|
|
1646
1660
|
*/
|
|
1647
1661
|
syncCheckboxValidity() {
|
|
1648
|
-
const invalid =
|
|
1662
|
+
const invalid = this.isInvalid;
|
|
1649
1663
|
|
|
1650
1664
|
this.checkboxes.forEach((el) => {
|
|
1651
1665
|
if (invalid) {
|
|
@@ -1731,7 +1745,8 @@ class AuroCheckboxGroup extends i$2 {
|
|
|
1731
1745
|
return u`
|
|
1732
1746
|
<fieldset
|
|
1733
1747
|
class="${e(groupClasses)}"
|
|
1734
|
-
|
|
1748
|
+
part="checkbox-group"
|
|
1749
|
+
aria-invalid="${o$1(this.isInvalid ? 'true' : undefined)}"
|
|
1735
1750
|
aria-describedby="${this.uniqueId}"
|
|
1736
1751
|
>
|
|
1737
1752
|
<legend>
|
|
@@ -1741,7 +1756,7 @@ class AuroCheckboxGroup extends i$2 {
|
|
|
1741
1756
|
<slot @slotchange=${this.handleItems}></slot>
|
|
1742
1757
|
</fieldset>
|
|
1743
1758
|
|
|
1744
|
-
${!this.
|
|
1759
|
+
${!this.isInvalid
|
|
1745
1760
|
? u`
|
|
1746
1761
|
<${this.helpTextTag} id="${this.uniqueId}" part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
|
|
1747
1762
|
<slot name="helpText"></slot>
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
* The `auro-checkbox-group` element is a wrapper for `auro-checkbox` elements.
|
|
3
3
|
* @customElement auro-checkbox-group
|
|
4
4
|
*
|
|
5
|
+
* @csspart checkbox-group - Apply css to the fieldset element in the shadow DOM
|
|
5
6
|
* @csspart helpText - Apply css to the help text element that displays helper or error messages.
|
|
6
7
|
*
|
|
7
8
|
* @slot legend - Allows for the legend to be overridden.
|
|
@@ -168,11 +169,21 @@ export class AuroCheckboxGroup extends LitElement {
|
|
|
168
169
|
*/
|
|
169
170
|
private handleItems;
|
|
170
171
|
checkboxes: Element[] | undefined;
|
|
172
|
+
/**
|
|
173
|
+
* Whether the group is currently in an invalid state.
|
|
174
|
+
* `validity` — not `error` — is the authoritative source: `validate()` resolves the
|
|
175
|
+
* `error` attribute to `validity = 'customError'`, so `error` is already covered here.
|
|
176
|
+
* Single definition of "invalid" for the whole component, consumed by `render()` and
|
|
177
|
+
* `syncCheckboxValidity()` so the fieldset and its children can never disagree.
|
|
178
|
+
* @private
|
|
179
|
+
* @returns {boolean}
|
|
180
|
+
*/
|
|
181
|
+
private get isInvalid();
|
|
171
182
|
/**
|
|
172
183
|
* Method for mirroring the group's invalid state onto each checkbox.
|
|
173
|
-
*
|
|
174
|
-
* `
|
|
175
|
-
*
|
|
184
|
+
* Has to be re-applied from `handleItems()` as well, because a slot change can happen
|
|
185
|
+
* without `validity` itself changing — a checkbox slotted into an already-invalid
|
|
186
|
+
* group would otherwise be missed.
|
|
176
187
|
* @private
|
|
177
188
|
* @returns {void}
|
|
178
189
|
*/
|
|
@@ -1253,7 +1253,7 @@ class AuroHelpText extends LitElement {
|
|
|
1253
1253
|
}
|
|
1254
1254
|
}
|
|
1255
1255
|
|
|
1256
|
-
var formkitVersion = '
|
|
1256
|
+
var formkitVersion = '202609030056';
|
|
1257
1257
|
|
|
1258
1258
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1259
1259
|
// See LICENSE in the project root for license information.
|
|
@@ -1263,6 +1263,7 @@ var formkitVersion = '202609022217';
|
|
|
1263
1263
|
* The `auro-checkbox-group` element is a wrapper for `auro-checkbox` elements.
|
|
1264
1264
|
* @customElement auro-checkbox-group
|
|
1265
1265
|
*
|
|
1266
|
+
* @csspart checkbox-group - Apply css to the fieldset element in the shadow DOM
|
|
1266
1267
|
* @csspart helpText - Apply css to the help text element that displays helper or error messages.
|
|
1267
1268
|
*
|
|
1268
1269
|
* @slot legend - Allows for the legend to be overridden.
|
|
@@ -1589,16 +1590,29 @@ class AuroCheckboxGroup extends LitElement {
|
|
|
1589
1590
|
this.syncCheckboxValidity();
|
|
1590
1591
|
}
|
|
1591
1592
|
|
|
1593
|
+
/**
|
|
1594
|
+
* Whether the group is currently in an invalid state.
|
|
1595
|
+
* `validity` — not `error` — is the authoritative source: `validate()` resolves the
|
|
1596
|
+
* `error` attribute to `validity = 'customError'`, so `error` is already covered here.
|
|
1597
|
+
* Single definition of "invalid" for the whole component, consumed by `render()` and
|
|
1598
|
+
* `syncCheckboxValidity()` so the fieldset and its children can never disagree.
|
|
1599
|
+
* @private
|
|
1600
|
+
* @returns {boolean}
|
|
1601
|
+
*/
|
|
1602
|
+
get isInvalid() {
|
|
1603
|
+
return Boolean(this.validity && this.validity !== 'valid');
|
|
1604
|
+
}
|
|
1605
|
+
|
|
1592
1606
|
/**
|
|
1593
1607
|
* Method for mirroring the group's invalid state onto each checkbox.
|
|
1594
|
-
*
|
|
1595
|
-
* `
|
|
1596
|
-
*
|
|
1608
|
+
* Has to be re-applied from `handleItems()` as well, because a slot change can happen
|
|
1609
|
+
* without `validity` itself changing — a checkbox slotted into an already-invalid
|
|
1610
|
+
* group would otherwise be missed.
|
|
1597
1611
|
* @private
|
|
1598
1612
|
* @returns {void}
|
|
1599
1613
|
*/
|
|
1600
1614
|
syncCheckboxValidity() {
|
|
1601
|
-
const invalid =
|
|
1615
|
+
const invalid = this.isInvalid;
|
|
1602
1616
|
|
|
1603
1617
|
this.checkboxes.forEach((el) => {
|
|
1604
1618
|
if (invalid) {
|
|
@@ -1684,7 +1698,8 @@ class AuroCheckboxGroup extends LitElement {
|
|
|
1684
1698
|
return html$1`
|
|
1685
1699
|
<fieldset
|
|
1686
1700
|
class="${classMap(groupClasses)}"
|
|
1687
|
-
|
|
1701
|
+
part="checkbox-group"
|
|
1702
|
+
aria-invalid="${ifDefined(this.isInvalid ? 'true' : undefined)}"
|
|
1688
1703
|
aria-describedby="${this.uniqueId}"
|
|
1689
1704
|
>
|
|
1690
1705
|
<legend>
|
|
@@ -1694,7 +1709,7 @@ class AuroCheckboxGroup extends LitElement {
|
|
|
1694
1709
|
<slot @slotchange=${this.handleItems}></slot>
|
|
1695
1710
|
</fieldset>
|
|
1696
1711
|
|
|
1697
|
-
${!this.
|
|
1712
|
+
${!this.isInvalid
|
|
1698
1713
|
? html$1`
|
|
1699
1714
|
<${this.helpTextTag} id="${this.uniqueId}" part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
|
|
1700
1715
|
<slot name="helpText"></slot>
|
|
@@ -1253,7 +1253,7 @@ class AuroHelpText extends LitElement {
|
|
|
1253
1253
|
}
|
|
1254
1254
|
}
|
|
1255
1255
|
|
|
1256
|
-
var formkitVersion = '
|
|
1256
|
+
var formkitVersion = '202609030056';
|
|
1257
1257
|
|
|
1258
1258
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1259
1259
|
// See LICENSE in the project root for license information.
|
|
@@ -1263,6 +1263,7 @@ var formkitVersion = '202609022217';
|
|
|
1263
1263
|
* The `auro-checkbox-group` element is a wrapper for `auro-checkbox` elements.
|
|
1264
1264
|
* @customElement auro-checkbox-group
|
|
1265
1265
|
*
|
|
1266
|
+
* @csspart checkbox-group - Apply css to the fieldset element in the shadow DOM
|
|
1266
1267
|
* @csspart helpText - Apply css to the help text element that displays helper or error messages.
|
|
1267
1268
|
*
|
|
1268
1269
|
* @slot legend - Allows for the legend to be overridden.
|
|
@@ -1589,16 +1590,29 @@ class AuroCheckboxGroup extends LitElement {
|
|
|
1589
1590
|
this.syncCheckboxValidity();
|
|
1590
1591
|
}
|
|
1591
1592
|
|
|
1593
|
+
/**
|
|
1594
|
+
* Whether the group is currently in an invalid state.
|
|
1595
|
+
* `validity` — not `error` — is the authoritative source: `validate()` resolves the
|
|
1596
|
+
* `error` attribute to `validity = 'customError'`, so `error` is already covered here.
|
|
1597
|
+
* Single definition of "invalid" for the whole component, consumed by `render()` and
|
|
1598
|
+
* `syncCheckboxValidity()` so the fieldset and its children can never disagree.
|
|
1599
|
+
* @private
|
|
1600
|
+
* @returns {boolean}
|
|
1601
|
+
*/
|
|
1602
|
+
get isInvalid() {
|
|
1603
|
+
return Boolean(this.validity && this.validity !== 'valid');
|
|
1604
|
+
}
|
|
1605
|
+
|
|
1592
1606
|
/**
|
|
1593
1607
|
* Method for mirroring the group's invalid state onto each checkbox.
|
|
1594
|
-
*
|
|
1595
|
-
* `
|
|
1596
|
-
*
|
|
1608
|
+
* Has to be re-applied from `handleItems()` as well, because a slot change can happen
|
|
1609
|
+
* without `validity` itself changing — a checkbox slotted into an already-invalid
|
|
1610
|
+
* group would otherwise be missed.
|
|
1597
1611
|
* @private
|
|
1598
1612
|
* @returns {void}
|
|
1599
1613
|
*/
|
|
1600
1614
|
syncCheckboxValidity() {
|
|
1601
|
-
const invalid =
|
|
1615
|
+
const invalid = this.isInvalid;
|
|
1602
1616
|
|
|
1603
1617
|
this.checkboxes.forEach((el) => {
|
|
1604
1618
|
if (invalid) {
|
|
@@ -1684,7 +1698,8 @@ class AuroCheckboxGroup extends LitElement {
|
|
|
1684
1698
|
return html$1`
|
|
1685
1699
|
<fieldset
|
|
1686
1700
|
class="${classMap(groupClasses)}"
|
|
1687
|
-
|
|
1701
|
+
part="checkbox-group"
|
|
1702
|
+
aria-invalid="${ifDefined(this.isInvalid ? 'true' : undefined)}"
|
|
1688
1703
|
aria-describedby="${this.uniqueId}"
|
|
1689
1704
|
>
|
|
1690
1705
|
<legend>
|
|
@@ -1694,7 +1709,7 @@ class AuroCheckboxGroup extends LitElement {
|
|
|
1694
1709
|
<slot @slotchange=${this.handleItems}></slot>
|
|
1695
1710
|
</fieldset>
|
|
1696
1711
|
|
|
1697
|
-
${!this.
|
|
1712
|
+
${!this.isInvalid
|
|
1698
1713
|
? html$1`
|
|
1699
1714
|
<${this.helpTextTag} id="${this.uniqueId}" part="helpText" appearance="${this.onDark ? 'inverse' : this.appearance}">
|
|
1700
1715
|
<slot name="helpText"></slot>
|
|
@@ -5108,7 +5108,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
5108
5108
|
}
|
|
5109
5109
|
};
|
|
5110
5110
|
|
|
5111
|
-
var formkitVersion$2 = '
|
|
5111
|
+
var formkitVersion$2 = '202609030056';
|
|
5112
5112
|
|
|
5113
5113
|
/**
|
|
5114
5114
|
* AuroElement is the shared base class for layout-aware Auro form components.
|
|
@@ -18977,7 +18977,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18977
18977
|
}
|
|
18978
18978
|
};
|
|
18979
18979
|
|
|
18980
|
-
var formkitVersion$1 = '
|
|
18980
|
+
var formkitVersion$1 = '202609030056';
|
|
18981
18981
|
|
|
18982
18982
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18983
18983
|
// See LICENSE in the project root for license information.
|
|
@@ -20169,7 +20169,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
20169
20169
|
}
|
|
20170
20170
|
}
|
|
20171
20171
|
|
|
20172
|
-
var formkitVersion = '
|
|
20172
|
+
var formkitVersion = '202609030056';
|
|
20173
20173
|
|
|
20174
20174
|
var styleCss$3 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
20175
20175
|
|
|
@@ -5108,7 +5108,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
5108
5108
|
}
|
|
5109
5109
|
};
|
|
5110
5110
|
|
|
5111
|
-
var formkitVersion$2 = '
|
|
5111
|
+
var formkitVersion$2 = '202609030056';
|
|
5112
5112
|
|
|
5113
5113
|
/**
|
|
5114
5114
|
* AuroElement is the shared base class for layout-aware Auro form components.
|
|
@@ -18977,7 +18977,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18977
18977
|
}
|
|
18978
18978
|
};
|
|
18979
18979
|
|
|
18980
|
-
var formkitVersion$1 = '
|
|
18980
|
+
var formkitVersion$1 = '202609030056';
|
|
18981
18981
|
|
|
18982
18982
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18983
18983
|
// See LICENSE in the project root for license information.
|
|
@@ -20169,7 +20169,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
20169
20169
|
}
|
|
20170
20170
|
}
|
|
20171
20171
|
|
|
20172
|
-
var formkitVersion = '
|
|
20172
|
+
var formkitVersion = '202609030056';
|
|
20173
20173
|
|
|
20174
20174
|
var styleCss$3 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
20175
20175
|
|
|
@@ -5123,7 +5123,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
|
|
|
5123
5123
|
}
|
|
5124
5124
|
};
|
|
5125
5125
|
|
|
5126
|
-
var formkitVersion$2 = '
|
|
5126
|
+
var formkitVersion$2 = '202609030056';
|
|
5127
5127
|
|
|
5128
5128
|
/**
|
|
5129
5129
|
* AuroElement is the shared base class for layout-aware Auro form components.
|
|
@@ -18992,7 +18992,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
18992
18992
|
}
|
|
18993
18993
|
};
|
|
18994
18994
|
|
|
18995
|
-
var formkitVersion$1 = '
|
|
18995
|
+
var formkitVersion$1 = '202609030056';
|
|
18996
18996
|
|
|
18997
18997
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18998
18998
|
// See LICENSE in the project root for license information.
|
|
@@ -20184,7 +20184,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
20184
20184
|
}
|
|
20185
20185
|
}
|
|
20186
20186
|
|
|
20187
|
-
var formkitVersion = '
|
|
20187
|
+
var formkitVersion = '202609030056';
|
|
20188
20188
|
|
|
20189
20189
|
var styleCss$3 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
20190
20190
|
|
|
@@ -5041,7 +5041,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
5041
5041
|
}
|
|
5042
5042
|
};
|
|
5043
5043
|
|
|
5044
|
-
var formkitVersion$2 = '
|
|
5044
|
+
var formkitVersion$2 = '202609030056';
|
|
5045
5045
|
|
|
5046
5046
|
/**
|
|
5047
5047
|
* AuroElement is the shared base class for layout-aware Auro form components.
|
|
@@ -18903,7 +18903,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
18903
18903
|
}
|
|
18904
18904
|
};
|
|
18905
18905
|
|
|
18906
|
-
var formkitVersion$1 = '
|
|
18906
|
+
var formkitVersion$1 = '202609030056';
|
|
18907
18907
|
|
|
18908
18908
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18909
18909
|
// See LICENSE in the project root for license information.
|
|
@@ -20095,7 +20095,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
20095
20095
|
}
|
|
20096
20096
|
}
|
|
20097
20097
|
|
|
20098
|
-
var formkitVersion = '
|
|
20098
|
+
var formkitVersion = '202609030056';
|
|
20099
20099
|
|
|
20100
20100
|
var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
20101
20101
|
|
|
@@ -5041,7 +5041,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
5041
5041
|
}
|
|
5042
5042
|
};
|
|
5043
5043
|
|
|
5044
|
-
var formkitVersion$2 = '
|
|
5044
|
+
var formkitVersion$2 = '202609030056';
|
|
5045
5045
|
|
|
5046
5046
|
/**
|
|
5047
5047
|
* AuroElement is the shared base class for layout-aware Auro form components.
|
|
@@ -18903,7 +18903,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
18903
18903
|
}
|
|
18904
18904
|
};
|
|
18905
18905
|
|
|
18906
|
-
var formkitVersion$1 = '
|
|
18906
|
+
var formkitVersion$1 = '202609030056';
|
|
18907
18907
|
|
|
18908
18908
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
18909
18909
|
// See LICENSE in the project root for license information.
|
|
@@ -20095,7 +20095,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
20095
20095
|
}
|
|
20096
20096
|
}
|
|
20097
20097
|
|
|
20098
|
-
var formkitVersion = '
|
|
20098
|
+
var formkitVersion = '202609030056';
|
|
20099
20099
|
|
|
20100
20100
|
var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
20101
20101
|
|
|
@@ -1127,7 +1127,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1127
1127
|
}
|
|
1128
1128
|
};
|
|
1129
1129
|
|
|
1130
|
-
var formkitVersion$1 = '
|
|
1130
|
+
var formkitVersion$1 = '202609030056';
|
|
1131
1131
|
|
|
1132
1132
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1133
1133
|
// See LICENSE in the project root for license information.
|
|
@@ -5487,7 +5487,7 @@ class AuroHelpText extends i$2 {
|
|
|
5487
5487
|
}
|
|
5488
5488
|
}
|
|
5489
5489
|
|
|
5490
|
-
var formkitVersion = '
|
|
5490
|
+
var formkitVersion = '202609030056';
|
|
5491
5491
|
|
|
5492
5492
|
/**
|
|
5493
5493
|
* AuroElement is the shared base class for layout-aware Auro form components.
|
|
@@ -1127,7 +1127,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1127
1127
|
}
|
|
1128
1128
|
};
|
|
1129
1129
|
|
|
1130
|
-
var formkitVersion$1 = '
|
|
1130
|
+
var formkitVersion$1 = '202609030056';
|
|
1131
1131
|
|
|
1132
1132
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1133
1133
|
// See LICENSE in the project root for license information.
|
|
@@ -5487,7 +5487,7 @@ class AuroHelpText extends i$2 {
|
|
|
5487
5487
|
}
|
|
5488
5488
|
}
|
|
5489
5489
|
|
|
5490
|
-
var formkitVersion = '
|
|
5490
|
+
var formkitVersion = '202609030056';
|
|
5491
5491
|
|
|
5492
5492
|
/**
|
|
5493
5493
|
* AuroElement is the shared base class for layout-aware Auro form components.
|
|
@@ -1127,7 +1127,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1127
1127
|
}
|
|
1128
1128
|
};
|
|
1129
1129
|
|
|
1130
|
-
var formkitVersion$1 = '
|
|
1130
|
+
var formkitVersion$1 = '202609030056';
|
|
1131
1131
|
|
|
1132
1132
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1133
1133
|
// See LICENSE in the project root for license information.
|
|
@@ -5487,7 +5487,7 @@ class AuroHelpText extends i$2 {
|
|
|
5487
5487
|
}
|
|
5488
5488
|
}
|
|
5489
5489
|
|
|
5490
|
-
var formkitVersion = '
|
|
5490
|
+
var formkitVersion = '202609030056';
|
|
5491
5491
|
|
|
5492
5492
|
/**
|
|
5493
5493
|
* AuroElement is the shared base class for layout-aware Auro form components.
|
|
@@ -1077,7 +1077,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
1077
1077
|
}
|
|
1078
1078
|
};
|
|
1079
1079
|
|
|
1080
|
-
var formkitVersion$1 = '
|
|
1080
|
+
var formkitVersion$1 = '202609030056';
|
|
1081
1081
|
|
|
1082
1082
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1083
1083
|
// See LICENSE in the project root for license information.
|
|
@@ -5419,7 +5419,7 @@ class AuroHelpText extends LitElement {
|
|
|
5419
5419
|
}
|
|
5420
5420
|
}
|
|
5421
5421
|
|
|
5422
|
-
var formkitVersion = '
|
|
5422
|
+
var formkitVersion = '202609030056';
|
|
5423
5423
|
|
|
5424
5424
|
/**
|
|
5425
5425
|
* AuroElement is the shared base class for layout-aware Auro form components.
|
|
@@ -1077,7 +1077,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
1077
1077
|
}
|
|
1078
1078
|
};
|
|
1079
1079
|
|
|
1080
|
-
var formkitVersion$1 = '
|
|
1080
|
+
var formkitVersion$1 = '202609030056';
|
|
1081
1081
|
|
|
1082
1082
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1083
1083
|
// See LICENSE in the project root for license information.
|
|
@@ -5419,7 +5419,7 @@ class AuroHelpText extends LitElement {
|
|
|
5419
5419
|
}
|
|
5420
5420
|
}
|
|
5421
5421
|
|
|
5422
|
-
var formkitVersion = '
|
|
5422
|
+
var formkitVersion = '202609030056';
|
|
5423
5423
|
|
|
5424
5424
|
/**
|
|
5425
5425
|
* AuroElement is the shared base class for layout-aware Auro form components.
|