@skf-design-system/ui-components 1.0.2-beta.9 → 2.0.0-alpha.0

package/README.md

@@ -22,8 +22,8 @@
   <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">
     <img alt="MS Teams" src="https://img.shields.io/badge/MS Teams-4E5FBF?style=for-the-badge&logo=windows&logoColor=white">
   </a>
-  <a href="https://beta--641c13cdbf6bbfbd6da88a83.chromatic.com">
-    <img alt="Storybook - Stable" src="https://img.shields.io/badge/Stable-FF4785?style=for-the-badge&logo=storybook&logoColor=white">
+  <a href="https://develop--661e8ae0ef9b24dadeea9b18.chromatic.com/">
+    <img alt="Storybook" src="https://img.shields.io/badge/Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white">
   </a>
   <a href="https://zeroheight.com/853e936c9/p/07d378-component-overview">
     <img alt="Storybook - Beta" src="https://img.shields.io/badge/zeroheight-F63E7C?style=for-the-badge">

package/dist/components/accordion/accordion.css.js

@@ -0,0 +1,4 @@
+const o = "@layer skf-wc.components{:host{border-block-start:1px solid var(--skf-border-color-base-primary)}}";
+export {
+  o as default
+};

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

@@ -1,6 +1,34 @@
-import { SkfAccordion } from './accordion.component.js';
-export * from './accordion.component.js';
-export default SkfAccordion;
+import type { SkfAccordionItemHeadingType } from '../accordion-item/accordion-item';
+import { SkfElement } from '../../internal/skf-element';
+import { type PropertyValues } from 'lit';
+/**
+ * The `<skf-accordion>` component consists of one or more `<skf-accordion-item>` item(s) working together
+ *
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles
+ *
+ * @event {Event} toggle - Emitted when an item is toggled
+ *
+ * @slot - Expects one or more <skf-accordion-item> element(s)
+ *
+ * @tagname skf-accordion
+ */
+export default class SkfAccordion extends SkfElement {
+    static css: string;
+    /** Defines which heading element will be rendered */
+    headingAs?: SkfAccordionItemHeadingType;
+    /** If true, allows multiple accordion items to open */
+    multiple: boolean;
+    /** If true, will truncate all headings in collapsed state */
+    truncate: boolean;
+    /** @internal */
+    private _items?;
+    protected updated(_changedProperties: PropertyValues): void;
+    /** @internal */
+    private _setItemAttributes;
+    /** @internal */
+    private _onChildToggle;
+    render(): import("lit").TemplateResult<1>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'skf-accordion': SkfAccordion;

package/dist/components/accordion/accordion.js

@@ -1,6 +1,58 @@
-import { SkfAccordion as o } from "./accordion.component.js";
-o.define("skf-accordion");
+import { SkfElement as h } from "../../internal/skf-element.js";
+import { html as f } from "lit";
+import { property as u, queryAssignedElements as p, customElement as c } from "lit/decorators.js";
+import g from "./accordion.css.js";
+var m = Object.defineProperty, d = Object.getOwnPropertyDescriptor, o = (t, i, e, a) => {
+  for (var s = a > 1 ? void 0 : a ? d(i, e) : i, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (s = (a ? l(i, e, s) : l(s)) || s);
+  return a && s && m(i, e, s), s;
+};
+let r = class extends h {
+  constructor() {
+    super(...arguments), this.multiple = !1, this.truncate = !1, this._setItemAttributes = () => {
+      this._items?.forEach((t) => {
+        this.headingAs ? t.setAttribute("heading-as", this.headingAs) : t.hasAttribute("heading-as") && t.removeAttribute("heading-as"), this.truncate ? t.setAttribute("truncate", "") : t.hasAttribute("truncate") && t.removeAttribute("truncate");
+      });
+    };
+  }
+  updated(t) {
+    (t.has("headingAs") || t.has("truncate")) && this._setItemAttributes();
+  }
+  /** @internal */
+  _onChildToggle(t) {
+    if (this.multiple || t.defaultPrevented) return;
+    const i = t.target;
+    this._items?.length && this._items.forEach((e) => {
+      e !== i && e.open && e.setClose();
+    });
+  }
+  render() {
+    return f`
+			<slot
+				@toggle=${(t) => {
+      this._onChildToggle(t);
+    }}
+				@slotchange=${this._setItemAttributes}
+			></slot>
+		`;
+  }
+};
+r.css = g;
+o([
+  u({ type: String, attribute: "heading-as" })
+], r.prototype, "headingAs", 2);
+o([
+  u({ type: Boolean })
+], r.prototype, "multiple", 2);
+o([
+  u({ type: Boolean })
+], r.prototype, "truncate", 2);
+o([
+  p({ selector: "skf-accordion-item" })
+], r.prototype, "_items", 2);
+r = o([
+  c("skf-accordion")
+], r);
 export {
-  o as SkfAccordion,
-  o as default
+  r as default
 };

package/dist/components/accordion-item/accordion-item.css.js

@@ -0,0 +1,4 @@
+const e = '@layer skf-wc.components{@layer base{:host{border-block-end:1px solid var(--skf-border-color-base-primary);interpolate-size:allow-keywords}summary{align-items:center;cursor:pointer;display:flex;gap:var(--skf-spacing-100);justify-content:space-between;padding:var(--skf-spacing-100) 0;-webkit-user-select:none;user-select:none}summary::marker{content:""}#heading{font-size:var(--skf-body-font-size-xl);font-weight:var(--skf-body-font-weight-base)}:host([truncate]) details:not([open]) #heading{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#body{padding-block-end:var(--skf-spacing-100)}::details-content{block-size:0;overflow:hidden;transition:block-size var(--skf-motion-duration-slow) ease,content-visibility var(--skf-motion-duration-slow) ease allow-discrete}}@layer states{[open]::details-content{block-size:auto}}}';
+export {
+  e as default
+};

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

@@ -0,0 +1,43 @@
+import '../heading/heading';
+import type { SkfHeadingType } from '../heading/heading';
+import '../icon/icon';
+import { SkfElement } from '../../internal/skf-element';
+export type SkfAccordionItemHeadingType = Exclude<SkfHeadingType, 'h1'>;
+/**
+ * The `<skf-accordion-item>` is used in conjunction with the `<skf-accordion>` component
+ *
+ * @event {Event} toggle - Event emitted when toggled
+ *
+ * @slot - Main content
+ *
+ * @tagname skf-accordion-item
+ */
+export default class SkfAccordionItem extends SkfElement {
+    #private;
+    static css: string;
+    /** Heading for the details/summary */
+    heading: string;
+    /** Defines which heading element will be rendered */
+    headingAs?: SkfAccordionItemHeadingType;
+    /** If true, will set the accordion-item to be open by default */
+    open: boolean;
+    /** If true, will truncate the heading in accordion-item state */
+    truncate: boolean;
+    /** @internal */
+    private $details?;
+    protected firstUpdated(): void;
+    /** @internal */
+    _handleOpenChange(): void;
+    /** @internal */
+    private _handleClick;
+    /** Class method as alternative to manipulate attribute */
+    setClose(): void;
+    /** Class method as alternative to manipulate attribute */
+    setOpen(): void;
+    render(): import("lit").TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-accordion-item': SkfAccordionItem;
+    }
+}

package/dist/components/accordion-item/accordion-item.js

@@ -0,0 +1,79 @@
+import "../heading/heading.js";
+import "../icon/icon.js";
+import { watch as m } from "../../internal/helpers/watch.js";
+import { SkfElement as _ } from "../../internal/skf-element.js";
+import { property as p, query as u, customElement as v } from "lit/decorators.js";
+import { ifDefined as g } from "lit/directives/if-defined.js";
+import { html as y } from "lit/static-html.js";
+import $ from "./accordion-item.css.js";
+var C = Object.defineProperty, k = Object.getOwnPropertyDescriptor, f = (t) => {
+  throw TypeError(t);
+}, a = (t, e, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? k(e, i) : e, h = t.length - 1, d; h >= 0; h--)
+    (d = t[h]) && (r = (o ? d(e, i, r) : d(r)) || r);
+  return o && r && C(e, i, r), r;
+}, c = (t, e, i) => e.has(t) || f("Cannot " + i), O = (t, e, i) => (c(t, e, "read from private field"), e.get(t)), w = (t, e, i) => e.has(t) ? f("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), l = (t, e, i, o) => (c(t, e, "write to private field"), e.set(t, i), i), n;
+let s = class extends _ {
+  constructor() {
+    super(...arguments), w(this, n, !1), this.heading = "", this.open = !1, this.truncate = !1, this._handleClick = () => {
+      this.emit("toggle"), l(this, n, !0), this.open = !this.open;
+    };
+  }
+  firstUpdated() {
+    this.open && this.$details && (this.$details.open = this.open);
+  }
+  _handleOpenChange() {
+    if (O(this, n)) {
+      l(this, n, !1);
+      return;
+    }
+    this.$details && (this.$details.open = this.open);
+  }
+  /** Class method as alternative to manipulate attribute */
+  setClose() {
+    this.open = !1, this.$details && (this.$details.open = !1);
+  }
+  /** Class method as alternative to manipulate attribute */
+  setOpen() {
+    this.open = !0, this.$details && (this.$details.open = !0);
+  }
+  render() {
+    return y`
+			<details>
+				<summary @click=${this._handleClick}>
+					<skf-heading as=${g(this.headingAs)} id="heading">${this.heading}</skf-heading>
+					<skf-icon name=${this.open ? "minus" : "plus"} size="xl"></skf-icon>
+				</summary>
+				<div id="body">
+					<slot></slot>
+				</div>
+			</details>
+		`;
+  }
+};
+n = /* @__PURE__ */ new WeakMap();
+s.css = $;
+a([
+  p({ type: String })
+], s.prototype, "heading", 2);
+a([
+  p({ type: String, attribute: "heading-as" })
+], s.prototype, "headingAs", 2);
+a([
+  p({ type: Boolean, reflect: !0 })
+], s.prototype, "open", 2);
+a([
+  p({ type: Boolean })
+], s.prototype, "truncate", 2);
+a([
+  u("details")
+], s.prototype, "$details", 2);
+a([
+  m("open")
+], s.prototype, "_handleOpenChange", 1);
+s = a([
+  v("skf-accordion-item")
+], s);
+export {
+  s as default
+};

package/dist/components/alert/alert.css.js

@@ -0,0 +1,4 @@
+const o = '@layer skf-wc.components{:host{--mod-icon-color: currentcolor;--_skf-alert-bg-color: var(--_skf-color-bg-base, var(--skf-bg-color-info-primary));--_skf-alert-color: var(--_skf-color-on-base, var(--skf-text-color-on-info));--_skf-alert-grid-areas: "icon slot button";background-color:var(--_skf-alert-bg-color);color:var(--_skf-alert-color);display:grid;gap:var(--skf-spacing-050) var(--skf-spacing-100);grid:var(--_skf-alert-grid-areas) / auto 1fr auto;padding:var(--skf-spacing-100)}:host:has(skf-heading){--_skf-alert-grid-areas: "icon heading button" "icon slot button"}#icon{grid-area:icon}skf-heading{color:var(--_skf-alert-color);grid-area:heading}slot{display:block;font-size:var(--skf-body-font-size-md);grid-area:slot;line-height:var(--skf-body-line-height-md)}::slotted(a){color:var(--_skf-alert-color)}#close-btn{block-size:var(--skf-icon-size-xl);grid-area:button}#close-btn:focus-visible{outline:var(--skf-border-width-lg) solid var(--skf-border-color-focus);outline-offset:3px}}';
+export {
+  o as default
+};

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

@@ -1,8 +1,43 @@
-import { SkfAlert } from './alert.component.js';
-export * from './alert.component.js';
-export default SkfAlert;
+import '../heading/heading';
+import '../icon/icon';
+import { SkfElement } from '../../internal/skf-element';
+import type { HeadingType, Icon, Variant } from '../../internal/types';
+type SkfAlertHeadingType = Exclude<HeadingType, 'h1'>;
+type SkfAlertVariant = Exclude<Variant, 'brand' | 'neutral'>;
+/**
+ * The `<skf-alert>` is a component that displays a list of actions or options
+ *
+ * See [zeroheight](https://zeroheight.com/4a3b1cae8/v/latest/p/701447-alert) for design principles
+ *
+ * @event {CustomEvent} skf-alert-remove - Fired when the Alert is removed. Convenient to use together with the `vdom` property to avoid bypassing internal state management/React Virtual DOM
+ *
+ * @slot - The component's default slot
+ *
+ * @tagname skf-alert
+ */
+export default class SkfAlert extends SkfElement {
+    #private;
+    static css: string[];
+    /** If defined, renders a heading */
+    heading?: string;
+    /** If defined, controlls which element the heading will be rendered as */
+    headingAs?: SkfAlertHeadingType;
+    /** If defined, displays an alternative icon */
+    icon?: Icon;
+    /** Defines the alert's theme variant */
+    variant: SkfAlertVariant;
+    /** If true, prevents DOM updates. I.e in React, Preact handle self removal externally. */
+    vdom: boolean;
+    connectedCallback(): void;
+    /** @internal */
+    private _handleClick;
+    /** @internal */
+    private _setDefaultIcon;
+    render(): import("lit").TemplateResult<1>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'skf-alert': SkfAlert;
     }
 }
+export {};

package/dist/components/alert/alert.js

@@ -1,6 +1,81 @@
-import { SkfAlert as e } from "./alert.component.js";
-e.define("skf-alert");
+import "../heading/heading.js";
+import "../icon/icon.js";
+import { SkfElement as d } from "../../internal/skf-element.js";
+import { LocalizeController as v } from "../../utilities/localize.js";
+import { nothing as g, html as p } from "lit";
+import { property as o, customElement as u } from "lit/decorators.js";
+import { ifDefined as _ } from "lit/directives/if-defined.js";
+import y from "../../styles/utilities/variants.css.js";
+import k from "./alert.css.js";
+var C = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, f = (t) => {
+  throw TypeError(t);
+}, n = (t, e, r, s) => {
+  for (var a = s > 1 ? void 0 : s ? $(e, r) : e, c = t.length - 1, h; c >= 0; c--)
+    (h = t[c]) && (a = (s ? h(e, r, a) : h(a)) || a);
+  return s && a && C(e, r, a), a;
+}, w = (t, e, r) => e.has(t) || f("Cannot " + r), m = (t, e, r) => (w(t, e, "read from private field"), r ? r.call(t) : e.get(t)), S = (t, e, r) => e.has(t) ? f("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), l;
+let i = class extends d {
+  constructor() {
+    super(...arguments), S(this, l, new v(this)), this.variant = "info", this.vdom = !1, this._handleClick = () => {
+      this.emit("skf-alert-remove"), this.vdom || this.remove();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.internals.role = "status";
+  }
+  /** @internal */
+  _setDefaultIcon() {
+    return {
+      success: "checkmark",
+      warning: "triangleExclamation",
+      error: "warningDiamond",
+      info: "bulb"
+    }[this.variant];
+  }
+  render() {
+    return p`
+			<skf-icon
+				id="icon"
+				name=${this.icon ?? this._setDefaultIcon()}
+				size=${this.heading ? "xl" : "md"}
+			></skf-icon>
+			${this.heading ? p`
+						<skf-heading as=${_(this.headingAs)} styled-as="h4">
+							${this.heading}
+						</skf-heading>
+					` : g}
+			<slot></slot>
+			<button
+				@click=${this._handleClick}
+				aria-label="${m(this, l).term("close")} / ${m(this, l).term("remove")}"
+				id="close-btn"
+				type="button"
+			>
+				<skf-icon name="xmark" size=${this.heading ? "xl" : "md"}></skf-icon>
+			</button>
+		`;
+  }
+};
+l = /* @__PURE__ */ new WeakMap();
+i.css = [k, y];
+n([
+  o({ type: String })
+], i.prototype, "heading", 2);
+n([
+  o({ type: String, attribute: "heading-as" })
+], i.prototype, "headingAs", 2);
+n([
+  o({ type: String })
+], i.prototype, "icon", 2);
+n([
+  o({ type: String })
+], i.prototype, "variant", 2);
+n([
+  o({ type: Boolean })
+], i.prototype, "vdom", 2);
+i = n([
+  u("skf-alert")
+], i);
 export {
-  e as SkfAlert,
-  e as default
+  i as default
 };

package/dist/components/badge/badge.css.js

@@ -0,0 +1,4 @@
+const r = '@layer skf-wc.components{@layer base{:host{--mod-icon-color: currentcolor;--_skf-badge-bg-color: var(--_skf-color-bg-base, var(--skf-bg-color-brand-primary));--_skf-badge-color: var(--_skf-color-on-base, var(--skf-text-color-on-brand));--_skf-badge-border-radius: var(--skf-radius-md);border-radius:var(--_skf-badge-border-radius)}:host(:not([appearance="marker"])){align-items:center;block-size:var(--skf-ui-size-150);color:var(--_skf-badge-color);display:inline-flex;font-size:var(--skf-body-font-size-sm);gap:var(--skf-spacing-025);padding-inline:var(--skf-spacing-0375)}:host(:not([appearance="ghost"])){background-color:var(--_skf-badge-bg-color)}}@layer mods{:host([appearance="ghost"]){--_skf-badge-color: var(--_skf-color-on-null, var(--skf-text-color-brand-primary))}:host([appearance="marker"]){--_skf-badge-border-radius: 100%;aspect-ratio:1;flex-shrink:0;inline-size:var(--skf-icon-size-sm)}}}';
+export {
+  r as default
+};

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,28 @@
+import '../icon/icon';
+import { SkfElement } from '../../internal/skf-element';
+import type { Icon, Variant } from '../../internal/types';
+/**
+ * The `<skf-badge>` is used to notifying users of a change in information or status
+ *
+ * See [zeroheight](https://zeroheight.com/4a3b1cae8/v/latest/p/39c01f-badge) for design principles
+ *
+ * @slot - The component's default slot
+ *
+ * @tagname skf-badge
+ */
+export default class SkfBadge extends SkfElement {
+    static css: string[];
+    /** Defines the visual appearance */
+    appearance: 'filled' | 'ghost' | 'marker';
+    /** If defined, the icon will be displayed */
+    icon?: Icon;
+    /** If defined, sets the badge's theme variant */
+    variant?: Variant;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-badge': SkfBadge;
+    }
+}

package/dist/components/badge/badge.js

@@ -0,0 +1,43 @@
+import "../icon/icon.js";
+import { SkfElement as f } from "../../internal/skf-element.js";
+import { nothing as m, html as i } from "lit";
+import { property as c, customElement as u } from "lit/decorators.js";
+import y from "../../styles/utilities/variants.css.js";
+import h from "./badge.css.js";
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (l, r, n, o) => {
+  for (var e = o > 1 ? void 0 : o ? v(r, n) : r, p = l.length - 1, a; p >= 0; p--)
+    (a = l[p]) && (e = (o ? a(r, n, e) : a(e)) || e);
+  return o && e && g(r, n, e), e;
+};
+let t = class extends f {
+  constructor() {
+    super(...arguments), this.appearance = "filled";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.internals.role = "status";
+  }
+  render() {
+    return i`
+			${this.appearance === "marker" ? m : i`
+						${this.icon ? i`<skf-icon name=${this.icon} size="sm"></skf-icon>` : m}
+						<slot></slot>
+					`}
+		`;
+  }
+};
+t.css = [h, y];
+s([
+  c({ type: String, reflect: !0 })
+], t.prototype, "appearance", 2);
+s([
+  c({ type: String })
+], t.prototype, "icon", 2);
+s([
+  c({ type: String })
+], t.prototype, "variant", 2);
+t = s([
+  u("skf-badge")
+], t);
+export {
+  t as default
+};

package/dist/components/breadcrumb/breadcrumb.css.js

@@ -0,0 +1,4 @@
+const e = '@layer skf-wc.components{@layer base{ol{display:flex;gap:var(--skf-spacing-050)}}@layer states{:host(:state(overflowing)) ol{flex-wrap:wrap}:host(:state(overflowing)):has(skf-breadcrumb-item:nth-child(4)) ::slotted(skf-breadcrumb-item:first-of-type):after{color:var(--skf-text-color-base-primary);content:"/ ..."}}}';
+export {
+  e as default
+};

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -1,6 +1,35 @@
-import { SkfBreadcrumb } from './breadcrumb.component.js';
-export * from './breadcrumb.component.js';
-export default SkfBreadcrumb;
+import type SkfBreadcrumbItem from '../breadcrumb-item/breadcrumb-item';
+import { SkfElement } from '../../internal/skf-element';
+/**
+ * The `<skf-breadcrumb>` is a component that displays a list of actions or options
+ *
+ * See [zeroheight](https://zeroheight.com/4a3b1cae8/v/latest/p/034788-breadcrumbs) for design principles
+ *
+ * @slot - The component's default slot
+ *
+ * @tagname skf-breadcrumb
+ */
+export default class SkfBreadcrumb extends SkfElement {
+    #private;
+    static css: string;
+    /** @internal */
+    _isOverflowing: boolean;
+    /** @internal */
+    _items: SkfBreadcrumbItem[];
+    /** @internal */
+    private $list;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    /** @internal */
+    private _handleSlotChange;
+    /** @internal */
+    private _toggleItemVisibility;
+    /** @internal */
+    private _observeHostWidth;
+    /** @internal */
+    private _observeNavContainer;
+    render(): import("lit").TemplateResult<1>;
+}
 declare global {
     interface HTMLElementTagNameMap {
         'skf-breadcrumb': SkfBreadcrumb;

package/dist/components/breadcrumb/breadcrumb.js

@@ -1,6 +1,71 @@
-import { SkfBreadcrumb as r } from "./breadcrumb.component.js";
-r.define("skf-breadcrumb");
+import { SkfElement as g } from "../../internal/skf-element.js";
+import { html as m } from "lit";
+import { state as u, queryAssignedElements as w, query as b, customElement as y } from "lit/decorators.js";
+import O from "./breadcrumb.css.js";
+var C = Object.defineProperty, W = Object.getOwnPropertyDescriptor, f = (e) => {
+  throw TypeError(e);
+}, v = (e, t, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? W(t, s) : t, _ = e.length - 1, c; _ >= 0; _--)
+    (c = e[_]) && (r = (o ? c(t, s, r) : c(r)) || r);
+  return o && r && C(t, s, r), r;
+}, p = (e, t, s) => t.has(e) || f("Cannot " + s), l = (e, t, s) => (p(e, t, "read from private field"), s ? s.call(e) : t.get(e)), d = (e, t, s) => t.has(e) ? f("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), h = (e, t, s, o) => (p(e, t, "write to private field"), t.set(e, s), s), n, i;
+let a = class extends g {
+  constructor() {
+    super(...arguments), d(this, n), d(this, i), this._isOverflowing = !1, this._handleSlotChange = () => {
+      this._items.forEach((e, t) => {
+        e._isCurrent = t === this._items.length - 1;
+      });
+    }, this._toggleItemVisibility = () => {
+      this._items.forEach((e, t) => {
+        const s = this._items.length - 2;
+        e.classList.toggle(
+          "visually-hidden",
+          !!(t > 0 && t < s && this._isOverflowing)
+        );
+      });
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.internals.role = "navigation", this.role = "navigation", this.ariaLabel = this.ariaLabel ?? "Breadcrumb";
+  }
+  firstUpdated() {
+    this._handleSlotChange(), this._observeHostWidth();
+  }
+  /** @internal */
+  _observeHostWidth() {
+    h(this, i, new ResizeObserver(() => {
+      this.clientWidth > (l(this, n) ?? 0) && (h(this, n, null), l(this, i)?.disconnect(), this._isOverflowing = !1, this.internals.states.delete("overflowing"), this._toggleItemVisibility(), this._observeNavContainer());
+    })), l(this, i).observe(this);
+  }
+  /** @internal */
+  _observeNavContainer() {
+    h(this, i, new ResizeObserver(() => {
+      this.$list.clientWidth < this.$list.scrollWidth && (h(this, n, this.clientWidth), l(this, i)?.disconnect(), this._isOverflowing = !0, this.internals.states.add("overflowing"), this._toggleItemVisibility(), this._observeHostWidth());
+    })), l(this, i).observe(this.$list);
+  }
+  render() {
+    return m`
+			<ol>
+				<slot></slot>
+			</ol>
+		`;
+  }
+};
+n = /* @__PURE__ */ new WeakMap();
+i = /* @__PURE__ */ new WeakMap();
+a.css = O;
+v([
+  u()
+], a.prototype, "_isOverflowing", 2);
+v([
+  w()
+], a.prototype, "_items", 2);
+v([
+  b("ol")
+], a.prototype, "$list", 2);
+a = v([
+  y("skf-breadcrumb")
+], a);
 export {
-  r as SkfBreadcrumb,
-  r as default
+  a as default
 };

package/dist/components/breadcrumb-item/breadcrumb-item.css.js

@@ -0,0 +1,4 @@
+const r = '@layer skf-wc.components{@layer base{:host{display:flex;gap:var(--skf-spacing-050);white-space:nowrap}:host(:not(:first-of-type)):before{color:var(--skf-text-color-base-primary);content:"/"}a{--_skf-breadcrumb-item-link-color: var(--skf-text-color-brand-primary);color:var(--_skf-breadcrumb-item-link-color);font-size:var(--skf-body-font-size-sm);min-inline-size:var(--skf-ui-size-125);text-align:center;text-decoration:none}a[aria-current=page]{--_skf-breadcrumb-item-link-color: var(--skf-text-color-base-primary);font-weight:var(--skf-body-font-weight-strong)}}@layer states{a:hover{--_skf-breadcrumb-item-link-color: var(--skf-text-color-brand-hover)}a:focus-visible{outline:var(--skf-border-width-lg) solid var(--skf-border-color-focus);outline-offset:3px}}}';
+export {
+  r as default
+};

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

@@ -0,0 +1,24 @@
+import { SkfElement } from '../../internal/skf-element';
+/**
+ * The `<skf-breadcrumb-item>` is a component that displays a list of actions or options
+ *
+ * See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @slot - The Breadcrumb Items's default slot
+ *
+ * @tagname skf-breadcrumb-item
+ */
+export default class SkfBreadcrumbItem extends SkfElement {
+    static css: string[];
+    /** The URL that the hyperlink points to */
+    href: string;
+    /** @internal */
+    _isCurrent: boolean;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-breadcrumb-item': SkfBreadcrumbItem;
+    }
+}

package/dist/components/breadcrumb-item/breadcrumb-item.js

@@ -0,0 +1,39 @@
+import { SkfElement as n } from "../../internal/skf-element.js";
+import p from "../../styles/utilities/visually-hidden.css.js";
+import { html as a } from "lit";
+import { property as c, state as u, customElement as h } from "lit/decorators.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import _ from "./breadcrumb-item.css.js";
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, m = (f, t, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? b(t, o) : t, i = f.length - 1, l; i >= 0; i--)
+    (l = f[i]) && (r = (s ? l(t, o, r) : l(r)) || r);
+  return s && r && v(t, o, r), r;
+};
+let e = class extends n {
+  constructor() {
+    super(...arguments), this.href = "", this._isCurrent = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.internals.role = "listitem", this.role = "listitem";
+  }
+  render() {
+    return a`
+			<a aria-current=${d(this._isCurrent ? "page" : void 0)} href=${this.href}>
+				<slot></slot>
+			</a>
+		`;
+  }
+};
+e.css = [_, p];
+m([
+  c({ type: String })
+], e.prototype, "href", 2);
+m([
+  u()
+], e.prototype, "_isCurrent", 2);
+e = m([
+  h("skf-breadcrumb-item")
+], e);
+export {
+  e as default
+};