@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.7 → 0.0.0-pr624.70

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 (138) 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 +47 -14
  9. package/components/checkbox/demo/api.min.js +65 -42
  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 +65 -42
  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 +65 -42
  18. package/components/checkbox/dist/registered.js +65 -42
  19. package/components/combobox/demo/api.html +16 -10
  20. package/components/combobox/demo/api.md +113 -8
  21. package/components/combobox/demo/api.min.js +3096 -870
  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 +3096 -870
  25. package/components/combobox/demo/readme.html +16 -9
  26. package/components/combobox/dist/auro-combobox.d.ts +42 -8
  27. package/components/combobox/dist/index.js +2878 -748
  28. package/components/combobox/dist/registered.js +2878 -748
  29. package/components/counter/demo/api.html +17 -10
  30. package/components/counter/demo/api.md +156 -21
  31. package/components/counter/demo/api.min.js +3363 -652
  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 +3363 -652
  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 +151 -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 +3364 -653
  42. package/components/counter/dist/registered.js +3364 -653
  43. package/components/datepicker/demo/api.html +16 -10
  44. package/components/datepicker/demo/api.md +25 -16
  45. package/components/datepicker/demo/api.min.js +11857 -8105
  46. package/components/datepicker/demo/index.html +16 -10
  47. package/components/datepicker/demo/index.md +71 -4
  48. package/components/datepicker/demo/index.min.js +11857 -8105
  49. package/components/datepicker/demo/readme.html +16 -9
  50. package/components/datepicker/dist/auro-datepicker.d.ts +89 -11
  51. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  52. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  53. package/components/datepicker/dist/index.js +8691 -4939
  54. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  55. package/components/datepicker/dist/registered.js +8691 -4939
  56. package/components/dropdown/demo/api.html +16 -10
  57. package/components/dropdown/demo/api.md +81 -274
  58. package/components/dropdown/demo/api.min.js +429 -195
  59. package/components/dropdown/demo/index.html +16 -10
  60. package/components/dropdown/demo/index.md +92 -362
  61. package/components/dropdown/demo/index.min.js +429 -195
  62. package/components/dropdown/demo/readme.html +16 -9
  63. package/components/dropdown/dist/auro-dropdown.d.ts +41 -76
  64. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  65. package/components/dropdown/dist/index.js +429 -195
  66. package/components/dropdown/dist/registered.js +429 -195
  67. package/components/form/demo/api.html +16 -9
  68. package/components/form/demo/api.min.js +1 -1
  69. package/components/form/demo/autocomplete.html +19 -3
  70. package/components/form/demo/index.html +16 -9
  71. package/components/form/demo/index.min.js +1 -1
  72. package/components/form/demo/readme.html +16 -9
  73. package/components/form/demo/working.html +19 -13
  74. package/components/form/dist/index.js +1 -1
  75. package/components/form/dist/registered.js +1 -1
  76. package/components/helptext/dist/index.js +2 -2
  77. package/components/helptext/dist/registered.js +2 -2
  78. package/components/input/README.md +5 -2
  79. package/components/input/demo/api.html +16 -10
  80. package/components/input/demo/api.md +228 -130
  81. package/components/input/demo/api.min.js +908 -246
  82. package/components/input/demo/index.html +16 -10
  83. package/components/input/demo/index.md +48 -32
  84. package/components/input/demo/index.min.js +908 -246
  85. package/components/input/demo/readme.html +16 -9
  86. package/components/input/demo/readme.md +5 -2
  87. package/components/input/dist/auro-input.d.ts +3 -3
  88. package/components/input/dist/base-input.d.ts +38 -10
  89. package/components/input/dist/buttonVersion.d.ts +1 -1
  90. package/components/input/dist/iconVersion.d.ts +1 -1
  91. package/components/input/dist/index.js +908 -246
  92. package/components/input/dist/registered.js +908 -246
  93. package/components/layoutElement/dist/index.js +13 -10
  94. package/components/menu/demo/api.html +32 -10
  95. package/components/menu/demo/api.md +69 -8
  96. package/components/menu/demo/api.min.js +238 -47
  97. package/components/menu/demo/index.html +16 -10
  98. package/components/menu/demo/index.min.js +238 -47
  99. package/components/menu/demo/readme.html +16 -9
  100. package/components/menu/dist/auro-menu.d.ts +41 -7
  101. package/components/menu/dist/auro-menuoption.d.ts +15 -3
  102. package/components/menu/dist/iconVersion.d.ts +1 -1
  103. package/components/menu/dist/index.js +238 -47
  104. package/components/menu/dist/registered.js +238 -47
  105. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  106. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  107. package/components/radio/demo/api.html +16 -10
  108. package/components/radio/demo/api.md +7 -8
  109. package/components/radio/demo/api.min.js +88 -90
  110. package/components/radio/demo/index.html +16 -10
  111. package/components/radio/demo/index.min.js +88 -90
  112. package/components/radio/demo/readme.html +16 -9
  113. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  114. package/components/radio/dist/auro-radio.d.ts +9 -12
  115. package/components/radio/dist/index.js +88 -90
  116. package/components/radio/dist/registered.js +88 -90
  117. package/components/select/demo/api.html +16 -10
  118. package/components/select/demo/api.js +0 -2
  119. package/components/select/demo/api.md +104 -57
  120. package/components/select/demo/api.min.js +2148 -635
  121. package/components/select/demo/index.html +17 -11
  122. package/components/select/demo/index.md +45 -158
  123. package/components/select/demo/index.min.js +2148 -623
  124. package/components/select/demo/readme.html +16 -9
  125. package/components/select/dist/auro-select.d.ts +49 -16
  126. package/components/select/dist/index.js +2078 -649
  127. package/components/select/dist/registered.js +2078 -649
  128. package/package.json +30 -27
  129. /package/components/{datepicker/dist/styles/emphasized/style-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  130. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/color-css.d.ts +0 -0
  131. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
  132. /package/components/dropdown/dist/styles/{default → classic}/bibColors-css.d.ts +0 -0
  133. /package/components/dropdown/dist/styles/{default → classic}/bibStyles-css.d.ts +0 -0
  134. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
  135. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
  136. /package/components/menu/dist/styles/{style-menu-css.d.ts → default/color-menu-css.d.ts} +0 -0
  137. /package/components/menu/dist/styles/{style-menuoption-css.d.ts → default/color-menuoption-css.d.ts} +0 -0
  138. /package/components/menu/dist/styles/{tokens-css.d.ts → default/style-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>