@skf-design-system/ui-components 0.0.1-beta.3 → 1.0.0-alpha.27

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 (107) hide show
  1. package/dist/components/accordion/accordion.component.d.ts +9 -5
  2. package/dist/components/accordion/accordion.component.js +22 -19
  3. package/dist/components/accordion/accordion.d.ts +1 -1
  4. package/dist/components/accordion/accordion.styles.js +3 -3
  5. package/dist/components/alert/alert.component.d.ts +7 -5
  6. package/dist/components/alert/alert.component.js +61 -0
  7. package/dist/components/alert/alert.js +6 -0
  8. package/dist/components/alert/alert.styles.js +63 -0
  9. package/dist/components/button/button.component.js +1 -1
  10. package/dist/components/button/button.styles.js +1 -1
  11. package/dist/components/card/card.component.d.ts +3 -3
  12. package/dist/components/card/card.component.js +16 -19
  13. package/dist/components/card/card.styles.js +11 -3
  14. package/dist/components/checkbox/checkbox.component.d.ts +16 -9
  15. package/dist/components/checkbox/checkbox.component.js +32 -31
  16. package/dist/components/checkbox/checkbox.styles.js +7 -2
  17. package/dist/components/checkbox/checkbox.test.d.ts +1 -0
  18. package/dist/components/collapse/collapse.component.d.ts +9 -6
  19. package/dist/components/collapse/collapse.component.js +39 -36
  20. package/dist/components/collapse/collapse.styles.js +3 -3
  21. package/dist/components/collapse/collapse.test.d.ts +1 -0
  22. package/dist/components/divider/divider.component.d.ts +13 -10
  23. package/dist/components/divider/divider.component.js +34 -29
  24. package/dist/components/divider/divider.styles.js +1 -5
  25. package/dist/components/heading/heading.component.d.ts +12 -2
  26. package/dist/components/heading/heading.component.js +34 -0
  27. package/dist/components/heading/heading.js +6 -0
  28. package/dist/components/heading/heading.styles.js +62 -0
  29. package/dist/components/icon/icon.component.d.ts +14 -8
  30. package/dist/components/icon/icon.component.js +6 -6
  31. package/dist/components/icon/icon.styles.js +56 -54
  32. package/dist/components/input/input.component.d.ts +34 -29
  33. package/dist/components/input/input.component.js +43 -43
  34. package/dist/components/link/link.component.d.ts +15 -12
  35. package/dist/components/link/link.component.js +7 -7
  36. package/dist/components/link/link.styles.js +1 -1
  37. package/dist/components/loader/loader.component.d.ts +7 -7
  38. package/dist/components/loader/loader.component.js +35 -61
  39. package/dist/components/loader/loader.styles.js +42 -10
  40. package/dist/components/logo/logo.component.d.ts +5 -3
  41. package/dist/components/logo/logo.component.js +8 -8
  42. package/dist/components/logo/logo.styles.js +2 -2
  43. package/dist/components/radio/radio.component.d.ts +15 -13
  44. package/dist/components/radio/radio.component.js +3 -3
  45. package/dist/components/radio/radio.styles.js +6 -1
  46. package/dist/components/select/select.component.d.ts +137 -0
  47. package/dist/components/select/select.component.js +312 -0
  48. package/dist/components/select/select.controllers.d.ts +59 -0
  49. package/dist/components/select/select.controllers.js +169 -0
  50. package/dist/components/select/select.d.ts +8 -0
  51. package/dist/components/select/select.js +6 -0
  52. package/dist/components/select/select.styles.d.ts +1 -0
  53. package/dist/components/select/select.styles.js +131 -0
  54. package/dist/components/select-option/select-option.component.d.ts +77 -0
  55. package/dist/components/select-option/select-option.component.js +123 -0
  56. package/dist/components/select-option/select-option.controllers.d.ts +9 -0
  57. package/dist/components/select-option/select-option.d.ts +8 -0
  58. package/dist/components/select-option/select-option.js +6 -0
  59. package/dist/components/select-option/select-option.styles.d.ts +1 -0
  60. package/dist/components/select-option/select-option.styles.js +53 -0
  61. package/dist/components/select-option-group/select-option-group.component.d.ts +16 -0
  62. package/dist/components/select-option-group/select-option-group.component.js +31 -0
  63. package/dist/components/select-option-group/select-option-group.d.ts +8 -0
  64. package/dist/components/select-option-group/select-option-group.js +6 -0
  65. package/dist/components/select-option-group/select-option-group.style.d.ts +1 -0
  66. package/dist/components/select-option-group/select-option-group.style.js +18 -0
  67. package/dist/components/switch/switch.component.d.ts +2 -3
  68. package/dist/components/switch/switch.component.js +106 -0
  69. package/dist/components/switch/switch.js +6 -0
  70. package/dist/components/switch/switch.styles.js +85 -0
  71. package/dist/components/switch/switch.test.d.ts +1 -0
  72. package/dist/components/tag/tag.component.d.ts +25 -4
  73. package/dist/components/tag/tag.component.js +66 -29
  74. package/dist/components/tag/tag.styles.js +6 -5
  75. package/dist/components/textarea/textarea.component.d.ts +26 -23
  76. package/dist/components/textarea/textarea.component.js +15 -12
  77. package/dist/custom-elements.json +969 -295
  78. package/dist/index.d.ts +6 -0
  79. package/dist/index.js +48 -30
  80. package/dist/internal/components/formBase.d.ts +18 -1
  81. package/dist/internal/components/formBase.js +25 -13
  82. package/dist/internal/components/hint/hint.component.js +12 -10
  83. package/dist/internal/components/hint/hint.styles.js +26 -10
  84. package/dist/internal/components/skf-element.d.ts +4 -4
  85. package/dist/internal/components/skf-element.js +15 -19
  86. package/dist/internal/helpers/array.d.ts +4 -0
  87. package/dist/internal/helpers/findMatchingTags.d.ts +2 -0
  88. package/dist/internal/helpers/findMatchingTags.js +12 -0
  89. package/dist/internal/helpers/hintSeverity.d.ts +2 -0
  90. package/dist/internal/helpers/hintSeverity.js +6 -0
  91. package/dist/internal/helpers/raiseError.d.ts +28 -0
  92. package/dist/internal/helpers/raiseError.js +29 -0
  93. package/dist/internal/storybook/shadowRootTraverser.d.ts +16 -6
  94. package/dist/react/index.d.ts +3 -0
  95. package/dist/react/index.js +3 -0
  96. package/dist/react/skf-select/index.d.ts +21 -0
  97. package/dist/react/skf-select/index.js +21 -0
  98. package/dist/react/skf-select-option/index.d.ts +9 -0
  99. package/dist/react/skf-select-option/index.js +17 -0
  100. package/dist/react/skf-select-option-group/index.d.ts +3 -0
  101. package/dist/react/skf-select-option-group/index.js +13 -0
  102. package/dist/styles/form-field.styles.js +11 -7
  103. package/dist/types/jsx/custom-element-jsx.d.ts +292 -140
  104. package/dist/types/vue/index.d.ts +225 -90
  105. package/dist/vscode.html-custom-data.json +299 -97
  106. package/dist/web-types.json +624 -242
  107. package/package.json +34 -30
package/dist/styles/form-field.styles.js CHANGED
@@ -6,11 +6,15 @@ const i = e`
6
6
  }
7
7
 
8
8
  /* stylelint-disable no-descending-specificity */
9
- #field {
9
+ #root {
10
10
  color: var(--_skf-field-color, var(--skf-text-color-primary));
11
11
  display: grid;
12
12
  gap: var(--skf-spacing-25);
13
13
 
14
+ :host([disabled]) & {
15
+ --_skf-field-color: var(--skf-interactive-text-color-disabled);
16
+ }
17
+
14
18
  :host([size='sm']) & {
15
19
  font-size: var(--skf-font-size-75);
16
20
  font-weight: var(--skf-font-weight-medium);
@@ -31,8 +35,8 @@ const i = e`
31
35
  }
32
36
 
33
37
  /**
34
- * Wwrapper for the input-element that controls the appearance
35
- */
38
+ * Wwrapper for the input-element that controls the appearance
39
+ */
36
40
  #input {
37
41
  background-color: var(--_skf-field-input-bg-color, var(--skf-bg-color-neutral-1));
38
42
  border: var(--skf-border-width-sm) solid
@@ -91,8 +95,8 @@ const i = e`
91
95
  }
92
96
 
93
97
  /**
94
- * Wrapper element for handling layout of the leading and trailing content
95
- */
98
+ * Wrapper element for handling layout of the leading and trailing content
99
+ */
96
100
  #affix {
97
101
  align-items: center;
98
102
  display: flex;
@@ -144,8 +148,8 @@ const i = e`
144
148
  }
145
149
 
146
150
  /**
147
- * Action related styles
148
- */
151
+ * Action related styles
152
+ */
149
153
  #action {
150
154
  display: flex;
151
155
  flex-direction: column;