@mcp-b/web-components 0.2.21 → 0.3.0

package/dist/types/custom-element-jsx.d.ts

@@ -4003,8 +4003,9 @@ to a custom function to determine if the provided query matches the element's co
   results?: SigveloSearchList["results"];
   /**  */
   query?: SigveloSearchList["query"];
-  /**  */
-  isEmpty?: SigveloSearchList["isEmpty"];
+  /** Whether any slotted item survived the current filter. Not the `empty` state — that one also needs a query.
+Public like its siblings because Lit keys `changedProperties` on `keyof this`, which excludes private members. */
+  hasVisibleItems?: SigveloSearchList["hasVisibleItems"];
   /**  */
   isInitial?: SigveloSearchList["isInitial"];
   /**  */
@@ -4031,8 +4032,9 @@ to a custom function to determine if the provided query matches the element's co
   "prop:results"?: SigveloSearchList["results"];
   /**  */
   "prop:query"?: SigveloSearchList["query"];
-  /**  */
-  "prop:isEmpty"?: SigveloSearchList["isEmpty"];
+  /** Whether any slotted item survived the current filter. Not the `empty` state — that one also needs a query.
+Public like its siblings because Lit keys `changedProperties` on `keyof this`, which excludes private members. */
+  "prop:hasVisibleItems"?: SigveloSearchList["hasVisibleItems"];
   /**  */
   "prop:isInitial"?: SigveloSearchList["isInitial"];
   /**  */
@@ -5647,6 +5649,12 @@ export type CustomElements = {
    * - `start`: An icon or similar element to place before the label. Works great with `<sigvelo-icon>`.
    * - `end`: An icon or similar element to place after the label. Works great with `<sigvelo-icon>`.
    *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `formDisabledCallback() => void`: undefined
+   *
    * ## CSS Parts
    *
    * Custom selectors for styling elements within the component.
@@ -6125,6 +6133,7 @@ export type CustomElements = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `formDisabledCallback() => void`: undefined
    * - `focus() => void`: Sets focus to the slider.
    * - `blur() => void`: Removes focus from the slider.
    * - `stepDown() => void`: Decreases the slider's value by `step`. This is a programmatic change, so `input` and `change` events will not be
@@ -6571,7 +6580,6 @@ export type CustomElements = {
    *
    * Methods that can be called to access component functionality.
    *
-   * - `formDisabledCallback(disabled: boolean) => void`: undefined
    * - `formResetCallback() => void`: undefined
    * - `getTagContent(item: SigveloComboboxItem) => TemplateResult`: A custom function for rendering tag content. By default, this function returns the item's full `textContent`. You
    * can override it to customize the content that gets rendered in tags in `multiple` mode.
@@ -7345,7 +7353,6 @@ export type CustomElements = {
    *
    * Methods that can be called to access component functionality.
    *
-   * - `formDisabledCallback(isDisabled: boolean) => void`: undefined
    * - `formResetCallback() => void`: undefined
    * - `getSelectedValues() => void`: Returns an array of all selected values.
    * - `setSelectedValues(values: string|string[]) => void`: Sets the selected items by value(s) without triggering events.
@@ -8101,6 +8108,7 @@ export type CustomElements = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `formDisabledCallback() => void`: undefined
    * - `focus() => void`: Sets focus to the rating.
    * - `blur() => void`: Removes focus from the rating.
    * - `stepDown() => void`: Decreases the rating's value by `step`. This is a programmatic change, so `input` and `change` events will not be
@@ -8246,7 +8254,8 @@ export type CustomElements = {
    * - `debounce`: The time in milliseconds to use for debouncing the search results while the user types.
    * - `results`: undefined (property only)
    * - `query`: undefined (property only)
-   * - `isEmpty`: undefined (property only)
+   * - `hasVisibleItems`: Whether any slotted item survived the current filter. Not the `empty` state — that one also needs a query.
+   * Public like its siblings because Lit keys `changedProperties` on `keyof this`, which excludes private members. (property only)
    * - `isInitial`: undefined (property only)
    * - `resultsMessage`: undefined (property only)
    * - `isMatch`: A custom search function you can provide to change the search behavior. The function is applied to each item when
@@ -9726,6 +9735,12 @@ export type CustomElementsSolidJs = {
    * - `start`: An icon or similar element to place before the label. Works great with `<sigvelo-icon>`.
    * - `end`: An icon or similar element to place after the label. Works great with `<sigvelo-icon>`.
    *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `formDisabledCallback() => void`: undefined
+   *
    * ## CSS Parts
    *
    * Custom selectors for styling elements within the component.
@@ -10234,6 +10249,7 @@ export type CustomElementsSolidJs = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `formDisabledCallback() => void`: undefined
    * - `focus() => void`: Sets focus to the slider.
    * - `blur() => void`: Removes focus from the slider.
    * - `stepDown() => void`: Decreases the slider's value by `step`. This is a programmatic change, so `input` and `change` events will not be
@@ -10695,7 +10711,6 @@ export type CustomElementsSolidJs = {
    *
    * Methods that can be called to access component functionality.
    *
-   * - `formDisabledCallback(disabled: boolean) => void`: undefined
    * - `formResetCallback() => void`: undefined
    * - `getTagContent(item: SigveloComboboxItem) => TemplateResult`: A custom function for rendering tag content. By default, this function returns the item's full `textContent`. You
    * can override it to customize the content that gets rendered in tags in `multiple` mode.
@@ -11519,7 +11534,6 @@ export type CustomElementsSolidJs = {
    *
    * Methods that can be called to access component functionality.
    *
-   * - `formDisabledCallback(isDisabled: boolean) => void`: undefined
    * - `formResetCallback() => void`: undefined
    * - `getSelectedValues() => void`: Returns an array of all selected values.
    * - `setSelectedValues(values: string|string[]) => void`: Sets the selected items by value(s) without triggering events.
@@ -12321,6 +12335,7 @@ export type CustomElementsSolidJs = {
    *
    * Methods that can be called to access component functionality.
    *
+   * - `formDisabledCallback() => void`: undefined
    * - `focus() => void`: Sets focus to the rating.
    * - `blur() => void`: Removes focus from the rating.
    * - `stepDown() => void`: Decreases the rating's value by `step`. This is a programmatic change, so `input` and `change` events will not be
@@ -12478,7 +12493,8 @@ export type CustomElementsSolidJs = {
    * - `debounce`: The time in milliseconds to use for debouncing the search results while the user types.
    * - `results`: undefined (property only)
    * - `query`: undefined (property only)
-   * - `isEmpty`: undefined (property only)
+   * - `hasVisibleItems`: Whether any slotted item survived the current filter. Not the `empty` state — that one also needs a query.
+   * Public like its siblings because Lit keys `changedProperties` on `keyof this`, which excludes private members. (property only)
    * - `isInitial`: undefined (property only)
    * - `resultsMessage`: undefined (property only)
    * - `isMatch`: A custom search function you can provide to change the search behavior. The function is applied to each item when

package/dist/utilities/anchored-surface.d.ts

@@ -0,0 +1,36 @@
+import { Placement } from "@floating-ui/dom";
+
+//#region src/utilities/anchored-surface.d.ts
+interface AnchoredSurface {
+  /** The element the surface is positioned against. */
+  anchor: Element;
+  /** The element that carries the surface's own `data-placement` attribute, usually the component host. */
+  host: Element;
+  /** The floating element to position. */
+  surface: HTMLElement;
+  /** The arrow rendered inside the surface. */
+  arrow: HTMLElement;
+  /** The preferred placement. The surface shifts away from it when there isn't room. */
+  placement: Placement;
+  /** The distance of the surface from its anchor. */
+  distance: number;
+  /** The offset of the surface along its anchor. */
+  offset: number;
+}
+/**
+ * Positions a floating surface and its arrow against an anchor, then records the placement it settled on as
+ * `data-placement` on the host — which is both the hook consumers style against and what the transform-origin styles
+ * key on. Every arrow-bearing surface positions itself this way; the middleware stack and the arrow's static side are
+ * decided here rather than in each component.
+ */
+declare function positionAnchoredSurface({
+  anchor,
+  host,
+  surface,
+  arrow,
+  placement,
+  distance,
+  offset: offsetAlongAnchor
+}: AnchoredSurface): Promise<void>;
+//#endregion
+export { AnchoredSurface, positionAnchoredSurface };

package/dist/utilities/anchored-surface.js

@@ -0,0 +1,46 @@
+import { arrow, computePosition, flip, offset, shift } from "@floating-ui/dom";
+//#region src/utilities/anchored-surface.ts
+/** The side of the surface its arrow sits on, keyed by the side the surface resolved to. */
+const ARROW_SIDES = {
+	top: "bottom",
+	right: "left",
+	bottom: "top",
+	left: "right"
+};
+/**
+* Positions a floating surface and its arrow against an anchor, then records the placement it settled on as
+* `data-placement` on the host — which is both the hook consumers style against and what the transform-origin styles
+* key on. Every arrow-bearing surface positions itself this way; the middleware stack and the arrow's static side are
+* decided here rather than in each component.
+*/
+function positionAnchoredSurface({ anchor, host, surface, arrow: arrow$1, placement, distance, offset: offsetAlongAnchor }) {
+	return computePosition(anchor, surface, {
+		placement,
+		middleware: [
+			offset({
+				mainAxis: distance,
+				crossAxis: offsetAlongAnchor
+			}),
+			flip(),
+			shift(),
+			arrow({ element: arrow$1 })
+		]
+	}).then(({ x, y, middlewareData, placement: resolvedPlacement }) => {
+		host.setAttribute("data-placement", resolvedPlacement);
+		Object.assign(surface.style, {
+			left: `${x}px`,
+			top: `${y}px`
+		});
+		if (middlewareData.arrow) {
+			const { x: arrowX, y: arrowY } = middlewareData.arrow;
+			const staticSide = ARROW_SIDES[resolvedPlacement.split("-")[0]];
+			Object.assign(arrow$1.style, {
+				left: typeof arrowX === "number" ? `${arrowX}px` : "",
+				top: typeof arrowY === "number" ? `${arrowY}px` : "",
+				[staticSide]: "calc(var(--arrow-diagonal-size) * -1)"
+			});
+		}
+	});
+}
+//#endregion
+export { positionAnchoredSurface };

package/dist/utilities/copy-feedback.d.ts

@@ -0,0 +1,16 @@
+//#region src/utilities/copy-feedback.d.ts
+/** Where the transient feedback appears, or `hidden` to suppress it entirely. */
+type CopyFeedbackPlacement = "top" | "right" | "bottom" | "left" | "hidden";
+/**
+ * Flashes the transient "Copied" / "Error" message that `<sigvelo-copy>` and `<sigvelo-share>` show after writing to
+ * the clipboard. Both elements render the same feedback chrome from `copy.styles.ts`, so they announce it the same
+ * way: position it against the host, animate it in, then take it back out of the top layer.
+ *
+ * @param host The element the feedback is positioned against.
+ * @param feedback The feedback element inside the host's shadow root.
+ * @param message The text to announce.
+ * @param placement Where to place the feedback relative to the host.
+ */
+declare function showCopyFeedback(host: Element, feedback: HTMLElement, message: string, placement: CopyFeedbackPlacement): Promise<void>;
+//#endregion
+export { CopyFeedbackPlacement, showCopyFeedback };

package/dist/utilities/copy-feedback.js

@@ -0,0 +1,33 @@
+import { animateWithClass } from "@mcp-b/wc-support/utilities/animate";
+import { computePosition, flip } from "@floating-ui/dom";
+//#region src/utilities/copy-feedback.ts
+/**
+* Flashes the transient "Copied" / "Error" message that `<sigvelo-copy>` and `<sigvelo-share>` show after writing to
+* the clipboard. Both elements render the same feedback chrome from `copy.styles.ts`, so they announce it the same
+* way: position it against the host, animate it in, then take it back out of the top layer.
+*
+* @param host The element the feedback is positioned against.
+* @param feedback The feedback element inside the host's shadow root.
+* @param message The text to announce.
+* @param placement Where to place the feedback relative to the host.
+*/
+async function showCopyFeedback(host, feedback, message, placement) {
+	if (placement === "hidden") return;
+	feedback.textContent = message;
+	feedback.hidden = false;
+	feedback.showPopover();
+	computePosition(host, feedback, {
+		placement,
+		middleware: [flip()]
+	}).then(({ x, y }) => {
+		Object.assign(feedback.style, {
+			left: `${x}px`,
+			top: `${y}px`
+		});
+	});
+	await animateWithClass(feedback, "show");
+	feedback.hidden = true;
+	feedback.hidePopover();
+}
+//#endregion
+export { showCopyFeedback };

package/dist/utilities/form-validity.d.ts

@@ -0,0 +1,28 @@
+//#region src/utilities/form-validity.d.ts
+/**
+ * Form controls that wrap a native input, textarea, or select mirror that control's validity onto the host through
+ * `ElementInternals`. Which flags are mirrored, and how a custom validity message overrides the native one, is one
+ * rule — it lives here rather than being restated in every wrapping component.
+ */
+interface MirroredValidity {
+  /** The flags to hand to `ElementInternals.setValidity()`. */
+  flags: ValidityStateFlags;
+  /** The message to report: the custom one when set, otherwise the native control's own message. */
+  validationMessage: string;
+  /** Whether the host should consider itself invalid. */
+  isInvalid: boolean;
+}
+/**
+ * Mirrors a native form control's validity, letting a non-empty custom validity message win over it.
+ *
+ * Every flag is passed on every call, whatever constraints the wrapped control actually supports. A checkbox only
+ * validates `required`, so its other flags are always false — and `ElementInternals.setValidity()` clears any flag left
+ * out of the object anyway, which makes the short form and the full form equivalent. Passing them all keeps one rule
+ * here instead of a per-control opinion about which flags are worth naming.
+ *
+ * @param control The native control rendered inside the component's shadow root.
+ * @param customValidity The component's current custom validity message, or an empty string when none is set.
+ */
+declare function mirrorNativeValidity(control: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, customValidity: string): MirroredValidity;
+//#endregion
+export { MirroredValidity, mirrorNativeValidity };

package/dist/utilities/form-validity.js

@@ -0,0 +1,33 @@
+//#region src/utilities/form-validity.ts
+/**
+* Mirrors a native form control's validity, letting a non-empty custom validity message win over it.
+*
+* Every flag is passed on every call, whatever constraints the wrapped control actually supports. A checkbox only
+* validates `required`, so its other flags are always false — and `ElementInternals.setValidity()` clears any flag left
+* out of the object anyway, which makes the short form and the full form equivalent. Passing them all keeps one rule
+* here instead of a per-control opinion about which flags are worth naming.
+*
+* @param control The native control rendered inside the component's shadow root.
+* @param customValidity The component's current custom validity message, or an empty string when none is set.
+*/
+function mirrorNativeValidity(control, customValidity) {
+	const hasCustomValidity = customValidity.length > 0;
+	return {
+		flags: {
+			badInput: control.validity.badInput,
+			customError: hasCustomValidity,
+			patternMismatch: control.validity.patternMismatch,
+			rangeOverflow: control.validity.rangeOverflow,
+			rangeUnderflow: control.validity.rangeUnderflow,
+			stepMismatch: control.validity.stepMismatch,
+			tooLong: control.validity.tooLong,
+			tooShort: control.validity.tooShort,
+			typeMismatch: control.validity.typeMismatch,
+			valueMissing: control.validity.valueMissing
+		},
+		validationMessage: hasCustomValidity ? customValidity : control.validationMessage,
+		isInvalid: hasCustomValidity ? true : !control.validity.valid
+	};
+}
+//#endregion
+export { mirrorNativeValidity };

package/dist/utilities/localize.d.ts

@@ -1,2 +1,2 @@
-import { a as registerDefaultTranslation, i as Translation, n as Localize, o as registerTranslation, r as LocalizeController, s as update, t as BaseTranslation } from "../localize-322EtXNX.js";
+import { a as Translation, c as update, i as LocalizeController, n as BaseTranslation, o as registerDefaultTranslation, r as Localize, s as registerTranslation } from "../en-ss05iPjS.js";
 export { type BaseTranslation, Localize, LocalizeController, Translation, registerDefaultTranslation, registerTranslation, update };

package/dist/utilities/localize.js

@@ -1,3 +1,4 @@
+import "../translations/en.js";
 import { LocalizeController, LocalizeController as LocalizeController$1, registerDefaultTranslation, registerTranslation, update } from "@mcp-b/wc-support";
 //#region src/utilities/localize.ts
 /** `LocalizeController` pre-typed with the Sigvelo component library translations. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/web-components",
-  "version": "0.2.21",
+  "version": "0.3.0",
   "description": "Sigvelo SaaS web components built with Lit.",
   "keywords": [
     "custom-elements",
@@ -27,6 +27,7 @@
     },
     "./components/*": "./dist/components/*",
     "./utilities/*": "./dist/utilities/*",
+    "./translations/*": "./dist/translations/*",
     "./themes/*": "./dist/themes/*",
     "./custom-elements.json": "./dist/docs/custom-elements.json"
   },
@@ -38,7 +39,7 @@
     "@floating-ui/dom": "^1.8.0",
     "lit": "^3.3.3",
     "lit-html": "^3.3.3",
-    "@mcp-b/wc-support": "0.2.18"
+    "@mcp-b/wc-support": "0.3.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.12.1",

package/dist/{carousel-XopKISBQ.js → carousel-DpIqPTuO.js}

@@ -1,6 +1,6 @@
-import { Localize } from "./utilities/localize.js";
 import "./icon-Df0H7LYB.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { Localize } from "./utilities/localize.js";
 import "./carousel-item-B5-X31Ha.js";
 import { css, html } from "lit";
 import { eventOptions, property, query, state } from "lit/decorators.js";

package/dist/{date-CJPmOdi9.js → date-CFIR88pX.js}

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

package/dist/{dialog-Cx46HMaZ.js → dialog-Ddvyn2d_.js}

@@ -1,5 +1,5 @@
-import { Localize } from "./utilities/localize.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { Localize } from "./utilities/localize.js";
 import { css, html, nothing } from "lit";
 import { property, query } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";

package/dist/{expander-Bwvxj6Oa.js → expander-CMV4QCha.js}

@@ -1,5 +1,5 @@
-import { Localize } from "./utilities/localize.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { Localize } from "./utilities/localize.js";
 import { css, html } from "lit";
 import { eventOptions, property, query } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";

package/dist/{navicon-_yMHY27-.js → navicon-B-5pY9gq.js}

@@ -1,5 +1,5 @@
-import { Localize } from "./utilities/localize.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { Localize } from "./utilities/localize.js";
 import { css } from "lit";
 import { property } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";

package/dist/{number-BNtNXNF3.js → number-BYBxfOGw.js}

@@ -1,5 +1,5 @@
-import { Localize } from "./utilities/localize.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { Localize } from "./utilities/localize.js";
 import { css } from "lit";
 import { property } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";

package/dist/{pagination-CrTQnuNW.js → pagination-VOzVTV8p.js}

@@ -1,6 +1,6 @@
-import { Localize } from "./utilities/localize.js";
 import "./icon-Df0H7LYB.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { Localize } from "./utilities/localize.js";
 import { css } from "lit";
 import { property } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";

package/dist/{scroller-LYgBVyfY.js → scroller-DZATZlDa.js}

@@ -1,5 +1,5 @@
-import { Localize } from "./utilities/localize.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { Localize } from "./utilities/localize.js";
 import { css, html } from "lit";
 import { eventOptions, property, query, state } from "lit/decorators.js";
 import hostStyles from "@mcp-b/wc-support/styles/host.styles";

package/dist/{spinner-C04Dmc0H.js → spinner-C9lQARtQ.js}

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

package/dist/{toast-item-CGvz92Qk.js → toast-item-DzSPG25R.js}

@@ -1,6 +1,6 @@
-import { Localize } from "./utilities/localize.js";
 import "./icon-Df0H7LYB.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { Localize } from "./utilities/localize.js";
 import "./progress-DzVk260j.js";
 import { css, html } from "lit";
 import { property, state } from "lit/decorators.js";

package/dist/{zoomable-frame-DxcjLGcF.js → zoomable-frame-BrjVkNMX.js}

@@ -1,6 +1,6 @@
-import { Localize } from "./utilities/localize.js";
 import "./icon-Df0H7LYB.js";
 import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { Localize } from "./utilities/localize.js";
 import { css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";