@skf-design-system/ui-components 1.0.0-beta.5 → 1.0.1-beta.0

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 (204) hide show
  1. package/dist/components/accordion/accordion-item.d.ts +1 -1
  2. package/dist/components/accordion/accordion.component.d.ts +4 -4
  3. package/dist/components/accordion/accordion.component.js +18 -17
  4. package/dist/components/accordion/accordion.styles.d.ts +1 -2
  5. package/dist/components/accordion/accordion.styles.js +5 -4
  6. package/dist/components/alert/alert.component.d.ts +5 -5
  7. package/dist/components/alert/alert.component.js +46 -35
  8. package/dist/components/alert/alert.styles.d.ts +1 -2
  9. package/dist/components/alert/alert.styles.js +29 -24
  10. package/dist/components/breadcrumb/breadcrumb.component.d.ts +29 -0
  11. package/dist/components/breadcrumb/breadcrumb.d.ts +8 -0
  12. package/dist/components/breadcrumb-item/breadcrumb-item.component.d.ts +25 -0
  13. package/dist/components/breadcrumb-item/breadcrumb-item.d.ts +8 -0
  14. package/dist/components/button/button.component.d.ts +29 -5
  15. package/dist/components/button/button.component.js +89 -52
  16. package/dist/components/button/button.styles.js +65 -45
  17. package/dist/components/card/card.component.d.ts +4 -4
  18. package/dist/components/card/card.component.js +35 -24
  19. package/dist/components/card/card.styles.d.ts +1 -2
  20. package/dist/components/card/card.styles.js +14 -12
  21. package/dist/components/checkbox/checkbox.component.d.ts +11 -12
  22. package/dist/components/checkbox/checkbox.component.js +96 -90
  23. package/dist/components/collapse/collapse.component.d.ts +8 -8
  24. package/dist/components/collapse/collapse.component.js +42 -34
  25. package/dist/components/collapse/collapse.styles.js +15 -14
  26. package/dist/components/dialog/dialog.component.d.ts +74 -0
  27. package/dist/components/dialog/dialog.component.js +187 -0
  28. package/dist/components/dialog/dialog.d.ts +8 -0
  29. package/dist/components/dialog/dialog.js +6 -0
  30. package/dist/components/dialog/dialog.styles.d.ts +1 -0
  31. package/dist/components/dialog/dialog.styles.js +91 -0
  32. package/dist/components/divider/divider.component.d.ts +3 -3
  33. package/dist/components/divider/divider.component.js +39 -27
  34. package/dist/components/divider/divider.styles.d.ts +1 -2
  35. package/dist/components/divider/divider.styles.js +26 -26
  36. package/dist/components/heading/heading.component.d.ts +2 -2
  37. package/dist/components/heading/heading.component.js +13 -13
  38. package/dist/components/icon/icon.component.d.ts +2 -5
  39. package/dist/components/icon/icon.component.js +32 -23
  40. package/dist/components/icon/icon.styles.js +53 -47
  41. package/dist/components/input/input.component.d.ts +12 -11
  42. package/dist/components/input/input.component.js +88 -89
  43. package/dist/components/link/link.component.d.ts +7 -6
  44. package/dist/components/link/link.component.js +49 -43
  45. package/dist/components/link/link.styles.js +36 -40
  46. package/dist/components/loader/loader.component.d.ts +2 -2
  47. package/dist/components/loader/loader.component.js +39 -32
  48. package/dist/components/loader/loader.styles.js +11 -10
  49. package/dist/components/logo/logo.component.d.ts +3 -3
  50. package/dist/components/logo/logo.component.js +28 -17
  51. package/dist/components/logo/logo.styles.d.ts +1 -2
  52. package/dist/components/logo/logo.styles.js +11 -9
  53. package/dist/components/menu/menu.component.d.ts +24 -0
  54. package/dist/components/menu/menu.component.js +18 -0
  55. package/dist/components/menu/menu.d.ts +8 -0
  56. package/dist/components/menu/menu.js +6 -0
  57. package/dist/components/menu/menu.styles.d.ts +1 -0
  58. package/dist/components/menu/menu.styles.js +11 -0
  59. package/dist/components/menu-item/menu-item.component.d.ts +25 -0
  60. package/dist/components/menu-item/menu-item.component.js +13 -0
  61. package/dist/components/menu-item/menu-item.d.ts +8 -0
  62. package/dist/components/menu-item/menu-item.js +6 -0
  63. package/dist/components/menu-item/menu-item.styles.d.ts +1 -0
  64. package/dist/components/menu-item/menu-item.styles.js +19 -0
  65. package/dist/components/popover/popover.component.d.ts +29 -0
  66. package/dist/components/popover/popover.component.js +37 -0
  67. package/dist/components/popover/popover.d.ts +8 -0
  68. package/dist/components/popover/popover.js +6 -0
  69. package/dist/components/popover/popover.styles.d.ts +1 -0
  70. package/dist/components/popover/popover.styles.js +12 -0
  71. package/dist/components/progress/progress.component.d.ts +22 -0
  72. package/dist/components/progress/progress.component.js +49 -0
  73. package/dist/components/progress/progress.d.ts +8 -0
  74. package/dist/components/progress/progress.js +6 -0
  75. package/dist/components/progress/progress.styles.d.ts +1 -0
  76. package/dist/components/progress/progress.styles.js +48 -0
  77. package/dist/components/radio/radio.component.d.ts +7 -9
  78. package/dist/components/radio/radio.component.js +95 -79
  79. package/dist/components/select/select.component.d.ts +10 -12
  80. package/dist/components/select/select.component.js +120 -120
  81. package/dist/components/select/select.controllers.d.ts +1 -26
  82. package/dist/components/select/select.controllers.js +35 -95
  83. package/dist/components/select-option/select-option.component.d.ts +1 -1
  84. package/dist/components/select-option/select-option.controllers.d.ts +1 -1
  85. package/dist/components/select-option-group/select-option-group.component.d.ts +1 -1
  86. package/dist/components/select-option-group/select-option-group.component.js +9 -9
  87. package/dist/components/stepper/stepper.component.d.ts +38 -0
  88. package/dist/components/stepper/stepper.component.js +91 -0
  89. package/dist/components/stepper/stepper.d.ts +8 -0
  90. package/dist/components/stepper/stepper.helpers.d.ts +16 -0
  91. package/dist/components/stepper/stepper.helpers.js +18 -0
  92. package/dist/components/stepper/stepper.js +6 -0
  93. package/dist/components/stepper/stepper.styles.d.ts +1 -0
  94. package/dist/components/stepper/stepper.styles.js +15 -0
  95. package/dist/components/stepper-item/stepper-item.component.d.ts +47 -0
  96. package/dist/components/stepper-item/stepper-item.component.js +113 -0
  97. package/dist/components/stepper-item/stepper-item.d.ts +8 -0
  98. package/dist/components/stepper-item/stepper-item.js +6 -0
  99. package/dist/components/stepper-item/stepper-item.styles.d.ts +1 -0
  100. package/dist/components/stepper-item/stepper-item.styles.js +98 -0
  101. package/dist/components/switch/switch.component.d.ts +2 -2
  102. package/dist/components/switch/switch.component.js +17 -7
  103. package/dist/components/switch/switch.styles.js +16 -13
  104. package/dist/components/tab/tab.component.d.ts +29 -0
  105. package/dist/components/tab/tab.component.js +57 -0
  106. package/dist/components/tab/tab.d.ts +8 -0
  107. package/dist/components/tab/tab.js +6 -0
  108. package/dist/components/tab/tab.styles.d.ts +1 -0
  109. package/dist/components/tab/tab.styles.js +123 -0
  110. package/dist/components/tab-group/tab-group.component.d.ts +43 -0
  111. package/dist/components/tab-group/tab-group.component.js +98 -0
  112. package/dist/components/tab-group/tab-group.d.ts +8 -0
  113. package/dist/components/tab-group/tab-group.js +6 -0
  114. package/dist/components/tab-group/tab-group.styles.d.ts +1 -0
  115. package/dist/components/tab-group/tab-group.styles.js +75 -0
  116. package/dist/components/tab-panel/tab-panel.component.d.ts +19 -0
  117. package/dist/components/tab-panel/tab-panel.component.js +36 -0
  118. package/dist/components/tab-panel/tab-panel.d.ts +8 -0
  119. package/dist/components/tab-panel/tab-panel.js +6 -0
  120. package/dist/components/tab-panel/tab-panel.styles.d.ts +1 -0
  121. package/dist/components/tab-panel/tab-panel.styles.js +13 -0
  122. package/dist/components/tag/tag.component.d.ts +2 -2
  123. package/dist/components/tag/tag.component.js +61 -45
  124. package/dist/components/tag/tag.styles.js +30 -28
  125. package/dist/components/textarea/textarea.component.d.ts +4 -4
  126. package/dist/components/textarea/textarea.component.js +2 -2
  127. package/dist/components/toast/toast.component.d.ts +8 -5
  128. package/dist/components/toast/toast.component.js +30 -26
  129. package/dist/components/toast/toast.singleton.d.ts +5 -10
  130. package/dist/components/toast/toast.singleton.js +25 -25
  131. package/dist/components/toast/toast.styles.d.ts +1 -0
  132. package/dist/components/toast-item/toast-item.component.d.ts +1 -1
  133. package/dist/components/toast-item/toast-item.component.js +15 -15
  134. package/dist/components/toast-item/toast-item.styles.js +18 -0
  135. package/dist/components/toast-wrapper/toast-wrapper.component.d.ts +2 -2
  136. package/dist/components/toast-wrapper/toast-wrapper.component.js +11 -11
  137. package/dist/components/toast-wrapper/toast-wrapper.styles.d.ts +1 -0
  138. package/dist/components/tooltip/tooltip.component.d.ts +24 -0
  139. package/dist/components/tooltip/tooltip.component.js +18 -0
  140. package/dist/components/tooltip/tooltip.d.ts +8 -0
  141. package/dist/components/tooltip/tooltip.js +6 -0
  142. package/dist/components/tooltip/tooltip.styles.d.ts +1 -0
  143. package/dist/components/tooltip/tooltip.styles.js +12 -0
  144. package/dist/custom-elements.json +2465 -629
  145. package/dist/index.d.ts +11 -0
  146. package/dist/index.js +77 -44
  147. package/dist/internal/base-classes/popover/popover.base.d.ts +29 -0
  148. package/dist/internal/base-classes/popover/popover.base.js +116 -0
  149. package/dist/internal/base-classes/popover/popover.styles.d.ts +1 -0
  150. package/dist/internal/base-classes/popover/popover.styles.js +29 -0
  151. package/dist/internal/components/formBase.d.ts +1 -0
  152. package/dist/internal/components/formBase.js +11 -11
  153. package/dist/internal/components/hint/hint.component.d.ts +2 -2
  154. package/dist/internal/components/hint/hint.component.js +13 -13
  155. package/dist/internal/components/skf-element.js +26 -25
  156. package/dist/internal/controllers/popover.controller.d.ts +16 -0
  157. package/dist/internal/controllers/popover.controller.js +44 -0
  158. package/dist/internal/helpers/hintSeverity.d.ts +2 -2
  159. package/dist/internal/helpers/watch.d.ts +27 -0
  160. package/dist/internal/helpers/watch.js +28 -0
  161. package/dist/internal/templates/asterisk.d.ts +1 -1
  162. package/dist/internal/templates/asterisk.js +7 -6
  163. package/dist/react/index.d.ts +13 -0
  164. package/dist/react/index.js +13 -0
  165. package/dist/react/skf-breadcrumb/index.d.ts +9 -0
  166. package/dist/react/skf-breadcrumb/index.js +17 -0
  167. package/dist/react/skf-breadcrumb-item/index.d.ts +3 -0
  168. package/dist/react/skf-breadcrumb-item/index.js +13 -0
  169. package/dist/react/skf-button/index.d.ts +7 -1
  170. package/dist/react/skf-button/index.js +5 -1
  171. package/dist/react/skf-dialog/index.d.ts +15 -0
  172. package/dist/react/skf-dialog/index.js +19 -0
  173. package/dist/react/skf-menu/index.d.ts +12 -0
  174. package/dist/react/skf-menu/index.js +18 -0
  175. package/dist/react/skf-menu-item/index.d.ts +27 -0
  176. package/dist/react/skf-menu-item/index.js +23 -0
  177. package/dist/react/skf-popover/index.d.ts +12 -0
  178. package/dist/react/skf-popover/index.js +18 -0
  179. package/dist/react/skf-progress/index.d.ts +3 -0
  180. package/dist/react/skf-progress/index.js +13 -0
  181. package/dist/react/skf-stepper/index.d.ts +9 -0
  182. package/dist/react/skf-stepper/index.js +17 -0
  183. package/dist/react/skf-stepper-item/index.d.ts +9 -0
  184. package/dist/react/skf-stepper-item/index.js +17 -0
  185. package/dist/react/skf-tab/index.d.ts +12 -0
  186. package/dist/react/skf-tab/index.js +18 -0
  187. package/dist/react/skf-tab-group/index.d.ts +3 -0
  188. package/dist/react/skf-tab-group/index.js +13 -0
  189. package/dist/react/skf-tab-panel/index.d.ts +3 -0
  190. package/dist/react/skf-tab-panel/index.js +13 -0
  191. package/dist/react/skf-tooltip/index.d.ts +12 -0
  192. package/dist/react/skf-tooltip/index.js +18 -0
  193. package/dist/styles/component.styles.js +15 -2
  194. package/dist/types/jsx/custom-element-jsx.d.ts +603 -27
  195. package/dist/types/vue/index.d.ts +413 -11
  196. package/dist/vscode.html-custom-data.json +462 -36
  197. package/dist/web-types.json +944 -90
  198. package/package.json +43 -42
  199. package/dist/components/toast-item/toast-item.style.js +0 -16
  200. /package/dist/components/{toast/toast.style.d.ts → breadcrumb/breadcrumb.styles.d.ts} +0 -0
  201. /package/dist/components/{toast-wrapper/toast-wrapper.style.d.ts → breadcrumb-item/breadcrumb-item.styles.d.ts} +0 -0
  202. /package/dist/components/toast/{toast.style.js → toast.styles.js} +0 -0
  203. /package/dist/components/toast-item/{toast-item.style.d.ts → toast-item.styles.d.ts} +0 -0
  204. /package/dist/components/toast-wrapper/{toast-wrapper.style.js → toast-wrapper.styles.js} +0 -0
@@ -2,10 +2,13 @@ import type { DefineComponent } from "vue";
2
2
 
3
3
  import type { SkfAccordion } from "../../components/accordion/accordion.component.js";
4
4
  import type { SkfAlert } from "../../components/alert/alert.component.js";
5
+ import type { SkfBreadcrumb } from "../../components/breadcrumb/breadcrumb.component.js";
6
+ import type { SkfBreadcrumbItem } from "../../components/breadcrumb-item/breadcrumb-item.component.js";
5
7
  import type { SkfButton } from "../../components/button/button.component.js";
6
8
  import type { SkfCard } from "../../components/card/card.component.js";
7
9
  import type { SkfCheckbox } from "../../components/checkbox/checkbox.component.js";
8
10
  import type { SkfCollapse, CustomEvent } from "../../components/collapse/collapse.component.js";
11
+ import type { SkfDialog } from "../../components/dialog/dialog.component.js";
9
12
  import type { SkfDivider } from "../../components/divider/divider.component.js";
10
13
  import type { SkfHeading } from "../../components/heading/heading.component.js";
11
14
  import type { SkfIcon } from "../../components/icon/icon.component.js";
@@ -13,15 +16,25 @@ import type { SkfInput } from "../../components/input/input.component.js";
13
16
  import type { SkfLink } from "../../components/link/link.component.js";
14
17
  import type { SkfLoader } from "../../components/loader/loader.component.js";
15
18
  import type { SkfLogo } from "../../components/logo/logo.component.js";
19
+ import type { SkfMenu } from "../../components/menu/menu.component.js";
20
+ import type { SkfMenuItem, CustomEvent } from "../../components/menu-item/menu-item.component.js";
21
+ import type { SkfPopover } from "../../components/popover/popover.component.js";
22
+ import type { SkfProgress } from "../../components/progress/progress.component.js";
16
23
  import type { SkfRadio } from "../../components/radio/radio.component.js";
17
24
  import type { SkfSelect } from "../../components/select/select.component.js";
18
25
  import type { SkfSelectOption } from "../../components/select-option/select-option.component.js";
19
26
  import type { SkfSelectOptionGroup } from "../../components/select-option-group/select-option-group.component.js";
27
+ import type { SkfStepper } from "../../components/stepper/stepper.component.js";
28
+ import type { SkfStepperItem } from "../../components/stepper-item/stepper-item.component.js";
20
29
  import type { SkfSwitch } from "../../components/switch/switch.component.js";
30
+ import type { SkfTab, CustomEvent } from "../../components/tab/tab.component.js";
31
+ import type { SkfTabGroup } from "../../components/tab-group/tab-group.component.js";
32
+ import type { SkfTabPanel } from "../../components/tab-panel/tab-panel.component.js";
21
33
  import type { SkfTag } from "../../components/tag/tag.component.js";
22
34
  import type { SkfTextArea } from "../../components/textarea/textarea.component.js";
23
35
  import type { SkfToast } from "../../components/toast/toast.component.js";
24
36
  import type { SkfToastWrapper } from "../../components/toast-wrapper/toast-wrapper.component.js";
37
+ import type { SkfTooltip } from "../../components/tooltip/tooltip.component.js";
25
38
 
26
39
  type SkfAccordionProps = {
27
40
  /** If true, will animate the expand/collapse state */
@@ -39,12 +52,12 @@ type SkfAccordionProps = {
39
52
  };
40
53
 
41
54
  type SkfAlertProps = {
42
- /** If true, alert is being used as a toast (alertdialog) with an close button */
43
- closeable?: SkfAlert["closeable"];
44
55
  /** Close button aria-label */
45
56
  "button-label"?: SkfAlert["buttonLabel"];
46
57
  /** If defined, displays leading icon */
47
58
  icon?: SkfAlert["icon"];
59
+ /** If true, renders with an close button and sets aria-role to `status` */
60
+ persistent?: SkfAlert["persistent"];
48
61
  /** If defined, gives the supplied appearance */
49
62
  severity?: SkfAlert["severity"];
50
63
 
@@ -52,6 +65,23 @@ type SkfAlertProps = {
52
65
  "onskf-alert-close"?: (e: CustomEvent<never>) => void;
53
66
  };
54
67
 
68
+ type SkfBreadcrumbProps = {
69
+ /** aria-label for the breadcrumb control */
70
+ label?: SkfBreadcrumb["label"];
71
+ /** Displays an alternative size */
72
+ size?: SkfBreadcrumb["size"];
73
+
74
+ /** Fired when the item is clicked */
75
+ onclick?: (e: CustomEvent<never>) => void;
76
+ };
77
+
78
+ type SkfBreadcrumbItemProps = {
79
+ /** If defined, loads url on click */
80
+ href?: SkfBreadcrumbItem["href"];
81
+ /** If defined, custom onClick where the second return parameter enables custom routing. **Notice!** Only applicable if `href` is defined. */
82
+ onClick?: SkfBreadcrumbItem["onClick"];
83
+ };
84
+
55
85
  type SkfButtonProps = {
56
86
  /** If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`. */
57
87
  destructive?: SkfButton["destructive"];
@@ -59,16 +89,23 @@ type SkfButtonProps = {
59
89
  disabled?: SkfButton["disabled"];
60
90
  /** If provided, renders an icon before or after the text */
61
91
  icon?: SkfButton["icon"];
92
+ /** If true, removes border */
93
+ iconOnly?: SkfButton["iconOnly"];
62
94
  /** If provided, determines the positioning of the icon in relation to the text */
63
95
  "icon-position"?: SkfButton["iconPosition"];
64
96
  /** If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`. */
65
97
  loading?: SkfButton["loading"];
98
+ /** */
99
+ "no-validate"?: SkfButton["noValidate"];
66
100
  /** If provided, displays an alternative size */
67
101
  size?: SkfButton["size"];
68
102
  /** If provided, changes the button type */
69
103
  type?: SkfButton["type"];
70
104
  /** If provided, alters the appearance */
71
105
  variant?: SkfButton["variant"];
106
+
107
+ /** Fires when the button is clicked */
108
+ onclick?: (e: CustomEvent<never>) => void;
72
109
  };
73
110
 
74
111
  type SkfCardProps = {
@@ -91,8 +128,6 @@ type SkfCheckboxProps = {
91
128
  checked?: SkfCheckbox["checked"];
92
129
  /** If true, forces component to invalid state until removed */
93
130
  "custom-invalid"?: SkfCheckbox["customInvalid"];
94
- /** If true, hides the label visually */
95
- "hide-label"?: SkfCheckbox["hideLabel"];
96
131
  /** If true and the checkbox is unchecked, the checkbox will appear indeterminate */
97
132
  indeterminate?: SkfCheckbox["indeterminate"];
98
133
  /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
@@ -132,6 +167,33 @@ type SkfCollapseProps = {
132
167
  "onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => void;
133
168
  };
134
169
 
170
+ type SkfDialogProps = {
171
+ /** If defined, sets the aria-label for the close button */
172
+ "close-button-aria-label"?: SkfDialog["closeButtonAriaLabel"];
173
+ /** Title for the modal/dialog */
174
+ heading?: SkfDialog["heading"];
175
+ /** If true, makes the dialog stretch edge to edge on screen */
176
+ fullscreen?: SkfDialog["fullscreen"];
177
+ /** If true, removes the close button */
178
+ "no-close-button"?: SkfDialog["noCloseButton"];
179
+ /** If defined, removes the inner padding */
180
+ "no-padding"?: SkfDialog["noPadding"];
181
+ /** */
182
+ open?: SkfDialog["open"];
183
+ /** If provided, will run function on dialog close */
184
+ onClose?: SkfDialog["onClose"];
185
+ /** Method that opens the dialog in modal state */
186
+ showModal?: SkfDialog["showModal"];
187
+ /** Method that closes the dialog */
188
+ close?: SkfDialog["close"];
189
+ /** Fires when the dialog is opened (after transitioned in) */
190
+ "onskf-dialog-open"?: (e: CustomEvent<never>) => void;
191
+ /** Fires when the dialog is closed (before transitioned out) */
192
+ "onskf-dialog-close"?: (e: CustomEvent<never>) => void;
193
+ /** Fires when the dialog is closed (after transitioned out) */
194
+ onclose?: (e: CustomEvent<never>) => void;
195
+ };
196
+
135
197
  type SkfDividerProps = {
136
198
  /** Defines the Divider color */
137
199
  color?: SkfDivider["color"];
@@ -164,6 +226,8 @@ type SkfInputProps = {
164
226
  disabled?: SkfInput["undefined"];
165
227
  /** If true, value is required or must be checked for the form to be submittable */
166
228
  required?: SkfInput["undefined"];
229
+ /** -m } */
230
+ autocomplete?: SkfInput["autocomplete"];
167
231
  /** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */
168
232
  "button-aria-label-clear"?: SkfInput["buttonAriaLabelClear"];
169
233
  /** Custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
@@ -238,7 +302,7 @@ type SkfLinkProps = {
238
302
  icon?: SkfLink["icon"];
239
303
  /** Defines the position of the icon in relation to the text */
240
304
  "icon-placement"?: SkfLink["iconPlacement"];
241
- /** Defines the relationship of the target object to the link object */
305
+ /** If defined, describes the relationship between a linked resource and the current document */
242
306
  rel?: SkfLink["rel"];
243
307
  /** If defined, used on conjunction with onClick property, second argument */
244
308
  route?: SkfLink["route"];
@@ -268,10 +332,94 @@ type SkfLoaderProps = {
268
332
  type SkfLogoProps = {
269
333
  /** Defines the title of the logo */
270
334
  title?: SkfLogo["title"];
271
- /** If defined, sets color of the logo */
335
+ /** Defines the color of the logo */
272
336
  color?: SkfLogo["color"];
273
337
  };
274
338
 
339
+ type SkfMenuProps = {
340
+ /** The placement of the menu */
341
+ placement?: SkfMenu["placement"];
342
+ /** Whether the menu is open */
343
+ isOpen?: SkfMenu["isOpen"];
344
+ /** The id of the element the menu will be anchored to */
345
+ anchor?: SkfMenu["anchor"];
346
+ /** Fired when the menu is opened */
347
+ onopen?: (e: CustomEvent<never>) => void;
348
+ /** Fired when the menu is closed */
349
+ onclose?: (e: CustomEvent<never>) => void;
350
+ };
351
+
352
+ type SkfMenuItemProps = {
353
+ /** Defines the semantic element to render */
354
+ as?: SkfMenuItem["as"];
355
+ /** Defines the text-color */
356
+ color?: SkfMenuItem["color"];
357
+ /** If true, disables the link */
358
+ disabled?: SkfMenuItem["disabled"];
359
+ /** If defined, downloads the url */
360
+ download?: SkfMenuItem["download"];
361
+ /** If defined, loads url on click */
362
+ href?: SkfMenuItem["href"];
363
+ /** If defined, renders an icon before or after the text */
364
+ icon?: SkfMenuItem["icon"];
365
+ /** Defines the position of the icon in relation to the text */
366
+ "icon-placement"?: SkfMenuItem["iconPlacement"];
367
+ /** If defined, describes the relationship between a linked resource and the current document */
368
+ rel?: SkfMenuItem["rel"];
369
+ /** If defined, used on conjunction with onClick property, second argument */
370
+ route?: SkfMenuItem["route"];
371
+ /** If true, fills the parents horizontal axis */
372
+ stretch?: SkfMenuItem["stretch"];
373
+ /** If defined, specifies where to open the linked document */
374
+ target?: SkfMenuItem["target"];
375
+ /** Defines the type of button */
376
+ type?: SkfMenuItem["type"];
377
+ /** If provided, custom function triggered by click where the second return parameter enables custom routing. */
378
+ onClick?: SkfMenuItem["onClick"];
379
+ /** Fired when something happens */
380
+ "onmy-tag-my-event"?: (e: CustomEvent<CustomEvent>) => void;
381
+ /** Fired when the component is clicked */
382
+ onclick?: (e: CustomEvent<never>) => void;
383
+ /** Fired when the mouse is over the component */
384
+ onmouseover?: (e: CustomEvent<never>) => void;
385
+ /** Fired when the mouse is out of the component */
386
+ onmouseout?: (e: CustomEvent<never>) => void;
387
+ /** Fired when the component is focused */
388
+ onfocus?: (e: CustomEvent<never>) => void;
389
+ /** Fired when the component is blurred */
390
+ onblur?: (e: CustomEvent<never>) => void;
391
+ /** Fired when the component's value changes */
392
+ onchange?: (e: CustomEvent<never>) => void;
393
+ };
394
+
395
+ type SkfPopoverProps = {
396
+ /** If defined, sets a custom offset for the popover */
397
+ offset?: SkfPopover["offset"];
398
+ /** If true, hides the arrow */
399
+ hideArrow?: SkfPopover["hideArrow"];
400
+ /** */
401
+ arrow?: SkfPopover["arrow"];
402
+ /** The placement of the menu */
403
+ placement?: SkfPopover["placement"];
404
+ /** Whether the menu is open */
405
+ isOpen?: SkfPopover["isOpen"];
406
+ /** The id of the element the menu will be anchored to */
407
+ anchor?: SkfPopover["anchor"];
408
+ /** Fired when the menu is opened */
409
+ onopen?: (e: CustomEvent<never>) => void;
410
+ /** Fired when the menu is closed */
411
+ onclose?: (e: CustomEvent<never>) => void;
412
+ };
413
+
414
+ type SkfProgressProps = {
415
+ /** If true, the progress-bar's fill value is animated */
416
+ animated?: SkfProgress["animated"];
417
+ /** Describes how much work the task indicated by the progress element requires */
418
+ max?: SkfProgress["max"];
419
+ /** Specifies how much of the task that has been completed */
420
+ value?: SkfProgress["value"];
421
+ };
422
+
275
423
  type SkfRadioProps = {
276
424
  /** If true, sets disabled state */
277
425
  disabled?: SkfRadio["undefined"];
@@ -283,8 +431,6 @@ type SkfRadioProps = {
283
431
  checked?: SkfRadio["checked"];
284
432
  /** If true, forces component to invalid state until removed */
285
433
  "custom-invalid"?: SkfRadio["customInvalid"];
286
- /** If true, hides the label visually */
287
- "hide-label"?: SkfRadio["hideLabel"];
288
434
  /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
289
435
  label?: SkfRadio["label"];
290
436
  /** If defined, adds name to the input-element */
@@ -385,6 +531,29 @@ type SkfSelectOptionGroupProps = {
385
531
  label?: SkfSelectOptionGroup["label"];
386
532
  };
387
533
 
534
+ type SkfStepperProps = {
535
+ /** Sets the active item */
536
+ activeIndex?: SkfStepper["activeIndex"];
537
+ /** If true, sets linear mode (user can't go back to completed steps due to dependencies) */
538
+ linear?: SkfStepper["linear"];
539
+
540
+ /** Dispatched when the stepper item is selected */
541
+ "onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
542
+ };
543
+
544
+ type SkfStepperItemProps = {
545
+ /** If defined, gives the supplied appearance */
546
+ state?: SkfStepperItem["state"];
547
+ /** If true, item marked as completed */
548
+ completed?: SkfStepperItem["completed"];
549
+ /** */
550
+ _setInternalState?: SkfStepperItem["_setInternalState"];
551
+ /** */
552
+ role?: SkfStepperItem["role"];
553
+ /** Dispatched when the stepper item is selected */
554
+ "onskf-stepper-item-select"?: (e: CustomEvent<never>) => void;
555
+ };
556
+
388
557
  type SkfSwitchProps = {
389
558
  /** If true, sets disabled state */
390
559
  disabled?: SkfSwitch["undefined"];
@@ -408,6 +577,43 @@ type SkfSwitchProps = {
408
577
  value?: SkfSwitch["value"];
409
578
  };
410
579
 
580
+ type SkfTabProps = {
581
+ /** The name of the tab-panel this tab is associated with. The panel must be located in the same tab group. */
582
+ panel?: SkfTab["panel"];
583
+ /** */
584
+ selected?: SkfTab["selected"];
585
+ /** */
586
+ variant?: SkfTab["variant"];
587
+ /** */
588
+ role?: SkfTab["role"];
589
+ /** {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected */
590
+ "onskf-tab-select"?: (e: CustomEvent<CustomEvent>) => void;
591
+ /** Fired when the component is clicked */
592
+ onclick?: (e: CustomEvent<never>) => void;
593
+ };
594
+
595
+ type SkfTabGroupProps = {
596
+ /** Sets the default selected tab */
597
+ "default-selected"?: SkfTabGroup["defaultSelected"];
598
+ /** If true, removes border */
599
+ "no-border"?: SkfTabGroup["noBorder"];
600
+ /** If true, removes padding */
601
+ "no-padding"?: SkfTabGroup["noPadding"];
602
+ /** If true, component fills the parent element height */
603
+ stretch?: SkfTabGroup["stretch"];
604
+ /** Sets the appearance of the tabs */
605
+ variant?: SkfTabGroup["variant"];
606
+ };
607
+
608
+ type SkfTabPanelProps = {
609
+ /** The tab panel's name. */
610
+ name?: SkfTabPanel["name"];
611
+ /** */
612
+ active?: SkfTabPanel["active"];
613
+ /** */
614
+ role?: SkfTabPanel["role"];
615
+ };
616
+
411
617
  type SkfTagProps = {
412
618
  /** Specifies Tag size */
413
619
  size?: SkfTag["size"];
@@ -472,11 +678,13 @@ type SkfTextAreaProps = {
472
678
  };
473
679
 
474
680
  type SkfToastProps = {
475
- /** If provided, adds a close button to the toast and will not disapear until user actively dismisses it. */
476
- closeable?: SkfToast["closeable"];
477
681
  /** */
478
682
  debug?: SkfToast["debug"];
479
- /** Severity of the toast. */
683
+ /** If defined, displays leading icon */
684
+ icon?: SkfToast["icon"];
685
+ /** If true, renders with an close button and sets aria-role to `status` */
686
+ persistent?: SkfToast["persistent"];
687
+ /** If defined, gives the supplied appearance */
480
688
  severity?: SkfToast["severity"];
481
689
  /** Time in seconds before the toast disappears. */
482
690
  timer?: SkfToast["timer"];
@@ -489,6 +697,21 @@ type SkfToastWrapperProps = {
489
697
  debug?: SkfToastWrapper["debug"];
490
698
  };
491
699
 
700
+ type SkfTooltipProps = {
701
+ /** */
702
+ offset?: SkfTooltip["offset"];
703
+ /** The placement of the dropdown */
704
+ placement?: SkfTooltip["placement"];
705
+ /** Whether the dropdown is open */
706
+ isOpen?: SkfTooltip["isOpen"];
707
+ /** The id of the element the dropdown will be anchored to */
708
+ anchor?: SkfTooltip["anchor"];
709
+ /** Fired when the dropdown is opened */
710
+ onopen?: (e: CustomEvent<never>) => void;
711
+ /** Fired when the dropdown is closed */
712
+ onclose?: (e: CustomEvent<never>) => void;
713
+ };
714
+
492
715
  export type CustomElements = {
493
716
  /**
494
717
  * The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.
@@ -516,11 +739,40 @@ export type CustomElements = {
516
739
  */
517
740
  "skf-alert": DefineComponent<SkfAlertProps>;
518
741
 
742
+ /**
743
+ * The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.
744
+ * ---
745
+ *
746
+ *
747
+ * ### **Events:**
748
+ * - **click** - Fired when the item is clicked
749
+ *
750
+ * ### **Slots:**
751
+ * - _default_ - One or more `<skf-breadcrumb-item>`
752
+ */
753
+ "skf-breadcrumb": DefineComponent<SkfBreadcrumbProps>;
754
+
755
+ /**
756
+ * The `<skf-breadcrumb-item>` is used in conjunction with the `<skf-breadcrumb>` component
757
+ * ---
758
+ *
759
+ *
760
+ * ### **Slots:**
761
+ * - _default_ - Label of the breadcrumb item
762
+ */
763
+ "skf-breadcrumb-item": DefineComponent<SkfBreadcrumbItemProps>;
764
+
519
765
  /**
520
766
  * Component to be used in forms or for interactivity
521
767
  * ---
522
768
  *
523
769
  *
770
+ * ### **Events:**
771
+ * - **click** - Fires when the button is clicked
772
+ *
773
+ * ### **Methods:**
774
+ * - **click()** - Simulates a click on the button.
775
+ *
524
776
  * ### **Slots:**
525
777
  * - _default_ - The Primary content
526
778
  */
@@ -568,6 +820,26 @@ export type CustomElements = {
568
820
  */
569
821
  "skf-collapse": DefineComponent<SkfCollapseProps>;
570
822
 
823
+ /**
824
+ * The `<skf-dialog>` is a component that open up a dialog with the content provided
825
+ * ---
826
+ *
827
+ *
828
+ * ### **Events:**
829
+ * - **skf-dialog-open** - Fires when the dialog is opened (after transitioned in)
830
+ * - **skf-dialog-close** - Fires when the dialog is closed (before transitioned out)
831
+ * - **close** - Fires when the dialog is closed (after transitioned out)
832
+ *
833
+ * ### **Slots:**
834
+ * - _default_ - The dialog component's content
835
+ * - **footer** - The dialog component's buttons goes here
836
+ *
837
+ * ### **CSS Properties:**
838
+ * - **--skf-dialog-height** - A custom height for the Dialog. Pass valid CSS **block-size** values _(default: undefined)_
839
+ * - **--skf-dialog-width** - A custom width for the Dialog Pass valid CSS **inline-size** values _(default: undefined)_
840
+ */
841
+ "skf-dialog": DefineComponent<SkfDialogProps>;
842
+
571
843
  /**
572
844
  * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
573
845
  * ---
@@ -638,6 +910,61 @@ export type CustomElements = {
638
910
  */
639
911
  "skf-logo": DefineComponent<SkfLogoProps>;
640
912
 
913
+ /**
914
+ * The `<skf-menu>` is a component that displays a list of actions or options.
915
+ * ---
916
+ *
917
+ *
918
+ * ### **Events:**
919
+ * - **open** - Fired when the menu is opened
920
+ * - **close** - Fired when the menu is closed
921
+ *
922
+ * ### **Slots:**
923
+ * - _default_ - The menu popover content
924
+ */
925
+ "skf-menu": DefineComponent<SkfMenuProps>;
926
+
927
+ /**
928
+ * The `<skf-menu-item>` is a component that displays a list of actions or options.
929
+ * ---
930
+ *
931
+ *
932
+ * ### **Events:**
933
+ * - **my-tag-my-event** - Fired when something happens
934
+ * - **click** - Fired when the component is clicked
935
+ * - **mouseover** - Fired when the mouse is over the component
936
+ * - **mouseout** - Fired when the mouse is out of the component
937
+ * - **focus** - Fired when the component is focused
938
+ * - **blur** - Fired when the component is blurred
939
+ * - **change** - Fired when the component's value changes
940
+ *
941
+ * ### **Slots:**
942
+ * - _default_ - The component's main content
943
+ * - **my-named-slot** - A named slot of the component
944
+ */
945
+ "skf-menu-item": DefineComponent<SkfMenuItemProps>;
946
+
947
+ /**
948
+ * The `<skf-popover>` is a general purpose component that displays the slot content.
949
+ * ---
950
+ *
951
+ *
952
+ * ### **Events:**
953
+ * - **open** - Fired when the menu is opened
954
+ * - **close** - Fired when the menu is closed
955
+ *
956
+ * ### **Slots:**
957
+ * - _default_ - The popover content
958
+ */
959
+ "skf-popover": DefineComponent<SkfPopoverProps>;
960
+
961
+ /**
962
+ * The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar
963
+ * ---
964
+ *
965
+ */
966
+ "skf-progress": DefineComponent<SkfProgressProps>;
967
+
641
968
  /**
642
969
  * The `<skf-radio>` component is used to create a radio input
643
970
  * ---
@@ -692,6 +1019,32 @@ export type CustomElements = {
692
1019
  */
693
1020
  "skf-select-option-group": DefineComponent<SkfSelectOptionGroupProps>;
694
1021
 
1022
+ /**
1023
+ * The `<skf-stepper>` is a component that displays a list of actions or options.
1024
+ * ---
1025
+ *
1026
+ *
1027
+ * ### **Events:**
1028
+ * - **skf-stepper-item-select** - Dispatched when the stepper item is selected
1029
+ *
1030
+ * ### **Slots:**
1031
+ * - _default_ - One or more `<skf-stepper-item>`
1032
+ */
1033
+ "skf-stepper": DefineComponent<SkfStepperProps>;
1034
+
1035
+ /**
1036
+ * The `<skf-stepper-item>` is used in conjunction with the `<skf-stepper>` component
1037
+ * ---
1038
+ *
1039
+ *
1040
+ * ### **Events:**
1041
+ * - **skf-stepper-item-select** - Dispatched when the stepper item is selected
1042
+ *
1043
+ * ### **Slots:**
1044
+ * - _default_ - Label of the stepper item
1045
+ */
1046
+ "skf-stepper-item": DefineComponent<SkfStepperItemProps>;
1047
+
695
1048
  /**
696
1049
  * The `<skf-switch>` is a component that displays a list of actions or options
697
1050
  * ---
@@ -702,6 +1055,41 @@ export type CustomElements = {
702
1055
  */
703
1056
  "skf-switch": DefineComponent<SkfSwitchProps>;
704
1057
 
1058
+ /**
1059
+ * The `<skf-tab>` is a component that displays a list of actions or options
1060
+ * ---
1061
+ *
1062
+ *
1063
+ * ### **Events:**
1064
+ * - **skf-tab-select** - {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected
1065
+ * - **click** - Fired when the component is clicked
1066
+ *
1067
+ * ### **Slots:**
1068
+ * - _default_ - The tab's label
1069
+ */
1070
+ "skf-tab": DefineComponent<SkfTabProps>;
1071
+
1072
+ /**
1073
+ * The `<skf-tab-group>` is a component that displays a list of actions or options.
1074
+ * ---
1075
+ *
1076
+ *
1077
+ * ### **Slots:**
1078
+ * - _default_ - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements
1079
+ * - **tabs** - Used for grouping tabs in the tab group. Must be <skf-tab> elements
1080
+ */
1081
+ "skf-tab-group": DefineComponent<SkfTabGroupProps>;
1082
+
1083
+ /**
1084
+ * The `<skf-tab-panel>` is a component that displays a list of actions or options.
1085
+ * ---
1086
+ *
1087
+ *
1088
+ * ### **Slots:**
1089
+ * - _default_ - The tab panel's content
1090
+ */
1091
+ "skf-tab-panel": DefineComponent<SkfTabPanelProps>;
1092
+
705
1093
  /**
706
1094
  * The `<skf-tag>` is a component that displays a list of actions or options
707
1095
  * ---
@@ -745,6 +1133,20 @@ export type CustomElements = {
745
1133
  * - _default_ - The alert components that the toast creates will render here.
746
1134
  */
747
1135
  "skf-toast-wrapper": DefineComponent<SkfToastWrapperProps>;
1136
+
1137
+ /**
1138
+ * The `<skf-tooltip>` is a component that displays a list of actions or options.
1139
+ * ---
1140
+ *
1141
+ *
1142
+ * ### **Events:**
1143
+ * - **open** - Fired when the dropdown is opened
1144
+ * - **close** - Fired when the dropdown is closed
1145
+ *
1146
+ * ### **Slots:**
1147
+ * - _default_ - The tooltip popover content
1148
+ */
1149
+ "skf-tooltip": DefineComponent<SkfTooltipProps>;
748
1150
  };
749
1151
 
750
1152
  declare module "vue" {