@quieto/ui 0.0.0-stage → 0.1.1

package/dist/components/qds-button/qds-button.js

@@ -0,0 +1,418 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { QdsElement } from '../../internal/qds-element.js';
+/**
+ * A button.
+ *
+ * Every visual property resolves through the component tier of the token system,
+ * so `--qds-component-button-*` is simultaneously the token API and the styling
+ * API — overriding one of those variables is the supported way to restyle a
+ * button, and it is the same variable the design tokens define.
+ *
+ * When it submits a form, `event.submitter` is not the `qds-button` itself: a
+ * custom element cannot be a submitter, so it submits through a temporary native
+ * button carrying its `name` and `value`, which exists only while the submit
+ * event is being dispatched. Read `event.submitter.value` (or
+ * `new FormData(form, event.submitter)`) inside the submit handler, and give
+ * buttons distinct values to tell them apart.
+ *
+ * @element qds-button
+ *
+ * @slot - The button label.
+ * @slot start - Content before the label, typically an icon.
+ * @slot end - Content after the label, typically an icon.
+ *
+ * @fires {CustomEvent<void>} qds-click - Fired on activation. Not fired when
+ * disabled or loading. Prefer this over listening for `click`, which a disabled
+ * host can still receive.
+ *
+ * @csspart button - The native button element.
+ * @csspart label - The wrapper around the default slot.
+ *
+ * @cssprop [--qds-component-button-border-radius] - Corner radius.
+ * @cssprop [--qds-component-button-border-width] - Border thickness.
+ * @cssprop [--qds-component-button-font-weight] - Label weight.
+ * @cssprop [--qds-component-button-duration] - State transition duration.
+ * @cssprop [--qds-component-button-{variant}-color-background-{state}] - Background per variant and state.
+ * @cssprop [--qds-component-button-{variant}-color-content-{state}] - Label color per variant and state.
+ * @cssprop [--qds-component-button-{variant}-color-border-{state}] - Border color per variant and state.
+ * @cssprop [--qds-component-button-{size}-padding-block] - Vertical padding per size.
+ * @cssprop [--qds-component-button-{size}-padding-inline] - Horizontal padding per size.
+ */
+let QdsButton = class QdsButton extends QdsElement {
+    /**
+     * `delegatesFocus` makes the host focusable by forwarding focus to the inner
+     * button, so `qds-button.focus()` and tab order behave like a native button
+     * without the host needing its own tabindex.
+     */
+    static { this.shadowRootOptions = {
+        ...QdsElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    /**
+     * Form association is what lets a button inside shadow DOM submit the form
+     * around it. `attachInternals().form` finds the containing form across the
+     * shadow boundary, which `HTMLFormElement`'s own logic cannot do — a plain
+     * shadow-DOM button silently fails to submit.
+     */
+    static { this.formAssociated = true; }
+    static { this.styles = [
+        QdsElement.baseStyles,
+        css `
+      /*
+       * Variant and size resolve to private custom properties here, because CSS
+       * cannot interpolate an attribute value into a variable name — there is no
+       * way to write var(--qds-component-button-{variant}-…). Each variant block
+       * remaps the same eight private properties, and the button rules below are
+       * written once against those.
+       *
+       * Fallbacks are second values inside var(), so the component still renders
+       * sensibly if a consumer forgets to load @quieto/design-tokens/css.
+       */
+      :host {
+        display: inline-block;
+
+        --_bg: var(--qds-component-button-primary-color-background-rest, #2563eb);
+        --_bg-hover: var(--qds-component-button-primary-color-background-hover, #1d4ed8);
+        --_bg-active: var(--qds-component-button-primary-color-background-active, #1e40af);
+        --_bg-disabled: var(--qds-component-button-primary-color-background-disabled, #e2e8f0);
+        --_fg: var(--qds-component-button-primary-color-content-rest, #f8fafc);
+        --_fg-disabled: var(--qds-component-button-primary-color-content-disabled, #64748b);
+        --_border: var(--qds-component-button-primary-color-border-rest, transparent);
+        --_border-disabled: var(--qds-component-button-primary-color-border-disabled, transparent);
+
+        --_padding-block: var(--qds-component-button-md-padding-block, 0.5rem);
+        --_padding-inline: var(--qds-component-button-md-padding-inline, 1rem);
+        --_gap: var(--qds-component-button-md-gap, 0.5rem);
+        --_font-size: var(--qds-component-button-md-font-size, 0.875rem);
+      }
+
+      :host([variant='secondary']) {
+        --_bg: var(--qds-component-button-secondary-color-background-rest, #f1f5f9);
+        --_bg-hover: var(--qds-component-button-secondary-color-background-hover, #e2e8f0);
+        --_bg-active: var(--qds-component-button-secondary-color-background-active, #cbd5e1);
+        --_bg-disabled: var(--qds-component-button-secondary-color-background-disabled, #f1f5f9);
+        --_fg: var(--qds-component-button-secondary-color-content-rest, #0f172a);
+        --_fg-disabled: var(--qds-component-button-secondary-color-content-disabled, #64748b);
+        --_border: var(--qds-component-button-secondary-color-border-rest, #cbd5e1);
+        --_border-disabled: var(--qds-component-button-secondary-color-border-disabled, #e2e8f0);
+      }
+
+      :host([variant='ghost']) {
+        --_bg: var(--qds-component-button-ghost-color-background-rest, transparent);
+        --_bg-hover: var(--qds-component-button-ghost-color-background-hover, #e2e8f0);
+        --_bg-active: var(--qds-component-button-ghost-color-background-active, #cbd5e1);
+        --_bg-disabled: var(--qds-component-button-ghost-color-background-disabled, transparent);
+        --_fg: var(--qds-component-button-ghost-color-content-rest, #1d4ed8);
+        --_fg-disabled: var(--qds-component-button-ghost-color-content-disabled, #94a3b8);
+        --_border: var(--qds-component-button-ghost-color-border-rest, transparent);
+        --_border-disabled: var(--qds-component-button-ghost-color-border-disabled, transparent);
+      }
+
+      :host([variant='danger']) {
+        --_bg: var(--qds-component-button-danger-color-background-rest, #dc2626);
+        --_bg-hover: var(--qds-component-button-danger-color-background-hover, #b91c1c);
+        --_bg-active: var(--qds-component-button-danger-color-background-active, #991b1b);
+        --_bg-disabled: var(--qds-component-button-danger-color-background-disabled, #e2e8f0);
+        --_fg: var(--qds-component-button-danger-color-content-rest, #f8fafc);
+        --_fg-disabled: var(--qds-component-button-danger-color-content-disabled, #64748b);
+        --_border: var(--qds-component-button-danger-color-border-rest, transparent);
+        --_border-disabled: var(--qds-component-button-danger-color-border-disabled, transparent);
+      }
+
+      :host([size='sm']) {
+        --_padding-block: var(--qds-component-button-sm-padding-block, 0.25rem);
+        --_padding-inline: var(--qds-component-button-sm-padding-inline, 0.75rem);
+        --_gap: var(--qds-component-button-sm-gap, 0.25rem);
+        --_font-size: var(--qds-component-button-sm-font-size, 0.75rem);
+      }
+
+      :host([size='lg']) {
+        --_padding-block: var(--qds-component-button-lg-padding-block, 0.75rem);
+        --_padding-inline: var(--qds-component-button-lg-padding-inline, 1.5rem);
+        --_gap: var(--qds-component-button-lg-gap, 0.5rem);
+        --_font-size: var(--qds-component-button-lg-font-size, 1rem);
+      }
+
+      :host([full-width]) {
+        display: block;
+      }
+
+      :host([full-width]) button {
+        width: 100%;
+      }
+
+      button {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--_gap);
+
+        margin: 0;
+        padding: var(--_padding-block) var(--_padding-inline);
+
+        font-family: var(--qds-typography-font-family-sans, inherit);
+        font-size: var(--_font-size);
+        font-weight: var(--qds-component-button-font-weight, 500);
+        line-height: var(--qds-component-button-line-height, 1.375);
+
+        color: var(--_fg);
+        background-color: var(--_bg);
+        border: var(--qds-component-button-border-width, 0.0625rem) solid var(--_border);
+        border-radius: var(--qds-component-button-border-radius, 0.375rem);
+
+        cursor: pointer;
+        user-select: none;
+        -webkit-appearance: none;
+        appearance: none;
+
+        transition:
+          background-color var(--qds-component-button-duration, 120ms),
+          border-color var(--qds-component-button-duration, 120ms),
+          color var(--qds-component-button-duration, 120ms);
+      }
+
+      /* :where() keeps specificity at zero so the disabled rules below win. */
+      button:where(:hover) {
+        background-color: var(--_bg-hover);
+      }
+
+      button:where(:active) {
+        background-color: var(--_bg-active);
+      }
+
+      button:focus-visible {
+        outline: var(--_focus-ring);
+        outline-offset: 0.125rem;
+      }
+
+      button:disabled,
+      button[aria-disabled='true'] {
+        color: var(--_fg-disabled);
+        background-color: var(--_bg-disabled);
+        border-color: var(--_border-disabled);
+        cursor: not-allowed;
+      }
+
+      .content {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--_gap);
+      }
+
+      .label {
+        display: contents;
+      }
+
+      /*
+       * opacity, NOT visibility or display.
+       *
+       * visibility:hidden and display:none both remove the subtree from the
+       * accessibility tree, which leaves the button with no accessible name for
+       * exactly as long as it is loading — a screen reader announces an unnamed
+       * button mid-submit. opacity:0 keeps the content in the a11y tree and keeps
+       * it in layout, so the button also does not change width when the spinner
+       * appears.
+       *
+       * Fading one wrapper rather than the label plus each slot matters: a bare
+       * text child is not an element, so ::slotted(*) never matches it, and slots
+       * are display:contents, which opacity does not apply to.
+       */
+      :host([loading]) .content {
+        opacity: 0;
+      }
+
+      .spinner {
+        position: absolute;
+        inset: 0;
+        width: 1em;
+        height: 1em;
+        margin: auto;
+        border: 0.125em solid currentColor;
+        border-block-start-color: transparent;
+        border-radius: 50%;
+        animation: spin 600ms linear infinite;
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      /*
+       * A continuous spin is a vestibular trigger. Stepping it into eight discrete
+       * frames keeps the "work is happening" signal without smooth motion.
+       */
+      @media (prefers-reduced-motion: reduce) {
+        .spinner {
+          animation-duration: 1600ms;
+          animation-timing-function: steps(8, end);
+        }
+
+        button {
+          transition: none;
+        }
+      }
+
+      /*
+       * In forced-colors mode the author's colors are discarded, so the disabled
+       * state would become visually identical to the resting one. GrayText is the
+       * system keyword that survives.
+       */
+      @media (forced-colors: active) {
+        button {
+          border: 0.0625rem solid ButtonText;
+        }
+
+        button:disabled,
+        button[aria-disabled='true'] {
+          color: GrayText;
+          border-color: GrayText;
+        }
+      }
+    `,
+    ]; }
+    #internals;
+    constructor() {
+        super();
+        /** Visual emphasis. */
+        this.variant = 'primary';
+        /** Control size. */
+        this.size = 'md';
+        /** Behavior within a form. */
+        this.type = 'button';
+        /** Prevents interaction and removes the button from the tab order. */
+        this.disabled = false;
+        /**
+         * Shows a spinner and blocks activation, while keeping the button focusable so
+         * focus is not lost mid-interaction.
+         */
+        this.loading = false;
+        /** Stretches the button to fill its container. */
+        this.fullWidth = false;
+        /** Accessible name, for when the button has no text (an icon-only button). */
+        this.label = null;
+        /** Submitted as the name of this button's entry when it submits a form. */
+        this.name = '';
+        /**
+         * Submitted with `name` when this button submits a form, and reported as the
+         * dialog's `returnValue` when it submits a `<form method="dialog">`.
+         */
+        this.value = '';
+        this.#internals = this.attachInternals();
+    }
+    /** True while the button should reject activation. */
+    get #inert() {
+        return this.disabled || this.loading;
+    }
+    #handleClick(event) {
+        if (this.#inert) {
+            // A `loading` button is not `disabled`, so the browser still dispatches its
+            // click. Stop it here, and stop propagation too — otherwise the event
+            // escapes the shadow root and any listener on the host fires anyway.
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('qds-click', { bubbles: true, composed: true }));
+        // Submit and reset do not cross the shadow boundary on their own: the native
+        // button's implicit form is its shadow root, which is not a form.
+        const form = this.#internals.form;
+        if (!form)
+            return;
+        if (this.type === 'submit') {
+            this.#submit(form);
+        }
+        else if (this.type === 'reset') {
+            form.reset();
+        }
+    }
+    /**
+     * Submit through a temporary native button carrying this button's name and
+     * value.
+     *
+     * A custom element cannot be a form's submitter — requestSubmit(this) throws —
+     * so a plain requestSubmit() would submit with no submitter at all: the name and
+     * value would be missing from the form data, event.submitter would be null, and
+     * a dialog form's returnValue would be empty. The proxy makes all three behave
+     * as they would for a native submit button. requestSubmit() rather than
+     * submit(), so validation and the submit event still run.
+     */
+    #submit(form) {
+        const proxy = document.createElement('button');
+        proxy.type = 'submit';
+        proxy.hidden = true;
+        if (this.name)
+            proxy.name = this.name;
+        proxy.value = this.value;
+        form.append(proxy);
+        try {
+            form.requestSubmit(proxy);
+        }
+        finally {
+            proxy.remove();
+        }
+    }
+    render() {
+        return html `
+      <button
+        part="button"
+        class="button"
+        type="button"
+        ?disabled=${this.disabled}
+        aria-disabled=${this.loading ? 'true' : nothing}
+        aria-busy=${this.loading ? 'true' : nothing}
+        aria-label=${this.label ?? nothing}
+        @click=${this.#handleClick}
+      >
+        ${this.loading ? html `<span class="spinner" part="spinner"></span>` : nothing}
+        <span class="content" part="content">
+          <slot name="start"></slot>
+          <span class="label" part="label"><slot></slot></span>
+          <slot name="end"></slot>
+        </span>
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], QdsButton.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], QdsButton.prototype, "size", void 0);
+__decorate([
+    property()
+], QdsButton.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsButton.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'full-width' })
+], QdsButton.prototype, "fullWidth", void 0);
+__decorate([
+    property({ attribute: 'label' })
+], QdsButton.prototype, "label", void 0);
+__decorate([
+    property()
+], QdsButton.prototype, "name", void 0);
+__decorate([
+    property()
+], QdsButton.prototype, "value", void 0);
+QdsButton = __decorate([
+    customElement('qds-button')
+], QdsButton);
+export { QdsButton };
+//# sourceMappingURL=qds-button.js.map

package/dist/components/qds-button/qds-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-button.js","sourceRoot":"","sources":["../../../src/components/qds-button/qds-button.ts"],"names":[],"mappings":"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"}

package/dist/components/qds-card/qds-card.d.ts

@@ -0,0 +1,48 @@
+import { type TemplateResult } from 'lit';
+import { QdsElement } from '../../internal/qds-element.js';
+export type QdsCardVariant = 'outlined' | 'elevated' | 'filled';
+/**
+ * A container that groups related content and actions.
+ *
+ * The card is layout only: it has no role and is not interactive, so it adds
+ * nothing to the accessibility tree. Put a heading in the `header` slot when the
+ * card starts a section of the page, so it can be found by heading navigation.
+ *
+ * Empty regions take no space, with no script involved, so a server-rendered
+ * card is laid out correctly before any JavaScript runs. Style slotted content
+ * directly; the media, header, and footer have no wrapper parts.
+ *
+ * @element qds-card
+ *
+ * @slot - The body.
+ * @slot media - Full-bleed content above the header, such as an image.
+ * @slot header - The title area, typically a heading.
+ * @slot footer - Actions or metadata at the bottom.
+ *
+ * @csspart base - The card surface.
+ * @csspart body - The wrapper around the default slot.
+ *
+ * @cssprop [--qds-component-card-padding] - Inner padding.
+ * @cssprop [--qds-component-card-gap] - Space between the header, body, and footer.
+ * @cssprop [--qds-component-card-border-radius] - Corner radius.
+ * @cssprop [--qds-component-card-border-width] - Border thickness.
+ * @cssprop [--qds-component-card-color-content-rest] - Text color.
+ * @cssprop [--qds-component-card-header-font-size] - Header text size.
+ * @cssprop [--qds-component-card-header-font-weight] - Header text weight.
+ * @cssprop [--qds-component-card-header-line-height] - Header line height.
+ * @cssprop [--qds-component-card-{variant}-color-background-rest] - Fill per variant.
+ * @cssprop [--qds-component-card-{variant}-color-border-rest] - Border per variant.
+ * @cssprop [--qds-component-card-elevated-box-shadow] - Shadow of the elevated variant.
+ */
+export declare class QdsCard extends QdsElement {
+    static styles: import("lit").CSSResult[];
+    /** Surface style. */
+    variant: QdsCardVariant;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'qds-card': QdsCard;
+    }
+}
+//# sourceMappingURL=qds-card.d.ts.map

package/dist/components/qds-card/qds-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-card.d.ts","sourceRoot":"","sources":["../../../src/components/qds-card/qds-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAoFpB;IAEF,qBAAqB;IAErB,OAAO,EAAE,cAAc,CAAc;IAE5B,MAAM,IAAI,cAAc;CAUlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/qds-card/qds-card.js

@@ -0,0 +1,152 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { QdsElement } from '../../internal/qds-element.js';
+/**
+ * A container that groups related content and actions.
+ *
+ * The card is layout only: it has no role and is not interactive, so it adds
+ * nothing to the accessibility tree. Put a heading in the `header` slot when the
+ * card starts a section of the page, so it can be found by heading navigation.
+ *
+ * Empty regions take no space, with no script involved, so a server-rendered
+ * card is laid out correctly before any JavaScript runs. Style slotted content
+ * directly; the media, header, and footer have no wrapper parts.
+ *
+ * @element qds-card
+ *
+ * @slot - The body.
+ * @slot media - Full-bleed content above the header, such as an image.
+ * @slot header - The title area, typically a heading.
+ * @slot footer - Actions or metadata at the bottom.
+ *
+ * @csspart base - The card surface.
+ * @csspart body - The wrapper around the default slot.
+ *
+ * @cssprop [--qds-component-card-padding] - Inner padding.
+ * @cssprop [--qds-component-card-gap] - Space between the header, body, and footer.
+ * @cssprop [--qds-component-card-border-radius] - Corner radius.
+ * @cssprop [--qds-component-card-border-width] - Border thickness.
+ * @cssprop [--qds-component-card-color-content-rest] - Text color.
+ * @cssprop [--qds-component-card-header-font-size] - Header text size.
+ * @cssprop [--qds-component-card-header-font-weight] - Header text weight.
+ * @cssprop [--qds-component-card-header-line-height] - Header line height.
+ * @cssprop [--qds-component-card-{variant}-color-background-rest] - Fill per variant.
+ * @cssprop [--qds-component-card-{variant}-color-border-rest] - Border per variant.
+ * @cssprop [--qds-component-card-elevated-box-shadow] - Shadow of the elevated variant.
+ */
+let QdsCard = class QdsCard extends QdsElement {
+    constructor() {
+        super(...arguments);
+        /** Surface style. */
+        this.variant = 'outlined';
+    }
+    static { this.styles = [
+        QdsElement.baseStyles,
+        css `
+      :host {
+        display: block;
+
+        --_padding: var(--qds-component-card-padding, 1.5rem);
+        --_bg: var(--qds-component-card-outlined-color-background-rest, #f8fafc);
+        --_border: var(--qds-component-card-outlined-color-border-rest, #cbd5e1);
+        --_shadow: none;
+      }
+
+      :host([variant='elevated']) {
+        --_bg: var(--qds-component-card-elevated-color-background-rest, #f8fafc);
+        --_border: var(--qds-component-card-elevated-color-border-rest, #e2e8f0);
+        --_shadow: var(
+          --qds-component-card-elevated-box-shadow,
+          0 0.375rem 1rem 0.0625rem rgb(15 23 42 / 0.12)
+        );
+      }
+
+      :host([variant='filled']) {
+        --_bg: var(--qds-component-card-filled-color-background-rest, #f1f5f9);
+        --_border: var(--qds-component-card-filled-color-border-rest, transparent);
+      }
+
+      .base {
+        display: flex;
+        flex-direction: column;
+        gap: var(--qds-component-card-gap, 0.75rem);
+        height: 100%;
+        padding: var(--_padding);
+        /* Clip full-bleed media to the rounded corners. */
+        overflow: hidden;
+
+        font-family: var(--qds-typography-font-family-sans, inherit);
+        color: var(--qds-component-card-color-content-rest, #0f172a);
+
+        background-color: var(--_bg);
+        border: var(--qds-component-card-border-width, 0.0625rem) solid var(--_border);
+        border-radius: var(--qds-component-card-border-radius, 0.5rem);
+        box-shadow: var(--_shadow);
+      }
+
+      /*
+       * The media, header, and footer slots are deliberately not wrapped. A slot
+       * is display: contents, so an empty one generates no box and the flex gap
+       * is not applied around it — empty regions take no space with no script,
+       * which also means a server-rendered card is laid out correctly before it
+       * hydrates. Their content is styled with ::slotted() instead.
+       *
+       * (:host(:has(> [slot])) would read more directly, but Chromium does not
+       * match :has() inside :host().)
+       */
+      ::slotted([slot='media']) {
+        display: block;
+        /* Bleed to the card edges by cancelling the padding around it. */
+        margin: calc(-1 * var(--_padding)) calc(-1 * var(--_padding)) 0;
+        width: calc(100% + 2 * var(--_padding));
+        max-width: none;
+        height: auto;
+      }
+
+      ::slotted([slot='header']) {
+        margin: 0;
+        font-size: var(--qds-component-card-header-font-size, 1.125rem);
+        font-weight: var(--qds-component-card-header-font-weight, 600);
+        line-height: var(--qds-component-card-header-line-height, 1.375);
+      }
+
+      .body {
+        flex: 1;
+      }
+
+      ::slotted([slot='footer']) {
+        margin-block-start: auto;
+      }
+
+      @media (forced-colors: active) {
+        .base {
+          border-color: CanvasText;
+        }
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <div class="base" part="base">
+        <slot name="media"></slot>
+        <slot name="header"></slot>
+        <div class="body" part="body"><slot></slot></div>
+        <slot name="footer"></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], QdsCard.prototype, "variant", void 0);
+QdsCard = __decorate([
+    customElement('qds-card')
+], QdsCard);
+export { QdsCard };
+//# sourceMappingURL=qds-card.js.map

package/dist/components/qds-card/qds-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-card.js","sourceRoot":"","sources":["../../../src/components/qds-card/qds-card.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAI3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEI,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QAuFL,qBAAqB;QAErB,YAAO,GAAmB,UAAU,CAAC;IAYvC,CAAC;aApGiB,WAAM,GAAG;QACvB,UAAU,CAAC,UAAU;QACrB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiFF;KACF,AApFqB,CAoFpB;IAMO,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;;KAOV,CAAC;IACJ,CAAC;;AAXD;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACS;AAzF1B,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAqGnB"}