@skf-design-system/ui-components 1.0.2-beta.10 → 1.0.2-beta.12

package/dist/custom-elements.json

@@ -1650,19 +1650,6 @@
               "attribute": "invalid-dates",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "lang",
-              "type": {
-                "text": "Language"
-              },
-              "default": "'en'",
-              "description": "Sets the internal language of the component",
-              "attribute": "lang",
-              "expandedType": {
-                "text": "'en' | 'es' | 'pt' | 'sv'"
-              }
-            },
             {
               "kind": "field",
               "name": "locale",
@@ -1810,18 +1797,6 @@
               "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
               "fieldName": "invalidDates"
             },
-            {
-              "name": "lang",
-              "type": {
-                "text": "Language"
-              },
-              "default": "'en'",
-              "description": "Sets the internal language of the component",
-              "fieldName": "lang",
-              "expandedType": {
-                "text": "'en' | 'es' | 'pt' | 'sv'"
-              }
-            },
             {
               "name": "locale",
               "type": {
@@ -3381,6 +3356,13 @@
               "type": {
                 "text": "_handleAsChange() => void"
               }
+            },
+            {
+              "kind": "method",
+              "name": "_handleDisabledChange",
+              "type": {
+                "text": "_handleDisabledChange() => void"
+              }
             }
           ],
           "events": [
@@ -3871,6 +3853,15 @@
               "description": "Indicates whether the value of the control can be automatically completed by the browser. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.",
               "attribute": "autocomplete"
             },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "autofocus"
+            },
             {
               "kind": "field",
               "name": "customInvalid",
@@ -4087,6 +4078,27 @@
               "name": "value",
               "description": "The current value of the input field",
               "attribute": "value"
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "type": {
+                "text": "focus() => void"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "blur",
+              "type": {
+                "text": "blur() => void"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "select",
+              "type": {
+                "text": "select() => void"
+              }
             }
           ],
           "events": [
@@ -4130,6 +4142,14 @@
               "description": "Indicates whether the value of the control can be automatically completed by the browser. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.",
               "fieldName": "autocomplete"
             },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "autofocus"
+            },
             {
               "name": "custom-invalid",
               "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
@@ -4550,6 +4570,17 @@
               "type": {
                 "text": "_handleAsChange() => void"
               }
+            },
+            {
+              "kind": "method",
+              "name": "_handleDisabledChange",
+              "inheritedFrom": {
+                "name": "SkfLink",
+                "module": "src/components/link/link.component.ts"
+              },
+              "type": {
+                "text": "_handleDisabledChange() => void"
+              }
             }
           ],
           "superclass": {
@@ -5891,6 +5922,14 @@
               "description": "If defined, limits the number of selectable options",
               "attribute": "max"
             },
+            {
+              "kind": "field",
+              "name": "maxVisibleItems",
+              "type": {
+                "text": "number | undefined"
+              },
+              "attribute": "max-visible-items"
+            },
             {
               "kind": "field",
               "name": "min",
@@ -5956,17 +5995,18 @@
               "description": "Returns the selected value. (if multiple: in a comma separated string). If set will default set corresponding option."
             },
             {
-              "kind": "method",
-              "name": "_handleSizeUpdate",
+              "kind": "field",
+              "name": "desiredPopupHeight",
               "type": {
-                "text": "_handleSizeUpdate() => void"
-              }
+                "text": "number | undefined"
+              },
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleExpandedChange",
+              "name": "_handleSizeUpdate",
               "type": {
-                "text": "handleExpandedChange() => void"
+                "text": "_handleSizeUpdate() => void"
               }
             },
             {
@@ -6106,6 +6146,13 @@
               "description": "If defined, limits the number of selectable options",
               "fieldName": "max"
             },
+            {
+              "name": "max-visible-items",
+              "type": {
+                "text": "number | undefined"
+              },
+              "fieldName": "maxVisibleItems"
+            },
             {
               "name": "min",
               "type": {

package/dist/internal/base-classes/popover/popover.base.js

@@ -1,4 +1,4 @@
-import { flip as w, offset as E, arrow as $, computePosition as O } from "@floating-ui/dom";
+import { flip as w, offset as $, arrow as E, computePosition as O } from "@floating-ui/dom";
 import { SkfElement as C } from "../../components/skf-element.js";
 import { PopoverController as x } from "../../controllers/popover.controller.js";
 import { uuid as A } from "../../helpers/uuid.js";
@@ -21,7 +21,7 @@ const s = (p = class extends C {
       const o = t.newState === "open";
       this.isOpen = o, this.emit(o ? "skf-opened" : "skf-closed");
     }, this.handleToggleOpen = async () => {
-      this.$anchor && (this.isOpen ? (this.$popover.togglePopover(!0), this.$popover.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 250, fill: "forwards" })) : (await this.$popover.animate([{ opacity: 0 }], { duration: 150, fill: "forwards" }).finished, this.$popover.togglePopover(this.isOpen)));
+      this.$anchor && (this.isOpen ? (this.$popover.togglePopover(!0), this.$popover.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 250, fill: "forwards" })) : (await this.$popover.animate([{ opacity: 0 }], { duration: 150, fill: "forwards" }).finished, this.$popover && this.$popover.togglePopover(this.isOpen)));
     }, this.handleAnchorChange = async () => {
       if (!this.anchor) return;
       await this.popoverController.stop(), this.$anchor && this.removeEventListeners();
@@ -29,8 +29,8 @@ const s = (p = class extends C {
       this.$anchor = t.getElementById(this.anchor), this.$anchor && (this.addEventListeners(this.$anchor), this.popoverController.start());
     }, this.reposition = async () => {
       if (!this.$anchor) return;
-      const t = [w(), E(this.offset)];
-      this.arrow && t.push($({ element: this.$arrow }));
+      const t = [w(), $(this.offset)];
+      this.arrow && t.push(E({ element: this.$arrow }));
       const { x: o, y: i, middlewareData: e } = await O(this.$anchor, this.$popover, {
         placement: this.placement,
         middleware: t,

package/dist/types/jsx/custom-element-jsx.d.ts

@@ -426,8 +426,6 @@ export type SkfDatepickerCalendarProps = {
   "invalid-dates"?: SkfDatepickerCalendar['invalidDates'];
   /** A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. */
   "invalidDates"?: SkfDatepickerCalendar['invalidDates'];
-  /** Sets the internal language of the component */
-  "lang"?: SkfDatepickerCalendar['lang'];
   /**  */
   "locale"?: SkfDatepickerCalendar['locale'];
   /**  */
@@ -674,6 +672,8 @@ export type SkfInputProps = {
   /** Indicates whether the value of the control can be automatically completed by the browser. See
 [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details. */
   "autocomplete"?: SkfInput['autocomplete'];
+  /**  */
+  "autofocus"?: SkfInput['autofocus'];
   /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
   "custom-invalid"?: SkfInput['customInvalid'];
   /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
@@ -945,6 +945,10 @@ export type SkfSelectProps = {
   "lang"?: SkfSelect['lang'];
   /** If defined, limits the number of selectable options */
   "max"?: SkfSelect['max'];
+  /**  */
+  "max-visible-items"?: SkfSelect['maxVisibleItems'];
+  /**  */
+  "maxVisibleItems"?: SkfSelect['maxVisibleItems'];
   /** If defined, sets the minimum number of required options */
   "min"?: SkfSelect['min'];
   /** If true, allows for multiple options to be selected */
@@ -1509,7 +1513,6 @@ export type SkfTooltipProps = {
  * - `eventid`: undefined 
  * - `firstDayOfWeek`: undefined 
  * - `invalid-dates`/`invalidDates`: A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. 
- * - `lang`: Sets the internal language of the component 
  * - `locale`: undefined 
  * - `range`: undefined 
  * - `selectable-from`/`selectableFrom`: Earliest selectable date. (yyyy-mm-dd format) 
@@ -1747,6 +1750,7 @@ export type SkfTooltipProps = {
  * Methods that can be called to access component functionality.
  * 
  * - `_handleAsChange() => void`: undefined
+ * - `_handleDisabledChange() => void`: undefined
   */
     "skf-link": Partial<SkfLinkProps & BaseProps<SkfLink> & BaseEvents>;
 
@@ -1824,6 +1828,7 @@ export type SkfTooltipProps = {
  * - `required`/`undefined`: If true, value is required or must be checked for the form to be submittable 
  * - `autocomplete`: Indicates whether the value of the control can be automatically completed by the browser. See
  * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details. 
+ * - `autofocus`: undefined 
  * - `custom-invalid`/`customInvalid`: If defined, forces component to invalid state until removed. Its value is used as hint text. 
  * - `debug`: If true, outputs helping hints in console 
  * - `hide-label`/`hideLabel`: If true, hides the label visually 
@@ -1861,6 +1866,14 @@ export type SkfTooltipProps = {
  * Areas where markup can be added to the component.
  * 
  * - `(default)`: The Inputs label. Alternatively, you can use the `label` attribute.
+ * 
+ * #### Methods
+ * 
+ * Methods that can be called to access component functionality.
+ * 
+ * - `focus() => void`: undefined
+ * - `blur() => void`: undefined
+ * - `select() => void`: undefined
   */
     "skf-input": Partial<SkfInputProps & BaseProps<SkfInput> & BaseEvents>;
 
@@ -1901,6 +1914,7 @@ export type SkfTooltipProps = {
  * Methods that can be called to access component functionality.
  * 
  * - `_handleAsChange() => void`: undefined
+ * - `_handleDisabledChange() => void`: undefined
   */
     "skf-menu-item": Partial<SkfMenuItemProps & BaseProps<SkfMenuItem> & BaseEvents>;
 
@@ -2126,6 +2140,7 @@ export type SkfTooltipProps = {
  * - `label`: If defined, displays provided label 
  * - `lang`: Sets the internal language of the component 
  * - `max`: If defined, limits the number of selectable options 
+ * - `max-visible-items`/`maxVisibleItems`: undefined 
  * - `min`: If defined, sets the minimum number of required options 
  * - `multiple`: If true, allows for multiple options to be selected 
  * - `name`: If defined, set name of the component 
@@ -2159,7 +2174,6 @@ export type SkfTooltipProps = {
  * Methods that can be called to access component functionality.
  * 
  * - `_handleSizeUpdate() => void`: undefined
- * - `handleExpandedChange() => void`: undefined
   */
     "skf-select": Partial<SkfSelectProps & BaseProps<SkfSelect> & BaseEvents>;
 

package/dist/types/vue/index.d.ts

@@ -203,8 +203,6 @@ type SkfDatepickerCalendarProps = {
   firstDayOfWeek?: SkfDatepickerCalendar["firstDayOfWeek"];
   /** A comma-separated list of dates (yyyy-mm-dd format) that are not selectable. */
   "invalid-dates"?: SkfDatepickerCalendar["invalidDates"];
-  /** Sets the internal language of the component */
-  lang?: SkfDatepickerCalendar["lang"];
   /**  */
   locale?: SkfDatepickerCalendar["locale"];
   /**  */
@@ -392,6 +390,8 @@ type SkfInputProps = {
   /** Indicates whether the value of the control can be automatically completed by the browser. See
 [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details. */
   autocomplete?: SkfInput["autocomplete"];
+  /**  */
+  autofocus?: SkfInput["autofocus"];
   /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
   "custom-invalid"?: SkfInput["customInvalid"];
   /** If true, outputs helping hints in console */
@@ -609,6 +609,8 @@ type SkfSelectProps = {
   lang?: SkfSelect["lang"];
   /** If defined, limits the number of selectable options */
   max?: SkfSelect["max"];
+  /**  */
+  "max-visible-items"?: SkfSelect["maxVisibleItems"];
   /** If defined, sets the minimum number of required options */
   min?: SkfSelect["min"];
   /** If true, allows for multiple options to be selected */

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

@@ -338,11 +338,6 @@
           "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
           "values": []
         },
-        {
-          "name": "lang",
-          "description": "Sets the internal language of the component",
-          "values": [{ "name": "Language" }]
-        },
         { "name": "locale", "values": [] },
         { "name": "range", "values": [] },
         {
@@ -720,6 +715,7 @@
           "description": "Indicates whether the value of the control can be automatically completed by the browser. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.",
           "values": [{ "name": "HTMLInputElement['autocomplete']" }]
         },
+        { "name": "autofocus", "values": [] },
         {
           "name": "custom-invalid",
           "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
@@ -1198,6 +1194,7 @@
           "description": "If defined, limits the number of selectable options",
           "values": []
         },
+        { "name": "max-visible-items", "values": [] },
         {
           "name": "min",
           "description": "If defined, sets the minimum number of required options",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@skf-design-system/ui-components",
-  "version": "1.0.2-beta.8",
+  "version": "1.0.2-beta",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -745,11 +745,6 @@
               "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
               "value": { "type": "string | undefined" }
             },
-            {
-              "name": "lang",
-              "description": "Sets the internal language of the component",
-              "value": { "type": "Language", "default": "'en'" }
-            },
             {
               "name": "locale",
               "value": { "type": "string", "default": "'en-CA'" }
@@ -790,11 +785,6 @@
                 "description": "A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.",
                 "type": "string | undefined"
               },
-              {
-                "name": "lang",
-                "description": "Sets the internal language of the component",
-                "type": "Language"
-              },
               { "name": "locale", "type": "string" },
               { "name": "range", "type": "boolean" },
               {
@@ -1583,6 +1573,10 @@
                 "type": "HTMLInputElement['autocomplete'] | undefined"
               }
             },
+            {
+              "name": "autofocus",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "custom-invalid",
               "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
@@ -1733,6 +1727,7 @@
                 "description": "Indicates whether the value of the control can be automatically completed by the browser. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.",
                 "type": "HTMLInputElement['autocomplete'] | undefined"
               },
+              { "name": "autofocus", "type": "boolean" },
               {
                 "name": "customInvalid",
                 "description": "If defined, forces component to invalid state until removed. Its value is used as hint text."
@@ -2559,6 +2554,10 @@
               "description": "If defined, limits the number of selectable options",
               "value": { "type": "number | undefined" }
             },
+            {
+              "name": "max-visible-items",
+              "value": { "type": "number | undefined" }
+            },
             {
               "name": "min",
               "description": "If defined, sets the minimum number of required options",
@@ -2674,6 +2673,7 @@
                 "description": "If defined, limits the number of selectable options",
                 "type": "number | undefined"
               },
+              { "name": "maxVisibleItems", "type": "number | undefined" },
               {
                 "name": "min",
                 "description": "If defined, sets the minimum number of required options",

package/package.json

@@ -35,7 +35,7 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.2-beta.10",
+  "version": "1.0.2-beta.12",
   "dependencies": {
     "@floating-ui/dom": "^1.7.1",
     "@js-temporal/polyfill": "^0.5.1",
@@ -44,6 +44,7 @@
     "lit": "^3.3.0"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.29.5",
     "@chromatic-com/storybook": "^4.0.1",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",