@htmlbricks/hb-gauge 0.71.35 → 0.71.37

package/README.md

@@ -1,34 +1,53 @@
-## `hb-gauge` — gauge
+# hb-gauge
 
-**Category:** data  
-**Tags:** data, chart
+**Category:** data · **Tags:** data, chart
 
-### What it does
+## Summary
 
-SVG gauge wrapper around JustGage: pass JustGage-compatible options as JSON (`value`, min/max, labels, colors, etc.). The gauge is created on the shadow host after mount, destroyed on teardown, and recreated when `options` changes or the window resizes (debounced) so it stays sized correctly.
+**JustGage** SVG gauge inside the shadow root: pass **`options`** as JSON (or object from JS). Created on mount, destroyed on teardown, recreated on window **resize** (200 ms debounce) and when **`options`** is reparsed from a string.
 
-### Custom element
+## Custom element
 
 `hb-gauge`
 
-### Attributes (snake_case; use string values in HTML)
+## Attributes
 
-- `id` — optional string  
-- `style` — optional string  
-- `options` — required string (JSON object; at minimum `value`, `min`, `max`; additional keys follow JustGage)
+| Attribute | Type (logical) | HTML / notes |
+| --- | --- | --- |
+| `options` | `string` \| `GaugeOptions` | **Required** for a useful chart. Merged with `{ element: #gauge }` before JustGage. Minimum: **`value`**, **`min`**, **`max`**; extra keys follow JustGage. |
+| `id` | `string` (optional) | |
+| `style` | `string` (optional) | Typings only; host `style` still applies to `<hb-gauge>`. |
 
-### Events
+## Custom events
 
-None declared on the component type.
+**None** — `Events` is `{}`.
 
-### Usage notes
+## Styling
 
-CSS part: `gauge`. `options` may be passed as a JSON string; the component parses it when needed.
+### CSS custom properties (`extra/docs.ts`)
 
-### Minimal HTML example
+| Variable | Role |
+| --- | --- |
+| `--hb-gauge-min-height` | Reserved vertical space on `:host` before paint. |
+
+### CSS parts (`extra/docs.ts`)
+
+| Part | Role |
+| --- | --- |
+| `gauge` | Mount node `#gauge` (`width: 100%`). |
+
+### Slots
+
+**None.**
+
+Bulma is bundled for consistency; the visible dial is SVG from JustGage.
+
+## TypeScript
+
+`types/webcomponent.type.d.ts` — `Component`, `IGauge`, `GaugeOptions`, `Events`.
+
+## Minimal HTML example
 
 ```html
-<hb-gauge
-  options="{&quot;value&quot;:50,&quot;min&quot;:0,&quot;max&quot;:100}"
-></hb-gauge>
+<hb-gauge options='{"value":50,"min":0,"max":100}'></hb-gauge>
 ```

package/manifest.json

@@ -21,7 +21,15 @@
               "type": "string"
             },
             "options": {
-              "$ref": "#/definitions/IGauge"
+              "anyOf": [
+                {
+                  "type": "string"
+                },
+                {
+                  "$ref": "#/definitions/GaugeOptions"
+                }
+              ],
+              "description": "JSON string from HTML, or an object when set from JavaScript."
             },
             "style": {
               "type": "string"
@@ -32,8 +40,8 @@
           ],
           "type": "object"
         },
-        "IGauge": {
-          "additionalProperties": false,
+        "GaugeOptions": {
+          "description": "JustGage constructor options merged with `{ element }` in the component.",
           "properties": {
             "max": {
               "type": "number"
@@ -46,9 +54,9 @@
             }
           },
           "required": [
-            "value",
+            "max",
             "min",
-            "max"
+            "value"
           ],
           "type": "object"
         }
@@ -64,11 +72,18 @@
     }
   },
   "styleSetup": {
-    "vars": [],
+    "vars": [
+      {
+        "name": "--hb-gauge-min-height",
+        "valueType": "number",
+        "defaultValue": "0",
+        "description": "Minimum height of the host element before JustGage draws."
+      }
+    ],
     "parts": [
       {
         "name": "gauge",
-        "description": ""
+        "description": "JustGage mount node (`#gauge`); style width/height or overflow for the SVG gauge."
       }
     ]
   },
@@ -141,5 +156,5 @@
   "size": {},
   "iifePath": "main.iife.js",
   "repoName": "@htmlbricks/hb-gauge",
-  "version": "0.71.35"
+  "version": "0.71.37"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlbricks/hb-gauge",
-  "version": "0.71.35",
+  "version": "0.71.37",
   "contributors": [],
   "description": "SVG gauge wrapper around JustGage: pass JustGage-compatible options as JSON (`value`, min/max, labels, colors, etc.). The gauge is created on the shadow host after mount, destroyed on teardown, and recreated when `options` changes or the window resizes (debounced) so it stays sized correctly.",
   "licenses": [

package/types/webcomponent.type.d.json

@@ -9,7 +9,15 @@
           "type": "string"
         },
         "options": {
-          "$ref": "#/definitions/IGauge"
+          "anyOf": [
+            {
+              "type": "string"
+            },
+            {
+              "$ref": "#/definitions/GaugeOptions"
+            }
+          ],
+          "description": "JSON string from HTML, or an object when set from JavaScript."
         },
         "style": {
           "type": "string"
@@ -20,8 +28,8 @@
       ],
       "type": "object"
     },
-    "IGauge": {
-      "additionalProperties": false,
+    "GaugeOptions": {
+      "description": "JustGage constructor options merged with `{ element }` in the component.",
       "properties": {
         "max": {
           "type": "number"
@@ -34,9 +42,9 @@
         }
       },
       "required": [
-        "value",
+        "max",
         "min",
-        "max"
+        "value"
       ],
       "type": "object"
     }

package/types/webcomponent.type.d.ts

@@ -4,10 +4,14 @@ export type IGauge = {
 	max: number;
 };
 
+/** JustGage constructor options merged with `{ element }` in the component. */
+export type GaugeOptions = IGauge & Record<string, unknown>;
+
 export type Component = {
 	id?: string;
 	style?: string;
-	options: IGauge;
+	/** JSON string from HTML, or an object when set from JavaScript. */
+	options: string | GaugeOptions;
 };
 
 export type Events = {};