@mcp-b/web-components 0.2.0

package/dist/card-DIg1-X2G.js

@@ -0,0 +1,332 @@
+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/card/card.styles.ts
+var card_styles_default = css`
+  /* Base styles + normal variant */
+  :host {
+    --spacing: 1.5em;
+    --border-width: var(--sigvelo-border-width);
+    --border-style: var(--sigvelo-border-style);
+
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--sigvelo-radius-md);
+  }
+
+  /* Normal */
+  :host {
+    border: var(--border-style) var(--border-width) var(--sigvelo-color-neutral-border-muted);
+    background-color: var(--sigvelo-color-surface);
+    box-shadow: var(--sigvelo-elevation-raised);
+  }
+
+  /* Filled */
+  :host([variant="filled"]) {
+    border-color: var(--sigvelo-color-canvas);
+    background-color: var(--sigvelo-color-neutral-bg-subtle);
+  }
+
+  /* Vertical cards */
+  :host([orientation="horizontal"]) {
+    flex-direction: row;
+  }
+
+  /* Media */
+  #media {
+    position: relative;
+    margin: calc(-1 * var(--border-width));
+  }
+
+  :host([orientation="vertical"]) #media ::slotted(*) {
+    display: block !important;
+    width: 100% !important;
+    margin: 0 !important;
+    object-fit: cover !important;
+    border-top-right-radius: var(--sigvelo-radius-md) !important;
+    border-top-left-radius: var(--sigvelo-radius-md) !important;
+    border-bottom-right-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
+
+  :host([orientation="horizontal"]) #media ::slotted(*) {
+    display: block !important;
+    height: 100%;
+    margin: 0 !important;
+    object-fit: cover !important;
+    border-top-right-radius: 0 !important;
+    border-top-left-radius: var(--sigvelo-radius-md) !important;
+    border-bottom-right-radius: 0 !important;
+    border-bottom-left-radius: var(--sigvelo-radius-md) !important;
+  }
+
+  /* Header */
+  #header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    padding-inline-start: var(--spacing);
+    padding-inline-end: calc(
+      var(--spacing) / 2
+    ); /* less spacing to better align buttons as actions */
+    padding-block: calc(var(--spacing) * 0.875);
+    gap: calc(var(--spacing) / 4);
+
+    /*
+      Set negative margins on slotted buttons to prevent the header from growing too tall due to padding. We only do
+      this for the header because it's a common use case to add icon buttons adjacent to the title.
+    */
+    ::slotted(sigvelo-button) {
+      margin-block-start: calc(var(--spacing) * (0.875 / -2)) !important;
+      margin-block-end: calc(var(--spacing) * (0.875 / -2)) !important;
+    }
+  }
+
+  /* Show a border for vertical cards only */
+  :host([orientation="vertical"]) #header {
+    border-bottom: var(--border-style) var(--border-width) var(--sigvelo-color-neutral-border-muted);
+  }
+
+  :host([variant="filled"][orientation="vertical"]) #header {
+    border-color: var(--sigvelo-color-canvas);
+  }
+
+  #actions {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  :host([orientation="vertical"]) #actions {
+    margin-inline-start: auto;
+  }
+
+  :host([orientation="horizontal"]) #actions {
+    align-items: center;
+    padding: var(--spacing);
+  }
+
+  /* Body */
+  #body {
+    flex: 1;
+    padding: var(--spacing);
+  }
+
+  /* Footer */
+  #footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    padding: var(--spacing);
+    gap: calc(var(--spacing) / 4);
+  }
+
+  /* Show a border for vertical cards only */
+  :host([orientation="vertical"]) #footer {
+    border-top: var(--border-style) var(--border-width) var(--sigvelo-color-neutral-border-muted);
+  }
+
+  :host([variant="filled"][orientation="vertical"]) #footer {
+    border-color: var(--sigvelo-color-canvas);
+  }
+`;
+//#endregion
+//#region src/components/card/card.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.
+*/
+var SigveloCard = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "normal";
+		this.orientation = "vertical";
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [hostStyles, card_styles_default];
+	}
+	render() {
+		return html`
+      ${this.whenSlotted("media", html` <div id="media" part="media"><slot name="media"></slot></div> `)}
+      ${this.whenSlotted("header", html`
+          <header id="header" part="header">
+            <slot name="header"></slot>
+            ${this.orientation === "vertical" ? html` <div id="actions" part="actions"><slot name="actions"></slot></div> ` : ""}
+          </header>
+        `)}
+
+      <div id="body" part="body">
+        <slot></slot>
+      </div>
+
+      ${this.whenSlotted("footer", html`
+          <footer id="footer" part="footer">
+            <slot name="footer"></slot>
+          </footer>
+        `)}
+      ${this.orientation === "horizontal" ? this.whenSlotted("actions", html` <div id="actions" part="actions"><slot name="actions"></slot></div> `) : ""}
+    `;
+	}
+};
+__decorate([property({ reflect: true })], SigveloCard.prototype, "variant", void 0);
+__decorate([property({ reflect: true })], SigveloCard.prototype, "orientation", void 0);
+customElements.define("sigvelo-card", SigveloCard);
+//#endregion
+export { SigveloCard as t };