@mcp-b/web-components 0.2.22 → 0.3.0

package/README.md

@@ -1,49 +1,112 @@
-# Sigvelo
+# MCP-B Web Components
 
-Sigvelo is an open source user interface library for the modern Web. It features dozens of accessible, performant, and interoperable components along with an optional CSS reset to streamline development of websites and apps.
+`@mcp-b/web-components` is the Lit renderer of the MCP-B design system. It shares
+design tokens and deliberately shared control contracts with
+`@mcp-b/react-components`, the default renderer for product UI. Lit also supports
+framework-independent maps, editors, visualizations, and IFC surfaces through
+the sibling domain packages.
 
-You might be curious to learn that Sigvelo's components aren't built with React, Vue, or any other framework. They're custom HTML elements, or [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components), which means you can use them in plain ol' HTML pages as well as your favorite frameworks.
+## Use a component
 
-**There are two primary packages for this library:**
+Install with `vp add @mcp-b/web-components`, then import the theme and the elements
+you use:
 
-- [`@mcp-b/web-components`](https://www.npmjs.com/package/@mcp-b/web-components) - Use with frameworks and bundlers
-- [`@mcp-b/web-components-browser`](https://www.npmjs.com/package/@mcp-b/web-components-browser) - Use directly in the browser and on CDNs
+```ts
+import "@mcp-b/web-components/themes/sigvelo.css";
+import "@mcp-b/web-components/components/text-field/text-field.js";
+import "@mcp-b/web-components/components/button/button.js";
+```
 
-## What's in the box?
+```html
+<form>
+  <sigvelo-text-field name="title" label="Title" required></sigvelo-text-field>
+  <sigvelo-button type="submit">Save</sigvelo-button>
+</form>
+```
 
-- 🧰 A collection of high quality components for building beautiful, accessible, and consistent user interfaces
-- 🚀 An [optional] opinionated CSS reset to kick off new projects with beautiful base styles
-- 🎨 Extreme customizability using plain ol' CSS
-- 🐭 A built-in autoloader that detects components in your HTML — even ones you add dynamically — and loads them on the fly!
+Individual entrypoints register their dependencies and default English copy.
+The package root registers the entire core library; prefer individual imports
+when you only need a few controls. Additional translations are opt-in:
 
-## Where can I…?
+```ts
+import "@mcp-b/web-components/translations/es.js";
+document.documentElement.lang = "es";
+```
 
-- [Get started using Sigvelo](https://design-system.sigvelo.com/)
-- [Get help and support](https://design-system.sigvelo.com/support)
-- [Request a feature](https://github.com/omarkawach/sigvelo/discussions/categories/feature-requests)
-- [Report a bug](https://github.com/omarkawach/sigvelo/issues/new/choose)
-- [Ask for help](https://design-system.sigvelo.com/support)
-- [Star the project on GitHub](https://github.com/omarkawach/sigvelo/stargazers)
+## One token layer
 
-## Developer instructions
+The theme entrypoint loads `@mcp-b/design-tokens` through `@mcp-b/wc-support`.
+It does not require React CSS or maintain a second palette.
 
-To launch the development server, use the following commands.
+- No `data-theme` attribute means follow the operating system. Use
+  `data-theme="light"` or `data-theme="dark"` for an explicit root or subtree override.
+- Set `data-preset` on the document root for an accent palette and `data-style`
+  for a design-language preset. Removing the attribute restores the default.
+- Shared controls consume `--sigvelo-control-*` for their size, padding, icons,
+  and line height, and `--sigvelo-focus-*` for keyboard focus.
+- Add a shared semantic token in `packages/design-tokens` only when an existing
+  token cannot express the need. Component-specific hooks remain local.
 
-```sh
-npm i
-npm run start
-```
+React owns the contracts explicitly declared in
+[`design-system.catalog.json`](./design-system.catalog.json). Other name
+overlaps are review inventory, not a promise of API parity.
+
+## Compose with native boundaries
+
+Use named slots for caller-owned content and documented `::part()` hooks for
+internal styling. Inherited custom properties carry the shared theme through
+shadow roots; document selectors do not style arbitrary internals. See
+[Lit shadow DOM composition](https://lit.dev/docs/components/shadow-dom/) and
+[Lit styling](https://lit.dev/docs/components/styles/).
+
+Keep native buttons, links, inputs, and form association in the owning control.
+An ancestor fieldset's disabled state must not overwrite a control's own
+`disabled` attribute. Components must remain usable after disconnecting and
+reconnecting; initialize per-connection resources and release them on disconnect.
+See [Lit lifecycle](https://lit.dev/docs/components/lifecycle/).
 
-This will launch a browser showing the docs. The browser will reload as you make changes to the project. When you're ready to create a production build, use the following command.
+Custom tags and events use the `sigvelo-` prefix. Dispatch user-facing events
+through the shared event classes so bubbling, composition, and typed payloads
+remain consistent. Avoid copying the stateful localization or runtime registries
+into domain packages.
+
+## Package boundaries
+
+| Package                                                        | Owns                                                      |
+| -------------------------------------------------------------- | --------------------------------------------------------- |
+| `design-tokens`                                                | Shared tokens, themes, and presets                        |
+| `wc-support`                                                   | Lit base classes, events, localization, and shared styles |
+| `web-components`                                               | Core elements and the shared Lit Storybook                |
+| `geo-support`, `geo-leaflet`, `geo-maplibre`, `geo-openlayers` | Shared map contracts and engine-specific renderers        |
+| `interactive-components`, `aec-components`, `viz-components`   | Editors, IFC/3D, and charts                               |
+
+Rendering engines stay peer dependencies of the packages that use them. Import
+domain elements from their owning package; core controls do not require map or
+3D engines. Editors additionally load
+`@mcp-b/interactive-components/themes/interactive.css` for their syntax tokens.
+
+## Develop and verify
+
+From the repository root:
 
 ```sh
-npm run build
+vp install
+vp run @mcp-b/web-components#storybook
 ```
 
-The `dist` folder will contain the files you want.
-
-There are a number of commands you can use to lint and test the library. For a full list of them, run the following command.
+This Storybook includes every Lit package and runs accessibility checks on its
+stories. Root unit tests, React stories, and Lit stories are separate suites:
 
 ```sh
-npm run
+vp run test:browser:ci
+vp check
+vp run audit:tokens
+vp run audit:css-recipes
+vp run audit:modern-web-guidance
+vp run catalog:check
+vp run validate:packages
 ```
+
+The browser runner executes all three suites. Domain package test scripts
+delegate to the shared Lit Storybook; they do not own standalone unit suites.
+`wc-support` also has unit and browser regression tests.

package/dist/{alert-dialog-D25Oi_TS.js → alert-dialog-CGUwj_0U.js}

@@ -1,5 +1,5 @@
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
-import { t as SigveloDialog } from "./dialog-Cx46HMaZ.js";
+import { t as SigveloDialog } from "./dialog-Ddvyn2d_.js";
 import { css, html } from "lit";
 import { property } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";

package/dist/{button-gg3JJxQZ.js → button-BbabhtKj.js}

@@ -1,6 +1,6 @@
 import "./icon-Df0H7LYB.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
-import "./spinner-C04Dmc0H.js";
+import "./spinner-C9lQARtQ.js";
 import { css } from "lit";
 import { property } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";
@@ -26,22 +26,24 @@ var button_styles_default = css`
     align-items: center;
     justify-content: center;
     width: 100%;
-    gap: 0.4em;
+    gap: var(--sigvelo-density-compact-control-gap);
+    padding-block: 0;
     border: none;
     border-radius: var(--sigvelo-radius-md);
     background: none;
     font: inherit;
     font-weight: var(--sigvelo-font-weight-semibold);
+    line-height: var(--sigvelo-control-line-height-sm);
     text-decoration: none;
     vertical-align: middle;
     white-space: nowrap;
     cursor: inherit;
     touch-action: manipulation;
     transition:
-      var(--sigvelo-motion-duration-interaction) color ease,
-      var(--sigvelo-motion-duration-interaction) border-color ease,
-      var(--sigvelo-motion-duration-interaction) background-color ease,
-      var(--sigvelo-motion-duration-interaction) translate ease;
+      var(--sigvelo-motion-duration-interaction) color var(--sigvelo-motion-ease-change),
+      var(--sigvelo-motion-duration-interaction) border-color var(--sigvelo-motion-ease-change),
+      var(--sigvelo-motion-duration-interaction) background-color var(--sigvelo-motion-ease-change),
+      var(--sigvelo-motion-duration-presence) translate var(--sigvelo-ease-press);
     user-select: none;
     -webkit-user-select: none;
 
@@ -60,33 +62,48 @@ var button_styles_default = css`
 
     /* Sizes */
     &.xs {
-      min-height: var(--sigvelo-control-height-xs);
-      padding-inline: 0.85em;
+      --button-height: var(--sigvelo-control-height-xs);
+      --button-icon-size: var(--sigvelo-control-icon-size-xs);
+      min-height: var(--button-height);
+      padding-inline: var(--sigvelo-control-padding-inline-xs);
       font-size: var(--sigvelo-control-text-xs);
+      line-height: var(--sigvelo-control-line-height-xs);
     }
 
     &.sm {
-      min-height: var(--sigvelo-control-height-sm);
-      padding-inline: 1em;
+      --button-height: var(--sigvelo-control-height-sm);
+      --button-icon-size: var(--sigvelo-control-icon-size-sm);
+      min-height: var(--button-height);
+      padding-inline: var(--sigvelo-control-padding-inline-sm);
       font-size: var(--sigvelo-control-text-sm);
+      line-height: var(--sigvelo-control-line-height-sm);
     }
 
     &.md {
-      min-height: var(--sigvelo-control-height-md);
-      padding-inline: 1.25em;
+      --button-height: var(--sigvelo-control-height-md);
+      --button-icon-size: var(--sigvelo-control-icon-size-md);
+      min-height: var(--button-height);
+      padding-inline: var(--sigvelo-control-padding-inline-md);
       font-size: var(--sigvelo-control-text-md);
+      line-height: var(--sigvelo-control-line-height-md);
     }
 
     &.lg {
-      min-height: var(--sigvelo-control-height-lg);
-      padding-inline: 1.33em;
+      --button-height: var(--sigvelo-control-height-lg);
+      --button-icon-size: var(--sigvelo-control-icon-size-lg);
+      min-height: var(--button-height);
+      padding-inline: var(--sigvelo-control-padding-inline-lg);
       font-size: var(--sigvelo-control-text-lg);
+      line-height: var(--sigvelo-control-line-height-lg);
     }
 
     &.xl {
-      min-height: var(--sigvelo-control-height-xl);
-      padding-inline: 1.5em;
+      --button-height: var(--sigvelo-control-height-xl);
+      --button-icon-size: var(--sigvelo-control-icon-size-xl);
+      min-height: var(--button-height);
+      padding-inline: var(--sigvelo-control-padding-inline-xl);
       font-size: var(--sigvelo-control-text-xl);
+      line-height: var(--sigvelo-control-line-height-xl);
     }
 
     /* Normal buttons */
@@ -97,17 +114,14 @@ var button_styles_default = css`
         color: var(--sigvelo-color-neutral-text-on-subtle);
 
         @media (hover: hover) {
-          &:hover:not(.disabled, [aria-pressed="true"]) {
-            background-color: color-mix(in oklab, var(--sigvelo-color-neutral-bg-subtle), black 5%);
+          &:hover:not(.disabled, [aria-pressed="true"], :active) {
+            background-color: var(--sigvelo-color-neutral-bg-hover);
           }
         }
 
+        &:active:not(.disabled),
         &[aria-pressed="true"] {
-          background-color: color-mix(
-            in oklab,
-            var(--sigvelo-color-neutral-bg-subtle),
-            light-dark(black, white) 7.5%
-          );
+          background-color: var(--sigvelo-color-neutral-bg-press);
         }
       }
 
@@ -117,17 +131,14 @@ var button_styles_default = css`
         color: var(--sigvelo-color-primary-text-on-bg);
 
         @media (hover: hover) {
-          &:hover:not(.disabled, [aria-pressed="true"]) {
-            background-color: color-mix(in oklab, var(--sigvelo-color-primary-bg), black 5%);
+          &:hover:not(.disabled, [aria-pressed="true"], :active) {
+            background-color: var(--sigvelo-color-primary-bg-hover);
           }
         }
 
+        &:active:not(.disabled),
         &[aria-pressed="true"] {
-          background-color: color-mix(
-            in oklab,
-            var(--sigvelo-color-primary-bg),
-            light-dark(black, white) 7.5%
-          );
+          background-color: var(--sigvelo-color-primary-bg-press);
         }
       }
 
@@ -137,17 +148,14 @@ var button_styles_default = css`
         color: var(--sigvelo-color-danger-text-on-bg);
 
         @media (hover: hover) {
-          &:hover:not(.disabled, [aria-pressed="true"]) {
-            background-color: color-mix(in oklab, var(--sigvelo-color-danger-bg), black 5%);
+          &:hover:not(.disabled, [aria-pressed="true"], :active) {
+            background-color: var(--sigvelo-color-danger-bg-hover);
           }
         }
 
+        &:active:not(.disabled),
         &[aria-pressed="true"] {
-          background-color: color-mix(
-            in oklab,
-            var(--sigvelo-color-danger-bg),
-            light-dark(black, white) 7.5%
-          );
+          background-color: var(--sigvelo-color-danger-bg-press);
         }
       }
     }
@@ -207,6 +215,16 @@ var button_styles_default = css`
       }
     }
 
+    &.ghost.destructive {
+      color: var(--sigvelo-color-danger-text);
+
+      @media (hover: hover) {
+        &:hover:not(.disabled) {
+          background-color: color-mix(in oklab, transparent, var(--sigvelo-color-danger-bg) 12.5%);
+        }
+      }
+    }
+
     /* Raised surface buttons */
     &.surface {
       background-color: var(--sigvelo-color-surface-raised);
@@ -232,25 +250,10 @@ var button_styles_default = css`
       }
     }
 
-    /* Icon buttons */
+    /* Icon buttons share the control's height and icon size. */
     &.icon {
-      padding-inline: 0.75em;
-
-      &.xs {
-        padding-inline: 0.525em;
-      }
-
-      &.sm {
-        padding-inline: 0.65em;
-      }
-
-      &.lg {
-        padding-inline: 0.675em;
-      }
-
-      &.xl {
-        padding-inline: 0.55em;
-      }
+      width: var(--button-height);
+      padding-inline: 0;
     }
 
     /* Pills */
@@ -285,7 +288,7 @@ var button_styles_default = css`
       cursor: not-allowed;
 
       #label {
-        visibility: hidden;
+        opacity: 0;
       }
     }
 
@@ -301,8 +304,8 @@ var button_styles_default = css`
       font-size: 1.25em;
     }
 
-    /* Visually hidden label */
-    slot[name="label"] {
+    /* Opacity needs a box; the default slot display of contents ignores it. */
+    #label {
       display: inline;
     }
   }
@@ -341,15 +344,39 @@ var button_styles_default = css`
     margin-inline-start: calc(var(--sigvelo-border-width) * -2);
   }
 
+  @media (forced-colors: active) {
+    #button {
+      border: var(--sigvelo-border-style) var(--sigvelo-border-width) ButtonText;
+
+      &.ghost,
+      &.link {
+        border-color: transparent;
+      }
+
+      &.disabled:not(.loading),
+      &.disabled.loading {
+        border-color: GrayText;
+        color: GrayText;
+        opacity: 1;
+      }
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    #button:active:not(.disabled) {
+      translate: none;
+    }
+  }
+
   /* Icons */
   ::slotted(sigvelo-icon) {
-    font-size: 1.25em;
+    font-size: var(--button-icon-size);
     stroke-width: 1.75px;
   }
 
   ::slotted(svg) {
-    width: 1.25em;
-    height: 1.25em;
+    width: var(--button-icon-size);
+    height: var(--button-icon-size);
   }
 `;
 //#endregion
@@ -440,7 +467,7 @@ var button_styles_default = css`
 * </sigvelo-button>
 * ```
 *
-* **Note:** Because link buttons become anchors, they cannot be used with `disabled` or `loading`.
+* **Note:** Link buttons support `disabled`; `loading`, toggle state, and form actions apply only to buttons.
 *
 * @example Changing the width
 * To change a button's width, use the CSS `width` property.
@@ -637,16 +664,33 @@ var SigveloButton = class extends SigveloFormControlElement {
 		this.styles = [hostStyles, button_styles_default];
 	}
 	get focusableAnchor() {
-		return this.shadowRoot.querySelector("button");
+		return this.shadowRoot.querySelector("#button");
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.syncLongPress();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.longPress?.stop();
 	}
-	firstUpdated() {
-		const button = this.shadowRoot.getElementById("button");
-		this.longPress = new LongPress(button, { eventName: "sigvelo-long-press" });
-		this.longPress.start();
+	formDisabledCallback() {
+		super.formDisabledCallback();
+		this.syncLongPress();
+	}
+	syncLongPress() {
+		if (this.isConnected && !this.effectiveDisabled && !(this.loading && typeof this.href !== "string")) this.longPress?.start();
+		else this.longPress?.stop();
 	}
 	updated(changedProperties) {
-		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.disabled);
-		if (changedProperties.has("loading")) this.customStates.set("loading", this.loading);
+		if (!this.longPress || changedProperties.has("href")) {
+			this.longPress?.stop();
+			this.longPress = new LongPress(this.focusableAnchor, { eventName: "sigvelo-long-press" });
+		}
+		this.syncLongPress();
+		if (changedProperties.has("disabled")) this.customStates.set("disabled", this.effectiveDisabled);
+		if (changedProperties.has("loading") || changedProperties.has("href")) this.customStates.set("loading", this.loading && typeof this.href !== "string");
+		if (changedProperties.has("toggle") || changedProperties.has("href") || changedProperties.has("type")) this.customStates.set("toggled", this.toggle === "on" && typeof this.href !== "string" && this.type !== "submit");
 	}
 	handleBlur() {
 		this.customStates.set("focused", false);
@@ -657,15 +701,13 @@ var SigveloButton = class extends SigveloFormControlElement {
 		this.dispatchEvent(new SigveloFocusEvent());
 	}
 	handleClick(event) {
-		if (this.disabled || this.loading) {
+		if (this.effectiveDisabled || typeof this.href !== "string" && this.loading) {
 			event.preventDefault();
 			event.stopImmediatePropagation();
 			return;
 		}
-		if (this.toggle !== void 0) {
-			this.toggle = this.toggle === "on" ? "off" : "on";
-			this.customStates.set("toggled", this.toggle === "on");
-		}
+		if (typeof this.href === "string") return;
+		if (this.toggle !== void 0 && this.type !== "submit") this.toggle = this.toggle === "on" ? "off" : "on";
 		if (this.type === "reset" && this.internals.form) {
 			this.internals.form.reset();
 			return;
@@ -699,7 +741,7 @@ var SigveloButton = class extends SigveloFormControlElement {
 	}
 	render() {
 		const isLink = typeof this.href === "string";
-		const isDisabled = this.disabled || !isLink && this.loading;
+		const isDisabled = this.effectiveDisabled || !isLink && this.loading;
 		const isLoading = !isLink && this.loading;
 		const isSubmit = this.type === "submit";
 		const isToggle = this.toggle !== void 0 && !isLink && !isSubmit;
@@ -728,9 +770,11 @@ var SigveloButton = class extends SigveloFormControlElement {
 			loading: isLoading
 		})}
         type=${ifDefined(isLink ? void 0 : this.type)}
-        ?disabled=${ifDefined(isLink ? void 0 : this.disabled)}
+        ?disabled=${!isLink && isDisabled}
+        aria-disabled=${ifDefined(isLink && isDisabled ? "true" : void 0)}
+        aria-busy=${ifDefined(isLoading ? "true" : void 0)}
         value=${ifDefined(isLink ? void 0 : this.value)}
-        href=${ifDefined(isLink && !this.disabled ? this.href : void 0)}
+        href=${ifDefined(isLink && !this.effectiveDisabled ? this.href : void 0)}
         target=${ifDefined(isLink ? this.target : void 0)}
         download=${ifDefined(isLink ? this.download : void 0)}
         rel=${ifDefined(isLink && this.rel ? this.rel : void 0)}

package/dist/{button-BQofnUt4.d.ts → button-c5YKsC69.d.ts}

@@ -88,7 +88,7 @@ import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-elemen
  * </sigvelo-button>
  * ```
  *
- * **Note:** Because link buttons become anchors, they cannot be used with `disabled` or `loading`.
+ * **Note:** Link buttons support `disabled`; `loading`, toggle state, and form actions apply only to buttons.
  *
  * @example Changing the width
  * To change a button's width, use the CSS `width` property.
@@ -272,7 +272,7 @@ declare class SigveloButton extends SigveloFormControlElement {
   static styles: CSSResultGroup;
   protected internals: ElementInternals;
   private longPress;
-  protected get focusableAnchor(): HTMLButtonElement;
+  protected get focusableAnchor(): HTMLElement;
   /** Determines the button's variant. */
   variant: "normal" | "surface" | "outline" | "ghost" | "link";
   /** The semantic color intent of the button. */
@@ -338,7 +338,10 @@ declare class SigveloButton extends SigveloFormControlElement {
    * absorb the literals and offer no suggestions at all.
    */
   formTarget: "_self" | "_blank" | "_parent" | "_top" | (string & {}) | undefined;
-  firstUpdated(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  formDisabledCallback(): void;
+  private syncLongPress;
   updated(changedProperties: PropertyValues<this>): void;
   private handleBlur;
   private handleFocus;

package/dist/{checkbox-DoFcDEKB.d.ts → checkbox-BtoypUxD.d.ts}

@@ -324,19 +324,13 @@ declare class SigveloCheckbox extends SigveloFormControlElement {
    * Makes the checkbox required. Form submission will not be allowed until the checkbox is checked.
    */
   required: boolean;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
   updated(changedProperties: PropertyValues<this>): void;
-  /** @internal Called when a containing fieldset is disabled. */
-  formDisabledCallback(isDisabled: boolean): void;
   /** @internal Called when the form is reset. */
   formResetCallback(): void;
-  private handleClick;
   private handleBlur;
   private handleChange;
   private handleInput;
   private handleFocus;
-  private handleHostInvalid;
   /** Sets the form control's validity */
   private updateValidity;
   /** Sets focus to the checkbox. */