gaugeit.js 0.1.0

package/dist/gaugeit.css

@@ -0,0 +1,300 @@
+/* Gaugeit.js baseline styles. Visual geometry is rendered by SVG; CSS only handles layout and integration. */
+.gaugeit-host {
+  display: block;
+  min-width: 0;
+  width: var(--gaugeit-width, auto);
+  height: var(--gaugeit-height, auto);
+  aspect-ratio: var(--gaugeit-aspect-ratio, auto);
+}
+
+.gaugeit {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  color: var(--gaugeit-text-color, inherit);
+  font-family: var(--gaugeit-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+  contain: layout style;
+}
+
+.gaugeit__svg {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: pan-y;
+}
+
+.gaugeit__pointer-rotating,
+.gaugeit__linear-indicator-moving,
+.gaugeit__tape-slot {
+  will-change: transform;
+}
+
+.gaugeit__pointer,
+.gaugeit__pointer-cap,
+.gaugeit__linear-indicator,
+.gaugeit__linear-indicator-cap,
+.gaugeit__tape-window,
+.gaugeit__tape-window-inner,
+.gaugeit__tape-indicator,
+.gaugeit__zero-marker,
+.gaugeit__ticks,
+.gaugeit__zone,
+.gaugeit__track {
+  shape-rendering: geometricPrecision;
+}
+
+.gaugeit__label,
+.gaugeit__readout,
+.gaugeit__tape-label {
+  paint-order: stroke fill;
+  font-variant-numeric: tabular-nums;
+}
+
+gauge-it {
+  display: block;
+  min-width: 0;
+}
+
+.gaugeit-element__mount {
+  display: block;
+  width: 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gaugeit__pointer-rotating,
+  .gaugeit__linear-indicator-moving,
+  .gaugeit__tape-slot {
+    will-change: auto;
+  }
+}
+
+@media (forced-colors: active) {
+  .gaugeit__pointer,
+  .gaugeit__pointer-cap,
+  .gaugeit__linear-indicator,
+  .gaugeit__linear-indicator-cap,
+  .gaugeit__tape-window,
+  .gaugeit__tape-window-inner,
+  .gaugeit__tape-indicator,
+  .gaugeit__zero-marker,
+  .gaugeit__ticks,
+  .gaugeit__label,
+  .gaugeit__readout,
+  .gaugeit__light {
+    forced-color-adjust: auto;
+  }
+}
+
+/* Intrinsic mode grows with the computed SVG viewBox; contain mode fits a fixed host box. */
+.gaugeit--layout-intrinsic {
+  height: auto;
+}
+
+.gaugeit--layout-contain {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.gaugeit--layout-contain .gaugeit__svg {
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+}
+
+/* Shared SVG annunciator lamp. Colors are themeable through CSS variables or light.customColor. */
+.gaugeit__light {
+  --gaugeit-light-core: #f59e0b;
+  --gaugeit-light-highlight: #fde68a;
+  --gaugeit-light-glow: #fbbf24;
+  --gaugeit-light-rim: #92400e;
+  --gaugeit-light-off: #3f2d12;
+  --gaugeit-light-opacity: 1;
+  pointer-events: none;
+  opacity: var(--gaugeit-light-opacity);
+}
+
+.gaugeit__light--red {
+  --gaugeit-light-core: #ef4444;
+  --gaugeit-light-highlight: #fecaca;
+  --gaugeit-light-glow: #f87171;
+  --gaugeit-light-rim: #7f1d1d;
+  --gaugeit-light-off: #3f1c1c;
+}
+
+.gaugeit__light--green {
+  --gaugeit-light-core: #22c55e;
+  --gaugeit-light-highlight: #bbf7d0;
+  --gaugeit-light-glow: #4ade80;
+  --gaugeit-light-rim: #14532d;
+  --gaugeit-light-off: #182c1e;
+}
+
+.gaugeit__light--blue {
+  --gaugeit-light-core: #3b82f6;
+  --gaugeit-light-highlight: #bfdbfe;
+  --gaugeit-light-glow: #60a5fa;
+  --gaugeit-light-rim: #1e3a8a;
+  --gaugeit-light-off: #1b2438;
+}
+
+.gaugeit__light--amber {
+  --gaugeit-light-core: #f59e0b;
+  --gaugeit-light-highlight: #fde68a;
+  --gaugeit-light-glow: #fbbf24;
+  --gaugeit-light-rim: #92400e;
+  --gaugeit-light-off: #3f2d12;
+}
+
+.gaugeit__light--yellow {
+  --gaugeit-light-core: #fde047;
+  --gaugeit-light-highlight: #fef9c3;
+  --gaugeit-light-glow: #facc15;
+  --gaugeit-light-rim: #a16207;
+  --gaugeit-light-off: #443a16;
+}
+
+.gaugeit__light--orange {
+  --gaugeit-light-core: #f97316;
+  --gaugeit-light-highlight: #fed7aa;
+  --gaugeit-light-glow: #fb923c;
+  --gaugeit-light-rim: #9a3412;
+  --gaugeit-light-off: #462515;
+}
+
+.gaugeit__light--white {
+  --gaugeit-light-core: #f8fafc;
+  --gaugeit-light-highlight: #ffffff;
+  --gaugeit-light-glow: #e2e8f0;
+  --gaugeit-light-rim: #64748b;
+  --gaugeit-light-off: #3f4955;
+}
+
+.gaugeit__light--halogen {
+  --gaugeit-light-core: #fff2bf;
+  --gaugeit-light-highlight: #fffdf0;
+  --gaugeit-light-glow: #ffe79a;
+  --gaugeit-light-rim: #9a7b24;
+  --gaugeit-light-off: #4d4326;
+}
+
+.gaugeit__light--cyan {
+  --gaugeit-light-core: #22d3ee;
+  --gaugeit-light-highlight: #cffafe;
+  --gaugeit-light-glow: #67e8f9;
+  --gaugeit-light-rim: #155e75;
+  --gaugeit-light-off: #18343a;
+}
+
+.gaugeit__light--brown {
+  --gaugeit-light-core: #a16207;
+  --gaugeit-light-highlight: #f5d0a1;
+  --gaugeit-light-glow: #d6a56b;
+  --gaugeit-light-rim: #5b3b10;
+  --gaugeit-light-off: #332617;
+}
+
+.gaugeit__light-emission {
+  pointer-events: none;
+  transition: opacity 150ms ease;
+}
+
+.gaugeit__light-emission--off {
+  opacity: var(--gaugeit-light-opacity, 1);
+}
+
+.gaugeit__light-emission--on {
+  opacity: 0;
+}
+
+.gaugeit__light-glow {
+  opacity: 0.76;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.gaugeit__light:not(.has-glow) .gaugeit__light-glow {
+  display: none;
+}
+
+.gaugeit__light-bezel,
+.gaugeit__light-bezel-highlight,
+.gaugeit__light-bulb,
+.gaugeit__light-lens-shade,
+.gaugeit__light-sparkle {
+  shape-rendering: geometricPrecision;
+}
+
+.gaugeit__light-bulb {
+  transform-box: fill-box;
+  transform-origin: center;
+  transition: filter 150ms ease;
+}
+
+.gaugeit__light.is-on:not(.is-blinking) .gaugeit__light-emission--off {
+  opacity: 0;
+}
+
+.gaugeit__light.is-on:not(.is-blinking) .gaugeit__light-emission--on {
+  opacity: var(--gaugeit-light-opacity, 1);
+}
+
+.gaugeit__light.is-on .gaugeit__light-bulb--on {
+  filter: saturate(1.08) brightness(1.05);
+}
+
+.gaugeit__light.is-pulsing .gaugeit__light-glow {
+  animation: gaugeit-light-pulse-glow var(--gaugeit-light-pulse-duration, 2600ms) ease-in-out infinite;
+}
+
+.gaugeit__light.is-pulsing .gaugeit__light-bulb--on {
+  animation: gaugeit-light-pulse-lens var(--gaugeit-light-pulse-duration, 2600ms) ease-in-out infinite;
+}
+
+.gaugeit__light.is-on.is-blinking .gaugeit__light-emission--on {
+  animation: gaugeit-light-blink-on var(--gaugeit-light-blink-duration, 1000ms) step-end infinite;
+}
+
+.gaugeit__light.is-on.is-blinking .gaugeit__light-emission--off {
+  animation: gaugeit-light-blink-off var(--gaugeit-light-blink-duration, 1000ms) step-end infinite;
+}
+
+@keyframes gaugeit-light-pulse-glow {
+  0%, 100% { opacity: 0.72; transform: scale(0.99); }
+  50% { opacity: 0.8; transform: scale(1.015); }
+}
+
+@keyframes gaugeit-light-pulse-lens {
+  0%, 100% { filter: saturate(1.06) brightness(1.04); }
+  50% { filter: saturate(1.1) brightness(1.07); }
+}
+
+@keyframes gaugeit-light-blink-on {
+  0%, 48% { opacity: var(--gaugeit-light-opacity, 1); }
+  49%, 100% { opacity: 0; }
+}
+
+@keyframes gaugeit-light-blink-off {
+  0%, 48% { opacity: 0; }
+  49%, 100% { opacity: var(--gaugeit-light-opacity, 1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gaugeit__light.is-blinking .gaugeit__light-emission,
+  .gaugeit__light.is-pulsing .gaugeit__light-glow,
+  .gaugeit__light.is-pulsing .gaugeit__light-bulb--on {
+    animation: none;
+  }
+
+  .gaugeit__light.is-on.is-blinking .gaugeit__light-emission--off {
+    opacity: 0;
+  }
+
+  .gaugeit__light.is-on.is-blinking .gaugeit__light-emission--on {
+    opacity: var(--gaugeit-light-opacity, 1);
+  }
+}