@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.7 → 0.0.0-pr624.70
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 +1262 -81
- package/components/bibtemplate/dist/registered.js +1262 -81
- 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 +65 -42
- package/components/checkbox/demo/index.html +16 -10
- package/components/checkbox/demo/index.md +2 -2
- package/components/checkbox/demo/index.min.js +65 -42
- 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 +65 -42
- package/components/checkbox/dist/registered.js +65 -42
- package/components/combobox/demo/api.html +16 -10
- package/components/combobox/demo/api.md +113 -8
- package/components/combobox/demo/api.min.js +3096 -870
- package/components/combobox/demo/index.html +16 -10
- package/components/combobox/demo/index.md +6 -30
- package/components/combobox/demo/index.min.js +3096 -870
- package/components/combobox/demo/readme.html +16 -9
- package/components/combobox/dist/auro-combobox.d.ts +42 -8
- package/components/combobox/dist/index.js +2878 -748
- package/components/combobox/dist/registered.js +2878 -748
- package/components/counter/demo/api.html +17 -10
- package/components/counter/demo/api.md +156 -21
- package/components/counter/demo/api.min.js +3363 -652
- package/components/counter/demo/index.html +17 -10
- package/components/counter/demo/index.md +185 -34
- package/components/counter/demo/index.min.js +3363 -652
- 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 +3364 -653
- package/components/counter/dist/registered.js +3364 -653
- package/components/datepicker/demo/api.html +16 -10
- package/components/datepicker/demo/api.md +25 -16
- package/components/datepicker/demo/api.min.js +11857 -8105
- package/components/datepicker/demo/index.html +16 -10
- package/components/datepicker/demo/index.md +71 -4
- package/components/datepicker/demo/index.min.js +11857 -8105
- package/components/datepicker/demo/readme.html +16 -9
- package/components/datepicker/dist/auro-datepicker.d.ts +89 -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 +8691 -4939
- package/components/datepicker/dist/popoverVersion.d.ts +1 -1
- package/components/datepicker/dist/registered.js +8691 -4939
- 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 +228 -130
- package/components/input/demo/api.min.js +908 -246
- package/components/input/demo/index.html +16 -10
- package/components/input/demo/index.md +48 -32
- package/components/input/demo/index.min.js +908 -246
- 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 +38 -10
- package/components/input/dist/buttonVersion.d.ts +1 -1
- package/components/input/dist/iconVersion.d.ts +1 -1
- package/components/input/dist/index.js +908 -246
- package/components/input/dist/registered.js +908 -246
- 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 +88 -90
- package/components/radio/demo/index.html +16 -10
- package/components/radio/demo/index.min.js +88 -90
- 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 +88 -90
- package/components/radio/dist/registered.js +88 -90
- 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 +2148 -635
- package/components/select/demo/index.html +17 -11
- package/components/select/demo/index.md +45 -158
- package/components/select/demo/index.min.js +2148 -623
- package/components/select/demo/readme.html +16 -9
- package/components/select/dist/auro-select.d.ts +49 -16
- package/components/select/dist/index.js +2078 -649
- package/components/select/dist/registered.js +2078 -649
- package/package.json +30 -27
- /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
|
},
|
|
@@ -1032,13 +1042,24 @@ class AuroFormValidation {
|
|
|
1032
1042
|
this.getInputElements(elem);
|
|
1033
1043
|
this.getAuroInputs(elem);
|
|
1034
1044
|
|
|
1035
|
-
//
|
|
1045
|
+
// Check if validation should run
|
|
1036
1046
|
let validationShouldRun =
|
|
1047
|
+
|
|
1048
|
+
// If the validation was forced
|
|
1037
1049
|
force ||
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1050
|
+
|
|
1051
|
+
// If the validation should run on input
|
|
1052
|
+
elem.validateOnInput ||
|
|
1053
|
+
|
|
1054
|
+
// State-based checks
|
|
1055
|
+
(
|
|
1056
|
+
// Element is not currently focused
|
|
1057
|
+
!elem.contains(document.activeElement) && // native input is not focused directly
|
|
1058
|
+
!document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
|
|
1059
|
+
|
|
1060
|
+
// And element has been touched or is untouched but has a value
|
|
1061
|
+
( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
|
|
1062
|
+
);
|
|
1042
1063
|
|
|
1043
1064
|
if (elem.hasAttribute('error')) {
|
|
1044
1065
|
elem.validity = 'customError';
|
|
@@ -1080,10 +1101,10 @@ class AuroFormValidation {
|
|
|
1080
1101
|
if (!hasValue && elem.required && elem.touched) {
|
|
1081
1102
|
elem.validity = 'valueMissing';
|
|
1082
1103
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
1083
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
1104
|
+
} else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
1084
1105
|
this.validateType(elem);
|
|
1085
1106
|
this.validateElementAttributes(elem);
|
|
1086
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
1107
|
+
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
1087
1108
|
this.validateElementAttributes(elem);
|
|
1088
1109
|
}
|
|
1089
1110
|
}
|
|
@@ -1092,7 +1113,9 @@ class AuroFormValidation {
|
|
|
1092
1113
|
elem.validity = this.auroInputElements[0].validity;
|
|
1093
1114
|
elem.errorMessage = this.auroInputElements[0].errorMessage;
|
|
1094
1115
|
|
|
1095
|
-
|
|
1116
|
+
// combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib.
|
|
1117
|
+
// combobox's 2nd input will have noValidate set true.
|
|
1118
|
+
if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
|
|
1096
1119
|
elem.validity = this.auroInputElements[1].validity;
|
|
1097
1120
|
elem.errorMessage = this.auroInputElements[1].errorMessage;
|
|
1098
1121
|
}
|
|
@@ -1212,13 +1235,13 @@ class AuroDependencyVersioning {
|
|
|
1212
1235
|
}
|
|
1213
1236
|
}
|
|
1214
1237
|
|
|
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)}`;
|
|
1238
|
+
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
1239
|
|
|
1217
1240
|
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
1241
|
|
|
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-
|
|
1242
|
+
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
1243
|
|
|
1221
|
-
var styleCss = i$5
|
|
1244
|
+
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
1245
|
|
|
1223
1246
|
var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
1224
1247
|
|
|
@@ -1432,7 +1455,7 @@ var helpTextVersion = '1.0.0';
|
|
|
1432
1455
|
* The auro-checkbox-group element is a wrapper for auro-checkbox element.
|
|
1433
1456
|
*
|
|
1434
1457
|
* @slot {HTMLSlotElement} legend - Allows for the legend to be overridden.
|
|
1435
|
-
* @slot {HTMLSlotElement} optionalLabel - Allows
|
|
1458
|
+
* @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
|
|
1436
1459
|
* @slot {HTMLSlotElement} helpText - Allows for the helper text to be overridden.
|
|
1437
1460
|
* @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
|
|
1438
1461
|
*/
|
|
@@ -1800,20 +1823,20 @@ class AuroCheckboxGroup extends i$2 {
|
|
|
1800
1823
|
|
|
1801
1824
|
return u`
|
|
1802
1825
|
<fieldset class="${e(groupClasses)}">
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
: u`<
|
|
1806
|
-
|
|
1826
|
+
<legend>
|
|
1827
|
+
<slot name="legend"></slot>
|
|
1828
|
+
${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
|
|
1829
|
+
</legend>
|
|
1807
1830
|
<slot @slotchange=${this.handleItems}></slot>
|
|
1808
1831
|
</fieldset>
|
|
1809
1832
|
|
|
1810
1833
|
${!this.validity || this.validity === undefined || this.validity === 'valid'
|
|
1811
1834
|
? u`
|
|
1812
|
-
<${this.helpTextTag}
|
|
1835
|
+
<${this.helpTextTag} part="helpText" ?onDark="${this.onDark}">
|
|
1813
1836
|
<slot name="helpText"></slot>
|
|
1814
1837
|
</${this.helpTextTag}>`
|
|
1815
1838
|
: u`
|
|
1816
|
-
<${this.helpTextTag} error
|
|
1839
|
+
<${this.helpTextTag} error ?onDark="${this.onDark}" role="alert" aria-live="assertive" part="helpText">
|
|
1817
1840
|
${this.errorMessage}
|
|
1818
1841
|
</${this.helpTextTag}>`
|
|
1819
1842
|
}
|
|
@@ -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
|
```
|