@sbb-esta/lyne-elements 0.52.0 → 0.52.1

package/breadcrumb/breadcrumb-group.js

@@ -1,91 +1,92 @@
-import { css as d, LitElement as c, html as b, nothing as u } from "lit";
-import { state as p, customElement as h } from "lit/decorators.js";
-import { isArrowKeyPressed as m, sbbInputModalityDetector as g, getNextElementIndex as f } from "../core/a11y.js";
-import { SbbConnectedAbortController as v, SbbLanguageController as _ } from "../core/controllers.js";
-import { hostAttributes as x } from "../core/decorators.js";
-import { setOrRemoveAttribute as y } from "../core/dom.js";
-import { i18nBreadcrumbEllipsisButtonLabel as C } from "../core/i18n.js";
-import { SbbNamedSlotListMixin as w } from "../core/mixins.js";
-import { AgnosticResizeObserver as k } from "../core/observers.js";
+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 { 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 { SbbNamedSlotListMixin as k } from "../core/mixins.js";
+import { AgnosticResizeObserver as A } from "../core/observers.js";
 import "../icon.js";
-const z = d`*,: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 E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (e, r, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? S(r, t) : r, o = e.length - 1, l; o >= 0; o--)
-    (l = e[o]) && (s = (i ? l(r, t, s) : l(s)) || s);
-  return i && s && E(r, t, s), s;
+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;
 };
-let a = class extends w(c) {
+const n = 3;
+let l = class extends k(u) {
   constructor() {
-    super(...arguments), this.listChildLocalNames = ["sbb-breadcrumb"], this._resizeObserver = new k(() => this._evaluateCollapsedState()), this._abort = new v(this), this._language = new _(this), this._markForFocus = !1;
+    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;
   }
-  set _state(e) {
-    y(this, "data-state", e);
+  set a(r) {
+    C(this, "data-state", r);
   }
-  get _state() {
+  get a() {
     return this.getAttribute("data-state");
   }
-  _handleKeyDown(e) {
+  h(r) {
     if (!(!this.listChildren.length || // don't trap nested handling
-    e.target !== this && e.target.parentElement !== this) && m(e)) {
-      if (this._state === "collapsed")
-        return this._focusNextCollapsed(e);
-      this._focusNext(e);
+    r.target !== this && r.target.parentElement !== this) && g(r)) {
+      if (this.a === "collapsed")
+        return this.i(r);
+      this.e(r);
     }
   }
   connectedCallback() {
     super.connectedCallback();
-    const e = this._abort.signal;
-    this.addEventListener("keydown", (r) => this._handleKeyDown(r), { signal: e });
+    const r = this.f.signal;
+    this.addEventListener("keydown", (e) => this.h(e), { signal: r });
   }
-  firstUpdated(e) {
-    super.firstUpdated(e), this._resizeObserver.observe(this), this.toggleAttribute("data-loaded", !0);
+  firstUpdated(r) {
+    super.firstUpdated(r), this.b.observe(this), this.toggleAttribute("data-loaded", !0);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._resizeObserver.disconnect();
+    super.disconnectedCallback(), this.b.disconnect();
   }
-  willUpdate(e) {
-    super.willUpdate(e), e.has("listChildren") && this._syncBreadcrumbs();
+  willUpdate(r) {
+    super.willUpdate(r), r.has("listChildren") && this.j();
   }
-  updated(e) {
-    var r;
-    super.updated(e), e.has("listChildren") && Promise.resolve().then(() => this._evaluateCollapsedState()), this._markForFocus && g.mostRecentModality === "keyboard" && ((r = this.listChildren[1]) == null || r.focus(), this._markForFocus = !1);
+  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);
   }
   /** Apply the aria-current attribute to the last sbb-breadcrumb element. */
-  _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 < 3 && (this._state = null);
+  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);
   }
   /**
    * Sets the focus on the correct element when the ellipsis breadcrumb is displayed and the user is navigating with keyboard's arrows.
    */
-  _focusNextCollapsed(e) {
-    const r = [
+  i(r) {
+    const e = [
       this.listChildren[0],
       this.shadowRoot.querySelector("#sbb-breadcrumb-ellipsis"),
       this.listChildren[this.listChildren.length - 1]
     ];
-    this._focusNext(e, r);
+    this.e(r, e);
   }
-  _focusNext(e, r = this.listChildren) {
-    var s;
-    const t = r.findIndex(
-      (o) => o === document.activeElement || o === this.shadowRoot.activeElement
-    ), i = f(e, t, r.length);
-    (s = r[i]) == null || s.focus(), e.preventDefault();
+  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();
   }
   /**
    * 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.
    */
-  _expandBreadcrumbs() {
-    this._state = "manually-expanded", this._markForFocus = !0;
+  k() {
+    this.a = "manually-expanded", this.c = !0;
   }
   /** Evaluate if the expanded breadcrumb element fits in page width, otherwise it needs ellipsis */
-  _evaluateCollapsedState() {
-    !this._state && this.scrollWidth > this.offsetWidth && (this._state = "collapsed", this._resizeObserver.disconnect());
+  d() {
+    !this.a && this.scrollWidth > this.offsetWidth && this.listChildren.length >= n && (this.a = "collapsed", this.b.disconnect());
   }
-  _renderCollapsed() {
-    return b`
+  l() {
+    return o`
       <li class="sbb-breadcrumb-group__item">
         <slot name="li-0"></slot>
       </li>
@@ -97,9 +98,9 @@ let a = class extends w(c) {
         <button
           type="button"
           id="sbb-breadcrumb-ellipsis"
-          aria-label=${C[this._language.current]}
+          aria-label=${_[this.g.current]}
           aria-expanded="false"
-          @click=${() => this._expandBreadcrumbs()}
+          @click=${() => this.k()}
         >
           ...
         </button>
@@ -113,38 +114,38 @@ let a = class extends w(c) {
       </li>
     `;
   }
-  _renderExpanded() {
+  m() {
     return this.listSlotNames().map(
-      (e, r, t) => b`
+      (r, e, s) => o`
         <li class="sbb-breadcrumb-group__item">
-          <slot name=${e}></slot>
-          ${r !== t.length - 1 ? b`<sbb-icon
+          <slot name=${r}></slot>
+          ${e !== s.length - 1 ? o`<sbb-icon
                 name="chevron-small-right-small"
                 class="sbb-breadcrumb-group__divider-icon"
-              ></sbb-icon>` : u}
+              ></sbb-icon>` : h}
         </li>
       `
     );
   }
   render() {
-    return b`
+    return o`
       <ol class="sbb-breadcrumb-group">
-        ${this._state === "collapsed" ? this._renderCollapsed() : this._renderExpanded()}
+        ${this.a === "collapsed" ? this.l() : this.m()}
       </ol>
       ${this.renderHiddenSlot()}
     `;
   }
 };
-a.styles = z;
-n([
+l.styles = E;
+d([
   p()
-], a.prototype, "_state", 1);
-a = n([
-  h("sbb-breadcrumb-group"),
-  x({
+], l.prototype, "a", 1);
+l = d([
+  m("sbb-breadcrumb-group"),
+  w({
     role: "navigation"
   })
-], a);
+], l);
 export {
-  a as SbbBreadcrumbGroupElement
+  l as SbbBreadcrumbGroupElement
 };

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 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;
+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;
 };
-let s = class extends f(u(m)) {
+let b = class extends f(u(m)) {
   constructor() {
-    super(...arguments), this._hasText = !1;
+    super(...arguments), this.a = !1;
   }
-  _handleSlotchange() {
-    this._hasText = Array.from(this.childNodes ?? []).some(
+  b() {
+    this.a = Array.from(this.childNodes ?? []).some(
       (r) => {
         var e;
         return !r.slot && ((e = r.textContent) == null ? void 0 : e.trim());
@@ -25,19 +25,19 @@ let s = class extends f(u(m)) {
   renderTemplate() {
     return d`
       ${this.renderIconSlot("sbb-breadcrumb__icon")}
-      <span class="sbb-breadcrumb__label" ?hidden=${!this._hasText}>
-        <slot @slotchange=${this._handleSlotchange}></slot>
+      <span class="sbb-breadcrumb__label" ?hidden=${!this.a}>
+        <slot @slotchange=${this.b}></slot>
       </span>
     `;
   }
 };
-s.styles = v;
+b.styles = h;
 n([
   l()
-], s.prototype, "_hasText", 2);
-s = n([
+], b.prototype, "a", 2);
+b = n([
   c("sbb-breadcrumb")
-], s);
+], b);
 export {
-  s as SbbBreadcrumbElement
+  b as SbbBreadcrumbElement
 };