@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.3 → 0.0.0-pr624.31

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 (113) 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 +47 -14
  8. package/components/checkbox/demo/api.min.js +35 -29
  9. package/components/checkbox/demo/index.md +2 -2
  10. package/components/checkbox/demo/index.min.js +35 -29
  11. package/components/checkbox/demo/readme.md +1 -1
  12. package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
  13. package/components/checkbox/dist/auro-checkbox.d.ts +3 -3
  14. package/components/checkbox/dist/index.js +35 -29
  15. package/components/checkbox/dist/registered.js +35 -29
  16. package/components/combobox/demo/api.md +101 -2
  17. package/components/combobox/demo/api.min.js +2935 -794
  18. package/components/combobox/demo/index.md +6 -30
  19. package/components/combobox/demo/index.min.js +2935 -794
  20. package/components/combobox/dist/auro-combobox.d.ts +45 -16
  21. package/components/combobox/dist/index.js +2832 -832
  22. package/components/combobox/dist/registered.js +2832 -832
  23. package/components/counter/demo/api.md +21 -19
  24. package/components/counter/demo/api.min.js +3648 -929
  25. package/components/counter/demo/index.md +99 -34
  26. package/components/counter/demo/index.min.js +3648 -929
  27. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  28. package/components/counter/dist/auro-counter-group.d.ts +105 -6
  29. package/components/counter/dist/auro-counter.d.ts +6 -0
  30. package/components/counter/dist/helptextVersion.d.ts +2 -0
  31. package/components/counter/dist/iconVersion.d.ts +1 -1
  32. package/components/counter/dist/index.js +3648 -929
  33. package/components/counter/dist/registered.js +3648 -929
  34. package/components/datepicker/demo/api.md +36 -19
  35. package/components/datepicker/demo/api.min.js +14662 -10980
  36. package/components/datepicker/demo/index.md +80 -0
  37. package/components/datepicker/demo/index.min.js +14662 -10980
  38. package/components/datepicker/dist/auro-datepicker.d.ts +71 -3
  39. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  40. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  41. package/components/datepicker/dist/index.js +11706 -8024
  42. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  43. package/components/datepicker/dist/registered.js +11706 -8024
  44. package/components/dropdown/demo/api.md +6 -7
  45. package/components/dropdown/demo/api.min.js +238 -144
  46. package/components/dropdown/demo/index.md +57 -9
  47. package/components/dropdown/demo/index.min.js +238 -144
  48. package/components/dropdown/dist/auro-dropdown.d.ts +10 -9
  49. package/components/dropdown/dist/auro-dropdownBib.d.ts +22 -0
  50. package/components/dropdown/dist/index.js +238 -144
  51. package/components/dropdown/dist/registered.js +238 -144
  52. package/components/form/demo/api.min.js +1 -1
  53. package/components/form/demo/index.min.js +1 -1
  54. package/components/form/dist/index.js +1 -1
  55. package/components/form/dist/registered.js +1 -1
  56. package/components/helptext/dist/index.js +2 -2
  57. package/components/helptext/dist/registered.js +2 -2
  58. package/components/input/README.md +1 -1
  59. package/components/input/demo/api.md +133 -97
  60. package/components/input/demo/api.min.js +972 -269
  61. package/components/input/demo/index.md +14 -14
  62. package/components/input/demo/index.min.js +971 -268
  63. package/components/input/demo/readme.md +1 -1
  64. package/components/input/dist/auro-input.d.ts +197 -15
  65. package/components/input/dist/base-input.d.ts +32 -8
  66. package/components/input/dist/buttonVersion.d.ts +1 -1
  67. package/components/input/dist/iconVersion.d.ts +1 -1
  68. package/components/input/dist/index.js +971 -268
  69. package/components/input/dist/registered.js +971 -268
  70. package/components/layoutElement/dist/index.js +13 -10
  71. package/components/menu/demo/api.html +38 -0
  72. package/components/menu/demo/api.md +68 -7
  73. package/components/menu/demo/api.min.js +278 -42
  74. package/components/menu/demo/index.min.js +278 -42
  75. package/components/menu/dist/auro-menu.d.ts +28 -5
  76. package/components/menu/dist/auro-menuoption.d.ts +15 -3
  77. package/components/menu/dist/iconVersion.d.ts +1 -1
  78. package/components/menu/dist/index.js +278 -42
  79. package/components/menu/dist/registered.js +278 -42
  80. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  81. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  82. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  83. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  84. package/components/radio/demo/api.md +7 -7
  85. package/components/radio/demo/api.min.js +16 -13
  86. package/components/radio/demo/index.min.js +16 -13
  87. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  88. package/components/radio/dist/auro-radio.d.ts +1 -1
  89. package/components/radio/dist/index.js +16 -13
  90. package/components/radio/dist/registered.js +16 -13
  91. package/components/select/demo/api.js +2 -0
  92. package/components/select/demo/api.md +124 -13
  93. package/components/select/demo/api.min.js +2802 -538
  94. package/components/select/demo/index.html +1 -0
  95. package/components/select/demo/index.md +325 -763
  96. package/components/select/demo/index.min.js +2795 -543
  97. package/components/select/dist/auro-select.d.ts +112 -11
  98. package/components/select/dist/helptextVersion.d.ts +2 -0
  99. package/components/select/dist/index.js +2538 -427
  100. package/components/select/dist/registered.js +2538 -427
  101. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  102. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  103. package/package.json +6 -4
  104. /package/components/{dropdown/dist/styles/default/bibColors-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  105. /package/components/{dropdown → datepicker}/dist/styles/default/color-css.d.ts +0 -0
  106. /package/components/{dropdown/dist/styles/default/bibStyles-css.d.ts → datepicker/dist/styles/shapeSize-css.d.ts} +0 -0
  107. /package/components/{dropdown/dist/styles/default/style-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  108. /package/components/{dropdown/dist/styles → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
  109. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/classic/bibColors-css.d.ts} +0 -0
  110. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  111. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
  112. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
  113. /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>