@mcp-b/web-components 0.2.0 → 0.2.3

package/dist/components/index.d.ts

@@ -45,7 +45,7 @@ import { t as SigveloListbox } from "../listbox-DD4ujIJe.js";
 import { t as SigveloLoremIpsum } from "../lorem-ipsum-CR82CSuJ.js";
 import { t as SigveloMeter } from "../meter-BC7uaJWf.js";
 import { n as SigveloMetric, t as MetricFormat } from "../metric-CjlLq_VA.js";
-import { t as SigveloMetricGrid } from "../metric-grid-C5Xbb1_0.js";
+import { t as SigveloMetricGrid } from "../metric-grid-Zb941OFI.js";
 import { t as SigveloMutationObserver } from "../mutation-observer-BmrZ-GER.js";
 import { t as SigveloNavicon } from "../navicon-Dic5Qjzb.js";
 import { t as SigveloNumber } from "../number-BwbnErlB.js";

package/dist/components/index.js

@@ -45,8 +45,8 @@ import { t as SigveloListboxItem } from "../listbox-item-CwD9s3VY.js";
 import { t as SigveloListbox } from "../listbox-C3XXRWGX.js";
 import { t as SigveloLoremIpsum } from "../lorem-ipsum-B2x3V-v8.js";
 import { t as SigveloMeter } from "../meter-BIDyjwFp.js";
-import { t as SigveloMetric } from "../metric-DbuOcDp_.js";
-import { t as SigveloMetricGrid } from "../metric-grid-C2Pb0Zl3.js";
+import { t as SigveloMetric } from "../metric-xGnpnmNP.js";
+import { t as SigveloMetricGrid } from "../metric-grid-YWGxI1F5.js";
 import { t as SigveloMutationObserver } from "../mutation-observer-DS8EBuOp.js";
 import { t as SigveloNavicon } from "../navicon-_yMHY27-.js";
 import { t as SigveloNumber } from "../number-BNtNXNF3.js";

package/dist/components/metric/metric.js

@@ -1,2 +1,2 @@
-import { t as SigveloMetric } from "../../metric-DbuOcDp_.js";
+import { t as SigveloMetric } from "../../metric-xGnpnmNP.js";
 export { SigveloMetric };

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

@@ -1,2 +1,2 @@
-import { t as SigveloMetricGrid } from "../../metric-grid-C5Xbb1_0.js";
+import { t as SigveloMetricGrid } from "../../metric-grid-Zb941OFI.js";
 export { SigveloMetricGrid };

package/dist/components/metric-grid/metric-grid.js

@@ -1,2 +1,2 @@
-import { t as SigveloMetricGrid } from "../../metric-grid-C2Pb0Zl3.js";
+import { t as SigveloMetricGrid } from "../../metric-grid-YWGxI1F5.js";
 export { SigveloMetricGrid };

package/dist/docs/custom-elements.json

@@ -14592,7 +14592,7 @@
           "name": "SigveloMetricGrid",
           "cssProperties": [
             {
-              "description": "Minimum width of each grid item.",
+              "description": "Minimum width of each grid item, clamped to the container width.",
               "name": "--metric-min-width",
               "default": "9rem"
             }
@@ -29295,7 +29295,7 @@
   "package": {
     "name": "@mcp-b/web-components",
     "description": "Sigvelo SaaS web components built with Lit.",
-    "version": "0.2.0",
+    "version": "0.2.3",
     "license": "MIT"
   }
 }

package/dist/index.d.ts

@@ -45,7 +45,7 @@ import { t as SigveloListbox } from "./listbox-DD4ujIJe.js";
 import { t as SigveloLoremIpsum } from "./lorem-ipsum-CR82CSuJ.js";
 import { t as SigveloMeter } from "./meter-BC7uaJWf.js";
 import { n as SigveloMetric, t as MetricFormat } from "./metric-CjlLq_VA.js";
-import { t as SigveloMetricGrid } from "./metric-grid-C5Xbb1_0.js";
+import { t as SigveloMetricGrid } from "./metric-grid-Zb941OFI.js";
 import { t as SigveloMutationObserver } from "./mutation-observer-BmrZ-GER.js";
 import { t as SigveloNavicon } from "./navicon-Dic5Qjzb.js";
 import { t as SigveloNumber } from "./number-BwbnErlB.js";

package/dist/index.js

@@ -47,8 +47,8 @@ import { t as SigveloListboxItem } from "./listbox-item-CwD9s3VY.js";
 import { t as SigveloListbox } from "./listbox-C3XXRWGX.js";
 import { t as SigveloLoremIpsum } from "./lorem-ipsum-B2x3V-v8.js";
 import { t as SigveloMeter } from "./meter-BIDyjwFp.js";
-import { t as SigveloMetric } from "./metric-DbuOcDp_.js";
-import { t as SigveloMetricGrid } from "./metric-grid-C2Pb0Zl3.js";
+import { t as SigveloMetric } from "./metric-xGnpnmNP.js";
+import { t as SigveloMetricGrid } from "./metric-grid-YWGxI1F5.js";
 import { t as SigveloMutationObserver } from "./mutation-observer-DS8EBuOp.js";
 import { t as SigveloNavicon } from "./navicon-_yMHY27-.js";
 import { t as SigveloNumber } from "./number-BNtNXNF3.js";

package/dist/{metric-grid-C2Pb0Zl3.js → metric-grid-YWGxI1F5.js}

@@ -5,7 +5,7 @@ import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
 var metric_grid_styles_default = css`
   :host {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(var(--metric-min-width, 9rem), 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(var(--metric-min-width, 9rem), 100%), 1fr));
     gap: var(--sigvelo-spacing-3);
     min-inline-size: 0;
   }
@@ -22,7 +22,7 @@ var metric_grid_styles_default = css`
 * @since 1.0
 *
 * @slot - One or more `sigvelo-metric` elements.
-* @cssproperty [--metric-min-width=9rem] - Minimum width of each grid item.
+* @cssproperty [--metric-min-width=9rem] - Minimum width of each grid item, clamped to the container width.
 */
 var SigveloMetricGrid = class extends SigveloElement {
 	static {

package/dist/{metric-grid-C5Xbb1_0.d.ts → metric-grid-Zb941OFI.d.ts}

@@ -12,7 +12,7 @@ import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
  * @since 1.0
  *
  * @slot - One or more `sigvelo-metric` elements.
- * @cssproperty [--metric-min-width=9rem] - Minimum width of each grid item.
+ * @cssproperty [--metric-min-width=9rem] - Minimum width of each grid item, clamped to the container width.
  */
 declare class SigveloMetricGrid extends SigveloElement {
   static styles: CSSResultGroup;

package/dist/{metric-DbuOcDp_.js → metric-xGnpnmNP.js}

@@ -7,7 +7,7 @@ import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
 var metric_styles_default = css`
   :host {
     display: block;
-    min-inline-size: 9rem;
+    min-inline-size: min(9rem, 100%);
     padding: var(--sigvelo-spacing-4);
     border: var(--sigvelo-border-style) var(--sigvelo-border-width)
       var(--sigvelo-color-neutral-border-subtle);
@@ -26,6 +26,7 @@ var metric_styles_default = css`
     font-size: 1.75rem;
     font-weight: var(--sigvelo-font-weight-semibold);
     line-height: 1.15;
+    overflow-wrap: anywhere;
   }
 `;
 //#endregion

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

@@ -7475,7 +7475,7 @@ export type CustomElements = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--metric-min-width`: Minimum width of each grid item. (default: `9rem`)
+   * - `--metric-min-width`: Minimum width of each grid item, clamped to the container width. (default: `9rem`)
    */
   "sigvelo-metric-grid": Partial<
     SigveloMetricGridProps & BaseProps<SigveloMetricGrid> & BaseEvents
@@ -11661,7 +11661,7 @@ export type CustomElementsSolidJs = {
    *
    * CSS variables available for styling the component.
    *
-   * - `--metric-min-width`: Minimum width of each grid item. (default: `9rem`)
+   * - `--metric-min-width`: Minimum width of each grid item, clamped to the container width. (default: `9rem`)
    */
   "sigvelo-metric-grid": Partial<
     SigveloMetricGridProps &
@@ -13608,7 +13608,7 @@ export type CustomCssProperties = {
   "--illustration-width"?: string;
   /** The visible height of the expander's content when collapsed. */
   "--preview-height"?: string;
-  /** Minimum width of each grid item. */
+  /** Minimum width of each grid item, clamped to the container width. */
   "--metric-min-width"?: string;
   /** The width of each line. Available when symbol is `hamburger` or `equals`. */
   "--line-width"?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/web-components",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "description": "Sigvelo SaaS web components built with Lit.",
   "keywords": [
     "custom-elements",
@@ -38,7 +38,7 @@
     "@floating-ui/dom": "^1.7.6",
     "lit": "^3.3.2",
     "lit-html": "^3.3.2",
-    "@mcp-b/wc-support": "0.2.0"
+    "@mcp-b/wc-support": "0.2.1"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.11.1",