@mcp-b/web-components 0.2.0

package/dist/button-group-COodHeuB.d.ts

@@ -0,0 +1,155 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/button-group/button-group.d.ts
+/**
+ * <sigvelo-button-group>
+ *
+ * @summary Displays related buttons in a stylized group.
+ * @tag sigvelo-button-group
+ * @documentation https://design-system.sigvelo.com/docs/components/button-group
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - One or more `<sigvelo-button>` elements to place in the button group.
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-button-group>
+ *   <sigvelo-button>
+ *     <sigvelo-icon slot="start" name="plus"></sigvelo-icon>
+ *     New
+ *   </sigvelo-button>
+ *   <sigvelo-button>
+ *     <sigvelo-icon slot="start" name="folder-open"></sigvelo-icon>
+ *     Open
+ *   </sigvelo-button>
+ *   <sigvelo-button>
+ *     <sigvelo-icon slot="start" name="device-floppy"></sigvelo-icon>
+ *     Save
+ *   </sigvelo-button>
+ *   <sigvelo-button>
+ *     <sigvelo-icon slot="start" name="printer"></sigvelo-icon>
+ *     Print
+ *   </sigvelo-button>
+ * </sigvelo-button-group>
+ * ```
+ *
+ * **Note:** Button groups work really well in conjunction with the [toolbar component](/docs/components/toolbar).
+ *
+ * @example With dropdowns
+ * You can nest dropdowns inside button groups to give users additional options.
+ *
+ * ```html
+ * <sigvelo-button-group label="Options">
+ *   <sigvelo-button>
+ *     <sigvelo-icon slot="start" name="photo"></sigvelo-icon>
+ *     Details
+ *   </sigvelo-button>
+ *   <sigvelo-button>
+ *     <sigvelo-icon slot="start" name="message-circle"></sigvelo-icon>
+ *     Comments
+ *   </sigvelo-button>
+ *   <sigvelo-dropdown>
+ *     <sigvelo-button slot="trigger" with-caret>
+ *       <sigvelo-icon slot="start" name="download"></sigvelo-icon>
+ *       Download
+ *     </sigvelo-button>
+ *     <sigvelo-dropdown-item value="sm">Small <span slot="details">640&times;480</span></sigvelo-dropdown-item>
+ *     <sigvelo-dropdown-item value="md">Medium <span slot="details">800&times;600</span></sigvelo-dropdown-item>
+ *     <sigvelo-dropdown-item value="lg">Large <span slot="details">1280&times;1024</span></sigvelo-dropdown-item>
+ *     <sigvelo-divider></sigvelo-divider>
+ *     <sigvelo-dropdown-item value="og">Custom…</sigvelo-dropdown-item>
+ *   </sigvelo-dropdown>
+ * </sigvelo-button-group>
+ * ```
+ *
+ * @example Adding tooltips
+ * You can add tooltips to improve the user experience of your button groups.
+ *
+ * ```html
+ * <sigvelo-button-group label="Options">
+ *   <sigvelo-button icon-label="View image details" id="button-group__tooltip-image">
+ *     <sigvelo-icon name="photo"></sigvelo-icon>
+ *   </sigvelo-button>
+ *   <sigvelo-button icon-label="Leave a comment" id="button-group__tooltip-comments">
+ *     <sigvelo-icon name="message-circle"></sigvelo-icon>
+ *   </sigvelo-button>
+ *   <sigvelo-button icon-label="Save this image" id="button-group__tooltip-download">
+ *     <sigvelo-icon name="download"></sigvelo-icon>
+ *   </sigvelo-button>
+ * </sigvelo-button-group>
+ *
+ * <sigvelo-tooltip for="button-group__tooltip-image">Details</sigvelo-tooltip>
+ * <sigvelo-tooltip for="button-group__tooltip-comments">Comments</sigvelo-tooltip>
+ * <sigvelo-tooltip for="button-group__tooltip-download">Download</sigvelo-tooltip>
+ * ```
+ *
+ * @example Vertical button groups
+ * To make a vertical button group, set the `orientation` attribute to `vertical`.
+ *
+ * ```html
+ * <sigvelo-button-group orientation="vertical" label="Options" style="max-width: 60px;">
+ *   <sigvelo-button>
+ *     <sigvelo-icon slot="start" name="plus"></sigvelo-icon>
+ *     New
+ *   </sigvelo-button>
+ *   <sigvelo-button>
+ *     <sigvelo-icon slot="start" name="folder-open"></sigvelo-icon>
+ *     Open
+ *   </sigvelo-button>
+ *   <sigvelo-button>
+ *     <sigvelo-icon slot="start" name="device-floppy"></sigvelo-icon>
+ *     Save
+ *   </sigvelo-button>
+ *   <sigvelo-button>
+ *     <sigvelo-icon slot="start" name="printer"></sigvelo-icon>
+ *     Print
+ *   </sigvelo-button>
+ * </sigvelo-button-group>
+ * ```
+ *
+ * @example Making a split button
+ * Create a split button by placing a button and a dropdown inside a button group.
+ *
+ * ```html
+ * <sigvelo-button-group label="Options">
+ *   <sigvelo-button>
+ *     <sigvelo-icon name="share-2" slot="start"></sigvelo-icon>
+ *     Share
+ *   </sigvelo-button>
+ *   <sigvelo-dropdown placement="bottom-end">
+ *     <sigvelo-button slot="trigger" icon-label="Save options" with-caret></sigvelo-button>
+ *     <sigvelo-dropdown-item value="cats">Share with cats</sigvelo-dropdown-item>
+ *     <sigvelo-dropdown-item value="dogs" disabled>Share with dogs</sigvelo-dropdown-item>
+ *     <sigvelo-divider></sigvelo-divider>
+ *     <sigvelo-dropdown-item value="url">Copy URL</sigvelo-dropdown-item>
+ *     <sigvelo-dropdown-item value="embed">Copy embed code</sigvelo-dropdown-item>
+ *   </sigvelo-dropdown>
+ * </sigvelo-button-group>
+ * ```
+ */
+declare class SigveloButtonGroup extends SigveloElement {
+  static styles: CSSResultGroup;
+  /**
+   * An accessible label for the tab list. This won't be visible, but it will be read to assistive devices so it's
+   * usually a good idea to include one.
+   */
+  label: string;
+  /** The button group's orientation. */
+  orientation: "horizontal" | "vertical";
+  firstUpdated(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  /** Gets an array of buttons slotted into the button group. Includes slotted buttons, such as dropdown triggers. */
+  private getButtons;
+  /** Updates slotted button class names so they get the correct button styles. */
+  private updateClassNames;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-button-group": SigveloButtonGroup;
+  }
+}
+//#endregion
+export { SigveloButtonGroup as t };

package/dist/callout-B8zTf8Go.js

@@ -0,0 +1,188 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+//#region src/components/callout/callout.styles.ts
+var callout_styles_default = css`
+  :host {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding-inline: 1em;
+    padding-block: 1em;
+    gap: 1em;
+    border-width: var(--sigvelo-border-width);
+    border-style: var(--sigvelo-border-style);
+    border-radius: var(--sigvelo-radius-md);
+  }
+
+  /* Neutral */
+  :host([color="neutral"]) {
+    border-color: var(--sigvelo-color-neutral-border-subtle);
+    background-color: var(--sigvelo-color-neutral-bg-subtle);
+  }
+
+  :host([color="neutral"]) #icon {
+    color: var(--sigvelo-color-neutral-text);
+  }
+
+  /* Primary */
+  :host([color="primary"]) {
+    border-color: var(--sigvelo-color-primary-border-subtle);
+    background-color: var(--sigvelo-color-primary-bg-subtle);
+  }
+
+  :host([color="primary"]) #icon {
+    color: var(--sigvelo-color-primary-text);
+  }
+
+  /* Constructive */
+  :host([color="success"]) {
+    border-color: var(--sigvelo-color-success-border-subtle);
+    background-color: var(--sigvelo-color-success-bg-subtle);
+  }
+
+  :host([color="success"]) #icon {
+    color: var(--sigvelo-color-success-text);
+  }
+
+  /* Destructive */
+  :host([color="destructive"]) {
+    border-color: var(--sigvelo-color-danger-border-subtle);
+    background-color: var(--sigvelo-color-danger-bg-subtle);
+  }
+
+  :host([color="destructive"]) #icon {
+    color: var(--sigvelo-color-danger-text);
+  }
+
+  #icon {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    align-self: start;
+    justify-content: center;
+    max-width: 1.5em;
+    max-height: 1.5em;
+    font-size: 1.5em;
+  }
+`;
+//#endregion
+//#region src/components/callout/callout.ts
+/**
+* <sigvelo-callout>
+*
+* @summary Draws attention to important information, provides context, or prompts users to take action.
+* @tag sigvelo-callout
+* @documentation https://design-system.sigvelo.com/docs/components/callout
+* @status stable
+* @since 1.0
+*
+* @slot - Content to show in the callout.
+* @slot icon - An optional icon to show in the callout. Works well with `<sigvelo-icon>` and `<svg>` elements.
+*
+* @csspart icon - The container the wraps the icon.
+* @csspart body - The container that wraps the callout's content.
+*
+* @example Default
+* ```html
+* <sigvelo-callout color="primary">
+*   <sigvelo-icon slot="icon" name="book"></sigvelo-icon>
+*   A playful cat's antics can brighten any day with their boundless energy and curiosity. Watching a cat pounce and chase after toys is an endless source of entertainment.
+* </sigvelo-callout>
+* ```
+*
+* @example Variants
+* Set the `color` attribute to `neutral`, `primary`, `success`, or `destructive` to change the callout's color.
+*
+* ```html
+* <sigvelo-callout color="neutral">
+*   This is a neutral callout. Use me for informative content.
+* </sigvelo-callout>
+*
+* <sigvelo-callout color="primary">
+*   This is a primary callout. Use me for informative content that stands out.
+* </sigvelo-callout>
+*
+* <sigvelo-callout color="success">
+*   This is a success callout. Use me to show confirmations.
+* </sigvelo-callout>
+*
+* <sigvelo-callout color="destructive">
+*   This is a destructive callout. Use me when danger lies ahead.
+* </sigvelo-callout>
+* ```
+*
+* @example Adding icons
+* Add an icon to a callout using the `icon` slot. Works best with `<sigvelo-icon>` and `<svg>` elements.
+*
+* ```html
+* <sigvelo-callout color="neutral">
+*   <sigvelo-icon slot="icon" name="settings"></sigvelo-icon>
+*   Sleep mode has been enabled. You can disable it in settings.
+* </sigvelo-callout>
+*
+* <sigvelo-callout color="primary">
+*   <sigvelo-icon slot="icon" name="info-circle"></sigvelo-icon>
+*   A cat's soft, gentle gaze can melt even the coldest of hearts.
+* </sigvelo-callout>
+*
+* <sigvelo-callout color="success">
+*   <sigvelo-icon slot="icon" name="circle-check"></sigvelo-icon>
+*   Great job! The litter box has been successfully cleaned.
+* </sigvelo-callout>
+*
+* <sigvelo-callout color="destructive">
+*   <sigvelo-icon slot="icon" name="alert-triangle"></sigvelo-icon>
+*   Doing this will anger the cats. Are you sure you want to continue?
+* </sigvelo-callout>
+* ```
+*
+* @example Changing the size
+* Callouts are sized relative to the current font size. To change their size, apply `font-size` to the callout or an ancestor element.
+*
+* ```html
+* <sigvelo-callout color="primary" style="font-size: 1.25rem;">
+*   <sigvelo-icon slot="icon" name="rocket"></sigvelo-icon>
+*   It's a magical world, ol' buddy…let's go exploring!
+* </sigvelo-callout>
+*
+* <sigvelo-callout color="success" style="font-size: 1.25rem;">
+*   <sigvelo-icon slot="icon" name="bulb"></sigvelo-icon>
+*   You know what's weird? Day by day nothing seems to change, but pretty soon…everything is different.
+* </sigvelo-callout>
+* ```
+*/
+var SigveloCallout = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.color = "neutral";
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [hostStyles, callout_styles_default];
+	}
+	firstUpdated() {
+		this.setAttribute("role", "note");
+	}
+	render() {
+		return html`
+      ${this.whenSlotted("icon", html`
+          <div id="icon" part="icon">
+            <slot name="icon"></slot>
+          </div>
+        `)}
+
+      <div id="body" part="body">
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property({ reflect: true })], SigveloCallout.prototype, "color", void 0);
+customElements.define("sigvelo-callout", SigveloCallout);
+//#endregion
+export { SigveloCallout as t };

package/dist/callout-DFwPao36.d.ts

@@ -0,0 +1,103 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/callout/callout.d.ts
+/**
+ * <sigvelo-callout>
+ *
+ * @summary Draws attention to important information, provides context, or prompts users to take action.
+ * @tag sigvelo-callout
+ * @documentation https://design-system.sigvelo.com/docs/components/callout
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - Content to show in the callout.
+ * @slot icon - An optional icon to show in the callout. Works well with `<sigvelo-icon>` and `<svg>` elements.
+ *
+ * @csspart icon - The container the wraps the icon.
+ * @csspart body - The container that wraps the callout's content.
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-callout color="primary">
+ *   <sigvelo-icon slot="icon" name="book"></sigvelo-icon>
+ *   A playful cat's antics can brighten any day with their boundless energy and curiosity. Watching a cat pounce and chase after toys is an endless source of entertainment.
+ * </sigvelo-callout>
+ * ```
+ *
+ * @example Variants
+ * Set the `color` attribute to `neutral`, `primary`, `success`, or `destructive` to change the callout's color.
+ *
+ * ```html
+ * <sigvelo-callout color="neutral">
+ *   This is a neutral callout. Use me for informative content.
+ * </sigvelo-callout>
+ *
+ * <sigvelo-callout color="primary">
+ *   This is a primary callout. Use me for informative content that stands out.
+ * </sigvelo-callout>
+ *
+ * <sigvelo-callout color="success">
+ *   This is a success callout. Use me to show confirmations.
+ * </sigvelo-callout>
+ *
+ * <sigvelo-callout color="destructive">
+ *   This is a destructive callout. Use me when danger lies ahead.
+ * </sigvelo-callout>
+ * ```
+ *
+ * @example Adding icons
+ * Add an icon to a callout using the `icon` slot. Works best with `<sigvelo-icon>` and `<svg>` elements.
+ *
+ * ```html
+ * <sigvelo-callout color="neutral">
+ *   <sigvelo-icon slot="icon" name="settings"></sigvelo-icon>
+ *   Sleep mode has been enabled. You can disable it in settings.
+ * </sigvelo-callout>
+ *
+ * <sigvelo-callout color="primary">
+ *   <sigvelo-icon slot="icon" name="info-circle"></sigvelo-icon>
+ *   A cat's soft, gentle gaze can melt even the coldest of hearts.
+ * </sigvelo-callout>
+ *
+ * <sigvelo-callout color="success">
+ *   <sigvelo-icon slot="icon" name="circle-check"></sigvelo-icon>
+ *   Great job! The litter box has been successfully cleaned.
+ * </sigvelo-callout>
+ *
+ * <sigvelo-callout color="destructive">
+ *   <sigvelo-icon slot="icon" name="alert-triangle"></sigvelo-icon>
+ *   Doing this will anger the cats. Are you sure you want to continue?
+ * </sigvelo-callout>
+ * ```
+ *
+ * @example Changing the size
+ * Callouts are sized relative to the current font size. To change their size, apply `font-size` to the callout or an ancestor element.
+ *
+ * ```html
+ * <sigvelo-callout color="primary" style="font-size: 1.25rem;">
+ *   <sigvelo-icon slot="icon" name="rocket"></sigvelo-icon>
+ *   It's a magical world, ol' buddy…let's go exploring!
+ * </sigvelo-callout>
+ *
+ * <sigvelo-callout color="success" style="font-size: 1.25rem;">
+ *   <sigvelo-icon slot="icon" name="bulb"></sigvelo-icon>
+ *   You know what's weird? Day by day nothing seems to change, but pretty soon…everything is different.
+ * </sigvelo-callout>
+ * ```
+ */
+declare class SigveloCallout extends SigveloElement {
+  static observeSlots: boolean;
+  static styles: CSSResultGroup;
+  firstUpdated(): void;
+  /** The type of callout to render. */
+  color: "neutral" | "primary" | "success" | "destructive";
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-callout": SigveloCallout;
+  }
+}
+//#endregion
+export { SigveloCallout as t };

package/dist/card-BYDzdMAU.d.ts

@@ -0,0 +1,177 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/card/card.d.ts
+/**
+ * <sigvelo-card>
+ *
+ * @summary Provides a flexible and visually appealing way to organize and present content in a consistent and easily
+ * @tag sigvelo-card
+ *  digestible format.
+ * @documentation https://design-system.sigvelo.com/docs/components/card
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - Content to place in the dialog's body.
+ * @slot header - Content to place in the dialog's header.
+ * @slot actions - Slot in one or more text buttons to add actions to the card's header (vertical) or footer
+ *  (horizontal). Only available when the respective header/footer is enabled.
+ * @slot footer - Content to place in the dialog's footer.
+ *
+ * @cssproperty [--spacing=1.5rem] - The spacing to use throughout the card.
+ * @cssproperty [--border-width] - The width of the card's border, including interior borders.
+ * @cssproperty [--border-style] - The style of the card's border.
+ *
+ * @csspart body - The container that wraps the card's body.
+ * @csspart header - The container that wraps the card's header. A flex container, by default.
+ * @csspart footer - The container that wraps the card's footer. A flex container, by default.
+ * @csspart media - The container that wraps the card's media.
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-card style="max-width: 340px;">
+ *   <img slot="media" src="https://images.unsplash.com/photo-1515073883629-5e2924e3e106?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A tabby kitten sleeps next to a toy mouse.">
+ *
+ *   There's nothing more delightful than watching a curious kitten explore the world with big, innocent eyes and tiny, playful paws.
+ *
+ *   <sigvelo-button slot="footer" color="primary">I agree</sigvelo-button>
+ *   <sigvelo-button slot="footer">Learn more</sigvelo-button>
+ * </sigvelo-card>
+ * ```
+ *
+ * @example Basic card
+ * Cards are really just styled containers. You can put almost anything in them.
+ *
+ * ```html
+ * <sigvelo-card style="max-width: 340px;">
+ *   <h3 style="font-size: 1.2rem;">Cats are awesome</h3>
+ *   <p>A cat is a bundle of energy, always ready for playtime and filled with amusing antics.</p>
+ *   <p style="margin-block-end: 0;">The playful nature of a fun cat is contagious, as their curiosity and mischievous behavior make for endless entertainment and laughter.</p>
+ * </sigvelo-card>
+ * ```
+ *
+ * @example With header
+ * Place elements into the `header` slot to add content at the start of the card. Enabling the header in vertical cards also enables the `actions` slot, which is a good place to put relevant icon buttons.
+ *
+ * ```html
+ * <sigvelo-card style="max-width: 340px;">
+ *   <h3 slot="header" style="font-size: 1.125rem; margin-block: 0;">Fact of the day</h3>
+ *   <sigvelo-button slot="actions" variant="ghost" icon-label="Settings">
+ *     <sigvelo-icon name="settings"></sigvelo-icon>
+ *   </sigvelo-button>
+ *
+ *   Playful cats thrive on interaction with their human companions, and their spirited nature can strengthen the bond between them, making for a loving and enriching relationship.
+ * </sigvelo-card>
+ * ```
+ *
+ * @example With footer
+ * Place elements into the `footer` slot to add actions or other supplemental information at the end of the card.
+ *
+ * ```html
+ * <sigvelo-card style="max-width: 340px;">
+ *   Playful cats are known for their lively and energetic nature, often engaging in interactive games and activities that stimulate their physical and mental well-being.
+ *
+ *   <sigvelo-button slot="footer" color="primary">Continue reading</sigvelo-button>
+ *   <sigvelo-button slot="footer">More info</sigvelo-button>
+ * </sigvelo-card>
+ * ```
+ *
+ * @example With media
+ * Place an image or video into the `media` slot to add media at the beginning of the card. For consistency, you can set a custom height on the media and it will be cropped and resized as needed.
+ *
+ * ```html
+ * <sigvelo-card style="max-width: 340px;">
+ *   <img slot="media" style="height: 200px;" src="https://images.unsplash.com/photo-1498336179775-9836baef8fdf?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="A fluffy kitten sprawls out on a red pillow with its eyes closed and paws in the air.">
+ *
+ *   A young light gray medium-haired cat, with its soft fur and gentle paws, sprawls contentedly on a vibrant red pillow, basking in the warmth and comfort it provides.
+ * </sigvelo-card>
+ *
+ * <sigvelo-card style="max-width: 340px; margin-block-start: 2rem;">
+ *   <iframe slot="media" height="200" src="https://www.youtube.com/embed/fOd16PT1S7A?si=EOT0GM82FbYsNSzj&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+ *
+ *   Watching a cute cat video can instantly brighten your day, as you witness the playful antics and adorable expressions of these charming creatures, leaving you with a warm smile and a heart full of joy.
+ * </sigvelo-card>
+ * </div>
+ * ```
+ *
+ * @example Changing the variant
+ * Set the `variant` attribute to `filled` to change the card's variant.
+ *
+ * ```html
+ * <sigvelo-card variant="filled" style="max-width: 340px;">
+ *   <strong>Did you know?</strong>
+ *   <p style="margin-block: .75rem 0;">A cat's purr isn't just adorable, it vibrates at frequencies between 25 and 150 Hz which studies suggest can promote healing and reduce stress in their human companions.</p>
+ *
+ *   <sigvelo-button slot="footer" color="primary">Amazing!</sigvelo-button>
+ * </sigvelo-card>
+ * ```
+ *
+ * @example Horizontal cards
+ * Set the `orientation` attribute to `horizontal` to create a card with a horizontal, side-by-side layout. When using the `media` slot, be sure to set a width or maximum width on the image. Horizontal cards do not draw borders to separate the header and footer slots.
+ *
+ * ```html
+ * <sigvelo-card orientation="horizontal" id="card__orientation">
+ *   <img
+ *     slot="media"
+ *     src="https://plus.unsplash.com/premium_photo-1661676191997-0c0cece2a683?q=80&w=500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+ *     alt="Two white kittens laying in a cozy basket">
+ *
+ *   When kittens sleep, they enter a world of peaceful dreams filled with playful adventures and soft purrs.
+ *
+ *   <sigvelo-button slot="actions" variant="ghost" icon-label="More info" pill>
+ *     <sigvelo-icon name="dots"></sigvelo-icon>
+ *   </sigvelo-button>
+ * </sigvelo-card>
+ *
+ * <style>
+ *   sigvelo-card#card__orientation {
+ *     container-type: inline-size;
+ *
+ *     img[slot="media"] {
+ *       max-width: 180px;
+ *     }
+ *
+ *     @container (max-width: 500px) {
+ *       img[slot="media"] {
+ *         max-width: 100px;
+ *       }
+ *     }
+ *   }
+ * </style>
+ * ```
+ *
+ * **Note:** Unlike vertical cards, horizontal cards can make use of the `actions` slot without the header enabled.
+ *
+ * @example Wrapping with links
+ * You can wrap links around cards to make the entire card clickable. You might need to add custom styles to prevent unwanted colors, underlines, and transitions from leaking into the card. Consider using styles that make it obvious to users that the card is clickable.
+ *
+ * ```html
+ * <a
+ *   href="https://example.com/"
+ *   target="_blank"
+ *   style="display: inline-block; font: inherit; color: inherit; text-decoration: inherit;"
+ * >
+ *   <sigvelo-card style="max-width: 340px;">
+ *     Clicking anywhere on this card will take you somewhere because it's surrounded by a link.
+ *   </sigvelo-card>
+ * </a>
+ * ```
+ *
+ * **Note:** If you wrap a card with a link, avoid nesting buttons, form controls, links, videos, and other interactive content inside of the card.
+ */
+declare class SigveloCard extends SigveloElement {
+  static observeSlots: boolean;
+  static styles: CSSResultGroup;
+  /** Determines the card's variant. */
+  variant: "normal" | "filled";
+  /** The card's orientation. */
+  orientation: "horizontal" | "vertical";
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-card": SigveloCard;
+  }
+}
+//#endregion
+export { SigveloCard as t };