@aurodesignsystem-dev/auro-formkit 0.0.0-pr750.0 → 0.0.0-pr753.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/components/bibtemplate/dist/index.js +1 -1
  2. package/components/bibtemplate/dist/registered.js +1 -1
  3. package/components/checkbox/demo/api.min.js +9 -9
  4. package/components/checkbox/demo/index.min.js +9 -9
  5. package/components/checkbox/dist/index.js +9 -9
  6. package/components/checkbox/dist/registered.js +9 -9
  7. package/components/combobox/demo/api.html +10 -16
  8. package/components/combobox/demo/api.md +6 -12
  9. package/components/combobox/demo/api.min.js +101 -84
  10. package/components/combobox/demo/index.html +10 -16
  11. package/components/combobox/demo/index.min.js +101 -84
  12. package/components/combobox/demo/readme.html +9 -16
  13. package/components/combobox/dist/index.js +89 -47
  14. package/components/combobox/dist/registered.js +89 -47
  15. package/components/counter/demo/api.html +10 -16
  16. package/components/counter/demo/api.md +7 -140
  17. package/components/counter/demo/api.min.js +387 -557
  18. package/components/counter/demo/index.html +10 -16
  19. package/components/counter/demo/index.md +0 -82
  20. package/components/counter/demo/index.min.js +387 -557
  21. package/components/counter/demo/readme.html +9 -16
  22. package/components/counter/dist/auro-counter-group.d.ts +14 -71
  23. package/components/counter/dist/auro-counter.d.ts +0 -10
  24. package/components/counter/dist/index.js +387 -557
  25. package/components/counter/dist/registered.js +387 -557
  26. package/components/datepicker/demo/api.html +10 -16
  27. package/components/datepicker/demo/api.min.js +95 -68
  28. package/components/datepicker/demo/index.html +10 -16
  29. package/components/datepicker/demo/index.min.js +95 -68
  30. package/components/datepicker/demo/readme.html +9 -16
  31. package/components/datepicker/dist/auro-datepicker.d.ts +0 -6
  32. package/components/datepicker/dist/index.js +95 -68
  33. package/components/datepicker/dist/registered.js +95 -68
  34. package/components/dropdown/demo/api.html +10 -16
  35. package/components/dropdown/demo/api.md +268 -76
  36. package/components/dropdown/demo/api.min.js +68 -26
  37. package/components/dropdown/demo/index.html +10 -16
  38. package/components/dropdown/demo/index.md +363 -45
  39. package/components/dropdown/demo/index.min.js +68 -26
  40. package/components/dropdown/demo/readme.html +9 -16
  41. package/components/dropdown/dist/auro-dropdown.d.ts +71 -21
  42. package/components/dropdown/dist/index.js +68 -26
  43. package/components/dropdown/dist/registered.js +68 -26
  44. package/components/form/demo/api.html +9 -16
  45. package/components/form/demo/autocomplete.html +3 -19
  46. package/components/form/demo/index.html +9 -16
  47. package/components/form/demo/readme.html +9 -16
  48. package/components/form/demo/working.html +13 -19
  49. package/components/helptext/dist/index.js +1 -1
  50. package/components/helptext/dist/registered.js +1 -1
  51. package/components/input/demo/api.html +10 -16
  52. package/components/input/demo/api.md +1 -1
  53. package/components/input/demo/api.min.js +14 -14
  54. package/components/input/demo/index.html +10 -16
  55. package/components/input/demo/index.min.js +14 -14
  56. package/components/input/demo/readme.html +9 -16
  57. package/components/input/dist/base-input.d.ts +1 -1
  58. package/components/input/dist/index.js +14 -14
  59. package/components/input/dist/registered.js +14 -14
  60. package/components/menu/demo/api.html +32 -16
  61. package/components/menu/demo/api.md +1 -1
  62. package/components/menu/demo/api.min.js +12 -37
  63. package/components/menu/demo/index.html +10 -16
  64. package/components/menu/demo/index.min.js +12 -37
  65. package/components/menu/demo/readme.html +9 -16
  66. package/components/menu/dist/auro-menu.d.ts +2 -13
  67. package/components/menu/dist/index.js +12 -37
  68. package/components/menu/dist/registered.js +12 -37
  69. package/components/radio/demo/api.html +10 -16
  70. package/components/radio/demo/api.min.js +10 -10
  71. package/components/radio/demo/index.html +10 -16
  72. package/components/radio/demo/index.min.js +10 -10
  73. package/components/radio/demo/readme.html +9 -16
  74. package/components/radio/dist/auro-radio.d.ts +1 -1
  75. package/components/radio/dist/index.js +10 -10
  76. package/components/radio/dist/registered.js +10 -10
  77. package/components/select/demo/api.html +10 -16
  78. package/components/select/demo/api.md +16 -19
  79. package/components/select/demo/api.min.js +295 -136
  80. package/components/select/demo/index.html +11 -16
  81. package/components/select/demo/index.md +1 -1
  82. package/components/select/demo/index.min.js +295 -136
  83. package/components/select/demo/readme.html +9 -16
  84. package/components/select/dist/auro-select.d.ts +7 -32
  85. package/components/select/dist/index.js +283 -99
  86. package/components/select/dist/registered.js +283 -99
  87. package/package.json +25 -26
package/components/menu/demo/index.html CHANGED
@@ -16,24 +16,18 @@
16
16
  <head>
17
17
  <meta charset="UTF-8" />
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
- <title>Auro Web Component Demo | auro-menu</title>
20
-
21
- <!-- Prism.js Stylesheet -->
22
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
-
24
- <!-- Legacy reference is still needed to support auro-menu's use of legacy token values at this time -->
25
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
-
27
- <!-- Design Token Alaska Theme -->
28
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
-
30
- <!-- Webcore Stylesheet Alaska Theme -->
31
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
-
33
- <!-- Demo Specific Styles -->
19
+ <title>Auro Web Component Generator | auro-menu custom element</title>
20
+ <link
21
+ rel="stylesheet"
22
+ type="text/css"
23
+ href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
+ />
25
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
34
27
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
28
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
- </head>
29
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
+ </head>
37
31
  <body class="auro-markdown">
38
32
  <main></main>
39
33
 
package/components/menu/demo/index.min.js CHANGED
@@ -246,6 +246,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
246
246
  * @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
247
247
  * @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
248
248
  * @attr {boolean} multiselect - When true, the selected option can be multiple options.
249
+ * @attr {String|Array<string>} value - Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings.
249
250
  * @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
250
251
  * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
251
252
  * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
@@ -358,14 +359,9 @@ class AuroMenu extends AuroElement$1 {
358
359
  reflect: true,
359
360
  attribute: 'multiselect'
360
361
  },
361
-
362
- /**
363
- * Value selected for the component.
364
- */
365
362
  value: {
366
- type: String,
367
- reflect: true,
368
- attribute: 'value'
363
+ // Allow string, string[] arrays and undefined
364
+ type: Object
369
365
  },
370
366
 
371
367
  /**
@@ -400,25 +396,6 @@ class AuroMenu extends AuroElement$1 {
400
396
  AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroMenu);
401
397
  }
402
398
 
403
- /**
404
- * Formatted value based on `multiSelect` state.
405
- * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
406
- * @private
407
- * @returns {String|Array<String>}
408
- */
409
- get formattedValue() {
410
- if (this.multiSelect) {
411
- if (!this.value) {
412
- return undefined;
413
- }
414
- if (this.value.startsWith("[")) {
415
- return JSON.parse(this.value);
416
- }
417
- return [this.value];
418
- }
419
- return this.value;
420
- }
421
-
422
399
  // Lifecycle Methods
423
400
 
424
401
  connectedCallback() {
@@ -461,7 +438,7 @@ class AuroMenu extends AuroElement$1 {
461
438
  updated(changedProperties) {
462
439
  super.updated(changedProperties);
463
440
 
464
- if (changedProperties.has('multiSelect') && !changedProperties.has("value")) {
441
+ if (changedProperties.has('multiSelect')) {
465
442
  // Reset selection if multiSelect mode changes
466
443
  this.clearSelection();
467
444
  }
@@ -475,7 +452,7 @@ class AuroMenu extends AuroElement$1 {
475
452
  } else {
476
453
  if (this.multiSelect) {
477
454
  // In multiselect mode, this.value should be an array of strings
478
- const valueArray = this.formattedValue;
455
+ const valueArray = Array.isArray(this.value) ? this.value : [this.value];
479
456
  const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
480
457
 
481
458
  this.optionSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
@@ -642,14 +619,14 @@ class AuroMenu extends AuroElement$1 {
642
619
  */
643
620
  handleSelectState(option) {
644
621
  if (this.multiSelect) {
645
- const currentValue = this.formattedValue || [];
622
+ const currentValue = this.value || [];
646
623
  const currentSelected = this.optionSelected || [];
647
624
 
648
625
  if (!currentValue.includes(option.value)) {
649
- this.value = JSON.stringify([
626
+ this.value = [
650
627
  ...currentValue,
651
628
  option.value
652
- ]);
629
+ ];
653
630
  }
654
631
  if (!currentSelected.includes(option)) {
655
632
  this.optionSelected = [
@@ -672,15 +649,13 @@ class AuroMenu extends AuroElement$1 {
672
649
  * @param {HTMLElement} option - The menuoption to be deselected.
673
650
  */
674
651
  handleDeselectState(option) {
675
- if (this.multiSelect) {
652
+ if (this.multiSelect && Array.isArray(this.value)) {
676
653
  // Remove this option from array
677
- const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
654
+ this.value = this.value.filter((val) => val !== option.value);
678
655
 
679
656
  // If array is empty after removal, set back to undefined
680
- if (newFormattedValue && newFormattedValue.length === 0) {
657
+ if (this.value.length === 0) {
681
658
  this.value = undefined;
682
- } else {
683
- this.value = JSON.stringify(newFormattedValue);
684
659
  }
685
660
 
686
661
  this.optionSelected = this.optionSelected.filter((val) => val !== option);
@@ -1038,7 +1013,7 @@ class AuroMenu extends AuroElement$1 {
1038
1013
  */
1039
1014
  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);
1040
1015
 
1041
- 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) + var(--ds-size-150, 0.75rem) + 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)}:host .wrapper[class*=-lg]:not(:last-child){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)}:host .wrapper[class*=-xl]:not(:last-child){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) + var(--ds-size-150, 0.75rem) + 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}`;
1016
+ 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)}:host .wrapper[class*=-lg]:not(:last-child){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)}:host .wrapper[class*=-xl]:not(:last-child){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}`;
1042
1017
 
1043
1018
  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)}`;
1044
1019
 
package/components/menu/demo/readme.html CHANGED
@@ -16,24 +16,17 @@
16
16
  <head>
17
17
  <meta charset="UTF-8" />
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
- <title>Auro Web Component Demo | auro-menu</title>
20
-
21
- <!-- Prism.js Stylesheet -->
22
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
-
24
- <!-- Legacy reference is still needed to support auro-menu's use of legacy token values at this time -->
25
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
-
27
- <!-- Design Token Alaska Theme -->
28
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
-
30
- <!-- Webcore Stylesheet Alaska Theme -->
31
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
-
33
- <!-- Demo Specific Styles -->
19
+ <title>Auro Web Component Generator | auro-menu custom element</title>
20
+ <link
21
+ rel="stylesheet"
22
+ type="text/css"
23
+ href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
+ />
25
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
34
27
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
28
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
- </head>
29
+ </head>
37
30
  <body class="auro-markdown">
38
31
  <main></main>
39
32
 
package/components/menu/dist/auro-menu.d.ts CHANGED
@@ -7,6 +7,7 @@
7
7
  * @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
8
8
  * @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
9
9
  * @attr {boolean} multiselect - When true, the selected option can be multiple options.
10
+ * @attr {String|Array<string>} value - Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings.
10
11
  * @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
11
12
  * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
12
13
  * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
@@ -49,13 +50,8 @@ export class AuroMenu extends AuroElement {
49
50
  reflect: boolean;
50
51
  attribute: string;
51
52
  };
52
- /**
53
- * Value selected for the component.
54
- */
55
53
  value: {
56
- type: StringConstructor;
57
- reflect: boolean;
58
- attribute: string;
54
+ type: ObjectConstructor;
59
55
  };
60
56
  /**
61
57
  * Indent level for submenus.
@@ -114,13 +110,6 @@ export class AuroMenu extends AuroElement {
114
110
  * @private
115
111
  */
116
112
  private handleSlotChange;
117
- /**
118
- * Formatted value based on `multiSelect` state.
119
- * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
120
- * @private
121
- * @returns {String|Array<String>}
122
- */
123
- private get formattedValue();
124
113
  firstUpdated(): void;
125
114
  loadingSlots: NodeListOf<Element>;
126
115
  /**
package/components/menu/dist/index.js CHANGED
@@ -266,6 +266,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
266
266
  * @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
267
267
  * @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
268
268
  * @attr {boolean} multiselect - When true, the selected option can be multiple options.
269
+ * @attr {String|Array<string>} value - Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings.
269
270
  * @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
270
271
  * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
271
272
  * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
@@ -378,14 +379,9 @@ class AuroMenu extends AuroElement$1 {
378
379
  reflect: true,
379
380
  attribute: 'multiselect'
380
381
  },
381
-
382
- /**
383
- * Value selected for the component.
384
- */
385
382
  value: {
386
- type: String,
387
- reflect: true,
388
- attribute: 'value'
383
+ // Allow string, string[] arrays and undefined
384
+ type: Object
389
385
  },
390
386
 
391
387
  /**
@@ -420,25 +416,6 @@ class AuroMenu extends AuroElement$1 {
420
416
  AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroMenu);
421
417
  }
422
418
 
423
- /**
424
- * Formatted value based on `multiSelect` state.
425
- * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
426
- * @private
427
- * @returns {String|Array<String>}
428
- */
429
- get formattedValue() {
430
- if (this.multiSelect) {
431
- if (!this.value) {
432
- return undefined;
433
- }
434
- if (this.value.startsWith("[")) {
435
- return JSON.parse(this.value);
436
- }
437
- return [this.value];
438
- }
439
- return this.value;
440
- }
441
-
442
419
  // Lifecycle Methods
443
420
 
444
421
  connectedCallback() {
@@ -481,7 +458,7 @@ class AuroMenu extends AuroElement$1 {
481
458
  updated(changedProperties) {
482
459
  super.updated(changedProperties);
483
460
 
484
- if (changedProperties.has('multiSelect') && !changedProperties.has("value")) {
461
+ if (changedProperties.has('multiSelect')) {
485
462
  // Reset selection if multiSelect mode changes
486
463
  this.clearSelection();
487
464
  }
@@ -495,7 +472,7 @@ class AuroMenu extends AuroElement$1 {
495
472
  } else {
496
473
  if (this.multiSelect) {
497
474
  // In multiselect mode, this.value should be an array of strings
498
- const valueArray = this.formattedValue;
475
+ const valueArray = Array.isArray(this.value) ? this.value : [this.value];
499
476
  const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
500
477
 
501
478
  this.optionSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
@@ -662,14 +639,14 @@ class AuroMenu extends AuroElement$1 {
662
639
  */
663
640
  handleSelectState(option) {
664
641
  if (this.multiSelect) {
665
- const currentValue = this.formattedValue || [];
642
+ const currentValue = this.value || [];
666
643
  const currentSelected = this.optionSelected || [];
667
644
 
668
645
  if (!currentValue.includes(option.value)) {
669
- this.value = JSON.stringify([
646
+ this.value = [
670
647
  ...currentValue,
671
648
  option.value
672
- ]);
649
+ ];
673
650
  }
674
651
  if (!currentSelected.includes(option)) {
675
652
  this.optionSelected = [
@@ -692,15 +669,13 @@ class AuroMenu extends AuroElement$1 {
692
669
  * @param {HTMLElement} option - The menuoption to be deselected.
693
670
  */
694
671
  handleDeselectState(option) {
695
- if (this.multiSelect) {
672
+ if (this.multiSelect && Array.isArray(this.value)) {
696
673
  // Remove this option from array
697
- const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
674
+ this.value = this.value.filter((val) => val !== option.value);
698
675
 
699
676
  // If array is empty after removal, set back to undefined
700
- if (newFormattedValue && newFormattedValue.length === 0) {
677
+ if (this.value.length === 0) {
701
678
  this.value = undefined;
702
- } else {
703
- this.value = JSON.stringify(newFormattedValue);
704
679
  }
705
680
 
706
681
  this.optionSelected = this.optionSelected.filter((val) => val !== option);
@@ -1051,7 +1026,7 @@ class AuroMenu extends AuroElement$1 {
1051
1026
  }
1052
1027
  }
1053
1028
 
1054
- var styleCss$1 = css`: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) + var(--ds-size-150, 0.75rem) + 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)}:host .wrapper[class*=-lg]:not(:last-child){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)}:host .wrapper[class*=-xl]:not(:last-child){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) + var(--ds-size-150, 0.75rem) + 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}`;
1029
+ var styleCss$1 = css`: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)}:host .wrapper[class*=-lg]:not(:last-child){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)}:host .wrapper[class*=-xl]:not(:last-child){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}`;
1055
1030
 
1056
1031
  var colorCss$1 = css`: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)}`;
1057
1032
 
package/components/menu/dist/registered.js CHANGED
@@ -225,6 +225,7 @@ function dispatchMenuEvent(element, eventName, detail = null) {
225
225
  * @attr {boolean} nocheckmark - When true, selected option will not show the checkmark.
226
226
  * @attr {boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
227
227
  * @attr {boolean} multiselect - When true, the selected option can be multiple options.
228
+ * @attr {String|Array<string>} value - Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings.
228
229
  * @prop {boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
229
230
  * @event {CustomEvent<Element>} auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
230
231
  * @event {CustomEvent<any>} auroMenu-customEventFired - Notifies that a custom event has been fired.
@@ -337,14 +338,9 @@ class AuroMenu extends AuroElement$1 {
337
338
  reflect: true,
338
339
  attribute: 'multiselect'
339
340
  },
340
-
341
- /**
342
- * Value selected for the component.
343
- */
344
341
  value: {
345
- type: String,
346
- reflect: true,
347
- attribute: 'value'
342
+ // Allow string, string[] arrays and undefined
343
+ type: Object
348
344
  },
349
345
 
350
346
  /**
@@ -379,25 +375,6 @@ class AuroMenu extends AuroElement$1 {
379
375
  AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroMenu);
380
376
  }
381
377
 
382
- /**
383
- * Formatted value based on `multiSelect` state.
384
- * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
385
- * @private
386
- * @returns {String|Array<String>}
387
- */
388
- get formattedValue() {
389
- if (this.multiSelect) {
390
- if (!this.value) {
391
- return undefined;
392
- }
393
- if (this.value.startsWith("[")) {
394
- return JSON.parse(this.value);
395
- }
396
- return [this.value];
397
- }
398
- return this.value;
399
- }
400
-
401
378
  // Lifecycle Methods
402
379
 
403
380
  connectedCallback() {
@@ -440,7 +417,7 @@ class AuroMenu extends AuroElement$1 {
440
417
  updated(changedProperties) {
441
418
  super.updated(changedProperties);
442
419
 
443
- if (changedProperties.has('multiSelect') && !changedProperties.has("value")) {
420
+ if (changedProperties.has('multiSelect')) {
444
421
  // Reset selection if multiSelect mode changes
445
422
  this.clearSelection();
446
423
  }
@@ -454,7 +431,7 @@ class AuroMenu extends AuroElement$1 {
454
431
  } else {
455
432
  if (this.multiSelect) {
456
433
  // In multiselect mode, this.value should be an array of strings
457
- const valueArray = this.formattedValue;
434
+ const valueArray = Array.isArray(this.value) ? this.value : [this.value];
458
435
  const matchingOptions = this.items.filter((item) => valueArray.includes(item.value));
459
436
 
460
437
  this.optionSelected = matchingOptions.length > 0 ? matchingOptions : undefined;
@@ -621,14 +598,14 @@ class AuroMenu extends AuroElement$1 {
621
598
  */
622
599
  handleSelectState(option) {
623
600
  if (this.multiSelect) {
624
- const currentValue = this.formattedValue || [];
601
+ const currentValue = this.value || [];
625
602
  const currentSelected = this.optionSelected || [];
626
603
 
627
604
  if (!currentValue.includes(option.value)) {
628
- this.value = JSON.stringify([
605
+ this.value = [
629
606
  ...currentValue,
630
607
  option.value
631
- ]);
608
+ ];
632
609
  }
633
610
  if (!currentSelected.includes(option)) {
634
611
  this.optionSelected = [
@@ -651,15 +628,13 @@ class AuroMenu extends AuroElement$1 {
651
628
  * @param {HTMLElement} option - The menuoption to be deselected.
652
629
  */
653
630
  handleDeselectState(option) {
654
- if (this.multiSelect) {
631
+ if (this.multiSelect && Array.isArray(this.value)) {
655
632
  // Remove this option from array
656
- const newFormattedValue = (this.formattedValue || []).filter((val) => val !== option.value);
633
+ this.value = this.value.filter((val) => val !== option.value);
657
634
 
658
635
  // If array is empty after removal, set back to undefined
659
- if (newFormattedValue && newFormattedValue.length === 0) {
636
+ if (this.value.length === 0) {
660
637
  this.value = undefined;
661
- } else {
662
- this.value = JSON.stringify(newFormattedValue);
663
638
  }
664
639
 
665
640
  this.optionSelected = this.optionSelected.filter((val) => val !== option);
@@ -1010,7 +985,7 @@ class AuroMenu extends AuroElement$1 {
1010
985
  }
1011
986
  }
1012
987
 
1013
- var styleCss$1 = css`: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) + var(--ds-size-150, 0.75rem) + 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)}:host .wrapper[class*=-lg]:not(:last-child){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)}:host .wrapper[class*=-xl]:not(:last-child){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) + var(--ds-size-150, 0.75rem) + 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}`;
988
+ var styleCss$1 = css`: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)}:host .wrapper[class*=-lg]:not(:last-child){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)}:host .wrapper[class*=-xl]:not(:last-child){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}`;
1014
989
 
1015
990
  var colorCss$1 = css`: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)}`;
1016
991
 
package/components/radio/demo/api.html CHANGED
@@ -15,24 +15,18 @@
15
15
  <head>
16
16
  <meta charset="UTF-8" />
17
17
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
18
- <title>Auro Web Component Demo | auro-radio</title>
19
-
20
- <!-- Prism.js Stylesheet -->
21
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
22
-
23
- <!-- Legacy reference is still needed to support auro-radio's use of legacy token values at this time -->
24
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
25
-
26
- <!-- Design Token Alaska Theme -->
27
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
28
-
29
- <!-- Webcore Stylesheet Alaska Theme -->
30
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
31
-
32
- <!-- Demo Specific Styles -->
18
+ <title>Auro Web Component Generator | auro-radio custom element</title>
19
+ <link
20
+ rel="stylesheet"
21
+ type="text/css"
22
+ href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
23
+ />
24
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
25
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
33
26
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
34
27
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
35
- </head>
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
29
+ </head>
36
30
  <body class="auro-markdown">
37
31
  <main></main>
38
32
 
package/components/radio/demo/api.min.js CHANGED
@@ -246,8 +246,8 @@ class AuroRadio extends i$2 {
246
246
  },
247
247
 
248
248
  /**
249
- * Do not add to api doc since changing of this can easily break a11y.
250
249
  * @private
250
+ * not to add to api.md since changing of this can easily break a11y.
251
251
  */
252
252
  role: {
253
253
  type: String,
@@ -443,7 +443,7 @@ class AuroRadio extends i$2 {
443
443
  */
444
444
  const a=Symbol.for(""),o=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i=(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(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);
445
445
 
446
- var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}[auro-helptext]{margin-top:var(--ds-size-150, 0.75rem)}`;
446
+ var styleCss$1 = i$5`:host{display:block;padding-bottom:var(--ds-size-150, 0.75rem)}fieldset{all:unset}.displayFlex legend+slot{display:flex;white-space:nowrap}legend{margin-bottom:var(--ds-size-150, 0.75rem)}`;
447
447
 
448
448
  var colorCss$1 = i$5`:host legend{color:var(--ds-auro-radio-group-label-color)}:host([disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([onDark]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-radio-group-label-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
449
449
 
@@ -923,19 +923,19 @@ class AuroFormValidation {
923
923
  {
924
924
  check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
925
925
  validity: 'tooShort',
926
- message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
926
+ message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
927
927
  },
928
928
  {
929
929
  check: (e) => e.value?.length > e.maxLength,
930
930
  validity: 'tooLong',
931
- message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
931
+ message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
932
932
  }
933
933
  ],
934
934
  pattern: [
935
935
  {
936
936
  check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
937
937
  validity: 'patternMismatch',
938
- message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
938
+ message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
939
939
  }
940
940
  ]
941
941
  },
@@ -1130,10 +1130,10 @@ class AuroFormValidation {
1130
1130
  if (!hasValue && elem.required && elem.touched) {
1131
1131
  elem.validity = 'valueMissing';
1132
1132
  elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
1133
- } else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
1133
+ } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
1134
1134
  this.validateType(elem);
1135
1135
  this.validateElementAttributes(elem);
1136
- } else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
1136
+ } else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
1137
1137
  this.validateElementAttributes(elem);
1138
1138
  }
1139
1139
  }
@@ -1266,7 +1266,7 @@ class AuroDependencyVersioning {
1266
1266
 
1267
1267
  var colorCss = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
1268
1268
 
1269
- var styleCss = i$5`:host{position:relative;display:block}.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
1269
+ var styleCss = i$5`.helptext-wrapper{display:none;font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([large]) .helptext-wrapper{font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
1270
1270
 
1271
1271
  var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
1272
1272
 
@@ -1903,11 +1903,11 @@ class AuroRadioGroup extends i$2 {
1903
1903
 
1904
1904
  ${!this.validity || this.validity === undefined || this.validity === 'valid'
1905
1905
  ? u`
1906
- <${this.helpTextTag} ?onDark="${this.onDark}" part="helpText">
1906
+ <${this.helpTextTag} large ?onDark="${this.onDark}" part="helpText">
1907
1907
  <slot name="helpText"></slot>
1908
1908
  </${this.helpTextTag}>`
1909
1909
  : u`
1910
- <${this.helpTextTag} ?onDark="${this.onDark}" role="alert" error aria-live="assertive" part="helpText">
1910
+ <${this.helpTextTag} large ?onDark="${this.onDark}" role="alert" error aria-live="assertive" part="helpText">
1911
1911
  ${this.errorMessage}
1912
1912
  </${this.helpTextTag}>`
1913
1913
  }
package/components/radio/demo/index.html CHANGED
@@ -16,24 +16,18 @@
16
16
  <head>
17
17
  <meta charset="UTF-8" />
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
- <title>Auro Web Component Demo | auro-radio</title>
20
-
21
- <!-- Prism.js Stylesheet -->
22
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
-
24
- <!-- Legacy reference is still needed to support auro-radio's use of legacy token values at this time -->
25
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
-
27
- <!-- Design Token Alaska Theme -->
28
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
-
30
- <!-- Webcore Stylesheet Alaska Theme -->
31
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
-
33
- <!-- Demo Specific Styles -->
19
+ <title>Auro Web Component Generator | auro-radio custom element</title>
20
+ <link
21
+ rel="stylesheet"
22
+ type="text/css"
23
+ href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
+ />
25
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
34
27
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
28
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
- </head>
29
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
+ </head>
37
31
  <body class="auro-markdown">
38
32
  <main></main>
39
33