@skf-design-system/ui-components 0.0.1-beta.4 → 1.0.0-alpha.28

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-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-select/index.d.ts

@@ -0,0 +1,21 @@
+import Component from '../../components/select/select.js';
+import { type SkfSelect } from '../../components/select/select.js';
+import { type EventName } from '@lit/react';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
+    onChange: EventName<Event & {
+        target: SkfSelect;
+    }>;
+    onInvalid: EventName<Event & {
+        target: SkfSelect;
+    }>;
+    onReset: EventName<Event & {
+        target: SkfSelect;
+    }>;
+    onSkfSelectDropdown: EventName<Event & {
+        target: SkfSelect;
+    }>;
+    onSkfSelectOptionSelect: EventName<Event & {
+        target: SkfSelect;
+    }>;
+}>;
+export default reactWrapper;

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/select/select.js';
+import {} from '../../components/select/select.js';
+import {} from '@lit/react';
+const tagName = 'skf-select';
+Component.define('skf-select');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {
+        onChange: 'change',
+        onInvalid: 'invalid',
+        onReset: 'reset',
+        onSkfSelectDropdown: 'skf-select:dropdown',
+        onSkfSelectOptionSelect: 'skf-select-option:select',
+    },
+    displayName: 'SkfSelect',
+});
+export default reactWrapper;

package/dist/react/skf-select-option/index.d.ts

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

package/dist/react/skf-select-option/index.js

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

package/dist/react/skf-select-option-group/index.d.ts

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

package/dist/react/skf-select-option-group/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/select-option-group/select-option-group.js';
+const tagName = 'skf-select-option-group';
+Component.define('skf-select-option-group');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfSelectOptionGroup',
+});
+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-toast/index.d.ts

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

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

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

package/dist/react/skf-toast-wrapper/index.d.ts

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

package/dist/react/skf-toast-wrapper/index.js

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

package/dist/styles/form-field.styles.js

@@ -6,11 +6,15 @@ const i = e`
 		}
 
 		/* stylelint-disable no-descending-specificity */
-		#field {
+		#root {
 			color: var(--_skf-field-color, var(--skf-text-color-primary));
 			display: grid;
 			gap: var(--skf-spacing-25);
 
+			:host([disabled]) & {
+				--_skf-field-color: var(--skf-interactive-text-color-disabled);
+			}
+
 			:host([size='sm']) & {
 				font-size: var(--skf-font-size-75);
 				font-weight: var(--skf-font-weight-medium);
@@ -31,8 +35,8 @@ const i = e`
 		}
 
 		/**
-	* Wwrapper for the input-element that controls the appearance
-	*/
+		 * Wwrapper for the input-element that controls the appearance
+		 */
 		#input {
 			background-color: var(--_skf-field-input-bg-color, var(--skf-bg-color-neutral-1));
 			border: var(--skf-border-width-sm) solid
@@ -91,8 +95,8 @@ const i = e`
 		}
 
 		/**
-	* Wrapper element for handling layout of the leading and trailing content
-	*/
+		 * Wrapper element for handling layout of the leading and trailing content
+		 */
 		#affix {
 			align-items: center;
 			display: flex;
@@ -144,8 +148,8 @@ const i = e`
 		}
 
 		/**
-	* Action related styles
-	*/
+		 * Action related styles
+		 */
 		#action {
 			display: flex;
 			flex-direction: column;