@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.
Files changed (86) hide show
  1. package/components/checkbox/README.md +23 -37
  2. package/components/checkbox/demo/api.min.js +1 -1
  3. package/components/checkbox/demo/index.min.js +1 -1
  4. package/components/checkbox/demo/readme.md +0 -2
  5. package/components/checkbox/dist/index.js +1 -1
  6. package/components/checkbox/dist/registered.js +1 -1
  7. package/components/combobox/README.md +43 -57
  8. package/components/combobox/demo/accessibility.html +22 -11
  9. package/components/combobox/demo/api.html +27 -16
  10. package/components/combobox/demo/api.min.js +4 -4
  11. package/components/combobox/demo/design.html +27 -16
  12. package/components/combobox/demo/index.html +28 -22
  13. package/components/combobox/demo/index.min.js +4 -4
  14. package/components/combobox/demo/install.html +26 -16
  15. package/components/combobox/demo/install.md +0 -2
  16. package/components/combobox/demo/install.min.js +4 -4
  17. package/components/combobox/demo/keyboard-behavior.html +22 -11
  18. package/components/combobox/demo/readme.html +27 -16
  19. package/components/combobox/demo/readme.md +0 -2
  20. package/components/combobox/demo/styles.css +911 -71
  21. package/components/combobox/demo/voiceover.html +22 -11
  22. package/components/combobox/dist/index.js +4 -4
  23. package/components/combobox/dist/registered.js +4 -4
  24. package/components/counter/README.md +39 -53
  25. package/components/counter/demo/api.min.js +2 -2
  26. package/components/counter/demo/index.min.js +2 -2
  27. package/components/counter/demo/readme.md +0 -2
  28. package/components/counter/dist/index.js +2 -2
  29. package/components/counter/dist/registered.js +2 -2
  30. package/components/datepicker/README.md +19 -33
  31. package/components/datepicker/demo/api.min.js +4 -4
  32. package/components/datepicker/demo/index.min.js +4 -4
  33. package/components/datepicker/demo/readme.md +0 -2
  34. package/components/datepicker/dist/index.js +4 -4
  35. package/components/datepicker/dist/registered.js +4 -4
  36. package/components/dropdown/README.md +39 -53
  37. package/components/dropdown/demo/api.min.js +1 -1
  38. package/components/dropdown/demo/index.min.js +1 -1
  39. package/components/dropdown/demo/readme.md +0 -2
  40. package/components/dropdown/dist/index.js +1 -1
  41. package/components/dropdown/dist/registered.js +1 -1
  42. package/components/form/README.md +14 -30
  43. package/components/form/demo/api.min.js +16 -16
  44. package/components/form/demo/index.min.js +16 -16
  45. package/components/form/demo/readme.md +0 -2
  46. package/components/input/README.md +17 -31
  47. package/components/input/demo/api.min.js +2 -2
  48. package/components/input/demo/index.min.js +2 -2
  49. package/components/input/demo/readme.md +0 -2
  50. package/components/input/dist/index.js +2 -2
  51. package/components/input/dist/registered.js +2 -2
  52. package/components/menu/README.md +23 -37
  53. package/components/menu/demo/readme.md +0 -2
  54. package/components/radio/README.md +21 -35
  55. package/components/radio/demo/api.min.js +1 -1
  56. package/components/radio/demo/index.min.js +1 -1
  57. package/components/radio/demo/readme.md +0 -2
  58. package/components/radio/dist/index.js +1 -1
  59. package/components/radio/dist/registered.js +1 -1
  60. package/components/select/README.md +41 -73
  61. package/components/select/demo/accessibility.html +23 -20
  62. package/components/select/demo/api.html +45 -10
  63. package/components/select/demo/api.min.js +2 -2
  64. package/components/select/demo/design.html +94 -0
  65. package/components/select/demo/design.md +391 -0
  66. package/components/select/demo/getting-started.html +125 -0
  67. package/components/select/demo/getting-started.js +9 -0
  68. package/components/select/demo/getting-started.md +1020 -0
  69. package/components/select/demo/getting-started.min.js +10490 -0
  70. package/components/select/demo/index.html +55 -241
  71. package/components/select/demo/index.md +38 -98
  72. package/components/select/demo/index.min.js +2 -2
  73. package/components/select/demo/install.md +92 -0
  74. package/components/select/demo/keyboard-behavior.html +23 -11
  75. package/components/select/demo/keyboard-behavior.md +247 -36
  76. package/components/select/demo/keyboardBehavior.html +22 -11
  77. package/components/select/demo/layout.html +45 -10
  78. package/components/select/demo/layout.md +71 -260
  79. package/components/select/demo/readme.html +46 -11
  80. package/components/select/demo/readme.md +25 -45
  81. package/components/select/demo/styles.css +1026 -0
  82. package/components/select/demo/voiceover.html +23 -11
  83. package/components/select/dist/index.js +2 -2
  84. package/components/select/dist/registered.js +2 -2
  85. package/custom-elements.json +1667 -1667
  86. 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
- <!-- Prism.js Stylesheet -->
22
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
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://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
52
- import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
53
- fetch('./voiceover.md')
54
- .then((response) => response.text())
55
- .then((text) => {
56
- const rawHtml = marked.parse(text);
57
- document.querySelector('main').innerHTML = rawHtml;
58
- Prism.highlightAll();
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 = '202604232250';
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:red;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)}`;
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 = '202604232250';
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 = '202604232250';
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 = '202604232250';
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:red;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)}`;
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 = '202604232250';
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 = '202604232250';
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
- #### NPM Installation
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
- ```json
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
- ```html
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">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-counter/+esm"&gt;&lt;/script&gt;</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
- ```shell
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
- ```js
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
- <custom-counter-group>
122
- <div slot="bib.fullscreen.headline">Passengers</div>
123
- <div slot="label">Passengers</div>
124
- <custom-counter>
125
- Adults
126
- <span slot="description">18 years or older</span>
127
- </custom-counter>
128
- <custom-counter>
129
- Children
130
- <span slot="description">2-17 years</span>
131
- </custom-counter>
132
- </custom-counter-group>
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
- <span slot="trigger">See code</span>
123
+ <span slot="trigger">See code</span>
136
124
 
137
- ```html
138
- <custom-counter-group>
139
- <div slot="bib.fullscreen.headline">Passengers</div>
140
- <div slot="label">Passengers</div>
141
- <custom-counter>
125
+ <pre class="language-html"><code class="language-html"> &lt;custom-counter-group&gt;
126
+ &lt;div slot="bib.fullscreen.headline"&gt;Passengers&lt;/div&gt;
127
+ &lt;div slot="label"&gt;Passengers&lt;/div&gt;
128
+ &lt;custom-counter&gt;
142
129
  Adults
143
- <span slot="description">18 years or older</span>
144
- </custom-counter>
145
- <custom-counter>
130
+ &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
131
+ &lt;/custom-counter&gt;
132
+ &lt;custom-counter&gt;
146
133
  Children
147
- <span slot="description">2-17 years</span>
148
- </custom-counter>
149
- </custom-counter-group>
150
-
134
+ &lt;span slot="description"&gt;2-17 years&lt;/span&gt;
135
+ &lt;/custom-counter&gt;
136
+ &lt;/custom-counter-group&gt;
137
+
151
138
  ```html
152
- <custom-checkbox-group>
153
- <span slot="legend">Form label goes here</span>
154
- <custom-checkbox value="value1" name="custom" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
155
- <custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
156
- <custom-checkbox value="value3" name="custom" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
157
- <custom-checkbox value="value4" name="custom" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
158
- </custom-checkbox-group>
159
- ```
139
+ &lt;custom-checkbox-group&gt;
140
+ &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
141
+ &lt;custom-checkbox value="value1" name="custom" id="checkbox-custom1"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
142
+ &lt;custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked&gt;Custom checkbox option&lt;/custom-checkbox&gt;
143
+ &lt;custom-checkbox value="value3" name="custom" id="checkbox-custom3"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
144
+ &lt;custom-checkbox value="value4" name="custom" id="checkbox-custom4"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
145
+ &lt;/custom-checkbox-group&gt;</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 = '202604232250';
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 = '202604232250';
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 = '202604232250';
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 = '202604232250';
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 = '202604232250';
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 = '202604232250';
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 = '202604232250';
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 = '202604232250';
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
- #### NPM Installation
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
- ```json
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
- ```html
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">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-datepicker/+esm"&gt;&lt;/script&gt;</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
- ```shell
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
- ```js
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
- <custom-datepicker>
121
- <span slot="bib.fullscreen.headline">custom-datepicker Example</span>
122
- <span slot="fromLabel">Choose a date</span>
123
- <span slot="bib.fullscreen.dateLabel">Choose a date</span>
124
- </custom-datepicker>
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
- <span slot="trigger">See code</span>
115
+ <span slot="trigger">See code</span>
128
116
 
129
- ```html
130
- <custom-datepicker>
131
- <span slot="bib.fullscreen.headline">custom-datepicker Example</span>
132
- <span slot="fromLabel">Choose a date</span>
133
- <span slot="bib.fullscreen.dateLabel">Choose a date</span>
134
- </custom-datepicker>
135
- ```
117
+ <pre class="language-html"><code class="language-html">&lt;custom-datepicker&gt;
118
+ &lt;span slot="bib.fullscreen.headline"&gt;custom-datepicker Example&lt;/span&gt;
119
+ &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
120
+ &lt;span slot="bib.fullscreen.dateLabel"&gt;Choose a date&lt;/span&gt;
121
+ &lt;/custom-datepicker&gt;</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 = '202604232250';
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 = '202604232250';
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:red;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)}`;
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 = '202604232250';
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.