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

package/README.md

@@ -0,0 +1,343 @@
+<div align="center">
+   <!--img alt="Ferris Logotype" src="./.github/assets/ferris_logo_dark.svg" width="128"/ -->
+
+# SKF UI Components
+
+<p>
+   <a href="https://teams.microsoft.com/l/team/19%3a15d8521717e14c419998b0fed71289a5%40thread.tacv2/conversations?groupId=286b39ed-ed94-43da-8a3f-383319f6c9dc&tenantId=41875f2b-33e8-4670-92a8-f643afbb243a">MS Teams</a> |
+   <a href="https://develop--661e8ae0ef9b24dadeea9b18.chromatic.com/">Storybook Beta</a> |
+   <a href="https://github.com/SKF-Internal/ui-components/issues" target="_blank">Report Issues</a>
+   </p>
+</div>
+
+## Introduction
+
+The SKF UI Library is a collection of components that is meant to visually align and facilitate the creation of web applications across the global SKF organization. Using the SKF UI Library will give apps an SKF look and feel, and will let users focus on building business logic and features, instead of worrying about the basics.
+
+---
+
+> 🔵 If you just want to get a grasp what the components are, please feel free to browse our [component docs](https://develop--661e8ae0ef9b24dadeea9b18.chromatic.com/)! 🔵
+
+---
+
+The SKF UI Library is created using Lit/native web components in order to support as many frameworks as possible. It works out of the box for all frameworks, including React >= 19.
+
+For those who use React 18, we provide React wrappers that can be used in your application.
+
+## Reporting issues
+
+Reporting issues requires an skf email and github access. [See this section](#skf-email)
+
+We are working on a solution to report issues without an explicit skf email, which will be publicly available.
+
+## 🏃 Getting started
+
+Let's go!
+
+### Public package
+
+This repository is internal within SKF-Internal enterprise organisation. However, we publish our
+package externally with public in order to enable easy consumption of our components.
+
+Find our package here, [@skf-design-system/ui-components](https://www.npmjs.com/package/@skf-design-system/ui-components)
+
+Simply install it with one of the commands below.
+
+### Install using NPM
+
+```bash
+npm install @skf-design-system/ui-components
+```
+
+### Install using pnpm
+
+```bash
+pnpm add @skf-design-system/ui-components
+```
+
+### Install using Yarn
+
+```bash
+yarn add @skf-design-system/ui-components
+```
+
+## Start using!
+
+How you get started using our components is of course a bit different depending on which framework or library you are using for your application. We will proceed to explain how you get going with the most common options on SKF.
+
+### Bootstraping CSS
+
+In order for our components to work as intended you need to import our global styles where appropiate e.g. App.tsx.
+
+```tsx
+import '@skf-internal/ui-components/styles/global.css';
+```
+
+### Angular
+
+In order for our components to get the correct styling you need add our global styling to your project. In angular you can do that in the angular.json like this:
+
+```json
+// angular.json
+{
+...
+"architect": {
+   "build": {
+      "options": {
+         "styles": [
+            "src/styles.css",
+            "node_modules/@skf-internal/ui-components/dist/styles/global.css"
+         ],
+         ...
+      }
+   }
+}}
+```
+
+After that, you import the specific component you want to use in your file and make an instance. You can choose to import all ui components by adding `import '@skf-internal/ui-components'` or a specific component by importing `import '@skf-internal/ui-components/components/loader/loader.js';`.
+It might look like this in angular:
+
+```ts
+// app.components.ts
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import '@skf-internal/ui-components/styles/global.css';
+import '@skf-internal/ui-components';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+
+export class AppComponent {
+  title = 'test-components-in-angular';
+}
+
+// app.component.html
+<main class="main">
+  <div class="content">
+    <div class="left-side">
+      <h1>Hello, {{ title }}</h1>
+      <p>Congratulations! Your app is running. 🎉</p>
+      <skf-loader></skf-loader>
+    </div>
+  </div>
+</main>
+<router-outlet />
+
+
+```
+
+### React 19 beta / Next 15 beta
+
+Web Components will become first class citizens in React 19. Should you want to use them in a version prior to 19 you have to wrap them in React, which essentially converts the native event to React Syntactic events. Long story short, use React 19 (when released) and your off the hook.
+
+If you want to proceed to use the React 19 beta together with typescript, see [React 19 RC upgrade guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide).
+
+You will also have to declare a global type for the web components to get it to play nice with JSX.
+
+1. Create a definition file called `custom-elements-types.d.ts` as:
+
+```ts
+import type { CustomElements } from './node_modules/@skf-internal/ui-components/dist/types/jsx/custom-element-jsx';
+
+declare global {
+	namespace React.JSX {
+		interface IntrinsicElements extends CustomElements {}
+	}
+}
+```
+
+2. include it in `tsconfig.json`:
+
+```ts
+{
+  "compilerOptions": {
+   ...
+  },
+  "include": [ ... , "custom-elements-types.d.ts"],
+}
+
+```
+
+```ts
+// MySkfCardLoader.tsx
+// Example react component, no need for imports of web components here as they are defined at run time.
+
+export const MySkfCardLoader = () => {
+   return (
+      <>
+         <skf-card>
+            <p>A loading card</p>
+            <skf-loader></skf-loader>
+         </skf-card>
+      </>
+   )
+}
+```
+
+#### Events and EventTarget
+
+Events and EventTarget should be casted as below
+
+```tsx
+<skf-input
+	name="input"
+	onchange={(e) => console.log((e.target as HTMLInputElement).value)}
+></skf-input>
+```
+
+or if you want all on the SkfElement
+
+```tsx
+import { SkfInput } from "@skf-internal/ui-components";
+
+...
+
+<skf-input name="input" onchange={(e) => console.log((e.target as unknown as SkfInput).value)}></skf-input>
+```
+
+### React 18
+
+> Note, for React 18 it is not necessary to install an extra plugin to get code completion since you are writing in react
+
+React 18 does not support native web components out of the box. If you want to use SKF UI components with React 18 you will have to use our generated wrappers in order to do so.
+
+```tsx
+import { SkfInput } from "@skf-internal/ui-components/react/index.js";
+
+...
+
+<SkfInput
+  name="input"
+  onChange={(e) => {
+    console.log( e.target.value );
+  }}
+/>
+```
+
+### Setting up code completion
+
+Web components don't get code completion by default, but have no fear! You can install an extension for VScode in order for it to interpret SKF ui components. Please install [Custom Elements Language Server](https://marketplace.visualstudio.com/items?itemName=Matsuuu.custom-elements-language-server-project) if this is something that you want 💁🏼‍♀️. If you are using another IDE, we're sure that there might be similar plugins for you to use too!
+
+#### VS Code
+
+ui-components ships with a file called vscode.html-custom-data.json that can be used to describe it’s custom elements to Visual Studio Code. This enables code completion for ui-components components (also known as “code hinting” or “IntelliSense”). To enable it, you need to tell VS Code where the file is.
+
+1. Install ui-components locally
+2. If it doesn’t already exist, create a folder called .vscode at the root of your project
+3. If it doesn’t already exist, create a file inside that folder called settings.json
+4. Add the following to the file
+
+```
+{
+  "html.customData": ["./node_modules/@skf-internal/ui-components/dist/vscode.html-custom-data.json"]
+}
+```
+
+If settings.json already exists, simply add the above line to the root of the object. Note that you may need to restart VS Code for the changes to take effect.
+
+#### JetBrains IDEs
+
+If you are using a JetBrains IDE and you are installing ui-components from NPM, the editor will automatically detect the web-types.json file from the package and you should immediately see component information in your editor.
+
+If you are installing from the CDN, you can download a local copy and add it to the root of your project. Be sure to add a reference to the web-types.json file in your package.json in order for your editor to properly detect it.
+
+```
+{
+  ...
+  "web-types": "./web-types.json"
+  ...
+}
+```
+
+If you are using types from multiple projects, you can add an array of references.
+
+```
+{
+  ...
+  "web-types": [
+    ...,
+    "./web-types.json"
+  ]
+  ...
+}
+```
+
+#### Other Editors
+
+Most popular editors support custom code completion with a bit of configuration. Please submit a feature request for your editor of choice. PRs are also welcome!
+
+## ⚙️ Installation on build servers
+
+If you use the component library in your CI/CD using a Azure pipeline or Github actions, you will need to authenticate there as well.
+
+### SKF UI Library Machine User
+
+For your CI/CD we have a machine user, specifically set up for this scenario.
+This user has an access token that you can put on your server as a secret environment variable, and then use in your CI/CD script. Contact the ui library team in [our Teams channel](https://teams.microsoft.com/l/channel/19%3a15d8521717e14c419998b0fed71289a5%40thread.tacv2/General?groupId=286b39ed-ed94-43da-8a3f-383319f6c9dc&tenantId=41875f2b-33e8-4670-92a8-f643afbb243a) to get hold of this token.
+
+### Access token and environments
+
+Ensure that the **correct access token** is used in corresponding environment. I.e - personal access token in your local environment and machine user token in CI/CD build pipeline.
+
+### Using UI components in your CI/CD pipeline
+
+Every pipeline is different, but we assume that you are using GitHub since that is the standard for SKF. In order to authenticate on the server to install this dependency, you need to add the machine user token to a secret in your repo and then use it in your workflow file. It could look something like this:
+
+```yaml
+// workflows/deploy.yaml
+---
+steps:
+  - name: Install dependencies
+    run: npm install
+    env:
+      NODE_AUTH_TOKEN: ${{ secrets.<ACCESS_TOKEN_SECRET> }} # <-- Provided by team Aurora, authors of ui-components
+```
+
+In this example a token has been added with the name `ACCESS_TOKEN_SECRET`, but you can give it any name you like ✨. If you want to know more about secret generation and usage you can read more about it in [GitHub's docs](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions).
+
+## 📖 Further reading
+
+### 🎁 Contributing
+
+Would you like to contribute to the ui components library? That is awesome! Thank you for wanting to be part of our community.
+
+### SKF-email
+
+In order to contribute, you will need a valid SKF-email ending with @skf.com as your primary GitHub-email to be able to clone and install this repo.
+
+[🙋‍♀️ But I am a consultant outside SKF domain without SKF email?](#troubleshooting)
+
+### 👯 Apply for Github access on behalf of a friend
+
+If you have access already, you can [apply for Github on behalf of a friend](https://skfprod.service-now.com/sp?id=sc_cat_item&table=sc_cat_item&sys_id=8c056f4c876b1ddc59d9a8a90cbb3541) if you need or want to 🙏
+
+## 🛠️ Troubleshooting
+
+<details>
+<summary><strong>🙋‍♀️ But I am a consultant outside the SKF domain without SKF email? </strong></summary>
+
+There is nothin stopping you from using our package. However, our repository has internal visiblity with our organization. If you need access to the repository for contributing, contact us and let's see what solution suit you best.
+
+</details>
+
+<details>
+<summary><strong>🙋‍♀️ I get a 404 when I click the GitHub repository link</strong></summary>
+You do not have github access.
+
+Checklist:
+
+- Do you have an SKF email address? If not contact your manager/SKF contact.
+- Do you have SSO enabled? If not contact IT.
+- Do you have access to GitHub on your SKF account? Contact IT and make sure your account have access to the Enterprise Organization.
+
+</details>
+
+## 🧑‍⚖️ License
+
+Copyright SKF 2024

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

@@ -0,0 +1,8 @@
+import { SkfCollapse } from '@components/collapse/collapse.component.js';
+export declare class SkfAccordionItem extends SkfCollapse {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-accordion-item': SkfAccordionItem;
+    }
+}

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

@@ -0,0 +1,36 @@
+import '@components/collapse/collapse.js';
+import { SkfElement } from '@internal/components/skf-element.js';
+import type { HeadingType } from '@internal/constants/heading.js';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.
+ *
+ * See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6256cb1b44eba592d319d92e) for design principles.
+ *
+ * @slot - Expects one or more <skf-accordion-item> element(s)
+ *
+ * @tag skf-accordion
+ */
+export declare class SkfAccordion extends SkfElement {
+    static styles: CSSResultGroup;
+    /** If true, will animate the expand/collapse state */
+    animated?: boolean;
+    /** Controls which heading element will be rendered */
+    headingAs: Exclude<HeadingType, 'h1'>;
+    /** If provided, adds a gap between each item */
+    gap?: boolean;
+    /** If true, allowes multiple accordion items to open */
+    multiple?: boolean;
+    /** If true, renders the small version */
+    small?: boolean;
+    /** If true, will truncate all headings in collapsed state */
+    truncate?: boolean;
+    /** @internal */
+    private $accordionItems;
+    /** @internal */
+    private get items();
+    /** @internal */
+    private _setItemAttributes;
+    private _onChildToggle;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,9 @@
+import { SkfAccordion } from '@components/accordion/accordion.component.js';
+export * from './accordion-item.js';
+export * from './accordion.component.js';
+export default SkfAccordion;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-accordion': SkfAccordion;
+    }
+}

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

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

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

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

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

@@ -0,0 +1,32 @@
+import type { SkfIcon } from '@components/icon/icon.component.js';
+import '@components/icon/icon.js';
+import { SkfElement } from '@internal/components/skf-element.js';
+import type { SeverityFgColor } from '@skf-aurora/ui-assets';
+import { type CSSResultGroup } from 'lit';
+import '../link/link';
+/**
+ * The `<skf-alert>` is a type of notification that appears in-line
+ *
+ * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ *
+ * @event skf-alert-close - Fires when the close button is clicked
+ *
+ * @slot - Alert message. **Notice!** See design principles for approved content
+ * @slot link - lodjvodjvodjo
+ *
+ * @tagname skf-alert
+ */
+export declare class SkfAlert extends SkfElement {
+    static styles: CSSResultGroup;
+    /** If true, alert is being used as a toast with an close button */
+    closeable?: boolean;
+    /** Close button aria-label */
+    buttonLabel: string;
+    /** If defined, displays leading icon */
+    icon?: SkfIcon['name'];
+    /** If defined, gives the supplied appearance */
+    severity?: SeverityFgColor;
+    /** @internal */
+    private _handleClose;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/alert/alert.d.ts

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

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

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

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

@@ -0,0 +1,48 @@
+import type { SkfIcon } from '@components/icon/icon.component.js';
+import '@components/icon/icon.js';
+import '@components/loader/loader.js';
+import { SkfElement } from '@internal/components/skf-element.js';
+import { type CSSResultGroup, type PropertyValues } from 'lit';
+/**
+ * Component to be used in forms or for interactivity
+ *
+ * @slot - The Primary content
+ *
+ * @tagname skf-button
+ */
+export declare class SkfButton extends SkfElement {
+    static styles: CSSResultGroup;
+    /** @internal */
+    private _transitionOptions;
+    /** If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`. */
+    destructive: boolean;
+    /** If true, removes border */
+    disabled: boolean;
+    /** 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'];
+    /** If provided, determines the positioning of the icon in relation to the text  */
+    iconPosition?: 'left' | 'right';
+    /** If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`. */
+    loading: boolean;
+    /** If provided, displays an alternative size */
+    size: 'sm' | 'md' | 'lg';
+    /** If provided, changes the button type */
+    /** @type { 'button' | 'submit' | 'reset' } */
+    type: HTMLButtonElement['type'];
+    /** If provided, alters the appearance */
+    variant: 'primary' | 'secondary';
+    /** @internal */
+    private _loaderVisible;
+    /** @internal */
+    private $loader?;
+    /** @internal */
+    private $body?;
+    protected firstUpdated(_changedProperties: PropertyValues): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    private _showLoader;
+    private _hideLoader;
+    /** @internal */
+    private _renderIcon;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/button/button.d.ts

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

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

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

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

@@ -0,0 +1,21 @@
+import { SkfElement } from '@internal/components/skf-element.js';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-card>` can be used to group related subjects in a container
+ *
+ * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ *
+ * @slot - The card's main content
+ *
+ * @tagname skf-card
+ */
+export declare class SkfCard extends SkfElement {
+    static styles: CSSResultGroup;
+    /** If true, removes border */
+    noBorder: boolean;
+    /** If true, removes padding */
+    noPadding: boolean;
+    /** If true, the Card fills the parent element height */
+    stretch: boolean;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/card/card.d.ts

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

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

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

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

@@ -0,0 +1,65 @@
+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-checkbox>` component is used to create a checkbox 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-checkbox
+ */
+export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps {
+    static styles: CSSResultGroup;
+    /** @internal */
+    private _initialChecked;
+    /** If defined, outputs helping hints in console */
+    debug?: boolean;
+    /** 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;
+    /** If true and the checkbox is unchecked, the checkbox will appear indeterminate */
+    indeterminate?: 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 checkbox */
+    size: 'sm' | 'md';
+    /** If defined, styles checkbox using provided severity */
+    severity?: FormFieldBaseProps['severity'];
+    /** If defined, 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 _validateInput;
+    /** @internal */
+    private _resetValue;
+    /** @internal */
+    private _renderIcon;
+    render(): import("lit").TemplateResult<1>;
+}

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

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

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

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