scb-wc-test 0.1.1

package/scb-dialog/scb-dialog.js

@@ -0,0 +1,390 @@
+import { css as h, LitElement as u, nothing as p, html as d } from "lit";
+import { property as a, customElement as m } from "lit/decorators.js";
+var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (t, e, r, c) => {
+  for (var n = c > 1 ? void 0 : c ? f(e, r) : e, o = t.length - 1, l; o >= 0; o--)
+    (l = t[o]) && (n = (c ? l(e, r, n) : l(n)) || n);
+  return c && n && b(e, r, n), n;
+};
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.open = !1, this.inSb = !1, this.scrimClose = !0, this.variant = "basic", this.label = "", this.icon = "", this.supportingText = "", this.okButton = "OK", this.cancelButton = "Avbryt", this.deleteButton = "Delete", this.confirmButton = "Ta bort", this.denyButton = "Avbryt", this.resetButton = "Återställ", this.submitButton = "Spara", this.formId = "", this.formAction = "", this.formMethod = "", this.__lastTriggerEl = null, this.__slotDeps = {
+      "SCB-TEXTFIELD": () => import("../scb-textfield/scb-textfield.js"),
+      "SCB-CHECKBOX": () => import("../scb-checkbox/scb-checkbox.js"),
+      "SCB-RADIO-BUTTON": () => import("../scb-radio-button/scb-radio-button.js"),
+      "SCB-SWITCH": () => import("../scb-switch/scb-switch.js"),
+      "SCB-CHIP": () => import("../scb-chips/scb-chip.js")
+    }, this.__onDocumentClick = (t) => {
+      this.__getActionFromEvent(t) === "toggle" && (this.__setOpen(!this.open), t.stopPropagation());
+    }, this.__onDocumentKeydown = (t) => {
+      this.open && t.key === "Escape" && (this.__fire("esc"), this.__setOpen(!1));
+    }, this.__onScrimClick = () => {
+      this.scrimClose && (this.__fire("scrim"), this.__setOpen(!1));
+    }, this.__onOk = () => {
+      this.__fire("ok"), this.__setOpen(!1);
+    }, this.__onCancel = () => {
+      this.__fire("cancel"), this.__setOpen(!1);
+    }, this.__onConfirm = () => {
+      this.__fire("confirm"), this.__setOpen(!1);
+    }, this.__onDeny = () => {
+      this.__fire("deny"), this.__setOpen(!1);
+    }, this.__onReset = () => {
+      var e, r, c, n;
+      (r = (e = this.shadowRoot) == null ? void 0 : e.querySelector("form")) == null || r.reset(), (((n = (c = this.shadowRoot) == null ? void 0 : c.querySelector("slot")) == null ? void 0 : n.assignedElements({ flatten: !0 })) ?? []).forEach((o) => {
+        const l = o.tagName;
+        l === "SCB-TEXTFIELD" && (o.value = ""), l === "SCB-CHECKBOX" && (o.checked = !1), l === "SCB-RADIO-BUTTON" && (o.checked = !1), l === "SCB-SWITCH" && (o.selected = !1), l === "SCB-CHIP" && (o.selected = !1);
+      }), this.__fire("reset");
+    }, this.__onSubmit = () => {
+      var t, e;
+      (e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("form")) == null || e.requestSubmit(), this.__fire("submit"), this.__setOpen(!1);
+    }, this.__onKeydownTrap = (t) => {
+      if (!this.open || t.key !== "Tab") return;
+      const e = Array.from(
+        this.shadowRoot.querySelectorAll(
+          'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
+        )
+      ).filter((n) => !n.hasAttribute("disabled"));
+      if (!e.length) return;
+      const r = e[0], c = e[e.length - 1];
+      t.shiftKey && document.activeElement === r ? (c.focus(), t.preventDefault()) : !t.shiftKey && document.activeElement === c && (r.focus(), t.preventDefault());
+    };
+  }
+  /* Första uppdatering: se till att knappar/ikoner finns och slottade deps laddas on-demand. */
+  async firstUpdated() {
+    await import("../scb-button/scb-button.js"), await import("../scb-icon-button/scb-icon-button.js"), this.icon && await import("@material/web/icon/icon.js"), await this.__ensureSlottedDeps();
+  }
+  /* Ladda underkomponenter som faktiskt används i slotten (prestanda: undvik onödiga imports). */
+  async __ensureSlottedDeps() {
+    var r;
+    const t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot");
+    if (!t) return;
+    const e = async (c) => {
+      const n = new Set(c.map((o) => o.tagName));
+      for (const o of n) {
+        const l = this.__slotDeps[o];
+        l && await l();
+      }
+    };
+    await e(t.assignedElements({ flatten: !0 })), t.addEventListener(
+      "slotchange",
+      async () => e(t.assignedElements({ flatten: !0 }))
+    );
+  }
+  /*  Triggers + ESC + fokusåterställning 
+     – aria-controls="dlg-id" eller data-dialog-toggle="dlg-id" växlar open-state
+     – ESC stänger och skickar 'esc'-event
+     – minns senaste trigger för att refocus på close
+  */
+  __getActionFromEvent(t) {
+    if (!this.id) return null;
+    for (const e of t.composedPath())
+      if (e instanceof Element) {
+        if (e.getAttribute("data-dialog-toggle") === this.id)
+          return this.__lastTriggerEl = e, "toggle";
+        if (e.getAttribute("aria-controls") === this.id)
+          return this.__lastTriggerEl = e, "toggle";
+      }
+    return null;
+  }
+  /* Koppla in global listeners (klick/tangentbord) och focus trap. */
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this.__onDocumentClick, !1), document.addEventListener("keydown", this.__onDocumentKeydown, !0), this.addEventListener("keydown", this.__onKeydownTrap);
+  }
+  disconnectedCallback() {
+    document.removeEventListener("click", this.__onDocumentClick, !1), document.removeEventListener("keydown", this.__onDocumentKeydown, !0), this.removeEventListener("keydown", this.__onKeydownTrap), super.disconnectedCallback();
+  }
+  /* Reagera på stateändringar (framförallt open):
+     – uppdatera aria-expanded på triggers
+     – sätt fokus inuti dialogen när den öppnas
+     – återställ fokus till triggern när den stängs
+     – lås/lås upp sid-scroll (inte i SB-läge)
+  */
+  updated(t) {
+    var e, r;
+    if (t.has("open")) {
+      const c = t.get("open");
+      this.__updateTriggersExpanded(), this.open && !c ? this.updateComplete.then(() => {
+        var n, o, l;
+        (l = (o = (n = this.shadowRoot) == null ? void 0 : n.querySelector(
+          'button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'
+        )) == null ? void 0 : o.focus) == null || l.call(o);
+      }) : !this.open && c && ((r = (e = this.__lastTriggerEl) == null ? void 0 : e.focus) == null || r.call(e)), this.__toggleScrollLock(this.open);
+    }
+    t.has("icon") && this.icon && import("@material/web/icon/icon.js");
+  }
+  /* Håll aria-expanded i synk på alla triggers som pekar på dialogens id. */
+  __updateTriggersExpanded() {
+    this.id && document.querySelectorAll(`[aria-controls="${this.id}"], [data-dialog-toggle="${this.id}"]`).forEach((t) => {
+      t.hasAttribute("aria-controls") && t.setAttribute("aria-expanded", String(this.open));
+    });
+  }
+  /* Sid-scroll låses upp/ner när dialogen är öppen – men aldrig i SB-läge. */
+  __toggleScrollLock(t) {
+    if (this.inSb) return;
+    const e = document.documentElement;
+    e.style.overflow = t ? "hidden" : "";
+  }
+  /* Helpers för att byta state och fire events på ett ställe. */
+  __setOpen(t) {
+    this.open = t, this.__fire(t ? "open" : "close");
+  }
+  __fire(t, e) {
+    this.dispatchEvent(new CustomEvent(t, { detail: e, bubbles: !0, composed: !0 }));
+  }
+  /* Helper: avgör om det finns något slottat innehåll (för att välja mellan supportingText/slot). */
+  __slotIsEmpty() {
+    var e;
+    const t = (e = this.shadowRoot) == null ? void 0 : e.querySelector("slot");
+    return t ? t.assignedElements({ flatten: !0 }).length === 0 : !0;
+  }
+  /* Render-delar */
+  /* Header: ikon (om satt), titel + ev. stäng-ikon i form/floating. */
+  renderHeader(t) {
+    const e = this.variant === "form" || this.variant === "floating";
+    return d`
+      <div class="header">
+        <div class="title">
+          ${this.icon ? d`<md-icon class="dialog-icon">${this.icon}</md-icon>` : p}
+          <div class="label" id=${t}>${this.label}</div>
+        </div>
+        ${e ? d`<scb-icon-button class="close" icon="close" @click=${this.__onCancel}></scb-icon-button>` : p}
+      </div>
+    `;
+  }
+  /* Content för varianter som inte använder form. Faller tillbaka till supportingText om slotten är tom. */
+  renderContentDefault(t) {
+    const e = this.__slotIsEmpty();
+    return d`
+      <div class="content" id=${t}>
+        ${e && this.supportingText ? d`${this.supportingText}` : d`<slot></slot>`}
+      </div>
+    `;
+  }
+  /* Actions längst ned — varierar per variant. */
+  renderActions() {
+    switch (this.variant) {
+      case "alert":
+        return d`<div class="actions">
+          <scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
+        </div>`;
+      case "confirm":
+        return d`<div class="actions">
+          <scb-button variant="text" label=${this.confirmButton} @click=${this.__onConfirm}></scb-button>
+          <scb-button variant="text" label=${this.denyButton} @click=${this.__onDeny}></scb-button>
+        </div>`;
+      case "choose":
+        return d`<div class="actions">
+          <scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
+          <scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
+        </div>`;
+      case "form":
+        return d`<div class="actions">
+          <scb-button class="start" variant="text" label=${this.resetButton} @click=${this.__onReset}></scb-button>
+          <scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
+          <scb-button variant="text" label=${this.submitButton} @click=${this.__onSubmit}></scb-button>
+        </div>`;
+      case "floating":
+        return p;
+      default:
+        return d`<div class="actions">
+          <scb-button variant="text" label=${this.cancelButton} @click=${this.__onCancel}></scb-button>
+          <scb-button variant="text" label=${this.okButton} @click=${this.__onOk}></scb-button>
+        </div>`;
+    }
+  }
+  /* Body skiljer på form-varianten (wrapper <form>) och övriga. */
+  renderBody(t, e) {
+    return this.variant === "form" ? d`
+        ${this.renderHeader(t)}
+        <div class="content" id=${e}>
+          <form id=${this.formId} action=${this.formAction} method=${this.formMethod || p}>
+            <slot></slot>
+          </form>
+        </div>
+        ${this.renderActions()}
+      ` : d`${this.renderHeader(t)} ${this.renderContentDefault(e)} ${this.renderActions()}`;
+  }
+  /* Root render: role/aria-attribut sätts här för att para ihop titel och beskrivning. */
+  render() {
+    const t = "dlg-title", e = "dlg-desc";
+    return d`
+      <div class="scrim" @click=${this.__onScrimClick} aria-hidden="true"></div>
+      <div
+        class="container"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby=${t}
+        aria-describedby=${e}
+      >
+        ${this.renderBody(t, e)}
+      </div>
+    `;
+  }
+};
+i.styles = h`
+    :host { display:block; position:relative; }
+
+    .scrim {
+      position: var(--scb-dialog-scrim-position, fixed);
+      inset: 0;
+      /* var från tokens, tonas med opacity via color-mix */
+      background: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
+      z-index: var(--z-dialog-scrim, 1000);
+      opacity: 1;
+      transition: opacity var(--motion-duration-short, 0.25s);
+      height: var(--scb-dialog-scrim-height, auto);
+    }
+
+    .container {
+      position: var(--scb-dialog-container-position, fixed);
+      inset: 50% auto auto 50%;
+      transform: translate(-50%, -50%) scale(1);
+
+      background: var(--md-sys-color-surface);
+      color: var(--md-sys-color-on-surface);
+
+      /* radius mappad till spacing-token som fallback */
+      border-radius: var(--scb-dialog-radius, var(--spacing-5, 16px));
+
+      /* skugga mappad till shadow-token + spacing-tokens */
+      box-shadow:
+        0 var(--spacing-1, 2px)
+        var(--spacing-5, 16px)
+        color-mix(in srgb, var(--md-sys-color-shadow) 20%, transparent);
+
+      /* width/height via CSS custom props med px-fallback */
+      min-width: var(--scb-dialog-min-w, 340px);
+      max-width: var(--scb-dialog-max-w, 90vw);
+      max-height: var(--scb-dialog-max-h, 90vh);
+
+      display:flex; flex-direction:column;
+
+      /* padding mappad till spacing-token */
+      padding: var(--scb-dialog-padding, var(--spacing-7, 24px));
+
+      z-index: var(--z-dialog, 1001);
+      opacity: 1;
+      transition:
+        opacity var(--motion-duration-short, 0.25s),
+        transform var(--motion-duration-short, 0.25s);
+    }
+
+    :host(:not([open])) .scrim,
+    :host(:not([open])) .container { opacity:0; pointer-events:none; }
+
+    /* Header: ikon över rubrik */
+    .header {
+      display:flex;
+      align-items:flex-start;
+      gap: var(--spacing-4, 12px);
+      margin-bottom: var(--spacing-5, 16px);
+    }
+    .header .title {
+      display:flex;
+      flex-direction:column; /* ikon ovanför label */
+      gap: var(--spacing-3, 8px);
+    }
+    .header .label {
+      /* typografi mappad till md-sys-typescale tokens */
+      font-weight: var(--md-sys-typescale-headline-small-weight, 700);
+      font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);
+      line-height: var(--md-sys-typescale-headline-small-line-height, 2rem);
+    }
+    .header .close { margin-left:auto; }
+
+    .dialog-icon {
+      inline-size: var(--scb-dialog-icon-size, var(--spacing-7, 24px));
+      block-size: var(--scb-dialog-icon-size, var(--spacing-7, 24px));
+    }
+
+    .content {
+      flex: 1 1 auto;
+      overflow:auto;
+      margin-bottom: var(--spacing-5, 16px);
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .actions {
+      display:flex;
+      align-items:center;
+      gap: var(--spacing-3, 8px);
+      justify-content:flex-end;
+    }
+    .actions .start { margin-right:auto; }
+
+    /* Min-bredder per variant (override-ningsbara via CSS custom props) */
+    :host([variant="choose"])   .container { --scb-dialog-min-w: var(--scb-dialog-min-w-choose, 280px); }
+    :host([variant="alert"])    .container { --scb-dialog-min-w: var(--scb-dialog-min-w-alert, 320px); }
+    :host([variant="confirm"])  .container { --scb-dialog-min-w: var(--scb-dialog-min-w-confirm, 360px); }
+
+    /* Form-layout: enkel kolumn-grid med gap */
+    :host([variant="form"]) form{
+      display:grid;
+      grid-template-columns: 1fr;
+      gap: var(--scb-form-gap, var(--spacing-6, 20px)); /* <— token + fallback */
+    }
+
+    :host([variant="floating"]) .container { --scb-dialog-min-w: var(--scb-dialog-min-w-floating, 360px); }
+
+    /* Choose: gör slottade radios vertikala med spacing */
+    :host([variant="choose"]) ::slotted(scb-radio-button) {
+      display:block;
+      margin-block: var(--scb-choice-gap, 6px);
+    }
+  `;
+s([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "open", 2);
+s([
+  a({ type: Boolean, attribute: !1 })
+], i.prototype, "inSb", 2);
+s([
+  a({ type: Boolean, attribute: "scrim-close" })
+], i.prototype, "scrimClose", 2);
+s([
+  a({ type: String })
+], i.prototype, "variant", 2);
+s([
+  a({ type: String })
+], i.prototype, "label", 2);
+s([
+  a({ type: String })
+], i.prototype, "icon", 2);
+s([
+  a({ type: String, attribute: "supporting-text" })
+], i.prototype, "supportingText", 2);
+s([
+  a({ type: String, attribute: "ok-button" })
+], i.prototype, "okButton", 2);
+s([
+  a({ type: String, attribute: "cancel-button" })
+], i.prototype, "cancelButton", 2);
+s([
+  a({ type: String, attribute: "delete-button" })
+], i.prototype, "deleteButton", 2);
+s([
+  a({ type: String, attribute: "confirm-button" })
+], i.prototype, "confirmButton", 2);
+s([
+  a({ type: String, attribute: "deny-button" })
+], i.prototype, "denyButton", 2);
+s([
+  a({ type: String, attribute: "reset-button" })
+], i.prototype, "resetButton", 2);
+s([
+  a({ type: String, attribute: "submit-button" })
+], i.prototype, "submitButton", 2);
+s([
+  a({ type: String, attribute: "form-id" })
+], i.prototype, "formId", 2);
+s([
+  a({ type: String, attribute: "form-action" })
+], i.prototype, "formAction", 2);
+s([
+  a({ type: String, attribute: "form-method" })
+], i.prototype, "formMethod", 2);
+i = s([
+  m("scb-dialog")
+], i);
+export {
+  i as ScbDialog
+};

package/scb-divider/scb-divider.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+
+export declare class ScbDivider extends LitElement {
+    variant: 'thin' | 'bold';
+    direction: 'horizontal' | 'vertical';
+    inset: 'both' | 'start' | 'end';
+    static styles: import('lit').CSSResult[];
+    render(): import('lit-html').TemplateResult<1>;
+}

package/scb-divider/scb-divider.js

@@ -0,0 +1,85 @@
+import { css as d, LitElement as p, html as v } from "lit";
+import { property as c, customElement as h } from "lit/decorators.js";
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (l, i, n, e) => {
+  for (var t = e > 1 ? void 0 : e ? b(i, n) : i, s = l.length - 1, a; s >= 0; s--)
+    (a = l[s]) && (t = (e ? a(i, n, t) : a(t)) || t);
+  return e && t && m(i, n, t), t;
+};
+let r = class extends p {
+  constructor() {
+    super(...arguments), this.variant = "thin", this.direction = "horizontal", this.inset = "both";
+  }
+  render() {
+    return v`
+      <div class="scb-divider"
+        variant=${this.variant}
+        direction=${this.direction}
+      ></div>
+    `;
+  }
+};
+r.styles = [
+  d`
+      :host {
+        content: '';
+        display: block;
+        border-top: 1px solid var(--md-sys-color-outline-variant);
+        width: 100%;
+      }
+
+      :host([variant="bold"]) {
+        border-top: 1px solid var(--md-sys-color-outline);
+      }
+      :host([direction="vertical"]) {
+        border-top: none;
+        border-left: 1px solid var(--md-sys-color-outline-variant);
+        height: calc(100% - 20px);
+        margin: 10px;
+        width: 2px;
+      }
+
+      :host([variant="bold"][direction="vertical"]) {
+        border-left: 1px solid var(--md-sys-color-outline);
+      }
+
+
+      // // // :host([inset="both"]:not([direction="vertical"])) {
+      // // //   margin: 0 32px;
+      // // // }
+
+      // // // :host([inset="start"]:not([direction="vertical"])) {
+      // // //   margin-left: 32px;
+      // // // }
+
+      // // // :host([inset="end"]:not([direction="vertical"])) {
+      // // //   margin-right: 32px;
+      // // // }
+
+      // // // :host([inset="both"][direction="vertical"]) {
+      // // //   margin: 32px 0;
+      // // // }
+
+      // // // :host([inset="start"][direction="vertical"]) {
+      // // //   margin-top: 32px;
+      // // // }
+
+      // // // :host([inset="end"][direction="vertical"]) {
+      // // //   margin-bottom: 32px;
+      // // // }
+    `
+];
+o([
+  c({ type: String, reflect: !0 })
+], r.prototype, "variant", 2);
+o([
+  c({ type: String, reflect: !0 })
+], r.prototype, "direction", 2);
+o([
+  c({ type: String, reflect: !0 })
+], r.prototype, "inset", 2);
+r = o([
+  h("scb-divider")
+], r);
+export {
+  r as ScbDivider
+};

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

@@ -0,0 +1,61 @@
+import { LitElement, TemplateResult } from 'lit';
+
+/**
+<scb-drawer-item>
+
+Ett menyval för <scb-drawer>. Kan vara länk (item-href) eller knapp.
+Funktioner
+  — Valbar leading-icon (lazy-loadar md-icon).
+  — md-ripple lazy-loadas första gången.
+  — Kan innehålla en slottad <scb-sub-drawer> som expanderas/kolapsas.
+  — Skickar "scb-drawer-select" när item väljs (bubblar och composed).
+Tillgänglighet
+  — När undermeny finns sätts aria-expanded och aria-controls på knappen.
+  — selected-reflektion används för visuell markering.
+Tangentbord
+  — arrowUp/arrowDown/home/end flyttar fokus mellan syskon-items i menyn.
+  — Enter/Space hanteras av respektive native element (knapp/länk).
+*/
+export declare class ScbDrawerItem extends LitElement {
+    /** Visad text/label. */
+    label: string;
+    /** Markerad/vald state */
+    selected: boolean;
+    /** Ikonnamn före label (Material icon glyph). */
+    leadingIcon: string;
+    /** Om satt blir item en länk (<a>) istället för knapp. */
+    itemHref: string;
+    /** Om slotten innehåller en <scb-sub-drawer>. */
+    private hasSlotContent;
+    /** Öppen/stängd undermeny. */
+    private expanded;
+    /** Stabilt id för aria-controls på knappen som styr undermenyn. */
+    private __submenuId;
+    private static __rippleLoaded;
+    private static __iconLoaded;
+    private static __iconButtonLoaded;
+    /** Ladda alltid md-ripple, md-icon bara om leadingIcon används. */
+    private __ensureDepsLoaded;
+    static styles: import('lit').CSSResult;
+    /** Håll koll på att slotten endast innehåller <scb-sub-drawer>. */
+    private _onSlotChange;
+    /** Växla undermeny (om sådan finns); stoppa bubbla så att inte överordnat item fångar klicket. */
+    private _toggleExpand;
+    /** Skicka ”val”-event uppåt så att <scb-drawer> kan markera selected. */
+    private _dispatchSelect;
+    /** Klick på knapp-variant: välj och eventuellt expandera undermeny. */
+    private _onButtonClick;
+    /** Klick på länk-variant: välj (navigering sköts av <a>). */
+    private _onLinkClick;
+    /** Vid initiering, kolla slotten och lazy-loada depemdencies. */
+    firstUpdated(): Promise<void>;
+    /** Om leadingIcon sätts i efterhand, se till att md-icon finns. */
+    protected updated(changed: Map<string, unknown>): void;
+    render(): TemplateResult;
+    private _onKeyDown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-drawer-item': ScbDrawerItem;
+    }
+}