@aurodesignsystem-dev/auro-formkit 0.0.0-pr755.0 → 0.0.0-pr756.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/api.html +10 -16
- package/components/checkbox/demo/api.min.js +2 -2
- package/components/checkbox/demo/index.html +10 -16
- package/components/checkbox/demo/index.min.js +2 -2
- package/components/checkbox/demo/readme.html +9 -16
- package/components/checkbox/dist/index.js +2 -2
- package/components/checkbox/dist/registered.js +2 -2
- package/components/combobox/demo/api.html +10 -16
- package/components/combobox/demo/index.html +10 -16
- package/components/combobox/demo/readme.html +9 -16
- package/components/counter/demo/api.html +10 -16
- package/components/counter/demo/api.md +127 -0
- package/components/counter/demo/api.min.js +530 -312
- package/components/counter/demo/index.html +10 -16
- package/components/counter/demo/index.md +82 -0
- package/components/counter/demo/index.min.js +530 -312
- package/components/counter/demo/readme.html +9 -16
- package/components/counter/dist/auro-counter-group.d.ts +70 -13
- package/components/counter/dist/auro-counter.d.ts +10 -0
- package/components/counter/dist/index.js +530 -312
- package/components/counter/dist/registered.js +530 -312
- package/components/datepicker/demo/api.html +10 -16
- package/components/datepicker/demo/index.html +10 -16
- package/components/datepicker/demo/readme.html +9 -16
- package/components/dropdown/demo/api.html +10 -16
- package/components/dropdown/demo/index.html +10 -16
- package/components/dropdown/demo/readme.html +9 -16
- package/components/form/demo/api.html +9 -16
- package/components/form/demo/autocomplete.html +3 -19
- package/components/form/demo/index.html +9 -16
- package/components/form/demo/readme.html +9 -16
- package/components/form/demo/working.html +13 -19
- package/components/input/demo/api.html +10 -16
- package/components/input/demo/index.html +10 -16
- package/components/input/demo/readme.html +9 -16
- package/components/menu/demo/api.html +32 -16
- package/components/menu/demo/index.html +10 -16
- package/components/menu/demo/readme.html +9 -16
- package/components/radio/demo/api.html +10 -16
- package/components/radio/demo/index.html +10 -16
- package/components/radio/demo/readme.html +9 -16
- package/components/select/demo/api.html +10 -16
- package/components/select/demo/index.html +11 -16
- package/components/select/demo/readme.html +9 -16
- package/package.json +4 -4
|
@@ -16,24 +16,18 @@
|
|
|
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"
|
|
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 -->
|
|
19
|
+
<title>Auro Web Component Generator | auro-checkbox custom element</title>
|
|
20
|
+
<link
|
|
21
|
+
rel="stylesheet"
|
|
22
|
+
type="text/css"
|
|
23
|
+
href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
|
|
24
|
+
/>
|
|
25
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
|
|
26
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
|
|
34
27
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
28
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
|
-
|
|
29
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
|
|
30
|
+
</head>
|
|
37
31
|
<body class="auro-markdown">
|
|
38
32
|
<main></main>
|
|
39
33
|
|
|
@@ -51,7 +51,7 @@ 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}.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}`;
|
|
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;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);line-height:var(--ds-size-400, 2rem)}.cbxContainer:hover{cursor:pointer}.label{display:block}.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
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
|
|
|
@@ -375,7 +375,7 @@ class AuroCheckbox extends i$2 {
|
|
|
375
375
|
};
|
|
376
376
|
|
|
377
377
|
return x`
|
|
378
|
-
<div class="cbxContainer
|
|
378
|
+
<div class="cbxContainer" part="checkbox">
|
|
379
379
|
<div class="inputContainer">
|
|
380
380
|
<input
|
|
381
381
|
class="util_displayHiddenVisually cbx--input"
|
|
@@ -16,24 +16,18 @@
|
|
|
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"
|
|
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 -->
|
|
19
|
+
<title>Auro Web Component Generator | auro-checkbox custom element</title>
|
|
20
|
+
<link
|
|
21
|
+
rel="stylesheet"
|
|
22
|
+
type="text/css"
|
|
23
|
+
href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
|
|
24
|
+
/>
|
|
25
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
|
|
26
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
|
|
34
27
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
28
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
|
-
|
|
29
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
|
|
30
|
+
</head>
|
|
37
31
|
<body class="auro-markdown">
|
|
38
32
|
<main></main>
|
|
39
33
|
|
|
@@ -43,7 +43,7 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
|
|
|
43
43
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
44
44
|
*/const o$1=o=>o??E;
|
|
45
45
|
|
|
46
|
-
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}`;
|
|
46
|
+
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;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);line-height:var(--ds-size-400, 2rem)}.cbxContainer:hover{cursor:pointer}.label{display:block}.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}`;
|
|
47
47
|
|
|
48
48
|
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)}`;
|
|
49
49
|
|
|
@@ -367,7 +367,7 @@ class AuroCheckbox extends i$2 {
|
|
|
367
367
|
};
|
|
368
368
|
|
|
369
369
|
return x`
|
|
370
|
-
<div class="cbxContainer
|
|
370
|
+
<div class="cbxContainer" part="checkbox">
|
|
371
371
|
<div class="inputContainer">
|
|
372
372
|
<input
|
|
373
373
|
class="util_displayHiddenVisually cbx--input"
|
|
@@ -16,24 +16,17 @@
|
|
|
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"
|
|
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 -->
|
|
19
|
+
<title>Auro Web Component Generator | auro-checkbox custom element</title>
|
|
20
|
+
<link
|
|
21
|
+
rel="stylesheet"
|
|
22
|
+
type="text/css"
|
|
23
|
+
href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
|
|
24
|
+
/>
|
|
25
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
|
|
26
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
|
|
34
27
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
28
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
|
-
</head>
|
|
29
|
+
</head>
|
|
37
30
|
<body class="auro-markdown">
|
|
38
31
|
<main></main>
|
|
39
32
|
|
|
@@ -3,7 +3,7 @@ import { classMap } from 'lit/directives/class-map.js';
|
|
|
3
3
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
4
4
|
import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
|
|
5
5
|
|
|
6
|
-
var styleCss$2 = css`: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}`;
|
|
6
|
+
var styleCss$2 = css`: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;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);line-height:var(--ds-size-400, 2rem)}.cbxContainer:hover{cursor:pointer}.label{display:block}.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}`;
|
|
7
7
|
|
|
8
8
|
var colorCss$2 = css`: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)}`;
|
|
9
9
|
|
|
@@ -327,7 +327,7 @@ class AuroCheckbox extends LitElement {
|
|
|
327
327
|
};
|
|
328
328
|
|
|
329
329
|
return html`
|
|
330
|
-
<div class="cbxContainer
|
|
330
|
+
<div class="cbxContainer" part="checkbox">
|
|
331
331
|
<div class="inputContainer">
|
|
332
332
|
<input
|
|
333
333
|
class="util_displayHiddenVisually cbx--input"
|
|
@@ -3,7 +3,7 @@ import { classMap } from 'lit/directives/class-map.js';
|
|
|
3
3
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
4
4
|
import { unsafeStatic, literal, html as html$1 } from 'lit/static-html.js';
|
|
5
5
|
|
|
6
|
-
var styleCss$2 = css`: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}`;
|
|
6
|
+
var styleCss$2 = css`: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;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);line-height:var(--ds-size-400, 2rem)}.cbxContainer:hover{cursor:pointer}.label{display:block}.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}`;
|
|
7
7
|
|
|
8
8
|
var colorCss$2 = css`: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)}`;
|
|
9
9
|
|
|
@@ -327,7 +327,7 @@ class AuroCheckbox extends LitElement {
|
|
|
327
327
|
};
|
|
328
328
|
|
|
329
329
|
return html`
|
|
330
|
-
<div class="cbxContainer
|
|
330
|
+
<div class="cbxContainer" part="checkbox">
|
|
331
331
|
<div class="inputContainer">
|
|
332
332
|
<input
|
|
333
333
|
class="util_displayHiddenVisually cbx--input"
|
|
@@ -16,24 +16,18 @@
|
|
|
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"
|
|
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/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
-
|
|
33
|
-
<!-- Demo Specific Styles -->
|
|
19
|
+
<title>Auro Web Component Generator | auro-combobox custom element</title>
|
|
20
|
+
<link
|
|
21
|
+
rel="stylesheet"
|
|
22
|
+
type="text/css"
|
|
23
|
+
href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
|
|
24
|
+
/>
|
|
25
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
|
|
26
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
|
|
34
27
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
28
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
|
-
|
|
29
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
|
|
30
|
+
</head>
|
|
37
31
|
<body class="auro-markdown">
|
|
38
32
|
<main></main>
|
|
39
33
|
|
|
@@ -16,24 +16,18 @@
|
|
|
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"
|
|
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/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
-
|
|
33
|
-
<!-- Demo Specific Styles -->
|
|
19
|
+
<title>Auro Web Component Generator | auro-combobox custom element</title>
|
|
20
|
+
<link
|
|
21
|
+
rel="stylesheet"
|
|
22
|
+
type="text/css"
|
|
23
|
+
href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
|
|
24
|
+
/>
|
|
25
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
|
|
26
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
|
|
34
27
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
28
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
|
-
|
|
29
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
|
|
30
|
+
</head>
|
|
37
31
|
<body class="auro-markdown">
|
|
38
32
|
<main></main>
|
|
39
33
|
|
|
@@ -16,24 +16,17 @@
|
|
|
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"
|
|
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/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
-
|
|
33
|
-
<!-- Demo Specific Styles -->
|
|
19
|
+
<title>Auro Web Component Generator | auro-combobox custom element</title>
|
|
20
|
+
<link
|
|
21
|
+
rel="stylesheet"
|
|
22
|
+
type="text/css"
|
|
23
|
+
href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
|
|
24
|
+
/>
|
|
25
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
|
|
26
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
|
|
34
27
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
28
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
|
-
</head>
|
|
29
|
+
</head>
|
|
37
30
|
<body class="auro-markdown">
|
|
38
31
|
<main></main>
|
|
39
32
|
|
|
@@ -16,24 +16,18 @@
|
|
|
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"
|
|
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/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
-
|
|
33
|
-
<!-- Demo Specific Styles -->
|
|
19
|
+
<title>Auro Web Component Generator | auro-counter custom element</title>
|
|
20
|
+
<link
|
|
21
|
+
rel="stylesheet"
|
|
22
|
+
type="text/css"
|
|
23
|
+
href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
|
|
24
|
+
/>
|
|
25
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
|
|
26
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
|
|
34
27
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
28
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
|
-
|
|
29
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
|
|
30
|
+
</head>
|
|
37
31
|
<body class="auro-markdown">
|
|
38
32
|
<main></main>
|
|
39
33
|
|