@skf-design-system/ui-components 1.0.0-beta.3 → 1.0.0-beta.4

package/dist/custom-elements.json

@@ -160,123 +160,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/alert/alert.component.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `<skf-alert>` is a type of notification that appears in-line",
-          "name": "SkfAlert",
-          "slots": [
-            {
-              "description": "Alert message. **Notice!** See design principles for approved content",
-              "name": ""
-            },
-            {
-              "description": "Slot for the link",
-              "name": "link"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "closeable",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "If true, alert is being used as a toast (alertdialog) with an close button",
-              "attribute": "closeable"
-            },
-            {
-              "kind": "field",
-              "name": "buttonLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Close'",
-              "description": "Close button aria-label",
-              "attribute": "button-label"
-            },
-            {
-              "kind": "field",
-              "name": "icon",
-              "type": {
-                "text": "SkfIcon['name'] | undefined"
-              },
-              "description": "If defined, displays leading icon",
-              "attribute": "icon"
-            },
-            {
-              "kind": "field",
-              "name": "severity",
-              "type": {
-                "text": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
-              },
-              "description": "If defined, gives the supplied appearance",
-              "attribute": "severity"
-            }
-          ],
-          "events": [
-            {
-              "description": "Fires when the close button is clicked",
-              "name": "skf-alert-close"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "closeable",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "If true, alert is being used as a toast (alertdialog) with an close button",
-              "fieldName": "closeable"
-            },
-            {
-              "name": "button-label",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Close'",
-              "description": "Close button aria-label",
-              "fieldName": "buttonLabel"
-            },
-            {
-              "name": "icon",
-              "type": {
-                "text": "SkfIcon['name'] | undefined"
-              },
-              "description": "If defined, displays leading icon",
-              "fieldName": "icon"
-            },
-            {
-              "name": "severity",
-              "type": {
-                "text": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
-              },
-              "description": "If defined, gives the supplied appearance",
-              "fieldName": "severity"
-            }
-          ],
-          "superclass": {
-            "name": "SkfElement",
-            "package": "@internal/components/skf-element.js"
-          },
-          "tagName": "skf-alert",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SkfAlert",
-          "declaration": {
-            "name": "SkfAlert",
-            "module": "src/components/alert/alert.component.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/button/button.component.ts",
@@ -565,6 +448,123 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/alert/alert.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<skf-alert>` is a type of notification that appears in-line",
+          "name": "SkfAlert",
+          "slots": [
+            {
+              "description": "Alert message. **Notice!** See design principles for approved content",
+              "name": ""
+            },
+            {
+              "description": "Slot for the link",
+              "name": "link"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "closeable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, alert is being used as a toast (alertdialog) with an close button",
+              "attribute": "closeable"
+            },
+            {
+              "kind": "field",
+              "name": "buttonLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Close'",
+              "description": "Close button aria-label",
+              "attribute": "button-label"
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "SkfIcon['name'] | undefined"
+              },
+              "description": "If defined, displays leading icon",
+              "attribute": "icon"
+            },
+            {
+              "kind": "field",
+              "name": "severity",
+              "type": {
+                "text": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
+              },
+              "description": "If defined, gives the supplied appearance",
+              "attribute": "severity"
+            }
+          ],
+          "events": [
+            {
+              "description": "Fires when the close button is clicked",
+              "name": "skf-alert-close"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "closeable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, alert is being used as a toast (alertdialog) with an close button",
+              "fieldName": "closeable"
+            },
+            {
+              "name": "button-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Close'",
+              "description": "Close button aria-label",
+              "fieldName": "buttonLabel"
+            },
+            {
+              "name": "icon",
+              "type": {
+                "text": "SkfIcon['name'] | undefined"
+              },
+              "description": "If defined, displays leading icon",
+              "fieldName": "icon"
+            },
+            {
+              "name": "severity",
+              "type": {
+                "text": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
+              },
+              "description": "If defined, gives the supplied appearance",
+              "fieldName": "severity"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element.js"
+          },
+          "tagName": "skf-alert",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfAlert",
+          "declaration": {
+            "name": "SkfAlert",
+            "module": "src/components/alert/alert.component.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/checkbox/checkbox.component.ts",
@@ -839,6 +839,110 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/divider/divider.component.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information",
+          "name": "SkfDivider",
+          "cssProperties": [
+            {
+              "description": "The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical",
+              "name": "--skf-divider-spacing"
+            },
+            {
+              "description": "The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical",
+              "name": "--skf-divider-inset"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\""
+              },
+              "default": "'primary'",
+              "description": "Defines the Divider color",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "decorative",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+              "attribute": "decorative"
+            },
+            {
+              "kind": "field",
+              "name": "vertical",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, renders the divider vertically",
+              "attribute": "vertical",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\""
+              },
+              "default": "'primary'",
+              "description": "Defines the Divider color",
+              "fieldName": "color"
+            },
+            {
+              "name": "decorative",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+              "fieldName": "decorative"
+            },
+            {
+              "name": "vertical",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "If true, renders the divider vertically",
+              "fieldName": "vertical"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element.js"
+          },
+          "tagName": "skf-divider",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfDivider",
+          "declaration": {
+            "name": "SkfDivider",
+            "module": "src/components/divider/divider.component.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/collapse/collapse.component.ts",
@@ -1003,110 +1107,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/divider/divider.component.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information",
-          "name": "SkfDivider",
-          "cssProperties": [
-            {
-              "description": "The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical",
-              "name": "--skf-divider-spacing"
-            },
-            {
-              "description": "The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical",
-              "name": "--skf-divider-inset"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "#internals",
-              "privacy": "private",
-              "type": {
-                "text": "ElementInternals"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\""
-              },
-              "default": "'primary'",
-              "description": "Defines the Divider color",
-              "attribute": "color",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "decorative",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
-              "attribute": "decorative"
-            },
-            {
-              "kind": "field",
-              "name": "vertical",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "If true, renders the divider vertically",
-              "attribute": "vertical",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "color",
-              "type": {
-                "text": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\""
-              },
-              "default": "'primary'",
-              "description": "Defines the Divider color",
-              "fieldName": "color"
-            },
-            {
-              "name": "decorative",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
-              "fieldName": "decorative"
-            },
-            {
-              "name": "vertical",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "If true, renders the divider vertically",
-              "fieldName": "vertical"
-            }
-          ],
-          "superclass": {
-            "name": "SkfElement",
-            "package": "@internal/components/skf-element.js"
-          },
-          "tagName": "skf-divider",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SkfDivider",
-          "declaration": {
-            "name": "SkfDivider",
-            "module": "src/components/divider/divider.component.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/heading/heading.component.ts",

package/dist/internal/storybook/shadowRootTraverser.d.ts

@@ -1,18 +1,10 @@
+import { queries, within } from '@storybook/test';
+type WithinShadowRootPromise = Promise<ReturnType<typeof within<typeof queries>>>;
 /**
- * Workaround solution to get shadow DOM elements. Throws an error if the element is not found.
- *
- * @usage getWithinShadowRoot(canvasElement, 'my-custom-element', 'button')
+ * Workaround solution for testing shadow DOM elements
+ * @see {@link https://github.com/storybookjs/testing-library/issues/24#issuecomment-1593709872|GitHub}
  */
-export declare const getWithinShadowRoot: (canvasElement: HTMLElement, ...selectors: string[]) => {
-    element: HTMLElement;
-    shadowRoot: HTMLElement;
-};
-/**
- * Workaround solution to get shadow DOM elements. Returns undefined if the element is not found.
- *
- * @usage findWithinShadowRoot(canvasElement, 'my-custom-element', 'button')
- */
-export declare const findWithinShadowRoot: (canvasElement: HTMLElement, ...selectors: string[]) => {
-    element: HTMLElement;
-    shadowRoot: HTMLElement;
-} | undefined;
+export declare function withinShadowRoot(customElement: HTMLElement, selector: string): WithinShadowRootPromise;
+export declare const getElementWithinShadowRoot: (canvasElement: HTMLElement, ...selectors: string[]) => Element;
+export declare const findElementWithinShadowRoot: (canvasElement: HTMLElement, ...selectors: string[]) => Element | undefined;
+export {};

package/dist/react/index.d.ts

@@ -1,11 +1,11 @@
-export { default as SkfAccordion } from './skf-accordion/index.js';
-export { default as SkfAlert } from './skf-alert/index.js';
-export { default as SkfButton } from './skf-button/index.js';
 export { default as SkfCard } from './skf-card/index.js';
+export { default as SkfAccordion } from './skf-accordion/index.js';
 export { default as SkfCheckbox } from './skf-checkbox/index.js';
 export { default as SkfCollapse } from './skf-collapse/index.js';
 export { default as SkfDivider } from './skf-divider/index.js';
 export { default as SkfHeading } from './skf-heading/index.js';
+export { default as SkfButton } from './skf-button/index.js';
+export { default as SkfAlert } from './skf-alert/index.js';
 export { default as SkfIcon } from './skf-icon/index.js';
 export { default as SkfInput } from './skf-input/index.js';
 export { default as SkfLink } from './skf-link/index.js';

package/dist/react/index.js

@@ -1,11 +1,11 @@
-export { default as SkfAccordion } from './skf-accordion/index.js';
-export { default as SkfAlert } from './skf-alert/index.js';
-export { default as SkfButton } from './skf-button/index.js';
 export { default as SkfCard } from './skf-card/index.js';
+export { default as SkfAccordion } from './skf-accordion/index.js';
 export { default as SkfCheckbox } from './skf-checkbox/index.js';
 export { default as SkfCollapse } from './skf-collapse/index.js';
 export { default as SkfDivider } from './skf-divider/index.js';
 export { default as SkfHeading } from './skf-heading/index.js';
+export { default as SkfButton } from './skf-button/index.js';
+export { default as SkfAlert } from './skf-alert/index.js';
 export { default as SkfIcon } from './skf-icon/index.js';
 export { default as SkfInput } from './skf-input/index.js';
 export { default as SkfLink } from './skf-link/index.js';

package/dist/styles/form-field.styles.js

@@ -6,7 +6,7 @@ const i = e`
 		}
 
 		/* stylelint-disable no-descending-specificity */
-		#root {
+		#field {
 			color: var(--_skf-field-color, var(--skf-text-color-primary));
 			display: grid;
 			gap: var(--skf-spacing-25);