@sbb-esta/lyne-elements 0.52.1 → 0.53.0

package/breadcrumb/breadcrumb-group.js

@@ -1,92 +1,92 @@
-import { css as c, LitElement as u, html as o, nothing as h } from "lit";
-import { state as p, customElement as m } from "lit/decorators.js";
+import { css as c, LitElement as u, html as b, nothing as p } from "lit";
+import { state as h, customElement as m } from "lit/decorators.js";
 import { isArrowKeyPressed as g, sbbInputModalityDetector as f, getNextElementIndex as v } from "../core/a11y.js";
-import { SbbConnectedAbortController as x, SbbLanguageController as y } from "../core/controllers.js";
-import { hostAttributes as w } from "../core/decorators.js";
-import { setOrRemoveAttribute as C } from "../core/dom.js";
-import { i18nBreadcrumbEllipsisButtonLabel as _ } from "../core/i18n.js";
+import { SbbConnectedAbortController as _, SbbLanguageController as x } from "../core/controllers.js";
+import { hostAttributes as C } from "../core/decorators.js";
+import { setOrRemoveAttribute as y } from "../core/dom.js";
+import { i18nBreadcrumbEllipsisButtonLabel as w } from "../core/i18n.js";
 import { SbbNamedSlotListMixin as k } from "../core/mixins.js";
-import { AgnosticResizeObserver as A } from "../core/observers.js";
+import { AgnosticResizeObserver as z } from "../core/observers.js";
 import "../icon.js";
 const E = c`*,:before,:after{box-sizing:border-box}:host{--sbb-breadcrumb-group-wrap: nowrap;--sbb-breadcrumb-group-visibility: hidden;display:block}:host([data-loaded]){--sbb-breadcrumb-group-visibility: visible}:host([data-state]){--sbb-breadcrumb-group-wrap: wrap}.sbb-breadcrumb-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:var(--sbb-breadcrumb-group-wrap);column-gap:var(--sbb-spacing-fixed-1x);visibility:var(--sbb-breadcrumb-group-visibility)}.sbb-breadcrumb-group__item{flex:0 0 auto;display:flex;column-gap:var(--sbb-spacing-fixed-1x)}.sbb-breadcrumb-group__divider-icon{color:var(--sbb-color-granite)}#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-granite);--sbb-breadcrumb-group-ellipsis-background-color: transparent;--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);--sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver);-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--sbb-text-font-size: var(--sbb-font-size-text-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);line-height:0;letter-spacing:.01em;width:var(--sbb-size-icon-ui-small);height:var(--sbb-size-icon-ui-small);border:var(--sbb-breadcrumb-group-ellipsis-border-width) solid var(--sbb-breadcrumb-group-ellipsis-border-color);border-radius:50%;padding-block-end:.5em;cursor:pointer;color:var(--sbb-breadcrumb-group-ellipsis-color);background-color:var(--sbb-breadcrumb-group-ellipsis-background-color);overflow:hidden}@media (forced-colors: active){#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-2x);--sbb-breadcrumb-group-ellipsis-border-color: CanvasText}}@media (any-hover: hover){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-charcoal);--sbb-breadcrumb-group-ellipsis-background-color: var(--sbb-color-milk)}}@media (any-hover: hover) and (forced-colors: active){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-border-color: Highlight}}#sbb-breadcrumb-ellipsis:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}`;
-var z = Object.defineProperty, S = Object.getOwnPropertyDescriptor, d = (r, e, s, t) => {
-  for (var i = t > 1 ? void 0 : t ? S(e, s) : e, b = r.length - 1, a; b >= 0; b--)
-    (a = r[b]) && (i = (t ? a(e, s, i) : a(i)) || i);
-  return t && i && z(e, s, i), i;
+var S = Object.defineProperty, A = Object.getOwnPropertyDescriptor, d = (e, r, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? A(r, t) : r, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (s = (i ? a(r, t, s) : a(s)) || s);
+  return i && s && S(r, t, s), s;
 };
 const n = 3;
 let l = class extends k(u) {
   constructor() {
-    super(...arguments), this.listChildLocalNames = ["sbb-breadcrumb"], this.b = new A(() => this.d()), this.f = new x(this), this.g = new y(this), this.c = !1;
+    super(...arguments), this.listChildLocalNames = ["sbb-breadcrumb"], this._resizeObserver = new z(() => this._evaluateCollapsedState()), this._abort = new _(this), this._language = new x(this), this._markForFocus = !1;
   }
-  set a(r) {
-    C(this, "data-state", r);
+  set _state(e) {
+    y(this, "data-state", e);
   }
-  get a() {
+  get _state() {
     return this.getAttribute("data-state");
   }
-  h(r) {
+  _handleKeyDown(e) {
     if (!(!this.listChildren.length || // don't trap nested handling
-    r.target !== this && r.target.parentElement !== this) && g(r)) {
-      if (this.a === "collapsed")
-        return this.i(r);
-      this.e(r);
+    e.target !== this && e.target.parentElement !== this) && g(e)) {
+      if (this._state === "collapsed")
+        return this._focusNextCollapsed(e);
+      this._focusNext(e);
     }
   }
   connectedCallback() {
     super.connectedCallback();
-    const r = this.f.signal;
-    this.addEventListener("keydown", (e) => this.h(e), { signal: r });
+    const e = this._abort.signal;
+    this.addEventListener("keydown", (r) => this._handleKeyDown(r), { signal: e });
   }
-  firstUpdated(r) {
-    super.firstUpdated(r), this.b.observe(this), this.toggleAttribute("data-loaded", !0);
+  firstUpdated(e) {
+    super.firstUpdated(e), this._resizeObserver.observe(this), this.toggleAttribute("data-loaded", !0);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.b.disconnect();
+    super.disconnectedCallback(), this._resizeObserver.disconnect();
   }
-  willUpdate(r) {
-    super.willUpdate(r), r.has("listChildren") && this.j();
+  willUpdate(e) {
+    super.willUpdate(e), e.has("listChildren") && this._syncBreadcrumbs();
   }
-  updated(r) {
-    var e;
-    super.updated(r), r.has("listChildren") && Promise.resolve().then(() => this.d()), this.c && f.mostRecentModality === "keyboard" && ((e = this.listChildren[1]) == null || e.focus(), this.c = !1);
+  updated(e) {
+    var r;
+    super.updated(e), e.has("listChildren") && Promise.resolve().then(() => this._evaluateCollapsedState()), this._markForFocus && f.mostRecentModality === "keyboard" && ((r = this.listChildren[1]) == null || r.focus(), this._markForFocus = !1);
   }
   /** Apply the aria-current attribute to the last sbb-breadcrumb element. */
-  j() {
-    var r;
-    this.listChildren.slice(0, -1).filter((e) => e.hasAttribute("aria-current")).forEach((e) => e.removeAttribute("aria-current")), (r = this.listChildren[this.listChildren.length - 1]) == null || r.setAttribute("aria-current", "page"), this.listChildren.length < n && (this.a = null);
+  _syncBreadcrumbs() {
+    var e;
+    this.listChildren.slice(0, -1).filter((r) => r.hasAttribute("aria-current")).forEach((r) => r.removeAttribute("aria-current")), (e = this.listChildren[this.listChildren.length - 1]) == null || e.setAttribute("aria-current", "page"), this.listChildren.length < n && (this._state = null);
   }
   /**
    * Sets the focus on the correct element when the ellipsis breadcrumb is displayed and the user is navigating with keyboard's arrows.
    */
-  i(r) {
-    const e = [
+  _focusNextCollapsed(e) {
+    const r = [
       this.listChildren[0],
       this.shadowRoot.querySelector("#sbb-breadcrumb-ellipsis"),
       this.listChildren[this.listChildren.length - 1]
     ];
-    this.e(r, e);
+    this._focusNext(e, r);
   }
-  e(r, e = this.listChildren) {
-    var i;
-    const s = e.findIndex(
-      (b) => b === document.activeElement || b === this.shadowRoot.activeElement
-    ), t = v(r, s, e.length);
-    (i = e[t]) == null || i.focus(), r.preventDefault();
+  _focusNext(e, r = this.listChildren) {
+    var s;
+    const t = r.findIndex(
+      (o) => o === document.activeElement || o === this.shadowRoot.activeElement
+    ), i = v(e, t, r.length);
+    (s = r[i]) == null || s.focus(), e.preventDefault();
   }
   /**
    * Note: due to @State annotation on _state, this method triggers a new render; as a consequence, the focus is moved
    * to the `body`, so if the ellipsis element has focus, it's asynchronously forced to the first element.
    */
-  k() {
-    this.a = "manually-expanded", this.c = !0;
+  _expandBreadcrumbs() {
+    this._state = "manually-expanded", this._markForFocus = !0;
   }
   /** Evaluate if the expanded breadcrumb element fits in page width, otherwise it needs ellipsis */
-  d() {
-    !this.a && this.scrollWidth > this.offsetWidth && this.listChildren.length >= n && (this.a = "collapsed", this.b.disconnect());
+  _evaluateCollapsedState() {
+    !this._state && this.scrollWidth > this.offsetWidth && this.listChildren.length >= n && (this._state = "collapsed", this._resizeObserver.disconnect());
   }
-  l() {
-    return o`
+  _renderCollapsed() {
+    return b`
       <li class="sbb-breadcrumb-group__item">
         <slot name="li-0"></slot>
       </li>
@@ -98,9 +98,9 @@ let l = class extends k(u) {
         <button
           type="button"
           id="sbb-breadcrumb-ellipsis"
-          aria-label=${_[this.g.current]}
+          aria-label=${w[this._language.current]}
           aria-expanded="false"
-          @click=${() => this.k()}
+          @click=${() => this._expandBreadcrumbs()}
         >
           ...
         </button>
@@ -114,23 +114,23 @@ let l = class extends k(u) {
       </li>
     `;
   }
-  m() {
+  _renderExpanded() {
     return this.listSlotNames().map(
-      (r, e, s) => o`
+      (e, r, t) => b`
         <li class="sbb-breadcrumb-group__item">
-          <slot name=${r}></slot>
-          ${e !== s.length - 1 ? o`<sbb-icon
+          <slot name=${e}></slot>
+          ${r !== t.length - 1 ? b`<sbb-icon
                 name="chevron-small-right-small"
                 class="sbb-breadcrumb-group__divider-icon"
-              ></sbb-icon>` : h}
+              ></sbb-icon>` : p}
         </li>
       `
     );
   }
   render() {
-    return o`
+    return b`
       <ol class="sbb-breadcrumb-group">
-        ${this.a === "collapsed" ? this.l() : this.m()}
+        ${this._state === "collapsed" ? this._renderCollapsed() : this._renderExpanded()}
       </ol>
       ${this.renderHiddenSlot()}
     `;
@@ -138,11 +138,11 @@ let l = class extends k(u) {
 };
 l.styles = E;
 d([
-  p()
-], l.prototype, "a", 1);
+  h()
+], l.prototype, "_state", 1);
 l = d([
   m("sbb-breadcrumb-group"),
-  w({
+  C({
     role: "navigation"
   })
 ], l);

package/breadcrumb/breadcrumb.js

@@ -3,19 +3,19 @@ import { html as d } from "lit/static-html.js";
 import { SbbLinkBaseElement as m } from "../core/base-elements.js";
 import { SbbHydrationMixin as u } from "../core/mixins.js";
 import { SbbIconNameMixin as f } from "../icon.js";
-import { css as v } from "lit";
-const h = v`*,:before,:after{box-sizing:border-box}:host{display:flex;--sbb-breadcrumb-color: var(--sbb-color-granite)}@media (any-hover: hover){:host(:hover){--sbb-breadcrumb-color: var(--sbb-color-charcoal)}}:host(:is(:active,[data-active])){--sbb-breadcrumb-color: var(--sbb-color-anthracite)}.sbb-breadcrumb{--sbb-link-text-decoration: none;--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-link-color-normal);text-decoration:var(--sbb-link-text-decoration, underline);-webkit-user-select:none;user-select:none;display:flex;cursor:pointer;gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-breadcrumb-color);align-items:center;overflow:hidden;outline:none}@media (forced-colors: active){.sbb-breadcrumb{text-decoration:underline}}@media (forced-colors: active){.sbb-breadcrumb{--sbb-breadcrumb-color: ButtonText}}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-breadcrumb:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-2x)}.sbb-breadcrumb__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}slot[name=icon] .sbb-breadcrumb__icon,slot[name=icon] ::slotted(*){flex-shrink:0}`;
-var p = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (r, e, s, t) => {
-  for (var o = t > 1 ? void 0 : t ? x(e, s) : e, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (o = (t ? i(e, s, o) : i(o)) || o);
-  return t && o && p(e, s, o), o;
+import { css as h } from "lit";
+const v = h`*,:before,:after{box-sizing:border-box}:host{display:flex;--sbb-breadcrumb-color: var(--sbb-color-granite)}@media (any-hover: hover){:host(:hover){--sbb-breadcrumb-color: var(--sbb-color-charcoal)}}:host(:is(:active,[data-active])){--sbb-breadcrumb-color: var(--sbb-color-anthracite)}.sbb-breadcrumb{--sbb-link-text-decoration: none;--sbb-text-font-size: var(--sbb-font-size-text-xs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);color:var(--sbb-link-color-normal);text-decoration:var(--sbb-link-text-decoration, underline);-webkit-user-select:none;user-select:none;display:flex;cursor:pointer;gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-breadcrumb-color);align-items:center;overflow:hidden;outline:none}@media (forced-colors: active){.sbb-breadcrumb{text-decoration:underline}}@media (forced-colors: active){.sbb-breadcrumb{--sbb-breadcrumb-color: ButtonText}}:host(:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-breadcrumb:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-2x)}.sbb-breadcrumb__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}slot[name=icon] .sbb-breadcrumb__icon,slot[name=icon] ::slotted(*){flex-shrink:0}`;
+var p = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (r, e, b, t) => {
+  for (var o = t > 1 ? void 0 : t ? x(e, b) : e, a = r.length - 1, i; a >= 0; a--)
+    (i = r[a]) && (o = (t ? i(e, b, o) : i(o)) || o);
+  return t && o && p(e, b, o), o;
 };
-let b = class extends f(u(m)) {
+let s = class extends f(u(m)) {
   constructor() {
-    super(...arguments), this.a = !1;
+    super(...arguments), this._hasText = !1;
   }
-  b() {
-    this.a = Array.from(this.childNodes ?? []).some(
+  _handleSlotchange() {
+    this._hasText = Array.from(this.childNodes ?? []).some(
       (r) => {
         var e;
         return !r.slot && ((e = r.textContent) == null ? void 0 : e.trim());
@@ -25,19 +25,19 @@ let b = class extends f(u(m)) {
   renderTemplate() {
     return d`
       ${this.renderIconSlot("sbb-breadcrumb__icon")}
-      <span class="sbb-breadcrumb__label" ?hidden=${!this.a}>
-        <slot @slotchange=${this.b}></slot>
+      <span class="sbb-breadcrumb__label" ?hidden=${!this._hasText}>
+        <slot @slotchange=${this._handleSlotchange}></slot>
       </span>
     `;
   }
 };
-b.styles = h;
+s.styles = v;
 n([
   l()
-], b.prototype, "a", 2);
-b = n([
+], s.prototype, "_hasText", 2);
+s = n([
   c("sbb-breadcrumb")
-], b);
+], s);
 export {
-  b as SbbBreadcrumbElement
+  s as SbbBreadcrumbElement
 };