@helixui/library 0.1.0

package/dist/shared/hx-meter-B5LOo0zD.js

@@ -0,0 +1,184 @@
+import { css as p, LitElement as v, html as f } from "lit";
+import { property as h, state as x, customElement as g } from "lit/decorators.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+import { styleMap as _ } from "lit/directives/style-map.js";
+import { t as b } from "./lit-Dpo7RLp4.js";
+const w = p`
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .meter {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-2, 0.5rem);
+    width: 100%;
+  }
+
+  .meter__label {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-meter-label-color, var(--hx-color-neutral-700, #374151));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .meter__track {
+    position: relative;
+    width: 100%;
+    height: var(--hx-meter-track-height, var(--hx-size-2, 0.5rem));
+    background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #e5e7eb));
+    border-radius: var(--hx-meter-track-radius, var(--hx-radius-full, 9999px));
+    overflow: hidden;
+  }
+
+  .meter__indicator {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    height: 100%;
+    border-radius: inherit;
+    background-color: var(--_indicator-color);
+    transition:
+      width var(--hx-duration-fast, 150ms) ease,
+      background-color var(--hx-duration-fast, 150ms) ease;
+  }
+
+  /* ─── Default (no thresholds configured) ─── */
+
+  :host {
+    --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #3b82f6));
+  }
+
+  /* ─── Semantic state colors ─── */
+
+  :host([data-state='optimum']) {
+    --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #22c55e));
+  }
+
+  :host([data-state='warning']) {
+    --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #f59e0b));
+  }
+
+  :host([data-state='danger']) {
+    --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-danger-500, #ef4444));
+  }
+
+  /* ─── Native meter hidden (we use custom rendering) ─── */
+
+  .meter__native {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+`;
+var y = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, n = (r, t, i, s) => {
+  for (var e = s > 1 ? void 0 : s ? $(t, i) : t, a = r.length - 1, l; a >= 0; a--)
+    (l = r[a]) && (e = (s ? l(t, i, e) : l(e)) || e);
+  return s && e && y(t, i, e), e;
+};
+let o = class extends v {
+  constructor() {
+    super(...arguments), this.value = 0, this.min = 0, this.max = 100, this._hasSlotContent = !1;
+  }
+  _clampedValue() {
+    return Math.min(Math.max(this.value, this.min), this.max);
+  }
+  _percentage() {
+    const r = this.max - this.min;
+    return r === 0 ? 0 : (this._clampedValue() - this.min) / r * 100;
+  }
+  _resolveState() {
+    const r = this._clampedValue(), t = this.low !== void 0, i = this.high !== void 0, s = this.optimum !== void 0;
+    if (!t && !i && !s) return "default";
+    const e = t && r < this.low, a = i && r > this.high, l = !e && !a;
+    if (!s)
+      return e || a ? "warning" : "optimum";
+    const c = this.optimum, d = t && c < this.low, u = i && c > this.high;
+    return !d && !u ? l ? "optimum" : "warning" : d ? e ? "optimum" : l ? "warning" : "danger" : a ? "optimum" : l ? "warning" : "danger";
+  }
+  _onLabelSlotChange(r) {
+    const t = r.target;
+    this._hasSlotContent = t.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  updated() {
+    this.dataset.state = this._resolveState();
+  }
+  render() {
+    const r = this._percentage(), t = this._resolveState(), i = this._clampedValue(), s = t !== "default" ? ` — ${t}` : "", e = `${i} of ${this.max}${s}`, a = this.label !== void 0 || this._hasSlotContent;
+    return f`
+      <div
+        part="base"
+        class="meter"
+        role="meter"
+        tabindex="0"
+        aria-valuenow=${i}
+        aria-valuemin=${this.min}
+        aria-valuemax=${this.max}
+        aria-valuetext=${e}
+        aria-label=${m(a ? void 0 : `${i} of ${this.max}`)}
+        aria-labelledby=${m(a ? "__hx-meter-label" : void 0)}
+      >
+        <span id="__hx-meter-label" part="label" class="meter__label" ?hidden=${!a}>
+          <slot name="label" @slotchange=${this._onLabelSlotChange}>${this.label ?? ""}</slot>
+        </span>
+        <div class="meter__track" part="track">
+          <div
+            part="indicator"
+            class="meter__indicator"
+            style=${_({ width: `${r}%` })}
+          ></div>
+        </div>
+        <meter
+          class="meter__native"
+          value=${i}
+          min=${this.min}
+          max=${this.max}
+          low=${m(this.low)}
+          high=${m(this.high)}
+          optimum=${m(this.optimum)}
+          aria-hidden="true"
+          tabindex="-1"
+        ></meter>
+      </div>
+    `;
+  }
+};
+o.styles = [b, w];
+n([
+  h({ type: Number, reflect: !0 })
+], o.prototype, "value", 2);
+n([
+  h({ type: Number, reflect: !0 })
+], o.prototype, "min", 2);
+n([
+  h({ type: Number, reflect: !0 })
+], o.prototype, "max", 2);
+n([
+  h({ type: Number, reflect: !0 })
+], o.prototype, "low", 2);
+n([
+  h({ type: Number, reflect: !0 })
+], o.prototype, "high", 2);
+n([
+  h({ type: Number, reflect: !0 })
+], o.prototype, "optimum", 2);
+n([
+  h({ type: String })
+], o.prototype, "label", 2);
+n([
+  x()
+], o.prototype, "_hasSlotContent", 2);
+o = n([
+  g("hx-meter")
+], o);
+export {
+  o as H
+};
+//# sourceMappingURL=hx-meter-B5LOo0zD.js.map

package/dist/shared/hx-meter-B5LOo0zD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-meter-B5LOo0zD.js","sources":["../../src/components/hx-meter/hx-meter.styles.ts","../../src/components/hx-meter/hx-meter.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixMeterStyles = css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .meter {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2, 0.5rem);\n    width: 100%;\n  }\n\n  .meter__label {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-meter-label-color, var(--hx-color-neutral-700, #374151));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .meter__track {\n    position: relative;\n    width: 100%;\n    height: var(--hx-meter-track-height, var(--hx-size-2, 0.5rem));\n    background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #e5e7eb));\n    border-radius: var(--hx-meter-track-radius, var(--hx-radius-full, 9999px));\n    overflow: hidden;\n  }\n\n  .meter__indicator {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    height: 100%;\n    border-radius: inherit;\n    background-color: var(--_indicator-color);\n    transition:\n      width var(--hx-duration-fast, 150ms) ease,\n      background-color var(--hx-duration-fast, 150ms) ease;\n  }\n\n  /* ─── Default (no thresholds configured) ─── */\n\n  :host {\n    --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #3b82f6));\n  }\n\n  /* ─── Semantic state colors ─── */\n\n  :host([data-state='optimum']) {\n    --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #22c55e));\n  }\n\n  :host([data-state='warning']) {\n    --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #f59e0b));\n  }\n\n  :host([data-state='danger']) {\n    --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-danger-500, #ef4444));\n  }\n\n  /* ─── Native meter hidden (we use custom rendering) ─── */\n\n  .meter__native {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixMeterStyles } from './hx-meter.styles.js';\n\ntype MeterState = 'optimum' | 'warning' | 'danger' | 'default';\n\n/**\n * A scalar measurement within a known range — e.g., disk usage, health score,\n * or any numeric value with defined min/max bounds. Supports low/high/optimum\n * threshold markers for semantic color feedback.\n *\n * @summary Scalar measurement gauge within a defined range.\n *\n * @tag hx-meter\n *\n * @slot label - Visible label rendered above the meter track. When using this\n *   slot without the `label` attribute, the accessible name is derived from the\n *   slot content via `aria-labelledby`. The `label` attribute is NOT required\n *   when slot content is provided — the component detects slot content and\n *   switches to `aria-labelledby` automatically.\n *\n * @csspart base - The outer wrapper element.\n * @csspart track - The unfilled track bar element.\n * @csspart indicator - The filled bar indicating the current value.\n * @csspart label - The label wrapper element.\n *\n * @cssprop [--hx-meter-track-height] - Height of the track bar.\n * @cssprop [--hx-meter-track-color] - Background color of the unfilled track.\n * @cssprop [--hx-meter-track-radius] - Border radius of the track.\n * @cssprop [--hx-meter-indicator-color] - Default filled bar color (no thresholds).\n * @cssprop [--hx-meter-color-optimum] - Color when value is in the optimum zone.\n * @cssprop [--hx-meter-color-warning] - Color when value is in a warning zone.\n * @cssprop [--hx-meter-color-danger] - Color when value is in the danger zone.\n * @cssprop [--hx-meter-label-color] - Label text color.\n */\n@customElement('hx-meter')\nexport class HelixMeter extends LitElement {\n  static override styles = [tokenStyles, helixMeterStyles];\n\n  /**\n   * Current value of the meter.\n   * @attr value\n   */\n  @property({ type: Number, reflect: true })\n  value = 0;\n\n  /**\n   * Minimum value of the range.\n   * @attr min\n   */\n  @property({ type: Number, reflect: true })\n  min = 0;\n\n  /**\n   * Maximum value of the range.\n   * @attr max\n   */\n  @property({ type: Number, reflect: true })\n  max = 100;\n\n  /**\n   * Threshold below which the value is considered suboptimal (lower range warning).\n   * @attr low\n   */\n  @property({ type: Number, reflect: true })\n  low?: number;\n\n  /**\n   * Threshold above which the value is considered suboptimal (upper range warning).\n   * @attr high\n   */\n  @property({ type: Number, reflect: true })\n  high?: number;\n\n  /**\n   * The optimal value within the range. Used to determine which zone is \"good\".\n   * @attr optimum\n   */\n  @property({ type: Number, reflect: true })\n  optimum?: number;\n\n  /**\n   * Accessible label for the meter. Used as the visible label text and as\n   * the source for `aria-labelledby`. When only slot content is provided\n   * (no `label` attribute), the slot content is used for the accessible name.\n   * @attr label\n   */\n  @property({ type: String })\n  label?: string;\n\n  @state()\n  private _hasSlotContent = false;\n\n  private _clampedValue(): number {\n    return Math.min(Math.max(this.value, this.min), this.max);\n  }\n\n  private _percentage(): number {\n    const range = this.max - this.min;\n    if (range === 0) return 0;\n    return ((this._clampedValue() - this.min) / range) * 100;\n  }\n\n  private _resolveState(): MeterState {\n    const v = this._clampedValue();\n    const hasLow = this.low !== undefined;\n    const hasHigh = this.high !== undefined;\n    const hasOptimum = this.optimum !== undefined;\n\n    if (!hasLow && !hasHigh && !hasOptimum) return 'default';\n\n    const inLowZone = hasLow && v < this.low!;\n    const inHighZone = hasHigh && v > this.high!;\n    const inMiddleZone = !inLowZone && !inHighZone;\n\n    if (!hasOptimum) {\n      if (inLowZone || inHighZone) return 'warning';\n      return 'optimum';\n    }\n\n    const opt = this.optimum!;\n    const optimumInLow = hasLow && opt < this.low!;\n    const optimumInHigh = hasHigh && opt > this.high!;\n    const optimumInMiddle = !optimumInLow && !optimumInHigh;\n\n    if (optimumInMiddle) {\n      if (inMiddleZone) return 'optimum';\n      return 'warning';\n    } else if (optimumInLow) {\n      if (inLowZone) return 'optimum';\n      if (inMiddleZone) return 'warning';\n      return 'danger';\n    } else {\n      // optimumInHigh\n      if (inHighZone) return 'optimum';\n      if (inMiddleZone) return 'warning';\n      return 'danger';\n    }\n  }\n\n  private _onLabelSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasSlotContent = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  override updated() {\n    // Set data-state on host so :host([data-state]) CSS selectors work\n    this.dataset['state'] = this._resolveState();\n  }\n\n  override render() {\n    const pct = this._percentage();\n    const state = this._resolveState();\n    const clampedValue = this._clampedValue();\n    const stateLabel = state !== 'default' ? ` — ${state}` : '';\n    const ariaValuetext = `${clampedValue} of ${this.max}${stateLabel}`;\n    const hasVisibleLabel = this.label !== undefined || this._hasSlotContent;\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"meter\"\n        role=\"meter\"\n        tabindex=\"0\"\n        aria-valuenow=${clampedValue}\n        aria-valuemin=${this.min}\n        aria-valuemax=${this.max}\n        aria-valuetext=${ariaValuetext}\n        aria-label=${ifDefined(!hasVisibleLabel ? `${clampedValue} of ${this.max}` : undefined)}\n        aria-labelledby=${ifDefined(hasVisibleLabel ? '__hx-meter-label' : undefined)}\n      >\n        <span id=\"__hx-meter-label\" part=\"label\" class=\"meter__label\" ?hidden=${!hasVisibleLabel}>\n          <slot name=\"label\" @slotchange=${this._onLabelSlotChange}>${this.label ?? ''}</slot>\n        </span>\n        <div class=\"meter__track\" part=\"track\">\n          <div\n            part=\"indicator\"\n            class=\"meter__indicator\"\n            style=${styleMap({ width: `${pct}%` })}\n          ></div>\n        </div>\n        <meter\n          class=\"meter__native\"\n          value=${clampedValue}\n          min=${this.min}\n          max=${this.max}\n          low=${ifDefined(this.low)}\n          high=${ifDefined(this.high)}\n          optimum=${ifDefined(this.optimum)}\n          aria-hidden=\"true\"\n          tabindex=\"-1\"\n        ></meter>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-meter': HelixMeter;\n  }\n}\n"],"names":["helixMeterStyles","css","HelixMeter","LitElement","range","v","hasLow","hasHigh","hasOptimum","inLowZone","inHighZone","inMiddleZone","opt","optimumInLow","optimumInHigh","e","slot","pct","state","clampedValue","stateLabel","ariaValuetext","hasVisibleLabel","html","ifDefined","styleMap","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}