@mcp-b/web-components 0.2.0

package/dist/sparkline-CcpTaJ_Z.js

@@ -0,0 +1,358 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property, state } 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/sparkline/sparkline.styles.ts
+var sparkline_styles_default = css`
+  :host {
+    --fill-color: var(--sigvelo-color-primary-bg-muted);
+    --line-color: var(--sigvelo-color-primary-border);
+    --line-width: 1.5px;
+
+    display: inline-block;
+    aspect-ratio: 4 / 1;
+    width: auto;
+    height: 1em;
+    vertical-align: middle;
+  }
+
+  :host([trend="negative"]) {
+    --fill-color: var(--sigvelo-color-danger-bg-muted);
+    --line-color: var(--sigvelo-color-danger-border);
+  }
+
+  :host([trend="neutral"]) {
+    --fill-color: var(--sigvelo-color-neutral-bg-muted);
+    --line-color: var(--sigvelo-color-neutral-border);
+  }
+
+  :host([trend="positive"]) {
+    --fill-color: var(--sigvelo-color-success-bg-muted);
+    --line-color: var(--sigvelo-color-success-border);
+  }
+
+  :host([variant="line"]) {
+    --fill-color: transparent !important;
+  }
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+
+    &:dir(rtl) {
+      transform: scaleX(-1);
+    }
+  }
+`;
+//#endregion
+//#region src/components/sparkline/sparkline.ts
+/**
+* <sigvelo-sparkline>
+*
+* @summary Shows at-a-glance trends in a small, inline chart that fits within text or tables.
+* @tag sigvelo-sparkline
+* @documentation https://design-system.sigvelo.com/docs/components/sparkline
+* @status stable
+* @since 1.0
+*
+* @cssproperty [--fill-color] - The start color of the gradient fill
+* @cssproperty [--gradient-stop-color] - The end color of the gradient fill
+*
+* @example Default
+* ```html
+* <sigvelo-sparkline
+*   label="Number of cat treats given per day showing an increasing trend"
+*   data="10 20 40 25 35 25 60 50 70"
+*   style="height: 40px;"
+* ></sigvelo-sparkline>
+* ```
+*
+* **Note:** In the same way that images require `alt` text, you should add a label to every sparkline. The label won't be displayed, but it will be announced by assistive devices.
+*
+*
+*
+* By default, sparklines are styled with a `1em` height to fit properly within headings and text.
+*
+* ```html
+* <p>
+*   This week's website traffic
+*   <sigvelo-sparkline
+*     label="Website traffic showing a slightly positive trend"
+*     data="10 16 12 18 30"
+*   ></sigvelo-sparkline>
+*   has slightly increased.
+* </p>
+* ```
+*
+* To set a specific size, adjust the `width`, `height`, or `aspect-ratio` CSS properties.
+*
+* ```html
+* <sigvelo-sparkline
+*   label="Monthly cat toy purchases showing increased spending over time"
+*   data="10 20 40 25 35 25 60 50 70"
+*   style="width: 100%; height: auto;"
+* ></sigvelo-sparkline>
+* ```
+*
+*
+* By default, sparklines render with a gradient fill. Set the `variant` attribute to `solid` or `line` to render a solid fill or a simple line instead.
+*
+* ```html
+* <sigvelo-sparkline
+*   variant="gradient"
+*   label="Weekly cat food consumption showing typical feeding patterns"
+*   data="10 20 40 25 35 25 60 50 70"
+*   style="height: 40px;"
+*   trend="auto"
+* ></sigvelo-sparkline>
+*
+* <sigvelo-sparkline
+*   variant="solid"
+*   label="Weekly cat food consumption showing typical feeding patterns"
+*   data="10 20 40 25 35 25 60 50 70"
+*   style="height: 40px;"
+*   trend="auto"
+* ></sigvelo-sparkline>
+*
+* <sigvelo-sparkline
+*   variant="line"
+*   label="Weekly cat food consumption showing typical feeding patterns"
+*   data="10 20 40 25 35 25 60 50 70"
+*   style="height: 40px;"
+*   trend="auto"
+* ></sigvelo-sparkline>
+* ```
+*
+*
+* Set the `curve` attribute to `linear`, `natural`, or `step` to change the style of the curve.
+*
+* ```html
+* <sigvelo-sparkline
+*   label="Hourly cat meows tracked throughout the day using a linear curve"
+*   curve="linear"
+*   data="10 20 40 25 35 25 60 50 70"
+*   style="height: 40px;"
+* ></sigvelo-sparkline>
+*
+* <sigvelo-sparkline
+*   label="Hourly cat meows tracked throughout the day using a natural curve"
+*   curve="natural"
+*   data="10 20 40 25 35 25 60 50 70"
+*   style="height: 40px;"
+* ></sigvelo-sparkline>
+*
+* <sigvelo-sparkline
+*   label="Hourly cat meows tracked throughout the day using a step curve"
+*   curve="step"
+*   data="10 20 40 25 35 25 60 50 70"
+*   style="height: 40px;"
+* ></sigvelo-sparkline>
+* ```
+*
+*
+* Set the `trend` attribute to `negative`, `neutral`, or `positive` to visually indicate a trend.
+*
+* ```html
+* <!-- Negative trend -->
+* <sigvelo-sparkline
+*   label="Decreasing trend in scratching post usage"
+*   data="70 75 60 50 55 35 25"
+*   trend="negative"
+*   style="height: 40px;"
+* ></sigvelo-sparkline>
+*
+* <!-- Neutral trend -->
+* <sigvelo-sparkline
+*   label="Stable pattern of cat litter box visits"
+*   data="45 50 42 48 44 46 45"
+*   trend="neutral"
+*   style="height: 40px;"
+* ></sigvelo-sparkline>
+*
+* <!-- Positive trend -->
+* <sigvelo-sparkline
+*   label="Increasing frequency of purring episodes"
+*   data="25 35 30 50 45 65 75"
+*   trend="positive"
+*   style="height: 40px;"
+* ></sigvelo-sparkline>
+* ```
+*
+*
+* Use the `--fill-color`, `--line-color`, and `--line-width` custom properties to change the sparkline's styles.
+*
+* ```html
+* <sigvelo-sparkline
+*   label="Weekly likes for cat memes growing in popularity"
+*   data="10 20 40 25 35 25 60 50 70"
+*   style="
+*     height: 60px;
+*     --fill-color: deeppink;
+*     --line-color: deeppink;
+*     --line-width: 3px;
+*   "
+* ></sigvelo-sparkline>
+* ```
+*
+* Combine sparklines with cards and number tickers for an elegant way to display stats.
+*
+* ```html
+* <sigvelo-card class="sparkline__stat">
+*   <div class="description">
+*     <small>Revenue</small><br>
+*     $<sigvelo-number-ticker end-value="12345" start-on-view></sigvelo-number-ticker>
+*   <div>
+*   <sigvelo-sparkline
+*     label="Number of cat treats given per day showing an increasing trend"
+*     data="10 20 17 23 27 22 30 38 44"
+*     curve="natural"
+*     variant="solid"
+*   ></sigvelo-sparkline>
+* </sigvelo-card>
+*
+* <style>
+*   sigvelo-card.sparkline__stat {
+*     max-width: 280px;
+*
+*     &::part(body) {
+*       display: flex;
+*       flex-direction: column;
+*       padding: 0;
+*     }
+*
+*     .description {
+*       font-size: 2.25rem;
+*       font-weight: var(--sigvelo-font-weight-semibold);
+*       line-height: 1.2;
+*       padding: .5rem 1.5rem 0 1.5rem;
+*     }
+*
+*     small {
+*       font-weight: var(--sigvelo-font-weight-normal);
+*       font-size: 0.9375rem;
+*       color: var(--sigvelo-color-text-muted);
+*     }
+*
+*     sigvelo-sparkline {
+*       width: 100%;
+*       height: auto;
+*     }
+*   }
+* </style>
+* ```
+*/
+var SigveloSparkline = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.points = [];
+		this.label = "";
+		this.data = "";
+		this.variant = "gradient";
+		this.curve = "linear";
+	}
+	static {
+		this.styles = [hostStyles, sparkline_styles_default];
+	}
+	/** Returns an SVG path for a linear, point-to-point graph */
+	getLinearPath(coordinates) {
+		return coordinates.length > 0 ? `M ${coordinates[0]} ${coordinates.slice(1).map((coord) => `L ${coord}`).join(" ")}` : "M 0 0";
+	}
+	/** Returns an SVG path for a curved graph */
+	getNaturalPath(coordinates) {
+		if (coordinates.length <= 2) return this.getLinearPath(coordinates);
+		const points = coordinates.map((coord) => {
+			const [x, y] = coord.split(" ").map(Number);
+			return {
+				x,
+				y
+			};
+		});
+		let path = `M ${points[0].x} ${points[0].y}`;
+		for (let i = 0; i < points.length - 1; i++) {
+			const current = points[i];
+			const next = points[i + 1];
+			const controlX1 = current.x + (next.x - current.x) / 3;
+			const controlX2 = current.x + (next.x - current.x) * 2 / 3;
+			path += ` C ${controlX1} ${current.y}, ${controlX2} ${next.y}, ${next.x} ${next.y}`;
+		}
+		return path;
+	}
+	/** Returns an SVG path for a stepped graph */
+	getStepPath(coordinates) {
+		if (coordinates.length <= 1) return this.getLinearPath(coordinates);
+		let path = `M ${coordinates[0]}`;
+		for (let i = 1; i < coordinates.length; i++) {
+			const [prevX] = coordinates[i - 1].split(" ").map(Number);
+			const [currX, currY] = coordinates[i].split(" ").map(Number);
+			const midX = prevX + (currX - prevX) / 2;
+			path += ` H ${midX} V ${currY}`;
+			path += ` H ${currX}`;
+		}
+		return path;
+	}
+	/** Generates the appropriate SVG path based on the desired curve. */
+	getPath(coordinates) {
+		switch (this.curve) {
+			case "natural": return this.getNaturalPath(coordinates);
+			case "step": return this.getStepPath(coordinates);
+			default: return this.getLinearPath(coordinates);
+		}
+	}
+	render() {
+		const viewportPadding = parseFloat(getComputedStyle(this).getPropertyValue("--line-width")) ?? 2;
+		const width = 200;
+		const height = 50;
+		const points = this.data.split(" ").map((n) => parseFloat(n.trim())).filter((n) => !Number.isNaN(n));
+		const viewBoxWidth = Math.max(1, points.length - 1);
+		const maxPoint = Math.max(...points);
+		const viewBoxHeight = Math.max(1, maxPoint) + viewportPadding * 2;
+		const coordinates = points.length > 0 ? points.map((point, index) => {
+			return `${index} ${viewBoxHeight - point - viewportPadding}`;
+		}) : ["0 0"];
+		const mainPath = this.getPath(coordinates);
+		const filledPath = points.length > 1 ? `${mainPath} L ${viewBoxWidth} ${viewBoxHeight} L 0 ${viewBoxHeight} Z` : "";
+		return html`
+      <svg
+        height="${height}px"
+        width="${width}px"
+        viewBox="0 0 ${viewBoxWidth} ${viewBoxHeight}"
+        preserveAspectRatio="none"
+        aria-label=${this.label}
+      >
+        <defs>
+          <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
+            <stop offset="0%" stop-color="var(--fill-color)" stop-opacity="1" />
+            <stop
+              offset="100%"
+              stop-color="var(--fill-color)"
+              stop-opacity="${this.variant === "solid" ? "1" : "0"}"
+            />
+          </linearGradient>
+        </defs>
+        <path
+          d="${filledPath}"
+          stroke="transparent"
+          fill="${this.variant === "solid" ? "var(--fill-color)" : "url(#gradient)"}"
+        />
+        <path
+          d="${mainPath}"
+          stroke-width="var(--line-width)"
+          stroke="var(--line-color)"
+          fill="transparent"
+          vector-effect="non-scaling-stroke"
+        />
+      </svg>
+    `;
+	}
+};
+__decorate([state()], SigveloSparkline.prototype, "points", void 0);
+__decorate([property()], SigveloSparkline.prototype, "label", void 0);
+__decorate([property()], SigveloSparkline.prototype, "data", void 0);
+__decorate([property({ reflect: true })], SigveloSparkline.prototype, "variant", void 0);
+__decorate([property({ reflect: true })], SigveloSparkline.prototype, "trend", void 0);
+__decorate([property({ reflect: true })], SigveloSparkline.prototype, "curve", void 0);
+customElements.define("sigvelo-sparkline", SigveloSparkline);
+//#endregion
+export { SigveloSparkline as t };

package/dist/sparkline-DlCIt81-.d.ts

@@ -0,0 +1,235 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/sparkline/sparkline.d.ts
+/**
+ * <sigvelo-sparkline>
+ *
+ * @summary Shows at-a-glance trends in a small, inline chart that fits within text or tables.
+ * @tag sigvelo-sparkline
+ * @documentation https://design-system.sigvelo.com/docs/components/sparkline
+ * @status stable
+ * @since 1.0
+ *
+ * @cssproperty [--fill-color] - The start color of the gradient fill
+ * @cssproperty [--gradient-stop-color] - The end color of the gradient fill
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-sparkline
+ *   label="Number of cat treats given per day showing an increasing trend"
+ *   data="10 20 40 25 35 25 60 50 70"
+ *   style="height: 40px;"
+ * ></sigvelo-sparkline>
+ * ```
+ *
+ * **Note:** In the same way that images require `alt` text, you should add a label to every sparkline. The label won't be displayed, but it will be announced by assistive devices.
+ *
+ *
+ *
+ * By default, sparklines are styled with a `1em` height to fit properly within headings and text.
+ *
+ * ```html
+ * <p>
+ *   This week's website traffic
+ *   <sigvelo-sparkline
+ *     label="Website traffic showing a slightly positive trend"
+ *     data="10 16 12 18 30"
+ *   ></sigvelo-sparkline>
+ *   has slightly increased.
+ * </p>
+ * ```
+ *
+ * To set a specific size, adjust the `width`, `height`, or `aspect-ratio` CSS properties.
+ *
+ * ```html
+ * <sigvelo-sparkline
+ *   label="Monthly cat toy purchases showing increased spending over time"
+ *   data="10 20 40 25 35 25 60 50 70"
+ *   style="width: 100%; height: auto;"
+ * ></sigvelo-sparkline>
+ * ```
+ *
+ *
+ * By default, sparklines render with a gradient fill. Set the `variant` attribute to `solid` or `line` to render a solid fill or a simple line instead.
+ *
+ * ```html
+ * <sigvelo-sparkline
+ *   variant="gradient"
+ *   label="Weekly cat food consumption showing typical feeding patterns"
+ *   data="10 20 40 25 35 25 60 50 70"
+ *   style="height: 40px;"
+ *   trend="auto"
+ * ></sigvelo-sparkline>
+ *
+ * <sigvelo-sparkline
+ *   variant="solid"
+ *   label="Weekly cat food consumption showing typical feeding patterns"
+ *   data="10 20 40 25 35 25 60 50 70"
+ *   style="height: 40px;"
+ *   trend="auto"
+ * ></sigvelo-sparkline>
+ *
+ * <sigvelo-sparkline
+ *   variant="line"
+ *   label="Weekly cat food consumption showing typical feeding patterns"
+ *   data="10 20 40 25 35 25 60 50 70"
+ *   style="height: 40px;"
+ *   trend="auto"
+ * ></sigvelo-sparkline>
+ * ```
+ *
+ *
+ * Set the `curve` attribute to `linear`, `natural`, or `step` to change the style of the curve.
+ *
+ * ```html
+ * <sigvelo-sparkline
+ *   label="Hourly cat meows tracked throughout the day using a linear curve"
+ *   curve="linear"
+ *   data="10 20 40 25 35 25 60 50 70"
+ *   style="height: 40px;"
+ * ></sigvelo-sparkline>
+ *
+ * <sigvelo-sparkline
+ *   label="Hourly cat meows tracked throughout the day using a natural curve"
+ *   curve="natural"
+ *   data="10 20 40 25 35 25 60 50 70"
+ *   style="height: 40px;"
+ * ></sigvelo-sparkline>
+ *
+ * <sigvelo-sparkline
+ *   label="Hourly cat meows tracked throughout the day using a step curve"
+ *   curve="step"
+ *   data="10 20 40 25 35 25 60 50 70"
+ *   style="height: 40px;"
+ * ></sigvelo-sparkline>
+ * ```
+ *
+ *
+ * Set the `trend` attribute to `negative`, `neutral`, or `positive` to visually indicate a trend.
+ *
+ * ```html
+ * <!-- Negative trend -->
+ * <sigvelo-sparkline
+ *   label="Decreasing trend in scratching post usage"
+ *   data="70 75 60 50 55 35 25"
+ *   trend="negative"
+ *   style="height: 40px;"
+ * ></sigvelo-sparkline>
+ *
+ * <!-- Neutral trend -->
+ * <sigvelo-sparkline
+ *   label="Stable pattern of cat litter box visits"
+ *   data="45 50 42 48 44 46 45"
+ *   trend="neutral"
+ *   style="height: 40px;"
+ * ></sigvelo-sparkline>
+ *
+ * <!-- Positive trend -->
+ * <sigvelo-sparkline
+ *   label="Increasing frequency of purring episodes"
+ *   data="25 35 30 50 45 65 75"
+ *   trend="positive"
+ *   style="height: 40px;"
+ * ></sigvelo-sparkline>
+ * ```
+ *
+ *
+ * Use the `--fill-color`, `--line-color`, and `--line-width` custom properties to change the sparkline's styles.
+ *
+ * ```html
+ * <sigvelo-sparkline
+ *   label="Weekly likes for cat memes growing in popularity"
+ *   data="10 20 40 25 35 25 60 50 70"
+ *   style="
+ *     height: 60px;
+ *     --fill-color: deeppink;
+ *     --line-color: deeppink;
+ *     --line-width: 3px;
+ *   "
+ * ></sigvelo-sparkline>
+ * ```
+ *
+ * Combine sparklines with cards and number tickers for an elegant way to display stats.
+ *
+ * ```html
+ * <sigvelo-card class="sparkline__stat">
+ *   <div class="description">
+ *     <small>Revenue</small><br>
+ *     $<sigvelo-number-ticker end-value="12345" start-on-view></sigvelo-number-ticker>
+ *   <div>
+ *   <sigvelo-sparkline
+ *     label="Number of cat treats given per day showing an increasing trend"
+ *     data="10 20 17 23 27 22 30 38 44"
+ *     curve="natural"
+ *     variant="solid"
+ *   ></sigvelo-sparkline>
+ * </sigvelo-card>
+ *
+ * <style>
+ *   sigvelo-card.sparkline__stat {
+ *     max-width: 280px;
+ *
+ *     &::part(body) {
+ *       display: flex;
+ *       flex-direction: column;
+ *       padding: 0;
+ *     }
+ *
+ *     .description {
+ *       font-size: 2.25rem;
+ *       font-weight: var(--sigvelo-font-weight-semibold);
+ *       line-height: 1.2;
+ *       padding: .5rem 1.5rem 0 1.5rem;
+ *     }
+ *
+ *     small {
+ *       font-weight: var(--sigvelo-font-weight-normal);
+ *       font-size: 0.9375rem;
+ *       color: var(--sigvelo-color-text-muted);
+ *     }
+ *
+ *     sigvelo-sparkline {
+ *       width: 100%;
+ *       height: auto;
+ *     }
+ *   }
+ * </style>
+ * ```
+ */
+declare class SigveloSparkline extends SigveloElement {
+  static styles: CSSResultGroup;
+  points: number[];
+  /**
+   * An accessible label for the sparkline. This will be read by screen readers for users who can't see the chart, so
+   * make sure to describe it appropriately.
+   */
+  label: string;
+  /**
+   * A space-separated list of positive values to show in the sparkline, e.g. "10 25 18 30". At least two values are
+   * required to generate a chart.
+   */
+  data: string;
+  /** Determines the sparkline's variant. */
+  variant: "gradient" | "line" | "solid";
+  /** Draws the component with colors to visually indicate the specified trend. */
+  trend: "positive" | "negative" | "neutral";
+  /** The interpolation method used to connect data points on the line. */
+  curve: "linear" | "natural" | "step";
+  /** Returns an SVG path for a linear, point-to-point graph */
+  private getLinearPath;
+  /** Returns an SVG path for a curved graph */
+  private getNaturalPath;
+  /** Returns an SVG path for a stepped graph */
+  private getStepPath;
+  /** Generates the appropriate SVG path based on the desired curve. */
+  private getPath;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-sparkline": SigveloSparkline;
+  }
+}
+//#endregion
+export { SigveloSparkline as t };