@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/combobox/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-combobox 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-combobox</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-combobox'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/combobox/demo/api.md CHANGED
@@ -12,6 +12,7 @@
12
12
  | [checkmark](#checkmark) | `checkmark` | `boolean` | | When attribute is present auro-menu will apply checkmarks to selected options. |
13
13
  | [disabled](#disabled) | `disabled` | `boolean` | | If set, disables the combobox. |
14
14
  | [error](#error) | `error` | `string` | | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
15
+ | [format](#format) | `format` | `string` | | Specifies the input mask format. |
15
16
  | [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. |
16
17
  | [inputmode](#inputmode) | `inputmode` | `string` | | Exposes inputmode attribute for input. |
17
18
  | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` | | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
@@ -38,9 +39,12 @@
38
39
 
39
40
  | Method | Type | Description |
40
41
  |------------|----------------------------------------|--------------------------------------------------|
42
+ | [clear](#clear) | `(): void` | Clears the current value of the combobox. |
41
43
  | [focus](#focus) | `(): void` | Focuses the combobox trigger input. |
42
- | [isValid](#isValid) | `(): boolean` | |
44
+ | [hideBib](#hideBib) | `(): void` | Hides the dropdown bib if its open. |
45
+ | [isValid](#isValid) | `(): boolean` | Checks if the element is valid. |
43
46
  | [reset](#reset) | `(): void` | Resets component to initial state. |
47
+ | [showBib](#showBib) | `(): void` | Shows the dropdown bib if there are options to show. |
44
48
  | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
45
49
 
46
50
  ## Events
@@ -56,8 +60,10 @@
56
60
  |---------------------------|--------------------------------------------------|
57
61
  | | Default slot for the menu content. |
58
62
  | `bib.fullscreen.headline` | Defines the headline to display above menu-options |
63
+ | [displayValue](#displayValue) | Allows custom HTML content to display the selected value when the combobox is not focused. Only works with `snowflake` and `emphasized` layouts. |
59
64
  | [helpText](#helpText) | Defines the content of the helpText. |
60
- | [label](#label) | Defines the content of the label. |
65
+ | [label](#label) | Defines the content of the label. |
66
+ | [optionalLabel](#optionalLabel) | Allows overriding the optional display text "(optional)", which appears next to the label. |
61
67
  <!-- AURO-GENERATED-CONTENT:END -->
62
68
 
63
69
  ## API Examples
@@ -577,6 +583,50 @@ Populates the `required` attribute on the input. Used for client-side validation
577
583
  <!-- AURO-GENERATED-CONTENT:END -->
578
584
  </auro-accordion>
579
585
 
586
+ ### Custom optional label <a name="optionalLabel"></a>
587
+ The `<auro-combobox>` supports an `optionalLabel` slot, where users can can override the default `(optional)` notification text.
588
+
589
+ <div class="exampleWrapper">
590
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/optionalLabel.html) -->
591
+ <!-- The below content is automatically added from ./../apiExamples/optionalLabel.html -->
592
+ <auro-combobox>
593
+ <span slot="bib.fullscreen.headline">Bib Header</span>
594
+ <span slot="label">Name</span>
595
+ <span slot="optionalLabel" style="font-size: small; color: grey"> - optional</span>
596
+ <auro-menu>
597
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
598
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
599
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
600
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
601
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
602
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
603
+ </auro-menu>
604
+ </auro-combobox>
605
+ <!-- AURO-GENERATED-CONTENT:END -->
606
+ </div>
607
+ <auro-accordion alignRight>
608
+ <span slot="trigger">See code</span>
609
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/optionalLabel.html) -->
610
+ <!-- The below code snippet is automatically added from ./../apiExamples/optionalLabel.html -->
611
+
612
+ ```html
613
+ <auro-combobox>
614
+ <span slot="bib.fullscreen.headline">Bib Header</span>
615
+ <span slot="label">Name</span>
616
+ <span slot="optionalLabel" style="font-size: small; color: grey"> - optional</span>
617
+ <auro-menu>
618
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
619
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
620
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
621
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
622
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
623
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
624
+ </auro-menu>
625
+ </auro-combobox>
626
+ ```
627
+ <!-- AURO-GENERATED-CONTENT:END -->
628
+ </auro-accordion>
629
+
580
630
  #### value
581
631
 
582
632
  Use the `value` attribute to programmatically set the value of the combobox.
@@ -1007,7 +1057,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
1007
1057
  <div style="width: 350px">
1008
1058
  <auro-combobox offset="20" noFlip placement="bottom-end">
1009
1059
  <span slot="bib.fullscreen.headline">Bib Header</span>
1010
- <span slot="label">bottom-end bib with 20px offset and noFlip</span>
1060
+ <span slot="label">Label</span>
1061
+ <span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
1011
1062
  <auro-menu>
1012
1063
  <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
1013
1064
  <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
@@ -1019,7 +1070,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
1019
1070
  </auro-combobox>
1020
1071
  <auro-combobox offset="20" placement="bottom-end">
1021
1072
  <span slot="bib.fullscreen.headline">Bib Header</span>
1022
- <span slot="label">bottom-end bib with 20px offset and flip</span>
1073
+ <span slot="label">Label</span>
1074
+ <span slot="helpText">bottom-end bib with 20px offset and flip</span>
1023
1075
  <auro-menu>
1024
1076
  <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
1025
1077
  <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
@@ -1031,7 +1083,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
1031
1083
  </auro-combobox>
1032
1084
  <auro-combobox offset="20" noFlip placement="right" autoPlacement>
1033
1085
  <span slot="bib.fullscreen.headline">Bib Header</span>
1034
- <span slot="label">right bib with 20px offset, noFlip and autoPlacement</span>
1086
+ <span slot="label">Label</span>
1087
+ <span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
1035
1088
  <auro-menu>
1036
1089
  <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
1037
1090
  <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
@@ -1053,7 +1106,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
1053
1106
  <div style="width: 350px">
1054
1107
  <auro-combobox offset="20" noFlip placement="bottom-end">
1055
1108
  <span slot="bib.fullscreen.headline">Bib Header</span>
1056
- <span slot="label">bottom-end bib with 20px offset and noFlip</span>
1109
+ <span slot="label">Label</span>
1110
+ <span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
1057
1111
  <auro-menu>
1058
1112
  <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
1059
1113
  <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
@@ -1065,7 +1119,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
1065
1119
  </auro-combobox>
1066
1120
  <auro-combobox offset="20" placement="bottom-end">
1067
1121
  <span slot="bib.fullscreen.headline">Bib Header</span>
1068
- <span slot="label">bottom-end bib with 20px offset and flip</span>
1122
+ <span slot="label">Label</span>
1123
+ <span slot="helpText">bottom-end bib with 20px offset and flip</span>
1069
1124
  <auro-menu>
1070
1125
  <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
1071
1126
  <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
@@ -1077,7 +1132,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
1077
1132
  </auro-combobox>
1078
1133
  <auro-combobox offset="20" noFlip placement="right" autoPlacement>
1079
1134
  <span slot="bib.fullscreen.headline">Bib Header</span>
1080
- <span slot="label">right bib with 20px offset, noFlip and autoPlacement</span>
1135
+ <span slot="label">Label</span>
1136
+ <span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
1081
1137
  <auro-menu>
1082
1138
  <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
1083
1139
  <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
@@ -1210,4 +1266,55 @@ export function inDialogExample() {
1210
1266
  };
1211
1267
  ```
1212
1268
  <!-- AURO-GENERATED-CONTENT:END -->
1269
+ </auro-accordion>
1270
+
1271
+ #### Custom display value
1272
+
1273
+ You can fully customize how selected values appear by using the `displayValue` slot. This slot allows you to pass in any HTML content. Only the `snowflake` and `emphasized` layouts are supported.
1274
+
1275
+ <div class="exampleWrapper--ondark">
1276
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/displayValueSlot.html) -->
1277
+ <!-- The below content is automatically added from ./../apiExamples/displayValueSlot.html -->
1278
+ <auro-combobox layout="snowflake" shape="snowflake" size="xl" ondark value="Apples">
1279
+ <span slot="bib.fullscreen.headline">Bib Header</span>
1280
+ <span slot="label">Name</span>
1281
+ <auro-menu>
1282
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
1283
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
1284
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
1285
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
1286
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
1287
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
1288
+ </auro-menu>
1289
+ <div slot="displayValue">
1290
+ <div class="mainText">Custom display value</div>
1291
+ <div class="subText">Any html can be used</div>
1292
+ </div>
1293
+ </auro-combobox>
1294
+ <!-- AURO-GENERATED-CONTENT:END -->
1295
+ </div>
1296
+ <auro-accordion alignRight>
1297
+ <span slot="trigger">See code</span>
1298
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/displayValueSlot.html) -->
1299
+ <!-- The below code snippet is automatically added from ./../apiExamples/displayValueSlot.html -->
1300
+
1301
+ ```html
1302
+ <auro-combobox layout="snowflake" shape="snowflake" size="xl" ondark value="Apples">
1303
+ <span slot="bib.fullscreen.headline">Bib Header</span>
1304
+ <span slot="label">Name</span>
1305
+ <auro-menu>
1306
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
1307
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
1308
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
1309
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
1310
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
1311
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
1312
+ </auro-menu>
1313
+ <div slot="displayValue">
1314
+ <div class="mainText">Custom display value</div>
1315
+ <div class="subText">Any html can be used</div>
1316
+ </div>
1317
+ </auro-combobox>
1318
+ ```
1319
+ <!-- AURO-GENERATED-CONTENT:END -->
1213
1320
  </auro-accordion>