@mcp-b/web-components 0.2.0

package/dist/meter-BIDyjwFp.js

@@ -0,0 +1,155 @@
+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";
+import { clamp } from "@mcp-b/wc-support/utilities/math";
+//#region src/components/meter/meter.styles.ts
+var meter_styles_default = css`
+  :host {
+    --track-color: var(--sigvelo-color-neutral-bg-subtle);
+    --track-size: 0.5rem;
+
+    display: block;
+  }
+
+  :host([color="primary"]) {
+    --indicator-color: var(--sigvelo-color-primary-bg);
+  }
+
+  :host([color="success"]) {
+    --indicator-color: var(--sigvelo-color-success-bg);
+  }
+
+  :host([color="warning"]) {
+    --indicator-color: var(--sigvelo-color-warning-bg);
+  }
+
+  :host([color="destructive"]) {
+    --indicator-color: var(--sigvelo-color-danger-bg);
+  }
+
+  #label {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-block-end: 0.5em;
+    font-size: 0.875em;
+    font-weight: var(--sigvelo-font-weight-semibold);
+    color: var(--sigvelo-color-text);
+
+    ::slotted([slot="value"]) {
+      font-variant-numeric: tabular-nums;
+      color: var(--sigvelo-color-text-muted);
+    }
+  }
+
+  #track {
+    width: 100%;
+    height: var(--track-size);
+    overflow: hidden;
+    border-radius: var(--sigvelo-radius-full);
+    background-color: var(--track-color);
+  }
+
+  #indicator {
+    width: calc(var(--percentage, 0) * 1%);
+    height: 100%;
+    border-radius: inherit;
+    background-color: var(--indicator-color);
+    transition: var(--sigvelo-motion-duration-layout) width ease;
+  }
+`;
+//#endregion
+//#region src/components/meter/meter.ts
+/**
+* <sigvelo-meter>
+*
+* @summary Displays a static gauge representing a value within a known range.
+* @tag sigvelo-meter
+* @status experimental
+* @since 1.0
+*
+* @slot - Optional label content displayed above the meter.
+* @slot value - Optional formatted value displayed to the right of the label.
+*
+* @cssproperty [--track-color=var(--sigvelo-color-neutral-bg-subtle)] - The color of the meter's track.
+* @cssproperty [--track-size=0.5rem] - The height of the meter track.
+* @cssproperty [--indicator-color] - The color of the meter's indicator. Defaults to the color intent.
+*
+* @csspart track - The meter's track element.
+* @csspart indicator - The meter's value indicator.
+* @csspart label - The container for the label and value.
+*
+* @example Default
+* ```html
+* <sigvelo-meter label="Disk usage" value="72" style="width: 300px;">
+*   <span slot="value">72%</span>
+* </sigvelo-meter>
+* ```
+*
+* @example Color intents
+* ```html
+* <div style="display: flex; flex-direction: column; gap: 1rem; width: 300px;">
+*   <sigvelo-meter label="CPU" value="25" color="primary">
+*     <span slot="value">25%</span>
+*   </sigvelo-meter>
+*   <sigvelo-meter label="Memory" value="55" color="success">
+*     <span slot="value">55%</span>
+*   </sigvelo-meter>
+*   <sigvelo-meter label="Disk" value="78" color="warning">
+*     <span slot="value">78%</span>
+*   </sigvelo-meter>
+*   <sigvelo-meter label="Network" value="92" color="destructive">
+*     <span slot="value">92%</span>
+*   </sigvelo-meter>
+* </div>
+* ```
+*/
+var SigveloMeter = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.min = 0;
+		this.max = 100;
+		this.value = 0;
+		this.color = "primary";
+	}
+	static {
+		this.styles = [hostStyles, meter_styles_default];
+	}
+	/** The percentage of the meter filled (readonly). */
+	get percentage() {
+		return (this.value - this.min) / (this.max - this.min) * 100;
+	}
+	firstUpdated() {
+		this.setAttribute("role", "meter");
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("label")) this.setAttribute("aria-label", this.label);
+		if (changedProperties.has("min") || changedProperties.has("max") || changedProperties.has("value")) {
+			this.style.setProperty("--percentage", `${clamp(this.percentage, 0, 100)}`);
+			this.setAttribute("aria-valuemin", String(this.min));
+			this.setAttribute("aria-valuemax", String(this.max));
+			this.setAttribute("aria-valuenow", String(this.value));
+		}
+	}
+	render() {
+		return html`
+      <div id="label" part="label">
+        <slot>${this.label}</slot>
+        <slot name="value"></slot>
+      </div>
+      <div id="track" part="track">
+        <div id="indicator" part="indicator"></div>
+      </div>
+    `;
+	}
+};
+__decorate([property()], SigveloMeter.prototype, "label", void 0);
+__decorate([property({ type: Number })], SigveloMeter.prototype, "min", void 0);
+__decorate([property({ type: Number })], SigveloMeter.prototype, "max", void 0);
+__decorate([property({ type: Number })], SigveloMeter.prototype, "value", void 0);
+__decorate([property({ reflect: true })], SigveloMeter.prototype, "color", void 0);
+customElements.define("sigvelo-meter", SigveloMeter);
+//#endregion
+export { SigveloMeter as t };

package/dist/metric-CjlLq_VA.d.ts

@@ -0,0 +1,36 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/metric/metric.d.ts
+type MetricFormat = "number" | "compact" | "currency" | "percent";
+/**
+ * <sigvelo-metric>
+ *
+ * @summary Displays a labeled key metric with consistent number formatting.
+ * @tag sigvelo-metric
+ * @documentation https://design-system.sigvelo.com/docs/components/metric
+ * @status stable
+ * @since 1.0
+ *
+ * @csspart label - The metric label.
+ * @csspart value - The formatted metric value.
+ */
+declare class SigveloMetric extends SigveloElement {
+  static styles: CSSResultGroup;
+  /** The visible metric label. */
+  label: string;
+  /** The metric value. Numbers are formatted according to `format`. */
+  value: string | number | null;
+  /** Number formatting applied to numeric values. */
+  format: MetricFormat;
+  /** ISO 4217 currency code used when `format` is `currency`. */
+  currency: string;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-metric": SigveloMetric;
+  }
+}
+//#endregion
+export { SigveloMetric as n, MetricFormat as t };

package/dist/metric-DbuOcDp_.js

@@ -0,0 +1,86 @@
+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/metric/metric.styles.ts
+var metric_styles_default = css`
+  :host {
+    display: block;
+    min-inline-size: 9rem;
+    padding: var(--sigvelo-spacing-4);
+    border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+      var(--sigvelo-color-neutral-border-subtle);
+    border-radius: var(--sigvelo-radius-lg);
+    background: var(--sigvelo-color-surface);
+  }
+
+  #label {
+    color: var(--sigvelo-color-text-muted);
+    font-size: var(--sigvelo-text-sm);
+  }
+
+  #value {
+    margin-block-start: var(--sigvelo-spacing-1);
+    color: var(--sigvelo-color-text);
+    font-size: 1.75rem;
+    font-weight: var(--sigvelo-font-weight-semibold);
+    line-height: 1.15;
+  }
+`;
+//#endregion
+//#region src/components/metric/metric.ts
+function formatValue(value, format, currency) {
+	if (value === null || value === "") return "—";
+	if (typeof value === "string") return value;
+	if (format === "currency") return new Intl.NumberFormat(void 0, {
+		style: "currency",
+		currency,
+		maximumFractionDigits: 2
+	}).format(value);
+	if (format === "percent") return new Intl.NumberFormat(void 0, {
+		style: "percent",
+		maximumFractionDigits: 1
+	}).format(value);
+	return new Intl.NumberFormat(void 0, {
+		notation: format === "compact" ? "compact" : "standard",
+		maximumFractionDigits: 2
+	}).format(value);
+}
+/**
+* <sigvelo-metric>
+*
+* @summary Displays a labeled key metric with consistent number formatting.
+* @tag sigvelo-metric
+* @documentation https://design-system.sigvelo.com/docs/components/metric
+* @status stable
+* @since 1.0
+*
+* @csspart label - The metric label.
+* @csspart value - The formatted metric value.
+*/
+var SigveloMetric = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = "";
+		this.value = null;
+		this.format = "number";
+		this.currency = "USD";
+	}
+	static {
+		this.styles = [hostStyles, metric_styles_default];
+	}
+	render() {
+		return html`
+      <div id="label" part="label">${this.label}</div>
+      <div id="value" part="value">${formatValue(this.value, this.format, this.currency)}</div>
+    `;
+	}
+};
+__decorate([property()], SigveloMetric.prototype, "label", void 0);
+__decorate([property()], SigveloMetric.prototype, "value", void 0);
+__decorate([property({ reflect: true })], SigveloMetric.prototype, "format", void 0);
+__decorate([property()], SigveloMetric.prototype, "currency", void 0);
+customElements.define("sigvelo-metric", SigveloMetric);
+//#endregion
+export { SigveloMetric as t };

package/dist/metric-grid-C2Pb0Zl3.js

@@ -0,0 +1,37 @@
+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/metric-grid/metric-grid.styles.ts
+var metric_grid_styles_default = css`
+  :host {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(var(--metric-min-width, 9rem), 1fr));
+    gap: var(--sigvelo-spacing-3);
+    min-inline-size: 0;
+  }
+`;
+//#endregion
+//#region src/components/metric-grid/metric-grid.ts
+/**
+* <sigvelo-metric-grid>
+*
+* @summary Arranges metrics in a responsive grid.
+* @tag sigvelo-metric-grid
+* @documentation https://design-system.sigvelo.com/docs/components/metric-grid
+* @status stable
+* @since 1.0
+*
+* @slot - One or more `sigvelo-metric` elements.
+* @cssproperty [--metric-min-width=9rem] - Minimum width of each grid item.
+*/
+var SigveloMetricGrid = class extends SigveloElement {
+	static {
+		this.styles = [hostStyles, metric_grid_styles_default];
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+};
+customElements.define("sigvelo-metric-grid", SigveloMetricGrid);
+//#endregion
+export { SigveloMetricGrid as t };

package/dist/metric-grid-C5Xbb1_0.d.ts

@@ -0,0 +1,27 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/metric-grid/metric-grid.d.ts
+/**
+ * <sigvelo-metric-grid>
+ *
+ * @summary Arranges metrics in a responsive grid.
+ * @tag sigvelo-metric-grid
+ * @documentation https://design-system.sigvelo.com/docs/components/metric-grid
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - One or more `sigvelo-metric` elements.
+ * @cssproperty [--metric-min-width=9rem] - Minimum width of each grid item.
+ */
+declare class SigveloMetricGrid extends SigveloElement {
+  static styles: CSSResultGroup;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-metric-grid": SigveloMetricGrid;
+  }
+}
+//#endregion
+export { SigveloMetricGrid as t };

package/dist/mutation-observer-BmrZ-GER.d.ts

@@ -0,0 +1,326 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/mutation-observer/mutation-observer.d.ts
+/**
+ * <sigvelo-mutation-observer>
+ *
+ * @summary Watches child elements and dispatches an event when they mutate.
+ * @tag sigvelo-mutation-observer
+ * @documentation https://design-system.sigvelo.com/docs/components/mutation
+ * @status stable
+ * @since 1.0
+ *
+ * @slot - The elements to observe. All direct children of the host element are observed, but not nested elements.
+ *
+ * @event sigvelo-mutation - Emitted when a slotted element is mutated. The `event.detail.record` property contains a
+ *  [`MutationRecord`](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) with information about
+ *  the mutation.
+ *
+ * @example Default
+ * The component uses a MutationObserver to monitor when its direct children are added, removed, or modified. A `sigvelo-mutation` event is dispatched for each observed change, providing detailed information about what was mutated.
+ *
+ * The component is styled with `display: contents`, allowing you to easily apply flex and grid layouts to the containing element without the component interfering.
+ *
+ * ```html
+ * <div id="mutation__overview">
+ *   <sigvelo-mutation-observer child-list>
+ *     <div class="box">1 <button aria-label="Remove">✕</button></div>
+ *     <div class="box">2 <button aria-label="Remove">✕</button></div>
+ *     <div class="box">3 <button aria-label="Remove">✕</button></div>
+ *   </sigvelo-mutation-observer>
+ * </div>
+ *
+ * <sigvelo-button>Add box</sigvelo-button>
+ *
+ * <small>Add and remove some items, then open the console to inspect the output.</small>
+ *
+ * <script>
+ *   const container = document.getElementById('mutation__overview');
+ *   const mutationObserver = container.querySelector('sigvelo-mutation-observer');
+ *   const appendButton = container.nextElementSibling;
+ *   let count = mutationObserver.querySelectorAll('.box').length;
+ *
+ *   // Listen for mutations
+ *   mutationObserver.addEventListener('sigvelo-mutation', event => {
+ *     console.log(event.detail.record);
+ *   });
+ *
+ *   // Remove a card
+ *   mutationObserver.addEventListener('click', event => {
+ *     const button = event.target.closest('button');
+ *     const box = button?.closest('.box');
+ *     box?.remove();
+ *   });
+ *
+ *   // Append a box
+ *   appendButton.addEventListener('click', () => {
+ *     const html = `<div class="box">${++count} <button aria-label="Remove">✕</button></div>`;
+ *     mutationObserver.insertAdjacentHTML('beforeEnd', html);
+ *   });
+ * </script>
+ *
+ * <style>
+ *   #mutation__overview {
+ *     display: flex;
+ *     flex-wrap: wrap;
+ *     gap: 1.5rem;
+ *     min-height: 5rem;
+ *     margin-block-end: 1rem;
+ *
+ *     .box {
+ *       display: flex;
+ *       align-items: center;
+ *       justify-content: center;
+ *       position: relative;
+ *       min-width: 5rem;
+ *       height: 5rem;
+ *       border-radius: var(--sigvelo-radius-md);
+ *       background-color: var(--sigvelo-color-neutral-bg-subtle);
+ *       box-shadow: var(--sigvelo-elevation-hairline);
+ *       text-align: center;
+ *       padding: 1rem;
+ *
+ *       button {
+ *         display: flex;
+ *         align-items: center;
+ *         justify-content: center;
+ *         background-color: var(--sigvelo-color-neutral-bg-strong);
+ *         color: var(--sigvelo-color-neutral-text-on-strong);
+ *         font-size: .75em;
+ *         padding: 0;
+ *         width: 1.25rem;
+ *         height: 1.25rem;
+ *         min-height: 0;
+ *         position: absolute;
+ *         top: -0.625rem;
+ *         right: -0.625rem;
+ *         border-radius: var(--sigvelo-radius-circle);
+ *       }
+ *     }
+ *
+ *     ~ small {
+ *       display: block;
+ *       margin-block-start: 1rem;
+ *     }
+ *   }
+ * </style>
+ * ```
+ *
+ * **Note:** Remember that only direct children of the host element are observed. Nested elements will not trigger mutation events unless the `subtree` attribute is enabled.
+ *
+ * @example Providing content
+ * Slot one or more elements into the mutation observer and listen for the `sigvelo-mutation` event. The event includes `event.detail.record`, which is a `MutationRecord` object that corresponds to the mutated element.
+ *
+ * In its simplest form, a mutation observer can be used like this.
+ *
+ * ```html
+ * <sigvelo-mutation-observer child-list>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </sigvelo-mutation-observer>
+ *
+ * <script>
+ *   const mutationObserver = document.querySelector('sigvelo-mutation-observer');
+ *
+ *   // Listen for mutations
+ *   mutationObserver.addEventListener('sigvelo-mutation', event => {
+ *     console.log(event.detail.record); // MutationRecord
+ *   });
+ * </script>
+ * ```
+ *
+ * @example Observing attribute changes
+ * Use the `attr` attribute to monitor changes to element attributes. You can optionally specify `attr-old-value` to record the previous attribute value.
+ *
+ * ```html
+ * <sigvelo-mutation-observer attr attr-old-value>
+ *   <div id="target" class="example">Watch my attributes</div>
+ * </sigvelo-mutation-observer>
+ *
+ * <script>
+ *   const observer = document.querySelector('sigvelo-mutation-observer');
+ *   const target = observer.querySelector('#target');
+ *
+ *   observer.addEventListener('sigvelo-mutation', event => {
+ *     const record = event.detail.record;
+ *     console.log(`Attribute "${record.attributeName}" changed`);
+ *     console.log(`Old value: ${record.oldValue}`);
+ *     console.log(`New value: ${record.target.getAttribute(record.attributeName)}`);
+ *   });
+ *
+ *   // Change an attribute to trigger the observer
+ *   target.className = 'modified';
+ * </script>
+ * ```
+ *
+ * @example Filtering specific attributes
+ * Limit observations to specific attributes using the `attr-filter` attribute. Separate multiple attribute names with spaces.
+ *
+ * ```html
+ * <sigvelo-mutation-observer attr attr-filter="class data-state">
+ *   <div class="example" data-state="active" id="example">
+ *     Only class and data-state changes are observed
+ *   </div>
+ * </sigvelo-mutation-observer>
+ *
+ * <script>
+ *   const observer = document.querySelector('sigvelo-mutation-observer');
+ *   const target = observer.querySelector('#example');
+ *
+ *   observer.addEventListener('sigvelo-mutation', event => {
+ *     console.log(`Observed attribute: ${event.detail.record.attributeName}`);
+ *   });
+ *
+ *   // These will trigger events
+ *   target.className = 'modified';
+ *   target.setAttribute('data-state', 'inactive');
+ *
+ *   // This will NOT trigger an event
+ *   target.id = 'new-id';
+ * </script>
+ * ```
+ *
+ * @example Observing text content changes
+ * Use the `character-data` attribute to monitor changes to text nodes. The `character-data-old-value` attribute records the previous text content.
+ *
+ * ```html
+ * <sigvelo-mutation-observer character-data character-data-old-value subtree>
+ *   <p id="text-content">Original text content</p>
+ * </sigvelo-mutation-observer>
+ *
+ * <script>
+ *   const observer = document.querySelector('sigvelo-mutation-observer');
+ *   const paragraph = observer.querySelector('#text-content');
+ *
+ *   observer.addEventListener('sigvelo-mutation', event => {
+ *     const record = event.detail.record;
+ *     console.log(`Text changed from "${record.oldValue}" to "${record.target.textContent}"`);
+ *   });
+ *
+ *   // Change text content to trigger the observer
+ *   paragraph.textContent = 'Updated text content';
+ * </script>
+ * ```
+ *
+ * @example Observing nested elements
+ * By default, only direct children are observed. Add the `subtree` attribute to observe changes in nested elements as well.
+ *
+ * ```html
+ * <sigvelo-mutation-observer child-list subtree>
+ *   <div class="container">
+ *     <div class="nested">
+ *       <span>Nested content</span>
+ *     </div>
+ *   </div>
+ * </sigvelo-mutation-observer>
+ *
+ * <script>
+ *   const observer = document.querySelector('sigvelo-mutation-observer');
+ *   const nested = observer.querySelector('.nested');
+ *
+ *   observer.addEventListener('sigvelo-mutation', event => {
+ *     console.log('Mutation detected in subtree:', event.detail.record);
+ *   });
+ *
+ *   // This will trigger the observer even though span is deeply nested
+ *   nested.innerHTML = '<span>New nested content</span>';
+ * </script>
+ * ```
+ *
+ * @example Combining multiple observation types
+ * You can observe multiple types of mutations simultaneously by combining attributes.
+ *
+ * ```html
+ * <sigvelo-mutation-observer
+ *   child-list
+ *   attr
+ *   character-data
+ *   subtree
+ *   attr-old-value
+ *   character-data-old-value
+ * >
+ *   <div class="comprehensive-example">
+ *     <p>This observer watches everything</p>
+ *   </div>
+ * </sigvelo-mutation-observer>
+ *
+ * <script>
+ *   const observer = document.querySelector('sigvelo-mutation-observer');
+ *
+ *   observer.addEventListener('sigvelo-mutation', event => {
+ *     const record = event.detail.record;
+ *
+ *     switch (record.type) {
+ *       case 'childList':
+ *         console.log('Child nodes changed');
+ *         break;
+ *       case 'attributes':
+ *         console.log(`Attribute "${record.attributeName}" changed`);
+ *         break;
+ *       case 'characterData':
+ *         console.log('Text content changed');
+ *         break;
+ *     }
+ *   });
+ * </script>
+ * ```
+ *
+ * @example Disabling the observer
+ * Use the `disabled` attribute to temporarily stop observing mutations without removing the component.
+ *
+ * ```html
+ * <sigvelo-mutation-observer child-list disabled>
+ *   <div>Changes to this content won't be observed</div>
+ * </sigvelo-mutation-observer>
+ *
+ * <script>
+ *   const observer = document.querySelector('sigvelo-mutation-observer');
+ *
+ *   // Re-enable observation
+ *   observer.disabled = false;
+ *
+ *   // Disable observation again
+ *   observer.disabled = true;
+ * </script>
+ * ```
+ */
+declare class SigveloMutationObserver extends SigveloElement {
+  static styles: CSSResultGroup;
+  private mutationObserver;
+  /** Disables the mutation observer. */
+  disabled: boolean;
+  /** Indicates whether attributes should be observed. */
+  attr: boolean;
+  /** Indicates whether attribute old value should be recorded. */
+  attrOldValue: boolean;
+  /**
+   * One or more attributes to limit observations to, separate by a space. When not specified, all attributes are
+   * observed.
+   */
+  attrFilter: string;
+  /** Indicates whether mutations to target's children are to be observed. */
+  childList: boolean;
+  /** Indicates whether mutations to target's descendants are to be observed. */
+  subtree: boolean;
+  /** Indicates whether character data should be observed. */
+  characterData: boolean;
+  /** Indicates whether character data old value should be recorded. */
+  characterDataOldValue: boolean;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  /** Starts or restarts the mutation observer. */
+  private startObserver;
+  /** Stops the mutation observer. */
+  private stopObserver;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-mutation-observer": SigveloMutationObserver;
+  }
+}
+//#endregion
+export { SigveloMutationObserver as t };