@quilltap/theme-storybook 1.0.66 → 1.0.68

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to `@quilltap/theme-storybook` will be documented in this file.
 
+## [1.0.67] - 2026-08-30
+
+### Added
+- `.qt-range` and its two tokens (`--qt-range-accent`, `--qt-range-focus-ring`), mirroring the app's new slider class, plus a "Range Sliders" section in the `Inputs` story so a theme can be previewed against an enabled and a disabled slider.
+
+### Notes
+- Sliders stay natively rendered. `accent-color` is what paints the filled portion of the track *and* the thumb, so it is the whole default theming story; the class sets no disabled opacity, because browsers already drop the accent on a disabled range and app call sites nest sliders inside dimmed wrappers. A theme wanting a bespoke track can override `.qt-range` with `appearance: none`, at the cost of the filled bar in Chrome and Safari.
+
 ## [1.0.63] - 2026-08-25
 
 ### Added

package/dist/{chunk-PCPCAOQ7.mjs → chunk-IAVNW2EO.mjs}

@@ -848,6 +848,28 @@ var Inputs = () => {
         ] })
       ] })
     ] }),
+    /* @__PURE__ */ jsxs7("section", { style: { marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ jsx7("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Range Sliders" }),
+      /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "24rem" }, children: [
+        /* @__PURE__ */ jsxs7("div", { children: [
+          /* @__PURE__ */ jsx7("label", { className: "qt-label", htmlFor: "range1", children: "Temperature" }),
+          /* @__PURE__ */ jsx7("input", { type: "range", id: "range1", className: "qt-range", style: { width: "100%" }, min: 0, max: 100, defaultValue: 65 })
+        ] }),
+        /* @__PURE__ */ jsxs7("div", { children: [
+          /* @__PURE__ */ jsx7("label", { className: "qt-label", htmlFor: "range2", style: { color: "var(--color-muted-foreground)" }, children: "Disabled slider" }),
+          /* @__PURE__ */ jsx7("input", { type: "range", id: "range2", className: "qt-range", style: { width: "100%" }, min: 0, max: 100, defaultValue: 35, disabled: true })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs7("p", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)", marginTop: "0.75rem", maxWidth: "32rem" }, children: [
+        "Sliders render natively; ",
+        /* @__PURE__ */ jsx7("code", { children: "--qt-range-accent" }),
+        " colours both the filled portion of the track and the thumb. Overriding ",
+        /* @__PURE__ */ jsx7("code", { children: ".qt-range" }),
+        " with",
+        /* @__PURE__ */ jsx7("code", { children: " appearance: none" }),
+        " gives a theme full control of the track, but drops the filled bar in Chrome and Safari."
+      ] })
+    ] }),
     /* @__PURE__ */ jsxs7("section", { style: { marginBottom: "2rem" }, children: [
       /* @__PURE__ */ jsx7("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Links" }),
       /* @__PURE__ */ jsxs7("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [

package/dist/index.css

@@ -230,6 +230,8 @@ body {
   --qt-radio-border: var(--color-border);
   --qt-radio-accent: var(--color-primary);
   --qt-radio-focus-ring: var(--color-ring);
+  --qt-range-accent: var(--color-primary);
+  --qt-range-focus-ring: var(--color-ring);
   --qt-navbar-height: 3.5rem;
   --qt-navbar-bg: var(--color-background);
   --qt-navbar-border: var(--color-border);
@@ -852,6 +854,17 @@ body {
   outline: none;
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--qt-radio-focus-ring) 35%, transparent);
 }
+.qt-range {
+  cursor: pointer;
+  accent-color: var(--qt-range-accent);
+}
+.qt-range:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--qt-range-focus-ring) 35%, transparent);
+}
+.qt-range:disabled {
+  cursor: not-allowed;
+}
 .qt-badge {
   display: inline-flex;
   align-items: center;
@@ -933,6 +946,26 @@ body {
   color: var(--qt-status-info-fg);
   border: 1px solid var(--qt-status-info-border);
 }
+.qt-danger-badge {
+  --qt-concierge-badge-color: var(--color-destructive, #dc2626);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  background: color-mix(in srgb, var(--qt-concierge-badge-color) 15%, transparent);
+  color: var(--qt-concierge-badge-color);
+  border: 1px solid color-mix(in srgb, var(--qt-concierge-badge-color) 40%, transparent);
+}
+.qt-danger-badge-muted {
+  --qt-concierge-badge-color: var(--color-muted-foreground, #6b7280);
+}
+.qt-danger-badge-info {
+  --qt-concierge-badge-color: var(--color-info, #2563eb);
+}
 .qt-badge-wardrobe-top,
 .qt-badge-wardrobe-bottom,
 .qt-badge-wardrobe-footwear,

package/dist/index.js

@@ -958,6 +958,28 @@ var Inputs = () => {
         ] })
       ] })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Range Sliders" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "24rem" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "qt-label", htmlFor: "range1", children: "Temperature" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "range", id: "range1", className: "qt-range", style: { width: "100%" }, min: 0, max: 100, defaultValue: 65 })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "qt-label", htmlFor: "range2", style: { color: "var(--color-muted-foreground)" }, children: "Disabled slider" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "range", id: "range2", className: "qt-range", style: { width: "100%" }, min: 0, max: 100, defaultValue: 35, disabled: true })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)", marginTop: "0.75rem", maxWidth: "32rem" }, children: [
+        "Sliders render natively; ",
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { children: "--qt-range-accent" }),
+        " colours both the filled portion of the track and the thumb. Overriding ",
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { children: ".qt-range" }),
+        " with",
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("code", { children: " appearance: none" }),
+        " gives a theme full control of the track, but drops the filled bar in Chrome and Safari."
+      ] })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Links" }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [

package/dist/index.mjs

@@ -21,7 +21,7 @@ import {
   ThemeComparison,
   Typography,
   Workspace
-} from "./chunk-PCPCAOQ7.mjs";
+} from "./chunk-IAVNW2EO.mjs";
 import "./chunk-WUKYLWAZ.mjs";
 
 // src/preview.tsx

package/dist/stories/index.js

@@ -895,6 +895,28 @@ var Inputs = () => {
         ] })
       ] })
     ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Range Sliders" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "24rem" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "qt-label", htmlFor: "range1", children: "Temperature" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "range", id: "range1", className: "qt-range", style: { width: "100%" }, min: 0, max: 100, defaultValue: 65 })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { className: "qt-label", htmlFor: "range2", style: { color: "var(--color-muted-foreground)" }, children: "Disabled slider" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "range", id: "range2", className: "qt-range", style: { width: "100%" }, min: 0, max: 100, defaultValue: 35, disabled: true })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { style: { fontSize: "0.75rem", color: "var(--color-muted-foreground)", marginTop: "0.75rem", maxWidth: "32rem" }, children: [
+        "Sliders render natively; ",
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { children: "--qt-range-accent" }),
+        " colours both the filled portion of the track and the thumb. Overriding ",
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { children: ".qt-range" }),
+        " with",
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("code", { children: " appearance: none" }),
+        " gives a theme full control of the track, but drops the filled bar in Chrome and Safari."
+      ] })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { style: { marginBottom: "2rem" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: { fontSize: "1.125rem", fontWeight: 700, marginBottom: "1rem", borderBottom: "1px solid var(--color-border)", paddingBottom: "0.5rem" }, children: "Links" }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "0.75rem" }, children: [

package/dist/stories/index.mjs

@@ -21,7 +21,7 @@ import {
   ThemeComparison,
   Typography,
   Workspace
-} from "../chunk-PCPCAOQ7.mjs";
+} from "../chunk-IAVNW2EO.mjs";
 import "../chunk-WUKYLWAZ.mjs";
 export {
   Avatars,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quilltap/theme-storybook",
-  "version": "1.0.66",
+  "version": "1.0.68",
   "description": "Storybook preset and stories for developing Quilltap theme plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/css/qt-components.css

@@ -83,6 +83,12 @@
   --qt-radio-accent: var(--color-primary);
   --qt-radio-focus-ring: var(--color-ring);
 
+  /* Range slider variables. Sliders stay natively rendered: accent-color paints
+     the filled track and the thumb, which `appearance: none` would discard in
+     Chrome and Safari. */
+  --qt-range-accent: var(--color-primary);
+  --qt-range-focus-ring: var(--color-ring);
+
   /* Navbar variables */
   --qt-navbar-height: 3.5rem;
   --qt-navbar-bg: var(--color-background);
@@ -873,6 +879,31 @@
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--qt-radio-focus-ring) 35%, transparent);
 }
 
+/* ==========================================================================
+   RANGE (SLIDER) COMPONENT
+   Natively rendered on purpose — accent-color paints the filled portion of the
+   track and the thumb. Do not reimplement with appearance:none plus custom
+   ::-webkit-slider-thumb / ::-moz-range-thumb rules: that discards the filled
+   bar in Chrome and Safari. Call sites own width/layout.
+   ========================================================================== */
+
+.qt-range {
+  cursor: pointer;
+  accent-color: var(--qt-range-accent);
+}
+
+.qt-range:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--qt-range-focus-ring) 35%, transparent);
+}
+
+/* No disabled opacity on purpose: browsers already drop the accent on a
+   disabled range, and app call sites nest these inside dimmed wrappers where a
+   second 50% would compound to 25%. */
+.qt-range:disabled {
+  cursor: not-allowed;
+}
+
 /* ==========================================================================
    BADGE COMPONENTS
    ========================================================================== */
@@ -1001,6 +1032,41 @@
   border: 1px solid var(--qt-status-info-border);
 }
 
+/* ==========================================================================
+   CONCIERGE BADGE (Salon breadcrumb header)
+   ========================================================================== */
+
+/**
+ * Concierge badge for the Salon breadcrumb header. Parameterized over one
+ * CSS var so the four-state family is a recolor, not four rules: the base
+ * is the red Flagged pill; the modifiers below recolor it for the two
+ * operator states (Monitored renders no badge at all).
+ */
+.qt-danger-badge {
+  --qt-concierge-badge-color: var(--color-destructive, #dc2626);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: 500;
+  background: color-mix(in srgb, var(--qt-concierge-badge-color) 15%, transparent);
+  color: var(--qt-concierge-badge-color);
+  border: 1px solid color-mix(in srgb, var(--qt-concierge-badge-color) 40%, transparent);
+}
+
+/* Vouched Safe — no colour: the Concierge isn't in the room. */
+.qt-danger-badge-muted {
+  --qt-concierge-badge-color: var(--color-muted-foreground, #6b7280);
+}
+
+/* Uncensored — the eye you closed yourself. */
+.qt-danger-badge-info {
+  --qt-concierge-badge-color: var(--color-info, #2563eb);
+}
+
 /* ==========================================================================
    WARDROBE SLOT BADGES
    ========================================================================== */

package/src/stories/components/Inputs.tsx

@@ -102,6 +102,29 @@ export const Inputs: React.FC = () => {
         </div>
       </section>
 
+      {/* Range sliders */}
+      <section style={{ marginBottom: '2rem' }}>
+        <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>
+          Range Sliders
+        </h3>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: '24rem' }}>
+          <div>
+            <label className="qt-label" htmlFor="range1">Temperature</label>
+            <input type="range" id="range1" className="qt-range" style={{ width: '100%' }} min={0} max={100} defaultValue={65} />
+          </div>
+          <div>
+            <label className="qt-label" htmlFor="range2" style={{ color: 'var(--color-muted-foreground)' }}>Disabled slider</label>
+            <input type="range" id="range2" className="qt-range" style={{ width: '100%' }} min={0} max={100} defaultValue={35} disabled />
+          </div>
+        </div>
+        <p style={{ fontSize: '0.75rem', color: 'var(--color-muted-foreground)', marginTop: '0.75rem', maxWidth: '32rem' }}>
+          Sliders render natively; <code>--qt-range-accent</code> colours both the filled
+          portion of the track and the thumb. Overriding <code>.qt-range</code> with
+          <code> appearance: none</code> gives a theme full control of the track, but drops
+          the filled bar in Chrome and Safari.
+        </p>
+      </section>
+
       {/* Links */}
       <section style={{ marginBottom: '2rem' }}>
         <h3 style={{ fontSize: '1.125rem', fontWeight: 700, marginBottom: '1rem', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.5rem' }}>