@skf-design-system/ui-components 1.0.2-beta.2 → 1.0.2-beta.4

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

@@ -152,9 +152,9 @@
           "values": []
         },
         {
-          "name": "size",
-          "description": "Displays an alternative size",
-          "values": [{ "name": "md" }, { "name": "sm" }]
+          "name": "small",
+          "description": "If true, renders a smaller version",
+          "values": []
         }
       ],
       "references": []
@@ -240,7 +240,7 @@
     },
     {
       "name": "skf-card",
-      "description": "The `<skf-card>` can be used to group related subjects in a container\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/021eed-card) for design principles\n---\n\n\n### **Slots:**\n - _default_ - The card's main content",
+      "description": "The `<skf-card>` can be used to group related subjects in a container\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/021eed-card) for design principles\n---\n\n\n### **Slots:**\n - _default_ - The card's main content\n\n### **CSS Properties:**\n - **--mod-card-bg-color** - Ability to set a custom background color _(default: undefined)_",
       "attributes": [
         {
           "name": "no-border",
@@ -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": "locale",
-          "description": "The locale to use for formatting the date",
+          "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": "date",
-          "description": "The date to display in the date picker",
+          "name": "selectable-from",
+          "description": "Earliest selectable date. (yyyy-mm-dd format)",
+          "values": []
+        },
+        {
+          "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": []
@@ -480,7 +566,7 @@
     },
     {
       "name": "skf-logo",
-      "description": "The `<skf-logo>` component is used to display the SKF logo.\n---\n\n\n### **CSS Properties:**\n - **--skf-logo-height** - The height of the logo _(default: undefined)_",
+      "description": "The `<skf-logo>` component is used to display the SKF logo.\n---\n\n\n### **CSS Properties:**\n - **--mod-logo-height** - The height of the logo _(default: undefined)_",
       "attributes": [
         {
           "name": "title",
@@ -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": []
     },
@@ -1047,7 +1133,7 @@
         {
           "name": "size",
           "description": "Specifies Tag size",
-          "values": [{ "name": "sm" }, { "name": "md" }]
+          "values": [{ "name": "Size" }]
         },
         {
           "name": "icon",
@@ -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

@@ -266,6 +266,7 @@
           "events": [
             {
               "name": "skf-alert-close",
+              "type": "CustomEvent",
               "description": "Fires when the close button is clicked"
             }
           ],
@@ -295,6 +296,7 @@
             "events": [
               {
                 "name": "skf-alert-close",
+                "type": "CustomEvent",
                 "description": "Fires when the close button is clicked"
               }
             ]
@@ -341,9 +343,9 @@
               "value": { "type": "string", "default": "'Breadcrumb'" }
             },
             {
-              "name": "size",
-              "description": "Displays an alternative size",
-              "value": { "type": "'md' | 'sm'", "default": "'md'" }
+              "name": "small",
+              "description": "If true, renders a smaller version",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "slots": [
@@ -360,9 +362,9 @@
                 "type": "string"
               },
               {
-                "name": "size",
-                "description": "Displays an alternative size",
-                "type": "'md' | 'sm'"
+                "name": "small",
+                "description": "If true, renders a smaller version",
+                "type": "boolean"
               }
             ],
             "events": [
@@ -545,7 +547,7 @@
         },
         {
           "name": "skf-card",
-          "description": "The `<skf-card>` can be used to group related subjects in a container\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/021eed-card) for design principles\n---\n\n\n### **Slots:**\n - _default_ - The card's main content",
+          "description": "The `<skf-card>` can be used to group related subjects in a container\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/021eed-card) for design principles\n---\n\n\n### **Slots:**\n - _default_ - The card's main content\n\n### **CSS Properties:**\n - **--mod-card-bg-color** - Ability to set a custom background color _(default: undefined)_",
           "doc-url": "",
           "attributes": [
             {
@@ -738,31 +740,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 +884,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": "selected-date-changed",
-              "description": "When a date is selected"
+              "name": "size",
+              "description": "Size of the input",
+              "value": { "type": "'sm' | 'md'", "default": "'md'" }
             },
             {
-              "name": "selected-date-range-changed",
-              "description": "When a range of dates is selected"
+              "name": "validate-on",
+              "description": "Sets validation start",
+              "value": {
+                "type": "'input' | 'change' | 'submit'",
+                "default": "'change'"
+              }
+            },
+            {
+              "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 +970,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": []
           }
         },
         {
@@ -1125,7 +1281,7 @@
         },
         {
           "name": "skf-logo",
-          "description": "The `<skf-logo>` component is used to display the SKF logo.\n---\n\n\n### **CSS Properties:**\n - **--skf-logo-height** - The height of the logo _(default: undefined)_",
+          "description": "The `<skf-logo>` component is used to display the SKF logo.\n---\n\n\n### **CSS Properties:**\n - **--mod-logo-height** - The height of the logo _(default: undefined)_",
           "doc-url": "",
           "attributes": [
             {
@@ -1901,10 +2057,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 +2066,7 @@
           "js": {
             "properties": [
               { "name": "href", "type": "string" },
-              { "name": "icon", "type": "SkfLink['icon'] | undefined" }
+              { "name": "icon", "type": "Icon | undefined" }
             ],
             "events": []
           }
@@ -2283,7 +2436,7 @@
             {
               "name": "size",
               "description": "Specifies Tag size",
-              "value": { "type": "'sm' | 'md'", "default": "'md'" }
+              "value": { "type": "Size", "default": "'md'" }
             },
             {
               "name": "icon",
@@ -2310,7 +2463,7 @@
               {
                 "name": "size",
                 "description": "Specifies Tag size",
-                "type": "'sm' | 'md'"
+                "type": "Size"
               },
               {
                 "name": "icon",
@@ -2898,8 +3051,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 +3157,7 @@
                 "type": "string"
               },
               { "name": "selected", "type": "boolean" },
-              { "name": "variant", "type": "SkfTabGroup['variant']" },
+              { "name": "variant", "type": "SkfTabs['variant']" },
               { "name": "role", "type": "string" }
             ],
             "events": [