@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.14 → 0.0.0-pr624.16

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 (85) hide show
  1. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
  2. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  3. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  4. package/components/bibtemplate/dist/index.js +1022 -12
  5. package/components/bibtemplate/dist/registered.js +1022 -12
  6. package/components/checkbox/README.md +1 -1
  7. package/components/checkbox/demo/api.md +2 -2
  8. package/components/checkbox/demo/api.min.js +24 -19
  9. package/components/checkbox/demo/index.md +2 -2
  10. package/components/checkbox/demo/index.min.js +24 -19
  11. package/components/checkbox/demo/readme.md +1 -1
  12. package/components/checkbox/dist/auro-checkbox.d.ts +3 -3
  13. package/components/checkbox/dist/index.js +24 -19
  14. package/components/checkbox/dist/registered.js +24 -19
  15. package/components/combobox/demo/api.md +52 -0
  16. package/components/combobox/demo/api.min.js +2059 -651
  17. package/components/combobox/demo/index.md +6 -0
  18. package/components/combobox/demo/index.min.js +2059 -651
  19. package/components/combobox/dist/auro-combobox.d.ts +4 -4
  20. package/components/combobox/dist/index.js +1978 -629
  21. package/components/combobox/dist/registered.js +1978 -629
  22. package/components/counter/demo/api.md +21 -19
  23. package/components/counter/demo/api.min.js +2326 -539
  24. package/components/counter/demo/index.md +99 -34
  25. package/components/counter/demo/index.min.js +2326 -539
  26. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  27. package/components/counter/dist/auro-counter-group.d.ts +92 -1
  28. package/components/counter/dist/helptextVersion.d.ts +2 -0
  29. package/components/counter/dist/iconVersion.d.ts +1 -1
  30. package/components/counter/dist/index.js +2326 -539
  31. package/components/counter/dist/registered.js +2326 -539
  32. package/components/datepicker/demo/api.md +3 -1
  33. package/components/datepicker/demo/api.min.js +5402 -3158
  34. package/components/datepicker/demo/index.md +6 -1
  35. package/components/datepicker/demo/index.min.js +5402 -3158
  36. package/components/datepicker/dist/auro-datepicker.d.ts +17 -7
  37. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  38. package/components/datepicker/dist/index.js +5402 -3158
  39. package/components/datepicker/dist/registered.js +5402 -3158
  40. package/components/dropdown/demo/api.md +3 -4
  41. package/components/dropdown/demo/api.min.js +69 -119
  42. package/components/dropdown/demo/index.md +57 -9
  43. package/components/dropdown/demo/index.min.js +69 -119
  44. package/components/dropdown/dist/auro-dropdown.d.ts +0 -8
  45. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  46. package/components/dropdown/dist/index.js +69 -119
  47. package/components/dropdown/dist/registered.js +69 -119
  48. package/components/input/demo/api.md +12 -5
  49. package/components/input/demo/api.min.js +665 -285
  50. package/components/input/demo/index.min.js +665 -285
  51. package/components/input/dist/auro-input.d.ts +6 -0
  52. package/components/input/dist/base-input.d.ts +29 -6
  53. package/components/input/dist/buttonVersion.d.ts +1 -1
  54. package/components/input/dist/iconVersion.d.ts +1 -1
  55. package/components/input/dist/index.js +665 -285
  56. package/components/input/dist/registered.js +665 -285
  57. package/components/layoutElement/dist/index.js +13 -10
  58. package/components/menu/demo/api.html +38 -0
  59. package/components/menu/demo/api.md +63 -2
  60. package/components/menu/demo/api.min.js +190 -36
  61. package/components/menu/demo/index.min.js +190 -36
  62. package/components/menu/dist/auro-menu.d.ts +22 -5
  63. package/components/menu/dist/auro-menuoption.d.ts +15 -3
  64. package/components/menu/dist/iconVersion.d.ts +1 -1
  65. package/components/menu/dist/index.js +190 -36
  66. package/components/menu/dist/registered.js +190 -36
  67. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  68. package/components/radio/demo/api.min.js +4 -2
  69. package/components/radio/demo/index.min.js +4 -2
  70. package/components/radio/dist/auro-radio.d.ts +1 -1
  71. package/components/radio/dist/index.js +4 -2
  72. package/components/radio/dist/registered.js +4 -2
  73. package/components/select/demo/api.md +5 -5
  74. package/components/select/demo/api.min.js +1412 -293
  75. package/components/select/demo/index.md +42 -1
  76. package/components/select/demo/index.min.js +1412 -293
  77. package/components/select/dist/auro-select.d.ts +8 -8
  78. package/components/select/dist/index.js +1321 -261
  79. package/components/select/dist/registered.js +1321 -261
  80. package/package.json +2 -2
  81. /package/components/{menu/dist/styles/color-menu-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  82. /package/components/menu/dist/styles/{color-menuoption-css.d.ts → default/color-menu-css.d.ts} +0 -0
  83. /package/components/menu/dist/styles/{style-menu-css.d.ts → default/color-menuoption-css.d.ts} +0 -0
  84. /package/components/menu/dist/styles/{style-menuoption-css.d.ts → default/style-menu-css.d.ts} +0 -0
  85. /package/components/menu/dist/styles/{tokens-css.d.ts → default/style-menuoption-css.d.ts} +0 -0
package/components/layoutElement/dist/index.js CHANGED
@@ -35,18 +35,21 @@ class AuroElement extends LitElement {
35
35
  }
36
36
 
37
37
  resetShapeClasses() {
38
- if (this.shape && this.size) {
39
- const wrapper = this.shadowRoot.querySelector('.wrapper');
38
+ const wrapper = this.shadowRoot.querySelector('.wrapper');
40
39
 
41
- if (wrapper) {
42
- wrapper.classList.forEach((className) => {
43
- if (className.startsWith('shape-')) {
44
- wrapper.classList.remove(className);
45
- }
46
- });
40
+ if (wrapper) {
41
+ wrapper.classList.forEach((className) => {
42
+ if (className.startsWith('shape-')) {
43
+ wrapper.classList.remove(className);
44
+ }
45
+ });
47
46
 
48
- wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
49
- }
47
+ }
48
+
49
+ if (this.shape && this.size) {
50
+ wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
51
+ } else {
52
+ wrapper.classList.add('shape-none');
50
53
  }
51
54
  }
52
55
 
package/components/menu/demo/api.html CHANGED
@@ -27,8 +27,45 @@
27
27
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
28
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
29
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
+ <style>
31
+ header {
32
+ background: lightgray;
33
+ position: fixed;
34
+ bottom: 0;
35
+ right: 0;
36
+ z-index: 10;
37
+ }
38
+ </style>
39
+ <script>
40
+ function onRadioInput(event) {
41
+ if (event.constructor.name === 'CustomEvent') {
42
+ const group = event.target.getAttribute('name');
43
+ const menus = document.querySelectorAll('auro-menu');
44
+ if (menus) {
45
+ menus.forEach((menu) => {
46
+ menu.setAttribute(group, event.target.value);
47
+ });
48
+ }
49
+ };
50
+ }
51
+ </script>
30
52
  </head>
31
53
  <body class="auro-markdown">
54
+ <header oninput="onRadioInput(event)">
55
+ <auro-radio-group required horizontal name="shape">
56
+ <span slot="legend">Shape</span>
57
+ <auro-radio label="box" value="box" checked></auro-radio>
58
+ <auro-radio label="rounded" value="rounded"></auro-radio>
59
+ <auro-radio label="pill" value="pill"></auro-radio>
60
+ </auro-radio-group>
61
+ <auro-radio-group required horizontal name="size">
62
+ <span slot="legend">Size</span>
63
+ <auro-radio label="medium(default)" value="md" checked></auro-radio>
64
+ <auro-radio label="large" value="lg"></auro-radio>
65
+ <auro-radio label="xlarge" value="xl"></auro-radio>
66
+ </auro-radio-group>
67
+
68
+ </header>
32
69
  <main></main>
33
70
 
34
71
  <script type="module">
@@ -47,6 +84,7 @@
47
84
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-input@latest/dist/auro-input__bundled.js" type="module"></script>
48
85
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
49
86
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@latest/dist/auro-loader__bundled.js" type="module"></script>
87
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-radio/+esm"></script>
50
88
  <script type="module" data-demo-script="true">
51
89
  import { initExamples } from "./api.min.js"
52
90
  initExamples();
package/components/menu/demo/api.md CHANGED
@@ -11,12 +11,15 @@ The auro-menu element provides users a way to select from a list of options.
11
11
  |-------------------------|------------------|-----------------------------------|-------------|--------------------------------------------------|
12
12
  | [disabled](#disabled) | `disabled` | `boolean` | | When true, the entire menu and all options are disabled; |
13
13
  | [hasLoadingPlaceholder](#hasLoadingPlaceholder) | | `boolean` | | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
14
+ | [layout](#layout) | | `string` | | |
14
15
  | [loading](#loading) | `loading` | `boolean` | false | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
15
16
  | [matchWord](#matchWord) | `matchword` | `string` | "undefined" | Specifies a string used to highlight matched string parts in options. |
16
17
  | [multiSelect](#multiSelect) | `multiselect` | `boolean` | false | When true, the selected option can be multiple options. |
17
18
  | [noCheckmark](#noCheckmark) | `nocheckmark` | `boolean` | false | When true, selected option will not show the checkmark. |
18
19
  | [optionActive](#optionActive) | `optionactive` | `object` | "undefined" | Specifies the current active menuOption. |
19
20
  | [optionSelected](#optionSelected) | `optionSelected` | `HTMLElement\|Array<HTMLElement>` | "undefined" | An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements. |
21
+ | [shape](#shape) | | `string` | "" | |
22
+ | [size](#size) | | `string` | "" | |
20
23
  | [value](#value) | `value` | `String\|Array<string>` | "undefined" | Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings. |
21
24
 
22
25
  ## Methods
@@ -60,8 +63,11 @@ The auro-menu element provides users a way to define a menu option.
60
63
  |---------------|---------------|-----------|---------|--------------------------------------------------|
61
64
  | [disabled](#disabled) | `disabled` | `Boolean` | false | When true specifies that the menuoption is disabled. |
62
65
  | [iconTag](#iconTag) | | `string` | | |
66
+ | [layout](#layout) | | `string` | | |
63
67
  | [nocheckmark](#nocheckmark) | `nocheckmark` | `boolean` | false | |
64
68
  | [selected](#selected) | `selected` | `Boolean` | false | Specifies that an option is selected. |
69
+ | [shape](#shape) | | `string` | "" | |
70
+ | [size](#size) | | `string` | "" | |
65
71
  | [value](#value) | `value` | `String` | | Specifies the value to be sent to a server. |
66
72
 
67
73
  ## Events
@@ -936,8 +942,8 @@ export function auroMenuResetExample() {
936
942
 
937
943
  The component may be restyled using the following code sample and changing the values of the following token(s).
938
944
 
939
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
940
- <!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
945
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/default/tokens.scss) -->
946
+ <!-- The below code snippet is automatically added from ./../src/styles/default/tokens.scss -->
941
947
 
942
948
  ```scss
943
949
  @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
@@ -947,8 +953,63 @@ The component may be restyled using the following code sample and changing the v
947
953
  --ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #{v.$ds-basic-color-brand-primary});
948
954
  --ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
949
955
  --ds-auro-menuoption-container-color: transparent;
956
+ --ds-auro-menuoption-container-border-color: var(--ds-auro-menuoption-container-color);
950
957
  --ds-auro-menuoption-icon-color: transparent;
951
958
  --ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
952
959
  }
953
960
  ```
954
961
  <!-- AURO-GENERATED-CONTENT:END -->
962
+ <div class="exampleWrapper">
963
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customColor.html) -->
964
+ <!-- The below content is automatically added from ./../apiExamples/customColor.html -->
965
+ <style>
966
+ #customColorMenu auro-menuoption[selected] {
967
+ --ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle);
968
+ --ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default);
969
+ }
970
+ #customColorMenu auro-menuoption:hover {
971
+ --ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted);
972
+ }
973
+ #customColorMenu auro-menuoption:focus {
974
+ --ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand);
975
+ }
976
+
977
+ </style>
978
+ <auro-menu id="customColorMenu">
979
+ <auro-menuoption value="stops">Stops</auro-menuoption>
980
+ <auro-menuoption value="price">Price</auro-menuoption>
981
+ <auro-menuoption value="duration">Duration</auro-menuoption>
982
+ <auro-menuoption value="departure">Departure</auro-menuoption>
983
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
984
+ </auro-menu>
985
+ <!-- AURO-GENERATED-CONTENT:END -->
986
+ </div>
987
+ <auro-accordion alignRight>
988
+ <span slot="trigger">See code</span>
989
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/customColor.html) -->
990
+ <!-- The below code snippet is automatically added from ./../apiExamples/customColor.html -->
991
+
992
+ ```html
993
+ <style>
994
+ #customColorMenu auro-menuoption[selected] {
995
+ --ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle);
996
+ --ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default);
997
+ }
998
+ #customColorMenu auro-menuoption:hover {
999
+ --ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted);
1000
+ }
1001
+ #customColorMenu auro-menuoption:focus {
1002
+ --ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand);
1003
+ }
1004
+
1005
+ </style>
1006
+ <auro-menu id="customColorMenu">
1007
+ <auro-menuoption value="stops">Stops</auro-menuoption>
1008
+ <auro-menuoption value="price">Price</auro-menuoption>
1009
+ <auro-menuoption value="duration">Duration</auro-menuoption>
1010
+ <auro-menuoption value="departure">Departure</auro-menuoption>
1011
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
1012
+ </auro-menu>
1013
+ ```
1014
+ <!-- AURO-GENERATED-CONTENT:END -->
1015
+ </auro-accordion>
package/components/menu/demo/api.min.js CHANGED
@@ -64,11 +64,106 @@ const t$1=globalThis,i$3=t$1.trustedTypes,s$2=i$3?i$3.createPolicy("lit-html",{c
64
64
  * SPDX-License-Identifier: BSD-3-Clause
65
65
  */const s$1=globalThis;let i$2 = class i extends y$1{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}};i$2._$litElement$=true,i$2["finalized"]=true,s$1.litElementHydrateSupport?.({LitElement:i$2});const o$2=s$1.litElementPolyfillSupport;o$2?.({LitElement:i$2});(s$1.litElementVersions??=[]).push("4.2.0");
66
66
 
67
- var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{display:inline-block;width:100%;margin:0;padding:0;vertical-align:middle}:host ::slotted(auro-menuoption),:host ::slotted([auro-menuoption]),:host auro-menuoption[loadingplaceholder]{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host ::slotted([selected]){padding-left:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host([nocheckmark]) ::slotted(auro-menuoption),:host([nocheckmark]) auro-menuoption[loadingplaceholder]{padding-left:var(--ds-size-200, 1rem)}:host([root]){overflow-y:auto}[loadingplaceholder].empty{opacity:0;position:absolute}[loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}[loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}`;
67
+ var styleCss$2 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{display:block;vertical-align:middle}:host .wrapper{box-sizing:border-box;display:inline-block;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;line-height:1;display:inline-block}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]){overflow-y:auto}:host([root]) .wrapper[class*=-lg]{padding:var(--ds-size-150, 0.75rem)}:host([root]) .wrapper[class*=-xl]{padding:var(--ds-size-200, 1rem)}`;
68
68
 
69
69
  var colorCss$2 = i$5`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color)}[loadingplaceholder] slot[name=loadingIcon]{color:var(--ds-auro-menu-loader-color)}[loadingplaceholder] slot[name=loadingText]{color:var(--ds-auro-menu-loader-text-color)}`;
70
70
 
71
- var tokensCss$1 = i$5`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
71
+ var tokensCss$1 = i$5`:host{--ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #01426a);--ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-container-color: transparent;--ds-auro-menuoption-container-border-color: var(--ds-auro-menuoption-container-color);--ds-auro-menuoption-icon-color: transparent;--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
72
+
73
+ let AuroElement$1 = class AuroElement extends i$2 {
74
+ static get properties() {
75
+ return {
76
+
77
+ /**
78
+ * Defines the language of an element.
79
+ * @default {'default'}
80
+ */
81
+ layout: {
82
+ type: String,
83
+ attribute: "layout",
84
+ reflect: true
85
+ },
86
+
87
+ shape: {
88
+ type: String,
89
+ attribute: "shape",
90
+ reflect: true
91
+ },
92
+
93
+ size: {
94
+ type: String,
95
+ attribute: "size",
96
+ reflect: true
97
+ },
98
+
99
+ onDark: {
100
+ type: Boolean,
101
+ attribute: "ondark",
102
+ reflect: true
103
+ }
104
+ };
105
+ }
106
+
107
+ resetShapeClasses() {
108
+ const wrapper = this.shadowRoot.querySelector('.wrapper');
109
+
110
+ if (wrapper) {
111
+ wrapper.classList.forEach((className) => {
112
+ if (className.startsWith('shape-')) {
113
+ wrapper.classList.remove(className);
114
+ }
115
+ });
116
+
117
+ }
118
+
119
+ if (this.shape && this.size) {
120
+ wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
121
+ } else {
122
+ wrapper.classList.add('shape-none');
123
+ }
124
+ }
125
+
126
+ resetLayoutClasses() {
127
+ if (this.layout) {
128
+ const wrapper = this.shadowRoot.querySelector('.wrapper');
129
+
130
+ if (wrapper) {
131
+ wrapper.classList.forEach((className) => {
132
+ if (className.startsWith('layout-')) {
133
+ wrapper.classList.remove(className);
134
+ }
135
+ });
136
+
137
+ wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
138
+ }
139
+ }
140
+ }
141
+
142
+ updateComponentArchitecture() {
143
+ this.resetLayoutClasses();
144
+ this.resetShapeClasses();
145
+ }
146
+
147
+ updated(changedProperties) {
148
+ if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
149
+ this.updateComponentArchitecture();
150
+ }
151
+ }
152
+
153
+ // Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
154
+ // This will catch if an invalid layout value is passed in and render the default layout if so.
155
+ render() {
156
+ try {
157
+ return this.renderLayout();
158
+ } catch (error) {
159
+ // failed to get the defined layout
160
+ console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
161
+
162
+ // fallback to the default layout
163
+ return this.getLayout('default');
164
+ }
165
+ }
166
+ };
72
167
 
73
168
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
74
169
  // See LICENSE in the project root for license information.
@@ -204,14 +299,17 @@ function dispatchMenuEvent(element, eventName, detail = null) {
204
299
  * @slot - Slot for insertion of menu options.
205
300
  */
206
301
 
207
- /* eslint-disable no-magic-numbers, max-lines, no-extra-parens */
302
+ /* eslint-disable no-magic-numbers, max-lines, no-extra-parens, no-inline-comments, line-comment-position */
208
303
 
209
- class AuroMenu extends i$2 {
304
+ class AuroMenu extends AuroElement$1 {
210
305
  constructor() {
211
306
  super();
212
307
 
213
308
  // State properties (reactive)
214
309
 
310
+ this.shape = ""; // box, rounded, pill
311
+ this.size = ""; // md, lg, xl
312
+
215
313
  // Value of the selected options
216
314
  this.value = undefined;
217
315
  // Currently selected option
@@ -270,6 +368,7 @@ class AuroMenu extends i$2 {
270
368
 
271
369
  static get properties() {
272
370
  return {
371
+ ...super.properties,
273
372
  noCheckmark: {
274
373
  type: Boolean,
275
374
  reflect: true,
@@ -303,6 +402,16 @@ class AuroMenu extends i$2 {
303
402
  value: {
304
403
  // Allow string, string[] arrays and undefined
305
404
  type: Object
405
+ },
406
+
407
+ /**
408
+ * Indent level for submenus.
409
+ * @private
410
+ */
411
+ level: {
412
+ type: Number,
413
+ reflect: false,
414
+ attribute: false
306
415
  }
307
416
  };
308
417
  }
@@ -355,12 +464,15 @@ class AuroMenu extends i$2 {
355
464
  }
356
465
 
357
466
  updated(changedProperties) {
467
+ super.updated(changedProperties);
468
+
358
469
  if (changedProperties.has('multiSelect')) {
359
470
  // Reset selection if multiSelect mode changes
360
471
  this.clearSelection();
361
472
  }
362
473
 
363
- if (changedProperties.has('value')) {
474
+
475
+ if (changedProperties.has("value")) {
364
476
  // Handle null/undefined case
365
477
  if (this.value === undefined || this.value === null) {
366
478
  this.optionSelected = undefined;
@@ -428,6 +540,19 @@ class AuroMenu extends i$2 {
428
540
  this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]').forEach((element) => element.setAttribute('noCheckmark', ''));
429
541
  }
430
542
 
543
+ // Handle layout propagation to all menus and options
544
+ const propagationTargets = this.querySelectorAll('auro-menu, [auro-menu], auro-menuoption, [auro-menuoption]');
545
+ [
546
+ 'size',
547
+ 'shape'
548
+ ].forEach((prop) => {
549
+ if (changedProperties.has(prop)) {
550
+ propagationTargets.forEach((el) => {
551
+ el.setAttribute(prop, this[prop]);
552
+ });
553
+ }
554
+ });
555
+
431
556
  // Regex for matchWord if needed
432
557
  let regexWord = null;
433
558
 
@@ -624,21 +749,20 @@ class AuroMenu extends i$2 {
624
749
  * @param {HTMLElement} menu - Root menu element.
625
750
  */
626
751
  handleNestedMenus(menu) {
627
- const nestedMenus = menu.querySelectorAll('auro-menu, [auro-menu]');
752
+ menu.level = menu.parentElement.level >= 0 ? menu.parentElement.level + 1 : 0;
628
753
 
629
- nestedMenus.forEach((nestedMenu) => {
630
- // role="listbox" only allows "role=group" for children.
631
- nestedMenu.setAttribute('role', 'group');
632
- if (!nestedMenu.hasAttribute('aria-label')) {
633
- nestedMenu.setAttribute('aria-label', 'submenu');
754
+ if (menu.level > 0) {
755
+ menu.setAttribute('role', 'group');
756
+ menu.removeAttribute("root");
757
+ if (!menu.hasAttribute('aria-label')) {
758
+ menu.setAttribute('aria-label', 'submenu');
634
759
  }
760
+ }
635
761
 
636
- const options = nestedMenu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption]');
637
- options.forEach((option) => {
638
- option.innerHTML = this.nestingSpacer + option.innerHTML;
639
- });
640
-
641
- this.handleNestedMenus(nestedMenu);
762
+ const options = menu.querySelectorAll(':scope > auro-menuoption, :scope > [auro-menuoption]');
763
+ options.forEach((option) => {
764
+ const regex = new RegExp(this.nestingSpacer, "gu");
765
+ option.innerHTML = this.nestingSpacer.repeat(menu.level) + option.innerHTML.replace(regex, '');
642
766
  });
643
767
  }
644
768
 
@@ -880,22 +1004,33 @@ class AuroMenu extends i$2 {
880
1004
  }
881
1005
 
882
1006
  /**
883
- * Renders the component.
884
- * @returns {boolean} - True if loading slots are present and non-empty.
1007
+ * Logic to determine the layout of the component.
1008
+ * @protected
1009
+ * @returns {void}
885
1010
  */
886
- render() {
1011
+ renderLayout() {
887
1012
  if (this.loading) {
888
1013
  return x`
889
- <auro-menuoption disabled loadingplaceholder class="${this.hasLoadingPlaceholder ? '' : 'empty'}">
890
- <div>
891
- <slot name="loadingIcon"></slot>
892
- <slot name="loadingText"></slot>
893
- </div>
894
- </auro-menuoption>
1014
+ <div class="wrapper">
1015
+ <auro-menuoption
1016
+ disabled
1017
+ loadingplaceholder
1018
+ class="${this.hasLoadingPlaceholder ? "" : "empty"}"
1019
+ >
1020
+ <div>
1021
+ <slot name="loadingIcon"></slot>
1022
+ <slot name="loadingText"></slot>
1023
+ </div>
1024
+ </auro-menuoption>
1025
+ </div>
895
1026
  `;
896
1027
  }
897
1028
 
898
- return x`<slot @slotchange=${this.handleSlotChange}></slot>`;
1029
+ return x`
1030
+ <div class="wrapper">
1031
+ <slot @slotchange=${this.handleSlotChange}></slot>
1032
+ </div>
1033
+ `;
899
1034
  }
900
1035
  }
901
1036
 
@@ -906,9 +1041,9 @@ class AuroMenu extends i$2 {
906
1041
  */
907
1042
  const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$1(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
908
1043
 
909
- var styleCss$1 = i$5`:host{display:flex;align-items:center;padding:var(--ds-size-50, 0.25rem) var(--ds-size-200, 1rem) var(--ds-size-50, 0.25rem) 0;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
1044
+ var styleCss$1 = i$5`:host{cursor:pointer;user-select:none}:host .wrapper{display:flex;align-items:center;padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem));padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-50, 0.25rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box],:host .wrapper[class*=shape-snowflake]{border-radius:unset}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem);margin-bottom:var(--ds-size-50, 0.25rem)}:host .wrapper[class*=-xl]{font-size:var(--ds-text-body-size-lg, 1.125rem);line-height:var(--ds-text-body-height-lg, 1.625rem);padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);margin-bottom:var(--ds-size-100, 0.5rem)}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}:host ::slotted(strong){font-weight:700}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + 24px + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
910
1045
 
911
- var colorCss$1 = i$5`:host{background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
1046
+ var colorCss$1 = i$5`:host .wrapper{border:1px solid var(--ds-auro-menuoption-container-border-color);background-color:var(--ds-auro-menuoption-container-color);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover),:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-neutral-subtle, #f7f7f7)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected, #01426a);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([selected]):host(:hover),:host([selected]):host(.active){--ds-auro-menuoption-container-color: var(--ds-advanced-color-state-selected-hover, #00274a)}`;
912
1047
 
913
1048
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
914
1049
  // See LICENSE in the project root for license information.
@@ -1315,8 +1450,12 @@ class AuroIcon extends BaseIcon {
1315
1450
  async firstUpdated() {
1316
1451
  await super.firstUpdated();
1317
1452
 
1318
- // Removes the SVG description for screenreader if ariaHidden is set to true
1319
- if (!this.hasAttribute('ariaHidden') && this.svg) {
1453
+ /**
1454
+ * icons provide a description for screen readers. Icon only instances Auro-button
1455
+ * depend on this description to provide context for the user using a screen reader.
1456
+ * Removes the SVG description for screen reader if ariaHidden is set to true.
1457
+ */
1458
+ if (this.hasAttribute('ariaHidden') && this.svg) {
1320
1459
  const svgDesc = this.svg.querySelector('desc');
1321
1460
 
1322
1461
  if (svgDesc) {
@@ -1360,7 +1499,7 @@ class AuroIcon extends BaseIcon {
1360
1499
  }
1361
1500
  }
1362
1501
 
1363
- var iconVersion = '8.0.3';
1502
+ var iconVersion = '8.0.4';
1364
1503
 
1365
1504
  var checkmarkIcon = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
1366
1505
 
@@ -1378,10 +1517,13 @@ var checkmarkIcon = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlin
1378
1517
  * @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
1379
1518
  * @slot - Specifies text for an option, but is not the value.
1380
1519
  */
1381
- class AuroMenuOption extends i$2 {
1520
+ class AuroMenuOption extends AuroElement$1 {
1382
1521
  constructor() {
1383
1522
  super();
1384
1523
 
1524
+ this.size = ""; // md, lg, xl
1525
+ this.shape = ""; // box, rounded, pill
1526
+
1385
1527
  /**
1386
1528
  * Generate unique names for dependency components.
1387
1529
  */
@@ -1405,6 +1547,7 @@ class AuroMenuOption extends i$2 {
1405
1547
 
1406
1548
  static get properties() {
1407
1549
  return {
1550
+ ...super.properties,
1408
1551
  nocheckmark: {
1409
1552
  type: Boolean,
1410
1553
  reflect: true
@@ -1466,6 +1609,8 @@ class AuroMenuOption extends i$2 {
1466
1609
 
1467
1610
  // observer for selected property changes
1468
1611
  updated(changedProperties) {
1612
+ super.updated(changedProperties);
1613
+
1469
1614
  if (changedProperties.has('selected')) {
1470
1615
  this.setAttribute('aria-selected', this.selected.toString());
1471
1616
  }
@@ -1487,10 +1632,19 @@ class AuroMenuOption extends i$2 {
1487
1632
  return u`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
1488
1633
  }
1489
1634
 
1490
- render() {
1635
+ /**
1636
+ * Logic to determine the layout of the component.
1637
+ * @protected
1638
+ * @returns {void}
1639
+ */
1640
+ renderLayout() {
1491
1641
  return u`
1492
- ${this.selected && !this.nocheckmark ? this.generateIconHtml(checkmarkIcon.svg) : undefined}
1493
- <slot></slot>
1642
+ <div class="wrapper">
1643
+ ${this.selected && !this.nocheckmark
1644
+ ? this.generateIconHtml(checkmarkIcon.svg)
1645
+ : undefined}
1646
+ <slot></slot>
1647
+ </div>
1494
1648
  `;
1495
1649
  }
1496
1650
  }