@mcp-b/web-components 0.2.0

package/dist/expander-Bwvxj6Oa.js

@@ -0,0 +1,342 @@
+import { Localize } from "./utilities/localize.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { eventOptions, property, query } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { parseCssDuration } from "@mcp-b/wc-support/utilities/animate";
+import { SigveloBeforeCloseEvent, SigveloBeforeOpenEvent, SigveloCloseEvent, SigveloOpenEvent } from "@mcp-b/wc-support/events/open-close";
+//#region src/components/expander/expander.styles.ts
+var expander_styles_default = css`
+  :host {
+    --preview-height: 3lh;
+    --duration: var(--sigvelo-motion-duration-presence);
+    --easing: ease;
+    --shadow-color: var(--sigvelo-color-canvas);
+    --shadow-size: 1lh;
+
+    display: block;
+    position: relative;
+    isolation: isolate;
+  }
+
+  /* Content */
+  #content {
+    z-index: 1;
+    position: relative;
+    min-height: var(--preview-height);
+    max-height: var(--preview-height);
+    overflow: hidden;
+  }
+
+  :host([expanded]) #content {
+    max-height: none;
+    overflow: visible;
+  }
+
+  /* Shadow */
+  #shadow {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: var(--shadow-size);
+    background: linear-gradient(to top, var(--shadow-color), transparent 100%);
+    pointer-events: none;
+  }
+
+  :host([expanded]) #shadow {
+    display: none;
+  }
+
+  /* Trigger */
+  #trigger {
+    display: block;
+    z-index: 2;
+    position: relative;
+    width: max-content;
+    padding: 0.5em 0;
+    border: none;
+    border-radius: var(--sigvelo-radius-md);
+    background: none;
+    color: var(--sigvelo-color-primary-text);
+    font-weight: var(--sigvelo-font-weight-semibold);
+    font-size: 0.9375em;
+    line-height: inherit;
+    font-family: inherit;
+    cursor: pointer;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: var(--sigvelo-focus-ring);
+      outline-offset: var(--sigvelo-focus-offset);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+`;
+//#endregion
+//#region src/components/expander/expander.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>
+* ```
+*/
+var SigveloExpander = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.localize = new Localize(this);
+		this.expanded = false;
+		this.disabled = false;
+		this.withoutShadow = false;
+	}
+	static {
+		this.styles = [hostStyles, expander_styles_default];
+	}
+	/** Update max-height when the expanded property changes */
+	updated(changedProperties) {
+		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
+		if (changedProperties.has("expanded")) this.customStates.set("expanded", this.expanded);
+	}
+	handleClick() {
+		this.toggleExpanded(true);
+	}
+	handleContentScroll() {
+		if (!this.expanded) this.content.scrollTop = 0;
+	}
+	/** Toggle the expanded state */
+	async toggleExpanded(wasUserInteraction = false) {
+		const willExpand = !this.expanded;
+		if (wasUserInteraction) {
+			const beforeEvent = willExpand ? new SigveloBeforeOpenEvent() : new SigveloBeforeCloseEvent({ source: this });
+			this.dispatchEvent(beforeEvent);
+			if (beforeEvent.defaultPrevented) return;
+		}
+		const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		const computedStyle = getComputedStyle(this);
+		const duration = prefersReducedMotion ? 0 : parseCssDuration(computedStyle.getPropertyValue("--duration"));
+		const easing = computedStyle.getPropertyValue("--easing");
+		const currentHeight = this.content.clientHeight;
+		this.expanded = willExpand;
+		if (willExpand) {
+			const targetHeight = this.content.scrollHeight;
+			await this.content.animate([{
+				height: `${currentHeight}px`,
+				overflow: "hidden"
+			}, {
+				height: `${targetHeight}px`,
+				overflow: "hidden"
+			}], {
+				duration,
+				easing
+			}).finished;
+		} else {
+			this.content.style.maxHeight = "var(--preview-height)";
+			this.content.style.overflow = "hidden";
+			const targetHeight = this.content.clientHeight;
+			this.content.style.removeProperty("max-height");
+			this.content.style.removeProperty("overflow");
+			await this.content.animate([{
+				height: `${currentHeight}px`,
+				maxHeight: "none",
+				overflow: "hidden"
+			}, {
+				height: `${targetHeight}px`,
+				maxHeight: "none",
+				overflow: "hidden"
+			}], {
+				duration,
+				easing
+			}).finished;
+		}
+		if (wasUserInteraction) this.dispatchEvent(willExpand ? new SigveloOpenEvent() : new SigveloCloseEvent());
+	}
+	render() {
+		return html`
+      <div
+        id="content"
+        part="content"
+        role="region"
+        aria-labelledby="trigger"
+        @scroll=${this.handleContentScroll}
+      >
+        <slot></slot>
+        ${this.withoutShadow ? "" : html` <div id="shadow" part="shadow" aria-hidden="true"></div> `}
+      </div>
+
+      <button
+        id="trigger"
+        part="trigger"
+        aria-expanded="${this.expanded}"
+        aria-controls="content"
+        ?disabled=${this.disabled}
+        @click="${this.handleClick}"
+      >
+        ${this.expanded ? html`<slot name="collapse-label">${this.localize.term("collapse")}</slot>` : html`<slot name="expand-label">${this.localize.term("expand")}</slot>`}
+      </button>
+    `;
+	}
+};
+__decorate([query("#content")], SigveloExpander.prototype, "content", void 0);
+__decorate([query("#trigger")], SigveloExpander.prototype, "trigger", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloExpander.prototype, "expanded", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloExpander.prototype, "disabled", void 0);
+__decorate([property({
+	attribute: "without-shadow",
+	type: Boolean
+})], SigveloExpander.prototype, "withoutShadow", void 0);
+__decorate([eventOptions({ passive: true })], SigveloExpander.prototype, "handleContentScroll", null);
+customElements.define("sigvelo-expander", SigveloExpander);
+//#endregion
+export { SigveloExpander as t };

package/dist/field-BEyS909F.js

@@ -0,0 +1,163 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html, nothing } from "lit";
+import { property, query } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { isDesignSystemTag } from "@mcp-b/wc-support/prefix";
+//#region src/components/field/field.styles.ts
+var field_styles_default = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375em;
+  }
+
+  [part="label"] {
+    display: flex;
+    align-items: center;
+    gap: 0.25em;
+    font-size: 0.875em;
+    font-weight: var(--sigvelo-font-weight-semibold);
+    color: var(--sigvelo-color-text);
+  }
+
+  .required {
+    color: var(--sigvelo-color-danger-bg);
+  }
+
+  .description {
+    font-size: max(12px, 0.8125em);
+    color: var(--sigvelo-color-text-muted);
+  }
+
+  .error {
+    font-size: max(12px, 0.8125em);
+    font-weight: var(--sigvelo-font-weight-semibold);
+    color: var(--sigvelo-color-danger-text);
+  }
+`;
+//#endregion
+//#region src/components/field/field.ts
+let fieldId = 0;
+/**
+* <sigvelo-field>
+*
+* @summary Wraps a form control with a label, description, and error message.
+* @tag sigvelo-field
+* @status experimental
+* @since 1.0
+*
+* @slot - The form control (e.g. sigvelo-text-field, sigvelo-select).
+* @slot label - Custom label content. Overrides the `label` attribute.
+* @slot description - Custom description content. Overrides the `description` attribute.
+* @slot error - Custom error content. Overrides the `error` attribute.
+*
+* @cssstate error - Applied when the field has an error.
+*
+* @example Default
+* ```html
+* <sigvelo-field label="Email" description="We'll never share your email.">
+*   <sigvelo-text-field placeholder="you@example.com"></sigvelo-text-field>
+* </sigvelo-field>
+* ```
+*
+* @example With error
+* ```html
+* <sigvelo-field label="Username" error="Username is already taken.">
+*   <sigvelo-text-field value="admin"></sigvelo-text-field>
+* </sigvelo-field>
+* ```
+*
+* @example Required
+* ```html
+* <sigvelo-field label="Full name" required>
+*   <sigvelo-text-field placeholder="Jane Doe"></sigvelo-text-field>
+* </sigvelo-field>
+* ```
+*/
+var SigveloField = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.fieldId = `sigvelo-field-${++fieldId}`;
+		this.required = false;
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [hostStyles, field_styles_default];
+	}
+	updated() {
+		this.customStates.set("error", !!this.error || this.slotsWithContent.has("error"));
+		this.syncControlSemantics();
+	}
+	slotText(slot, fallback = "") {
+		return slot?.assignedNodes({ flatten: true }).map((node) => node.textContent).join(" ").trim() || fallback;
+	}
+	syncControlSemantics() {
+		const label = this.slotText(this.labelSlot, this.label);
+		const hasError = !!this.error || this.slotsWithContent.has("error");
+		const description = hasError ? this.slotText(this.errorSlot, this.error) : this.slotText(this.descriptionSlot, this.description);
+		for (const control of this.controlSlot?.assignedElements({ flatten: true }) ?? []) {
+			if (!(control instanceof HTMLElement)) continue;
+			const fieldControl = control;
+			const isSigveloControl = isDesignSystemTag(control.localName);
+			if (isSigveloControl && "label" in fieldControl) fieldControl.label = label;
+			else if (label) control.setAttribute("aria-label", label);
+			else control.removeAttribute("aria-label");
+			if (isSigveloControl && "description" in fieldControl) fieldControl.description = description;
+			else if (description) control.setAttribute("aria-description", description);
+			else control.removeAttribute("aria-description");
+			if ("required" in fieldControl) {
+				fieldControl.required = this.required;
+				control.removeAttribute("aria-required");
+			} else if (this.required) control.setAttribute("aria-required", "true");
+			else control.removeAttribute("aria-required");
+			if (typeof fieldControl.setCustomValidity === "function") fieldControl.setCustomValidity(hasError ? description : "");
+			if (hasError) control.setAttribute("aria-invalid", "true");
+			else control.removeAttribute("aria-invalid");
+		}
+	}
+	handleLabelClick() {
+		const control = this.controlSlot?.assignedElements({ flatten: true })[0];
+		if (control instanceof HTMLElement) control.focus();
+	}
+	render() {
+		const labelId = `${this.fieldId}-label`;
+		const descId = `${this.fieldId}-desc`;
+		const errorId = `${this.fieldId}-error`;
+		return html`
+      <label id=${labelId} part="label" @click=${this.handleLabelClick}>
+        <slot name="label" @slotchange=${this.syncControlSemantics}>${this.label}</slot>
+        ${this.required ? html`<span aria-hidden="true" class="required">${"*"}</span>` : nothing}
+      </label>
+
+      <div part="control">
+        <slot @slotchange=${this.syncControlSemantics}></slot>
+      </div>
+
+      ${(this.description || this.slotsWithContent.has("description")) && !this.error ? html`<div id=${descId} part="description" class="description">
+            <slot name="description" @slotchange=${this.syncControlSemantics}
+              >${this.description}</slot
+            >
+          </div>` : nothing}
+      ${this.error || this.slotsWithContent.has("error") ? html`<div id=${errorId} part="error" class="error" role="alert">
+            <slot name="error" @slotchange=${this.syncControlSemantics}>${this.error}</slot>
+          </div>` : nothing}
+    `;
+	}
+};
+__decorate([query("slot:not([name])")], SigveloField.prototype, "controlSlot", void 0);
+__decorate([query("slot[name=\"label\"]")], SigveloField.prototype, "labelSlot", void 0);
+__decorate([query("slot[name=\"description\"]")], SigveloField.prototype, "descriptionSlot", void 0);
+__decorate([query("slot[name=\"error\"]")], SigveloField.prototype, "errorSlot", void 0);
+__decorate([property()], SigveloField.prototype, "label", void 0);
+__decorate([property()], SigveloField.prototype, "description", void 0);
+__decorate([property()], SigveloField.prototype, "error", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloField.prototype, "required", void 0);
+customElements.define("sigvelo-field", SigveloField);
+//#endregion
+export { SigveloField as t };

package/dist/field-ITx0jVw-.d.ts

@@ -0,0 +1,69 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/field/field.d.ts
+/**
+ * <sigvelo-field>
+ *
+ * @summary Wraps a form control with a label, description, and error message.
+ * @tag sigvelo-field
+ * @status experimental
+ * @since 1.0
+ *
+ * @slot - The form control (e.g. sigvelo-text-field, sigvelo-select).
+ * @slot label - Custom label content. Overrides the `label` attribute.
+ * @slot description - Custom description content. Overrides the `description` attribute.
+ * @slot error - Custom error content. Overrides the `error` attribute.
+ *
+ * @cssstate error - Applied when the field has an error.
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-field label="Email" description="We'll never share your email.">
+ *   <sigvelo-text-field placeholder="you@example.com"></sigvelo-text-field>
+ * </sigvelo-field>
+ * ```
+ *
+ * @example With error
+ * ```html
+ * <sigvelo-field label="Username" error="Username is already taken.">
+ *   <sigvelo-text-field value="admin"></sigvelo-text-field>
+ * </sigvelo-field>
+ * ```
+ *
+ * @example Required
+ * ```html
+ * <sigvelo-field label="Full name" required>
+ *   <sigvelo-text-field placeholder="Jane Doe"></sigvelo-text-field>
+ * </sigvelo-field>
+ * ```
+ */
+declare class SigveloField extends SigveloElement {
+  static observeSlots: boolean;
+  static styles: CSSResultGroup;
+  private fieldId;
+  private controlSlot;
+  private labelSlot;
+  private descriptionSlot;
+  private errorSlot;
+  /** The field label text. */
+  label: string;
+  /** Help text displayed below the control. */
+  description: string;
+  /** Error message displayed below the control. Puts the field in an error state. */
+  error: string;
+  /** Marks the field as required. Shows the required indicator on the label. */
+  required: boolean;
+  updated(): void;
+  private slotText;
+  private syncControlSemantics;
+  private handleLabelClick;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-field": SigveloField;
+  }
+}
+//#endregion
+export { SigveloField as t };