@skf-design-system/ui-components 1.0.0-beta.5 → 1.0.1-beta.0

package/dist/internal/helpers/watch.js

@@ -0,0 +1,28 @@
+function o(f, U) {
+  const e = {
+    waitUntilFirstUpdate: !1,
+    afterUpdate: !1,
+    ...U
+  };
+  return (l, c) => {
+    const { update: d } = l, h = Array.isArray(f) ? f : [f];
+    l.update = function(i) {
+      e.afterUpdate || h.forEach((n) => {
+        const t = n;
+        if (i.has(t)) {
+          const a = i.get(t), s = this[t];
+          a !== s && (!e.waitUntilFirstUpdate || this.hasUpdated) && this[c](a, s);
+        }
+      }), d.call(this, i), e.afterUpdate && h.forEach((n) => {
+        const t = n;
+        if (i.has(t)) {
+          const a = i.get(t), s = this[t];
+          a !== s && (!e.waitUntilFirstUpdate || this.hasUpdated) && this[c](a, s);
+        }
+      });
+    };
+  };
+}
+export {
+  o as watch
+};

package/dist/internal/templates/asterisk.d.ts

@@ -1 +1 @@
-export declare function Asterisk(label?: string): import("lit").TemplateResult<1>;
+export declare function Asterisk(label?: string, className?: string): import("lit").TemplateResult<1>;

package/dist/internal/templates/asterisk.js

@@ -1,10 +1,11 @@
-import { html as i } from "lit";
-function a(s) {
-  return i`
-		<span class="visually-hidden">(${s ?? "Required"})</span>
-		<span aria-hidden="true" id="asterisk">*</span>
+import { html as r } from "lit";
+import { ifDefined as e } from "lit/directives/if-defined.js";
+function t(i, s) {
+  return r`
+		<span class="visually-hidden">(${i ?? "Required"})</span>
+		<span aria-hidden="true" class=${e(s)} id="asterisk">*</span>
 	`;
 }
 export {
-  a as Asterisk
+  t as Asterisk
 };

package/dist/react/index.d.ts

@@ -1,9 +1,12 @@
 export { default as SkfAccordion } from './skf-accordion/index.js';
 export { default as SkfAlert } from './skf-alert/index.js';
+export { default as SkfBreadcrumb } from './skf-breadcrumb/index.js';
+export { default as SkfBreadcrumbItem } from './skf-breadcrumb-item/index.js';
 export { default as SkfButton } from './skf-button/index.js';
 export { default as SkfCard } from './skf-card/index.js';
 export { default as SkfCheckbox } from './skf-checkbox/index.js';
 export { default as SkfCollapse } from './skf-collapse/index.js';
+export { default as SkfDialog } from './skf-dialog/index.js';
 export { default as SkfDivider } from './skf-divider/index.js';
 export { default as SkfHeading } from './skf-heading/index.js';
 export { default as SkfIcon } from './skf-icon/index.js';
@@ -11,12 +14,22 @@ export { default as SkfInput } from './skf-input/index.js';
 export { default as SkfLink } from './skf-link/index.js';
 export { default as SkfLoader } from './skf-loader/index.js';
 export { default as SkfLogo } from './skf-logo/index.js';
+export { default as SkfMenu } from './skf-menu/index.js';
+export { default as SkfMenuItem } from './skf-menu-item/index.js';
+export { default as SkfPopover } from './skf-popover/index.js';
+export { default as SkfProgress } from './skf-progress/index.js';
 export { default as SkfRadio } from './skf-radio/index.js';
 export { default as SkfSelect } from './skf-select/index.js';
 export { default as SkfSelectOption } from './skf-select-option/index.js';
 export { default as SkfSelectOptionGroup } from './skf-select-option-group/index.js';
+export { default as SkfStepper } from './skf-stepper/index.js';
+export { default as SkfStepperItem } from './skf-stepper-item/index.js';
 export { default as SkfSwitch } from './skf-switch/index.js';
+export { default as SkfTab } from './skf-tab/index.js';
+export { default as SkfTabGroup } from './skf-tab-group/index.js';
+export { default as SkfTabPanel } from './skf-tab-panel/index.js';
 export { default as SkfTag } from './skf-tag/index.js';
 export { default as SkfTextArea } from './skf-textarea/index.js';
 export { default as SkfToast } from './skf-toast/index.js';
 export { default as SkfToastWrapper } from './skf-toast-wrapper/index.js';
+export { default as SkfTooltip } from './skf-tooltip/index.js';

package/dist/react/index.js

@@ -1,9 +1,12 @@
 export { default as SkfAccordion } from './skf-accordion/index.js';
 export { default as SkfAlert } from './skf-alert/index.js';
+export { default as SkfBreadcrumb } from './skf-breadcrumb/index.js';
+export { default as SkfBreadcrumbItem } from './skf-breadcrumb-item/index.js';
 export { default as SkfButton } from './skf-button/index.js';
 export { default as SkfCard } from './skf-card/index.js';
 export { default as SkfCheckbox } from './skf-checkbox/index.js';
 export { default as SkfCollapse } from './skf-collapse/index.js';
+export { default as SkfDialog } from './skf-dialog/index.js';
 export { default as SkfDivider } from './skf-divider/index.js';
 export { default as SkfHeading } from './skf-heading/index.js';
 export { default as SkfIcon } from './skf-icon/index.js';
@@ -11,12 +14,22 @@ export { default as SkfInput } from './skf-input/index.js';
 export { default as SkfLink } from './skf-link/index.js';
 export { default as SkfLoader } from './skf-loader/index.js';
 export { default as SkfLogo } from './skf-logo/index.js';
+export { default as SkfMenu } from './skf-menu/index.js';
+export { default as SkfMenuItem } from './skf-menu-item/index.js';
+export { default as SkfPopover } from './skf-popover/index.js';
+export { default as SkfProgress } from './skf-progress/index.js';
 export { default as SkfRadio } from './skf-radio/index.js';
 export { default as SkfSelect } from './skf-select/index.js';
 export { default as SkfSelectOption } from './skf-select-option/index.js';
 export { default as SkfSelectOptionGroup } from './skf-select-option-group/index.js';
+export { default as SkfStepper } from './skf-stepper/index.js';
+export { default as SkfStepperItem } from './skf-stepper-item/index.js';
 export { default as SkfSwitch } from './skf-switch/index.js';
+export { default as SkfTab } from './skf-tab/index.js';
+export { default as SkfTabGroup } from './skf-tab-group/index.js';
+export { default as SkfTabPanel } from './skf-tab-panel/index.js';
 export { default as SkfTag } from './skf-tag/index.js';
 export { default as SkfTextArea } from './skf-textarea/index.js';
 export { default as SkfToast } from './skf-toast/index.js';
 export { default as SkfToastWrapper } from './skf-toast-wrapper/index.js';
+export { default as SkfTooltip } from './skf-tooltip/index.js';

package/dist/react/skf-breadcrumb/index.d.ts

@@ -0,0 +1,9 @@
+import Component from '../../components/breadcrumb/breadcrumb.js';
+import { type SkfBreadcrumb } from '../../components/breadcrumb/breadcrumb.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: EventName<Event & {
+        target: SkfBreadcrumb;
+    }>;
+}>;
+export default reactWrapper;

package/dist/react/skf-breadcrumb/index.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/breadcrumb/breadcrumb.js';
+import {} from '../../components/breadcrumb/breadcrumb.js';
+import {} from '@lit/react';
+const tagName = 'skf-breadcrumb';
+Component.define('skf-breadcrumb');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {
+        onClick: 'click',
+    },
+    displayName: 'SkfBreadcrumb',
+});
+export default reactWrapper;

package/dist/react/skf-breadcrumb-item/index.d.ts

@@ -0,0 +1,3 @@
+import Component from '../../components/breadcrumb-item/breadcrumb-item.js';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skf-breadcrumb-item/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/breadcrumb-item/breadcrumb-item.js';
+const tagName = 'skf-breadcrumb-item';
+Component.define('skf-breadcrumb-item');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfBreadcrumbItem',
+});
+export default reactWrapper;

package/dist/react/skf-button/index.d.ts

@@ -1,3 +1,9 @@
 import Component from '../../components/button/button.js';
-declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+import { type SkfButton } from '../../components/button/button.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onClick: EventName<Event & {
+        target: SkfButton;
+    }>;
+}>;
 export default reactWrapper;

package/dist/react/skf-button/index.js

@@ -1,13 +1,17 @@
 import * as React from 'react';
 import { createComponent } from '@lit/react';
 import Component from '../../components/button/button.js';
+import {} from '../../components/button/button.js';
+import {} from '@lit/react';
 const tagName = 'skf-button';
 Component.define('skf-button');
 const reactWrapper = createComponent({
     tagName,
     elementClass: Component,
     react: React,
-    events: {},
+    events: {
+        onClick: 'click',
+    },
     displayName: 'SkfButton',
 });
 export default reactWrapper;

package/dist/react/skf-dialog/index.d.ts

@@ -0,0 +1,15 @@
+import Component from '../../components/dialog/dialog.js';
+import { type SkfDialog } from '../../components/dialog/dialog.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onSkfDialogOpen: EventName<Event & {
+        target: SkfDialog;
+    }>;
+    onSkfDialogClose: EventName<Event & {
+        target: SkfDialog;
+    }>;
+    onClose: EventName<Event & {
+        target: SkfDialog;
+    }>;
+}>;
+export default reactWrapper;

package/dist/react/skf-dialog/index.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/dialog/dialog.js';
+import {} from '../../components/dialog/dialog.js';
+import {} from '@lit/react';
+const tagName = 'skf-dialog';
+Component.define('skf-dialog');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {
+        onSkfDialogOpen: 'skf-dialog-open',
+        onSkfDialogClose: 'skf-dialog-close',
+        onClose: 'close',
+    },
+    displayName: 'SkfDialog',
+});
+export default reactWrapper;

package/dist/react/skf-menu/index.d.ts

@@ -0,0 +1,12 @@
+import Component from '../../components/menu/menu.js';
+import { type SkfMenu } from '../../components/menu/menu.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onOpen: EventName<Event & {
+        target: SkfMenu;
+    }>;
+    onClose: EventName<Event & {
+        target: SkfMenu;
+    }>;
+}>;
+export default reactWrapper;

package/dist/react/skf-menu/index.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/menu/menu.js';
+import {} from '../../components/menu/menu.js';
+import {} from '@lit/react';
+const tagName = 'skf-menu';
+Component.define('skf-menu');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {
+        onOpen: 'open',
+        onClose: 'close',
+    },
+    displayName: 'SkfMenu',
+});
+export default reactWrapper;

package/dist/react/skf-menu-item/index.d.ts

@@ -0,0 +1,27 @@
+import Component from '../../components/menu-item/menu-item.js';
+import { type SkfMenuItem } from '../../components/menu-item/menu-item.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onMyTagMyEvent: EventName<Event & {
+        target: SkfMenuItem;
+    }>;
+    onClick: EventName<Event & {
+        target: SkfMenuItem;
+    }>;
+    onMouseover: EventName<Event & {
+        target: SkfMenuItem;
+    }>;
+    onMouseout: EventName<Event & {
+        target: SkfMenuItem;
+    }>;
+    onFocus: EventName<Event & {
+        target: SkfMenuItem;
+    }>;
+    onBlur: EventName<Event & {
+        target: SkfMenuItem;
+    }>;
+    onChange: EventName<Event & {
+        target: SkfMenuItem;
+    }>;
+}>;
+export default reactWrapper;

package/dist/react/skf-menu-item/index.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/menu-item/menu-item.js';
+import {} from '../../components/menu-item/menu-item.js';
+import {} from '@lit/react';
+const tagName = 'skf-menu-item';
+Component.define('skf-menu-item');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {
+        onMyTagMyEvent: 'my-tag-my-event',
+        onClick: 'click',
+        onMouseover: 'mouseover',
+        onMouseout: 'mouseout',
+        onFocus: 'focus',
+        onBlur: 'blur',
+        onChange: 'change',
+    },
+    displayName: 'SkfMenuItem',
+});
+export default reactWrapper;

package/dist/react/skf-popover/index.d.ts

@@ -0,0 +1,12 @@
+import Component from '../../components/popover/popover.js';
+import { type SkfPopover } from '../../components/popover/popover.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onOpen: EventName<Event & {
+        target: SkfPopover;
+    }>;
+    onClose: EventName<Event & {
+        target: SkfPopover;
+    }>;
+}>;
+export default reactWrapper;

package/dist/react/skf-popover/index.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/popover/popover.js';
+import {} from '../../components/popover/popover.js';
+import {} from '@lit/react';
+const tagName = 'skf-popover';
+Component.define('skf-popover');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {
+        onOpen: 'open',
+        onClose: 'close',
+    },
+    displayName: 'SkfPopover',
+});
+export default reactWrapper;

package/dist/react/skf-progress/index.d.ts

@@ -0,0 +1,3 @@
+import Component from '../../components/progress/progress.js';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skf-progress/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/progress/progress.js';
+const tagName = 'skf-progress';
+Component.define('skf-progress');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfProgress',
+});
+export default reactWrapper;

package/dist/react/skf-stepper/index.d.ts

@@ -0,0 +1,9 @@
+import Component from '../../components/stepper/stepper.js';
+import { type SkfStepper } from '../../components/stepper/stepper.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onSkfStepperItemSelect: EventName<Event & {
+        target: SkfStepper;
+    }>;
+}>;
+export default reactWrapper;

package/dist/react/skf-stepper/index.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/stepper/stepper.js';
+import {} from '../../components/stepper/stepper.js';
+import {} from '@lit/react';
+const tagName = 'skf-stepper';
+Component.define('skf-stepper');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {
+        onSkfStepperItemSelect: 'skf-stepper-item-select',
+    },
+    displayName: 'SkfStepper',
+});
+export default reactWrapper;

package/dist/react/skf-stepper-item/index.d.ts

@@ -0,0 +1,9 @@
+import Component from '../../components/stepper-item/stepper-item.js';
+import { type SkfStepperItem } from '../../components/stepper-item/stepper-item.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onSkfStepperItemSelect: EventName<Event & {
+        target: SkfStepperItem;
+    }>;
+}>;
+export default reactWrapper;

package/dist/react/skf-stepper-item/index.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/stepper-item/stepper-item.js';
+import {} from '../../components/stepper-item/stepper-item.js';
+import {} from '@lit/react';
+const tagName = 'skf-stepper-item';
+Component.define('skf-stepper-item');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {
+        onSkfStepperItemSelect: 'skf-stepper-item-select',
+    },
+    displayName: 'SkfStepperItem',
+});
+export default reactWrapper;

package/dist/react/skf-tab/index.d.ts

@@ -0,0 +1,12 @@
+import Component from '../../components/tab/tab.js';
+import { type SkfTab } from '../../components/tab/tab.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onSkfTabSelect: EventName<Event & {
+        target: SkfTab;
+    }>;
+    onClick: EventName<Event & {
+        target: SkfTab;
+    }>;
+}>;
+export default reactWrapper;

package/dist/react/skf-tab/index.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/tab/tab.js';
+import {} from '../../components/tab/tab.js';
+import {} from '@lit/react';
+const tagName = 'skf-tab';
+Component.define('skf-tab');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {
+        onSkfTabSelect: 'skf-tab-select',
+        onClick: 'click',
+    },
+    displayName: 'SkfTab',
+});
+export default reactWrapper;

package/dist/react/skf-tab-group/index.d.ts

@@ -0,0 +1,3 @@
+import Component from '../../components/tab-group/tab-group.js';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skf-tab-group/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/tab-group/tab-group.js';
+const tagName = 'skf-tab-group';
+Component.define('skf-tab-group');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfTabGroup',
+});
+export default reactWrapper;

package/dist/react/skf-tab-panel/index.d.ts

@@ -0,0 +1,3 @@
+import Component from '../../components/tab-panel/tab-panel.js';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skf-tab-panel/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/tab-panel/tab-panel.js';
+const tagName = 'skf-tab-panel';
+Component.define('skf-tab-panel');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfTabPanel',
+});
+export default reactWrapper;

package/dist/react/skf-tooltip/index.d.ts

@@ -0,0 +1,12 @@
+import Component from '../../components/tooltip/tooltip.js';
+import { type SkfTooltip } from '../../components/tooltip/tooltip.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onOpen: EventName<Event & {
+        target: SkfTooltip;
+    }>;
+    onClose: EventName<Event & {
+        target: SkfTooltip;
+    }>;
+}>;
+export default reactWrapper;

package/dist/react/skf-tooltip/index.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/tooltip/tooltip.js';
+import {} from '../../components/tooltip/tooltip.js';
+import {} from '@lit/react';
+const tagName = 'skf-tooltip';
+Component.define('skf-tooltip');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {
+        onOpen: 'open',
+        onClose: 'close',
+    },
+    displayName: 'SkfTooltip',
+});
+export default reactWrapper;

package/dist/styles/component.styles.js

@@ -1,5 +1,5 @@
 import { css as e } from "lit";
-const o = e`
+const t = e`
 	@layer reset, globals, components, overrides;
 
 	@layer reset {
@@ -24,6 +24,19 @@ const o = e`
 	}
 
 	@layer globals {
+		:host {
+			--skf-is-tablet: false;
+			--skf-box-spacing: var(--skf-spacing-100);
+
+			/* mq-token needed here */
+			@media screen and (width >= 768px) {
+				--skf-is-tablet: true;
+				--skf-box-spacing: var(--skf-spacing-150);
+			}
+
+			color: var(--skf-text-color-primary);
+		}
+
 		:is(button, input, label, select) {
 			cursor: pointer;
 
@@ -35,5 +48,5 @@ const o = e`
 	}
 `;
 export {
-  o as default
+  t as default
 };