@mcp-b/web-components 0.2.0

package/dist/empty-state-BLWjtKUo.js

@@ -0,0 +1,186 @@
+import { css, html } from "lit";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+//#region src/components/empty-state/empty-state.styles.ts
+var empty_state_styles_default = css`
+  :host {
+    --content-width: 40ch;
+    --illustration-width: calc(var(--content-width) / 2);
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2em;
+    color: var(--sigvelo-color-text-muted);
+    text-align: center;
+  }
+
+  #illustration {
+    max-width: var(--illustration-width);
+
+    ::slotted(img) {
+      display: block;
+      width: 100%;
+      margin-block-end: 1.5em;
+    }
+
+    ::slotted(sigvelo-icon) {
+      font-size: 6em;
+      stroke-width: 1px;
+      color: var(--sigvelo-color-primary-text);
+    }
+  }
+
+  #content {
+    max-width: var(--content-width);
+    margin-inline: auto;
+
+    ::slotted(h1),
+    ::slotted(h2),
+    ::slotted(h3),
+    ::slotted(h4),
+    ::slotted(h5),
+    ::slotted(h6) {
+      margin-block-start: 0 !important;
+      color: var(--sigvelo-color-text);
+      text-wrap: balance !important;
+    }
+
+    ::slotted(p) {
+      margin-block-end: 1em !important;
+      text-wrap: balance !important;
+    }
+
+    ::slotted(:last-child) {
+      margin-block-end: 0 !important;
+    }
+  }
+`;
+//#endregion
+//#region src/components/empty-state/empty-state.ts
+/**
+* <sigvelo-empty-state>
+*
+* @summary Guides users during first-time experiences or when content is missing, transforming blank spaces into
+* @tag sigvelo-empty-state
+*  opportunities with helpful visuals and clear actions.
+* @documentation https://design-system.sigvelo.com/docs/components/empty-state
+* @status stable
+* @since 1.0
+*
+* @slot - Content to show in the empty state. Usually includes a heading, a paragraph, and sometimes buttons.
+* @slot illustration - An optional illustration to show in the empty state. Works well with an image or a
+*  `<sigvelo-icon>` element.
+*
+* @cssproperty [--content-width=40ch] - The maximum width of the empty state's content. When space is limited, the
+*  content will wrap automatically.
+* @cssproperty --illustration-width - The maximum width of the illustration. By default, this will be half of
+*  `--content-width`. This property does not affect the size of icons.
+*
+* @csspart content - The container that wraps the content.
+* @csspart illustration - The container that wraps the illustration.
+*
+* @example Default
+* ```html
+* <sigvelo-empty-state style="min-height: 400px;">
+*   <img slot="illustration" src="/assets/images/undraw-happy-music.svg" alt="A round cartoon bird happily singing along to music">
+*   <h4>My Podcasts</h4>
+*   <p>You haven't added any podcasts yet. Once you do, you'll be able to listen to them here.</p>
+*   <sigvelo-button color="primary" pill>Add podcasts</sigvelo-button>
+* </sigvelo-empty-state>
+* ```
+*
+* @example Providing content
+* Use the default slot to add content to the empty state. Headings and paragraphs work particularly well. Buttons can be added at the end, as needed.
+*
+* You can adjust the size of the empty state using `width`, `height`, and similar CSS properties. Content will automatically be centered horizontally and vertically within the component.
+*
+* ```html
+* <sigvelo-empty-state style="min-height: 400px;">
+*   <h4>No projects</h4>
+*   <p>Create your first project to get started</p>
+*   <sigvelo-button color="primary">
+*     <sigvelo-icon slot="start" name="plus"></sigvelo-icon>
+*     Create project
+*   </sigvelo-button>
+* </sigvelo-empty-state>
+* ```
+*
+* @example Adding illustrations
+* To show an illustration, slot an image or an icon into the `illustration` slot.
+* ```html
+* <sigvelo-empty-state style="min-height: 400px;">
+*   <img slot="illustration" src="/assets/images/undraw-cat.svg" alt="A cartoon cat sitting and staring at the camera"></sigvelo-icon>
+*   <h4>No food found</h4>
+*   <p>The cats are not thrilled. Please add good food soon.</p>
+* </sigvelo-empty-state>
+* ```
+*
+* ```html
+* <sigvelo-empty-state style="min-height: 400px;">
+*   <sigvelo-icon slot="illustration" name="calendar"></sigvelo-icon>
+*   <h4>No upcoming events</h4>
+*   <p>Your calendar is clear. Schedule meetings or events to see them here.</p>
+* </sigvelo-empty-state>
+* ```
+*
+* @example Styling empty states
+* Empty states come with a simple, minimal appearance. Feel free to customize them with your own styles.
+*
+* ```html
+* <sigvelo-empty-state id="empty-state__styling">
+*   <sigvelo-icon slot="illustration" name="shopping-cart"></sigvelo-icon>
+*   <h4>Your cart is empty</h4>
+*   <p>Looks like it's time to buy cat food again</p>
+*   <sigvelo-button pill>Feed the cats</sigvelo-button>
+* </sigvelo-empty-state>
+*
+* <style>
+*   #empty-state__styling {
+*     min-height: 400px;
+*     border-radius: 2rem;
+*     color: white;
+*     background-color: hsla(203.53846153846155, 82%, 30%, 1);
+*     background-image:
+*       radial-gradient(circle at 102% 80%, hsla(267.62589928057554, 67%, 59%, 1) 0%, transparent 40.308866813608354%),
+*       radial-gradient(circle at 39% 44%, hsla(203.2710280373832, 89%, 46%, 1) 0%, transparent 42.69144621670061%);
+*     background-blend-mode: normal, normal;
+*
+*     h4 {
+*       color: inherit;
+*     }
+*
+*     sigvelo-icon {
+*       font-size: 8rem;
+*       stroke-width: .75px;
+*       color: inherit;
+*     }
+*   }
+* </style>
+* ```
+*/
+var SigveloEmptyState = class extends SigveloElement {
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [hostStyles, empty_state_styles_default];
+	}
+	render() {
+		return html`
+      ${this.whenSlotted("illustration", html`
+          <div id="illustration" part="illustration">
+            <slot name="illustration"></slot>
+          </div>
+        `)}
+
+      <div id="content" part="content">
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+customElements.define("sigvelo-empty-state", SigveloEmptyState);
+//#endregion
+export { SigveloEmptyState as t };

package/dist/empty-state-SGKjpwp3.d.ts

@@ -0,0 +1,117 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/empty-state/empty-state.d.ts
+/**
+ * <sigvelo-empty-state>
+ *
+ * @summary Guides users during first-time experiences or when content is missing, transforming blank spaces into
+ * @tag sigvelo-empty-state
+ *  opportunities with helpful visuals and clear actions.
+ * @documentation https://design-system.sigvelo.com/docs/components/empty-state
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - Content to show in the empty state. Usually includes a heading, a paragraph, and sometimes buttons.
+ * @slot illustration - An optional illustration to show in the empty state. Works well with an image or a
+ *  `<sigvelo-icon>` element.
+ *
+ * @cssproperty [--content-width=40ch] - The maximum width of the empty state's content. When space is limited, the
+ *  content will wrap automatically.
+ * @cssproperty --illustration-width - The maximum width of the illustration. By default, this will be half of
+ *  `--content-width`. This property does not affect the size of icons.
+ *
+ * @csspart content - The container that wraps the content.
+ * @csspart illustration - The container that wraps the illustration.
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-empty-state style="min-height: 400px;">
+ *   <img slot="illustration" src="/assets/images/undraw-happy-music.svg" alt="A round cartoon bird happily singing along to music">
+ *   <h4>My Podcasts</h4>
+ *   <p>You haven't added any podcasts yet. Once you do, you'll be able to listen to them here.</p>
+ *   <sigvelo-button color="primary" pill>Add podcasts</sigvelo-button>
+ * </sigvelo-empty-state>
+ * ```
+ *
+ * @example Providing content
+ * Use the default slot to add content to the empty state. Headings and paragraphs work particularly well. Buttons can be added at the end, as needed.
+ *
+ * You can adjust the size of the empty state using `width`, `height`, and similar CSS properties. Content will automatically be centered horizontally and vertically within the component.
+ *
+ * ```html
+ * <sigvelo-empty-state style="min-height: 400px;">
+ *   <h4>No projects</h4>
+ *   <p>Create your first project to get started</p>
+ *   <sigvelo-button color="primary">
+ *     <sigvelo-icon slot="start" name="plus"></sigvelo-icon>
+ *     Create project
+ *   </sigvelo-button>
+ * </sigvelo-empty-state>
+ * ```
+ *
+ * @example Adding illustrations
+ * To show an illustration, slot an image or an icon into the `illustration` slot.
+ * ```html
+ * <sigvelo-empty-state style="min-height: 400px;">
+ *   <img slot="illustration" src="/assets/images/undraw-cat.svg" alt="A cartoon cat sitting and staring at the camera"></sigvelo-icon>
+ *   <h4>No food found</h4>
+ *   <p>The cats are not thrilled. Please add good food soon.</p>
+ * </sigvelo-empty-state>
+ * ```
+ *
+ * ```html
+ * <sigvelo-empty-state style="min-height: 400px;">
+ *   <sigvelo-icon slot="illustration" name="calendar"></sigvelo-icon>
+ *   <h4>No upcoming events</h4>
+ *   <p>Your calendar is clear. Schedule meetings or events to see them here.</p>
+ * </sigvelo-empty-state>
+ * ```
+ *
+ * @example Styling empty states
+ * Empty states come with a simple, minimal appearance. Feel free to customize them with your own styles.
+ *
+ * ```html
+ * <sigvelo-empty-state id="empty-state__styling">
+ *   <sigvelo-icon slot="illustration" name="shopping-cart"></sigvelo-icon>
+ *   <h4>Your cart is empty</h4>
+ *   <p>Looks like it's time to buy cat food again</p>
+ *   <sigvelo-button pill>Feed the cats</sigvelo-button>
+ * </sigvelo-empty-state>
+ *
+ * <style>
+ *   #empty-state__styling {
+ *     min-height: 400px;
+ *     border-radius: 2rem;
+ *     color: white;
+ *     background-color: hsla(203.53846153846155, 82%, 30%, 1);
+ *     background-image:
+ *       radial-gradient(circle at 102% 80%, hsla(267.62589928057554, 67%, 59%, 1) 0%, transparent 40.308866813608354%),
+ *       radial-gradient(circle at 39% 44%, hsla(203.2710280373832, 89%, 46%, 1) 0%, transparent 42.69144621670061%);
+ *     background-blend-mode: normal, normal;
+ *
+ *     h4 {
+ *       color: inherit;
+ *     }
+ *
+ *     sigvelo-icon {
+ *       font-size: 8rem;
+ *       stroke-width: .75px;
+ *       color: inherit;
+ *     }
+ *   }
+ * </style>
+ * ```
+ */
+declare class SigveloEmptyState extends SigveloElement {
+  static observeSlots: boolean;
+  static styles: CSSResultGroup;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-empty-state": SigveloEmptyState;
+  }
+}
+//#endregion
+export { SigveloEmptyState as t };

package/dist/expander-BUev0BmM.d.ts

@@ -0,0 +1,174 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/expander/expander.d.ts
+/**
+ * <sigvelo-expander>
+ *
+ * @summary An expandable content container with smooth animation on show/hide.
+ * @tag sigvelo-expander
+ * @documentation https://design-system.sigvelo.com/docs/components/expander
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - The default slot for content to be expanded/collapsed.
+ * @slot expand-label - The label for the button that expands the content.
+ * @slot collapse-label - The label for the button that collapses the content.
+ *
+ * @event sigvelo-before-open - Emitted before the expander opens. Cancelable event that prevents opening when canceled.
+ * @event sigvelo-open - Emitted after the expander has opened.
+ * @event sigvelo-before-close - Emitted before the expander closes. Cancelable event that prevents closing when canceled.
+ * @event sigvelo-close - Emitted after the expander has closed.
+ *
+ * @csspart content - The container holding the expandable content.
+ * @csspart shadow - The shadow that shows above collapsed content.
+ * @csspart trigger - The button that toggles between expanded and collapsed states.
+ *
+ * @cssproperty [--preview-height=3lh] - The visible height of the expander's content when collapsed.
+ * @cssproperty [--duration=200ms] - The duration of the expand/collapse animation.
+ * @cssproperty [--easing=ease] - The easing to use for the expand/collapse animation.
+ *
+ * @cssstate disabled - Applied when the expander is disabled.
+ * @cssstate expanded - Applied when the content is expanded.
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-expander>
+ *   <img
+ *     src="https://images.unsplash.com/photo-1746104718755-9c6499747f8d?q=80&w=400&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+ *     alt="Portrait of a gray cat looking towards the bottom left."
+ *     style="max-width: 200px; float: right; margin-inline-start: 2rem; margin-block-end: 2rem;"
+ *   >
+ *   <p>Cats can jump up to five times their own height in a single leap, making them the acrobats of the animal kingdom. Picture a cat vaulting over a coffee table like a furry superhero, landing with a smug glance that says, "Nailed it!"</p>
+ *   <p>A cat’s whiskers are not just for show—they’re precision tools, roughly as wide as the cat’s body, helping them gauge if they can squeeze through tight spaces. This explains why your cat insists on "fitting" into that tiny box, even if it’s mostly wishful thinking.</p>
+ *   <p>Cats have a special vocal talent: the purr, which they use to express contentment, hunger, or even self-soothing. Each cat’s purr is as unique as a signature, a melodic hum that can charm treats out of even the toughest humans.</p>
+ * </sigvelo-expander>
+ * ```
+ *
+ * @example Expanded initially
+ * Add the `expanded` attribute to expand the content by default.
+ *
+ * ```html
+ * <sigvelo-expander expanded>
+ *   <p>Cats possess an astonishing 230 bones in their bodies, compared to a human’s mere 206, granting them their signature slinky grace. Imagine them weaving through furniture like liquid fur, smirking at our clumsy two-legged attempts to keep up!</p>
+ *   <p>When cats gather, it’s dubbed a "glaring," a term that perfectly captures their judgmental stares. Good luck convincing these furry monarchs to align for anything but a sunbeam or the faint crinkle of a treat bag.</p>
+ *   <p>Each cat’s eyes are a cosmic masterpiece, with pupils that shift from slits to full moons, adapting to light with eerie precision. No two cats share the exact same iris patterns, making their gaze a one-of-a-kind spell that demands your undivided attention.</p>
+ * </sigvelo-expander>
+ * ```
+ *
+ * @example Changing the height
+ * You can change the height of the preview that shows when the expander is collapsed by setting the `--preview-height` custom property.
+ *
+ * ```html
+ * <sigvelo-expander style="--preview-height: 6lh;">
+ *   <p>Cats can hear ultrasonic sounds, picking up frequencies far beyond human ears, like secret whispers from another realm. Envision them tilting their heads, catching the faintest squeak of a toy or the distant rustle of a snack bag!</p>
+ *   <p>A cluster of cats is playfully called a “cabal,” hinting at their mysterious, scheming nature. Try gathering these whiskered conspirators, and you’ll find they only unite for a fleeting moment—usually when a cardboard box begs to be claimed.</p>
+ *   <p>Every cat’s coat is a unique tapestry, with patterns of tabby swirls, tortoiseshell patches, or sleek solids. This furry artwork is their personal signature, ensuring no two cats ever wear quite the same masterpiece!</p>
+ * </sigvelo-expander>
+ * ```
+ *
+ * @example Customizing labels
+ * To provide custom labels for the trigger, use the `expand-label` and `collapse-label` slots.
+ *
+ * ```html
+ * <sigvelo-expander>
+ *   <span slot="expand-label">Show me more</span>
+ *   <span slot="collapse-label">Never mind</span>
+ *   <p>Cats spend approximately 70% of their lives sleeping, which amounts to about 13-16 hours a day. Just imagine having that kind of schedule – sleeping two-thirds of your life away and still being considered a perfectly functional adult!</p>
+ *   <p>A group of cats is called a "clowder," though most cat owners know that trying to organize multiple cats into any kind of group is nearly impossible. Cats are notorious individualists who come together only when the treats bag rustles.</p>
+ *   <p>A cat's nose print is unique, just like a human's fingerprint. Each cat has its own distinct pattern of bumps and ridges on its nose, which could theoretically be used for identification – if cats would ever cooperate with being fingerprinted.</p>
+ * </sigvelo-expander>
+ * ```
+ *
+ * @example Hiding the shadow
+ * Add the `without-shadow` attribute to remove the shadow that appears above collapsed content.
+ *
+ * ```html
+ * <sigvelo-expander without-shadow>
+ *   <p>Cats can rotate their ears 180 degrees, tuning into the faintest sounds like furry satellite dishes. Imagine them eavesdropping on your whispers from across the room, plotting their next treat heist with a flick of their ears!</p>
+ *   <p>A gathering of cats is whimsically called a "pounce," though herding these solo artists is like convincing stars to align. They’ll only unite for the irresistible jingle of a toy mouse or a freshly opened can of tuna.</p>
+ *   <p>Every cat’s tongue is a tiny marvel, covered in spiky papillae that act like a built-in comb. This unique texture not only keeps their fur pristine but also makes each lick a one-of-a-kind grooming session, if only they’d share the spa secrets!</p>
+ * </sigvelo-expander>
+ * ```
+ *
+ * @example Disabling
+ * Add the `disabled` attribute to disable the expand/collapse functionality. When disabled, the expander can still be toggled programmatically.
+ *
+ * ```html
+ * <sigvelo-expander disabled>
+ *   <p>Cats boast a secret weapon: their retractable claws, which they keep sharp by sheathing them like tiny daggers. Picture them strutting past your couch, deciding whether to unleash their ninja skills or graciously spare your furniture today!</p>
+ *   <p>A band of cats is charmingly termed a “clutter,” though corralling these furry rebels is a fool’s errand. They’ll only deign to assemble when the scent of catnip wafts through the air or a laser pointer dances into view.</p>
+ *   <p>Each cat’s tail is a unique communicator, with patterns of stripes, swirls, or spots that rival a painter’s palette. This expressive appendage waves like a personalized flag, broadcasting moods—if only we could decode the full saga of every twitch!</p>
+ * </sigvelo-expander>
+ * ```
+ *
+ * @example Styling expanders
+ * You can customize the expander's variant with CSS custom properties and parts.
+ *
+ * ```html
+ * <sigvelo-expander id="expander__styling">
+ *   <p>Cats have a remarkable sense of balance, thanks to their flexible spines and inner ear mechanisms. Imagine them tightrope-walking along a fence, flicking their tails like seasoned acrobats, completely unfazed by gravity’s pull!</p>
+ *   <p>A group of cats is called a “colony,” though these independent souls rarely agree to collective plans. They might briefly unite for a sunny nap spot, but good luck getting them to share the prime real estate!</p>
+ *   <p>Each cat’s paw pads are uniquely textured, acting like tiny shock absorbers for stealthy landings. These cushioned marvels are as individual as a signature, making every step a masterpiece of feline engineering.</p>
+ * </sigvelo-expander>
+ *
+ * <style>
+ *   #expander__styling {
+ *     --duration: 350ms;
+ *     --easing: cubic-bezier(0.4, 0.0, 0.2, 1);
+ *
+ *     &::part(trigger) {
+ *       display: block;
+ *       width: fit-content;
+ *       margin: 1rem auto 0;
+ *       padding: 0.5rem 1.25rem;
+ *       background-color: #4a6cf7;
+ *       color: white;
+ *       border: none;
+ *       border-radius: var(--sigvelo-radius-full);
+ *       font-weight: 500;
+ *       cursor: pointer;
+ *       transition: background-color 0.2s ease, transform 0.2s ease;
+ *     }
+ *
+ *     &::part(trigger):hover {
+ *       background-color: #3a5ce5;
+ *     }
+ *
+ *     &::part(trigger):active {
+ *       transform: translateY(1px);
+ *     }
+ *
+ *     &::part(trigger):focus-visible {
+ *       outline-color: #4a6cf7;
+ *     }
+ *   }
+ * </style>
+ * ```
+ */
+declare class SigveloExpander extends SigveloElement {
+  static styles: CSSResultGroup;
+  private localize;
+  content: HTMLElement;
+  trigger: HTMLButtonElement;
+  /** Whether the content is expanded */
+  expanded: boolean;
+  /** Disables the expand/collapse functionality */
+  disabled: boolean;
+  /** When true, the shadow above collapsed content will not be rendered. */
+  withoutShadow: boolean;
+  /** Update max-height when the expanded property changes */
+  updated(changedProperties: PropertyValues<this>): void;
+  private handleClick;
+  private handleContentScroll;
+  /** Toggle the expanded state */
+  private toggleExpanded;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-expander": SigveloExpander;
+  }
+}
+//#endregion
+export { SigveloExpander as t };