scb-wc-test 0.1.1

package/scb-accordion/scb-accordion-item.js

@@ -0,0 +1,343 @@
+import { css as h, LitElement as g, nothing as p, html as l } from "lit";
+import { property as o, customElement as v } from "lit/decorators.js";
+var u = Object.defineProperty, m = Object.getOwnPropertyDescriptor, r = (t, a, s, i) => {
+  for (var n = i > 1 ? void 0 : i ? m(a, s) : a, d = t.length - 1, c; d >= 0; d--)
+    (c = t[d]) && (n = (i ? c(a, s, n) : c(n)) || n);
+  return i && n && u(a, s, n), n;
+};
+let e = class extends g {
+  constructor() {
+    super(...arguments), this.expanded = !1, this.label = "", this.content = "", this.overline = "", this.supportingText = "", this.leading = !1, this.leadingVariant = "", this.leadingIcon = "", this.imgHrefImage = "https://www.scb.se/img/scb-logo.svg", this.avatarLabel = "", this.avatarAlt = "", this.avatarVariant = "icon", this.avatarSrc = "", this.density = 0, this._unique = e._uid(), this.toggleAccordion = () => {
+      const t = this.closest("scb-accordion");
+      t != null && t.hasAttribute("detached") || t.querySelectorAll("scb-accordion-item").forEach((s) => {
+        s !== this && (s.expanded = !1, s._applyInert(), s._setBottomMaxHeight(s));
+      }), this.expanded = !this.expanded, this._applyInert(), this._setBottomMaxHeight(this);
+    }, this._onSlotChange = () => {
+      this.expanded && this._setBottomMaxHeight(this);
+    }, this._onContentLoad = () => {
+      this.expanded && this._setBottomMaxHeight(this);
+    };
+  }
+  static _uid() {
+    var t, a;
+    return ((a = (t = globalThis.crypto) == null ? void 0 : t.randomUUID) == null ? void 0 : a.call(t)) ?? `${e._uidPrefix}-${++e._uidSeq}`;
+  }
+  async firstUpdated() {
+    var t;
+    e._mdIconLoaded || (await import("@material/web/icon/icon.js"), e._mdIconLoaded = !0), e._mdRippleLoaded || (await import("@material/web/ripple/ripple.js"), e._mdRippleLoaded = !0), this._applyInert(), (t = this._bottomEl()) == null || t.addEventListener("load", this._onContentLoad, !0);
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this._bottomEl()) == null || t.removeEventListener("load", this._onContentLoad, !0), super.disconnectedCallback();
+  }
+  // Animerar max-height vid öppning/stängning för snygg transition
+  _setBottomMaxHeight(t) {
+    const a = t._bottomEl();
+    a && (t.expanded ? (a.style.maxHeight = `${a.scrollHeight}px`, setTimeout(() => a.style.maxHeight = "unset", 160)) : (a.style.maxHeight = `${a.scrollHeight}px`, requestAnimationFrame(() => a.style.maxHeight = "0")));
+  }
+  /*
+    Tangentbordsnavigering:
+    enter/space togglar,
+    Arrowup/down flyttar fokus,
+    home/end hoppar till första/sista item.
+  */
+  _onKeyDown(t) {
+    const a = this.closest("scb-accordion"), i = Array.from((a == null ? void 0 : a.querySelectorAll("scb-accordion-item")) || []).map((c) => c.renderRoot.querySelector(".scb-accordion-top")).filter((c) => !!c), n = t.currentTarget, d = i.indexOf(n);
+    switch (t.key) {
+      case "Enter":
+      case " ":
+        t.preventDefault(), this.toggleAccordion();
+        break;
+      case "ArrowDown":
+        t.preventDefault(), d < i.length - 1 && i[d + 1].focus();
+        break;
+      case "ArrowUp":
+        t.preventDefault(), d > 0 && i[d - 1].focus();
+        break;
+      case "Home":
+        t.preventDefault(), i.length && i[0].focus();
+        break;
+      case "End":
+        t.preventDefault(), i.length && i[i.length - 1].focus();
+        break;
+    }
+  }
+  // Leading-template (ikon/avatar/bild)
+  _renderLeading() {
+    if (!this.leading) return p;
+    switch (this.leadingVariant) {
+      case "icon":
+        return l`<md-icon>${this.leadingIcon}</md-icon>`;
+      case "avatar":
+        return l`
+          <scb-avatar
+            label=${this.avatarLabel}
+            alt=${this.avatarAlt}
+            src=${this.avatarVariant === "image" ? this.avatarSrc : ""}
+            size="medium"
+            shape="circular"
+            variant=${this.avatarVariant}
+          ></scb-avatar>
+        `;
+      case "image":
+        return l`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />`;
+      default:
+        return p;
+    }
+  }
+  // Panel-elementet
+  _bottomEl() {
+    return this.renderRoot.querySelector(".scb-accordion-bottom");
+  }
+  // Håll tabb-ordningen korrekt med inert och aria-hidden
+  _applyInert() {
+    const t = this._bottomEl();
+    t && (this.expanded ? (t.removeAttribute("inert"), t.setAttribute("aria-hidden", "false")) : (t.setAttribute("inert", ""), t.setAttribute("aria-hidden", "true")));
+  }
+  updated(t) {
+    t.has("expanded") && (this._applyInert(), this._setBottomMaxHeight(this));
+  }
+  // Renderar struktur med korrekt aria-controls kopplat till botten-delen
+  render() {
+    const t = `bottom-${this._unique}`, a = `header-${this._unique}`, s = !!this.overline, i = !!this.supportingText;
+    return l`
+      <div part="scb-accordion-item" class="scb-accordion-item">
+        <div
+          id=${a}
+          class="scb-accordion-top"
+          tabindex="0"
+          role="button"
+          aria-expanded=${this.expanded}
+          aria-controls=${t}
+          @click=${this.toggleAccordion}
+          @keydown=${this._onKeyDown}
+        >
+          <!-- Ripple för press/hover/focus state-layer -->
+          <md-ripple></md-ripple>
+
+          ${this.leading ? l`<div class="leading">${this._renderLeading()}</div>` : p}
+
+          <div class="texts">
+            ${s ? l`<div class="overline">${this.overline}</div>` : p}
+            <div class="label">${this.label}</div>
+            ${i ? l`<div class="supporting-text">${this.supportingText}</div>` : p}
+          </div>
+
+          <md-icon class="chevron">
+            ${this.expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+          </md-icon>
+        </div>
+
+        <div
+          id=${t}
+          class="scb-accordion-bottom ${this.expanded ? "expanded" : ""}"
+          role="region"
+          aria-labelledby=${a}
+          aria-hidden=${this.expanded ? "false" : "true"}
+        >
+          <slot @slotchange=${this._onSlotChange}>${this.content}</slot>
+        </div>
+      </div>
+    `;
+  }
+};
+e._uidPrefix = `uid-${Math.random().toString(36).slice(2)}`;
+e._uidSeq = 0;
+e._mdIconLoaded = !1;
+e._mdRippleLoaded = !1;
+e.styles = [
+  h`
+      :host { 
+        display: block; 
+        --_focus-width: var(--md-focus-ring-width, var(--stroke-focus-ring, 2px));
+        --_focus-radius: var(--md-sys-shape-corner-small, var(--radius-s, 8px));
+
+        --scb-accordion-hover-radius: var(--radius-none, 0px);
+        --scb-accordion-chevron-nudge-y: 3px;
+        --scb-accordion-transition-duration: 150ms;
+        --scb-accordion-transition-easing: cubic-bezier(.69,.16,.2,.98);
+        --scb-accordion-panel-padding-closed: var(--spacing-0, 0px);
+      }
+
+      .scb-accordion-item{
+        border-bottom: var(--stroke-border, 1px) solid var(--md-sys-color-outline-variant);
+        margin-bottom: calc(var(--stroke-border, 1px) * -1);
+        display: flex;
+        flex-direction: column;
+        color: var(--md-sys-color-on-surface);
+        font-family: var(--brand-font);
+      }
+
+      .scb-accordion-top {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        cursor: pointer;
+        /* default density 0: 24px över/under, 16px i sidled */
+        padding-block: var(--spacing-7, 24px);
+        padding-inline: var(--spacing-5, 16px);
+        outline: none;
+        /* för att undvika rundade hörn på hover */
+        border-radius: var(--radius-none, 0px);
+        gap: var(--spacing-5, 16px);
+        color: var(--md-sys-color-on-surface);
+        /* För ripple */
+        position: relative;
+        overflow: hidden;
+        -webkit-tap-highlight-color: transparent;
+      }
+      .scb-accordion-top:hover {
+        /* Inga runda hörn på hover */
+        border-radius: var(--scb-accordion-hover-radius);
+      }
+      
+      .scb-accordion-top:focus-visible {
+        outline: var(--_focus-width) solid var(--md-focus-ring-color, var(--p-40));
+        outline-offset: var(--spacing-1, 2px);
+        /* Tillåt runda hörn endast vid fokusmarkering  */
+        border-radius: var(--_focus-radius);
+      }
+
+      /* Om både om hosten har data-density och om en förälder har det. */
+      :host([density="-2"]) .scb-accordion-top,
+      :host-context([data-density="-2"]) .scb-accordion-top {
+        padding-block: var(--spacing-5, 16px);
+      }
+      :host([density="-4"]) .scb-accordion-top,
+      :host-context([data-density="-4"]) .scb-accordion-top {
+        padding-block: var(--spacing-4, 12px);
+      }
+
+      .scb-accordion-bottom {
+        padding-block: var(--scb-accordion-panel-padding-closed);
+        padding-inline: var(--spacing-5, 16px);
+        max-height: 0;
+        overflow: hidden;
+        transition: var(--scb-accordion-transition-duration) var(--scb-accordion-transition-easing);
+        opacity: 0;
+      }
+      .scb-accordion-bottom.expanded {
+        opacity: 1;
+        padding-top: var(--spacing-2, 4px);
+        padding-right: var(--spacing-5, 16px);
+        padding-bottom: var(--spacing-5, 16px);
+        padding-left: var(--spacing-5, 16px);
+        max-height: 100%;
+      }
+
+      .label { 
+        font-family: var(--brand-font);
+        font-size: var(--md-sys-typescale-title-large-size);
+        line-height: var(--md-sys-typescale-title-large-line-height);
+        font-weight: var(--weight-semibold);
+        letter-spacing: var(--md-sys-typescale-title-large-tracking);
+        color: var(--md-sys-color-on-surface);
+      }
+      .overline { 
+        font-family: var(--brand-font);
+        font-size: var(--md-sys-typescale-label-medium-size); 
+        line-height: var(--md-sys-typescale-label-medium-line-height);
+        font-weight: var(--weight-regular);
+        letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+      .supporting-text {
+        font-family: var(--brand-font);
+        font-size: var(--md-sys-typescale-body-medium-size);  
+        line-height: var(--md-sys-typescale-body-medium-line-height);
+        font-weight: var(--weight-regular);
+        letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+        color: var(--md-sys-color-on-surface-variant);
+      }
+
+      .leading { 
+        align-self: center; 
+        display: grid; 
+        place-items: center; 
+      }
+
+      .avatar { 
+        width: var(--icon-size-small, 24px); 
+        height: var(--icon-size-small, 24px); 
+        display: flex; 
+        object-fit: contain;    
+      }
+      .img { 
+        width: calc(var(--icon-size-large, 40px) + var(--spacing-5, 16px)); 
+        height: calc(var(--icon-size-large, 40px) + var(--spacing-5, 16px)); 
+        object-fit: contain;      
+        border-radius: var(--radius-s, 8px); 
+      }
+
+      .texts { 
+        display: grid; 
+        gap: var(--spacing-1, 2px); 
+      }
+
+      /* chevron till höger */
+      .chevron { 
+        margin-left: auto; 
+        padding-top: var(--scb-accordion-chevron-nudge-y, 3px); 
+        font-size: var(--icon-size-small, 24px);
+      }
+
+      /* Ripple ska fylla den klickbara ytan och ärver ev. rundning vid fokus */
+      md-ripple {
+        border-radius: inherit;
+        inset: 0;
+        position: absolute;
+        pointer-events: none;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        md-ripple { display: none; } /* endast fokusring visas */
+      }
+    `
+];
+r([
+  o({ type: Boolean })
+], e.prototype, "expanded", 2);
+r([
+  o({ type: String, reflect: !0 })
+], e.prototype, "label", 2);
+r([
+  o({ type: String })
+], e.prototype, "content", 2);
+r([
+  o({ type: String, attribute: "overline" })
+], e.prototype, "overline", 2);
+r([
+  o({ type: String, attribute: "supporting-text" })
+], e.prototype, "supportingText", 2);
+r([
+  o({ type: Boolean })
+], e.prototype, "leading", 2);
+r([
+  o({ type: String, attribute: "leading-variant", reflect: !0 })
+], e.prototype, "leadingVariant", 2);
+r([
+  o({ type: String, attribute: "leading-icon" })
+], e.prototype, "leadingIcon", 2);
+r([
+  o({ type: String, attribute: "img-href-image", reflect: !0 })
+], e.prototype, "imgHrefImage", 2);
+r([
+  o({ type: String, attribute: "avatar-label" })
+], e.prototype, "avatarLabel", 2);
+r([
+  o({ type: String, attribute: "avatar-alt" })
+], e.prototype, "avatarAlt", 2);
+r([
+  o({ type: String, attribute: "avatar-variant" })
+], e.prototype, "avatarVariant", 2);
+r([
+  o({ type: String, attribute: "avatar-src" })
+], e.prototype, "avatarSrc", 2);
+r([
+  o({ type: Number, reflect: !0 })
+], e.prototype, "density", 2);
+e = r([
+  v("scb-accordion-item")
+], e);
+export {
+  e as ScbAccordionItem
+};

package/scb-accordion/scb-accordion.d.ts

@@ -0,0 +1,6 @@
+import { LitElement, TemplateResult } from 'lit';
+
+export declare class ScbAccordion extends LitElement {
+    detached: boolean;
+    render(): TemplateResult;
+}

package/scb-accordion/scb-accordion.js

@@ -0,0 +1,33 @@
+import { LitElement as n, html as a } from "lit";
+import { property as i, customElement as m } from "lit/decorators.js";
+import "./scb-accordion-item.js";
+var f = Object.defineProperty, h = Object.getOwnPropertyDescriptor, d = (l, r, o, t) => {
+  for (var e = t > 1 ? void 0 : t ? h(r, o) : r, c = l.length - 1, s; c >= 0; c--)
+    (s = l[c]) && (e = (t ? s(r, o, e) : s(e)) || e);
+  return t && e && f(r, o, e), e;
+};
+let p = class extends n {
+  constructor() {
+    super(...arguments), this.detached = !1;
+  }
+  /*
+    Renderar containern och slottar in alla scb-accordion-item.
+    Sätter attributet `detached` på wrappern om relevant.
+  */
+  render() {
+    return a`
+      <div class="scb-accordion" ?detached=${this.detached}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+d([
+  i({ type: Boolean, reflect: !0 })
+], p.prototype, "detached", 2);
+p = d([
+  m("scb-accordion")
+], p);
+export {
+  p as ScbAccordion
+};

package/scb-app-bar/scb-app-bar.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+
+export declare class ScbAppBar extends LitElement {
+    title: string;
+    type: 'default' | 'small-flexible' | 'search' | 'medium-flexible' | 'large-flexible';
+    position: string;
+    searchSupportingText: string;
+    static styles: import('lit').CSSResult[];
+    render(): import('lit-html').TemplateResult<1>;
+}

package/scb-app-bar/scb-app-bar.js

@@ -0,0 +1,192 @@
+import { css as h, LitElement as c, html as i } from "lit";
+import { property as s, customElement as m } from "lit/decorators.js";
+import "../scb-icon-button/scb-icon-button.js";
+import "../scb-search/scb-search.js";
+var g = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (d, l, n, o) => {
+  for (var e = o > 1 ? void 0 : o ? x(l, n) : l, r = d.length - 1, p; r >= 0; r--)
+    (p = d[r]) && (e = (o ? p(l, n, e) : p(e)) || e);
+  return o && e && g(l, n, e), e;
+};
+let t = class extends c {
+  constructor() {
+    super(...arguments), this.title = "App title", this.type = "default", this.position = "default", this.searchSupportingText = "";
+  }
+  render() {
+    switch (this.type) {
+      case "small-flexible":
+        return i`
+                    <header class="small-flexible ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Small app bar">
+                        <div class="leading">
+                            <slot name="leading"></slot>
+                        </div>
+                        <h1 class="headline">${this.title}</h1>
+                        <div class="trailing">
+                            <slot name="trailing"></slot>
+                        </div>
+                    </header>
+                `;
+      case "medium-flexible":
+        return i`
+                    <header class="medium-flexible ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Medium flexible app bar">
+                        <div class="action-elements">
+                            <div>
+                                <slot name="leading"></slot>
+                            </div>
+                            <div>
+                                <slot name="trailing"></slot>
+                            </div>
+                        </div>
+                        <h1 class="headline">${this.title}</h1>
+                    </header>
+                `;
+      case "large-flexible":
+        return i`
+                    <header class="large-flexible ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Large flexible app bar">
+                        <div class="action-elements">
+                            <div style="">
+                                <slot name="leading"></slot>
+                            </div>
+                            <div style="">
+                                <slot name="trailing"></slot>
+                            </div>
+                        </div>
+                        <h1 class="headline">${this.title}</h1>
+                    </header>
+                `;
+      case "search":
+        return i`
+                    <header class="search ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Search app bar">
+                        <div class="leading">
+                            <slot name="leading"></slot>
+                        </div>
+                        <div class="search-container">
+                            <scb-search supporting-text=${this.searchSupportingText}></scb-search>
+                        </div>
+                        <div class="trailing">
+                            <slot name="trailing"></slot>
+                        </div>
+                    </header>
+                `;
+      default:
+        return i`
+                    <header class="default ${this.position == "bottom" ? "position-bottom" : this.position == "top" ? "position-top" : ""}" role="banner" aria-label="Small app bar">
+                        <div class="leading">
+                            <slot name="leading"></slot>
+                        </div>
+                        <h1 class="headline">${this.title}</h1>
+                        <div class="trailing">
+                            <slot name="trailing"></slot>
+                        </div>
+                    </header>
+                `;
+    }
+  }
+};
+t.styles = [
+  h`
+            :host {
+                display: block;
+                position: relative;
+                container-type: inline-size;
+                container-name: app-bar-container;
+            }
+            header {
+                background: var(--md-sys-color-surface-container);
+                color: var(--md-sys-color-on-surface);
+                display: flex;
+                align-items: center;
+                padding: 0 16px;
+                position: relative;
+                z-index: 10;
+                transition: height 0.3s;
+                min-height: 64px;
+            }
+            header.search {
+                height: 64px;
+            }
+            header.medium-flexible {
+                flex-direction: column;
+                align-items: flex-start;
+                padding: 16px;
+            }
+            header.large-flexible {
+                flex-direction: column;
+                align-items: flex-start;
+                padding: 16px;
+            }
+            header.position-top {
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                z-index: 100;
+            }
+            header.position-bottom {
+                position: fixed;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                z-index: 100;
+            }
+            .headline {
+                flex: 1 1 auto;
+                text-align: center;
+                font-size: 20px;
+                font-weight: 600;
+                margin: 0;
+            }
+            header.small-flexible .headline {
+                text-align: left;
+                margin-left: 16px;
+            }
+            header.medium-flexible .headline {
+                font-size:  24px;
+                line-height: 30px;
+                font-weight: 700;
+                letter-spacing: -0.6px;
+                text-align: left;
+                margin: 8px 0 0 8px;
+            }
+            header.large-flexible .headline {
+                font-size: 28px;
+                font-weight: 700;
+                line-height: 34px;
+                letter-spacing: -0.6px;
+                text-align: left;
+                margin: 32px 0 0 8px;
+            }
+            .search-container {
+                flex: 1 1 auto;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 0 8px;
+            }
+            .action-elements {
+                width: 100%;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 8px;
+            }
+        `
+];
+a([
+  s({ type: String })
+], t.prototype, "title", 2);
+a([
+  s({ type: String })
+], t.prototype, "type", 2);
+a([
+  s({ type: String, reflect: !0 })
+], t.prototype, "position", 2);
+a([
+  s({ type: String, attribute: "search-supporting-text" })
+], t.prototype, "searchSupportingText", 2);
+t = a([
+  m("scb-app-bar")
+], t);
+export {
+  t as ScbAppBar
+};

package/scb-avatar/scb-avatar.d.ts

@@ -0,0 +1,30 @@
+import { LitElement, TemplateResult } from 'lit';
+
+type AvatarSize = 'small' | 'medium' | 'large';
+type AvatarShape = 'circular' | 'rounded' | 'square';
+type AvatarVariant = 'image' | 'icon';
+export declare class ScbAvatar extends LitElement {
+    src: string;
+    alt: string;
+    label: string;
+    size: AvatarSize;
+    shape: AvatarShape;
+    iconName: string;
+    variant: AvatarVariant;
+    private _imgError;
+    private _hasIconSlot;
+    static styles: import('lit').CSSResult;
+    private _onImgLoad;
+    private _onImgError;
+    private _onIconSlotChange;
+    protected firstUpdated(): Promise<void>;
+    private _initials;
+    private _ariaLabel;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-avatar': ScbAvatar;
+    }
+}
+export {};