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

package/dist/versioned-package/components/dropdown/dropdown.d.ts

@@ -1,51 +0,0 @@
-import '../popup/popup';
-import { LocalizeController } from '../../utilities/localize';
-import SolidElement from '../../internal/solid-element';
-import type SdMenu from '../../_components/menu/menu';
-import type SdPopup from '../popup/popup';
-export default class SdDropdown extends SolidElement {
-    popup: SdPopup;
-    trigger: HTMLSlotElement;
-    panel: HTMLSlotElement;
-    localize: LocalizeController;
-    open: boolean;
-    rounded: boolean;
-    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
-    disabled: boolean;
-    stayOpenOnSelect: boolean;
-    containingElement?: HTMLElement;
-    distance: number;
-    skidding: number;
-    noAutoSize: boolean;
-    noFlip: boolean;
-    hoist: boolean;
-    connectedCallback(): void;
-    firstUpdated(): void;
-    disconnectedCallback(): void;
-    getAccessibleTrigger(): HTMLElement | null;
-    updateAccessibleTrigger(): void;
-    focusOnTrigger(): void;
-    getMenu(): SdMenu | undefined;
-    handleKeyDown(event: KeyboardEvent): void;
-    handleDocumentKeyDown(event: KeyboardEvent): void;
-    handleDocumentMouseDown(event: MouseEvent): void;
-    handleMenuItemActivate(event: CustomEvent): void;
-    handlePanelSelect(event: CustomEvent): void;
-    handleTriggerClick(): void;
-    handleTriggerKeyDown(event: KeyboardEvent): void;
-    handleTriggerKeyUp(event: KeyboardEvent): void;
-    handleTriggerSlotChange(): void;
-    show(): Promise<void>;
-    hide(): Promise<void>;
-    reposition(): void;
-    addOpenListeners(): void;
-    removeOpenListeners(): void;
-    handleOpenChange(): Promise<void>;
-    render(): import("lit").TemplateResult<1>;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-3-24-0-dropdown': SdDropdown;
-    }
-}

package/dist/versioned-package/components/dropdown/dropdown.js

@@ -1,344 +0,0 @@
-import "../popup/popup.js";
-import { stopAnimations, animateTo } from "../../internal/animate.js";
-import { css, html } from "lit";
-import { customElement } from "../../internal/register-custom-element.js";
-import { setDefaultAnimation, getAnimation } from "../../utilities/animation-registry.js";
-import { getTabbableBoundary } from "../../internal/tabbable.js";
-import { LocalizeController } from "../../utilities/localize.js";
-import { query, property } from "lit/decorators.js";
-import { scrollIntoView } from "../../internal/scroll.js";
-import { waitForEvent } from "../../internal/event.js";
-import { watch } from "../../internal/watch.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 SdDropdown = class extends SolidElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.open = false;
-    this.rounded = false;
-    this.placement = "bottom-start";
-    this.disabled = false;
-    this.stayOpenOnSelect = false;
-    this.distance = 0;
-    this.skidding = 0;
-    this.noAutoSize = false;
-    this.noFlip = false;
-    this.hoist = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.handleMenuItemActivate = this.handleMenuItemActivate.bind(this);
-    this.handlePanelSelect = this.handlePanelSelect.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
-    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
-    if (!this.containingElement) {
-      this.containingElement = this;
-    }
-  }
-  firstUpdated() {
-    this.panel.hidden = !this.open;
-    if (this.open) {
-      this.addOpenListeners();
-      this.popup.active = true;
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeOpenListeners();
-    this.hide();
-  }
-  /**
-   * Slotted triggers can be arbitrary content. The accessible trigger is the tabbable element
-   * within the slotted trigger. This could be the slotted element itself, a child of the slotted element,
-   * or an element within the slotted elements shadow root.
-   *
-   * e.g. the accessible trigger of an <sd-3-24-0-button> is a <button> located inside its shadow root.
-   *
-   * To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
-   * */
-  getAccessibleTrigger() {
-    const assignedElements = this.trigger.assignedElements({ flatten: true });
-    const accessibleTrigger = assignedElements.find((el) => getTabbableBoundary(el).start);
-    let target = null;
-    if (accessibleTrigger) {
-      switch (accessibleTrigger.tagName.toLowerCase()) {
-        case "sd-3-24-0-button":
-        case "sd-3-24-0-icon-button":
-          target = accessibleTrigger.button;
-          break;
-        case "sd-3-24-0-navigation-item":
-          target = accessibleTrigger.button;
-          break;
-        default:
-          target = accessibleTrigger;
-      }
-    }
-    return target;
-  }
-  // Slotted triggers can be arbitrary content, but we need to connect them to the dropdown panel with `aria-haspopup` and
-  // `aria-expanded`. These must be applied to the `accessible trigger`.
-  updateAccessibleTrigger() {
-    const target = this.getAccessibleTrigger();
-    if (!target) return;
-    target.setAttribute("aria-haspopup", "true");
-    target.setAttribute("aria-expanded", this.open ? "true" : "false");
-  }
-  focusOnTrigger() {
-    const trigger = this.getAccessibleTrigger();
-    if (typeof (trigger == null ? void 0 : trigger.focus) === "function") {
-      trigger.focus();
-    }
-  }
-  getMenu() {
-    return this.panel.assignedElements({ flatten: true }).find((el) => el.tagName.toLowerCase() === "sd-menu");
-  }
-  handleKeyDown(event) {
-    if (this.open && event.key === "Escape") {
-      event.stopPropagation();
-      this.hide();
-      this.focusOnTrigger();
-    }
-  }
-  handleDocumentKeyDown(event) {
-    var _a;
-    if (event.key === "Tab") {
-      if (this.open && ((_a = document.activeElement) == null ? void 0 : _a.tagName.toLowerCase()) === "sd-menu-item") {
-        event.preventDefault();
-        this.hide();
-        this.focusOnTrigger();
-        return;
-      }
-      setTimeout(() => {
-        var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-        const activeElement = ((_e = (_d = (_c = (_b = (_a2 = document.activeElement) == null ? void 0 : _a2.shadowRoot) == null ? void 0 : _b.activeElement) == null ? void 0 : _c.shadowRoot) == null ? void 0 : _d.activeElement) == null ? void 0 : _e.getRootNode()) instanceof ShadowRoot ? (_i = (_h = (_g = (_f = document.activeElement) == null ? void 0 : _f.shadowRoot) == null ? void 0 : _g.activeElement) == null ? void 0 : _h.shadowRoot) == null ? void 0 : _i.activeElement : ((_j = this.containingElement) == null ? void 0 : _j.getRootNode()) instanceof ShadowRoot ? (_l = (_k = document.activeElement) == null ? void 0 : _k.shadowRoot) == null ? void 0 : _l.activeElement : document.activeElement;
-        if (!this.containingElement || (activeElement == null ? void 0 : activeElement.closest(this.containingElement.tagName.toLowerCase())) !== this.containingElement) {
-          this.hide();
-        }
-      });
-    }
-  }
-  handleDocumentMouseDown(event) {
-    const path = event.composedPath();
-    if (this.containingElement && !path.includes(this.containingElement)) {
-      this.hide();
-    }
-  }
-  handleMenuItemActivate(event) {
-    const item = event.target;
-    scrollIntoView(item, this.panel);
-  }
-  handlePanelSelect(event) {
-    const target = event.target;
-    if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === "sd-menu") {
-      this.hide();
-      this.focusOnTrigger();
-    }
-  }
-  handleTriggerClick() {
-    if (this.open) {
-      this.hide();
-    } else {
-      this.show();
-    }
-  }
-  handleTriggerKeyDown(event) {
-    if (event.key === "Escape" && this.open) {
-      event.stopPropagation();
-      this.focusOnTrigger();
-      this.hide();
-      return;
-    }
-    if ([" ", "Enter"].includes(event.key)) {
-      event.preventDefault();
-      this.handleTriggerClick();
-      return;
-    }
-    const menu = this.getMenu();
-    if (menu) {
-      const menuItems = menu.defaultSlot.assignedElements({ flatten: true });
-      const firstMenuItem = menuItems[0];
-      const lastMenuItem = menuItems[menuItems.length - 1];
-      if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
-        event.preventDefault();
-        if (!this.open) {
-          this.show();
-        }
-        if (menuItems.length > 0) {
-          requestAnimationFrame(() => {
-            if (event.key === "ArrowDown" || event.key === "Home") {
-              menu.setCurrentItem(firstMenuItem);
-              firstMenuItem.focus();
-            }
-            if (event.key === "ArrowUp" || event.key === "End") {
-              menu.setCurrentItem(lastMenuItem);
-              lastMenuItem.focus();
-            }
-          });
-        }
-      }
-    }
-  }
-  handleTriggerKeyUp(event) {
-    if (event.key === " ") {
-      event.preventDefault();
-    }
-  }
-  handleTriggerSlotChange() {
-    this.updateAccessibleTrigger();
-  }
-  /** Shows the dropdown panel. */
-  async show() {
-    if (this.open) {
-      return void 0;
-    }
-    this.open = true;
-    return waitForEvent(this, "sd-after-show");
-  }
-  /** Hides the dropdown panel */
-  async hide() {
-    if (!this.open) {
-      return void 0;
-    }
-    this.open = false;
-    return waitForEvent(this, "sd-after-hide");
-  }
-  /**
-   * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
-   * is activated.
-   */
-  reposition() {
-    this.popup.reposition();
-  }
-  addOpenListeners() {
-    this.panel.addEventListener("sd-activate", this.handleMenuItemActivate);
-    this.panel.addEventListener("sd-3-24-0-select", this.handlePanelSelect);
-    this.panel.addEventListener("keydown", this.handleKeyDown);
-    document.addEventListener("keydown", this.handleDocumentKeyDown);
-    document.addEventListener("mousedown", this.handleDocumentMouseDown);
-  }
-  removeOpenListeners() {
-    if (this.panel) {
-      this.panel.removeEventListener("sd-activate", this.handleMenuItemActivate);
-      this.panel.removeEventListener("sd-3-24-0-select", this.handlePanelSelect);
-      this.panel.removeEventListener("keydown", this.handleKeyDown);
-    }
-    document.removeEventListener("keydown", this.handleDocumentKeyDown);
-    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
-  }
-  async handleOpenChange() {
-    if (this.disabled) {
-      this.open = false;
-      return;
-    }
-    this.updateAccessibleTrigger();
-    if (this.open) {
-      this.emit("sd-show");
-      this.addOpenListeners();
-      await stopAnimations(this);
-      this.panel.hidden = false;
-      this.popup.active = true;
-      const { keyframes, options } = getAnimation(this, "dropdown.show", { dir: this.localize.dir() });
-      await animateTo(this.popup.popup, keyframes, options);
-      this.emit("sd-after-show");
-    } else {
-      this.emit("sd-hide");
-      this.removeOpenListeners();
-      await stopAnimations(this);
-      const { keyframes, options } = getAnimation(this, "dropdown.hide", { dir: this.localize.dir() });
-      await animateTo(this.popup.popup, keyframes, options);
-      this.panel.hidden = true;
-      this.popup.active = false;
-      this.emit("sd-after-hide");
-    }
-  }
-  render() {
-    return html`<sd-3-24-0-popup part="base" id="dropdown" placement="${this.placement}" distance="${this.rounded && this.distance < 1 ? 1 : this.distance}" skidding="${this.skidding}" strategy="${this.hoist ? "fixed" : "absolute"}" ?flip="${!this.noFlip}" shift auto-size="vertical" auto-size-padding="10" ?active="${this.open}"><slot name="trigger" slot="anchor" part="trigger" class="block" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeyDown}" @keyup="${this.handleTriggerKeyUp}" @slotchange="${this.handleTriggerSlotChange}"></slot><slot part="panel" class="${cx(
-      "shadow bg-white",
-      this.open ? "block pointer-events-auto" : "pointer-events-none",
-      this.rounded && "rounded-md"
-    )}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-3-24-0-popup>`;
-  }
-};
-SdDropdown.styles = [
-  SolidElement.styles,
-  componentStyles,
-  css`:host{display:inline-block}#dropdown::part(popup){z-index:var(--sd-z-index-dropdown,900)}#dropdown[data-current-placement^=top]::part(popup){transform-origin:bottom}#dropdown[data-current-placement^=bottom]::part(popup){transform-origin:top}#dropdown[data-current-placement^=left]::part(popup){transform-origin:right}#dropdown[data-current-placement^=right]::part(popup){transform-origin:left}:host(:not([no-auto-size])) ::slotted(:not([slot=trigger])){overflow:auto;max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}`
-];
-__decorateClass([
-  query("#dropdown")
-], SdDropdown.prototype, "popup", 2);
-__decorateClass([
-  query("[part=trigger]")
-], SdDropdown.prototype, "trigger", 2);
-__decorateClass([
-  query("[part=panel]")
-], SdDropdown.prototype, "panel", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdDropdown.prototype, "open", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdDropdown.prototype, "rounded", 2);
-__decorateClass([
-  property({ reflect: true })
-], SdDropdown.prototype, "placement", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdDropdown.prototype, "disabled", 2);
-__decorateClass([
-  property({ attribute: "stay-open-on-select", type: Boolean, reflect: true })
-], SdDropdown.prototype, "stayOpenOnSelect", 2);
-__decorateClass([
-  property({ attribute: false })
-], SdDropdown.prototype, "containingElement", 2);
-__decorateClass([
-  property({ type: Number })
-], SdDropdown.prototype, "distance", 2);
-__decorateClass([
-  property({ type: Number })
-], SdDropdown.prototype, "skidding", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "no-auto-size" })
-], SdDropdown.prototype, "noAutoSize", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "no-flip" })
-], SdDropdown.prototype, "noFlip", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SdDropdown.prototype, "hoist", 2);
-__decorateClass([
-  watch("open", { waitUntilFirstUpdate: true })
-], SdDropdown.prototype, "handleOpenChange", 1);
-SdDropdown = __decorateClass([
-  customElement("sd-3-24-0-dropdown")
-], SdDropdown);
-setDefaultAnimation("dropdown.show", {
-  keyframes: [
-    { opacity: 0, scale: 0.9 },
-    { opacity: 1, scale: 1 }
-  ],
-  options: { duration: 100, easing: "ease" }
-});
-setDefaultAnimation("dropdown.hide", {
-  keyframes: [
-    { opacity: 1, scale: 1 },
-    { opacity: 0, scale: 0.9 }
-  ],
-  options: { duration: 100, easing: "ease" }
-});
-export {
-  SdDropdown as default
-};

package/dist/versioned-package/components/expandable/expandable.d.ts

@@ -1,23 +0,0 @@
-import { LocalizeController } from '../../utilities/localize.js';
-import SolidElement from '../../internal/solid-element';
-export default class SdExpandable extends SolidElement {
-    contentPreview: HTMLElement;
-    details: HTMLDetailsElement;
-    open: boolean;
-    inverted: boolean;
-    localize: LocalizeController;
-    private updateMaxHeight;
-    private onToggleClick;
-    onOpenChange(): void;
-    show(): Promise<void>;
-    hide(): Promise<void>;
-    render(): import("lit").TemplateResult<1>;
-    firstUpdated(): void;
-    cloneContentToLightDOM(): void;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-3-24-0-expandable': SdExpandable;
-    }
-}

package/dist/versioned-package/components/expandable/expandable.js

@@ -1,116 +0,0 @@
-import { unsafeCSS, css, html } from "lit";
-import { customElement } from "../../internal/register-custom-element.js";
-import { LocalizeController } from "../../utilities/localize.js";
-import { query, property } from "lit/decorators.js";
-import { waitForEvent } from "../../internal/event.js";
-import { watch } from "../../internal/watch.js";
-import componentStyles from "../../styles/component.styles.js";
-import cx from "classix";
-import InteractiveStyles from "../../styles/interactive/interactive.css.js";
-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 SdExpandable = class extends SolidElement {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this.inverted = false;
-    this.localize = new LocalizeController(this);
-  }
-  updateMaxHeight() {
-    var _a;
-    const scrollHeight = (_a = this.contentPreview) == null ? void 0 : _a.scrollHeight.toString();
-    this.style.setProperty("--max-height-pixel", `${scrollHeight}px`);
-    this.style.setProperty("--max-height", scrollHeight);
-  }
-  onToggleClick() {
-    this.updateMaxHeight();
-    this.open = !this.open;
-  }
-  onOpenChange() {
-    if (this.open) {
-      this.emit("sd-show");
-      this.updateComplete.then(() => {
-        this.emit("sd-after-show");
-      });
-    } else {
-      this.emit("sd-hide");
-      this.updateComplete.then(() => {
-        this.emit("sd-after-hide");
-      });
-    }
-    this.details.setAttribute("open", this.open.toString());
-  }
-  /** Opens the expandable */
-  async show() {
-    if (this.open) {
-      return void 0;
-    }
-    this.onToggleClick();
-    return waitForEvent(this, "sd-after-show");
-  }
-  /** Closes the expandable */
-  async hide() {
-    if (!this.open) {
-      return void 0;
-    }
-    this.onToggleClick();
-    return waitForEvent(this, "sd-after-hide");
-  }
-  render() {
-    return html`<details part="details"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details><button part="toggle" class="${cx(
-      "sd-interactive sd-interactive--reset !h-full !justify-center !w-full !text-base !flex !items-center !underline !underline-offset-2 !toggle",
-      this.inverted && "sd-interactive--inverted",
-      !this.inverted ? "!focus-visible:focus-outline" : "!focus-visible:focus-outline-inverted"
-    )}" @click="${this.onToggleClick}">${this.open ? html`<slot name="toggle-open"><sd-3-24-0-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-3-24-0-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-3-24-0-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-3-24-0-icon>${this.localize.term("showMore")}</slot>`}</button>`;
-  }
-  firstUpdated() {
-    this.cloneContentToLightDOM();
-    this.details.setAttribute("open", this.open.toString());
-  }
-  cloneContentToLightDOM() {
-    const slot = document.createElement("div");
-    slot.setAttribute("slot", "clone");
-    const nodes = Array.from(this.childNodes);
-    nodes.forEach((node) => {
-      const clone = node.cloneNode(true);
-      slot.appendChild(clone);
-    });
-    this.appendChild(slot);
-  }
-};
-SdExpandable.styles = [
-  SolidElement.styles,
-  unsafeCSS(InteractiveStyles),
-  componentStyles,
-  css`:host{--gradient-color-start:rgba(255, 255, 255, 0);--gradient-color-end:rgba(255, 255, 255, 1);--component-expandable-max-block-size:90px;--gradient-height:24px;--gradient:var(--gradient-color-start) 0%,var(--gradient-color-end) 80%,var(--gradient-color-end) 100%;position:relative;display:inline-block;width:100%}.toggle::-moz-focus-inner{border-style:none;padding:var(--sd-spacing-0,0)}details>summary::-webkit-details-marker,details[open] summary{display:none}summary{max-block-size:var(--component-expandable-max-block-size)}:host([open]) summary{max-block-size:var(--max-height-pixel,1000vh)}.content{max-block-size:var(--component-expandable-max-block-size)}:host([open]) .content{max-block-size:var(--max-height-pixel,1000vh)}:host(:not([open])) .content::after{position:absolute;bottom:var(--sd-spacing-0,0);left:var(--sd-spacing-0,0);display:block;width:100%;content:' ';height:var(--gradient-height);background:linear-gradient(180deg,var(--gradient))}:host([inverted]:not([open])) .content::after{background:var(--gradient-vertical-transparent-primary,linear-gradient(180deg,rgba(0,53,142,0) 0,#00358e 80%,#00358e 100%))}`
-];
-__decorateClass([
-  query(".content-preview")
-], SdExpandable.prototype, "contentPreview", 2);
-__decorateClass([
-  query("details")
-], SdExpandable.prototype, "details", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdExpandable.prototype, "open", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdExpandable.prototype, "inverted", 2);
-__decorateClass([
-  watch("open", { waitUntilFirstUpdate: true })
-], SdExpandable.prototype, "onOpenChange", 1);
-SdExpandable = __decorateClass([
-  customElement("sd-3-24-0-expandable")
-], SdExpandable);
-export {
-  SdExpandable as default
-};

package/dist/versioned-package/components/flipcard/flipcard.d.ts

@@ -1,23 +0,0 @@
-import SolidElement from '../../internal/solid-element';
-export default class SdFlipcard extends SolidElement {
-    front: HTMLElement;
-    back: HTMLElement;
-    activation: 'click' | 'click hover';
-    flipDirection: 'horizontal' | 'vertical';
-    frontVariant: 'empty' | 'primary' | 'primary-100' | 'gradient-light-top' | 'gradient-light-bottom' | 'gradient-dark-top' | 'gradient-dark-bottom';
-    backVariant: 'empty' | 'primary' | 'primary-100' | 'gradient-light-top' | 'gradient-light-bottom' | 'gradient-dark-top' | 'gradient-dark-bottom';
-    connectedCallback(): void;
-    private flipFront;
-    private flipBack;
-    private handleFrontClick;
-    private handleBackClick;
-    private handleFrontKeydown;
-    private handleBackKeydown;
-    render(): import("lit").TemplateResult<1>;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-3-24-0-flipcard': SdFlipcard;
-    }
-}