@skf-design-system/ui-components 0.0.1-beta.1

package/dist/components/collapse/collapse.component.d.ts

@@ -0,0 +1,37 @@
+import '@components/icon/icon.js';
+import { SkfElement } from '@internal/components/skf-element.js';
+import type { HeadingType } from '@internal/constants/heading.js';
+import type { CSSResultGroup } from 'lit';
+/**
+ * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
+ *
+ * See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229e2eb8a8dacf366dc3243) for design principles.
+ *
+ * @event {CustomEvent} skf-collapse-toggle - Event emitted when toggled
+ *
+ * @slot - Main content
+ *
+ * @tagname skf-collapse
+ */
+export declare class SkfCollapse extends SkfElement {
+    static styles: CSSResultGroup;
+    /** If true, will animate the expand/collapse state */
+    animated: boolean;
+    /** If true, will set the collapse to be expanded by default */
+    expanded: boolean;
+    /** Heading for the collapse */
+    heading?: string;
+    /** Controls which heading element will be rendered */
+    headingAs: Exclude<HeadingType, 'h1'>;
+    /** If true, renders the small version */
+    small: boolean;
+    /** If true, will truncate the heading in collapsed state */
+    truncate: boolean;
+    /** Class method as alternative to manipulate attribute */
+    setClose(): void;
+    /** Class method as alternative to manipulate attribute */
+    setOpen(): void;
+    /** @internal */
+    private _toggle;
+    render(): import("lit").TemplateResult;
+}

package/dist/components/collapse/collapse.d.ts

@@ -0,0 +1,8 @@
+import { SkfCollapse } from './collapse.component.js';
+export * from './collapse.component.js';
+export default SkfCollapse;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-collapse': SkfCollapse;
+    }
+}

package/dist/components/collapse/collapse.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/divider/divider.component.d.ts

@@ -0,0 +1,26 @@
+import { SkfElement } from '@internal/components/skf-element.js';
+import type { BorderColor } from '@skf-aurora/ui-assets';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information.
+ *
+ * @cssproperty --skf-divider-spacing - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical
+ * @cssproperty --skf-divider-inset - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical
+ *
+ * @tagname skf-divider
+ */
+export declare class SkfDivider extends SkfElement {
+    static styles: CSSResultGroup;
+    /** If provided, alters the Divider color */
+    /** @type { "emphasised" | "primary" | "secondary" | "tertiary" | "inverse" } */
+    color?: BorderColor;
+    /** If true, renders a div for presentational purpose instead of the semantic hr-element */
+    decorative?: boolean | undefined;
+    /** If true, renders the divider vertically */
+    vertical?: boolean | undefined;
+    /** @internal */
+    private renderDecorative;
+    /** @internal */
+    private renderDefault;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/divider/divider.d.ts

@@ -0,0 +1,8 @@
+import { SkfDivider } from './divider.component.js';
+export * from './divider.component.js';
+export default SkfDivider;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-divider': SkfDivider;
+    }
+}

package/dist/components/divider/divider.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/heading/heading.component.d.ts

@@ -0,0 +1,17 @@
+import { SkfElement } from '@internal/components/skf-element.js';
+import type { HeadingType } from '@internal/constants/heading.js';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>
+ * It extends the interface of native html `<h1>` to `<h4>` elements.
+ *
+ * @tagname skf-heading
+ */
+export declare class SkfHeading extends SkfElement {
+    static styles: CSSResultGroup;
+    /** Controls which heading element will be rendered. Should not be used to affect appearance. */
+    as: HeadingType;
+    /** If provided, changes the appearance of the heading */
+    styledAs?: HeadingType;
+    render(): import("lit").TemplateResult;
+}

package/dist/components/heading/heading.d.ts

@@ -0,0 +1,8 @@
+import { SkfHeading } from './heading.component.js';
+export * from './heading.component.js';
+export default SkfHeading;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-heading': SkfHeading;
+    }
+}

package/dist/components/heading/heading.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/icon/icon.component.d.ts

@@ -0,0 +1,28 @@
+import { SkfElement } from '@internal/components/skf-element.js';
+import { type Icon, type IconColor, type IconSize, type SeverityFgColor } from '@skf-aurora/ui-assets';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-icon>` component is used to clarify interface elements. When used, should always be paired with (possibly invisible) text
+ *
+ * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ *
+ * @tagname skf-icon
+ */
+export declare class SkfIcon extends SkfElement {
+    static styles: CSSResultGroup;
+    /** @internal */
+    private _rootId;
+    /** @type { "primary" | "inverse" | "emphasised" | "secondary" | "success" | "info" | "warning" | "error" | "alert" } */
+    color?: IconColor | SeverityFgColor;
+    /** If provided, adds an alternate description to use for assistive devices */
+    label?: string;
+    /** @type { "arrowDown" | "arrowDownUp" | "arrowLeft" | "arrowRight" | "arrowUp" | "article" | "artificialIntelligence" | "asset" | "attachment" | "bandCursor" | "bands" | "batteryEmpty" | "batteryFull" | "batteryLow" | "bearingFault" | "book" | "bulb" | "burger" | "cPM" | "calendar" | "calendarBooked" | "calendarEmpty" | "calendarNotBooked" | "calendarRecurring" | "caretDown" | "caretUp" | "caretUpDown" | "chat" | "check" | "checkCircle" | "checkSmall" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronUpDown" | "close" | "closeAllFaults" | "closeFault" | "closeSmall" | "columnGraph" | "comment" | "connection1" | "connection2" | "connection3" | "connection4" | "danger" | "defectFrequencies" | "defectFrequenciesAlternative" | "doubleChevronLeft" | "doubleChevronRight" | "download" | "draft" | "draftFilled" | "draftOutlined" | "dragNDrop" | "drop" | "duplicate" | "edit" | "emailFilled" | "emailOutlined" | "exclamation" | "eye" | "eyeHidden" | "eyeVisible" | "filter" | "forbidden" | "fullScreen" | "fullScreenExit" | "functionalLocation" | "harmonicCursor" | "heatmap" | "hierarchy" | "history" | "historyAlt" | "hourglassFramedFilled" | "hourglassFramedOutlined" | "hourglassOutlined" | "hz" | "iMX" | "image" | "infoCircleFilled" | "infoCircleOutlined" | "integration" | "kebab" | "link" | "listGroup" | "listItem" | "locationPin" | "lock" | "logOut" | "meatballs" | "microphone" | "minus" | "minusSmall" | "noData" | "o" | "openInNew" | "overlayBaseline" | "pDF" | "paper" | "pause" | "pieChart" | "pin" | "play" | "plus" | "powerOff" | "printer" | "proCollect" | "recAction" | "received" | "refresh" | "reorder" | "replace" | "reply" | "rewalkableRoute" | "routes" | "search" | "send" | "sensorA" | "sensorB" | "settings" | "sidebandCursor" | "singleCursor" | "spectrum" | "starFilled" | "starOutlined" | "statusCircle" | "stop" | "structuralVibration" | "sync" | "timewave" | "trash" | "trend" | "trendingUp" | "undo" | "unknownCircle" | "unknownDiamond" | "unlink" | "unlock" | "unscheduledAction" | "upload" | "user" | "viewFull" | "viewHorizontal" | "viewVertical" | "warning" | "warningCircle" | "warningDiamond" | "zoomIn" | "zoomOut" } */
+    name: Icon;
+    /** @type { "xs" | "sm" | "md" | "lg" } */
+    size?: IconSize;
+    /** @internal */
+    private renderDecorativeIcon;
+    /** @internal */
+    private renderInformativeIcon;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/icon/icon.d.ts

@@ -0,0 +1,8 @@
+import { SkfIcon } from './icon.component.js';
+export * from './icon.component.js';
+export default SkfIcon;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-icon': SkfIcon;
+    }
+}

package/dist/components/icon/icon.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/input/input.component.d.ts

@@ -0,0 +1,123 @@
+import '@components/icon/icon.js';
+import { FormBase } from '@internal/components/formBase.js';
+import '@internal/components/hint/hint';
+import type { FormFieldBaseProps } from '@internal/types/formField.js';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone.
+ *
+ * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/619e4125b3d2147c0c584b11) for design principles.
+ *
+ * @attribute {boolean} disabled - If true, sets disabled state
+ * @attribute {boolean} required - If true, value is required or must be checked for the form to be submittable
+ *
+ * @event change - Fires when the value of the input changes
+ * @event invalid - Fires when the input is invalid
+ *
+ * @slot Default -  Alternatively, you can use the `label` attribute
+ *
+ * @tagname skf-input
+ *
+ * Three undocumented but self explanatory boolean attributes change the validation
+ * behaviour: validate-on-input, validate-on-submit and native-validation
+ */
+export declare class SkfInput extends FormBase implements FormFieldBaseProps {
+    static styles: CSSResultGroup;
+    private customError;
+    /** If provided, renders a custom aria-label for the clear button **Notice!** Only applicable to type=search. */
+    buttonAriaLabelClear: string;
+    /** If provided, renders a custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
+    buttonAriaLabelHide: string;
+    /** If provided, renders a custom aria-label for the visibility button **Notice!** Only applicable to type=password. */
+    buttonAriaLabelShow: string;
+    /** If provided, forces component to invalid state until removed. Its value is used as hint text. */
+    set customInvalid(value: string | undefined);
+    get customInvalid(): string | undefined;
+    /** If provided, outputs helping hints in console */
+    debug: boolean;
+    /** If true, hides the label visually */
+    hideLabel: boolean;
+    /** If provided, displays informational text below the field */
+    hint?: string;
+    /** If provided, tells what keyboard to use if applicable */
+    inputmode: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    /** The input's label. Alternatively, you can use the `label` attribute. */
+    label?: string;
+    /** If provided, displays a prefix/adornment before the input-element */
+    leading?: string;
+    /** If provided, sets the maximum value to accept for this input */
+    max?: number | string;
+    /** If provided, sets the maximum character length to accept for this input */
+    maxLength?: number;
+    /** If provided, sets the minimum value to accept for this input */
+    min?: number | string;
+    /** If provided, sets the minimum character length to accept for this input */
+    minLength?: number;
+    /** If provided, adds name to the input-element */
+    name?: string;
+    /** If provided, adds name to the input-element */
+    pattern?: string;
+    /** If provided, displays placeholder text */
+    placeholder?: string;
+    /** If true, makes the element not mutable, meaning the user can not edit the control */
+    readonly?: boolean;
+    /** If provided, renders an alternative A11y text for the asterisk */
+    requiredLabel?: string;
+    /** If provided, displays provided severity state */
+    severity?: FormFieldBaseProps['severity'];
+    /** If provided, displays provided severity state */
+    showValid?: boolean;
+    /** If provided, displays an alternative size */
+    size?: 'sm' | 'md';
+    /** If provided, displays a suffix/adornment after the input-element */
+    trailing?: string;
+    /** If provided, changes the type of form control */
+    type?: Exclude<FormFieldBaseProps['type'], 'checkbox' | 'radio'>;
+    /** If provided, sets validation start, "input", "change" or "submit" */
+    validateOn?: 'input' | 'change' | 'submit';
+    /** The current value of the input field  */
+    value: string;
+    /** @internal */
+    /** true if the internal state is invalid  */
+    invalid: boolean;
+    /** @internal */
+    private _buttonDown;
+    /** @internal */
+    $input: HTMLInputElement;
+    /** @internal */
+    private _numberController;
+    /** @internal */
+    private _passwordController;
+    constructor();
+    protected firstUpdated(): void;
+    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /** @internal */
+    _handleInput: () => void;
+    /** @internal */
+    _resetValue: (event: Event) => void;
+    /** @internal */
+    _handlePressStart: (event: MouseEvent) => void;
+    /** @internal */
+    _handlePressEnd: () => void;
+    /** @internal */
+    validateInput(): void;
+    /**
+     * Number
+     */
+    /** @internal */
+    private _renderNumberButton;
+    /**
+     * Password
+     */
+    /** @internal */
+    private _renderPasswordButton;
+    /**
+     * Search
+     */
+    /** @internal */
+    private _renderSearchButton;
+    /** @internal */
+    private _onBlur;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/input/input.controllers.d.ts

@@ -0,0 +1,34 @@
+import type { Icon } from '@skf-aurora/ui-assets';
+import type { ReactiveController } from 'lit';
+import type { SkfInput } from './input.component.js';
+type InputControllerHost = SkfInput;
+/**
+ * Number
+ */
+export type IncrementDecrement = 'inc' | 'dec';
+export declare class InputNumberController implements ReactiveController {
+    host: InputControllerHost;
+    private _longPressId?;
+    private _repeaterId?;
+    private _inputElement?;
+    constructor(host: InputControllerHost);
+    hostUpdated(): void;
+    handleActionBtnClick: (_: Event, type: IncrementDecrement) => void;
+    handleActionBtnLongPressStart: (e: Event) => void;
+    handleActionBtnLongPressEnd: () => void;
+}
+/**
+ * password
+ */
+export declare class InputPasswordController implements ReactiveController {
+    host: InputControllerHost;
+    _inputElement?: HTMLInputElement;
+    _icon: Extract<Icon, 'visibility' | 'visibilityOff'>;
+    _buttonAriaLabel: string;
+    _type: Extract<SkfInput['type'], 'password' | 'text'>;
+    constructor(host: InputControllerHost);
+    hostUpdated(): void;
+    handleFieldLoaded: () => void;
+    toggleVisibility: () => void;
+}
+export {};

package/dist/components/input/input.d.ts

@@ -0,0 +1,8 @@
+import { SkfInput } from './input.component.js';
+export * from './input.component.js';
+export default SkfInput;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-input': SkfInput;
+    }
+}

package/dist/components/input/input.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

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

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

package/dist/components/link/link.component.d.ts

@@ -0,0 +1,55 @@
+import type { SkfIcon } from '@components/icon/icon.component.js';
+import '@components/icon/icon.js';
+import { SkfElement } from '@internal/components/skf-element.js';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-link>` can be used as either a regular link or a link styled semantic button
+ *
+ * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/folder/619626129069cd5f9510528f) for design principles
+ *
+ * @property {function} onClick - If provided, custom function triggered by click where the second return parameter enables custom routing.
+ *
+ * @slot {string} - The links' main content
+ *
+ * @tagname skf-link
+ */
+export declare class SkfLink extends SkfElement {
+    static styles: CSSResultGroup;
+    private _onClick?;
+    /** Specifies semantic element to render - @default "a" */
+    as: 'button' | 'a';
+    /** @default "primary" */
+    color: 'primary' | 'inverse';
+    /** If true, disables the link */
+    disabled?: boolean;
+    /** If provided, downloads the url */
+    download?: string;
+    /** If provided, loads url on click  */
+    href?: string;
+    /** If provided, renders an icon before or after the text @type { "arrowDown" | "arrowDownUp" | "arrowLeft" | "arrowRight" | "arrowUp" | "article" | "artificialIntelligence" | "asset" | "attachment" | "bandCursor" | "bands" | "batteryEmpty" | "batteryFull" | "batteryLow" | "bearingFault" | "book" | "bulb" | "burger" | "cPM" | "calendar" | "calendarBooked" | "calendarEmpty" | "calendarNotBooked" | "calendarRecurring" | "caretDown" | "caretUp" | "caretUpDown" | "chat" | "check" | "checkCircle" | "checkSmall" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronUpDown" | "close" | "closeAllFaults" | "closeFault" | "closeSmall" | "columnGraph" | "comment" | "connection1" | "connection2" | "connection3" | "connection4" | "danger" | "defectFrequencies" | "defectFrequenciesAlternative" | "doubleChevronLeft" | "doubleChevronRight" | "download" | "draft" | "draftFilled" | "draftOutlined" | "dragNDrop" | "drop" | "duplicate" | "edit" | "emailFilled" | "emailOutlined" | "exclamation" | "eye" | "eyeHidden" | "eyeVisible" | "filter" | "forbidden" | "fullScreen" | "fullScreenExit" | "functionalLocation" | "harmonicCursor" | "heatmap" | "hierarchy" | "history" | "historyAlt" | "hourglassFramedFilled" | "hourglassFramedOutlined" | "hourglassOutlined" | "hz" | "iMX" | "image" | "infoCircleFilled" | "infoCircleOutlined" | "integration" | "kebab" | "link" | "listGroup" | "listItem" | "locationPin" | "lock" | "logOut" | "meatballs" | "microphone" | "minus" | "minusSmall" | "noData" | "o" | "openInNew" | "overlayBaseline" | "pDF" | "paper" | "pause" | "pieChart" | "pin" | "play" | "plus" | "powerOff" | "printer" | "proCollect" | "recAction" | "received" | "refresh" | "reorder" | "replace" | "reply" | "rewalkableRoute" | "routes" | "search" | "send" | "sensorA" | "sensorB" | "settings" | "sidebandCursor" | "singleCursor" | "spectrum" | "starFilled" | "starOutlined" | "statusCircle" | "stop" | "structuralVibration" | "sync" | "timewave" | "trash" | "trend" | "trendingUp" | "undo" | "unknownCircle" | "unknownDiamond" | "unlink" | "unlock" | "unscheduledAction" | "upload" | "user" | "viewFull" | "viewHorizontal" | "viewVertical" | "warning" | "warningCircle" | "warningDiamond" | "zoomIn" | "zoomOut" } */
+    icon?: SkfIcon['name'];
+    /** Position of the icon in relation to the text - @default "left" */
+    iconPlacement: 'left' | 'right';
+    /** Specifies the relationship of the target object to the link object - @default "noreferrer noopener" */
+    rel: string;
+    /** If provided, used on conjunction with onClick property, second argument */
+    route?: string;
+    /** If true, fills the parents horizontal axis */
+    stretch?: boolean;
+    /** If provided, specifies where to open the linked document */
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    /** Type of button - @default "button" */
+    type: 'button' | 'submit' | 'reset';
+    /** If provided, accepts a function that runs on click. Forwards optional route as second argument. */
+    set onClick(onClickFn: ((event: Event, route?: string) => void) | undefined);
+    get onClick(): ((event: Event, route?: string) => void) | undefined;
+    connectedCallback(): void;
+    /** @internal */
+    private _assertValidOnClick;
+    /** @internal */
+    /** retargets click event to host */
+    private _preprocessOnClick;
+    /** @internal */
+    private _renderIcon;
+    render(): import("lit").TemplateResult;
+}

package/dist/components/link/link.d.ts

@@ -0,0 +1,8 @@
+import { SkfLink } from './link.component.js';
+export * from './link.component.js';
+export default SkfLink;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-link': SkfLink;
+    }
+}

package/dist/components/link/link.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/loader/loader.component.d.ts

@@ -0,0 +1,21 @@
+import { SkfElement } from '@internal/components/skf-element.js';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities.
+ *
+ * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/619e4125b3d2147c0c584b11) for design principles.
+ *
+ * @tagname skf-loader
+ */
+export declare class SkfLoader extends SkfElement {
+    static styles: CSSResultGroup;
+    ariaLabel: string;
+    /** If true, inverts the color (to be used on colored backgrounds) */
+    invert: boolean;
+    /** If provided, displays an alternative size */
+    size?: 'md' | 'sm';
+    connectedCallback(): void;
+    /** @internal */
+    private getCircle;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/loader/loader.d.ts

@@ -0,0 +1,8 @@
+import { SkfLoader } from './loader.component.js';
+export * from './loader.component.js';
+export default SkfLoader;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-loader': SkfLoader;
+    }
+}

package/dist/components/loader/loader.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/logo/logo.component.d.ts

@@ -0,0 +1,19 @@
+import { SkfElement } from '@internal/components/skf-element.js';
+import type { Logo } from '@skf-aurora/ui-assets';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-logo>` component is used to display the SKF logo.
+ *
+ * @cssproperty --skf-logo-height - The height of the logo
+ *
+ * @tagname skf-logo
+ */
+export declare class SkfLogo extends SkfElement {
+    static styles: CSSResultGroup;
+    /** The title of the logo */
+    title: string;
+    /** If provided, sets color of the logo */
+    /** @type { "primary" | "secondary" | "inverse" } */
+    color?: Logo;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/logo/logo.d.ts

@@ -0,0 +1,8 @@
+import { SkfLogo } from './logo.component.js';
+export * from './logo.component.js';
+export default SkfLogo;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-logo': SkfLogo;
+    }
+}

package/dist/components/logo/logo.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/radio/radio.component.d.ts

@@ -0,0 +1,63 @@
+import '@components/icon/icon.js';
+import { FormBase } from '@internal/components/formBase.js';
+import type { FormFieldBaseProps } from '@internal/types/formField.js';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-radio>` component is used to create a radio input
+ *
+ * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ *
+ * @attribute {boolean} disabled - If true, sets disabled state
+ * @attribute {boolean} required - If true, value is required or must be checked for the form to be submittable
+ *
+ * @event change {object} - When the value of the input changes
+ *
+ * @slot Default -  Alternatively, you can use the `label` attribute
+ *
+ * @tagname skf-radio
+ */
+export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
+    static styles: CSSResultGroup;
+    /** @internal */
+    private _initialChecked;
+    /** If provided, outputs helping hints in console */
+    debug?: boolean | undefined;
+    /** If true, outputs helping hints in console */
+    checked?: boolean;
+    /** If true, forces component to invalid state until removed */
+    customInvalid?: boolean;
+    /** If true, hides the label visually */
+    hideLabel: boolean;
+    /** The input's label. Alternatively, you can use the `label` attribute. */
+    label?: string;
+    /** If provided, adds name to the input-element */
+    name?: string;
+    /** If provided, renders an alternative A11y text for the asterisk */
+    requiredLabel?: string;
+    /** If provided, displays an alternative size */
+    size?: 'sm' | 'md';
+    /** If provided, displays provided severity state */
+    severity?: FormFieldBaseProps['severity'];
+    /** If provided, displays valid state after interaction */
+    showValid?: boolean;
+    /** The current value of the input field  */
+    value: string;
+    /** @internal */
+    /** True if the internal state is invalid  */
+    private _invalid;
+    /** @internal */
+    private $input?;
+    connectedCallback(): void;
+    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    protected firstUpdated(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    debugOutput(): void;
+    /** @internal */
+    private _resetValue;
+    /** @internal */
+    private _uncheckSiblingRadios;
+    /** @internal */
+    private _validateInput;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/radio/radio.d.ts

@@ -0,0 +1,8 @@
+import { SkfRadio } from './radio.component.js';
+export * from './radio.component.js';
+export default SkfRadio;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-radio': SkfRadio;
+    }
+}

package/dist/components/radio/radio.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

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

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

package/dist/components/switch/switch.component.d.ts

@@ -0,0 +1,55 @@
+import { FormBase } from '@internal/components/formBase.js';
+import type { FormFieldBaseProps } from '@internal/types/formField.js';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-switch>` is a component that displays a list of actions or options
+ *
+ * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ *
+ * @attribute {boolean} disabled - If true, sets disabled state
+ * @attribute {boolean} required - If true, value is required or must be checked for the form to be submittable
+ *
+ * @slot - The component's placeholder content
+ *
+ * @tagname skf-switch
+ */
+export declare class SkfSwitch extends FormBase implements FormFieldBaseProps {
+    static styles: CSSResultGroup;
+    /** @internal */
+    private _initialChecked;
+    /** If true, outputs helping hints in console */
+    debug?: boolean;
+    /** If true, outputs helping hints in console */
+    checked?: boolean;
+    /** If true, hides the label visually */
+    hideLabel?: boolean;
+    /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
+    label?: string;
+    /** If defined, adds name to the input-element */
+    name?: string;
+    /** If defined, renders an alternative A11y text for the asterisk */
+    requiredLabel?: string;
+    /** Size of the Switch */
+    size: 'sm' | 'md';
+    /** The current value of the input field  */
+    value: string;
+    /** @internal */
+    /** True if the internal state is invalid  */
+    private _invalid;
+    /** @internal */
+    private $input?;
+    connectedCallback(): void;
+    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    protected firstUpdated(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    debugOutput(): void;
+    /** @internal */
+    private _validateInput;
+    /** @internal */
+    private _handleChange;
+    /** @internal */
+    private _handleInvalid;
+    /** @internal */
+    private _resetValue;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,8 @@
+import { SkfSwitch } from './switch.component';
+export * from './switch.component';
+export default SkfSwitch;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-switch': SkfSwitch;
+    }
+}

package/dist/components/switch/switch.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult[];