Update demos

docs/src/app/(private)/experiments/meter.module.css

@@ -48,4 +48,5 @@
 .Indicator {
   background-color: rgb(40, 205, 65);
   border-radius: 3px;
+  height: revert-layer !important;
 }

docs/src/app/(private)/experiments/meter.tsx

@@ -1,13 +1,30 @@
 'use client';
 import * as React from 'react';
 import { Meter } from '@base-ui-components/react/meter';
+import {
+  SettingsMetadata,
+  useExperimentSettings,
+} from '../../../components/Experiments/SettingsPanel';
 import styles from './meter.module.css';
 
+interface Settings {
+  value: number;
+}
+
+export const settingsMetadata: SettingsMetadata<Settings> = {
+  value: {
+    type: 'number',
+    label: 'Value',
+    default: 77,
+  },
+};
+
 export default function BatteryMeter() {
+  const { settings } = useExperimentSettings<Settings>();
   return (
     <Meter.Root
       className={styles.Root}
-      value={77}
+      value={settings.value}
       aria-label="Battery percentage remaining"
     >
       <Meter.Track className={styles.Track}>

docs/src/app/(public)/(content)/react/components/meter/demos/hero/css-modules/index.module.css

@@ -0,0 +1,15 @@
+.Track {
+  width: 12rem;
+  display: block;
+  overflow: hidden;
+  background-color: var(--color-gray-200);
+  box-shadow: inset 0 0 0 1px var(--color-gray-200);
+  height: 0.25rem;
+  border-radius: 0.25rem;
+}
+
+.Indicator {
+  display: block;
+  background-color: var(--color-gray-500);
+  transition: width 500ms;
+}

docs/src/app/(public)/(content)/react/components/meter/demos/hero/css-modules/index.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Meter } from '@base-ui-components/react/meter';
+import styles from './index.module.css';
+
+export default function ExampleMeter() {
+  return (
+    <Meter.Root value={80}>
+      <Meter.Track className={styles.Track}>
+        <Meter.Indicator className={styles.Indicator} />
+      </Meter.Track>
+    </Meter.Root>
+  );
+}

docs/src/app/(public)/(content)/react/components/meter/demos/hero/index.ts

@@ -0,0 +1,2 @@
+'use client';
+export { default as CssModules } from './css-modules';

docs/src/app/(public)/(content)/react/components/meter/page.mdx

@@ -6,6 +6,8 @@
   content="A high-quality, unstyled React meter component that provides a graphical display of a numeric value."
 />
 
+<Demo path="./demos/hero" />
+
 ## API reference
 
 Import the component and assemble its parts:

packages/react/src/meter/indicator/MeterIndicator.tsx

@@ -24,7 +24,7 @@ const MeterIndicator = React.forwardRef(function MeterIndicator(
   const getStyles = React.useCallback(() => {
     return {
       insetInlineStart: 0,
-      // height: 'inherit',
+      height: 'inherit',
       width: `${percentageValue}%`,
     };
   }, [percentageValue]);