@skf-design-system/ui-components 1.0.0-alpha.34 → 1.0.0-alpha.36

package/dist/components/popover/popover.component.js

@@ -1,37 +1,43 @@
-import { SkfPopoverBase as h } from "../../internal/base-classes/popover/popover.base.js";
-import { watch as d } from "../../internal/helpers/watch.js";
-import { property as f } from "lit/decorators.js";
-import { styles as v } from "./popover.styles.js";
-var w = Object.defineProperty, l = Object.getOwnPropertyDescriptor, n = (m, e, s, o) => {
-  for (var r = o > 1 ? void 0 : o ? l(e, s) : e, i = m.length - 1, p; i >= 0; i--)
-    (p = m[i]) && (r = (o ? p(e, s, r) : p(r)) || r);
-  return o && r && w(e, s, r), r;
+import { SkfPopoverBase as p } from "../../internal/base-classes/popover/popover.base.js";
+import { watch as l } from "../../internal/helpers/watch.js";
+import { property as c } from "lit/decorators.js";
+import { styles as w } from "./popover.styles.js";
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (d, t, r, s) => {
+  for (var e = s > 1 ? void 0 : s ? v(t, r) : t, o = d.length - 1, h; o >= 0; o--)
+    (h = d[o]) && (e = (s ? h(t, r, e) : h(e)) || e);
+  return s && e && f(t, r, e), e;
 };
-const a = class a extends h {
+const a = class a extends p {
   constructor() {
-    super(), this.offset = 8, this.hideArrow = !1, this.arrow = !this.hideArrow, this.placement = "bottom-start", h.classMap = { popover: !0 };
+    super(), this.offset = 8, this.hideArrow = !1, this._checkClickOutside = (t) => {
+      this.isOpen && !this.contains(t.target) && this.close();
+    }, this.arrow = !this.hideArrow, this.placement = "bottom-start", this.triggerEvent = "click", this.variant = "popup", p.classMap = { popover: !0 };
   }
   hideArrowChanged() {
     this.arrow = !this.hideArrow;
   }
-  addEventListeners(e) {
-    e.addEventListener("mouseenter", this.open);
+  /** @internal */
+  openExtended() {
+    window.top && window.self !== window.top && window.top.addEventListener("click", this._checkClickOutside, {
+      signal: this.signal
+    });
   }
-  removeEventListeners(e) {
-    e.removeEventListener("mouseenter", this.open);
+  /** @internal */
+  addEventListeners(t) {
+    t.addEventListener(this.triggerEvent, this.open.bind(this), { signal: this.signal });
   }
 };
-a.styles = [h.styles, v];
-let t = a;
+a.styles = [p.styles, w];
+let i = a;
 n([
-  f({ type: Number })
-], t.prototype, "offset", 2);
+  c({ type: Number })
+], i.prototype, "offset", 2);
 n([
-  f({ type: Boolean })
-], t.prototype, "hideArrow", 2);
+  c({ type: Boolean })
+], i.prototype, "hideArrow", 2);
 n([
-  d("hideArrow")
-], t.prototype, "hideArrowChanged", 1);
+  l("hideArrow")
+], i.prototype, "hideArrowChanged", 1);
 export {
-  t as SkfPopover
+  i as SkfPopover
 };

package/dist/components/popover/popover.d.ts

@@ -1,5 +1,5 @@
-import { SkfPopover } from './popover.component';
-export * from './popover.component';
+import { SkfPopover } from './popover.component.js';
+export * from './popover.component.js';
 export default SkfPopover;
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -3,7 +3,7 @@ import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar
  *
- * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/36d674-progress-bar) for design principles
  *
  * @tagname skf-progress
  */
@@ -17,6 +17,8 @@ export declare class SkfProgress extends SkfElement {
     max: number;
     /** Specifies how much of the task that has been completed */
     value: number;
-    constructor();
+    connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/progress/progress.component.js

@@ -1,49 +1,52 @@
-var h = (t) => {
+var v = (t) => {
   throw TypeError(t);
 };
-var f = (t, e, r) => e.has(t) || h("Cannot " + r);
-var c = (t, e, r) => (f(t, e, "read from private field"), r ? r.call(t) : e.get(t)), d = (t, e, r) => e.has(t) ? h("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), v = (t, e, r, p) => (f(t, e, "write to private field"), p ? p.call(t, r) : e.set(t, r), r);
-import { SkfElement as y } from "../../internal/components/skf-element.js";
-import x from "../../styles/component.styles.js";
-import { html as b } from "lit";
-import { property as l } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
+var y = (t, e, r) => e.has(t) || v("Cannot " + r);
+var c = (t, e, r) => (y(t, e, "read from private field"), r ? r.call(t) : e.get(t)), u = (t, e, r) => e.has(t) ? v("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), d = (t, e, r, a) => (y(t, e, "write to private field"), a ? a.call(t, r) : e.set(t, r), r);
+import { SkfElement as b } from "../../internal/components/skf-element.js";
+import { stateMap as _ } from "../../internal/helpers/stateMap.js";
+import { watch as x } from "../../internal/helpers/watch.js";
+import { componentStyles as C } from "../../styles/component.styles.js";
+import { html as O } from "lit";
+import { property as f } from "lit/decorators.js";
 import { styles as g } from "./progress.styles.js";
-var N = Object.defineProperty, n = (t, e, r, p) => {
-  for (var s = void 0, m = t.length - 1, u; m >= 0; m--)
-    (u = t[m]) && (s = u(e, r, s) || s);
-  return s && N(e, r, s), s;
-}, o;
-const i = class i extends y {
+var w = Object.defineProperty, j = Object.getOwnPropertyDescriptor, n = (t, e, r, a) => {
+  for (var s = a > 1 ? void 0 : a ? j(e, r) : e, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (s = (a ? h(e, r, s) : h(s)) || s);
+  return a && s && w(e, r, s), s;
+}, i, p;
+const m = class m extends b {
   constructor() {
-    super();
-    d(this, o);
-    this.animated = !1, this.max = 1, this.value = 0, v(this, o, this.attachInternals()), c(this, o).role = "progressbar";
+    super(...arguments);
+    u(this, i);
+    u(this, p);
+    d(this, i, this.attachInternals()), d(this, p, c(this, i).states), this.animated = !1, this.max = 1, this.value = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.role = "progressbar";
+  }
+  _handleStateChange() {
+    _(c(this, p), "animated").set(this.animated);
   }
   render() {
     const r = this.value / this.max * 100;
-    return b`
-			<div
-				class=${_({
-      progress: !0,
-      "progress--animated": this.animated
-    })}
-				style="--_skf-progress-value: ${r}%"
-			></div>
-		`;
+    return O`<div id="root" style="--_skf-progress-value: ${r}%"></div>`;
   }
 };
-o = new WeakMap(), i.styles = [x, g], i.formAssociated = !0;
-let a = i;
+i = new WeakMap(), p = new WeakMap(), m.styles = [C, g], m.formAssociated = !0;
+let o = m;
+n([
+  f({ type: Boolean })
+], o.prototype, "animated", 2);
 n([
-  l({ type: Boolean, reflect: !0 })
-], a.prototype, "animated");
+  f({ type: Number })
+], o.prototype, "max", 2);
 n([
-  l({ type: Number })
-], a.prototype, "max");
+  f({ type: Number })
+], o.prototype, "value", 2);
 n([
-  l({ type: Number })
-], a.prototype, "value");
+  x("animated")
+], o.prototype, "_handleStateChange", 1);
 export {
-  a as SkfProgress
+  o as SkfProgress
 };

package/dist/components/progress/progress.d.ts

@@ -1,5 +1,5 @@
-import { SkfProgress } from './progress.component';
-export * from './progress.component';
+import { SkfProgress } from './progress.component.js';
+export * from './progress.component.js';
 export default SkfProgress;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/progress/progress.styles.js

@@ -1,45 +1,52 @@
 import { css as r } from "lit";
 const s = r`
-	/* stylelint-disable selector-class-pattern */
 	@layer components {
-		.progress {
-			background: var(--skf-bg-color-neutral-3);
-			block-size: var(--skf-size-8);
-			border-radius: 0.25rem; /* Missing token */
-			overflow: hidden;
+		@layer base {
+			#root {
+				--_skf-progress-value: 0%;
 
-			&::after {
-				background-color: var(--skf-bg-color-emphasised);
-				block-size: inherit;
-				border-radius: inherit;
-				content: '';
-				display: block;
-				inline-size: var(--_skf-progress-value, auto);
-				transition: inline-size calc(var(--skf-motion-duration-slow) * 1ms)
-					cubic-bezier(0.4, 0.93, 0.71, 0.89);
+				background: var(--skf-bg-color-neutral-3);
+				block-size: var(--skf-size-8);
+				border-radius: 0.25rem; /* Missing token */
+				overflow: hidden;
+
+				&::after {
+					background-color: var(--skf-bg-color-emphasised);
+					block-size: inherit;
+					border-radius: inherit;
+					content: '';
+					display: block;
+					inline-size: var(--_skf-progress-value);
+					transition: inline-size calc(var(--skf-motion-duration-slow) * 1ms)
+						cubic-bezier(0.4, 0.93, 0.71, 0.89);
+				}
 			}
 		}
 
-		.progress--animated::after {
-			animation: skf-progress-animation calc(var(--skf-motion-duration-slow) * 1ms) linear infinite
-				reverse;
-			background-image: linear-gradient(
-				-45deg,
-				rgba(255 255 255 / 20%) 25%,
-				transparent 25%,
-				transparent 50%,
-				rgba(255 255 255 / 20%) 50%,
-				rgba(255 255 255 / 20%) 75%,
-				transparent 75%,
-				transparent
-			);
-			background-size: 50px 50px;
+		@layer mods {
+			:host(:state(animated)) {
+				#root::after {
+					animation: skf-progress-animation calc(var(--skf-motion-duration-slow) * 1ms) linear
+						infinite reverse;
+					background-image: linear-gradient(
+						-45deg,
+						rgb(255 255 255 / 20%) 25%,
+						transparent 25%,
+						transparent 50%,
+						rgb(255 255 255 / 20%) 50%,
+						rgb(255 255 255 / 20%) 75%,
+						transparent 75%,
+						transparent
+					);
+					background-size: 50px 50px;
+				}
+			}
 		}
+	}
 
-		@keyframes skf-progress-animation {
-			to {
-				background-position: 50px 50px;
-			}
+	@keyframes skf-progress-animation {
+		to {
+			background-position: 50px 50px;
 		}
 	}
 `;

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

@@ -1,16 +1,17 @@
 import '../icon/icon.js';
 import { FormBase } from '../../internal/components/formBase.js';
+import type { FormFieldSeverity } from '../../internal/types.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 [zeroheight](https://zeroheight.com/853e936c9/p/78d5dd-radio-button) for design principles
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/78d5dd-radio-button) 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
+ * @attribute {boolean} [disabled=false] - If true, sets disabled state
+ * @attribute {boolean} [required=false] - 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
+ * @event {Event} change - When the value of the input changes
  *
  * @slot - The radios label. Alternatively, you can use the `label` attribute.
  *
@@ -18,13 +19,17 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
     static styles: CSSResultGroup;
+    /**
+     * @internal
+     * Initial state saved here as default for form resets.
+     */
     private _initialChecked;
     /** If true, outputs helping hints in console */
-    debug?: boolean;
+    debug: boolean;
     /** If true, outputs helping hints in console */
-    checked?: boolean;
+    checked: boolean;
     /** If true, forces component to invalid state until removed */
-    customInvalid?: boolean;
+    customInvalid: boolean;
     /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
     label?: string;
     /** If defined, adds name to the input-element */
@@ -33,13 +38,10 @@ export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
     requiredLabel?: string;
     /** Size of the Radio */
     size: 'sm' | 'md';
-    /**
-     * If defined, displays provided severity state
-     * @type {"success" | "info" | "warning" | "alert"}
-     */
-    severity?: FormFieldBaseProps['severity'];
+    /** If defined, displays provided severity state */
+    severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */
-    showValid?: boolean;
+    showValid: boolean;
     /** The current value of the input field  */
     value: string;
     /** @internal */
@@ -49,9 +51,13 @@ export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
     private $input?;
     connectedCallback(): void;
     protected firstUpdated(): void;
+    /** @internal */
     handleInvalidChange(): void;
+    /** @internal */
     handleDebugInvalid(): void;
+    /** @internal */
     handleCheckedChanged(): void;
+    /** @internal */
     handleCustomInvalidChange(): void;
     /** @internal */
     private _resetValue;

package/dist/components/radio/radio.component.js

@@ -2,20 +2,20 @@ import "../icon/icon.js";
 import { FormBase as c } from "../../internal/components/formBase.js";
 import { watch as n } from "../../internal/helpers/watch.js";
 import { Asterisk as p } from "../../internal/templates/asterisk.js";
-import v from "../../styles/component.styles.js";
+import { componentStyles as v } from "../../styles/component.styles.js";
 import { html as m } from "lit";
 import { property as r, state as f, query as y } from "lit/decorators.js";
 import { ifDefined as b } from "lit/directives/if-defined.js";
 import { live as _ } from "lit/directives/live.js";
-import g from "./radio.styles.js";
-var k = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (u, e, s, o) => {
-  for (var a = o > 1 ? void 0 : o ? C(e, s) : e, l = u.length - 1, h; l >= 0; l--)
-    (h = u[l]) && (a = (o ? h(e, s, a) : h(a)) || a);
-  return o && a && k(e, s, a), a;
+import { styles as g } from "./radio.styles.js";
+var k = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (u, e, s, l) => {
+  for (var a = l > 1 ? void 0 : l ? C(e, s) : e, o = u.length - 1, h; o >= 0; o--)
+    (h = u[o]) && (a = (l ? h(e, s, a) : h(a)) || a);
+  return l && a && k(e, s, a), a;
 };
 const d = class d extends c {
   constructor() {
-    super(...arguments), this._initialChecked = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (e) => {
+    super(...arguments), this._initialChecked = !1, this.debug = !1, this.checked = !1, this.customInvalid = !1, this.size = "md", this.showValid = !1, this.value = "", this._invalid = !1, this._resetValue = (e) => {
       e.stopPropagation(), this.checked = this._initialChecked, this.$input && (this.$input.checked = !!this._initialChecked), this.setFormValue(this.checked ? this.value : "");
     };
   }
@@ -25,8 +25,8 @@ const d = class d extends c {
   firstUpdated() {
     var e;
     (e = this.$input) == null || e.addEventListener("change", (s) => {
-      var o;
-      s.stopPropagation(), this.pristine = !1, this.checked = (o = this.$input) == null ? void 0 : o.checked, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(""), this.emitEvent("change");
+      var l;
+      s.stopPropagation(), this.pristine = !1, this.checked = ((l = this.$input) == null ? void 0 : l.checked) ?? !1, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(""), this.emitEvent("change");
     }), this.addEventListener("invalid", (s) => {
       this.pristine = !1, this._invalid = !0, this.customErrorDisplay && s.preventDefault();
     }), this._initialChecked = this.checked, this.addEventListener("reset", this._resetValue);
@@ -55,8 +55,8 @@ const d = class d extends c {
     const e = this.name;
     if (!e) return;
     (this.form ?? document).querySelectorAll(`skf-radio[name="${e}"]`).forEach((a) => {
-      const l = this.form === a.form, h = !this.form && !a.form;
-      a !== this && (l || h) && (a.checked = !1);
+      const o = this.form === a.form, h = !this.form && !a.form;
+      a !== this && (o || h) && (a.checked = !1);
     });
   }
   /** @internal */
@@ -81,7 +81,7 @@ const d = class d extends c {
 				<input
 					?disabled=${this.disabled}
 					?required=${this.required}
-					.checked=${_(!!this.checked)}
+					.checked=${_(this.checked)}
 					aria-invalid=${!!this._invalid}
 					name=${b(this.name)}
 					type="radio"

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

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

package/dist/components/radio/radio.styles.js

@@ -99,5 +99,5 @@ const e = [
 	`
 ];
 export {
-  e as default
+  e as styles
 };

package/dist/components/segmented-button/segmented-button-item.component.d.ts

@@ -0,0 +1,36 @@
+import '../icon/icon.js';
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+export interface SkfSegmentedButtonItemEvent {
+    item: SkfSegmentedButtonItem;
+}
+/**
+ * The `<skf-segmented-button-item>` is used in conjunction with the `<skf-segmented-button>` component
+ *
+ * @event {CustomEvent} skf-segmented-button-item-select - Fired when selected
+ *
+ * @slot - Label for the button
+ *
+ * @tagname skf-segmented-button-item
+ */
+export declare class SkfSegmentedButtonItem extends SkfElement {
+    static styles: CSSResultGroup;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    /** If true, items is marked as disabled */
+    disabled: boolean;
+    /** If true, items is marked as selected */
+    selected: boolean;
+    /** Sets the item value */
+    value: string;
+    constructor();
+    /** @internal */
+    isMultiple: boolean;
+    /** @internal */
+    private _handleClick;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/segmented-button/segmented-button-item.component.js

@@ -0,0 +1,56 @@
+import "../icon/icon.js";
+import { SkfElement as n } from "../../internal/components/skf-element.js";
+import { componentStyles as f } from "../../styles/component.styles.js";
+import { LitElement as u, nothing as m, html as c } from "lit";
+import { property as r, state as v } from "lit/decorators.js";
+import { ifDefined as l } from "lit/directives/if-defined.js";
+import { styles as y } from "./segmented-button-item.styles.js";
+var b = Object.defineProperty, i = (a, p, d, k) => {
+  for (var e = void 0, o = a.length - 1, h; o >= 0; o--)
+    (h = a[o]) && (e = h(p, d, e) || e);
+  return e && b(p, d, e), e;
+};
+const s = class s extends n {
+  constructor() {
+    super(), this.disabled = !1, this.selected = !1, this.value = "", this.isMultiple = !1, this._handleClick = () => {
+      this.emit("skf-segmented-button-item-select", {
+        detail: {
+          item: this
+        }
+      });
+    }, this.addEventListener("click", this._handleClick);
+  }
+  render() {
+    return c`
+			<button
+				?disabled=${this.disabled}
+				aria-checked=${l(this.isMultiple ? void 0 : this.selected ? "true" : "false")}
+				aria-pressed=${l(this.isMultiple ? this.selected ? "true" : "false" : void 0)}
+				id="root"
+				role=${l(this.isMultiple ? void 0 : "radio")}
+				type="button"
+				value=${this.value}
+			>
+				${this.selected ? c`<skf-icon color="emphasised" name="check" size="sm"></skf-icon>` : m}
+				<slot></slot>
+			</button>
+		`;
+  }
+};
+s.styles = [f, y], s.shadowRootOptions = { ...u.shadowRootOptions, delegatesFocus: !0 };
+let t = s;
+i([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled");
+i([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "selected");
+i([
+  r({ reflect: !0 })
+], t.prototype, "value");
+i([
+  v()
+], t.prototype, "isMultiple");
+export {
+  t as SkfSegmentedButtonItem
+};

package/dist/components/segmented-button/segmented-button-item.d.ts

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

package/dist/components/segmented-button/segmented-button-item.js

@@ -0,0 +1,6 @@
+import { SkfSegmentedButtonItem as e } from "./segmented-button-item.component.js";
+e.define("skf-segmented-button-item");
+export {
+  e as SkfSegmentedButtonItem,
+  e as default
+};

package/dist/components/segmented-button/segmented-button-item.styles.d.ts

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

package/dist/components/segmented-button/segmented-button-item.styles.js

@@ -0,0 +1,62 @@
+import { css as e } from "lit";
+const o = e`
+	@layer components {
+		:host {
+			display: contents;
+		}
+
+		#root {
+			align-items: center;
+			background-color: var(--_skf-segmented-button-item-bg, transparent);
+			border: var(--skf-border-width-md) solid var(--_skf-segmented-button-item-border, transparent);
+			border-radius: 4px; /* TODO: Missing token */
+			display: flex;
+			flex: 1;
+			font-size: var(--skf-font-size-75);
+			font-weight: var(--skf-font-weight-bold);
+			gap: var(--skf-spacing-25);
+			justify-content: center;
+			min-inline-size: 0;
+			padding-inline: var(--skf-spacing-50);
+			position: relative;
+
+			:host(:not(:last-of-type)) &::after {
+				background-color: var(--skf-border-color-primary);
+				block-size: calc(100% - 5px);
+				content: '';
+				inline-size: 1px;
+
+				/* inset-inline-end: calc((var(--skf-spacing-75) + 2px + var(--skf-border-width-md) * 2) / -2); */
+				inset-inline-end: -9px;
+				position: absolute;
+			}
+
+			&:disabled {
+				color: var(--skf-interactive-text-color-disabled);
+				font-weight: 500;
+			}
+
+			&:is([aria-checked='true'], [aria-pressed='true']) {
+				--_skf-segmented-button-item-border: var(--skf-border-color-emphasised);
+			}
+
+			&:hover:not(:disabled) {
+				--_skf-segmented-button-item-bg: var(--skf-interactive-bg-color-secondary-hover);
+			}
+
+			&:is(:focus, :active):not(:disabled) {
+				--_skf-segmented-button-item-bg: var(--skf-interactive-bg-color-secondary-active);
+			}
+		}
+
+		slot {
+			display: block;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+`;
+export {
+  o as styles
+};

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

@@ -0,0 +1,30 @@
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-segmented-button>` component consists of multiple `<skf-segmented-button-item>`, working together.
+ *
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/68ff54-segmented-buttons) for design principles
+ *
+ * @slot - One or more `<skf-segmented-button-item>`
+ *
+ * @tagname skf-segmented-button
+ */
+export declare class SkfSegmentedButton extends SkfElement {
+    static styles: CSSResultGroup;
+    /** If true, allowes multiple items to be selected */
+    multiple: boolean;
+    /** @internal */
+    value: string;
+    /** @internal */
+    private items;
+    firstUpdated(): void;
+    /** @internal */
+    private _handleSegmentedButtonItemSelected;
+    /** @internal */
+    private _handleSlotChange;
+    /** @internal */
+    private _handleKeyDown;
+    /** @internal */
+    private _getKeyDownNextItem;
+    render(): import("lit").TemplateResult<1>;
+}