@solid-design-system/components 3.23.4 → 4.0.0-next.0

package/dist/package/components/popup/popup.js

@@ -1,335 +0,0 @@
-import { autoUpdate, offset, size, flip, shift, arrow, computePosition } from "@floating-ui/dom";
-import { css, html } from "lit";
-import { customElement } from "../../internal/register-custom-element.js";
-import { query, property } from "lit/decorators.js";
-import componentStyles from "../../styles/component.styles.js";
-import cx from "classix";
-import SolidElement from "../../internal/solid-element.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let SdPopup = class extends SolidElement {
-  constructor() {
-    super(...arguments);
-    this.active = false;
-    this.placement = "top";
-    this.strategy = "absolute";
-    this.distance = 0;
-    this.skidding = 0;
-    this.arrow = false;
-    this.arrowPlacement = "anchor";
-    this.arrowPadding = 10;
-    this.flip = false;
-    this.flipFallbackPlacements = "";
-    this.flipFallbackStrategy = "best-fit";
-    this.flipPadding = 0;
-    this.shift = false;
-    this.shiftPadding = 0;
-    this.autoSizePadding = 0;
-  }
-  async connectedCallback() {
-    super.connectedCallback();
-    await this.updateComplete;
-    this.start();
-    this.setupMutationObserver();
-  }
-  disconnectedCallback() {
-    this.stop();
-    if (this.mutationObserver) {
-      this.mutationObserver.disconnect();
-    }
-  }
-  async updated(changedProps) {
-    super.updated(changedProps);
-    if (changedProps.has("active")) {
-      if (this.active) {
-        this.start();
-      } else {
-        this.stop();
-      }
-    }
-    if (changedProps.has("anchor")) {
-      this.handleAnchorChange();
-    }
-    if (this.active) {
-      await this.updateComplete;
-      this.reposition();
-    }
-  }
-  setupMutationObserver() {
-    this.mutationObserver = new MutationObserver((mutations) => this.handleCurrentPlacementChange(mutations));
-    const config = { attributes: true };
-    this.mutationObserver.observe(this, config);
-  }
-  handleCurrentPlacementChange(mutations) {
-    return mutations.forEach((mutation) => {
-      if (mutation.attributeName === "data-current-placement") {
-        const currentPlacement = this.getAttribute("data-current-placement");
-        this.emit("sd-current-placement", { detail: currentPlacement });
-      }
-    });
-  }
-  async handleAnchorChange() {
-    await this.stop();
-    if (this.anchor && typeof this.anchor === "string") {
-      const root = this.getRootNode();
-      this.anchorEl = root.getElementById(this.anchor);
-    } else if (this.anchor instanceof HTMLElement) {
-      this.anchorEl = this.anchor;
-    } else {
-      this.anchorEl = this.querySelector('[slot="anchor"]');
-    }
-    if (this.anchorEl instanceof HTMLSlotElement) {
-      this.anchorEl = this.anchorEl.assignedElements({ flatten: true })[0];
-    }
-    if (!this.anchorEl) {
-      throw new Error(
-        "Invalid anchor element: no anchor could be found using the anchor slot or the anchor attribute."
-      );
-    }
-    this.start();
-  }
-  start() {
-    if (!this.anchorEl) {
-      return;
-    }
-    this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {
-      this.reposition();
-    });
-  }
-  async stop() {
-    return new Promise((resolve) => {
-      if (this.cleanup) {
-        this.cleanup();
-        this.cleanup = void 0;
-        this.removeAttribute("data-current-placement");
-        this.style.removeProperty("--auto-size-available-width");
-        this.style.removeProperty("--auto-size-available-height");
-        requestAnimationFrame(() => resolve());
-      } else {
-        resolve();
-      }
-    });
-  }
-  /** Forces the popup to recalculate and reposition itself. */
-  reposition() {
-    if (!this.active || !this.anchorEl) {
-      return;
-    }
-    const middleware = [
-      // The offset middleware goes first
-      offset({ mainAxis: this.distance, crossAxis: this.skidding })
-    ];
-    if (this.sync) {
-      middleware.push(
-        size({
-          apply: ({ rects }) => {
-            const syncWidth = this.sync === "width" || this.sync === "both";
-            const syncHeight = this.sync === "height" || this.sync === "both";
-            this.popup.style.width = syncWidth ? `${rects.reference.width}px` : "";
-            this.popup.style.height = syncHeight ? `${rects.reference.height}px` : "";
-          }
-        })
-      );
-    } else {
-      this.popup.style.width = "";
-      this.popup.style.height = "";
-    }
-    if (this.flip) {
-      middleware.push(
-        flip({
-          boundary: this.flipBoundary,
-          // @ts-expect-error - We're converting a string attribute to an array here
-          fallbackPlacements: this.flipFallbackPlacements,
-          fallbackStrategy: this.flipFallbackStrategy === "best-fit" ? "bestFit" : "initialPlacement",
-          padding: this.flipPadding
-        })
-      );
-    }
-    if (this.shift) {
-      middleware.push(
-        shift({
-          boundary: this.shiftBoundary,
-          padding: this.shiftPadding
-        })
-      );
-    }
-    if (this.autoSize) {
-      middleware.push(
-        size({
-          boundary: this.autoSizeBoundary,
-          padding: this.autoSizePadding,
-          apply: ({ availableWidth, availableHeight }) => {
-            if (this.autoSize === "vertical" || this.autoSize === "both") {
-              this.style.setProperty("--auto-size-available-height", `${availableHeight}px`);
-            } else {
-              this.style.removeProperty("--auto-size-available-height");
-            }
-            if (this.autoSize === "horizontal" || this.autoSize === "both") {
-              this.style.setProperty("--auto-size-available-width", `${availableWidth}px`);
-            } else {
-              this.style.removeProperty("--auto-size-available-width");
-            }
-          }
-        })
-      );
-    } else {
-      this.style.removeProperty("--auto-size-available-width");
-      this.style.removeProperty("--auto-size-available-height");
-    }
-    if (this.arrow) {
-      middleware.push(
-        arrow({
-          element: this.arrowEl,
-          padding: this.arrowPadding
-        })
-      );
-    }
-    computePosition(this.anchorEl, this.popup, {
-      placement: this.placement,
-      middleware,
-      strategy: this.strategy
-    }).then(({ x, y, middlewareData, placement }) => {
-      const isRtl = getComputedStyle(this).direction === "rtl";
-      const staticSide = { top: "bottom", right: "left", bottom: "top", left: "right" }[placement.split("-")[0]];
-      this.setAttribute("data-current-placement", placement);
-      Object.assign(this.popup.style, {
-        left: `${x}px`,
-        top: `${y}px`
-      });
-      if (this.arrow) {
-        const arrowX = middlewareData.arrow.x;
-        const arrowY = middlewareData.arrow.y;
-        let top = "";
-        let right = "";
-        let bottom = "";
-        let left = "";
-        if (this.arrowPlacement === "start") {
-          const value = typeof arrowX === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
-          top = typeof arrowY === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
-          right = isRtl ? value : "";
-          left = isRtl ? "" : value;
-        } else if (this.arrowPlacement === "end") {
-          const value = typeof arrowX === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
-          right = isRtl ? "" : value;
-          left = isRtl ? value : "";
-          bottom = typeof arrowY === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
-        } else if (this.arrowPlacement === "center") {
-          left = typeof arrowX === "number" ? `calc(50% - var(--arrow-size-diagonal))` : "";
-          top = typeof arrowY === "number" ? `calc(50% - var(--arrow-size-diagonal))` : "";
-        } else {
-          left = typeof arrowX === "number" ? `${arrowX}px` : "";
-          top = typeof arrowY === "number" ? `${arrowY}px` : "";
-        }
-        Object.assign(this.arrowEl.style, {
-          top,
-          right,
-          bottom,
-          left,
-          [staticSide]: "calc(var(--arrow-size-diagonal) * -1)"
-        });
-      }
-    });
-    this.emit("sd-reposition");
-  }
-  render() {
-    return html`<slot name="anchor" @slotchange="${this.handleAnchorChange}"></slot><div part="popup" class="${cx("isolate", this.strategy !== "fixed" ? "absolute" : "fixed", !this.active && "hidden")}"><slot></slot>${this.arrow ? html`<div part="arrow" class="absolute rotate-45 -z-10" role="presentation"></div>` : ""}</div>`;
-  }
-};
-SdPopup.styles = [
-  SolidElement.styles,
-  componentStyles,
-  css`:host{--arrow-color:var(--sd-color-neutral-1000);--arrow-size:6px;--arrow-size-diagonal:calc(var(--arrow-size) * 0.7071);--arrow-padding-offset:calc(var(--arrow-size-diagonal) - var(--arrow-size));display:contents}[part=popup]{max-width:var(--auto-size-available-width,none);max-height:var(--auto-size-available-height,none)}[part=arrow]{width:calc(var(--arrow-size-diagonal) * 2);height:calc(var(--arrow-size-diagonal) * 2);background:var(--arrow-color)}`
-];
-__decorateClass([
-  query('[part="popup"]')
-], SdPopup.prototype, "popup", 2);
-__decorateClass([
-  query('[part="arrow"]')
-], SdPopup.prototype, "arrowEl", 2);
-__decorateClass([
-  property()
-], SdPopup.prototype, "anchor", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdPopup.prototype, "active", 2);
-__decorateClass([
-  property({ reflect: true })
-], SdPopup.prototype, "placement", 2);
-__decorateClass([
-  property({ reflect: true })
-], SdPopup.prototype, "strategy", 2);
-__decorateClass([
-  property({ type: Number })
-], SdPopup.prototype, "distance", 2);
-__decorateClass([
-  property({ type: Number })
-], SdPopup.prototype, "skidding", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SdPopup.prototype, "arrow", 2);
-__decorateClass([
-  property({ attribute: "arrow-placement" })
-], SdPopup.prototype, "arrowPlacement", 2);
-__decorateClass([
-  property({ attribute: "arrow-padding", type: Number })
-], SdPopup.prototype, "arrowPadding", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SdPopup.prototype, "flip", 2);
-__decorateClass([
-  property({
-    attribute: "flip-fallback-placements",
-    converter: {
-      fromAttribute: (value) => {
-        return value.split(" ").map((p) => p.trim()).filter((p) => p !== "");
-      },
-      toAttribute: (value) => {
-        return value.join(" ");
-      }
-    }
-  })
-], SdPopup.prototype, "flipFallbackPlacements", 2);
-__decorateClass([
-  property({ attribute: "flip-fallback-strategy" })
-], SdPopup.prototype, "flipFallbackStrategy", 2);
-__decorateClass([
-  property({ type: Object })
-], SdPopup.prototype, "flipBoundary", 2);
-__decorateClass([
-  property({ attribute: "flip-padding", type: Number })
-], SdPopup.prototype, "flipPadding", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SdPopup.prototype, "shift", 2);
-__decorateClass([
-  property({ type: Object })
-], SdPopup.prototype, "shiftBoundary", 2);
-__decorateClass([
-  property({ attribute: "shift-padding", type: Number })
-], SdPopup.prototype, "shiftPadding", 2);
-__decorateClass([
-  property({ attribute: "auto-size" })
-], SdPopup.prototype, "autoSize", 2);
-__decorateClass([
-  property()
-], SdPopup.prototype, "sync", 2);
-__decorateClass([
-  property({ type: Object })
-], SdPopup.prototype, "autoSizeBoundary", 2);
-__decorateClass([
-  property({ attribute: "auto-size-padding", type: Number })
-], SdPopup.prototype, "autoSizePadding", 2);
-SdPopup = __decorateClass([
-  customElement("sd-popup")
-], SdPopup);
-export {
-  SdPopup as default
-};

package/dist/package/components/quickfact/quickfact.d.ts

@@ -1,12 +0,0 @@
-import '../icon/icon';
-import SdAccordion from '../accordion/accordion';
-export default class SdQuickfact extends SdAccordion {
-    expandable: boolean;
-    render(): import("lit").TemplateResult<1>;
-    static styles: (import("lit").CSSResult | import("lit").CSSResultGroup[])[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-quickfact': SdQuickfact;
-    }
-}

package/dist/package/components/quickfact/quickfact.js

@@ -1,64 +0,0 @@
-import "../icon/icon.js";
-import { css, html } from "lit";
-import { customElement } from "../../internal/register-custom-element.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { property } from "lit/decorators.js";
-import { setDefaultAnimation } from "../../utilities/animation-registry.js";
-import cx from "classix";
-import SdAccordion from "../accordion/accordion.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let SdQuickfact = class extends SdAccordion {
-  constructor() {
-    super(...arguments);
-    this.expandable = false;
-  }
-  render() {
-    return html`<div part="base" class="sm:p-6"><header part="header" id="header" class="${cx(
-      "text-base font-bold items-center focus-visible:focus-outline text-primary relative group flex flex-row hover:bg-transparent gap-3 pb-3 pt-0 px-0 sm:flex-col sm:gap-4 sm:pb-8",
-      this.expandable && "cursor-pointer select-none"
-    )}" role="${ifDefined(this.expandable ? "button" : void 0)}" aria-expanded="${ifDefined(this.expandable ? this.open ? "true" : "false" : void 0)}" aria-controls="${ifDefined(this.expandable ? "content" : void 0)}" tabindex="${this.expandable ? "0" : "-1"}" @click="${this.expandable ? this.handleSummaryClick : null}" @keydown="${this.expandable ? this.handleSummaryKeyDown : null}"><div part="icon" class="${cx("flex flex-grow-0 flex-shrink-0 flex-auto items-center", !this.expandable && "cursor-default")}"><slot name="icon"></slot></div><slot name="summary" part="summary" class="${cx(
-      "flex flex-auto items-start text-left text-base leading-normal font-normal sm:leading-tight sm:text-3xl sm:text-center",
-      this.expandable ? "text-primary" : "text-black cursor-default"
-    )}">${this.summary}</slot><span part="summary-icon" class="${cx(
-      "flex flex-grow-0 flex-shrink-0 flex-auto self-start sm:self-center transition-all ease-in-out duration-300 text-xl sm:text-4xl sm:mt-2",
-      this.open && "rotate-180",
-      !this.expandable && "hidden"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-icon library="system" name="chevron-down"></sd-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-icon library="system" name="chevron-down"></sd-icon></slot></span></header><div part="content" id="content" class="${cx("overflow-hidden", !this.expandable && "hidden")}"><slot part="content__slot" class="block" role="region" aria-labelledby="header"></slot></div></div>`;
-  }
-};
-SdQuickfact.styles = [
-  SdAccordion.styles,
-  css`:host{display:block}@media (min-width:640px){[part=summary-icon]{font-size:var(--sd-spacing-12,3rem)}}[part=icon]{font-size:var(--sd-spacing-12,3rem)}@media (min-width:640px){[part=icon]{font-size:var(--sd-spacing-24,6rem)}}`
-];
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdQuickfact.prototype, "expandable", 2);
-SdQuickfact = __decorateClass([
-  customElement("sd-quickfact")
-], SdQuickfact);
-setDefaultAnimation("quickfact.show", {
-  keyframes: [
-    { height: "0", opacity: "0" },
-    { height: "auto", opacity: "1" }
-  ],
-  options: { duration: 300, easing: "ease" }
-});
-setDefaultAnimation("quickfact.hide", {
-  keyframes: [
-    { height: "auto", opacity: "1" },
-    { height: "0", opacity: "0" }
-  ],
-  options: { duration: 300, easing: "ease" }
-});
-export {
-  SdQuickfact as default
-};

package/dist/package/components/radio/radio.d.ts

@@ -1,27 +0,0 @@
-import '../icon/icon';
-import SolidElement from '../../internal/solid-element';
-export default class SdRadio extends SolidElement {
-    checked: boolean;
-    protected hasFocus: boolean;
-    size: 'lg' | 'md' | 'sm';
-    disabled: boolean;
-    value: string;
-    invalid: boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private addEventListeners;
-    private removeEventListeners;
-    private handleBlur;
-    private handleClick;
-    private handleFocus;
-    private setInitialAttributes;
-    handleCheckedChange(): void;
-    handleDisabledChange(): void;
-    render(): import("lit").TemplateResult<1>;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-radio': SdRadio;
-    }
-}

package/dist/package/components/radio/radio.js

@@ -1,128 +0,0 @@
-import "../icon/icon.js";
-import { css, html } from "lit";
-import { customElement } from "../../internal/register-custom-element.js";
-import { state, property } from "lit/decorators.js";
-import { watch } from "../../internal/watch.js";
-import cx from "classix";
-import SolidElement from "../../internal/solid-element.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-let SdRadio = class extends SolidElement {
-  constructor() {
-    super(...arguments);
-    this.checked = false;
-    this.hasFocus = false;
-    this.size = "lg";
-    this.disabled = false;
-    this.invalid = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.setInitialAttributes();
-    this.addEventListeners();
-  }
-  disconnectedCallback() {
-    this.removeEventListeners();
-  }
-  addEventListeners() {
-    this.addEventListener("blur", this.handleBlur);
-    this.addEventListener("click", this.handleClick);
-    this.addEventListener("focus", this.handleFocus);
-  }
-  removeEventListeners() {
-    this.removeEventListener("blur", this.handleBlur);
-    this.removeEventListener("click", this.handleClick);
-    this.removeEventListener("focus", this.handleFocus);
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.emit("sd-blur");
-  }
-  handleClick() {
-    if (!this.disabled) {
-      this.checked = true;
-    }
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.emit("sd-focus");
-  }
-  setInitialAttributes() {
-    this.setAttribute("role", "radio");
-    this.setAttribute("tabindex", "-1");
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-  }
-  handleCheckedChange() {
-    this.setAttribute("aria-checked", this.checked ? "true" : "false");
-    this.setAttribute("tabindex", this.checked ? "0" : "-1");
-  }
-  handleDisabledChange() {
-    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
-  }
-  render() {
-    return html`<span part="base" class="${cx(
-      "sd-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
-      this.disabled && "hover:cursor-not-allowed",
-      {
-        /* sizes, fonts */
-        sm: "small-size text-sm",
-        md: "text-base",
-        lg: "text-base"
-      }[this.size]
-    )}"><span part="${`${this.checked ? "control--checked" : "control--unchecked"}`}" class="${cx(
-      "flex-initial shrink-0 relative inline-flex items-center justify-center border rounded-full bg-white h-4 w-4",
-      this.disabled ? "border-neutral-500" : this.invalid ? "border-error hover:border-error-400 group-hover:border-error-400" : this.checked ? "border-accent hover:border-accent-550 group-hover:border-accent-550" : "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200"
-    )}">${this.checked ? html`<span part="checked" class="${cx(
-      "rounded-full inline-flex text-white border bg-accent h-2.5 w-2.5",
-      this.disabled ? "bg-neutral-500" : this.invalid ? "bg-error hover:bg-error-400 group-hover:bg-error-400" : this.checked ? "bg-accent hover:bg-accent-550 group-hover:bg-accent-550" : "bg-neutral-800"
-    )}"></span>` : ""}</span><slot part="label" class="${cx(
-      "ml-2 select-none inline-block",
-      this.disabled ? "text-neutral-500" : this.invalid ? "text-error" : "text-black"
-    )}"></slot></span>`;
-  }
-};
-SdRadio.styles = [
-  SolidElement.styles,
-  css`:host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible){outline:2px solid transparent;outline-offset:2px}:host(:focus-visible) [part=control--checked],:host(:focus-visible) [part=control--unchecked]{outline-style:solid;outline-width:2px;outline-offset:2px;outline-color:rgb(var(--sd-color-primary,0 53 142) / 1)}`
-];
-__decorateClass([
-  state()
-], SdRadio.prototype, "checked", 2);
-__decorateClass([
-  state()
-], SdRadio.prototype, "hasFocus", 2);
-__decorateClass([
-  property({ reflect: true })
-], SdRadio.prototype, "size", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdRadio.prototype, "disabled", 2);
-__decorateClass([
-  property()
-], SdRadio.prototype, "value", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdRadio.prototype, "invalid", 2);
-__decorateClass([
-  watch("checked")
-], SdRadio.prototype, "handleCheckedChange", 1);
-__decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
-], SdRadio.prototype, "handleDisabledChange", 1);
-SdRadio = __decorateClass([
-  customElement("sd-radio")
-], SdRadio);
-export {
-  SdRadio as default
-};

package/dist/package/components/radio-button/radio-button.d.ts

@@ -1,25 +0,0 @@
-import SolidElement from '../../internal/solid-element';
-export default class SdRadioButton extends SolidElement {
-    private readonly hasSlotController;
-    input: HTMLInputElement;
-    hiddenInput: HTMLInputElement;
-    protected hasFocus: boolean;
-    size: 'lg' | 'md' | 'sm';
-    disabled: boolean;
-    checked: boolean;
-    value: string;
-    connectedCallback(): void;
-    private handleBlur;
-    private handleClick;
-    private handleFocus;
-    handleDisabledChange(): void;
-    focus(options?: FocusOptions): void;
-    blur(): void;
-    render(): import("lit").TemplateResult<1>;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-radio-button': SdRadioButton;
-    }
-}