@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.1 → 0.0.0-pr1451.2
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/README.md +23 -37
- package/components/checkbox/demo/api.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/demo/readme.md +0 -2
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/README.md +43 -57
- package/components/combobox/demo/accessibility.html +22 -11
- package/components/combobox/demo/api.html +27 -16
- package/components/combobox/demo/api.min.js +4 -4
- package/components/combobox/demo/design.html +27 -16
- package/components/combobox/demo/index.html +28 -22
- package/components/combobox/demo/index.min.js +4 -4
- package/components/combobox/demo/install.html +26 -16
- package/components/combobox/demo/install.md +0 -2
- package/components/combobox/demo/install.min.js +4 -4
- package/components/combobox/demo/keyboard-behavior.html +22 -11
- package/components/combobox/demo/readme.html +27 -16
- package/components/combobox/demo/readme.md +0 -2
- package/components/combobox/demo/styles.css +911 -71
- package/components/combobox/demo/voiceover.html +22 -11
- package/components/combobox/dist/index.js +4 -4
- package/components/combobox/dist/registered.js +4 -4
- package/components/counter/README.md +39 -53
- package/components/counter/demo/api.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/demo/readme.md +0 -2
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/README.md +19 -33
- package/components/datepicker/demo/api.min.js +4 -4
- package/components/datepicker/demo/index.min.js +4 -4
- package/components/datepicker/demo/readme.md +0 -2
- package/components/datepicker/dist/index.js +4 -4
- package/components/datepicker/dist/registered.js +4 -4
- package/components/dropdown/README.md +39 -53
- package/components/dropdown/demo/api.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/demo/readme.md +0 -2
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/README.md +14 -30
- package/components/form/demo/api.min.js +16 -16
- package/components/form/demo/index.min.js +16 -16
- package/components/form/demo/readme.md +0 -2
- package/components/input/README.md +17 -31
- package/components/input/demo/api.min.js +2 -2
- package/components/input/demo/index.min.js +2 -2
- package/components/input/demo/readme.md +0 -2
- package/components/input/dist/index.js +2 -2
- package/components/input/dist/registered.js +2 -2
- package/components/menu/README.md +23 -37
- package/components/menu/demo/readme.md +0 -2
- package/components/radio/README.md +21 -35
- package/components/radio/demo/api.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/demo/readme.md +0 -2
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/README.md +41 -73
- package/components/select/demo/accessibility.html +23 -20
- package/components/select/demo/api.html +45 -10
- package/components/select/demo/api.min.js +2 -2
- package/components/select/demo/design.html +94 -0
- package/components/select/demo/design.md +391 -0
- package/components/select/demo/getting-started.html +125 -0
- package/components/select/demo/getting-started.js +9 -0
- package/components/select/demo/getting-started.md +1020 -0
- package/components/select/demo/getting-started.min.js +10490 -0
- package/components/select/demo/index.html +55 -241
- package/components/select/demo/index.md +38 -98
- package/components/select/demo/index.min.js +2 -2
- package/components/select/demo/install.md +92 -0
- package/components/select/demo/keyboard-behavior.html +23 -11
- package/components/select/demo/keyboard-behavior.md +247 -36
- package/components/select/demo/keyboardBehavior.html +22 -11
- package/components/select/demo/layout.html +45 -10
- package/components/select/demo/layout.md +71 -260
- package/components/select/demo/readme.html +46 -11
- package/components/select/demo/readme.md +25 -45
- package/components/select/demo/styles.css +1026 -0
- package/components/select/demo/voiceover.html +23 -11
- package/components/select/dist/index.js +2 -2
- package/components/select/dist/registered.js +2 -2
- package/custom-elements.json +1667 -1667
- package/package.json +1 -1
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
19
|
<title>Auro Web Component Demo | auro-combobox | VoiceOver</title>
|
|
20
20
|
|
|
21
|
-
<!--
|
|
22
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/
|
|
21
|
+
<!-- highlight.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
|
|
23
23
|
|
|
24
24
|
<!-- Legacy reference is still needed to support auro-combobox's use of legacy token values at this time -->
|
|
25
25
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
@@ -48,15 +48,26 @@
|
|
|
48
48
|
<main></main>
|
|
49
49
|
|
|
50
50
|
<script type="module">
|
|
51
|
-
import 'https://
|
|
52
|
-
import 'https://
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
51
|
+
import {unified} from 'https://esm.sh/unified';
|
|
52
|
+
import remarkParse from 'https://esm.sh/remark-parse';
|
|
53
|
+
import remarkGfm from 'https://esm.sh/remark-gfm';
|
|
54
|
+
import remarkRehype from 'https://esm.sh/remark-rehype';
|
|
55
|
+
import rehypeRaw from 'https://esm.sh/rehype-raw';
|
|
56
|
+
import rehypeHighlight from 'https://esm.sh/rehype-highlight';
|
|
57
|
+
import rehypeStringify from 'https://esm.sh/rehype-stringify';
|
|
58
|
+
|
|
59
|
+
const response = await fetch('./voiceover.md');
|
|
60
|
+
const text = await response.text();
|
|
61
|
+
const result = await unified()
|
|
62
|
+
.use(remarkParse)
|
|
63
|
+
.use(remarkGfm)
|
|
64
|
+
.use(remarkRehype, { allowDangerousHtml: true })
|
|
65
|
+
.use(rehypeRaw)
|
|
66
|
+
.use(rehypeHighlight)
|
|
67
|
+
.use(rehypeStringify)
|
|
68
|
+
.process(text);
|
|
69
|
+
|
|
70
|
+
document.querySelector('main').innerHTML = String(result);
|
|
60
71
|
</script>
|
|
61
72
|
|
|
62
73
|
<!-- If additional elements are needed for the demo, add them here. -->
|
|
@@ -5073,7 +5073,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
5073
5073
|
}
|
|
5074
5074
|
};
|
|
5075
5075
|
|
|
5076
|
-
var formkitVersion$2 = '
|
|
5076
|
+
var formkitVersion$2 = '202604281911';
|
|
5077
5077
|
|
|
5078
5078
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
5079
5079
|
static get properties() {
|
|
@@ -6215,7 +6215,7 @@ var styleCss$1$1 = css`.util_displayInline{display:inline}.util_displayInlineBlo
|
|
|
6215
6215
|
|
|
6216
6216
|
var styleDefaultCss = css`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{text-align:left}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
|
|
6217
6217
|
|
|
6218
|
-
var colorBaseCss = css`.wrapper{border-color:
|
|
6218
|
+
var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([appearance=inverse])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within,:host([appearance=inverse]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper,:host([appearance=inverse]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host(:not([ondark])[disabled]),:host(:not([appearance=inverse])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
6219
6219
|
|
|
6220
6220
|
var tokensCss$1 = css`:host(:not([ondark])),:host(:not([appearance=inverse])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]),:host([appearance=inverse]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-input-outline-color: transparent}`;
|
|
6221
6221
|
|
|
@@ -12818,7 +12818,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
12818
12818
|
}
|
|
12819
12819
|
};
|
|
12820
12820
|
|
|
12821
|
-
var formkitVersion$1 = '
|
|
12821
|
+
var formkitVersion$1 = '202604281911';
|
|
12822
12822
|
|
|
12823
12823
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12824
12824
|
// See LICENSE in the project root for license information.
|
|
@@ -13883,7 +13883,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
13883
13883
|
}
|
|
13884
13884
|
}
|
|
13885
13885
|
|
|
13886
|
-
var formkitVersion = '
|
|
13886
|
+
var formkitVersion = '202604281911';
|
|
13887
13887
|
|
|
13888
13888
|
var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
13889
13889
|
|
|
@@ -5073,7 +5073,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
5073
5073
|
}
|
|
5074
5074
|
};
|
|
5075
5075
|
|
|
5076
|
-
var formkitVersion$2 = '
|
|
5076
|
+
var formkitVersion$2 = '202604281911';
|
|
5077
5077
|
|
|
5078
5078
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
5079
5079
|
static get properties() {
|
|
@@ -6215,7 +6215,7 @@ var styleCss$1$1 = css`.util_displayInline{display:inline}.util_displayInlineBlo
|
|
|
6215
6215
|
|
|
6216
6216
|
var styleDefaultCss = css`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{text-align:left}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
|
|
6217
6217
|
|
|
6218
|
-
var colorBaseCss = css`.wrapper{border-color:
|
|
6218
|
+
var colorBaseCss = css`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([appearance=inverse])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within,:host([appearance=inverse]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper,:host([appearance=inverse]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host(:not([ondark])[disabled]),:host(:not([appearance=inverse])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
6219
6219
|
|
|
6220
6220
|
var tokensCss$1 = css`:host(:not([ondark])),:host(:not([appearance=inverse])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]),:host([appearance=inverse]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-input-outline-color: transparent}`;
|
|
6221
6221
|
|
|
@@ -12818,7 +12818,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
12818
12818
|
}
|
|
12819
12819
|
};
|
|
12820
12820
|
|
|
12821
|
-
var formkitVersion$1 = '
|
|
12821
|
+
var formkitVersion$1 = '202604281911';
|
|
12822
12822
|
|
|
12823
12823
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12824
12824
|
// See LICENSE in the project root for license information.
|
|
@@ -13883,7 +13883,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
13883
13883
|
}
|
|
13884
13884
|
}
|
|
13885
13885
|
|
|
13886
|
-
var formkitVersion = '
|
|
13886
|
+
var formkitVersion = '202604281911';
|
|
13887
13887
|
|
|
13888
13888
|
var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
13889
13889
|
|
|
@@ -43,11 +43,7 @@ The `auro-counter` element should be used in situations where users may:
|
|
|
43
43
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
|
|
44
44
|
<!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
```shell
|
|
49
|
-
$ npm i @aurodesignsystem/auro-formkit
|
|
50
|
-
```
|
|
46
|
+
<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
|
|
51
47
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
52
48
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
|
|
53
49
|
<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
|
|
@@ -56,13 +52,11 @@ $ npm i @aurodesignsystem/auro-formkit
|
|
|
56
52
|
|
|
57
53
|
When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
|
|
58
54
|
|
|
59
|
-
|
|
60
|
-
{
|
|
55
|
+
<pre class="language-json"><code class="language-json">{
|
|
61
56
|
"compilerOptions": {
|
|
62
57
|
"moduleResolution": "bundler"
|
|
63
58
|
}
|
|
64
|
-
}
|
|
65
|
-
```
|
|
59
|
+
}</code></pre>
|
|
66
60
|
|
|
67
61
|
This configuration enables proper module resolution for the component's TypeScript files.
|
|
68
62
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -73,9 +67,7 @@ This configuration enables proper module resolution for the component's TypeScri
|
|
|
73
67
|
<!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
|
|
74
68
|
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
|
|
75
69
|
|
|
76
|
-
|
|
77
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-counter/+esm"></script>
|
|
78
|
-
```
|
|
70
|
+
<pre class="language-html"><code class="language-html"><script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-counter/+esm"></script></code></pre>
|
|
79
71
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
80
72
|
|
|
81
73
|
## Formkit Development
|
|
@@ -89,9 +81,7 @@ Running the `dev` command will open a `localhost` development server for all com
|
|
|
89
81
|
|
|
90
82
|
To only develop a single component, use the `--filter` flag:
|
|
91
83
|
|
|
92
|
-
|
|
93
|
-
npx turbo dev --filter=@aurodesignsystem/auro-input
|
|
94
|
-
```
|
|
84
|
+
<pre class="language-shell"><code class="language-shell">npx turbo dev --filter=@aurodesignsystem/auro-input</code></pre>
|
|
95
85
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
96
86
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
|
|
97
87
|
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
|
|
@@ -106,56 +96,52 @@ However, if you need to load multiple versions of the same component on a single
|
|
|
106
96
|
|
|
107
97
|
You can do this by importing only the component class and using the `register(name)` method with a unique name:
|
|
108
98
|
|
|
109
|
-
|
|
110
|
-
// Import the class only
|
|
99
|
+
<pre class="language-js"><code class="language-js">// Import the class only
|
|
111
100
|
import { AuroCounter, AuroCounterGroup } from '@aurodesignsystem/auro-formkit/auro-counter/class';
|
|
112
|
-
|
|
101
|
+
|
|
113
102
|
// Register with a custom name if desired
|
|
114
103
|
AuroCounter.register('custom-counter');
|
|
115
|
-
AuroCounterGroup.register('custom-counter-group')
|
|
116
|
-
```
|
|
104
|
+
AuroCounterGroup.register('custom-counter-group');</code></pre>
|
|
117
105
|
|
|
118
106
|
This will create a new custom element `<custom-counter>` and `<custom-counter-group>` that behaves exactly like `<auro-counter>` and `<auro-counter-group>`, allowing both to coexist on the same page without interfering with each other.
|
|
119
107
|
|
|
120
108
|
<div class="exampleWrapper exampleWrapper--flex">
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
109
|
+
<custom-counter-group>
|
|
110
|
+
<div slot="bib.fullscreen.headline">Passengers</div>
|
|
111
|
+
<div slot="label">Passengers</div>
|
|
112
|
+
<custom-counter>
|
|
113
|
+
Adults
|
|
114
|
+
<span slot="description">18 years or older</span>
|
|
115
|
+
</custom-counter>
|
|
116
|
+
<custom-counter>
|
|
117
|
+
Children
|
|
118
|
+
<span slot="description">2-17 years</span>
|
|
119
|
+
</custom-counter>
|
|
120
|
+
</custom-counter-group>
|
|
133
121
|
</div>
|
|
134
122
|
<auro-accordion alignRight>
|
|
135
|
-
|
|
123
|
+
<span slot="trigger">See code</span>
|
|
136
124
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
<custom-counter>
|
|
125
|
+
<pre class="language-html"><code class="language-html"> <custom-counter-group>
|
|
126
|
+
<div slot="bib.fullscreen.headline">Passengers</div>
|
|
127
|
+
<div slot="label">Passengers</div>
|
|
128
|
+
<custom-counter>
|
|
142
129
|
Adults
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
130
|
+
<span slot="description">18 years or older</span>
|
|
131
|
+
</custom-counter>
|
|
132
|
+
<custom-counter>
|
|
146
133
|
Children
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
134
|
+
<span slot="description">2-17 years</span>
|
|
135
|
+
</custom-counter>
|
|
136
|
+
</custom-counter-group>
|
|
137
|
+
|
|
151
138
|
```html
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
```
|
|
139
|
+
<custom-checkbox-group>
|
|
140
|
+
<span slot="legend">Form label goes here</span>
|
|
141
|
+
<custom-checkbox value="value1" name="custom" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
|
|
142
|
+
<custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
|
|
143
|
+
<custom-checkbox value="value3" name="custom" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
|
|
144
|
+
<custom-checkbox value="value4" name="custom" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
|
|
145
|
+
</custom-checkbox-group></code></pre>
|
|
160
146
|
</auro-accordion>
|
|
161
147
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -1521,7 +1521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1521
1521
|
}
|
|
1522
1522
|
};
|
|
1523
1523
|
|
|
1524
|
-
var formkitVersion$1 = '
|
|
1524
|
+
var formkitVersion$1 = '202604281911';
|
|
1525
1525
|
|
|
1526
1526
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1527
1527
|
// See LICENSE in the project root for license information.
|
|
@@ -5729,7 +5729,7 @@ class AuroHelpText extends i$2 {
|
|
|
5729
5729
|
}
|
|
5730
5730
|
}
|
|
5731
5731
|
|
|
5732
|
-
var formkitVersion = '
|
|
5732
|
+
var formkitVersion = '202604281911';
|
|
5733
5733
|
|
|
5734
5734
|
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5735
5735
|
static get properties() {
|
|
@@ -1521,7 +1521,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
1521
1521
|
}
|
|
1522
1522
|
};
|
|
1523
1523
|
|
|
1524
|
-
var formkitVersion$1 = '
|
|
1524
|
+
var formkitVersion$1 = '202604281911';
|
|
1525
1525
|
|
|
1526
1526
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1527
1527
|
// See LICENSE in the project root for license information.
|
|
@@ -5729,7 +5729,7 @@ class AuroHelpText extends i$2 {
|
|
|
5729
5729
|
}
|
|
5730
5730
|
}
|
|
5731
5731
|
|
|
5732
|
-
var formkitVersion = '
|
|
5732
|
+
var formkitVersion = '202604281911';
|
|
5733
5733
|
|
|
5734
5734
|
let AuroElement$1 = class AuroElement extends i$2 {
|
|
5735
5735
|
static get properties() {
|
|
@@ -43,8 +43,6 @@ The `auro-counter` element should be used in situations where users may:
|
|
|
43
43
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
|
|
44
44
|
<!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
|
|
45
45
|
|
|
46
|
-
#### NPM Installation
|
|
47
|
-
|
|
48
46
|
<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
|
|
49
47
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
50
48
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
|
|
@@ -1471,7 +1471,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
1471
1471
|
}
|
|
1472
1472
|
};
|
|
1473
1473
|
|
|
1474
|
-
var formkitVersion$1 = '
|
|
1474
|
+
var formkitVersion$1 = '202604281911';
|
|
1475
1475
|
|
|
1476
1476
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1477
1477
|
// See LICENSE in the project root for license information.
|
|
@@ -5661,7 +5661,7 @@ class AuroHelpText extends LitElement {
|
|
|
5661
5661
|
}
|
|
5662
5662
|
}
|
|
5663
5663
|
|
|
5664
|
-
var formkitVersion = '
|
|
5664
|
+
var formkitVersion = '202604281911';
|
|
5665
5665
|
|
|
5666
5666
|
let AuroElement$1 = class AuroElement extends LitElement {
|
|
5667
5667
|
static get properties() {
|
|
@@ -1471,7 +1471,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
1471
1471
|
}
|
|
1472
1472
|
};
|
|
1473
1473
|
|
|
1474
|
-
var formkitVersion$1 = '
|
|
1474
|
+
var formkitVersion$1 = '202604281911';
|
|
1475
1475
|
|
|
1476
1476
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1477
1477
|
// See LICENSE in the project root for license information.
|
|
@@ -5661,7 +5661,7 @@ class AuroHelpText extends LitElement {
|
|
|
5661
5661
|
}
|
|
5662
5662
|
}
|
|
5663
5663
|
|
|
5664
|
-
var formkitVersion = '
|
|
5664
|
+
var formkitVersion = '202604281911';
|
|
5665
5665
|
|
|
5666
5666
|
let AuroElement$1 = class AuroElement extends LitElement {
|
|
5667
5667
|
static get properties() {
|
|
@@ -43,11 +43,7 @@ The `<auro-datepicker>` element should be used in situations where users may:
|
|
|
43
43
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
|
|
44
44
|
<!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
```shell
|
|
49
|
-
$ npm i @aurodesignsystem/auro-formkit
|
|
50
|
-
```
|
|
46
|
+
<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
|
|
51
47
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
52
48
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
|
|
53
49
|
<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
|
|
@@ -56,13 +52,11 @@ $ npm i @aurodesignsystem/auro-formkit
|
|
|
56
52
|
|
|
57
53
|
When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
|
|
58
54
|
|
|
59
|
-
|
|
60
|
-
{
|
|
55
|
+
<pre class="language-json"><code class="language-json">{
|
|
61
56
|
"compilerOptions": {
|
|
62
57
|
"moduleResolution": "bundler"
|
|
63
58
|
}
|
|
64
|
-
}
|
|
65
|
-
```
|
|
59
|
+
}</code></pre>
|
|
66
60
|
|
|
67
61
|
This configuration enables proper module resolution for the component's TypeScript files.
|
|
68
62
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -73,9 +67,7 @@ This configuration enables proper module resolution for the component's TypeScri
|
|
|
73
67
|
<!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
|
|
74
68
|
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
|
|
75
69
|
|
|
76
|
-
|
|
77
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-datepicker/+esm"></script>
|
|
78
|
-
```
|
|
70
|
+
<pre class="language-html"><code class="language-html"><script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-datepicker/+esm"></script></code></pre>
|
|
79
71
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
80
72
|
|
|
81
73
|
## Formkit Development
|
|
@@ -89,9 +81,7 @@ Running the `dev` command will open a `localhost` development server for all com
|
|
|
89
81
|
|
|
90
82
|
To only develop a single component, use the `--filter` flag:
|
|
91
83
|
|
|
92
|
-
|
|
93
|
-
npx turbo dev --filter=@aurodesignsystem/auro-input
|
|
94
|
-
```
|
|
84
|
+
<pre class="language-shell"><code class="language-shell">npx turbo dev --filter=@aurodesignsystem/auro-input</code></pre>
|
|
95
85
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
96
86
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
|
|
97
87
|
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
|
|
@@ -106,32 +96,28 @@ However, if you need to load multiple versions of the same component on a single
|
|
|
106
96
|
|
|
107
97
|
You can do this by importing only the component class and using the `register(name)` method with a unique name:
|
|
108
98
|
|
|
109
|
-
|
|
110
|
-
// Import the class only
|
|
99
|
+
<pre class="language-js"><code class="language-js">// Import the class only
|
|
111
100
|
import { AuroDatepicker } from '@aurodesignsystem/auro-formkit/auro-datepicker/class';
|
|
112
|
-
|
|
101
|
+
|
|
113
102
|
// Register with a custom name if desired
|
|
114
|
-
AuroDatepicker.register('custom-datepicker')
|
|
115
|
-
```
|
|
103
|
+
AuroDatepicker.register('custom-datepicker');</code></pre>
|
|
116
104
|
|
|
117
105
|
This will create a new custom element `<custom-datepicker>` that behaves exactly like `<auro-datepicker>`, allowing both to coexist on the same page without interfering with each other.
|
|
118
106
|
|
|
119
107
|
<div class="exampleWrapper exampleWrapper--flex">
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
108
|
+
<custom-datepicker>
|
|
109
|
+
<span slot="bib.fullscreen.headline">custom-datepicker Example</span>
|
|
110
|
+
<span slot="fromLabel">Choose a date</span>
|
|
111
|
+
<span slot="bib.fullscreen.dateLabel">Choose a date</span>
|
|
112
|
+
</custom-datepicker>
|
|
125
113
|
</div>
|
|
126
114
|
<auro-accordion alignRight>
|
|
127
|
-
|
|
115
|
+
<span slot="trigger">See code</span>
|
|
128
116
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
</custom-datepicker>
|
|
135
|
-
```
|
|
117
|
+
<pre class="language-html"><code class="language-html"><custom-datepicker>
|
|
118
|
+
<span slot="bib.fullscreen.headline">custom-datepicker Example</span>
|
|
119
|
+
<span slot="fromLabel">Choose a date</span>
|
|
120
|
+
<span slot="bib.fullscreen.dateLabel">Choose a date</span>
|
|
121
|
+
</custom-datepicker></code></pre>
|
|
136
122
|
</auro-accordion>
|
|
137
123
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -9558,7 +9558,7 @@ class AuroBibtemplate extends i$1 {
|
|
|
9558
9558
|
}
|
|
9559
9559
|
}
|
|
9560
9560
|
|
|
9561
|
-
var formkitVersion$2 = '
|
|
9561
|
+
var formkitVersion$2 = '202604281911';
|
|
9562
9562
|
|
|
9563
9563
|
let l$1 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s,a){const r=this.generateElementName(o,s),i=i$5`${s$5(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let d$1 = class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`),s=(o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim();return s||null}};let h$4 = class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}};var c$3=i$3`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
|
|
9564
9564
|
`,u$6=i$3`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.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.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.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, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.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, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, 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"),var(--wcss-display-xl-family-fallback, 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"),var(--wcss-display-lg-family-fallback, 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"),var(--wcss-display-md-family-fallback, 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"),var(--wcss-display-sm-family-fallback, 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"),var(--wcss-display-xs-family-fallback, 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"),var(--wcss-heading-xl-family-fallback, 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"),var(--wcss-heading-lg-family-fallback, 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"),var(--wcss-heading-md-family-fallback, 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"),var(--wcss-heading-sm-family-fallback, 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"),var(--wcss-heading-xs-family-fallback, 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"),var(--wcss-heading-2xs-family-fallback, 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"),var(--wcss-accent-2xl-family-fallback, 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, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, 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, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, 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, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, 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, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, 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, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, 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, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0;box-sizing:border-box}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
|
|
@@ -13788,7 +13788,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
|
|
|
13788
13788
|
}
|
|
13789
13789
|
};
|
|
13790
13790
|
|
|
13791
|
-
var formkitVersion$1 = '
|
|
13791
|
+
var formkitVersion$1 = '202604281911';
|
|
13792
13792
|
|
|
13793
13793
|
let AuroElement$2 = class AuroElement extends i$1 {
|
|
13794
13794
|
static get properties() {
|
|
@@ -14937,7 +14937,7 @@ var styleCss$1 = i$3`.util_displayInline{display:inline}.util_displayInlineBlock
|
|
|
14937
14937
|
|
|
14938
14938
|
var styleDefaultCss = i$3`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{text-align:left}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
|
|
14939
14939
|
|
|
14940
|
-
var colorBaseCss = i$3`.wrapper{border-color:
|
|
14940
|
+
var colorBaseCss = i$3`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([appearance=inverse])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within,:host([appearance=inverse]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper,:host([appearance=inverse]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host(:not([ondark])[disabled]),:host(:not([appearance=inverse])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
14941
14941
|
|
|
14942
14942
|
var tokensCss$1 = i$3`:host(:not([ondark])),:host(:not([appearance=inverse])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]),:host([appearance=inverse]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-input-outline-color: transparent}`;
|
|
14943
14943
|
|
|
@@ -21540,7 +21540,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
|
|
|
21540
21540
|
}
|
|
21541
21541
|
};
|
|
21542
21542
|
|
|
21543
|
-
var formkitVersion = '
|
|
21543
|
+
var formkitVersion = '202604281911';
|
|
21544
21544
|
|
|
21545
21545
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
21546
21546
|
// See LICENSE in the project root for license information.
|