@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.6 → 0.0.0-pr624.60
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/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
- package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
- package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
- package/components/bibtemplate/dist/index.js +1214 -83
- package/components/bibtemplate/dist/registered.js +1214 -83
- package/components/checkbox/README.md +1 -1
- package/components/checkbox/demo/api.html +16 -10
- package/components/checkbox/demo/api.md +47 -14
- package/components/checkbox/demo/api.min.js +49 -37
- package/components/checkbox/demo/index.html +16 -10
- package/components/checkbox/demo/index.md +2 -2
- package/components/checkbox/demo/index.min.js +49 -37
- package/components/checkbox/demo/readme.html +16 -9
- package/components/checkbox/demo/readme.md +1 -1
- package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
- package/components/checkbox/dist/auro-checkbox.d.ts +3 -3
- package/components/checkbox/dist/index.js +49 -37
- package/components/checkbox/dist/registered.js +49 -37
- package/components/combobox/demo/api.html +16 -10
- package/components/combobox/demo/api.md +112 -8
- package/components/combobox/demo/api.min.js +2941 -851
- package/components/combobox/demo/index.html +16 -10
- package/components/combobox/demo/index.md +6 -30
- package/components/combobox/demo/index.min.js +2941 -851
- package/components/combobox/demo/readme.html +16 -9
- package/components/combobox/dist/auro-combobox.d.ts +37 -8
- package/components/combobox/dist/index.js +2730 -736
- package/components/combobox/dist/registered.js +2730 -736
- package/components/counter/demo/api.html +17 -10
- package/components/counter/demo/api.md +156 -21
- package/components/counter/demo/api.min.js +6696 -4097
- package/components/counter/demo/index.html +17 -10
- package/components/counter/demo/index.md +185 -34
- package/components/counter/demo/index.min.js +6696 -4097
- package/components/counter/demo/readme.html +16 -9
- package/components/counter/dist/auro-counter-button.d.ts +2 -0
- package/components/counter/dist/auro-counter-group.d.ts +151 -11
- package/components/counter/dist/auro-counter.d.ts +16 -0
- package/components/counter/dist/helptextVersion.d.ts +2 -0
- package/components/counter/dist/iconVersion.d.ts +1 -1
- package/components/counter/dist/index.js +6696 -4097
- package/components/counter/dist/registered.js +6696 -4097
- package/components/datepicker/demo/api.html +16 -10
- package/components/datepicker/demo/api.md +24 -16
- package/components/datepicker/demo/api.min.js +11749 -8230
- package/components/datepicker/demo/index.html +16 -10
- package/components/datepicker/demo/index.md +71 -4
- package/components/datepicker/demo/index.min.js +11749 -8230
- package/components/datepicker/demo/readme.html +16 -9
- package/components/datepicker/dist/auro-datepicker.d.ts +84 -11
- package/components/datepicker/dist/buttonVersion.d.ts +1 -1
- package/components/datepicker/dist/iconVersion.d.ts +2 -0
- package/components/datepicker/dist/index.js +6531 -3012
- package/components/datepicker/dist/popoverVersion.d.ts +1 -1
- package/components/datepicker/dist/registered.js +6531 -3012
- package/components/dropdown/demo/api.html +16 -10
- package/components/dropdown/demo/api.md +81 -274
- package/components/dropdown/demo/api.min.js +429 -195
- package/components/dropdown/demo/index.html +16 -10
- package/components/dropdown/demo/index.md +92 -362
- package/components/dropdown/demo/index.min.js +429 -195
- package/components/dropdown/demo/readme.html +16 -9
- package/components/dropdown/dist/auro-dropdown.d.ts +41 -76
- package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
- package/components/dropdown/dist/index.js +429 -195
- package/components/dropdown/dist/registered.js +429 -195
- package/components/form/demo/api.html +16 -9
- package/components/form/demo/api.min.js +1 -1
- package/components/form/demo/autocomplete.html +19 -3
- package/components/form/demo/index.html +16 -9
- package/components/form/demo/index.min.js +1 -1
- package/components/form/demo/readme.html +16 -9
- package/components/form/demo/working.html +19 -13
- package/components/form/dist/index.js +1 -1
- package/components/form/dist/registered.js +1 -1
- package/components/helptext/dist/index.js +2 -2
- package/components/helptext/dist/registered.js +2 -2
- package/components/input/README.md +5 -2
- package/components/input/demo/api.html +16 -10
- package/components/input/demo/api.md +226 -129
- package/components/input/demo/api.min.js +828 -234
- package/components/input/demo/index.html +16 -10
- package/components/input/demo/index.md +48 -32
- package/components/input/demo/index.min.js +828 -234
- package/components/input/demo/readme.html +16 -9
- package/components/input/demo/readme.md +5 -2
- package/components/input/dist/auro-input.d.ts +3 -3
- package/components/input/dist/base-input.d.ts +33 -9
- package/components/input/dist/buttonVersion.d.ts +1 -1
- package/components/input/dist/iconVersion.d.ts +1 -1
- package/components/input/dist/index.js +828 -234
- package/components/input/dist/registered.js +828 -234
- package/components/layoutElement/dist/index.js +13 -10
- package/components/menu/demo/api.html +32 -10
- package/components/menu/demo/api.md +69 -8
- package/components/menu/demo/api.min.js +238 -47
- package/components/menu/demo/index.html +16 -10
- package/components/menu/demo/index.min.js +238 -47
- package/components/menu/demo/readme.html +16 -9
- package/components/menu/dist/auro-menu.d.ts +41 -7
- package/components/menu/dist/auro-menuoption.d.ts +15 -3
- package/components/menu/dist/iconVersion.d.ts +1 -1
- package/components/menu/dist/index.js +238 -47
- package/components/menu/dist/registered.js +238 -47
- package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
- package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
- package/components/radio/demo/api.html +16 -10
- package/components/radio/demo/api.md +7 -8
- package/components/radio/demo/api.min.js +72 -85
- package/components/radio/demo/index.html +16 -10
- package/components/radio/demo/index.min.js +72 -85
- package/components/radio/demo/readme.html +16 -9
- package/components/radio/dist/auro-radio-group.d.ts +1 -1
- package/components/radio/dist/auro-radio.d.ts +9 -12
- package/components/radio/dist/index.js +72 -85
- package/components/radio/dist/registered.js +72 -85
- package/components/select/demo/api.html +16 -10
- package/components/select/demo/api.js +0 -2
- package/components/select/demo/api.md +104 -57
- package/components/select/demo/api.min.js +2107 -639
- package/components/select/demo/index.html +16 -11
- package/components/select/demo/index.md +45 -158
- package/components/select/demo/index.min.js +2104 -624
- package/components/select/demo/readme.html +16 -9
- package/components/select/dist/auro-select.d.ts +57 -16
- package/components/select/dist/index.js +2028 -644
- package/components/select/dist/registered.js +2028 -644
- package/package.json +29 -26
- /package/components/{datepicker/dist/styles/emphasized/style-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
- /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/color-css.d.ts +0 -0
- /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
- /package/components/dropdown/dist/styles/{default → classic}/bibColors-css.d.ts +0 -0
- /package/components/dropdown/dist/styles/{default → classic}/bibStyles-css.d.ts +0 -0
- /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
- /package/components/{menu/dist/styles/color-menuoption-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
- /package/components/menu/dist/styles/{style-menu-css.d.ts → default/color-menu-css.d.ts} +0 -0
- /package/components/menu/dist/styles/{style-menuoption-css.d.ts → default/color-menuoption-css.d.ts} +0 -0
- /package/components/menu/dist/styles/{tokens-css.d.ts → default/style-menu-css.d.ts} +0 -0
|
@@ -87,7 +87,7 @@ This configuration enables proper module resolution for the component's TypeScri
|
|
|
87
87
|
<span slot="legend">Form label goes here</span>
|
|
88
88
|
<auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
|
|
89
89
|
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
|
|
90
|
-
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
|
|
90
|
+
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
|
|
91
91
|
<auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
|
|
92
92
|
</auro-checkbox-group>
|
|
93
93
|
```
|
|
@@ -16,18 +16,24 @@
|
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
-
<title>Auro Web Component
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css"
|
|
26
|
-
|
|
19
|
+
<title>Auro Web Component Demo | auro-checkbox</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-checkbox's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem-dev/webcorestylesheets@0.0.0-pr243.4/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
27
34
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
28
35
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
29
|
-
|
|
30
|
-
</head>
|
|
36
|
+
</head>
|
|
31
37
|
<body class="auro-markdown">
|
|
32
38
|
<main></main>
|
|
33
39
|
|
|
@@ -36,11 +36,11 @@ The auro-checkbox-group element is a wrapper for auro-checkbox element.
|
|
|
36
36
|
|
|
37
37
|
## Slots
|
|
38
38
|
|
|
39
|
-
| Name | Description
|
|
40
|
-
|
|
41
|
-
| [helpText](#helpText) | Allows for the helper text to be overridden.
|
|
42
|
-
| [legend](#legend) | Allows for the legend to be overridden.
|
|
43
|
-
| [optionalLabel](#optionalLabel) | Allows
|
|
39
|
+
| Name | Description |
|
|
40
|
+
|-----------------|--------------------------------------------------|
|
|
41
|
+
| [helpText](#helpText) | Allows for the helper text to be overridden. |
|
|
42
|
+
| [legend](#legend) | Allows for the legend to be overridden. |
|
|
43
|
+
| [optionalLabel](#optionalLabel) | Allows overriding the optional display text "(optional)", which appears next to the label. |
|
|
44
44
|
|
|
45
45
|
# auro-checkbox
|
|
46
46
|
|
|
@@ -92,7 +92,7 @@ Custom element for the purpose of allowing users to select one or more options o
|
|
|
92
92
|
<span slot="legend">Form label goes here</span>
|
|
93
93
|
<auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
|
|
94
94
|
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
|
|
95
|
-
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
|
|
95
|
+
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
|
|
96
96
|
<auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
|
|
97
97
|
</auro-checkbox-group>
|
|
98
98
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -119,7 +119,7 @@ Custom element for the purpose of allowing users to select one or more options o
|
|
|
119
119
|
<span slot="legend">Form label goes here</span>
|
|
120
120
|
<auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
|
|
121
121
|
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
|
|
122
|
-
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
|
|
122
|
+
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
|
|
123
123
|
<auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
|
|
124
124
|
</auro-checkbox-group>
|
|
125
125
|
```
|
|
@@ -326,6 +326,40 @@ When present, the `required` attribute specifies that at least one or more `<aur
|
|
|
326
326
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
327
327
|
</auro-accordion>
|
|
328
328
|
|
|
329
|
+
### Custom optional label <a name="optionalLabel"></a>
|
|
330
|
+
The `<auro-checkbox-group>` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
|
|
331
|
+
|
|
332
|
+
<div class="exampleWrapper">
|
|
333
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optionalLabel.html) -->
|
|
334
|
+
<!-- The below content is automatically added from ./../apiExamples/optionalLabel.html -->
|
|
335
|
+
<auro-checkbox-group>
|
|
336
|
+
<span slot="legend">Form label goes here</span>
|
|
337
|
+
<span slot="optionalLabel" style="font-size: small; color: grey"> - optional</span>
|
|
338
|
+
<auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
|
|
339
|
+
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
|
|
340
|
+
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
|
|
341
|
+
<auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
|
|
342
|
+
</auro-checkbox-group>
|
|
343
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
344
|
+
</div>
|
|
345
|
+
<auro-accordion alignRight>
|
|
346
|
+
<span slot="trigger">See code</span>
|
|
347
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/optionalLabel.html) -->
|
|
348
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/optionalLabel.html -->
|
|
349
|
+
|
|
350
|
+
```html
|
|
351
|
+
<auro-checkbox-group>
|
|
352
|
+
<span slot="legend">Form label goes here</span>
|
|
353
|
+
<span slot="optionalLabel" style="font-size: small; color: grey"> - optional</span>
|
|
354
|
+
<auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
|
|
355
|
+
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
|
|
356
|
+
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
|
|
357
|
+
<auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
|
|
358
|
+
</auro-checkbox-group>
|
|
359
|
+
```
|
|
360
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
361
|
+
</auro-accordion>
|
|
362
|
+
|
|
329
363
|
### Functional Examples
|
|
330
364
|
|
|
331
365
|
#### Reset State
|
|
@@ -386,16 +420,15 @@ The component may be restyled using the following code sample and changing the v
|
|
|
386
420
|
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
|
|
387
421
|
|
|
388
422
|
```scss
|
|
389
|
-
@
|
|
390
|
-
@import "@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariables";
|
|
423
|
+
@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
|
|
391
424
|
|
|
392
425
|
:host {
|
|
393
|
-
--ds-auro-checkbox-border-color: var(--ds-basic-color-border-bold, #{
|
|
394
|
-
--ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator, #{
|
|
395
|
-
--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #{
|
|
396
|
-
--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-default, #{
|
|
426
|
+
--ds-auro-checkbox-border-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
|
|
427
|
+
--ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator, #{v.$ds-advanced-color-boolean-indicator});
|
|
428
|
+
--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #{v.$ds-advanced-color-boolean-isfalse});
|
|
429
|
+
--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
|
|
397
430
|
--ds-auro-checkbox-outline-color: transparent;
|
|
398
|
-
--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-default, #{
|
|
431
|
+
--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
|
|
399
432
|
}
|
|
400
433
|
```
|
|
401
434
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -51,9 +51,9 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
|
|
|
51
51
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
52
52
|
*/const o$1=o=>o??E;
|
|
53
53
|
|
|
54
|
-
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.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;--cbxLocation: var(--ds-size-50, 0.25rem)}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem);line-height:var(--ds-size-400, 2rem)}.cbx--input:disabled+label:hover{cursor:auto}.label{margin-left:var(--ds-size-300, 1.5rem);display:block}.label:hover{cursor:pointer}.label--cbx:after{-webkit-tap-highlight-color:transparent;position:absolute;content:"";top:var(--ds-size-200, 1rem);left:var(--cbxLocation);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));transform:translateY(-50%);border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);outline-style:solid;outline-width:1px;z-index:0}.svg--cbx{position:absolute;top:var(--ds-size-25, 0.125rem);left:var(--ds-size-25, 0.125rem);padding-top:3px;padding-bottom:3px;z-index:1}`;
|
|
54
|
+
var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.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}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3)}:host{display:block;--cbxLocation: var(--ds-size-50, 0.25rem)}fieldset{all:unset}@media screen and (min-width: 576px){.displayFlex slot{display:flex}}.cbxContainer{position:relative;display:flex;flex-direction:row;gap:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-100, 0.5rem)}.cbxContainer:hover{cursor:pointer}.label{display:block;padding-top:var(--ds-size-50, 0.25rem)}.label:hover{cursor:pointer}:host([disabled]) .cbxContainer{pointer-events:none;cursor:default}.inputContainer{position:relative}.inputContainer:after{-webkit-tap-highlight-color:transparent;display:block;content:"";align-items:center;justify-content:center;margin-top:var(--cbxLocation);width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);outline-style:solid;outline-width:1px;z-index:0}.svg--cbx{position:absolute;padding-top:3px;padding-bottom:3px;z-index:1;pointer-events:none}`;
|
|
55
55
|
|
|
56
|
-
var colorCss$2 = i$5`:host .label{color:var(--ds-auro-checkbox-label-color)}:host .
|
|
56
|
+
var colorCss$2 = i$5`:host(:not([checked])) .cbxContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-hover, #f2f2f2)}:host .label{color:var(--ds-auro-checkbox-label-color)}:host .inputContainer:after{background-color:var(--ds-auro-checkbox-container-color);border-color:var(--ds-auro-checkbox-border-color);outline-color:var(--ds-auro-checkbox-outline-color)}:host .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-hover, #f2f2f2)}:host .svg--cbx{color:var(--ds-auro-checkbox-checkmark-color)}:host(:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-istrue, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue, #01426a)}:host([checked]) .cbxContainer:hover,:host([checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a)}:host([checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([checked]:focus-within) .cbxContainer:hover,:host([checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-hover, #00274a)}:host([disabled]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-disabled, #dddddd);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([disabled]) .cbxContainer:hover,:host([disabled]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-disabled, #dddddd);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #ffffff)}:host([disabled][checked]){--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-disabled, #dddddd)}:host([disabled][checked]) .cbxContainer:hover,:host([disabled][checked]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-disabled, #dddddd)}:host([error]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([error]:not([checked]):focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host([error][checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error, #e31f26);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error, #e31f26)}:host([error][checked]) .cbxContainer:hover,:host([error][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-hover, #b1161c);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-hover, #b1161c)}:host([error][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([error][checked]:focus-within) .cbxContainer:hover,:host([error][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-hover, #b1161c)}:host([onDark]){--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-checkbox-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-checkbox-container-color: transparent}:host([onDark]) .cbxContainer:hover,:host([onDark]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-inverse-hover, rgba(255, 255, 255, 0.2))}:host([onDark]:not([checked])) .cbxContainer:hover,:host([onDark]:not([checked])) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse-inverse-hover, rgba(255, 255, 255, 0.2))}:host([onDark]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][checked]){--ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator-inverse, #00274a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse, #ffffff)}:host([onDark][checked]) .cbxContainer:hover,:host([onDark][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: transparent;--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse-hover, rgba(255, 255, 255, 0.7))}:host([onDark][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark][checked]:focus-within) .cbxContainer:hover,:host([onDark][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-istrue-inverse-hover, rgba(255, 255, 255, 0.7))}:host([onDark][disabled]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][disabled]) .cbxContainer:hover,:host([onDark][disabled]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894);--ds-auro-checkbox-container-color: transparent}:host([onDark][disabled][checked]){--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark][disabled][checked]) .cbxContainer:hover,:host([onDark][disabled][checked]) .inputContainer:hover{--ds-auro-checkbox-container-color: var(--ds-advanced-color-state-background-inverse-disabled, #7e8894)}:host([onDark][error]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][error]:not([checked]):focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-checkbox-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][error][checked]){--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse, #f9a4a8)}:host([onDark][error][checked]) .cbxContainer:hover,:host([onDark][error][checked]) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65)}:host([onDark][error][checked]:focus-within){--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark][error][checked]:focus-within) .cbxContainer:hover,:host([onDark][error][checked]:focus-within) .inputContainer:hover{--ds-auro-checkbox-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-error-inverse-hover, #f15f65)}`;
|
|
57
57
|
|
|
58
58
|
var tokensCss$1 = i$5`:host{--ds-auro-checkbox-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-checkbox-checkmark-color: var(--ds-advanced-color-boolean-indicator, #ffffff);--ds-auro-checkbox-container-color: var(--ds-advanced-color-boolean-isfalse, #ffffff);--ds-auro-checkbox-label-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-checkbox-outline-color: transparent;--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
|
|
59
59
|
|
|
@@ -239,8 +239,8 @@ class AuroCheckbox extends i$2 {
|
|
|
239
239
|
},
|
|
240
240
|
|
|
241
241
|
/**
|
|
242
|
+
* The id for input node.
|
|
242
243
|
* @private
|
|
243
|
-
* id for input node
|
|
244
244
|
*/
|
|
245
245
|
inputId: {
|
|
246
246
|
type: String,
|
|
@@ -265,7 +265,7 @@ class AuroCheckbox extends i$2 {
|
|
|
265
265
|
/**
|
|
266
266
|
* Handles the change event for the checkbox input.
|
|
267
267
|
* Updates the checked state and dispatches a corresponding custom event.
|
|
268
|
-
* This custom event is only for the purpose of supporting IE
|
|
268
|
+
* This custom event is only for the purpose of supporting IE.
|
|
269
269
|
* @private
|
|
270
270
|
* @param {Event} event - The change event from the checkbox input.
|
|
271
271
|
* @returns {void}
|
|
@@ -338,8 +338,16 @@ class AuroCheckbox extends i$2 {
|
|
|
338
338
|
|
|
339
339
|
this.inputId = this.id ? `${this.id}-input` : window.crypto.randomUUID();
|
|
340
340
|
|
|
341
|
-
this.addEventListener('click', () => {
|
|
342
|
-
|
|
341
|
+
this.addEventListener('click', (evt) => {
|
|
342
|
+
// Only prevent default for real user events, not tests or programmatic calls
|
|
343
|
+
if (evt.isTrusted) {
|
|
344
|
+
evt.preventDefault();
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
if (!this.disabled) {
|
|
348
|
+
this.checked = !this.checked;
|
|
349
|
+
this.handleFocusin();
|
|
350
|
+
}
|
|
343
351
|
});
|
|
344
352
|
|
|
345
353
|
this.addEventListener('focusin', () => {
|
|
@@ -359,7 +367,7 @@ class AuroCheckbox extends i$2 {
|
|
|
359
367
|
* @private
|
|
360
368
|
* @returns {HTMLElement}
|
|
361
369
|
*/
|
|
362
|
-
|
|
370
|
+
render() {
|
|
363
371
|
const labelClasses = {
|
|
364
372
|
'label': true,
|
|
365
373
|
'label--cbx': true,
|
|
@@ -367,22 +375,24 @@ class AuroCheckbox extends i$2 {
|
|
|
367
375
|
};
|
|
368
376
|
|
|
369
377
|
return x`
|
|
370
|
-
<div class="cbxContainer" part="checkbox">
|
|
371
|
-
<
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
378
|
+
<div class="cbxContainer body-default" part="checkbox">
|
|
379
|
+
<div class="inputContainer">
|
|
380
|
+
<input
|
|
381
|
+
class="util_displayHiddenVisually cbx--input"
|
|
382
|
+
part="checkbox-input"
|
|
383
|
+
@change="${this.handleChange}"
|
|
384
|
+
@input="${this.handleInput}"
|
|
385
|
+
?disabled="${this.disabled}"
|
|
386
|
+
.checked="${this.checked}"
|
|
387
|
+
id="${this.inputId}"
|
|
388
|
+
name="${o$1(this.name)}"
|
|
389
|
+
type="checkbox"
|
|
390
|
+
.value="${this.value}"
|
|
391
|
+
/>
|
|
392
|
+
${this.checked ? this.generateIconHtml() : undefined}
|
|
393
|
+
</div>
|
|
383
394
|
|
|
384
395
|
<label for="${this.inputId}" class="${e(labelClasses)}" part="checkbox-label">
|
|
385
|
-
${this.checked ? this.generateIconHtml() : undefined}
|
|
386
396
|
<slot></slot>
|
|
387
397
|
</label>
|
|
388
398
|
</div>
|
|
@@ -873,19 +883,19 @@ class AuroFormValidation {
|
|
|
873
883
|
{
|
|
874
884
|
check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
|
|
875
885
|
validity: 'tooShort',
|
|
876
|
-
message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
|
|
886
|
+
message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
|
|
877
887
|
},
|
|
878
888
|
{
|
|
879
889
|
check: (e) => e.value?.length > e.maxLength,
|
|
880
890
|
validity: 'tooLong',
|
|
881
|
-
message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
|
|
891
|
+
message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
|
|
882
892
|
}
|
|
883
893
|
],
|
|
884
894
|
pattern: [
|
|
885
895
|
{
|
|
886
896
|
check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
|
|
887
897
|
validity: 'patternMismatch',
|
|
888
|
-
message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
|
|
898
|
+
message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
|
|
889
899
|
}
|
|
890
900
|
]
|
|
891
901
|
},
|
|
@@ -1080,10 +1090,10 @@ class AuroFormValidation {
|
|
|
1080
1090
|
if (!hasValue && elem.required && elem.touched) {
|
|
1081
1091
|
elem.validity = 'valueMissing';
|
|
1082
1092
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
1083
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
1093
|
+
} else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
1084
1094
|
this.validateType(elem);
|
|
1085
1095
|
this.validateElementAttributes(elem);
|
|
1086
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
1096
|
+
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
1087
1097
|
this.validateElementAttributes(elem);
|
|
1088
1098
|
}
|
|
1089
1099
|
}
|
|
@@ -1092,7 +1102,9 @@ class AuroFormValidation {
|
|
|
1092
1102
|
elem.validity = this.auroInputElements[0].validity;
|
|
1093
1103
|
elem.errorMessage = this.auroInputElements[0].errorMessage;
|
|
1094
1104
|
|
|
1095
|
-
|
|
1105
|
+
// combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib.
|
|
1106
|
+
// combobox's 2nd input will have noValidate set true.
|
|
1107
|
+
if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
|
|
1096
1108
|
elem.validity = this.auroInputElements[1].validity;
|
|
1097
1109
|
elem.errorMessage = this.auroInputElements[1].errorMessage;
|
|
1098
1110
|
}
|
|
@@ -1212,13 +1224,13 @@ class AuroDependencyVersioning {
|
|
|
1212
1224
|
}
|
|
1213
1225
|
}
|
|
1214
1226
|
|
|
1215
|
-
var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}.displayFlex legend+slot{display:flex;white-space:nowrap}fieldset{all:unset}legend{margin-bottom:var(--ds-size-150, 0.75rem)}`;
|
|
1227
|
+
var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}.displayFlex legend+slot{display:flex;white-space:nowrap}fieldset{all:unset}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
|
|
1216
1228
|
|
|
1217
1229
|
var colorCss$1 = i$5`:host{color:var(--ds-auro-checkbox-group-text-color)}:host([disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-checkbox-group-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
1218
1230
|
|
|
1219
|
-
var colorCss = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-
|
|
1231
|
+
var colorCss = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
1220
1232
|
|
|
1221
|
-
var styleCss = i$5
|
|
1233
|
+
var styleCss = i$5`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
1222
1234
|
|
|
1223
1235
|
var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
1224
1236
|
|
|
@@ -1432,7 +1444,7 @@ var helpTextVersion = '1.0.0';
|
|
|
1432
1444
|
* The auro-checkbox-group element is a wrapper for auro-checkbox element.
|
|
1433
1445
|
*
|
|
1434
1446
|
* @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
|
|
1435
|
-
* @slot {HTMLSlotElement} optionalLabel - Allows
|
|
1447
|
+
* @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
|
|
1436
1448
|
* @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
|
|
1437
1449
|
* @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
|
|
1438
1450
|
*/
|
|
@@ -1800,20 +1812,20 @@ class AuroCheckboxGroup extends i$2 {
|
|
|
1800
1812
|
|
|
1801
1813
|
return u`
|
|
1802
1814
|
<fieldset class="${e(groupClasses)}">
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
: u`<
|
|
1806
|
-
|
|
1815
|
+
<legend>
|
|
1816
|
+
<slot name="legend"></slot>
|
|
1817
|
+
${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
|
|
1818
|
+
</legend>
|
|
1807
1819
|
<slot @slotchange=${this.handleItems}></slot>
|
|
1808
1820
|
</fieldset>
|
|
1809
1821
|
|
|
1810
1822
|
${!this.validity || this.validity === undefined || this.validity === 'valid'
|
|
1811
1823
|
? u`
|
|
1812
|
-
<${this.helpTextTag}
|
|
1824
|
+
<${this.helpTextTag} part="helpText" ?onDark="${this.onDark}">
|
|
1813
1825
|
<slot name="helpText"></slot>
|
|
1814
1826
|
</${this.helpTextTag}>`
|
|
1815
1827
|
: u`
|
|
1816
|
-
<${this.helpTextTag} error
|
|
1828
|
+
<${this.helpTextTag} error ?onDark="${this.onDark}" role="alert" aria-live="assertive" part="helpText">
|
|
1817
1829
|
${this.errorMessage}
|
|
1818
1830
|
</${this.helpTextTag}>`
|
|
1819
1831
|
}
|
|
@@ -16,18 +16,24 @@
|
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
-
<title>Auro Web Component
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css"
|
|
26
|
-
|
|
19
|
+
<title>Auro Web Component Demo | auro-checkbox</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-checkbox's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem-dev/webcorestylesheets@0.0.0-pr243.4/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
27
34
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
28
35
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
29
|
-
|
|
30
|
-
</head>
|
|
36
|
+
</head>
|
|
31
37
|
<body class="auro-markdown">
|
|
32
38
|
<main></main>
|
|
33
39
|
|
|
@@ -34,7 +34,7 @@ The `<auro-checkbox>` element should be used in situations where users may:
|
|
|
34
34
|
<span slot="legend">Form label goes here</span>
|
|
35
35
|
<auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
|
|
36
36
|
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
|
|
37
|
-
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
|
|
37
|
+
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
|
|
38
38
|
<auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
|
|
39
39
|
</auro-checkbox-group>
|
|
40
40
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -61,7 +61,7 @@ The `<auro-checkbox>` element should be used in situations where users may:
|
|
|
61
61
|
<span slot="legend">Form label goes here</span>
|
|
62
62
|
<auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
|
|
63
63
|
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
|
|
64
|
-
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
|
|
64
|
+
<auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option that has some extra text that should wrap when rendered in a narrow container</auro-checkbox>
|
|
65
65
|
<auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
|
|
66
66
|
</auro-checkbox-group>
|
|
67
67
|
```
|