@mcp-b/web-components 0.2.0

package/dist/navicon-_yMHY27-.js

@@ -0,0 +1,486 @@
+import { Localize } from "./utilities/localize.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css } 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 { classMap } from "lit/directives/class-map.js";
+import { html as html$1 } from "lit/static-html.js";
+import { SigveloBlurEvent, SigveloFocusEvent } from "@mcp-b/wc-support/events/form";
+//#region src/components/navicon/navicon.styles.ts
+var navicon_styles_default = css`
+  :host {
+    --dot-size: 0.125em;
+    --line-width: 0.0625em;
+    --line-transition-duration: var(--sigvelo-motion-duration-presence);
+    --line-transition-easing: var(--sigvelo-ease-standard);
+
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    width: 1em;
+    height: 1em;
+    padding: 0;
+    border: none;
+    border-radius: var(--sigvelo-radius-md);
+    background: none;
+    color: inherit;
+    vertical-align: middle;
+    cursor: pointer;
+    touch-action: manipulation;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  /* Faster but not instant when reduced motion is enabled */
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      --line-transition-duration: var(--sigvelo-motion-duration-interaction);
+    }
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  :host(:focus-visible) {
+    outline: var(--sigvelo-focus-ring);
+    outline-offset: var(--sigvelo-focus-offset);
+  }
+
+  /* Disabled */
+  :host(:state(disabled)) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Lines container */
+  .lines {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    pointer-events: none; /* Ensure clicks pass through to host */
+  }
+
+  /* Individual lines */
+  .line {
+    display: block;
+    position: absolute;
+    width: 62.5%;
+    height: round(var(--line-width), 1px);
+    transform-origin: center;
+    border-radius: var(--sigvelo-radius-full);
+    background-color: currentColor;
+    transition: all var(--line-transition-duration) var(--line-transition-easing);
+  }
+
+  /* Hamburger symbol (3 lines) */
+  .lines.hamburger {
+    .top {
+      top: 25%;
+    }
+
+    .middle {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .bottom {
+      bottom: 25%;
+    }
+  }
+
+  :host(:state(expanded)) .lines.hamburger .top {
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+  }
+
+  :host(:state(expanded)) .lines.hamburger .middle {
+    transform: translateY(-50%) scale(0);
+    opacity: 0;
+  }
+
+  :host(:state(expanded)) .lines.hamburger .bottom {
+    bottom: 50%;
+    transform: translateY(50%) rotate(-45deg);
+  }
+
+  /* Equals symbol (2 lines) */
+  .lines.equals {
+    .top {
+      top: 35%;
+    }
+
+    .bottom {
+      bottom: 35%;
+    }
+  }
+
+  :host(:state(expanded)) .lines.equals .top {
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+  }
+
+  :host(:state(expanded)) .lines.equals .bottom {
+    bottom: 50%;
+    transform: translateY(50%) rotate(-45deg);
+  }
+
+  /* Vertical dots symbol (3 dots arranged vertically) */
+  .dots.vertical-dots {
+    .top {
+      position: absolute;
+      top: 18%;
+      left: 50%;
+      width: round(var(--dot-size), 1px);
+      height: round(var(--dot-size), 1px);
+      transform: translateX(-50%); /* Center horizontally */
+      border-radius: 50%;
+      background-color: currentColor;
+      transition: all var(--line-transition-duration) var(--line-transition-easing);
+    }
+
+    .middle {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: round(var(--dot-size), 1px);
+      height: round(var(--dot-size), 1px);
+      transform: translate(-50%, -50%);
+      border-radius: 50%;
+      background-color: currentColor;
+      transition: all var(--line-transition-duration) var(--line-transition-easing);
+    }
+
+    .bottom {
+      position: absolute;
+      bottom: 18%;
+      left: 50%;
+      width: round(var(--dot-size), 1px);
+      height: round(var(--dot-size), 1px);
+      transform: translateX(-50%); /* Center horizontally */
+      border-radius: 50%;
+      background-color: currentColor;
+      transition: all var(--line-transition-duration) var(--line-transition-easing);
+    }
+  }
+
+  /* Expanded state: vertical dots transform into X */
+  :host(:state(expanded)) .dots.vertical-dots .top {
+    top: 50%;
+    width: 62.5%;
+    height: round(var(--line-width), 1px);
+    transform: translate(-50%, -50%) rotate(45deg); /* Maintain centering with rotation */
+    border-radius: var(--sigvelo-radius-full);
+  }
+
+  :host(:state(expanded)) .dots.vertical-dots .middle {
+    transform: translate(-50%, -50%) scale(0); /* Maintain centering while scaling */
+    opacity: 0;
+  }
+
+  :host(:state(expanded)) .dots.vertical-dots .bottom {
+    bottom: 50%;
+    width: 62.5%;
+    height: round(var(--line-width), 1px);
+    transform: translate(-50%, 50%) rotate(-45deg); /* Maintain centering with rotation */
+    border-radius: var(--sigvelo-radius-full);
+  }
+
+  /* Horizontal dots symbol (3 dots arranged horizontally) */
+  .dots.horizontal-dots {
+    .top {
+      position: absolute;
+      top: 50%;
+      left: 18%;
+      width: round(var(--dot-size), 1px);
+      height: round(var(--dot-size), 1px);
+      transform: translateY(-50%); /* Center vertically */
+      border-radius: 50%;
+      background-color: currentColor;
+      transition: all var(--line-transition-duration) var(--line-transition-easing);
+    }
+
+    .middle {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: round(var(--dot-size), 1px);
+      height: round(var(--dot-size), 1px);
+      transform: translate(-50%, -50%);
+      border-radius: 50%;
+      background-color: currentColor;
+      transition: all var(--line-transition-duration) var(--line-transition-easing);
+    }
+
+    .bottom {
+      position: absolute;
+      top: 50%;
+      right: 18%;
+      width: round(var(--dot-size), 1px);
+      height: round(var(--dot-size), 1px);
+      transform: translateY(-50%); /* Center vertically */
+      border-radius: 50%;
+      background-color: currentColor;
+      transition: all var(--line-transition-duration) var(--line-transition-easing);
+    }
+  }
+
+  /* Expanded state: horizontal dots transform into X */
+  :host(:state(expanded)) .dots.horizontal-dots .top {
+    top: 50%;
+    left: 50%;
+    width: 62.5%;
+    height: round(var(--line-width), 1px);
+    transform: translate(-50%, -50%) rotate(45deg); /* Maintain centering with rotation */
+    border-radius: var(--sigvelo-radius-full);
+  }
+
+  :host(:state(expanded)) .dots.horizontal-dots .middle {
+    transform: translate(-50%, -50%) scale(0); /* Maintain centering while scaling */
+    opacity: 0;
+  }
+
+  :host(:state(expanded)) .dots.horizontal-dots .bottom {
+    top: 50%;
+    right: 50%;
+    width: 62.5%;
+    height: round(var(--line-width), 1px);
+    transform: translate(50%, -50%) rotate(-45deg); /* Maintain centering with rotation */
+    border-radius: var(--sigvelo-radius-full);
+  }
+`;
+//#endregion
+//#region src/components/navicon/navicon.ts
+/**
+* <sigvelo-navicon>
+*
+* @summary A navicon, or "hamburger button", is a special button used to control mobile navigation menus.
+* @tag sigvelo-navicon
+* @documentation https://design-system.sigvelo.com/docs/components/navicon
+* @status stable
+* @since 1.0
+*
+* @event sigvelo-blur - Emitted when the navicon loses focus. This event does not bubble.
+* @event sigvelo-focus - Emitted when the navicon receives focus. This event does not bubble.
+*
+* @csspart line - The individual lines that make up the navicon symbol.
+* @csspart line-top - The top line.
+* @csspart line-middle - The middle line (hamburger symbol only).
+* @csspart line-bottom - The bottom line.
+*
+* @cssstate expanded - Applied when the navicon is toggled on.
+* @cssstate disabled - Applied when the navicon is disabled.
+* @cssstate focused - Applied when the navicon has focus.
+*
+* @cssproperty [--dot-size=0.125em] - The width of each dot. Available when symbol is `vertical-dots` or `horizontal-dots`.
+* @cssproperty [--line-width=0.0625em] - The width of each line. Available when symbol is `hamburger` or `equals`.
+* @cssproperty [--line-transition-duration=200ms] - The duration of the symbol's animation.
+* @cssproperty [--line-transition-easing=cubic-bezier(0.4, 0, 0.2, 1)] - The easing to use for the symbol's animation.
+* @cssproperty [--dot-size=0.125em] - The size of the dots in the dots symbol.
+*
+* @example Default
+* ```html
+* <sigvelo-navicon label="Toggle menu" style="font-size: 1.75rem;"></sigvelo-navicon>
+* ```
+*
+* @example Associating a menu
+* To associate the navicon with a navigation menu, add `for="id"`, where `id` is the ID of the nav menu that will show/hide when toggled. This tells assistive devices which element the navicon controls. The nav menu must exist in the same document as the navicon to work correctly.
+*
+* ```html
+* <sigvelo-navicon for="nav-menu"></sigvelo-navicon>
+*
+* <!-- The navicon will toggle this element -->
+* <nav id="nav-menu">
+*   ...
+* </nav>
+* ```
+*
+* **The navicon does not show or hide the menu for you.** You must add your own JavaScript and/or CSS to toggle it. You can listen for the `click` event and manage things with JavaScript.
+*
+* ```js
+* const navicon = document.querySelector('sigvelo-navicon');
+*
+* navicon.addEventListener('click', () => {
+*   if (navicon.expanded) {
+*     // Show the menu
+*   } else {
+*     // Hide the menu
+*   }
+* });
+* ```
+*
+* For a CSS-only solution, try using the `:has()` selector combined with `:state(expanded)` to target the nav menu when the navicon is expanded.
+*
+* ```css
+* #nav-menu {
+*   <!-- Hidden menu styles -->
+* }
+*
+* body:has(sigvelo-navicon:state(expanded)) #nav-menu {
+*   <!-- Visible menu styles -->
+* }
+* ```
+*
+* @example Customizing the label
+* By default, the navicon's accessible label is a localized version of the phrase "toggle navigation." Use the `label` attribute to provide your own label. Labels aren't displayed on the screen, but they're announced by assistive devices.
+*
+* ```html
+* <sigvelo-navicon label="View mobile menu" style="font-size: 1.75rem;"></sigvelo-navicon>
+* ```
+*
+* @example Changing the symbol
+* Use the `symbol` attribute to choose between the `hamburger`, `equals`, `horizontal-dots`, and `vertical-dots` symbols.
+*
+* ```html
+* <div style="font-size: 1.75rem;">
+*   <sigvelo-navicon symbol="hamburger"></sigvelo-navicon>
+*   <sigvelo-navicon symbol="equals"></sigvelo-navicon>
+*   <sigvelo-navicon symbol="horizontal-dots"></sigvelo-navicon>
+*   <sigvelo-navicon symbol="vertical-dots"></sigvelo-navicon>
+* </div>
+* ```
+*
+* @example Changing the size
+* Navicons are sized based on the current font size. You can make them bigger or smaller by changing the `font-size` property on the component or an ancestor. A good default size is 1.75rem, which equals 28&times;28px with a 16px root size.
+*
+* ```html
+* <sigvelo-navicon style="font-size: 1rem;"></sigvelo-navicon>
+* <sigvelo-navicon style="font-size: 1rem;" symbol="equals"></sigvelo-navicon>
+* <sigvelo-navicon style="font-size: 1rem;" symbol="horizontal-dots"></sigvelo-navicon>
+* <sigvelo-navicon style="font-size: 1rem;" symbol="vertical-dots"></sigvelo-navicon>
+* <br><br>
+* <sigvelo-navicon style="font-size: 3rem;"></sigvelo-navicon>
+* <sigvelo-navicon style="font-size: 3rem;" symbol="equals" ></sigvelo-navicon>
+* <sigvelo-navicon style="font-size: 3rem;" symbol="horizontal-dots" ></sigvelo-navicon>
+* <sigvelo-navicon style="font-size: 3rem;" symbol="vertical-dots" ></sigvelo-navicon>
+* ```
+*
+* @example Changing the color
+* Set the `color` CSS property to control the color of the navicon.
+*
+* ```html
+* <div style="font-size: 1.75rem;">
+*   <sigvelo-navicon style="color: deeppink;"></sigvelo-navicon>
+*   <sigvelo-navicon symbol="equals" style="color: dodgerblue;"></sigvelo-navicon>
+*   <sigvelo-navicon symbol="horizontal-dots" style="color: seagreen;"></sigvelo-navicon>
+*   <sigvelo-navicon symbol="vertical-dots" style="color: tomato;"></sigvelo-navicon>
+* </div>
+* ```
+*
+* @example Disabling
+* Use the `disabled` attribute to disable the navicon.
+*
+* ```html
+* <sigvelo-navicon disabled style="font-size: 1.75rem;"></sigvelo-navicon>
+* ```
+*/
+var SigveloNavicon = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.localize = new Localize(this);
+		this.expanded = false;
+		this.symbol = "hamburger";
+		this.disabled = false;
+		this.label = "Toggle navigation";
+		this.handleBlur = () => {
+			this.customStates.set("focused", false);
+			this.dispatchEvent(new SigveloBlurEvent());
+		};
+		this.handleFocus = () => {
+			this.customStates.set("focused", true);
+			this.dispatchEvent(new SigveloFocusEvent());
+		};
+		this.handleClick = (event) => {
+			if (this.disabled) {
+				event.preventDefault();
+				event.stopImmediatePropagation();
+				return;
+			}
+			this.expanded = !this.expanded;
+		};
+		this.handleKeyDown = (event) => {
+			if (this.disabled) {
+				event.preventDefault();
+				return;
+			}
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				this.expanded = !this.expanded;
+			}
+		};
+	}
+	static {
+		this.styles = [hostStyles, navicon_styles_default];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "button");
+		this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+		this.addEventListener("blur", this.handleBlur);
+		this.addEventListener("focus", this.handleFocus);
+		this.addEventListener("click", this.handleClick);
+		this.addEventListener("keydown", this.handleKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("blur", this.handleBlur);
+		this.removeEventListener("focus", this.handleFocus);
+		this.removeEventListener("click", this.handleClick);
+		this.removeEventListener("keydown", this.handleKeyDown);
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("expanded")) {
+			this.customStates.set("expanded", this.expanded);
+			this.setAttribute("aria-expanded", this.expanded ? "true" : "false");
+		}
+		if (changedProperties.has("for")) this.setAttribute("aria-controls", this.for);
+		if (changedProperties.has("label")) this.setAttribute("aria-label", this.label || this.localize.term("toggleNavigation"));
+		if (changedProperties.has("disabled")) {
+			this.customStates.set("disabled", this.disabled);
+			this.setAttribute("tabindex", this.disabled ? "-1" : "0");
+			this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+		}
+	}
+	render() {
+		return html$1`
+      <span
+        class=${classMap({
+			lines: this.symbol === "hamburger" || this.symbol === "equals",
+			dots: this.symbol === "vertical-dots" || this.symbol === "horizontal-dots",
+			"vertical-dots": this.symbol === "vertical-dots",
+			"horizontal-dots": this.symbol === "horizontal-dots",
+			hamburger: this.symbol === "hamburger",
+			equals: this.symbol === "equals"
+		})}
+      >
+        <span part="line line-top" class="line top"></span>
+        ${[
+			"hamburger",
+			"vertical-dots",
+			"horizontal-dots"
+		].includes(this.symbol) ? html$1` <span part="line line-middle" class="line middle"></span> ` : ""}
+        <span part="line line-bottom" class="line bottom"></span>
+      </span>
+    `;
+	}
+};
+__decorate([property({ reflect: true })], SigveloNavicon.prototype, "for", void 0);
+__decorate([property({
+	reflect: true,
+	type: Boolean
+})], SigveloNavicon.prototype, "expanded", void 0);
+__decorate([property({ reflect: true })], SigveloNavicon.prototype, "symbol", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloNavicon.prototype, "disabled", void 0);
+__decorate([property()], SigveloNavicon.prototype, "label", void 0);
+customElements.define("sigvelo-navicon", SigveloNavicon);
+//#endregion
+export { SigveloNavicon as t };

package/dist/number-BNtNXNF3.js

@@ -0,0 +1,162 @@
+import { Localize } from "./utilities/localize.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css } 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/number/number.styles.ts
+var number_styles_default = css`
+  :host {
+    display: inline;
+  }
+`;
+//#endregion
+//#region src/components/number/number.ts
+/**
+* <sigvelo-number>
+*
+* @summary Outputs a formatted number with support for currency, percentages, and units.
+* @tag sigvelo-number
+* @documentation https://design-system.sigvelo.com/docs/components/number
+* @status stable
+* @since 1.0
+*
+* @example Default
+* ```html
+* <sigvelo-number number="10000000"></sigvelo-number>
+* ```
+*
+* @example Grouping
+* The formatter groups numbers with thousands separators by default. To turn it off, set the `grouping` attribute to `never`.
+*
+* ```html
+* <sigvelo-number grouping="never" number="10000000"></sigvelo-number><br>
+* ```
+*
+* @example Currency
+* To format currency, set `type="currency"` and apply the appropriate ISO 4217 code to the `currency` attribute.
+*
+* ```html
+* <sigvelo-number type="currency" currency="USD" number="25000"></sigvelo-number><br>
+* <sigvelo-number type="currency" currency="EUR" number="25000"></sigvelo-number><br>
+* <sigvelo-number type="currency" currency="RUB" number="25000"></sigvelo-number>
+* ```
+*
+* @example Percentages
+* To format a percentage, set `type="percent"`.
+*
+* ```html
+* <sigvelo-number type="percent" number="0"></sigvelo-number><br>
+* <sigvelo-number type="percent" number="0.5"></sigvelo-number><br>
+* <sigvelo-number type="percent" number="1"></sigvelo-number><br>
+* ```
+*
+* @example Units
+* You can format a variety of different units. Possible values can be found here.
+*
+* ```html
+* <sigvelo-number type="unit" unit="kilobyte" number="5.1"></sigvelo-number><br>
+* <sigvelo-number type="unit" unit="megabyte" number="3.45"></sigvelo-number><br>
+* <sigvelo-number type="unit" unit="centimeter" number="2.54"></sigvelo-number><br>
+* <sigvelo-number type="unit" unit="inch" number="1"></sigvelo-number><br>
+* <sigvelo-number type="unit" unit="fahrenheit" number="75"></sigvelo-number><br>
+* <sigvelo-number type="unit" unit="celsius" number="24"></sigvelo-number><br>
+* <sigvelo-number type="unit" unit="hour" number="6"></sigvelo-number><br>
+* <sigvelo-number type="unit" unit="minute" number="45"></sigvelo-number><br>
+* <sigvelo-number type="unit" unit="second" number="8"></sigvelo-number><br>
+* ```
+*
+* Use the `unit-display` attribute to change how units are output. Possible values include `narrow`, `short`, and `long`.
+*
+* ```html
+* <sigvelo-number type="unit" unit="hour" number="12" unit-display="narrow"></sigvelo-number><br>
+* <sigvelo-number type="unit" unit="hour" number="12" unit-display="short"></sigvelo-number><br>
+* <sigvelo-number type="unit" unit="hour" number="12" unit-display="long"></sigvelo-number><br>
+* ```
+*
+* @example Localization
+* Set the `lang` attribute on the element to change the language.
+*
+* ```html
+* <sigvelo-number lang="en" number="100000000"></sigvelo-number><br>
+* <sigvelo-number lang="de" number="100000000"></sigvelo-number><br>
+* <sigvelo-number lang="ru" number="100000000"></sigvelo-number>
+* ```
+*
+* **Note:** This component also updates based on the page's language, which can be set using `<html lang="…">`.
+*/
+var SigveloNumber = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.localize = new Localize(this);
+		this.number = 0;
+		this.type = "decimal";
+		this.currency = "USD";
+		this.grouping = "auto";
+	}
+	static {
+		this.styles = [hostStyles, number_styles_default];
+	}
+	render() {
+		if (isNaN(this.number)) return "";
+		return this.localize.number(this.number, {
+			style: this.type,
+			currency: this.currency,
+			currencyDisplay: this.currencyDisplay,
+			currencySign: this.currencySign,
+			unit: this.unit,
+			unitDisplay: this.unitDisplay,
+			minimumIntegerDigits: this.minimumIntegerDigits,
+			minimumFractionDigits: this.minimumFractionDigits,
+			maximumFractionDigits: this.maximumFractionDigits,
+			minimumSignificantDigits: this.minimumSignificantDigits,
+			maximumSignificantDigits: this.maximumSignificantDigits,
+			roundingPriority: this.roundingPriority,
+			roundingIncrement: this.roundingIncrement ? Number(this.roundingIncrement) : void 0,
+			roundingMode: this.roundingMode,
+			trailingZeroDisplay: this.trailingZeroDisplay,
+			notation: this.notation,
+			compactDisplay: this.compactDisplay,
+			useGrouping: this.grouping === "never" ? false : this.grouping,
+			signDisplay: this.signDisplay
+		});
+	}
+};
+__decorate([property({ type: Number })], SigveloNumber.prototype, "number", void 0);
+__decorate([property()], SigveloNumber.prototype, "type", void 0);
+__decorate([property()], SigveloNumber.prototype, "currency", void 0);
+__decorate([property({ attribute: "currency-display" })], SigveloNumber.prototype, "currencyDisplay", void 0);
+__decorate([property({ attribute: "currency-sign" })], SigveloNumber.prototype, "currencySign", void 0);
+__decorate([property()], SigveloNumber.prototype, "unit", void 0);
+__decorate([property({ attribute: "unit-display" })], SigveloNumber.prototype, "unitDisplay", void 0);
+__decorate([property({
+	attribute: "minimum-integer-digits",
+	type: Number
+})], SigveloNumber.prototype, "minimumIntegerDigits", void 0);
+__decorate([property({
+	attribute: "minimum-fraction-digits",
+	type: Number
+})], SigveloNumber.prototype, "minimumFractionDigits", void 0);
+__decorate([property({
+	attribute: "maximum-fraction-digits",
+	type: Number
+})], SigveloNumber.prototype, "maximumFractionDigits", void 0);
+__decorate([property({
+	attribute: "minimum-significant-digits",
+	type: Number
+})], SigveloNumber.prototype, "minimumSignificantDigits", void 0);
+__decorate([property({
+	attribute: "maximum-significant-digits",
+	type: Number
+})], SigveloNumber.prototype, "maximumSignificantDigits", void 0);
+__decorate([property({ attribute: "rounding-priority" })], SigveloNumber.prototype, "roundingPriority", void 0);
+__decorate([property({ attribute: "rounding-increment" })], SigveloNumber.prototype, "roundingIncrement", void 0);
+__decorate([property({ attribute: "rounding-mode" })], SigveloNumber.prototype, "roundingMode", void 0);
+__decorate([property({ attribute: "trailing-zero-display" })], SigveloNumber.prototype, "trailingZeroDisplay", void 0);
+__decorate([property()], SigveloNumber.prototype, "notation", void 0);
+__decorate([property({ attribute: "compact-display" })], SigveloNumber.prototype, "compactDisplay", void 0);
+__decorate([property()], SigveloNumber.prototype, "grouping", void 0);
+__decorate([property({ attribute: "sign-display" })], SigveloNumber.prototype, "signDisplay", void 0);
+customElements.define("sigvelo-number", SigveloNumber);
+//#endregion
+export { SigveloNumber as t };