@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.8 → 0.0.0-pr624.80

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 (143) 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 +1262 -81
  5. package/components/bibtemplate/dist/registered.js +1262 -81
  6. package/components/checkbox/README.md +1 -1
  7. package/components/checkbox/demo/api.html +16 -10
  8. package/components/checkbox/demo/api.md +49 -15
  9. package/components/checkbox/demo/api.min.js +73 -43
  10. package/components/checkbox/demo/index.html +16 -10
  11. package/components/checkbox/demo/index.md +2 -2
  12. package/components/checkbox/demo/index.min.js +73 -43
  13. package/components/checkbox/demo/readme.html +16 -9
  14. package/components/checkbox/demo/readme.md +1 -1
  15. package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
  16. package/components/checkbox/dist/auro-checkbox.d.ts +3 -3
  17. package/components/checkbox/dist/index.js +72 -42
  18. package/components/checkbox/dist/registered.js +72 -42
  19. package/components/combobox/demo/api.html +16 -10
  20. package/components/combobox/demo/api.md +115 -8
  21. package/components/combobox/demo/api.min.js +3102 -921
  22. package/components/combobox/demo/index.html +16 -10
  23. package/components/combobox/demo/index.md +6 -30
  24. package/components/combobox/demo/index.min.js +3102 -921
  25. package/components/combobox/demo/readme.html +16 -9
  26. package/components/combobox/dist/auro-combobox.d.ts +44 -12
  27. package/components/combobox/dist/index.js +3080 -995
  28. package/components/combobox/dist/registered.js +3080 -995
  29. package/components/counter/demo/api.html +17 -10
  30. package/components/counter/demo/api.md +158 -21
  31. package/components/counter/demo/api.min.js +3416 -728
  32. package/components/counter/demo/index.html +17 -10
  33. package/components/counter/demo/index.md +185 -34
  34. package/components/counter/demo/index.min.js +3416 -728
  35. package/components/counter/demo/readme.html +16 -9
  36. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  37. package/components/counter/dist/auro-counter-group.d.ts +161 -11
  38. package/components/counter/dist/auro-counter.d.ts +16 -0
  39. package/components/counter/dist/helptextVersion.d.ts +2 -0
  40. package/components/counter/dist/iconVersion.d.ts +1 -1
  41. package/components/counter/dist/index.js +3416 -728
  42. package/components/counter/dist/registered.js +3416 -728
  43. package/components/datepicker/README.md +1 -1
  44. package/components/datepicker/demo/api.html +16 -10
  45. package/components/datepicker/demo/api.md +59 -28
  46. package/components/datepicker/demo/api.min.js +8486 -4644
  47. package/components/datepicker/demo/index.html +16 -10
  48. package/components/datepicker/demo/index.md +75 -8
  49. package/components/datepicker/demo/index.min.js +8486 -4644
  50. package/components/datepicker/demo/readme.html +16 -9
  51. package/components/datepicker/demo/readme.md +1 -1
  52. package/components/datepicker/dist/auro-datepicker.d.ts +151 -12
  53. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  54. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  55. package/components/datepicker/dist/index.js +7033 -3191
  56. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  57. package/components/datepicker/dist/registered.js +7033 -3191
  58. package/components/dropdown/demo/api.html +16 -10
  59. package/components/dropdown/demo/api.md +82 -275
  60. package/components/dropdown/demo/api.min.js +451 -260
  61. package/components/dropdown/demo/index.html +16 -10
  62. package/components/dropdown/demo/index.md +92 -362
  63. package/components/dropdown/demo/index.min.js +451 -260
  64. package/components/dropdown/demo/readme.html +16 -9
  65. package/components/dropdown/dist/auro-dropdown.d.ts +43 -83
  66. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  67. package/components/dropdown/dist/index.js +450 -259
  68. package/components/dropdown/dist/registered.js +450 -259
  69. package/components/form/demo/api.html +16 -9
  70. package/components/form/demo/api.min.js +2 -2
  71. package/components/form/demo/autocomplete.html +19 -3
  72. package/components/form/demo/index.html +16 -9
  73. package/components/form/demo/index.min.js +2 -2
  74. package/components/form/demo/readme.html +16 -9
  75. package/components/form/demo/working.html +19 -13
  76. package/components/form/dist/index.js +1 -1
  77. package/components/form/dist/registered.js +1 -1
  78. package/components/helptext/dist/index.js +2 -2
  79. package/components/helptext/dist/registered.js +2 -2
  80. package/components/input/README.md +5 -2
  81. package/components/input/demo/api.html +16 -10
  82. package/components/input/demo/api.md +228 -130
  83. package/components/input/demo/api.min.js +909 -247
  84. package/components/input/demo/index.html +16 -10
  85. package/components/input/demo/index.md +48 -32
  86. package/components/input/demo/index.min.js +909 -247
  87. package/components/input/demo/readme.html +16 -9
  88. package/components/input/demo/readme.md +5 -2
  89. package/components/input/dist/auro-input.d.ts +3 -3
  90. package/components/input/dist/base-input.d.ts +38 -10
  91. package/components/input/dist/buttonVersion.d.ts +1 -1
  92. package/components/input/dist/iconVersion.d.ts +1 -1
  93. package/components/input/dist/index.js +908 -246
  94. package/components/input/dist/registered.js +908 -246
  95. package/components/layoutElement/dist/index.js +13 -10
  96. package/components/menu/demo/api.html +32 -10
  97. package/components/menu/demo/api.md +69 -8
  98. package/components/menu/demo/api.min.js +239 -48
  99. package/components/menu/demo/index.html +16 -10
  100. package/components/menu/demo/index.min.js +239 -48
  101. package/components/menu/demo/readme.html +16 -9
  102. package/components/menu/dist/auro-menu.d.ts +41 -7
  103. package/components/menu/dist/auro-menuoption.d.ts +15 -3
  104. package/components/menu/dist/iconVersion.d.ts +1 -1
  105. package/components/menu/dist/index.js +238 -47
  106. package/components/menu/dist/registered.js +238 -47
  107. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  108. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  109. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  110. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  111. package/components/radio/demo/api.html +16 -10
  112. package/components/radio/demo/api.md +39 -9
  113. package/components/radio/demo/api.min.js +91 -93
  114. package/components/radio/demo/index.html +16 -10
  115. package/components/radio/demo/index.min.js +91 -93
  116. package/components/radio/demo/readme.html +16 -9
  117. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  118. package/components/radio/dist/auro-radio.d.ts +9 -12
  119. package/components/radio/dist/index.js +90 -92
  120. package/components/radio/dist/registered.js +90 -92
  121. package/components/select/demo/api.html +16 -10
  122. package/components/select/demo/api.js +0 -2
  123. package/components/select/demo/api.md +150 -121
  124. package/components/select/demo/api.min.js +2184 -704
  125. package/components/select/demo/index.html +17 -11
  126. package/components/select/demo/index.md +1066 -259
  127. package/components/select/demo/index.min.js +2186 -694
  128. package/components/select/demo/readme.html +16 -9
  129. package/components/select/dist/auro-select.d.ts +59 -21
  130. package/components/select/dist/index.js +2107 -711
  131. package/components/select/dist/registered.js +2107 -711
  132. package/package.json +31 -28
  133. /package/components/{datepicker/dist/styles/default/color-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  134. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/classic}/color-css.d.ts +0 -0
  135. /package/components/datepicker/dist/styles/{emphasized → classic}/style-css.d.ts +0 -0
  136. /package/components/{dropdown/dist/styles/default/bibColors-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  137. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
  138. /package/components/dropdown/dist/styles/{default/bibStyles-css.d.ts → classic/bibColors-css.d.ts} +0 -0
  139. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  140. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
  141. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
  142. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
  143. /package/components/menu/dist/styles/{tokens-css.d.ts → default/color-menu-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
@@ -16,19 +16,40 @@
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 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">
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 -->
27
34
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
35
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
- </head>
36
+ </head>
31
37
  <body class="auro-markdown">
38
+ <header oninput="onRadioInput(event)">
39
+ <auro-radio-group required horizontal name="shape">
40
+ <span slot="legend">Shape</span>
41
+ <auro-radio label="box" value="box" checked></auro-radio>
42
+ <auro-radio label="rounded" value="rounded"></auro-radio>
43
+ <auro-radio label="pill" value="pill"></auro-radio>
44
+ </auro-radio-group>
45
+ <auro-radio-group required horizontal name="size">
46
+ <span slot="legend">Size</span>
47
+ <auro-radio label="medium(default)" value="md" checked></auro-radio>
48
+ <auro-radio label="large" value="lg"></auro-radio>
49
+ <auro-radio label="xlarge" value="xl"></auro-radio>
50
+ </auro-radio-group>
51
+
52
+ </header>
32
53
  <main></main>
33
54
 
34
55
  <script type="module">
@@ -47,6 +68,7 @@
47
68
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-input@latest/dist/auro-input__bundled.js" type="module"></script>
48
69
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
49
70
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@latest/dist/auro-loader__bundled.js" type="module"></script>
71
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-radio/+esm"></script>
50
72
  <script type="module" data-demo-script="true">
51
73
  import { initExamples } from "./api.min.js"
52
74
  initExamples();
package/components/menu/demo/api.md CHANGED
@@ -11,13 +11,16 @@ 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. |
20
- | [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
+ | [shape](#shape) | | `string` | "" | |
22
+ | [size](#size) | | `string` | "" | |
23
+ | [value](#value) | `value` | `string` | "undefined" | Value selected for the component. |
21
24
 
22
25
  ## Methods
23
26
 
@@ -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,19 +942,74 @@ 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
- @import "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
949
+ @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
944
950
 
945
951
  :host {
946
- --ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, #{$ds-basic-color-border-divider});
947
- --ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #{$ds-basic-color-brand-primary});
948
- --ds-auro-menu-loader-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
952
+ --ds-auro-menu-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
953
+ --ds-auro-menu-loader-color: var(--ds-basic-color-brand-primary, #{v.$ds-basic-color-brand-primary});
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
- --ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
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>