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

package/dist/components/select-option-group/select-option-group.style.js

@@ -0,0 +1,18 @@
+import { css as e } from "lit";
+const t = e`
+	@layer components {
+		#label {
+			align-items: center;
+			block-size: var(--_skf-select-option-group-height, var(--skf-size-44));
+			display: flex;
+			font-weight: var(--skf-font-weight-bold);
+
+			:host-context(skf-select[size='sm']) & {
+				--_skf-select-option-group-height: var(--skf-size-32);
+			}
+		}
+	}
+`;
+export {
+  t as styles
+};

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

@@ -9,13 +9,12 @@ import { type CSSResultGroup } from 'lit';
  * @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
+ * @slot - The Switchs label. Alternatively, you can use the `label` attribute.
  *
  * @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;
@@ -23,7 +22,7 @@ export declare class SkfSwitch extends FormBase implements FormFieldBaseProps {
     checked?: boolean;
     /** If true, hides the label visually */
     hideLabel?: boolean;
-    /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
+    /** 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 */
     name?: string;

package/dist/components/switch/switch.component.js

@@ -41,14 +41,17 @@ const h = class h extends o {
     var e;
     if (this._invalid = !1, this.required && !this.checked) {
       this.pristine || (this._invalid = !0);
-      const a = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : ((e = this.$input) == null ? void 0 : e.validationMessage) ?? "Please check this box if you want to proceed";
+      const a = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : (
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        ((e = this.$input) == null ? void 0 : e.validationMessage) || "Please check this box if you want to proceed"
+      );
       this.setValidity({ valueMissing: !0 }, String(a));
     } else
       this.setValidity({});
   }
   render() {
     return c`
-			<label id="switch">
+			<label id="root">
 				<input
 					?checked=${this.checked}
 					?disabled=${this.disabled}

package/dist/components/switch/switch.styles.js

@@ -8,11 +8,16 @@ const t = [
 				contain: layout;
 			}
 
-			label {
+			#root {
 				align-items: center;
+				color: var(--_skf-switch-color, var(--skf-text-color-primary));
 				display: flex;
 				grid-gap: var(--skf-spacing-50);
 
+				:host([disabled]) & {
+					--_skf-switch-color: var(--skf-interactive-text-color-disabled);
+				}
+
 				:host([size='sm']) & {
 					--_skf-switch-height: var(--skf-size-20);
 					--_skf-switch-width: var(--skf-size-32);

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

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

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

@@ -0,0 +1,29 @@
+import type { SkfTabGroup } from '@components/tab-group/tab-group.component.js';
+import { SkfElement } from '@internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+export interface SkfTabEvent {
+    tab: SkfTab;
+}
+/**
+ * The `<skf-tab>` is a component that displays a list of actions or options
+ *
+ * @event {CustomEvent} skf-tab-select - {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected
+ * @event click - Fired when the component is clicked
+ *
+ * @slot - The tab's label
+ *
+ * @tagname skf-tab
+ */
+export declare class SkfTab extends SkfElement {
+    static styles: CSSResultGroup;
+    /** The name of the tab-panel this tab is associated with. The panel must be located in the same tab group. */
+    panel: string;
+    selected: boolean;
+    variant: SkfTabGroup['variant'];
+    constructor();
+    /** @internal */
+    handleSelectedChange(): void;
+    /** @internal */
+    private _handleClick;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/tab/tab.component.js

@@ -0,0 +1,57 @@
+import { SkfElement as n } from "../../internal/components/skf-element.js";
+import { watch as h } from "../../internal/helpers/watch.js";
+import m from "../../styles/component.styles.js";
+import { html as f } from "lit";
+import { property as v, state as d } from "lit/decorators.js";
+import { classMap as b } from "lit/directives/class-map.js";
+import { styles as _ } from "./tab.styles.js";
+var u = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (c, s, l, r) => {
+  for (var e = r > 1 ? void 0 : r ? y(s, l) : s, i = c.length - 1, o; i >= 0; i--)
+    (o = c[i]) && (e = (r ? o(s, l, e) : o(e)) || e);
+  return r && e && u(s, l, e), e;
+};
+const p = class p extends n {
+  constructor() {
+    super(), this.panel = "", this.selected = !1, this.variant = "expanded", this._handleClick = () => {
+      this.emit("skf-tab-select", {
+        detail: {
+          tab: this
+        }
+      });
+    }, this.role = "tab", this.addEventListener("click", this._handleClick);
+  }
+  handleSelectedChange() {
+    this.ariaSelected = this.selected ? "true" : "false", this.tabIndex = this.selected ? 0 : -1;
+  }
+  render() {
+    return f`
+			<div
+				class=${b({
+      tab: !0,
+      "tab--expanded": this.variant === "expanded",
+      "tab--compressed": this.variant === "compressed",
+      "tab--selected": this.selected
+    })}
+			>
+				<slot class="tab__label"></slot>
+			</div>
+		`;
+  }
+};
+p.styles = [m, _];
+let t = p;
+a([
+  v({ reflect: !0 })
+], t.prototype, "panel", 2);
+a([
+  d()
+], t.prototype, "selected", 2);
+a([
+  d()
+], t.prototype, "variant", 2);
+a([
+  h("selected")
+], t.prototype, "handleSelectedChange", 1);
+export {
+  t as SkfTab
+};

package/dist/components/tab/tab.d.ts

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

package/dist/components/tab/tab.js

@@ -0,0 +1,6 @@
+import { SkfTab as f } from "./tab.component.js";
+f.define("skf-tab");
+export {
+  f as SkfTab,
+  f as default
+};

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

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

package/dist/components/tab/tab.styles.js

@@ -0,0 +1,123 @@
+import { css as o } from "lit";
+const e = o`
+	/* stylelint-disable selector-class-pattern */
+	@layer components {
+		:host {
+			contain: layout;
+			min-width: 0; /* Needed for truncation */
+			outline: transparent;
+		}
+
+		.tab {
+			color: var(--_skf-tab-color, var(--skf-text-color-primary));
+			cursor: pointer;
+			position: relative;
+
+			/* Indicator */
+			&::after {
+				background-color: var(--skf-color-brand-base);
+				block-size: 3px;
+				content: '';
+				inset-inline: 50%;
+				opacity: 0;
+				position: absolute;
+				transition: all calc(var(--skf-motion-duration-fast) * 1ms) var(--skf-motion-easing-ease-in);
+			}
+
+			:host(:focus-visible) & {
+				outline: var(--skf-border-width-md) solid var(--skf-color-brand-base);
+			}
+		}
+
+		.tab--selected::after {
+			inset-inline: 0;
+			opacity: 1;
+		}
+
+		/**
+		 * Compressed
+		 */
+		.tab--compressed {
+			padding-block-end: var(--skf-spacing-25);
+
+			/* Invisible bold label copy, to avoid layout shifts when selected */
+			&::before {
+				block-size: 0;
+				content: attr(data-label);
+				display: block;
+				font-weight: var(--skf-font-weight-bold);
+				visibility: hidden;
+			}
+
+			&::after {
+				inset-block-end: 0;
+			}
+
+			&:hover,
+			&:active {
+				&::after {
+					inset-inline: 0;
+					opacity: 1;
+				}
+			}
+
+			:host(:focus-visible) & {
+				outline-offset: 2px;
+			}
+		}
+
+		/**
+		 * Expanded
+		 */
+		.tab--expanded {
+			align-items: center;
+			background-color: var(--_skf-tab-bg-color, var(--skf-color-neutral-lightest));
+			block-size: var(--skf-size-44);
+			border-block-end: var(--skf-border-width-sm) solid
+				var(--_skf-tab-border-bottom-color, var(--skf-border-color-tertiary));
+			display: flex;
+			justify-content: center;
+			padding-inline: var(--skf-spacing-50);
+			transition: background-color calc(var(--skf-motion-duration-fast) * 1ms)
+				var(--skf-motion-easing-ease-in);
+
+			&::after {
+				inset-block-start: 0;
+			}
+
+			&:hover {
+				--_skf-tab-bg-color: var(--skf-color-blue-lighest);
+			}
+
+			:host(:focus-visible) & {
+				outline-offset: -2px;
+			}
+		}
+
+		.tab--expanded.tab--selected {
+			--_skf-tab-bg-color: var(--skf-bg-color-neutral-1);
+			--_skf-tab-border-bottom-color: transparent;
+			--_skf-tab-color: var(--skf-text-color-emphasised);
+
+			font-weight: var(--skf-font-weight-bold);
+
+			:host(:not(:first-of-type)) & {
+				border-inline-start: var(--skf-border-width-sm) solid var(--skf-border-color-tertiary);
+			}
+
+			:host(:not(:last-of-type)) & {
+				border-inline-end: var(--skf-border-width-sm) solid var(--skf-border-color-tertiary);
+			}
+		}
+
+		.tab__label {
+			display: block;
+			overflow-x: auto;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+`;
+export {
+  e as styles
+};

package/dist/components/tab-group/tab-group.component.d.ts

@@ -0,0 +1,43 @@
+import '@components/card/card.js';
+import { SkfElement } from '@internal/components/skf-element';
+import { type CSSResultGroup, type PropertyValues } from 'lit';
+/**
+ * The `<skf-tab-group>` is a component that displays a list of actions or options.
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @slot - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements
+ * @slot tabs - Used for grouping tabs in the tab group. Must be <skf-tab> elements
+ *
+ * @tagname skf-tab-group
+ */
+export declare class SkfTabGroup extends SkfElement {
+    static styles: CSSResultGroup;
+    /** Sets the default selected tab */
+    defaultSelected: number;
+    /** If true, removes border */
+    noBorder: boolean;
+    /** If true, removes padding */
+    noPadding: boolean;
+    /** If true, component fills the parent element height */
+    stretch: boolean;
+    /** Sets the appearance of the tabs */
+    variant: 'compressed' | 'expanded';
+    /** @internal */
+    private tabs;
+    /** @internal */
+    private panels;
+    firstUpdated(): void;
+    protected updated(_changedProperties: PropertyValues): void;
+    /** @internal */
+    private _getKeyDownNextTab;
+    /** @internal */
+    private _handleKeyDown;
+    /** @internal */
+    private _handleTabSelected;
+    /** @internal */
+    private _selectTab;
+    /** @internal */
+    private _syncTabsAndPanels;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/tab-group/tab-group.component.js

@@ -0,0 +1,98 @@
+import "../card/card.js";
+import { SkfElement as c } from "../../internal/components/skf-element.js";
+import b from "../../styles/component.styles.js";
+import { html as f } from "lit";
+import { property as o, queryAssignedElements as p } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { styles as y } from "./tab-group.styles.js";
+var g = Object.defineProperty, i = (h, t, s, r) => {
+  for (var e = void 0, n = h.length - 1, d; n >= 0; n--)
+    (d = h[n]) && (e = d(t, s, e) || e);
+  return e && g(t, s, e), e;
+};
+const l = class l extends c {
+  constructor() {
+    super(...arguments), this.defaultSelected = 0, this.noBorder = !1, this.noPadding = !1, this.stretch = !1, this.variant = "expanded", this._handleKeyDown = (t) => {
+      if (["ArrowLeft", "ArrowRight"].includes(t.key)) {
+        const s = this._getKeyDownNextTab(t.key);
+        s.focus({ preventScroll: !0 }), this._selectTab(s);
+      }
+    }, this._handleTabSelected = (t) => {
+      const s = t.detail.tab;
+      this._selectTab(s);
+    }, this._selectTab = (t) => {
+      this.tabs.forEach((s) => {
+        const r = this.panels.find((e) => e.name === s.panel);
+        s.selected = s === t, r && (r.active = s === t);
+      });
+    }, this._syncTabsAndPanels = () => {
+      this.tabs.forEach((t, s) => {
+        const r = (s + 1).toString();
+        t.id = t.id ? t.id : `skf-tab-${r}`, t.selected = this.defaultSelected === s;
+        const e = this.panels.find((n) => n.name === t.panel);
+        e && (e.id = e.id ? e.id : `skf-tab-panel-${r}`, t.setAttribute("aria-controls", e.id), e.setAttribute("aria-labelledby", t.id), e.active = t.selected);
+      });
+    };
+  }
+  firstUpdated() {
+    this.addEventListener("skf-tab-select", this._handleTabSelected), this._syncTabsAndPanels();
+  }
+  updated(t) {
+    t.has("variant") && this.tabs.forEach((s) => {
+      s.variant = this.variant;
+    });
+  }
+  /** @internal */
+  _getKeyDownNextTab(t) {
+    const e = (this.tabs.findIndex((d) => d.selected) + (t === "ArrowRight" ? 1 : -1)) % this.tabs.length;
+    return this.tabs[e < 0 ? this.tabs.length - 1 : e];
+  }
+  render() {
+    return f`
+			<div
+				@keydown=${this._handleKeyDown}
+				class=${u({
+      "tab-group": !0,
+      "tab-group--compressed": this.variant === "compressed",
+      "tab-group--expanded": this.variant === "expanded",
+      "tab-group--no-border": this.noBorder,
+      "tab-group--no-padding": this.noPadding,
+      "tab-group--stretch": this.stretch
+    })}
+			>
+				<div class="tab-group__tabs" role="tablist">
+					<slot name="tabs"></slot>
+				</div>
+				<div class="tab-group__body">
+					<slot></slot>
+				</div>
+			</div>
+		`;
+  }
+};
+l.styles = [b, y];
+let a = l;
+i([
+  o({ type: Number, attribute: "default-selected" })
+], a.prototype, "defaultSelected");
+i([
+  o({ type: Boolean, attribute: "no-border" })
+], a.prototype, "noBorder");
+i([
+  o({ type: Boolean, attribute: "no-padding" })
+], a.prototype, "noPadding");
+i([
+  o({ type: Boolean })
+], a.prototype, "stretch");
+i([
+  o({ reflect: !0 })
+], a.prototype, "variant");
+i([
+  p({ slot: "tabs" })
+], a.prototype, "tabs");
+i([
+  p()
+], a.prototype, "panels");
+export {
+  a as SkfTabGroup
+};

package/dist/components/tab-group/tab-group.d.ts

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

package/dist/components/tab-group/tab-group.js

@@ -0,0 +1,6 @@
+import { SkfTabGroup as f } from "./tab-group.component.js";
+f.define("skf-tab-group");
+export {
+  f as SkfTabGroup,
+  f as default
+};

package/dist/components/tab-group/tab-group.styles.d.ts

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

package/dist/components/tab-group/tab-group.styles.js

@@ -0,0 +1,75 @@
+import { css as r } from "lit";
+const a = r`
+	/* stylelint-disable selector-class-pattern */
+	@layer components {
+		:host {
+			contain: layout;
+		}
+
+		:host([stretch]) {
+			block-size: 100%;
+		}
+
+		/**
+		 * Root
+		 */
+		.tab-group {
+			background-color: var(--skf-bg-color-neutral-1);
+		}
+
+		.tab-group--expanded {
+			border: var(
+				--_skf-tab-group-border,
+				var(--skf-border-width-sm) solid var(--skf-border-color-tertiary)
+			);
+			border-end-end-radius: var(--skf-border-radius-sm);
+			border-end-start-radius: var(--skf-border-radius-sm);
+			box-shadow: var(--skf-shadow-md);
+
+			::slotted(skf-tab) {
+				flex: 1;
+			}
+		}
+
+		.tab-group--no-border {
+			--_skf-tab-group-border: none;
+		}
+
+		.tab-group--stretch {
+			block-size: inherit;
+			display: flex;
+			flex-direction: column;
+		}
+
+		/**
+		 * Tabs
+		 */
+		.tab-group__tabs {
+			display: flex;
+
+			.tab-group--compressed & {
+				gap: var(--skf-spacing-100);
+			}
+		}
+
+		/**
+		 * Body
+		 */
+		.tab-group__body {
+			padding-block: var(--_skf-tab-group-body-padding-block, var(--skf-spacing-100) 0);
+
+			.tab-group--stretch & {
+				overflow-y: auto;
+			}
+
+			.tab-group--expanded:not(.tab-group--no-padding) & {
+				--_skf-tab-group-body-padding-block: var(--skf-spacing-100);
+
+				padding-inline: var(--skf-spacing-100);
+			}
+		}
+	}
+`;
+export {
+  a as styles
+};

package/dist/components/tab-panel/tab-panel.component.d.ts

@@ -0,0 +1,19 @@
+import { SkfElement } from '@internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-tab-panel>` is a component that displays a list of actions or options.
+ *
+ * @slot - The tab panel's content
+ *
+ * @tagname skf-tab-panel
+ */
+export declare class SkfTabPanel extends SkfElement {
+    static styles: CSSResultGroup;
+    /** The tab panel's name. */
+    name: string;
+    active: boolean;
+    constructor();
+    /** @internal */
+    handleActiveChanged(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/tab-panel/tab-panel.component.js

@@ -0,0 +1,36 @@
+import { SkfElement as c } from "../../internal/components/skf-element.js";
+import { watch as h } from "../../internal/helpers/watch.js";
+import l from "../../styles/component.styles.js";
+import { html as v } from "lit";
+import { property as f, state as d } from "lit/decorators.js";
+import { styles as y } from "./tab-panel.styles.js";
+var u = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (n, r, s, o) => {
+  for (var t = o > 1 ? void 0 : o ? _(r, s) : r, i = n.length - 1, p; i >= 0; i--)
+    (p = n[i]) && (t = (o ? p(r, s, t) : p(t)) || t);
+  return o && t && u(r, s, t), t;
+};
+const m = class m extends c {
+  constructor() {
+    super(), this.name = "", this.active = !1, this.role = "tabpanel";
+  }
+  handleActiveChanged() {
+    this.ariaHidden = this.active ? "false" : "true", this.tabIndex = this.active ? 0 : -1;
+  }
+  render() {
+    return v`<slot></slot>`;
+  }
+};
+m.styles = [l, y];
+let e = m;
+a([
+  f()
+], e.prototype, "name", 2);
+a([
+  d()
+], e.prototype, "active", 2);
+a([
+  h("active")
+], e.prototype, "handleActiveChanged", 1);
+export {
+  e as SkfTabPanel
+};

package/dist/components/tab-panel/tab-panel.d.ts

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

package/dist/components/tab-panel/tab-panel.js

@@ -0,0 +1,6 @@
+import { SkfTabPanel as a } from "./tab-panel.component.js";
+a.define("skf-tab-panel");
+export {
+  a as SkfTabPanel,
+  a as default
+};

package/dist/components/tab-panel/tab-panel.styles.d.ts

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

package/dist/components/tab-panel/tab-panel.styles.js

@@ -0,0 +1,13 @@
+import { css as i } from "lit";
+const s = i`
+	:host {
+		content-visibility: hidden;
+	}
+
+	:host([aria-hidden='false']) {
+		content-visibility: visible;
+	}
+`;
+export {
+  s as styles
+};