@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.2 → 0.0.0-pr624.21

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 (108) hide show
  1. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +13 -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 +1292 -79
  5. package/components/bibtemplate/dist/registered.js +1292 -79
  6. package/components/checkbox/README.md +1 -1
  7. package/components/checkbox/demo/api.md +8 -9
  8. package/components/checkbox/demo/api.min.js +30 -24
  9. package/components/checkbox/demo/index.md +2 -2
  10. package/components/checkbox/demo/index.min.js +30 -24
  11. package/components/checkbox/demo/readme.md +1 -1
  12. package/components/checkbox/dist/auro-checkbox.d.ts +3 -3
  13. package/components/checkbox/dist/index.js +30 -24
  14. package/components/checkbox/dist/registered.js +30 -24
  15. package/components/combobox/demo/api.md +53 -0
  16. package/components/combobox/demo/api.min.js +2898 -753
  17. package/components/combobox/demo/index.md +6 -0
  18. package/components/combobox/demo/index.min.js +2898 -753
  19. package/components/combobox/dist/auro-combobox.d.ts +12 -12
  20. package/components/combobox/dist/index.js +2646 -642
  21. package/components/combobox/dist/registered.js +2646 -642
  22. package/components/counter/demo/api.md +21 -19
  23. package/components/counter/demo/api.min.js +3648 -929
  24. package/components/counter/demo/index.md +99 -34
  25. package/components/counter/demo/index.min.js +3648 -929
  26. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  27. package/components/counter/dist/auro-counter-group.d.ts +105 -6
  28. package/components/counter/dist/auro-counter.d.ts +6 -0
  29. package/components/counter/dist/helptextVersion.d.ts +2 -0
  30. package/components/counter/dist/iconVersion.d.ts +1 -1
  31. package/components/counter/dist/index.js +3648 -929
  32. package/components/counter/dist/registered.js +3648 -929
  33. package/components/datepicker/demo/api.md +36 -19
  34. package/components/datepicker/demo/api.min.js +11437 -7744
  35. package/components/datepicker/demo/index.md +80 -0
  36. package/components/datepicker/demo/index.min.js +11437 -7744
  37. package/components/datepicker/dist/auro-datepicker.d.ts +71 -3
  38. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  39. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  40. package/components/datepicker/dist/index.js +13847 -10154
  41. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  42. package/components/datepicker/dist/registered.js +13847 -10154
  43. package/components/dropdown/demo/api.md +6 -7
  44. package/components/dropdown/demo/api.min.js +238 -144
  45. package/components/dropdown/demo/index.md +57 -9
  46. package/components/dropdown/demo/index.min.js +238 -144
  47. package/components/dropdown/dist/auro-dropdown.d.ts +10 -9
  48. package/components/dropdown/dist/auro-dropdownBib.d.ts +22 -0
  49. package/components/dropdown/dist/index.js +238 -144
  50. package/components/dropdown/dist/registered.js +238 -144
  51. package/components/form/demo/api.min.js +1 -1
  52. package/components/form/demo/index.min.js +1 -1
  53. package/components/form/dist/index.js +1 -1
  54. package/components/form/dist/registered.js +1 -1
  55. package/components/helptext/dist/index.js +2 -2
  56. package/components/helptext/dist/registered.js +2 -2
  57. package/components/input/demo/api.md +63 -56
  58. package/components/input/demo/api.min.js +983 -269
  59. package/components/input/demo/index.min.js +982 -268
  60. package/components/input/dist/auro-input.d.ts +202 -14
  61. package/components/input/dist/base-input.d.ts +30 -7
  62. package/components/input/dist/buttonVersion.d.ts +1 -1
  63. package/components/input/dist/iconVersion.d.ts +1 -1
  64. package/components/input/dist/index.js +982 -268
  65. package/components/input/dist/registered.js +982 -268
  66. package/components/layoutElement/dist/index.js +13 -10
  67. package/components/menu/demo/api.html +38 -0
  68. package/components/menu/demo/api.md +68 -7
  69. package/components/menu/demo/api.min.js +278 -42
  70. package/components/menu/demo/index.min.js +278 -42
  71. package/components/menu/dist/auro-menu.d.ts +28 -5
  72. package/components/menu/dist/auro-menuoption.d.ts +15 -3
  73. package/components/menu/dist/iconVersion.d.ts +1 -1
  74. package/components/menu/dist/index.js +278 -42
  75. package/components/menu/dist/registered.js +278 -42
  76. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  77. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  78. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  79. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  80. package/components/radio/demo/api.md +2 -2
  81. package/components/radio/demo/api.min.js +10 -7
  82. package/components/radio/demo/index.min.js +10 -7
  83. package/components/radio/dist/auro-radio.d.ts +1 -1
  84. package/components/radio/dist/index.js +10 -7
  85. package/components/radio/dist/registered.js +10 -7
  86. package/components/select/demo/api.js +2 -0
  87. package/components/select/demo/api.md +78 -12
  88. package/components/select/demo/api.min.js +2797 -538
  89. package/components/select/demo/index.html +1 -0
  90. package/components/select/demo/index.md +325 -763
  91. package/components/select/demo/index.min.js +2790 -543
  92. package/components/select/dist/auro-select.d.ts +111 -11
  93. package/components/select/dist/helptextVersion.d.ts +2 -0
  94. package/components/select/dist/index.js +2533 -427
  95. package/components/select/dist/registered.js +2533 -427
  96. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  97. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  98. package/package.json +6 -4
  99. /package/components/{dropdown/dist/styles/default/bibColors-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  100. /package/components/{dropdown → datepicker}/dist/styles/default/color-css.d.ts +0 -0
  101. /package/components/{dropdown/dist/styles/default/bibStyles-css.d.ts → datepicker/dist/styles/shapeSize-css.d.ts} +0 -0
  102. /package/components/{dropdown/dist/styles/default/style-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  103. /package/components/{dropdown/dist/styles → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
  104. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/classic/bibColors-css.d.ts} +0 -0
  105. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  106. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
  107. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
  108. /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
@@ -27,8 +27,45 @@
27
27
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
28
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
29
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
+ <style>
31
+ header {
32
+ background: lightgray;
33
+ position: fixed;
34
+ bottom: 0;
35
+ right: 0;
36
+ z-index: 10;
37
+ }
38
+ </style>
39
+ <script>
40
+ function onRadioInput(event) {
41
+ if (event.constructor.name === 'CustomEvent') {
42
+ const group = event.target.getAttribute('name');
43
+ const menus = document.querySelectorAll('auro-menu');
44
+ if (menus) {
45
+ menus.forEach((menu) => {
46
+ menu.setAttribute(group, event.target.value);
47
+ });
48
+ }
49
+ };
50
+ }
51
+ </script>
30
52
  </head>
31
53
  <body class="auro-markdown">
54
+ <header oninput="onRadioInput(event)">
55
+ <auro-radio-group required horizontal name="shape">
56
+ <span slot="legend">Shape</span>
57
+ <auro-radio label="box" value="box" checked></auro-radio>
58
+ <auro-radio label="rounded" value="rounded"></auro-radio>
59
+ <auro-radio label="pill" value="pill"></auro-radio>
60
+ </auro-radio-group>
61
+ <auro-radio-group required horizontal name="size">
62
+ <span slot="legend">Size</span>
63
+ <auro-radio label="medium(default)" value="md" checked></auro-radio>
64
+ <auro-radio label="large" value="lg"></auro-radio>
65
+ <auro-radio label="xlarge" value="xl"></auro-radio>
66
+ </auro-radio-group>
67
+
68
+ </header>
32
69
  <main></main>
33
70
 
34
71
  <script type="module">
@@ -47,6 +84,7 @@
47
84
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-input@latest/dist/auro-input__bundled.js" type="module"></script>
48
85
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
49
86
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@latest/dist/auro-loader__bundled.js" type="module"></script>
87
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-radio/+esm"></script>
50
88
  <script type="module" data-demo-script="true">
51
89
  import { initExamples } from "./api.min.js"
52
90
  initExamples();
package/components/menu/demo/api.md CHANGED
@@ -11,12 +11,15 @@ The auro-menu element provides users a way to select from a list of options.
11
11
  |-------------------------|------------------|-----------------------------------|-------------|--------------------------------------------------|
12
12
  | [disabled](#disabled) | `disabled` | `boolean` | | When true, the entire menu and all options are disabled; |
13
13
  | [hasLoadingPlaceholder](#hasLoadingPlaceholder) | | `boolean` | | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
14
+ | [layout](#layout) | | `string` | | |
14
15
  | [loading](#loading) | `loading` | `boolean` | false | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
15
16
  | [matchWord](#matchWord) | `matchword` | `string` | "undefined" | Specifies a string used to highlight matched string parts in options. |
16
17
  | [multiSelect](#multiSelect) | `multiselect` | `boolean` | false | When true, the selected option can be multiple options. |
17
18
  | [noCheckmark](#noCheckmark) | `nocheckmark` | `boolean` | false | When true, selected option will not show the checkmark. |
18
19
  | [optionActive](#optionActive) | `optionactive` | `object` | "undefined" | Specifies the current active menuOption. |
19
20
  | [optionSelected](#optionSelected) | `optionSelected` | `HTMLElement\|Array<HTMLElement>` | "undefined" | An array of currently selected menu options, type `HTMLElement` by default. In multi-select mode, `optionSelected` is an array of HTML elements. |
21
+ | [shape](#shape) | | `string` | "" | |
22
+ | [size](#size) | | `string` | "" | |
20
23
  | [value](#value) | `value` | `String\|Array<string>` | "undefined" | Value selected for the menu, type `string` by default. In multi-select mode, `value` is an array of strings. |
21
24
 
22
25
  ## Methods
@@ -60,8 +63,11 @@ The auro-menu element provides users a way to define a menu option.
60
63
  |---------------|---------------|-----------|---------|--------------------------------------------------|
61
64
  | [disabled](#disabled) | `disabled` | `Boolean` | false | When true specifies that the menuoption is disabled. |
62
65
  | [iconTag](#iconTag) | | `string` | | |
66
+ | [layout](#layout) | | `string` | | |
63
67
  | [nocheckmark](#nocheckmark) | `nocheckmark` | `boolean` | false | |
64
68
  | [selected](#selected) | `selected` | `Boolean` | false | Specifies that an option is selected. |
69
+ | [shape](#shape) | | `string` | "" | |
70
+ | [size](#size) | | `string` | "" | |
65
71
  | [value](#value) | `value` | `String` | | Specifies the value to be sent to a server. |
66
72
 
67
73
  ## Events
@@ -936,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>