@mcp-b/web-components 0.2.0

package/dist/listbox-item-CwD9s3VY.js

@@ -0,0 +1,135 @@
+import "./icon-BPVkNsY4.js";
+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/listbox-item/listbox-item.styles.ts
+var listbox_item_styles_default = css`
+  :host {
+    display: block;
+    padding: 0.5em 0.9375em;
+    /* Use a border instead of gap to prevent dead zones when clicking in the listbox */
+    border-bottom: var(--sigvelo-border-width) var(--sigvelo-border-style)
+      var(--sigvelo-color-surface);
+    border-radius: var(--sigvelo-radius-sm);
+    background-color: var(--sigvelo-color-surface);
+    color: var(--sigvelo-color-text);
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  :host(:last-of-type) {
+    border-bottom: none;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  /* All selected items when listbox is focused - using the listbox-focused state */
+  :host(:state(controller-focused):state(selected)) {
+    background-color: var(--sigvelo-color-primary-bg-muted);
+    color: var(--sigvelo-color-primary-text-on-subtle);
+  }
+
+  /* All selected items when listbox is not focused */
+  :host(:state(selected):not(:state(controller-focused))) {
+    background-color: var(--sigvelo-color-neutral-bg-muted);
+    color: var(--sigvelo-color-neutral-text-on-subtle);
+  }
+
+  /* Show the current active item for keyboard users when the listbox is focused and the item isn't selected */
+  :host(
+    [aria-current="true"]:state(controller-focused):not(
+      :state(selected),
+      :state(controller-readonly)
+    )
+  ) {
+    background-color: var(--sigvelo-color-neutral-bg-subtle);
+    color: var(--sigvelo-color-neutral-text-on-subtle);
+  }
+
+  /* Hover state */
+  @media (hover: hover) {
+    :host(:not(:state(selected), :state(controller-disabled), :state(controller-readonly)):hover) {
+      background-color: var(--sigvelo-color-neutral-bg-subtle);
+      color: var(--sigvelo-color-neutral-text-on-subtle);
+    }
+  }
+
+  /* Readonly state */
+  :host(:state(controller-readonly)) {
+    cursor: default;
+  }
+
+  /* Disabled state */
+  :host(:state(disabled)) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+//#endregion
+//#region src/components/listbox-item/listbox-item.ts
+/**
+* <sigvelo-listbox-item>
+*
+* @summary Represents individual choices within a listbox.
+* @tag sigvelo-listbox-item
+* @documentation https://design-system.sigvelo.com/docs/components/listbox-item
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-icon
+*
+* @slot - The listbox item's label. For plain-text labels, you can use the `label` attribute instead.
+*
+* @cssstate selected - Applied when the listbox item is selected.
+* @cssstate disabled - Applied when the listbox item is disabled.
+* @cssstate controller-disabled - Applied when the listbox controller is disabled.
+* @cssstate controller-focused - Applied when the listbox controller focused.
+* @cssstate controller-readonly - Applied when the listbox controller is readonly.
+*
+* @example Default
+* This component must only be used within a listbox. You can see some examples of listbox items being used in the listbox documentation.
+*/
+var SigveloListboxItem = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.value = "";
+		this.selected = false;
+		this.disabled = false;
+	}
+	static {
+		this.styles = [hostStyles, listbox_item_styles_default];
+	}
+	firstUpdated() {
+		this.setAttribute("role", "option");
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("selected")) {
+			this.setAttribute("aria-selected", this.selected ? "true" : "false");
+			this.customStates.set("selected", this.selected);
+		}
+		if (changedProperties.has("disabled")) {
+			this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+			this.customStates.set("disabled", this.disabled);
+			if (this.selected && this.disabled) this.closest("sigvelo-listbox")?.resetRovingTabIndex();
+		}
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property()], SigveloListboxItem.prototype, "label", void 0);
+__decorate([property()], SigveloListboxItem.prototype, "description", void 0);
+__decorate([property()], SigveloListboxItem.prototype, "value", void 0);
+__decorate([property({ type: Boolean })], SigveloListboxItem.prototype, "selected", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloListboxItem.prototype, "disabled", void 0);
+customElements.define("sigvelo-listbox-item", SigveloListboxItem);
+//#endregion
+export { SigveloListboxItem as t };

package/dist/listbox-item-DQEJWp4Z.d.ts

@@ -0,0 +1,53 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/listbox-item/listbox-item.d.ts
+/**
+ * <sigvelo-listbox-item>
+ *
+ * @summary Represents individual choices within a listbox.
+ * @tag sigvelo-listbox-item
+ * @documentation https://design-system.sigvelo.com/docs/components/listbox-item
+ * @status stable
+ * @since 1.0
+ *
+ * @dependency sigvelo-icon
+ *
+ * @slot - The listbox item's label. For plain-text labels, you can use the `label` attribute instead.
+ *
+ * @cssstate selected - Applied when the listbox item is selected.
+ * @cssstate disabled - Applied when the listbox item is disabled.
+ * @cssstate controller-disabled - Applied when the listbox controller is disabled.
+ * @cssstate controller-focused - Applied when the listbox controller focused.
+ * @cssstate controller-readonly - Applied when the listbox controller is readonly.
+ *
+ * @example Default
+ * This component must only be used within a listbox. You can see some examples of listbox items being used in the listbox documentation.
+ */
+declare class SigveloListboxItem extends SigveloElement {
+  static styles: CSSResultGroup;
+  /**
+   * The listbox item's label. If you need to provide HTML in the label, use the `label` slot instead.
+   */
+  label: string;
+  /**
+   * The listbox item's description. If you need to provide HTML in the description, use the `description` slot instead.
+   */
+  description: string;
+  /** The listbox item's value. */
+  value: string;
+  /** The listbox item's selected state. */
+  selected: boolean;
+  /** Disables the listbox item. */
+  disabled: boolean;
+  firstUpdated(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-listbox-item": SigveloListboxItem;
+  }
+}
+//#endregion
+export { SigveloListboxItem as t };

package/dist/localize-322EtXNX.d.ts

@@ -0,0 +1,66 @@
+import { BaseTranslation, BaseTranslation as BaseTranslation$1, LocalizeController, LocalizeController as LocalizeController$1, registerDefaultTranslation, registerTranslation, update } from "@mcp-b/wc-support";
+
+//#region src/utilities/localize.d.ts
+/** All translatable terms used by the Sigvelo component library. */
+interface Translation extends BaseTranslation {
+  breadcrumbs: string;
+  carousel: string;
+  clearEntry: string;
+  close: string;
+  collapse: string;
+  colorValue: string;
+  copied: string;
+  copyToClipboard: string;
+  decrease: string;
+  disabled: string;
+  dragFileHereOrChooseFromFolder: string;
+  dragFilesHereOrChooseFromFolder: string;
+  error: string;
+  expand: string;
+  feed: string;
+  firstPage: string;
+  hidePassword: string;
+  hide: string;
+  hue: string;
+  increase: string;
+  itemAdded: (item: string) => string;
+  itemRemoved: (item: string) => string;
+  itemSelected: (item: string) => string;
+  jumpBackward: string;
+  jumpForward: string;
+  lastPage: string;
+  multipleSelectionsAllowed: string;
+  next: string;
+  noResultsFound: string;
+  numberOfTotal: (number: number | string, total: number | string) => string;
+  opacity: string;
+  pageNumber: (number: number | string) => string;
+  pagination: string;
+  percentLuminosity: (percentage: string) => string;
+  percentSaturation: (percentage: string) => string;
+  pleaseSelectAnOption: string;
+  pressSpaceForOneSecondToActivate: string;
+  previous: string;
+  loading: string;
+  remove: string;
+  removeItem: (item: string) => string;
+  resize: string;
+  resultsAvailable: (count: number) => string;
+  scrollableRegion: string;
+  selectAColorFromTheScreen: string;
+  selected: string;
+  share: string;
+  showPassword: string;
+  show: string;
+  showingNumberOfTotalItems: (number: number | string, total: number) => string;
+  showingAllNumberItems: (number: number | string) => string;
+  toggleNavigation: string;
+  useArrowKeysToNavigateEnterToSelect: string;
+  visualComparisonSlider: string;
+  zoomIn: string;
+  zoomOut: string;
+}
+/** `LocalizeController` pre-typed with the Sigvelo component library translations. */
+declare class Localize extends LocalizeController<Translation> {}
+//#endregion
+export { registerDefaultTranslation as a, Translation as i, Localize as n, registerTranslation as o, LocalizeController$1 as r, update as s, BaseTranslation$1 as t };

package/dist/lorem-ipsum-B2x3V-v8.js

@@ -0,0 +1,198 @@
+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 { seededNumberGenerator } from "@mcp-b/wc-support/utilities/math";
+//#region src/components/lorem-ipsum/lorem-ipsum.styles.ts
+var lorem_ipsum_styles_default = css`
+  :host {
+    display: contents;
+  }
+`;
+//#endregion
+//#region src/components/lorem-ipsum/lorem-ipsum.ts
+const DICTIONARY = "a ac adipiscing aenean aliquam aliquet amet ante at auctor augue bibendum condimentum congue consectetur consequat convallis cubilia curae dictum dignissim dolor dui duis egestas eget elit enim erat est et etiam eu euismod ex facilisis faucibus felis fermentum finibus fringilla fusce hendrerit iaculis id in integer interdum ipsum justo lacinia lacus laoreet leo libero ligula lorem luctus magna malesuada massa mauris maximus mi molestie morbi nec neque nisl non nulla nullam nunc odio orci ornare pellentesque pharetra placerat porta porttitor posuere praesent pretium primis proin pulvinar quam quis quisque rhoncus risus sapien scelerisque sed sem semper sit suscipit suspendisse tempor tempus tortor tristique turpis ullamcorper ultrices ut varius vehicula vel velit venenatis vestibulum vivamus viverra vulputate".split(" ");
+function clampRandom(value, min, max) {
+	return Math.floor(value * (max - min + 1)) + min;
+}
+/**
+* <sigvelo-lorem-ipsum>
+*
+* @summary Outputs placeholder text in various formats for testing designs with random content.
+* @tag sigvelo-lorem-ipsum
+* @documentation https://design-system.sigvelo.com/docs/components/lorem-ipsum
+* @status stable
+* @since 1.0
+*
+* @example Default
+* Placeholder text, commonly referred to as lorem ipsum, is useful for displaying the visual form of a document without using actual content. You can use this component instead of copying and pasting large quantities of text from online generators.
+*
+* Unless you provide a seed, each refresh will yield unique content, allowing you to test the flexibility of your designs. The default behavior outputs a few sentences.
+*
+* ```html
+* <sigvelo-lorem-ipsum></sigvelo-lorem-ipsum>
+* ```
+*
+* @example Titles & headings
+* Set the `type` attribute to `title` to generate text suitable for a title or heading. The `length` attribute controls how many words will be output.
+*
+* ```html
+* <h4><sigvelo-lorem-ipsum type="title" length="2-6"></sigvelo-lorem-ipsum></h4>
+* ```
+*
+* **Note:** Some attributes herein allow you to specify a minimum and maximum range using the `{min}-{max}` syntax, e.g. `length="2-6"`.
+*
+* @example Sentences
+* Set the `type` attribute to `sentence` to generate sentences. The `length` attribute controls how many sentences are generated. You can specify how many words are in each sentence with the `words-per-sentence` attribute.
+*
+* ```html
+* <sigvelo-lorem-ipsum type="sentence" length="2-3"></sigvelo-lorem-ipsum>
+* ```
+*
+* @example Paragraphs
+* Set the `type` attribute to `paragraph` to generate HTML paragraphs. The `length` attribute controls how many paragraphs are generated. Additional fine tuning can be done with the `words-per-sentence` and `sentences-per-paragraph` attributes.
+*
+* ```html
+* <sigvelo-lorem-ipsum type="paragraph" length="2-4"></sigvelo-lorem-ipsum>
+* ```
+*
+* @example Lists
+* Set the `type` attribute to `ol` or `ul` to generate HTML lists. The `length` attribute controls how many list items are generated. The number of words in each list item can be controlled with the `words-per-sentence` attribute.
+*
+* ```html
+* <sigvelo-lorem-ipsum type="ol" length="3-6" words-per-sentence="2-3"></sigvelo-lorem-ipsum>
+* <br>
+* <sigvelo-lorem-ipsum type="ul" length="3-6" words-per-sentence="2-3"></sigvelo-lorem-ipsum>
+* ```
+*
+* @example Seeding the generator
+* By default, the generator will produce random content every time it runs. If you want to force the output to be the same every time, provide a non-zero seed number using the `seed` attribute.
+*
+* ```html
+* <sigvelo-slider
+*   label="Seed"
+*   min="1"
+*   max="5"
+*   value="3"
+*   with-markers
+*   with-tooltip
+*   style="margin-block-end: 2rem;"
+* ></sigvelo-slider>
+* <sigvelo-lorem-ipsum seed="3" id="lorem-ipsum__seed"></sigvelo-lorem-ipsum>
+*
+* <script>
+*   const loremIpsum = document.getElementById('lorem-ipsum__seed');
+*   const slider = loremIpsum.previousElementSibling;
+*
+*   slider.addEventListener('sigvelo-input', () => loremIpsum.seed = slider.value);
+* <\/script>
+* ```
+*
+* <style>
+* <!-- For the demos -->
+* sigvelo-lorem-ipsum :last-child {
+* margin-block-end: 0;
+* }
+* </style>
+*/
+var SigveloLoremIpsum = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.type = "sentence";
+		this.length = "3-5";
+		this.wordsPerSentence = "4-16";
+		this.sentencesPerParagraph = "3-6";
+	}
+	static {
+		this.styles = [hostStyles, lorem_ipsum_styles_default];
+	}
+	/** Returns an array of words of the specified length. */
+	generateWords(length) {
+		const words = [];
+		for (let i = 0; i < length; i++) {
+			const index = clampRandom(this.generateNumber(), 0, DICTIONARY.length - 1);
+			words.push(DICTIONARY[index]);
+		}
+		return words;
+	}
+	/** Returns a number within the specified range. */
+	getNumberWithinRange(range) {
+		if (typeof range === "number") return range || 0;
+		if (typeof range === "string" && !range.includes("-")) return Number(range) || 0;
+		const parsedRange = String(range).split("-");
+		const min = Number(parsedRange[0]) || 0;
+		const max = Number(parsedRange[1]) || 0;
+		return clampRandom(this.generateNumber(), min, max);
+	}
+	/** Generates a list of random items based on the properties that are currently set */
+	generateList() {
+		const numItems = this.getNumberWithinRange(this.length);
+		let items = "";
+		for (let i = 0; i < numItems; i++) {
+			const numWords = this.getNumberWithinRange(this.wordsPerSentence);
+			const item = this.generateWords(numWords).join(" ");
+			items += `<li>${item.charAt(0).toUpperCase() + item.slice(1)}</li>`;
+		}
+		return `<${this.type}>${items}</${this.type}>`;
+	}
+	/** Generates random paragraphs based on the properties that are currently set */
+	generateParagraphs() {
+		const numParagraphs = this.getNumberWithinRange(this.length);
+		let paragraphs = "";
+		for (let i = 0; i < numParagraphs; i++) {
+			const sentences = this.generateSentences();
+			paragraphs += `<p>${sentences}</p>`;
+		}
+		return paragraphs;
+	}
+	/** Generates random sentences based on the properties that are currently set */
+	generateSentences() {
+		const commaFrequency = 10;
+		const numSentences = this.getNumberWithinRange(this.length);
+		let sentences = "";
+		for (let i = 0; i < numSentences; i++) {
+			const numWords = this.getNumberWithinRange(this.wordsPerSentence);
+			const words = this.generateWords(numWords);
+			let sentence = "";
+			for (let j = 0; j < words.length; j++) {
+				const word = words[j];
+				if (j === 0) {
+					sentence += word.charAt(0).toUpperCase() + word.slice(1);
+					continue;
+				}
+				if (j < words.length - 3) {
+					if (clampRandom(this.generateNumber(), 0, commaFrequency) === 0) sentence += ", ";
+				}
+				sentence += ` ${word}`;
+			}
+			sentences += `${sentence}. `;
+		}
+		return sentences.trim();
+	}
+	/** Generates a random title based on the properties that are currently set */
+	generateTitle() {
+		const numWords = this.getNumberWithinRange(this.length);
+		const words = this.generateWords(numWords);
+		const title = [];
+		for (const word of words) title.push(word.charAt(0).toUpperCase() + word.slice(1));
+		return title.join(" ");
+	}
+	render() {
+		const seed = typeof this.seed === "number" ? this.seed : parseFloat(this.seed);
+		this.generateNumber = typeof this.seed === "undefined" ? () => Math.random() : seededNumberGenerator(seed);
+		if (this.type === "sentence") this.innerHTML = this.generateSentences();
+		if (this.type === "paragraph") this.innerHTML = this.generateParagraphs();
+		if (this.type === "title") this.innerHTML = this.generateTitle();
+		if (this.type === "ol" || this.type === "ul") this.innerHTML = this.generateList();
+		return html` <slot></slot> `;
+	}
+};
+__decorate([property()], SigveloLoremIpsum.prototype, "type", void 0);
+__decorate([property()], SigveloLoremIpsum.prototype, "length", void 0);
+__decorate([property({ type: Number })], SigveloLoremIpsum.prototype, "seed", void 0);
+__decorate([property({ attribute: "words-per-sentence" })], SigveloLoremIpsum.prototype, "wordsPerSentence", void 0);
+__decorate([property({ attribute: "sentences-per-paragraph" })], SigveloLoremIpsum.prototype, "sentencesPerParagraph", void 0);
+customElements.define("sigvelo-lorem-ipsum", SigveloLoremIpsum);
+//#endregion
+export { SigveloLoremIpsum as t };

package/dist/lorem-ipsum-CR82CSuJ.d.ts

@@ -0,0 +1,130 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/lorem-ipsum/lorem-ipsum.d.ts
+/**
+ * <sigvelo-lorem-ipsum>
+ *
+ * @summary Outputs placeholder text in various formats for testing designs with random content.
+ * @tag sigvelo-lorem-ipsum
+ * @documentation https://design-system.sigvelo.com/docs/components/lorem-ipsum
+ * @status stable
+ * @since 1.0
+ *
+ * @example Default
+ * Placeholder text, commonly referred to as lorem ipsum, is useful for displaying the visual form of a document without using actual content. You can use this component instead of copying and pasting large quantities of text from online generators.
+ *
+ * Unless you provide a seed, each refresh will yield unique content, allowing you to test the flexibility of your designs. The default behavior outputs a few sentences.
+ *
+ * ```html
+ * <sigvelo-lorem-ipsum></sigvelo-lorem-ipsum>
+ * ```
+ *
+ * @example Titles & headings
+ * Set the `type` attribute to `title` to generate text suitable for a title or heading. The `length` attribute controls how many words will be output.
+ *
+ * ```html
+ * <h4><sigvelo-lorem-ipsum type="title" length="2-6"></sigvelo-lorem-ipsum></h4>
+ * ```
+ *
+ * **Note:** Some attributes herein allow you to specify a minimum and maximum range using the `{min}-{max}` syntax, e.g. `length="2-6"`.
+ *
+ * @example Sentences
+ * Set the `type` attribute to `sentence` to generate sentences. The `length` attribute controls how many sentences are generated. You can specify how many words are in each sentence with the `words-per-sentence` attribute.
+ *
+ * ```html
+ * <sigvelo-lorem-ipsum type="sentence" length="2-3"></sigvelo-lorem-ipsum>
+ * ```
+ *
+ * @example Paragraphs
+ * Set the `type` attribute to `paragraph` to generate HTML paragraphs. The `length` attribute controls how many paragraphs are generated. Additional fine tuning can be done with the `words-per-sentence` and `sentences-per-paragraph` attributes.
+ *
+ * ```html
+ * <sigvelo-lorem-ipsum type="paragraph" length="2-4"></sigvelo-lorem-ipsum>
+ * ```
+ *
+ * @example Lists
+ * Set the `type` attribute to `ol` or `ul` to generate HTML lists. The `length` attribute controls how many list items are generated. The number of words in each list item can be controlled with the `words-per-sentence` attribute.
+ *
+ * ```html
+ * <sigvelo-lorem-ipsum type="ol" length="3-6" words-per-sentence="2-3"></sigvelo-lorem-ipsum>
+ * <br>
+ * <sigvelo-lorem-ipsum type="ul" length="3-6" words-per-sentence="2-3"></sigvelo-lorem-ipsum>
+ * ```
+ *
+ * @example Seeding the generator
+ * By default, the generator will produce random content every time it runs. If you want to force the output to be the same every time, provide a non-zero seed number using the `seed` attribute.
+ *
+ * ```html
+ * <sigvelo-slider
+ *   label="Seed"
+ *   min="1"
+ *   max="5"
+ *   value="3"
+ *   with-markers
+ *   with-tooltip
+ *   style="margin-block-end: 2rem;"
+ * ></sigvelo-slider>
+ * <sigvelo-lorem-ipsum seed="3" id="lorem-ipsum__seed"></sigvelo-lorem-ipsum>
+ *
+ * <script>
+ *   const loremIpsum = document.getElementById('lorem-ipsum__seed');
+ *   const slider = loremIpsum.previousElementSibling;
+ *
+ *   slider.addEventListener('sigvelo-input', () => loremIpsum.seed = slider.value);
+ * </script>
+ * ```
+ *
+ * <style>
+ * <!-- For the demos -->
+ * sigvelo-lorem-ipsum :last-child {
+ * margin-block-end: 0;
+ * }
+ * </style>
+ */
+declare class SigveloLoremIpsum extends SigveloElement {
+  static styles: CSSResultGroup;
+  private generateNumber;
+  /** The type of HTML content to generate. */
+  type: "sentence" | "title" | "paragraph" | "ol" | "ul";
+  /**
+   * The length of the content to generate, e.g. the number of words, sentences, paragraphs, or list items. This should
+   * be a number or a range in the format of `{min}-{max}`, e.g. `2-4`.
+   */
+  length: number | string;
+  /**
+   * By default, the generator will produce random content every time it runs. Use this option to seed the generator
+   * with a non-zero number and force it to output the same content every time.
+   */
+  seed: number;
+  /**
+   * The number of words that should occur in a sentence or list item. This should be a number or a range in the format
+   * of `{min}-{max}`, e.g. `4-16`.
+   */
+  wordsPerSentence: number | string;
+  /**
+   * The number of sentences that should occur in a paragraph. This should be a number or a range in the format of
+   * `{min}-{max}`, e.g. `3-6`.
+   */
+  sentencesPerParagraph: number | string;
+  /** Returns an array of words of the specified length. */
+  private generateWords;
+  /** Returns a number within the specified range. */
+  private getNumberWithinRange;
+  /** Generates a list of random items based on the properties that are currently set */
+  private generateList;
+  /** Generates random paragraphs based on the properties that are currently set */
+  private generateParagraphs;
+  /** Generates random sentences based on the properties that are currently set */
+  private generateSentences;
+  /** Generates a random title based on the properties that are currently set */
+  private generateTitle;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-lorem-ipsum": SigveloLoremIpsum;
+  }
+}
+//#endregion
+export { SigveloLoremIpsum as t };

package/dist/meter-BC7uaJWf.d.ts

@@ -0,0 +1,73 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/meter/meter.d.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>
+ * ```
+ */
+declare class SigveloMeter extends SigveloElement {
+  static styles: CSSResultGroup;
+  /** A label for the meter, displayed above the track. */
+  label: string;
+  /** The meter's minimum value. */
+  min: number;
+  /** The meter's maximum value. */
+  max: number;
+  /** The meter's current value. */
+  value: number;
+  /** The color intent for the indicator. */
+  color: "primary" | "success" | "warning" | "destructive";
+  /** The percentage of the meter filled (readonly). */
+  get percentage(): number;
+  firstUpdated(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-meter": SigveloMeter;
+  }
+}
+//#endregion
+export { SigveloMeter as t };