@skf-design-system/ui-components 1.0.2-beta.1 → 1.0.2-beta.3

package/dist/vscode.html-custom-data.json

@@ -333,28 +333,85 @@
       "references": []
     },
     {
-      "name": "skf-datepicker",
-      "description": "A date picker component that allows users to select a date or a range of dates.\n---\n\n\n### **Events:**\n - **selected-date-changed** - When a date is selected\n- **selected-date-range-changed** - When a range of dates is selected\n\n### **Methods:**\n - **gotoDate(date: _Date | string_)** - Navigates to the given date.\n\n### **Slots:**\n - _default_ - Default hint content placed inside the date picker\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the date picker _(default: undefined)_",
+      "name": "skf-datepicker-calendar",
+      "description": "\n---\n",
       "attributes": [
+        { "name": "eventid", "values": [] },
+        { "name": "firstDayOfWeek", "values": [] },
+        {
+          "name": "invalid-dates",
+          "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
+          "values": []
+        },
+        { "name": "locale", "values": [] },
+        { "name": "range", "values": [] },
         {
-          "name": "locale",
-          "description": "The locale to use for formatting the date",
+          "name": "selectable-from",
+          "description": "Earliest selectable date. (yyyy-mm-dd format)",
           "values": []
         },
         {
-          "name": "date",
-          "description": "The date to display in the date picker",
+          "name": "selectable-to",
+          "description": "Latest selectable date. (yyyy-mm-dd format)",
+          "values": []
+        },
+        { "name": "selected-date", "values": [{ "name": "Date" }] },
+        {
+          "name": "selectedDateRange",
+          "values": [
+            { "name": "{ start: Date" },
+            { "name": "null; end: Date" },
+            { "name": "null }" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-datepicker",
+      "description": "\n---\n\n\n### **Methods:**\n - **clear()** - Clears the input field",
+      "attributes": [
+        {
+          "name": "custom-invalid",
+          "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
           "values": []
         },
         { "name": "id", "values": [] },
+        {
+          "name": "label",
+          "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
+          "values": []
+        },
+        {
+          "name": "hide-label",
+          "description": "If true, hides the label visually",
+          "values": []
+        },
+        {
+          "name": "hint",
+          "description": "If defined, displays informational text below the field",
+          "values": []
+        },
         {
           "name": "invalid-dates",
           "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
           "values": []
         },
         {
-          "name": "range",
-          "description": "If true, the date picker will allow the selection of a range of dates",
+          "name": "name",
+          "description": "If defined, adds name to the input-element",
+          "values": []
+        },
+        { "name": "placeholder", "values": [] },
+        { "name": "range", "values": [] },
+        {
+          "name": "readonly",
+          "description": "If true, makes the element not mutable, meaning the user can not edit the control",
+          "values": []
+        },
+        {
+          "name": "required-label",
+          "description": "If defined, renders an alternative A11y text for the asterisk",
           "values": []
         },
         {
@@ -366,6 +423,35 @@
           "name": "selectable-to",
           "description": "Latest selectable date. (yyyy-mm-dd format)",
           "values": []
+        },
+        {
+          "name": "severity",
+          "description": "If defined, displays provided severity state",
+          "values": [
+            { "name": "alert" },
+            { "name": "success" },
+            { "name": "info" },
+            { "name": "warning" }
+          ]
+        },
+        {
+          "name": "size",
+          "description": "Size of the input",
+          "values": [{ "name": "sm" }, { "name": "md" }]
+        },
+        {
+          "name": "validate-on",
+          "description": "Sets validation start",
+          "values": [
+            { "name": "input" },
+            { "name": "change" },
+            { "name": "submit" }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The current value of the input field",
+          "values": []
         }
       ],
       "references": []
@@ -871,7 +957,7 @@
       "description": "The `<skf-nav>` is a component that displays a list of <nav-items>.\n---\n\n\n### **Slots:**\n - _default_ - The component's main content",
       "attributes": [
         { "name": "href", "values": [] },
-        { "name": "icon", "values": [{ "name": "SkfLink['icon']" }] }
+        { "name": "icon", "values": [{ "name": "Icon" }] }
       ],
       "references": []
     },
@@ -1294,8 +1380,8 @@
       "references": []
     },
     {
-      "name": "skf-tab-group",
-      "description": "The `<skf-tab-group>` is a component that displays a list of actions or options.\n---\n\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements\n- **tabs** - Used for grouping tabs in the tab group. Must be <skf-tab> elements",
+      "name": "skf-tabs",
+      "description": "The `<skf-tabs>` is a component that displays a list of actions or options\n---\n\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements\n- **tabs** - Used for grouping tabs in the tab group. Must be <skf-tab> elements",
       "attributes": [
         {
           "name": "default-selected",

package/dist/web-types.json

@@ -738,31 +738,141 @@
           }
         },
         {
-          "name": "skf-datepicker",
-          "description": "A date picker component that allows users to select a date or a range of dates.\n---\n\n\n### **Events:**\n - **selected-date-changed** - When a date is selected\n- **selected-date-range-changed** - When a range of dates is selected\n\n### **Methods:**\n - **gotoDate(date: _Date | string_)** - Navigates to the given date.\n\n### **Slots:**\n - _default_ - Default hint content placed inside the date picker\n\n### **CSS Properties:**\n - **--max-width** - The maximum width of the date picker _(default: undefined)_",
+          "name": "skf-datepicker-calendar",
+          "description": "\n---\n",
           "doc-url": "",
           "attributes": [
+            { "name": "eventid", "value": { "type": "string" } },
+            {
+              "name": "firstDayOfWeek",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "invalid-dates",
+              "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "locale",
-              "description": "The locale to use for formatting the date",
               "value": { "type": "string", "default": "'en-CA'" }
             },
             {
-              "name": "date",
-              "description": "The date to display in the date picker",
+              "name": "range",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "selectable-from",
+              "description": "Earliest selectable date. (yyyy-mm-dd format)",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "selectable-to",
+              "description": "Latest selectable date. (yyyy-mm-dd format)",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "selected-date",
+              "value": { "type": "Date | undefined", "default": "undefined" }
+            },
+            {
+              "name": "selectedDateRange",
+              "value": {
+                "type": "{ start: Date | null; end: Date | null }",
+                "default": "{ start: null, end: null, }"
+              }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "eventid", "type": "string" },
+              { "name": "firstDayOfWeek", "type": "number" },
+              {
+                "name": "invalidDates",
+                "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
+                "type": "string | undefined"
+              },
+              { "name": "locale", "type": "string" },
+              { "name": "range", "type": "boolean" },
+              {
+                "name": "selectableFrom",
+                "description": "Earliest selectable date. (yyyy-mm-dd format)",
+                "type": "string | undefined"
+              },
+              {
+                "name": "selectableTo",
+                "description": "Latest selectable date. (yyyy-mm-dd format)",
+                "type": "string | undefined"
+              },
+              { "name": "selectedDate", "type": "Date | undefined" },
+              {
+                "name": "selectedDateRange",
+                "type": "{ start: Date | null; end: Date | null }"
+              },
+              { "name": "_listenToKeyboard" },
+              { "name": "_handleKeyDown" },
+              { "name": "dateSelectable" }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-datepicker",
+          "description": "\n---\n\n\n### **Methods:**\n - **clear()** - Clears the input field",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "custom-invalid",
+              "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
               "value": { "type": "string" }
             },
-            { "name": "id", "value": { "type": "string", "default": "''" } },
+            {
+              "name": "id",
+              "value": { "type": "string", "default": "'skf-datepicker-input'" }
+            },
+            {
+              "name": "label",
+              "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "hide-label",
+              "description": "If true, hides the label visually",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "hint",
+              "description": "If defined, displays informational text below the field",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "invalid-dates",
               "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
               "value": { "type": "string | undefined" }
             },
+            {
+              "name": "name",
+              "description": "If defined, adds name to the input-element",
+              "value": { "type": "string | undefined" }
+            },
+            {
+              "name": "placeholder",
+              "value": { "type": "string", "default": "'YYYY-MM-DD'" }
+            },
             {
               "name": "range",
-              "description": "If true, the date picker will allow the selection of a range of dates",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "readonly",
+              "description": "If true, makes the element not mutable, meaning the user can not edit the control",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "required-label",
+              "description": "If defined, renders an alternative A11y text for the asterisk",
+              "value": { "type": "string | undefined" }
+            },
             {
               "name": "selectable-from",
               "description": "Earliest selectable date. (yyyy-mm-dd format)",
@@ -772,48 +882,82 @@
               "name": "selectable-to",
               "description": "Latest selectable date. (yyyy-mm-dd format)",
               "value": { "type": "string | undefined" }
-            }
-          ],
-          "slots": [
+            },
             {
-              "name": "",
-              "description": "Default hint content placed inside the date picker"
-            }
-          ],
-          "events": [
+              "name": "severity",
+              "description": "If defined, displays provided severity state",
+              "value": {
+                "type": "\"alert\" | \"success\" | \"info\" | \"warning\""
+              }
+            },
+            {
+              "name": "size",
+              "description": "Size of the input",
+              "value": { "type": "'sm' | 'md'", "default": "'md'" }
+            },
             {
-              "name": "selected-date-changed",
-              "description": "When a date is selected"
+              "name": "validate-on",
+              "description": "Sets validation start",
+              "value": {
+                "type": "'input' | 'change' | 'submit'",
+                "default": "'change'"
+              }
             },
             {
-              "name": "selected-date-range-changed",
-              "description": "When a range of dates is selected"
+              "name": "value",
+              "description": "The current value of the input field",
+              "value": { "type": "string | undefined" }
             }
           ],
+          "events": [],
           "js": {
             "properties": [
               {
-                "name": "locale",
-                "description": "The locale to use for formatting the date",
-                "type": "string"
+                "name": "focusTimeoutId",
+                "type": "ReturnType<typeof setTimeout> | undefined"
               },
               {
-                "name": "date",
-                "description": "The date to display in the date picker",
-                "type": "string"
+                "name": "customInvalid",
+                "description": "If defined, forces component to invalid state until removed. Its value is used as hint text."
               },
               { "name": "id", "type": "string" },
+              {
+                "name": "label",
+                "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
+                "type": "string | undefined"
+              },
+              {
+                "name": "hideLabel",
+                "description": "If true, hides the label visually",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "hint",
+                "description": "If defined, displays informational text below the field",
+                "type": "string | undefined"
+              },
               {
                 "name": "invalidDates",
                 "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
                 "type": "string | undefined"
               },
               {
-                "name": "range",
-                "description": "If true, the date picker will allow the selection of a range of dates",
-                "type": "boolean"
+                "name": "name",
+                "description": "If defined, adds name to the input-element",
+                "type": "string | undefined"
+              },
+              { "name": "placeholder", "type": "string" },
+              { "name": "range", "type": "boolean" },
+              {
+                "name": "readonly",
+                "description": "If true, makes the element not mutable, meaning the user can not edit the control",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "requiredLabel",
+                "description": "If defined, renders an alternative A11y text for the asterisk",
+                "type": "string | undefined"
               },
-              { "name": "selectedDate", "type": "Date | undefined" },
               {
                 "name": "selectableFrom",
                 "description": "Earliest selectable date. (yyyy-mm-dd format)",
@@ -824,18 +968,28 @@
                 "description": "Latest selectable date. (yyyy-mm-dd format)",
                 "type": "string | undefined"
               },
-              { "name": "selectedDateRange", "type": "SkfDatePickerDateRange" }
-            ],
-            "events": [
               {
-                "name": "selected-date-changed",
-                "description": "When a date is selected"
+                "name": "severity",
+                "description": "If defined, displays provided severity state",
+                "type": "\"alert\" | \"success\" | \"info\" | \"warning\""
+              },
+              {
+                "name": "size",
+                "description": "Size of the input",
+                "type": "'sm' | 'md'"
+              },
+              {
+                "name": "validateOn",
+                "description": "Sets validation start",
+                "type": "'input' | 'change' | 'submit'"
               },
               {
-                "name": "selected-date-range-changed",
-                "description": "When a range of dates is selected"
+                "name": "value",
+                "description": "The current value of the input field",
+                "type": "string | undefined"
               }
-            ]
+            ],
+            "events": []
           }
         },
         {
@@ -1901,10 +2055,7 @@
           "doc-url": "",
           "attributes": [
             { "name": "href", "value": { "type": "string", "default": "'#'" } },
-            {
-              "name": "icon",
-              "value": { "type": "SkfLink['icon'] | undefined" }
-            }
+            { "name": "icon", "value": { "type": "Icon | undefined" } }
           ],
           "slots": [
             { "name": "", "description": "The component's main content" }
@@ -1913,7 +2064,7 @@
           "js": {
             "properties": [
               { "name": "href", "type": "string" },
-              { "name": "icon", "type": "SkfLink['icon'] | undefined" }
+              { "name": "icon", "type": "Icon | undefined" }
             ],
             "events": []
           }
@@ -2898,8 +3049,8 @@
           }
         },
         {
-          "name": "skf-tab-group",
-          "description": "The `<skf-tab-group>` is a component that displays a list of actions or options.\n---\n\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements\n- **tabs** - Used for grouping tabs in the tab group. Must be <skf-tab> elements",
+          "name": "skf-tabs",
+          "description": "The `<skf-tabs>` is a component that displays a list of actions or options\n---\n\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements\n- **tabs** - Used for grouping tabs in the tab group. Must be <skf-tab> elements",
           "doc-url": "",
           "attributes": [
             {
@@ -3004,7 +3155,7 @@
                 "type": "string"
               },
               { "name": "selected", "type": "boolean" },
-              { "name": "variant", "type": "SkfTabGroup['variant']" },
+              { "name": "variant", "type": "SkfTabs['variant']" },
               { "name": "role", "type": "string" }
             ],
             "events": [

package/package.json

@@ -34,7 +34,7 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.2-beta.1",
+  "version": "1.0.2-beta.3",
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
     "@js-temporal/polyfill": "^0.5.1"
@@ -44,8 +44,7 @@
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
     "@custom-elements-manifest/analyzer": "^0.10.4",
-    "@eslint/js": "^9.23.0",
-    "@playwright/test": "^1.51.1",
+    "@eslint/js": "^9.24.0",
     "@skf-design-system/ui-assets": "0.1.3-beta.4",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
@@ -54,39 +53,37 @@
     "@storybook/blocks": "^8.6.12",
     "@storybook/manager-api": "^8.6.12",
     "@storybook/test": "^8.6.12",
-    "@storybook/test-runner": "^0.22.0",
     "@storybook/theming": "^8.6.12",
     "@storybook/web-components": "^8.6.12",
     "@storybook/web-components-vite": "^8.6.12",
     "@types/node": "^22.14.0",
     "@wc-toolkit/module-path-resolver": "^1.0.0",
-    "@wc-toolkit/storybook-helpers": "^1.1.1",
+    "@wc-toolkit/storybook-helpers": "^1.1.2",
     "@wc-toolkit/type-parser": "^1.0.3",
     "concurrently": "^9.1.2",
     "custom-element-jet-brains-integration": "^1.7.0",
     "custom-element-jsx-integration": "^1.6.0",
     "custom-element-vs-code-integration": "^1.5.0",
     "custom-element-vuejs-integration": "^1.4.0",
-    "eslint": "^9.23.0",
+    "eslint": "^9.24.0",
     "eslint-plugin-lit": "^2.0.0",
     "eslint-plugin-lit-a11y": "^4.1.4",
     "eslint-plugin-wc": "^3.0.0",
-    "express": "^5.1.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.5.0",
     "lit": "^3.2.1",
     "postcss-styled-syntax": "^0.7.1",
     "prettier": "3.5.3",
     "storybook": "^8.6.12",
-    "stylelint": "^16.17.0",
-    "stylelint-config-standard": "^37.0.0",
+    "stylelint": "^16.18.0",
+    "stylelint-config-standard": "^38.0.0",
     "stylelint-no-unsupported-browser-features": "^8.0.4",
     "stylelint-order": "^6.0.4",
     "stylelint-value-no-unknown-custom-properties": "^6.0.1",
     "tsc-alias": "^1.8.13",
-    "typescript": "^5.8.2",
+    "typescript": "^5.8.3",
     "typescript-eslint": "^8.29.0",
-    "vite": "^6.2.4",
+    "vite": "^6.2.5",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
@@ -107,9 +104,6 @@
     "lint:eslint": "eslint \"**/*.{js,ts}\" --ignore-pattern .gitignore",
     "lint:prettier": "prettier \"**/*.{js,ts}\" --check --ignore-path .gitignore --log-level warn",
     "lint:stylelint": "stylelint \"**/*.{css,ts}\" --quiet --ignore-path .gitignore",
-    "serve:storybook-static": "pnpm build && pnpm storybook build && node ./build/serve.js",
-    "storybook": "concurrently \"storybook dev -p 9009\" \"pnpm analyze --watch\"",
-    "test": "npx playwright test",
-    "test:ui": " npx playwright test --ui"
+    "storybook": "concurrently \"storybook dev -p 6006\" \"pnpm analyze --watch\""
   }
 }

package/dist/components/accordion/accordion-item.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/accordion/accordion.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/checkbox/checkbox.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/date-picker/datepicker.d.ts

@@ -1,10 +0,0 @@
-import { SkfDatePickerCalendar } from './datepicker.calendar.component.js';
-import { SkfDatePicker } from './datepicker.component.js';
-export * from './datepicker.component.js';
-export default SkfDatePicker;
-declare global {
-    interface HTMLElementTagNameMap {
-        'skf-datepicker': SkfDatePicker;
-        'skf-datepicker-calendar': SkfDatePickerCalendar;
-    }
-}

package/dist/components/date-picker/datepicker.helpers.js

@@ -1,76 +0,0 @@
-import { is as c } from "../date-picker-input/datepicker-input.helpers.js";
-import { Temporal as e } from "@js-temporal/polyfill";
-function I(t, n, s) {
-  const o = (r) => Array.isArray(r) ? r : [r], f = o(t);
-  n = o(n);
-  const a = [];
-  for (const r of f) {
-    const { promise: i, resolve: m, reject: p } = Promise.withResolvers(), l = r.animate(n, {
-      fill: "forwards",
-      duration: 300,
-      iterations: 1,
-      ...s
-    });
-    l.onfinish = () => m("finished"), l.oncancel = () => p("canceled"), a.push(i);
-  }
-  return Promise.allSettled(a);
-}
-function P(t = e.Now.plainDateISO()) {
-  return t ?? (t = e.Now.plainDateISO()), t instanceof Date && (t = e.PlainDate.from(t.toISOString())), typeof t == "string" && (t = e.PlainDate.from(S(t, !0))), {
-    year: t.year,
-    month: t.month - 1,
-    // new Date is 0 based
-    day: t.day
-  };
-}
-function v(t, n, s = "days") {
-  console.assert(c(t, n).plainISO(), "Invalid dates passed to compareDates()"), typeof t == "string" && (t = e.PlainDate.from(t)), typeof n == "string" && (n = e.PlainDate.from(n)), console.assert(
-    c(t, n).plain(),
-    `Invalid date was sent to helper function compareDates(). Got ${JSON.stringify(t)} and ${JSON.stringify(n)} passed in`
-  );
-  const o = D(t, n, s);
-  return f(o);
-  function f(a) {
-    return Math.max(-1, Math.min(a, 1));
-  }
-}
-function D(t, n, s = "days") {
-  return typeof t == "string" && (t = e.PlainDate.from(t)), typeof n == "string" && (n = e.PlainDate.from(n)), console.assert(
-    t instanceof e.PlainDate && n instanceof e.PlainDate,
-    `Invalid date was sent to helper function timeBetween(). Got ${JSON.stringify(t)} and ${JSON.stringify(n)} passed in`
-  ), s === "months" ? n.until(t, { largestUnit: "months" }).months : s === "years" ? n.until(t, { largestUnit: "years" }).years : n.until(t, { largestUnit: "days" }).days;
-}
-function u(...t) {
-  if (t.length === 0)
-    throw new Error("At least one date must be provided");
-  const n = (i) => i instanceof Date, s = t.map((i) => n(i) ? i : new Date(i));
-  if (s.length === 1)
-    return s[0].toISOString().split("T")[0];
-  const [o, ...f] = s, a = u(...f), r = new Date(a);
-  return o < r ? o.toISOString().split("T")[0] : r.toISOString().split("T")[0];
-}
-function g(...t) {
-  if (t.length === 0)
-    throw new Error("At least one date must be provided");
-  const n = (i) => i instanceof Date, s = t.map((i) => n(i) ? i : new Date(i));
-  if (s.length === 1)
-    return s[0].toISOString().split("T")[0];
-  const [o, ...f] = s, a = g(...f), r = new Date(a);
-  return o > r ? o.toISOString().split("T")[0] : r.toISOString().split("T")[0];
-}
-function S(t, n = !1) {
-  t instanceof Date && (t = e.PlainDate.from(t.toISOString())), typeof t != "string" && (t = t.toString());
-  const s = /^\d{4}-\d{2}-\d{2}$/;
-  if (!s.test(t) && n)
-    throw new Error(`Invalid date format. Got ${t} passed in.`);
-  return s.test(t) ? t : "";
-}
-export {
-  S as assertISODate,
-  v as compareDates,
-  I as doAnimate,
-  u as earliestDate,
-  P as getDateParts,
-  g as latestDate,
-  D as timeBetween
-};