@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.6 → 0.0.0-pr624.60

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 +1214 -83
  5. package/components/bibtemplate/dist/registered.js +1214 -83
  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 +49 -37
  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 +49 -37
  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 +49 -37
  18. package/components/checkbox/dist/registered.js +49 -37
  19. package/components/combobox/demo/api.html +16 -10
  20. package/components/combobox/demo/api.md +112 -8
  21. package/components/combobox/demo/api.min.js +2941 -851
  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 +2941 -851
  25. package/components/combobox/demo/readme.html +16 -9
  26. package/components/combobox/dist/auro-combobox.d.ts +37 -8
  27. package/components/combobox/dist/index.js +2730 -736
  28. package/components/combobox/dist/registered.js +2730 -736
  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 +6696 -4097
  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 +6696 -4097
  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 +6696 -4097
  42. package/components/counter/dist/registered.js +6696 -4097
  43. package/components/datepicker/demo/api.html +16 -10
  44. package/components/datepicker/demo/api.md +24 -16
  45. package/components/datepicker/demo/api.min.js +11749 -8230
  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 +11749 -8230
  49. package/components/datepicker/demo/readme.html +16 -9
  50. package/components/datepicker/dist/auro-datepicker.d.ts +84 -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 +6531 -3012
  54. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  55. package/components/datepicker/dist/registered.js +6531 -3012
  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 +226 -129
  81. package/components/input/demo/api.min.js +828 -234
  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 +828 -234
  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 +33 -9
  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 +828 -234
  92. package/components/input/dist/registered.js +828 -234
  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 +72 -85
  110. package/components/radio/demo/index.html +16 -10
  111. package/components/radio/demo/index.min.js +72 -85
  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 +72 -85
  116. package/components/radio/dist/registered.js +72 -85
  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 +2107 -639
  121. package/components/select/demo/index.html +16 -11
  122. package/components/select/demo/index.md +45 -158
  123. package/components/select/demo/index.min.js +2104 -624
  124. package/components/select/demo/readme.html +16 -9
  125. package/components/select/dist/auro-select.d.ts +57 -16
  126. package/components/select/dist/index.js +2028 -644
  127. package/components/select/dist/registered.js +2028 -644
  128. package/package.json +29 -26
  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/datepicker/demo/api.html CHANGED
@@ -16,18 +16,24 @@
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-datepicker 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-datepicker</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-datepicker'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">
32
38
  <main></main>
33
39
 
package/components/datepicker/demo/api.md CHANGED
@@ -16,6 +16,8 @@
16
16
  | [error](#error) | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
17
17
  | [format](#format) | `format` | | `string` | "mm/dd/yyyy" | Specifies the date format. The default is `mm/dd/yyyy`. |
18
18
  | [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | | `string` | "sm" | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
19
+ | [hasError](#hasError) | | readonly | `boolean` | | |
20
+ | [hasFocus](#hasFocus) | `hasFocus` | | `boolean` | | |
19
21
  | [inputmode](#inputmode) | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
20
22
  | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | | `boolean` | false | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
21
23
  | [layout](#layout) | | | `string` | "classic" | |
@@ -26,6 +28,8 @@
26
28
  | [noValidate](#noValidate) | `noValidate` | | `boolean` | false | If set, disables auto-validation on blur. |
27
29
  | [offset](#offset) | `offset` | | `number` | "0" | Gap between the trigger element and bib. |
28
30
  | [onDark](#onDark) | `onDark` | | `boolean` | false | If declared, onDark styles will be applied to the trigger. |
31
+ | [placeholder](#placeholder) | `placeholder` | | `string` | | Placeholder text to display in the input(s) when no value is set. |
32
+ | [placeholderEndDate](#placeholderEndDate) | `placeholderEndDate` | | `string` | | Optional placeholder text to display in the second input when using date range.<br />By default, datepicker will use `placeholder` for both inputs if placeholder is<br />specified, but placeholderendDate is not. |
29
33
  | [placement](#placement) | `placement` | | `string` | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
30
34
  | [range](#range) | `range` | | `boolean` | false | If set, turns on date range functionality in auro-calendar. |
31
35
  | [required](#required) | `required` | | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
@@ -47,11 +51,16 @@
47
51
  | Method | Type | Description |
48
52
  |-------------------------------|----------------------------------------|--------------------------------------------------|
49
53
  | [focus](#focus) | `(focusInput: string): void` | Focuses the datepicker trigger input.<br /><br />**focusInput**: Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input. |
50
- | [renderLayoutFromAttributes](#renderLayoutFromAttributes) | `(): TemplateResult<ResultType>` | |
51
- | [renderTempInputs](#renderTempInputs) | `(): TemplateResult` | |
54
+ | [renderHtmlActionClear](#renderHtmlActionClear) | `(): TemplateResult` | |
55
+ | [renderHtmlIconCalendar](#renderHtmlIconCalendar) | `(): TemplateResult` | |
56
+ | [renderHtmlIconError](#renderHtmlIconError) | `(): TemplateResult` | |
57
+ | [renderHtmlInputs](#renderHtmlInputs) | `(): TemplateResult` | |
52
58
  | [reset](#reset) | `(): void` | Resets component to initial state. |
53
59
  | [resetLayoutClasses](#resetLayoutClasses) | `(): void` | |
54
60
  | [resetShapeClasses](#resetShapeClasses) | `(): void` | |
61
+ | [resetValues](#resetValues) | `(): void` | Resets values without resetting validation. |
62
+ | [setHasFocus](#setHasFocus) | `(): void` | |
63
+ | [setHasValue](#setHasValue) | `(): void` | |
55
64
  | [updateComponentArchitecture](#updateComponentArchitecture) | `(): void` | |
56
65
  | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
57
66
 
@@ -1462,26 +1471,25 @@ The component may be restyled using the following code sample and changing the v
1462
1471
  ```scss
1463
1472
  /* stylelint-disable color-function-notation */
1464
1473
 
1465
- @import "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
1466
- @import "@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariables";
1474
+ @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
1467
1475
 
1468
1476
  :host {
1469
- --ds-auro-datepicker-placeholder-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
1470
- --ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-border-bold, #{$ds-basic-color-border-bold});
1471
- --ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #{$ds-basic-color-surface-default});
1472
- --ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, #{$ds-basic-color-border-divider});
1473
- --ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #{$ds-basic-color-texticon-muted});
1477
+ --ds-auro-datepicker-placeholder-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1478
+ --ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
1479
+ --ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
1480
+ --ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
1481
+ --ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
1474
1482
  --ds-auro-calendar-nav-btn-border-color: transparent;
1475
- --ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #{$ds-basic-color-brand-primary});
1483
+ --ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #{v.$ds-basic-color-brand-primary});
1476
1484
  --ds-auro-calendar-nav-btn-container-color: transparent;
1477
- --ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #{$ds-basic-color-surface-default});
1478
- --ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, #{$ds-basic-color-border-divider});
1479
- --ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
1485
+ --ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
1486
+ --ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
1487
+ --ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1480
1488
  --ds-auro-calendar-cell-border-color: transparent;
1481
1489
  --ds-auro-calendar-cell-container-color: transparent;
1482
- --ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #{$ds-advanced-color-shared-background-muted});
1483
- --ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
1484
- --ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #{$ds-basic-color-texticon-default});
1490
+ --ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #{v.$ds-advanced-color-shared-background-muted});
1491
+ --ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1492
+ --ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1485
1493
  }
1486
1494
  ```
1487
1495
  <!-- AURO-GENERATED-CONTENT:END -->