@mcp-b/web-components 0.2.0

package/dist/accordion-item-DvPfhpm8.js

@@ -0,0 +1,307 @@
+import "./icon-BPVkNsY4.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } 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 { classMap } from "lit/directives/class-map.js";
+import { parseCssDuration } from "@mcp-b/wc-support/utilities/animate";
+//#region src/components/accordion-item/accordion-item.styles.ts
+var accordion_item_styles_default = css`
+  :host {
+    /* Private, inherited from <sigvelo-accordion> */
+    --duration: inherit;
+    --easing: inherit;
+    --sigvelo-accordion-border-color: inherit;
+    --border-style: inherit;
+    --border-width: inherit;
+    --border-radius: inherit;
+
+    display: block;
+  }
+
+  /* Header */
+  #header {
+    display: flex;
+    width: 100%;
+    border: 0;
+    align-items: center;
+    padding: 1em;
+    gap: 1em;
+    background: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-weight: var(--sigvelo-font-weight-semibold);
+    font-size: 0.9375em;
+    text-align: inherit;
+    cursor: pointer;
+    user-select: none;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: var(--sigvelo-focus-ring);
+      outline-offset: -2px;
+    }
+  }
+
+  :host(:state(disabled)) #header {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  :host([icon-placement="start"]) #header {
+    flex-direction: row-reverse;
+  }
+
+  /* Label */
+  #label {
+    display: flex;
+    flex: 1;
+    align-items: center;
+
+    ::slotted(sigvelo-icon) {
+      margin-inline-end: 0.5em;
+      font-size: 1.25em;
+    }
+  }
+
+  /* Icon */
+  #icon {
+    display: flex;
+    align-items: center;
+    font-size: 1.25em;
+    transition: rotate var(--duration) var(--easing);
+  }
+
+  :host(:state(expanded):dir(ltr)) #icon {
+    rotate: 180deg;
+  }
+
+  :host(:state(expanded):dir(rtl)) #icon {
+    rotate: -180deg;
+  }
+
+  /* Icon position */
+  #header {
+    .icon-start {
+      flex-direction: row;
+    }
+
+    .icon-end {
+      flex-direction: row;
+    }
+
+    .icon-start #icon {
+      order: -1;
+    }
+  }
+
+  /* Body */
+  #body {
+    will-change: height;
+  }
+
+  :host(:not(:state(expanded))) #body {
+    height: 0;
+    overflow: hidden;
+  }
+
+  :host(:state(expanded)) #body {
+    overflow: visible;
+  }
+
+  /* Content */
+  #content {
+    padding: 0 1em 1em;
+  }
+
+  /* Normal variant */
+  :host([variant="normal"]) {
+    border-bottom: var(--border-style) var(--border-width) var(--sigvelo-accordion-border-color);
+  }
+
+  :host([variant="normal"][data-accordion-item-first]) {
+    border-top: var(--border-style) var(--border-width) var(--sigvelo-accordion-border-color);
+  }
+
+  /* Contained variant */
+  :host([variant="contained"][data-accordion-item-first]) #header {
+    border-top-right-radius: var(--border-radius);
+    border-top-left-radius: var(--border-radius);
+  }
+
+  :host([variant="contained"][data-accordion-item-last]) #header {
+    border-bottom-right-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+  }
+
+  :host([variant="contained"]:not([data-accordion-item-last])) {
+    border-bottom: var(--border-style) var(--border-width) var(--sigvelo-accordion-border-color);
+  }
+
+  /* Separated variant */
+  :host([variant="separated"]) {
+    border: var(--border-style) var(--border-width) var(--sigvelo-color-neutral-bg-muted);
+    border-radius: var(--border-radius);
+    background-color: var(--sigvelo-color-surface);
+    box-shadow: var(--sigvelo-elevation-hairline);
+    color: var(--sigvelo-color-neutral-text-on-subtle);
+  }
+
+  :host([variant="separated"]:state(expanded)) {
+    border-color: var(--sigvelo-accordion-border-color);
+  }
+
+  :host([variant="separated"]) #header {
+    border-radius: inherit;
+  }
+`;
+//#endregion
+//#region src/components/accordion-item/accordion-item.ts
+/**
+* <sigvelo-accordion-item>
+*
+* @summary An individual section within an accordion, consisting of a header and content that shows when expanded.
+* @tag sigvelo-accordion-item
+* @documentation https://design-system.sigvelo.com/docs/components/accordion-item
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-icon
+*
+* @slot - The content to show when expanded.
+* @slot icon - The expand/collapse icon.
+* @slot label - The accordion item's label. For plain-text labels, you can use the `label` attribute instead.
+*
+* @csspart header - The accordion item's header that contains the label and icon.
+* @csspart label - The label container.
+* @csspart icon - The icon container.
+* @csspart body - The accordion item's body that contains the content.
+* @csspart content - The content wrapper inside the body.
+*
+* @cssstate disabled - Applies when the accordion item is disabled.
+* @cssstate expanded - Applies when the accordion item is expanded.
+*
+* @example Default
+* This component must only be used within an accordion. You can see some examples of accordion items being used in the accordion documentation.
+*/
+var SigveloAccordionItem = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.expanded = false;
+		this.variant = "normal";
+		this.iconPlacement = "end";
+		this.disabled = false;
+	}
+	static {
+		this.styles = [hostStyles, accordion_item_styles_default];
+	}
+	/** Sets focus to the accordion item. */
+	focus() {
+		this.header.focus();
+	}
+	/** Removes focus from the accordion item. */
+	blur() {
+		this.header.blur();
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
+		if (changedProperties.has("expanded")) this.customStates.set("expanded", this.expanded);
+	}
+	/** Animate the expansion of the body - called by the accordion controller */
+	async animateExpand() {
+		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");
+		this.body.style.height = "0px";
+		this.body.style.overflow = "hidden";
+		const targetHeight = this.content.scrollHeight;
+		await this.body.animate([{ height: "0px" }, { height: `${targetHeight}px` }], {
+			duration,
+			easing
+		}).finished;
+		this.body.style.removeProperty("height");
+		this.body.style.removeProperty("overflow");
+	}
+	/** Animate the collapse of the body - called by the accordion controller */
+	async animateCollapse() {
+		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");
+		if (this.body && (!this.body.style.height || this.body.style.height === "auto")) {
+			this.body.style.height = `${this.body.scrollHeight}px`;
+			this.body.offsetHeight;
+		}
+		const currentHeight = this.body.scrollHeight;
+		this.body.style.height = `${currentHeight}px`;
+		this.body.style.overflow = "hidden";
+		await this.body.animate([{ height: `${currentHeight}px` }, { height: "0px" }], {
+			duration,
+			easing
+		}).finished;
+		this.body.style.removeProperty("height");
+		this.body.style.removeProperty("overflow");
+	}
+	render() {
+		return html`
+      <button
+        type="button"
+        id="header"
+        part="header"
+        class=${classMap({
+			"icon-start": this.iconPlacement === "start",
+			"icon-end": this.iconPlacement === "end"
+		})}
+        aria-labelledby="label"
+        aria-controls="body"
+        aria-expanded=${this.expanded ? "true" : "false"}
+        ?disabled=${this.disabled}
+      >
+        <div id="label" part="label">
+          <slot name="label">${this.label}</slot>
+        </div>
+        <div id="icon" part="icon">
+          <slot name="icon">
+            <sigvelo-icon id="default-icon" library="system" name="chevron-down"></sigvelo-icon>
+          </slot>
+        </div>
+      </button>
+
+      <div
+        id="body"
+        part="body"
+        aria-hidden=${this.expanded ? "false" : "true"}
+        .inert=${!this.expanded}
+      >
+        <div id="content" part="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+	}
+};
+__decorate([query("#body")], SigveloAccordionItem.prototype, "body", void 0);
+__decorate([query("#content")], SigveloAccordionItem.prototype, "content", void 0);
+__decorate([query("#header")], SigveloAccordionItem.prototype, "header", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloAccordionItem.prototype, "expanded", void 0);
+__decorate([property()], SigveloAccordionItem.prototype, "label", void 0);
+__decorate([property({ reflect: true })], SigveloAccordionItem.prototype, "variant", void 0);
+__decorate([property({
+	attribute: "icon-placement",
+	reflect: true
+})], SigveloAccordionItem.prototype, "iconPlacement", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloAccordionItem.prototype, "disabled", void 0);
+customElements.define("sigvelo-accordion-item", SigveloAccordionItem);
+//#endregion
+export { SigveloAccordionItem as t };

package/dist/accordion-item-bPRIahNn.d.ts

@@ -0,0 +1,63 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/accordion-item/accordion-item.d.ts
+/**
+ * <sigvelo-accordion-item>
+ *
+ * @summary An individual section within an accordion, consisting of a header and content that shows when expanded.
+ * @tag sigvelo-accordion-item
+ * @documentation https://design-system.sigvelo.com/docs/components/accordion-item
+ * @status stable
+ * @since 1.0
+ *
+ * @dependency sigvelo-icon
+ *
+ * @slot - The content to show when expanded.
+ * @slot icon - The expand/collapse icon.
+ * @slot label - The accordion item's label. For plain-text labels, you can use the `label` attribute instead.
+ *
+ * @csspart header - The accordion item's header that contains the label and icon.
+ * @csspart label - The label container.
+ * @csspart icon - The icon container.
+ * @csspart body - The accordion item's body that contains the content.
+ * @csspart content - The content wrapper inside the body.
+ *
+ * @cssstate disabled - Applies when the accordion item is disabled.
+ * @cssstate expanded - Applies when the accordion item is expanded.
+ *
+ * @example Default
+ * This component must only be used within an accordion. You can see some examples of accordion items being used in the accordion documentation.
+ */
+declare class SigveloAccordionItem extends SigveloElement {
+  static styles: CSSResultGroup;
+  body: HTMLElement;
+  content: HTMLElement;
+  header: HTMLButtonElement;
+  expanded: boolean;
+  /** The accordion item's label. If you need to provide HTML in the label, use the `label` slot instead. */
+  label: string;
+  /** The accordion item's variant. This will be set automatically by the accordion controller. */
+  variant: "normal" | "contained" | "separated" | "unstyled";
+  /** The position of the expand/collapse icon. This will be set automatically by the accordion controller. */
+  iconPlacement: "start" | "end";
+  /** Disables the accordion item. */
+  disabled: boolean;
+  /** Sets focus to the accordion item. */
+  focus(): void;
+  /** Removes focus from the accordion item. */
+  blur(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  /** Animate the expansion of the body - called by the accordion controller */
+  animateExpand(): Promise<void>;
+  /** Animate the collapse of the body - called by the accordion controller */
+  animateCollapse(): Promise<void>;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-accordion-item": SigveloAccordionItem;
+  }
+}
+//#endregion
+export { SigveloAccordionItem as t };