scb-wc-test 0.1.1

package/scb-drawer/scb-drawer-item.js

@@ -0,0 +1,220 @@
+import { css as _, LitElement as x, html as d } from "lit";
+import { property as c, state as g, customElement as w } from "lit/decorators.js";
+var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (e, t, o, a) => {
+  for (var n = a > 1 ? void 0 : a ? v(t, o) : t, r = e.length - 1, l; r >= 0; r--)
+    (l = e[r]) && (n = (a ? l(t, o, n) : l(n)) || n);
+  return a && n && y(t, o, n), n;
+};
+let s = class extends x {
+  constructor() {
+    super(...arguments), this.label = "", this.selected = !1, this.leadingIcon = "", this.itemHref = "", this.hasSlotContent = !1, this.expanded = !1, this.__submenuId = `sub-${Math.random().toString(36).slice(2)}`, this._toggleExpand = (e) => {
+      e && e.stopPropagation(), this.hasSlotContent && (this.expanded = !this.expanded);
+    }, this._onButtonClick = (e) => {
+      e.stopPropagation(), this._dispatchSelect(), this._toggleExpand();
+    }, this._onLinkClick = () => {
+      this._dispatchSelect();
+    }, this._onKeyDown = (e) => {
+      var a, n, r, l, h, b, u, m, f;
+      const t = Array.from(
+        ((a = this.parentElement) == null ? void 0 : a.querySelectorAll("scb-drawer-item")) || []
+      ), o = t.indexOf(this);
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault(), (r = (n = (t[o + 1] || t[0]).shadowRoot) == null ? void 0 : n.querySelector(".scb-drawer-label-text")) == null || r.focus();
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault(), (h = (l = (t[o - 1] || t[t.length - 1]).shadowRoot) == null ? void 0 : l.querySelector(".scb-drawer-label-text")) == null || h.focus();
+          break;
+        }
+        case "Home": {
+          e.preventDefault(), (u = (b = t[0].shadowRoot) == null ? void 0 : b.querySelector(".scb-drawer-label-text")) == null || u.focus();
+          break;
+        }
+        case "End": {
+          e.preventDefault(), (f = (m = t[t.length - 1].shadowRoot) == null ? void 0 : m.querySelector(".scb-drawer-label-text")) == null || f.focus();
+          break;
+        }
+      }
+    };
+  }
+  // scb-icon-button laddas endast när undermeny finns
+  /** Ladda alltid md-ripple, md-icon bara om leadingIcon används. */
+  async __ensureDepsLoaded() {
+    s.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), s.__rippleLoaded = !0), this.leadingIcon && !s.__iconLoaded && (await import("@material/web/icon/icon.js"), s.__iconLoaded = !0), this.hasSlotContent && !s.__iconButtonLoaded && (await import("../scb-icon-button/scb-icon-button.js"), s.__iconButtonLoaded = !0);
+  }
+  /** Håll koll på att slotten endast innehåller <scb-sub-drawer>. */
+  _onSlotChange(e) {
+    const o = e.target.assignedElements({ flatten: !0 });
+    this.hasSlotContent = o.length > 0 && o.every((a) => a.tagName === "SCB-SUB-DRAWER");
+  }
+  /** Skicka ”val”-event uppåt så att <scb-drawer> kan markera selected. */
+  _dispatchSelect() {
+    this.dispatchEvent(
+      new CustomEvent("scb-drawer-select", {
+        bubbles: !0,
+        composed: !0,
+        detail: { item: this }
+      })
+    );
+  }
+  /** Vid initiering, kolla slotten och lazy-loada depemdencies. */
+  async firstUpdated() {
+    const e = this.renderRoot.querySelector("slot");
+    if (e) {
+      const t = e.assignedElements({ flatten: !0 });
+      this.hasSlotContent = t.length > 0 && t.every((o) => o.tagName === "SCB-SUB-DRAWER");
+    }
+    await this.__ensureDepsLoaded();
+  }
+  /** Om leadingIcon sätts i efterhand, se till att md-icon finns. */
+  updated(e) {
+    e.has("leadingIcon") && this.leadingIcon && this.__ensureDepsLoaded(), e.has("hasSlotContent") && this.hasSlotContent && this.__ensureDepsLoaded();
+  }
+  render() {
+    const e = !!this.leadingIcon, t = !!this.itemHref, o = this.hasSlotContent;
+    return d`
+      <div class="scb-drawer-item">
+        <div class="scb-drawer-item-label" ?selected=${this.selected}>
+          ${t ? d`
+                <a
+                  class="scb-drawer-label-text"
+                  aria-label="${this.label}"
+                  href="${this.itemHref}"
+                  aria-current=${this.selected ? "page" : void 0}
+                  @click=${this._onLinkClick}
+                  @keydown=${this._onKeyDown}
+                >
+                  <span class="scb-drawer-click ${e ? "has-icon" : ""}">
+                    <md-ripple></md-ripple>
+                    ${e ? d`<md-icon>${this.leadingIcon}</md-icon>` : ""}
+                    ${this.label}
+                  </span>
+                </a>
+              ` : d`
+                <button
+                  type="button"
+                  class="scb-drawer-label-text"
+                  @click=${this._onButtonClick}
+                  @keydown=${this._onKeyDown}
+                  ${o ? "aria-expanded=" + String(this.expanded) : ""}
+                  ${o ? "aria-controls=" + this.__submenuId : ""}
+                >
+                  <span class="scb-drawer-click ${e ? "has-icon" : ""}">
+                    <md-ripple></md-ripple>
+                    ${e ? d`<md-icon>${this.leadingIcon}</md-icon>` : ""}
+                    ${this.label}
+                  </span>
+                </button>
+              `}
+
+          ${o ? d`
+                <!-- Separat ikonknapp: presentational + ej tabbbar, ingen ARIA-state -->
+                <scb-icon-button
+                  icon="${this.expanded ? "expand_less" : "expand_more"}"
+                  role="presentation"
+                  tabindex="-1"
+                  @click=${(a) => {
+      a.stopPropagation(), this._toggleExpand(a);
+    }}
+                ></scb-icon-button>
+              ` : ""}
+        </div>
+
+        <div id="${this.__submenuId}" class="submenu ${this.expanded ? "expanded" : ""}">
+          <slot @slotchange=${this._onSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+s.__rippleLoaded = !1;
+s.__iconLoaded = !1;
+s.__iconButtonLoaded = !1;
+s.styles = _`
+    .scb-drawer-item-label {
+      display: flex;
+      align-items: center;
+      position: relative;
+    }
+
+    .scb-drawer-label-text {
+      width: 100%;
+      display: block;
+      background: transparent;
+      border: 0;
+      text-align: left;
+      font: inherit;
+      color: inherit;
+      text-decoration: none;
+      cursor: pointer;
+      padding: 0;
+      margin: 0;
+      appearance: none;
+      -webkit-appearance: none;
+      box-sizing: border-box;
+    }
+
+    .scb-drawer-label-text:focus-visible {
+      outline: 2px solid var(--md-focus-ring-color, var(--p-40));
+      outline-offset: 2px;
+      border-radius: 28px;
+      box-shadow: none;
+    }
+
+    .scb-drawer-click {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 14px 20px;
+      border-radius: 28px;
+      position: relative;
+      overflow: hidden;
+      color: var(--md-sys-color-on-surface);
+    }
+    .scb-drawer-click.has-icon { padding: 14px 12px; }
+
+    .scb-drawer-item-label[selected] .scb-drawer-click,
+    :host([selected]) .scb-drawer-click {
+      color: var(--md-sys-color-on-secondary-container);
+      background: var(--md-sys-color-secondary-container);
+      font-weight: 600;
+    }
+
+    scb-icon-button {
+      margin-left: auto;
+      flex: 0 0 auto;
+    }
+    .submenu {
+      display: none;
+      padding-left: 16px;
+    }
+    .submenu.expanded {
+      display: block;
+      padding-left: 16px;
+    }
+  `;
+i([
+  c({ type: String })
+], s.prototype, "label", 2);
+i([
+  c({ type: Boolean, reflect: !0 })
+], s.prototype, "selected", 2);
+i([
+  c({ type: String, attribute: "leading-icon" })
+], s.prototype, "leadingIcon", 2);
+i([
+  c({ type: String, attribute: "item-href" })
+], s.prototype, "itemHref", 2);
+i([
+  g()
+], s.prototype, "hasSlotContent", 2);
+i([
+  g()
+], s.prototype, "expanded", 2);
+s = i([
+  w("scb-drawer-item")
+], s);
+export {
+  s as ScbDrawerItem
+};

package/scb-drawer/scb-drawer-section.d.ts

@@ -0,0 +1,7 @@
+import { LitElement, TemplateResult } from 'lit';
+
+export declare class ScbDrawerSection extends LitElement {
+    label: string;
+    static styles: import('lit').CSSResult;
+    render(): TemplateResult;
+}

package/scb-drawer/scb-drawer-section.js

@@ -0,0 +1,44 @@
+import { css as d, LitElement as n, html as p } from "lit";
+import { property as b, customElement as v } from "lit/decorators.js";
+import "../scb-divider/scb-divider.js";
+var m = Object.defineProperty, f = Object.getOwnPropertyDescriptor, a = (o, e, i, s) => {
+  for (var r = s > 1 ? void 0 : s ? f(e, i) : e, c = o.length - 1, l; c >= 0; c--)
+    (l = o[c]) && (r = (s ? l(e, i, r) : l(r)) || r);
+  return s && r && m(e, i, r), r;
+};
+let t = class extends n {
+  constructor() {
+    super(...arguments), this.label = "";
+  }
+  render() {
+    return p`
+        
+        <scb-divider></scb-divider>
+        ${this.label ? p`
+        <div class="scb-drawer-section">
+            <div class="scb-drawer-label">${this.label}</div>
+        </div>` : ""}
+    `;
+  }
+};
+t.styles = d`
+    .scb-drawer-section {
+      display: block;
+      width: 100%;
+      padding: 14px 12px; 
+      color: var(--md-sys-color-on-surface);
+      font-weight: 600;
+    }
+    scb-divider {
+      margin: 4px 12px;
+    }
+  `;
+a([
+  b({ type: String })
+], t.prototype, "label", 2);
+t = a([
+  v("scb-drawer-section")
+], t);
+export {
+  t as ScbDrawerSection
+};

package/scb-drawer/scb-drawer.d.ts

@@ -0,0 +1,97 @@
+import { LitElement, TemplateResult } from 'lit';
+
+/**
+
+<scb-drawer>
+
+Sidomeny som kan vara static eller floating.
+Kontroll/styrning
+  — Triggers i DOM:
+    • aria-controls="<drawer-id>" växlar mellan öppet och stängt; aria-expanded uppdateras automatiskt på samma element.
+    • data-drawer-open|close|toggle="<drawer-id>" öppnar/stänger/växlar explicit. aria-expanded uppdateras inte; lägg även aria-controls om state ska speglas.
+    • Triggers hittas via event.composedPath() och fungerar även över shadow DOM; om båda attributtyperna används på samma element prioriteras data-drawer-*.
+  — Programmatiskt: element.open = true|false (alla side effects hanteras: overlay, scroll-lås, fokus, events).
+Overlay
+  — Aktiveras med overlay och ritas som global scrim på document.body.
+  — Klick på overlay stänger om close-on-overlay är satt (default: true).
+  — lock-scroll låser <html> och <body> medan drawern är öppen.
+  — Klick utanför drawern stänger komponenten. Utan overlay: klick utanför själva drawern. Med overlay: klick på overlay (styrt av close-on-overlay).
+Fokus & tangentbord
+  — ESC stänger.
+  — I overlay-läge finns en enkel focus trap (Tab/Shift+Tab).
+  — Fokus återställs till senaste trigger när drawern stängs.
+Modal
+  — modal sätter role="dialog" och aria-modal="true".
+Händelser
+  — "scb-drawer-opened" och "scb-drawer-closed" bubblar vid state-ändring.
+CSS-variabler
+  — --scb-drawer-z, --scb-drawer-overlay-z, --scb-drawer-overlay-color (kanske ska vi sätta dem globalt? Får klura på det).
+*/
+export declare class ScbDrawer extends LitElement {
+    /** Rubrik i headern. */
+    label: string;
+    /** Underrubrik i headern (attribute: sub-label). */
+    subLabel: string;
+    /** floating (fixed) drawer med tjusig animation. */
+    floating: boolean;
+    /** Vänsterplacerad när floating (default: true). */
+    left: boolean;
+    /** Högerplacerad när floating (default: false). */
+    right: boolean;
+    /** Öppen/stängd; kan sättas programmatiskt. */
+    open: boolean;
+    /** Aktivera global overlay (scrim a.k.a "en tunn gardin"). */
+    overlay: boolean;
+    /** Lås sidans scroll när overlay och open (default: false). */
+    lockScroll: boolean;
+    /** Tillåt klick på overlay att stänga (default: true). */
+    closeOnOverlay: boolean;
+    /** Sätt role="dialog" och aria-modal="true" (kräver overlay och floating som true). */
+    modal: boolean;
+    /** Senaste trigger-elementet som öppnade drawern (för att kunna återställa fokus vid stängning). */
+    private __lastTriggerEl;
+    /** Global overlay-instans och relaterad state (delas mellan alla drawers). */
+    private static __overlayEl;
+    /** Stack för aktiva drawers som använder overlay (överst i stacken får overlay-klick). */
+    private static __overlayStack;
+    /** Antal aktiva scroll-lås (för att definitivt återställa overflow när sista stängs). */
+    private static __lockedCount;
+    /** Tidigare overflow-värden som återställs när scroll-lås släpps. */
+    private static __prevDocOverflow;
+    private static __prevBodyOverflow;
+    /** Säkerställ att css för overlay är injicerade en gång per sida. */
+    private static __ensureOverlayStyles;
+    /** Skapa (vid behov) den globala overlay-noden och koppla stängning på klick. */
+    private static __ensureOverlay;
+    /** Visa overlay och registrera aktuell drawer som top of the pop i overlay-stacken. */
+    private static __showOverlay;
+    /** Dölj overlay om det här är sista aktiva drawer; annars ta bort ägaskapr från stacken. */
+    private static __hideOverlay;
+    /** Aktivera scroll-lås (första gången den aktiveras så  sparas tidigare overflow-värden). */
+    private static __lockScrollEnable;
+    /** Inaktivera scroll-lås och återställ overflow när 0. */
+    private static __lockScrollDisable;
+    static styles: import('lit').CSSResult;
+    render(): TemplateResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onGlobalSelect;
+    private __getActionFromEvent;
+    private __onDocumentClick;
+    private __onDocumentKeydown;
+    /** Hämta tabbale element i den renderade shadow-roten. */
+    private __getFocusable;
+    /** Sätt endast state; side effects (overlay, fokus, events mm) hanteras i `updated()`. */
+    private __setOpen;
+    /** Reagera på ändrat `open` oavsett om det kom från triggers eller från kod (drawer.open = …). */
+    protected updated(changed: Map<string, unknown>): void;
+    /** Overlay-hantering, scroll lock, aria-uppdatering, fokusflytt och öppna/stäng-events. */
+    private __applyOpenSideEffects;
+    /** Sätt aria-expanded=true/false på alla kontroller som pekar på aktuell drawer via id. */
+    private __updateTriggersExpanded;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-drawer': ScbDrawer;
+    }
+}

package/scb-drawer/scb-drawer.js

@@ -0,0 +1,258 @@
+import { css as f, LitElement as u, nothing as d, html as p } from "lit";
+import { property as n, customElement as _ } from "lit/decorators.js";
+import "../scb-divider/scb-divider.js";
+import "./scb-drawer-item.js";
+import "./scb-drawer-section.js";
+import "./scb-sub-drawer.js";
+var h = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (t, o, r, s) => {
+  for (var l = s > 1 ? void 0 : s ? v(o, r) : o, i = t.length - 1, c; i >= 0; i--)
+    (c = t[i]) && (l = (s ? c(o, r, l) : c(l)) || l);
+  return s && l && h(o, r, l), l;
+};
+let e = class extends u {
+  constructor() {
+    super(...arguments), this.label = "", this.subLabel = "", this.floating = !1, this.left = !0, this.right = !1, this.open = !1, this.overlay = !1, this.lockScroll = !1, this.closeOnOverlay = !0, this.modal = !1, this.__lastTriggerEl = null, this._onGlobalSelect = (t) => {
+      const o = t;
+      this.querySelectorAll("scb-drawer-item").forEach((s) => s.selected = !1), this.contains(o.detail.item) && (o.detail.item.selected = !0);
+    }, this.__onDocumentClick = (t) => {
+      const o = this.__getActionFromEvent(t);
+      if (o) {
+        o === "open" && this.__setOpen(!0), o === "close" && this.__setOpen(!1), o === "toggle" && this.__setOpen(!this.open), t.stopPropagation();
+        return;
+      }
+      this.floating && this.open && !this.overlay && (t.composedPath().includes(this) || this.__setOpen(!1));
+    }, this.__onDocumentKeydown = (t) => {
+      if (this.open) {
+        if (t.key === "Escape") {
+          this.__setOpen(!1);
+          return;
+        }
+        if (this.overlay && t.key === "Tab") {
+          const o = this.__getFocusable();
+          if (o.length === 0) return;
+          const r = o[0], s = o[o.length - 1], l = this.renderRoot, i = l.activeElement || document.activeElement;
+          t.shiftKey ? (i === r || !l.contains(i)) && (t.preventDefault(), s.focus()) : (i === s || !l.contains(i)) && (t.preventDefault(), r.focus());
+        }
+      }
+    };
+  }
+  /** Säkerställ att css för overlay är injicerade en gång per sida. */
+  static __ensureOverlayStyles() {
+    if (typeof document > "u" || document.getElementById("scb-drawer-overlay-styles")) return;
+    const t = document.createElement("style");
+    t.id = "scb-drawer-overlay-styles", t.textContent = `
+      .scb-drawer-global-overlay {
+        position: fixed;
+        inset: 0;
+        background: var(--scb-drawer-overlay-color, rgba(0,0,0,0.32));
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 200ms ease;
+        z-index: var(--scb-drawer-overlay-z, 999);
+      }
+      .scb-drawer-global-overlay.is-visible {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    `, document.head.appendChild(t);
+  }
+  /** Skapa (vid behov) den globala overlay-noden och koppla stängning på klick. */
+  static __ensureOverlay() {
+    if (typeof document > "u" || e.__overlayEl) return;
+    e.__ensureOverlayStyles();
+    const t = document.createElement("div");
+    t.className = "scb-drawer-global-overlay", t.addEventListener("mousedown", () => {
+      const o = e.__overlayStack[e.__overlayStack.length - 1];
+      o && o.closeOnOverlay && o.__setOpen(!1);
+    }), document.body.appendChild(t), e.__overlayEl = t;
+  }
+  /** Visa overlay och registrera aktuell drawer som top of the pop i overlay-stacken. */
+  static __showOverlay(t) {
+    e.__ensureOverlay(), e.__overlayEl && (e.__overlayStack.includes(t) || e.__overlayStack.push(t), e.__overlayEl.classList.add("is-visible"));
+  }
+  /** Dölj overlay om det här är sista aktiva drawer; annars ta bort ägaskapr från stacken. */
+  static __hideOverlay(t) {
+    const o = e.__overlayStack.indexOf(t);
+    o >= 0 && e.__overlayStack.splice(o, 1), e.__overlayStack.length === 0 && e.__overlayEl && e.__overlayEl.classList.remove("is-visible");
+  }
+  /** Aktivera scroll-lås (första gången den aktiveras så  sparas tidigare overflow-värden). */
+  static __lockScrollEnable() {
+    typeof document > "u" || (e.__lockedCount === 0 && (e.__prevDocOverflow = document.documentElement.style.overflow || "", e.__prevBodyOverflow = document.body.style.overflow || "", document.documentElement.style.overflow = "hidden", document.body.style.overflow = "hidden"), e.__lockedCount++);
+  }
+  /** Inaktivera scroll-lås och återställ overflow när 0. */
+  static __lockScrollDisable() {
+    typeof document > "u" || (e.__lockedCount = Math.max(0, e.__lockedCount - 1), e.__lockedCount === 0 && (document.documentElement.style.overflow = e.__prevDocOverflow ?? "", document.body.style.overflow = e.__prevBodyOverflow ?? ""));
+  }
+  render() {
+    const t = this.modal && this.overlay && this.floating;
+    return p`
+      <nav
+        aria-label="${this.label}"
+        role=${t ? "dialog" : d}
+        aria-modal=${t ? "true" : d}
+      >
+        ${this.label ? p`
+          <div class="scb-drawer-label-wrapper">
+            <div class="scb-drawer-label">${this.label}</div>
+            <div class="scb-drawer-sublabel">${this.subLabel}</div>
+          </div>
+          <scb-divider></scb-divider>
+        ` : d}
+        <slot></slot>
+      </nav>
+    `;
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("scb-drawer-select", this._onGlobalSelect), document.addEventListener("click", this.__onDocumentClick, !1), document.addEventListener("keydown", this.__onDocumentKeydown, !0);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("scb-drawer-select", this._onGlobalSelect), document.removeEventListener("click", this.__onDocumentClick, !1), document.removeEventListener("keydown", this.__onDocumentKeydown, !0), this.overlay && (e.__hideOverlay(this), this.lockScroll && e.__lockScrollDisable()), super.disconnectedCallback();
+  }
+  // Kolla trigger via composedPath() (fungerar i shadow DOM)
+  __getActionFromEvent(t) {
+    if (!this.id) return null;
+    const o = t.composedPath();
+    for (const r of o)
+      if (r instanceof Element) {
+        if (r.getAttribute("data-drawer-open") === this.id)
+          return this.__lastTriggerEl = r, "open";
+        if (r.getAttribute("data-drawer-close") === this.id)
+          return this.__lastTriggerEl = r, "close";
+        if (r.getAttribute("data-drawer-toggle") === this.id)
+          return this.__lastTriggerEl = r, "toggle";
+        if (r.getAttribute("aria-controls") === this.id)
+          return this.__lastTriggerEl = r, "toggle";
+      }
+    return null;
+  }
+  /** Hämta tabbale element i den renderade shadow-roten. */
+  __getFocusable() {
+    const t = this.renderRoot;
+    return Array.from(
+      t.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter((o) => !o.hasAttribute("disabled") && o.tabIndex >= 0);
+  }
+  /** Sätt endast state; side effects (overlay, fokus, events mm) hanteras i `updated()`. */
+  __setOpen(t) {
+    this.open = t;
+  }
+  /** Reagera på ändrat `open` oavsett om det kom från triggers eller från kod (drawer.open = …). */
+  updated(t) {
+    if (t.has("open")) {
+      const o = t.get("open");
+      this.__applyOpenSideEffects(o, this.open);
+    }
+    t.has("right") && this.right && this.left && (this.left = !1), t.has("left") && this.left && this.right && (this.right = !1);
+  }
+  /** Overlay-hantering, scroll lock, aria-uppdatering, fokusflytt och öppna/stäng-events. */
+  __applyOpenSideEffects(t, o) {
+    var r, s;
+    this.floating && this.overlay && (o ? (e.__showOverlay(this), this.lockScroll && e.__lockScrollEnable()) : (e.__hideOverlay(this), this.lockScroll && e.__lockScrollDisable())), this.__updateTriggersExpanded(), o && !t ? (this.updateComplete.then(() => {
+      var i;
+      const l = this.__getFocusable()[0];
+      (i = l == null ? void 0 : l.focus) == null || i.call(l);
+    }), this.dispatchEvent(new CustomEvent("scb-drawer-opened", { bubbles: !0, composed: !0 }))) : !o && t && ((s = (r = this.__lastTriggerEl) == null ? void 0 : r.focus) == null || s.call(r), this.dispatchEvent(new CustomEvent("scb-drawer-closed", { bubbles: !0, composed: !0 })));
+  }
+  /** Sätt aria-expanded=true/false på alla kontroller som pekar på aktuell drawer via id. */
+  __updateTriggersExpanded() {
+    if (!this.id) return;
+    document.querySelectorAll(
+      `[aria-controls="${this.id}"], [data-drawer-open="${this.id}"], [data-drawer-close="${this.id}"], [data-drawer-toggle="${this.id}"]`
+    ).forEach((o) => {
+      o.hasAttribute("aria-controls") && o.setAttribute("aria-expanded", String(this.open));
+    });
+  }
+};
+e.__overlayEl = null;
+e.__overlayStack = [];
+e.__lockedCount = 0;
+e.__prevDocOverflow = null;
+e.__prevBodyOverflow = null;
+e.styles = f`
+    :host {
+      display: block;
+      color: var(--md-sys-color-on-surface);
+      padding: 12px;
+      background: var(--md-sys-color-surface-container-low);
+    }
+
+    /* Floating drawer */
+    :host([floating]) {
+      position: fixed;
+      top: 0;
+      height: 100vh;
+      width: clamp(280px, 70vw, 360px);
+      background: var(--md-sys-color-surface-container-low);
+      box-shadow: 2px 0 12px rgba(0,0,0,0.15);
+      z-index: var(--scb-drawer-z, 1000);
+      transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+    }
+
+    /* Vänsterläge (default) */
+    :host([floating][left]) { left: 0; transform: translateX(-100%); }
+    :host([floating][left][open]) {
+      transform: translateX(0);
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    /* Högerläge */
+    :host([floating][right]) {
+      right: 0;
+      transform: translateX(100%);
+      box-shadow: -2px 0 12px rgba(0,0,0,0.15);
+    }
+    :host([floating][right][open]) {
+      transform: translateX(0);
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+    }
+
+    .scb-drawer-label { font-size: 16px; font-weight: 600; line-height: 24px; }
+    .scb-drawer-sublabel { font-size: 14px; line-height: 20px; }
+    .scb-drawer-label-wrapper { padding: 12px; color: inherit; }
+    scb-divider { margin: 4px 12px; }
+  `;
+a([
+  n({ type: String })
+], e.prototype, "label", 2);
+a([
+  n({ type: String, attribute: "sub-label" })
+], e.prototype, "subLabel", 2);
+a([
+  n({ type: Boolean, reflect: !0 })
+], e.prototype, "floating", 2);
+a([
+  n({ type: Boolean, reflect: !0 })
+], e.prototype, "left", 2);
+a([
+  n({ type: Boolean, reflect: !0 })
+], e.prototype, "right", 2);
+a([
+  n({ type: Boolean, reflect: !0 })
+], e.prototype, "open", 2);
+a([
+  n({ type: Boolean, reflect: !0 })
+], e.prototype, "overlay", 2);
+a([
+  n({ type: Boolean, reflect: !0, attribute: "lock-scroll" })
+], e.prototype, "lockScroll", 2);
+a([
+  n({ type: Boolean, reflect: !0, attribute: "close-on-overlay" })
+], e.prototype, "closeOnOverlay", 2);
+a([
+  n({ type: Boolean, reflect: !0 })
+], e.prototype, "modal", 2);
+e = a([
+  _("scb-drawer")
+], e);
+export {
+  e as ScbDrawer
+};

package/scb-drawer/scb-sub-drawer.d.ts

@@ -0,0 +1,10 @@
+import { LitElement, TemplateResult } from 'lit';
+
+export declare class ScbSubDrawer extends LitElement {
+    label: string;
+    static styles: import('lit').CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onGlobalSelect;
+    render(): TemplateResult;
+}

package/scb-drawer/scb-sub-drawer.js

@@ -0,0 +1,43 @@
+import { css as i, LitElement as b, html as d } from "lit";
+import { property as p, customElement as m } from "lit/decorators.js";
+var u = Object.defineProperty, h = Object.getOwnPropertyDescriptor, n = (s, e, r, l) => {
+  for (var t = l > 1 ? void 0 : l ? h(e, r) : e, o = s.length - 1, a; o >= 0; o--)
+    (a = s[o]) && (t = (l ? a(e, r, t) : a(t)) || t);
+  return l && t && u(e, r, t), t;
+};
+let c = class extends b {
+  constructor() {
+    super(...arguments), this.label = "", this._onGlobalSelect = (s) => {
+      const e = s;
+      this.querySelectorAll("scb-drawer-item").forEach((l) => l.selected = !1), this.contains(e.detail.item) && (e.detail.item.selected = !0);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("scb-drawer-select", this._onGlobalSelect);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("scb-drawer-select", this._onGlobalSelect), super.disconnectedCallback();
+  }
+  render() {
+    return d`
+      <nav aria-label="${this.label}">
+        <slot></slot>
+      </nav>
+    `;
+  }
+};
+c.styles = i`
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+n([
+  p({ type: String })
+], c.prototype, "label", 2);
+c = n([
+  m("scb-sub-drawer")
+], c);
+export {
+  c as ScbSubDrawer
+};