@skf-design-system/ui-components 1.0.2-beta.6 → 1.0.2-beta.7

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

@@ -45,7 +45,7 @@ import type { SkfTab, CustomEvent } from "../../components/tab/tab.component.js"
 import type { SkfTextArea } from "../../components/textarea/textarea.component.js";
 import type { SkfToastWrapper } from "../../components/toast-wrapper/toast-wrapper.component.js";
 import type { SkfToast } from "../../components/toast/toast.component.js";
-import type { SkfTooltip } from "../../components/tooltip/tooltip.component.js";
+import type { SkfTooltip, CustomEvent } from "../../components/tooltip/tooltip.component.js";
 
 type SkfIconProps = {
   /** Sets the color of the icon */
@@ -92,10 +92,10 @@ type SkfAccordionProps = {
 };
 
 type SkfAlertProps = {
-  /** Close button aria-label */
-  "button-label"?: SkfAlert["buttonLabel"];
   /** If defined, displays leading icon */
   icon?: SkfAlert["icon"];
+  /** Sets the internal language of the component */
+  lang?: SkfAlert["lang"];
   /** If true, renders with an close button and sets aria-role to `status` */
   persistent?: SkfAlert["persistent"];
   /** If defined, gives the supplied appearance */
@@ -123,8 +123,6 @@ type SkfBreadcrumbProps = {
 };
 
 type SkfLoaderProps = {
-  /** Defines the aria-label */
-  "aria-label"?: SkfLoader["ariaLabel"];
   /** If true, inverts the color (to be used on colored backgrounds) */
   invert?: SkfLoader["invert"];
   /** Defines the size of the loader */
@@ -181,10 +179,10 @@ type SkfCheckboxProps = {
   indeterminate?: SkfCheckbox["indeterminate"];
   /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
   label?: SkfCheckbox["label"];
+  /** Sets the internal language of the component */
+  lang?: SkfCheckbox["lang"];
   /** If defined, adds name to the input-element */
   name?: SkfCheckbox["name"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfCheckbox["requiredLabel"];
   /** If defined, styles checkbox using provided severity */
   severity?: SkfCheckbox["severity"];
   /** If true, displays valid state after interaction */
@@ -205,6 +203,8 @@ 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"];
   /**  */
@@ -232,6 +232,8 @@ type SkfDatepickerProps = {
   id?: SkfDatepicker["id"];
   /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
   label?: SkfDatepicker["label"];
+  /** Sets the internal language of the component */
+  lang?: SkfDatepicker["lang"];
   /** If true, hides the label visually */
   "hide-label"?: SkfDatepicker["hideLabel"];
   /** If defined, displays informational text below the field */
@@ -246,8 +248,6 @@ type SkfDatepickerProps = {
   range?: SkfDatepicker["range"];
   /** If true, makes the element not mutable, meaning the user can not edit the control */
   readonly?: SkfDatepicker["readonly"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfDatepicker["requiredLabel"];
   /** Earliest selectable date. (yyyy-mm-dd format) */
   "selectable-from"?: SkfDatepicker["selectableFrom"];
   /** Latest selectable date. (yyyy-mm-dd format) */
@@ -272,12 +272,12 @@ type SkfHeadingProps = {
 };
 
 type SkfDialogProps = {
-  /** If defined, sets the aria-label for the close button */
-  "close-button-aria-label"?: SkfDialog["closeButtonAriaLabel"];
   /** Title for the modal/dialog */
   heading?: SkfDialog["heading"];
   /** If true, makes the dialog stretch edge to edge on screen */
   fullscreen?: SkfDialog["fullscreen"];
+  /** Sets the internal language of the component */
+  lang?: SkfDialog["lang"];
   /** If true, removes the close button */
   "no-close-button"?: SkfDialog["noCloseButton"];
   /** If defined, removes the inner padding */
@@ -303,10 +303,10 @@ type SkfDividerProps = {
 };
 
 type SkfDrawerProps = {
-  /** If defined, sets the aria-label for the close button */
-  "close-button-aria-label"?: SkfDrawer["closeButtonAriaLabel"];
   /** Heading for the Drawer */
   heading?: SkfDrawer["heading"];
+  /** Sets the internal language of the component */
+  lang?: SkfDrawer["lang"];
   /** Sets the max-width */
   size?: SkfDrawer["size"];
   /** If true, Drawer is open */
@@ -367,6 +367,8 @@ type SkfNavItemProps = {
 };
 
 type SkfNavProps = {
+  /** Sets the internal language of the component */
+  lang?: SkfNav["lang"];
   /** If true, the navigation will be displayed vertically */
   vertical?: SkfNav["vertical"];
 };
@@ -374,8 +376,8 @@ type SkfNavProps = {
 type SkfHeaderProps = {
   /** If true, sets header to display in compact mode only (hanburger menu and drawer) */
   compact?: SkfHeader["compact"];
-  /** If defined, sets the aria-label for the hamburger button */
-  "hamburger-aria-label"?: SkfHeader["hamburgerAriaLabel"];
+  /** Sets the internal language of the component */
+  lang?: SkfHeader["lang"];
   /** If defined, sets the app or site's name */
   "site-name"?: SkfHeader["siteName"];
   /** If defined, sets the site's base-url for the "logo-link" */
@@ -390,12 +392,6 @@ 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"];
-  /** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */
-  "button-aria-label-clear"?: SkfInput["buttonAriaLabelClear"];
-  /** Custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
-  "button-aria-label-hide"?: SkfInput["buttonAriaLabelHide"];
-  /** Custom aria-label for the visibility button **Notice!** Only applicable to type=password. */
-  "button-aria-label-show"?: SkfInput["buttonAriaLabelShow"];
   /** 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 */
@@ -409,6 +405,8 @@ type SkfInputProps = {
   inputmode?: SkfInput["inputmode"];
   /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
   label?: SkfInput["label"];
+  /** Sets the internal language of the component */
+  lang?: SkfInput["lang"];
   /** If defined, displays a prefix/adornment before the input-element */
   leading?: SkfInput["leading"];
   /** If defined, sets the maximum value to accept for this input */
@@ -427,8 +425,6 @@ type SkfInputProps = {
   placeholder?: SkfInput["placeholder"];
   /** If true, makes the element not mutable, meaning the user can not edit the control */
   readonly?: SkfInput["readonly"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfInput["requiredLabel"];
   /** If defined, displays provided severity state */
   severity?: SkfInput["severity"];
   /** If true, displays valid state after interaction */
@@ -483,7 +479,10 @@ type SkfMenuProps = {
   placement?: SkfMenu["undefined"];
   /** The id of the element the menu will be anchored to */
   anchor?: SkfMenu["undefined"];
-
+  /** Method that opens the menu */
+  "open()"?: SkfMenu["open()"];
+  /** Method that closes the menu */
+  "close()"?: SkfMenu["close()"];
   /** Fired when the menu is opened */
   "onskf-opened"?: (e: CustomEvent<CustomEvent>) => void;
   /** Fired when the menu is closed */
@@ -493,16 +492,19 @@ type SkfMenuProps = {
 type SkfPopoverProps = {
   /** The placement of the popover */
   placement?: SkfPopover["undefined"];
-  /** The id of the element the menu will be anchored to */
+  /** The id of the element the popover will be anchored to */
   anchor?: SkfPopover["undefined"];
   /** If defined, sets a custom offset for the popover */
   offset?: SkfPopover["offset"];
   /** If true, hides the arrow */
   hideArrow?: SkfPopover["hideArrow"];
-
-  /** Fired when the menu is opened */
+  /** Method that opens the popover */
+  "open()"?: SkfPopover["open()"];
+  /** Method that closes the popover */
+  "close()"?: SkfPopover["close()"];
+  /** Fired when the popover is opened */
   "onskf-opened"?: (e: CustomEvent<CustomEvent>) => void;
-  /** Fired when the menu is closed */
+  /** Fired when the popover is closed */
   "onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
@@ -528,10 +530,10 @@ type SkfRadioProps = {
   "custom-invalid"?: SkfRadio["customInvalid"];
   /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
   label?: SkfRadio["label"];
+  /** Sets the internal language of the component */
+  lang?: SkfRadio["lang"];
   /** If defined, adds name to the input-element */
   name?: SkfRadio["name"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfRadio["requiredLabel"];
   /** Size of the Radio */
   size?: SkfRadio["size"];
   /** If defined, displays provided severity state */
@@ -576,6 +578,8 @@ type SkfTagProps = {
   icon?: SkfTag["icon"];
   /** If defined, gives the supplied appearance */
   color?: SkfTag["color"];
+  /** Sets the internal language of the component */
+  lang?: SkfTag["lang"];
   /** If true, adds trailing button to remove tag */
   removable?: SkfTag["removable"];
   /** If defined, accepts a function that runs on click */
@@ -601,6 +605,8 @@ type SkfSelectProps = {
   hint?: SkfSelect["hint"];
   /** If defined, displays provided label */
   label?: SkfSelect["label"];
+  /** Sets the internal language of the component */
+  lang?: SkfSelect["lang"];
   /** If defined, limits the number of selectable options */
   max?: SkfSelect["max"];
   /** If defined, sets the minimum number of required options */
@@ -609,8 +615,6 @@ type SkfSelectProps = {
   multiple?: SkfSelect["multiple"];
   /** If defined, set name of the component */
   name?: SkfSelect["name"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfSelect["requiredLabel"];
   /** If defined, displays provided severity state */
   severity?: SkfSelect["severity"];
   /** If true, displays valid state after interaction */
@@ -621,7 +625,7 @@ type SkfSelectProps = {
   selectedValues?: SkfSelect["selectedValues"];
   /** A readonly property that returns the selected slot(s) text content in a array */
   selectedOptionsText?: SkfSelect["selectedOptionsText"];
-  /** Read only, returns the selected value. (if multiple: in a comma separated string) */
+  /** Returns the selected value. (if multiple: in a comma separated string). If set will default set corresponding option. */
   value?: SkfSelect["value"];
   /**  */
   _selectedOptions?: SkfSelect["_selectedOptions"];
@@ -635,6 +639,8 @@ type SkfSelectProps = {
   "onskf-select-dropdown"?: (e: CustomEvent<CustomEvent>) => void;
   /** {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled */
   "onskf-select-option-select"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fires when the calendar view is updated */
+  "onskf-update-calendar-view"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 type SkfSelectOptionProps = {
@@ -648,7 +654,7 @@ type SkfSelectOptionProps = {
   selected?: SkfSelectOption["selected"];
   /** If defined, sets a short label */
   "short-label"?: SkfSelectOption["shortLabel"];
-  /** Returns or sets the tags value. If value is omitted, defaults to the tags text. */
+  /** Returns or sets the option value. If value is omitted, defaults to the tags slotted text. */
   value?: SkfSelectOption["value"];
   /** The option's label text (equivalent to the tags textContent) */
   text?: SkfSelectOption["text"];
@@ -694,10 +700,10 @@ type SkfSwitchProps = {
   "hide-label"?: SkfSwitch["hideLabel"];
   /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
   label?: SkfSwitch["label"];
+  /** Sets the internal language of the component */
+  lang?: SkfSwitch["lang"];
   /** If defined, adds name to the input-element */
   name?: SkfSwitch["name"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfSwitch["requiredLabel"];
   /** Size of the Switch */
   size?: SkfSwitch["size"];
   /** The current value of the input field */
@@ -754,6 +760,8 @@ type SkfTextAreaProps = {
   hint?: SkfTextArea["hint"];
   /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
   label?: SkfTextArea["label"];
+  /** Sets the internal language of the component */
+  lang?: SkfTextArea["lang"];
   /** If defined, adds name to the input-element */
   name?: SkfTextArea["name"];
   /** If defined, sets the maximum character length to accept for this input */
@@ -764,8 +772,6 @@ type SkfTextAreaProps = {
   placeholder?: SkfTextArea["placeholder"];
   /** If true, makes the element not mutable, meaning the user can not edit the control */
   readonly?: SkfTextArea["readonly"];
-  /** If defined, renders an alternative A11y text for the asterisk */
-  "required-label"?: SkfTextArea["requiredLabel"];
   /** If defined, sets the rows of the textarea */
   rows?: SkfTextArea["rows"];
   /** If defined, displays provided severity state */
@@ -816,10 +822,14 @@ type SkfTooltipProps = {
   placement?: SkfTooltip["placement"];
   /**  */
   variant?: SkfTooltip["variant"];
-  /** Fired when the dropdown is opened */
-  "onskf-opened"?: (e: CustomEvent<never>) => void;
-  /** Fired when the dropdown is closed */
-  "onskf-closed"?: (e: CustomEvent<never>) => void;
+  /** Method that opens the tooltip */
+  "open()"?: SkfTooltip["open()"];
+  /** Method that closes the tooltip */
+  "close()"?: SkfTooltip["close()"];
+  /** Fired when the tooltip is opened */
+  "onskf-opened"?: (e: CustomEvent<CustomEvent>) => void;
+  /** Fired when the tooltip is closed */
+  "onskf-closed"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
 export type CustomElements = {
@@ -1126,7 +1136,7 @@ export type CustomElements = {
    * - **skf-closed** - Fired when the menu is closed
    *
    * ### **Slots:**
-   *  - _default_ - The menu popover content
+   *  - _default_ - The menu content
    */
   "skf-menu": DefineComponent<SkfMenuProps>;
 
@@ -1138,8 +1148,8 @@ export type CustomElements = {
    *
    *
    * ### **Events:**
-   *  - **skf-opened** - Fired when the menu is opened
-   * - **skf-closed** - Fired when the menu is closed
+   *  - **skf-opened** - Fired when the popover is opened
+   * - **skf-closed** - Fired when the popover is closed
    *
    * ### **Slots:**
    *  - _default_ - The popover content
@@ -1226,6 +1236,7 @@ export type CustomElements = {
    * - **reset** - Fired when the form is reset
    * - **skf-select-dropdown** - {detail: {expanded: boolean}} Fired when the select dropdown is toggled
    * - **skf-select-option-select** - {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled
+   * - **skf-update-calendar-view** - Fires when the calendar view is updated
    *
    * ### **Slots:**
    *  - _default_ - The select's placeholder content
@@ -1234,6 +1245,7 @@ export type CustomElements = {
 
   /**
    * The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.
+   * It represents an individual option in a select dropdown.
    * ---
    *
    *
@@ -1359,8 +1371,8 @@ export type CustomElements = {
    *
    *
    * ### **Events:**
-   *  - **skf-opened** - Fired when the dropdown is opened
-   * - **skf-closed** - Fired when the dropdown is closed
+   *  - **skf-opened** - Fired when the tooltip is opened
+   * - **skf-closed** - Fired when the tooltip is closed
    *
    * ### **Slots:**
    *  - _default_ - The tooltip popover content

package/dist/utilities/localize.d.ts

@@ -0,0 +1,28 @@
+import type { Translation as DefaultTranslation } from '@shoelace-style/localize';
+import { LocalizeController as DefaultLocalizationController } from '@shoelace-style/localize';
+import * as translations from '../translations/index.js';
+export declare class LocalizeController extends DefaultLocalizationController<Translation> {
+}
+export { registerTranslation } from '@shoelace-style/localize';
+export interface Translation extends DefaultTranslation {
+    $code: string;
+    $name: string;
+    $dir: 'ltr' | 'rtl';
+    choose: string;
+    clearEntry: string;
+    close: string;
+    hidePassword: string;
+    itemsSelected: (count: number) => string;
+    loading: string;
+    mainNavigation: string;
+    nextMonth: string;
+    nextYear: string;
+    previousMonth: string;
+    previousYear: string;
+    required: string;
+    selectedDay: string;
+    showMenu: string;
+    showPassword: string;
+    today: string;
+}
+export type Language = keyof typeof translations;

package/dist/utilities/localize.js

@@ -0,0 +1,13 @@
+import { LocalizeController as r, registerTranslation as o } from "@shoelace-style/localize";
+import { registerTranslation as z } from "@shoelace-style/localize";
+import t from "../translations/en.js";
+import a from "../translations/es.js";
+import i from "../translations/pt.js";
+import l from "../translations/sv.js";
+class c extends r {
+}
+o(t, a, i, l);
+export {
+  c as LocalizeController,
+  z as registerTranslation
+};