@oxy.so/bloom 2.10.0 → 2.11.0

package/lib/commonjs/styles/index.js

@@ -3,6 +3,42 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "AAA_TEXT_CONTRAST", {
+  enumerable: true,
+  get: function () {
+    return _colorContrast.AAA_TEXT_CONTRAST;
+  }
+});
+Object.defineProperty(exports, "AA_GRAPHICAL", {
+  enumerable: true,
+  get: function () {
+    return _surfaceLevels.AA_GRAPHICAL;
+  }
+});
+Object.defineProperty(exports, "AA_LARGE_TEXT_CONTRAST", {
+  enumerable: true,
+  get: function () {
+    return _colorContrast.AA_LARGE_TEXT_CONTRAST;
+  }
+});
+Object.defineProperty(exports, "AA_TEXT", {
+  enumerable: true,
+  get: function () {
+    return _surfaceLevels.AA_TEXT;
+  }
+});
+Object.defineProperty(exports, "AA_TEXT_CONTRAST", {
+  enumerable: true,
+  get: function () {
+    return _colorContrast.AA_TEXT_CONTRAST;
+  }
+});
+Object.defineProperty(exports, "AA_TEXT_STRONG", {
+  enumerable: true,
+  get: function () {
+    return _surfaceLevels.AA_TEXT_STRONG;
+  }
+});
 Object.defineProperty(exports, "BREAKPOINTS", {
   enumerable: true,
   get: function () {
@@ -15,6 +51,30 @@ Object.defineProperty(exports, "SUPPORTS_NATIVE_DRIVER", {
     return _nativeDriver.SUPPORTS_NATIVE_DRIVER;
   }
 });
+Object.defineProperty(exports, "SURFACE_FILL_CSS", {
+  enumerable: true,
+  get: function () {
+    return _surfaceLevels.SURFACE_FILL_CSS;
+  }
+});
+Object.defineProperty(exports, "SURFACE_FILL_VAR", {
+  enumerable: true,
+  get: function () {
+    return _surfaceLevels.SURFACE_FILL_VAR;
+  }
+});
+Object.defineProperty(exports, "SURFACE_LEVELS", {
+  enumerable: true,
+  get: function () {
+    return _surfaceLevels.SURFACE_LEVELS;
+  }
+});
+Object.defineProperty(exports, "SurfaceLevelProvider", {
+  enumerable: true,
+  get: function () {
+    return _surfaceLevels.SurfaceLevelProvider;
+  }
+});
 Object.defineProperty(exports, "Z_INDEX", {
   enumerable: true,
   get: function () {
@@ -33,24 +93,60 @@ Object.defineProperty(exports, "atoms", {
     return _atoms.atoms;
   }
 });
+Object.defineProperty(exports, "clamp", {
+  enumerable: true,
+  get: function () {
+    return _clamp.clamp;
+  }
+});
+Object.defineProperty(exports, "clamp01", {
+  enumerable: true,
+  get: function () {
+    return _clamp.clamp01;
+  }
+});
 Object.defineProperty(exports, "contrastRatio", {
   enumerable: true,
   get: function () {
     return _colorContrast.contrastRatio;
   }
 });
+Object.defineProperty(exports, "darken", {
+  enumerable: true,
+  get: function () {
+    return _colorContrast.darken;
+  }
+});
+Object.defineProperty(exports, "darkenUntilContrast", {
+  enumerable: true,
+  get: function () {
+    return _colorContrast.darkenUntilContrast;
+  }
+});
 Object.defineProperty(exports, "flatten", {
   enumerable: true,
   get: function () {
     return _atoms.flatten;
   }
 });
+Object.defineProperty(exports, "hairlineOn", {
+  enumerable: true,
+  get: function () {
+    return _surfaceLevels.hairlineOn;
+  }
+});
 Object.defineProperty(exports, "ios", {
   enumerable: true,
   get: function () {
     return _platform.ios;
   }
 });
+Object.defineProperty(exports, "mixColors", {
+  enumerable: true,
+  get: function () {
+    return _colorContrast.mixColors;
+  }
+});
 Object.defineProperty(exports, "native", {
   enumerable: true,
   get: function () {
@@ -63,25 +159,91 @@ Object.defineProperty(exports, "platform", {
     return _platform.platform;
   }
 });
+Object.defineProperty(exports, "quietText", {
+  enumerable: true,
+  get: function () {
+    return _colorContrast.quietText;
+  }
+});
+Object.defineProperty(exports, "quietTextOver", {
+  enumerable: true,
+  get: function () {
+    return _colorContrast.quietTextOver;
+  }
+});
+Object.defineProperty(exports, "readableOn", {
+  enumerable: true,
+  get: function () {
+    return _colorContrast.readableOn;
+  }
+});
 Object.defineProperty(exports, "relativeLuminance", {
   enumerable: true,
   get: function () {
     return _colorContrast.relativeLuminance;
   }
 });
+Object.defineProperty(exports, "resolveSurfaceLevel", {
+  enumerable: true,
+  get: function () {
+    return _surfaceLevels.resolveSurfaceLevel;
+  }
+});
 Object.defineProperty(exports, "select", {
   enumerable: true,
   get: function () {
     return _platform.select;
   }
 });
+Object.defineProperty(exports, "surfaceFillOn", {
+  enumerable: true,
+  get: function () {
+    return _surfaceLevels.surfaceFillOn;
+  }
+});
+Object.defineProperty(exports, "surfaceFillVars", {
+  enumerable: true,
+  get: function () {
+    return _surfaceLevels.surfaceFillVars;
+  }
+});
+Object.defineProperty(exports, "surfaceTextOn", {
+  enumerable: true,
+  get: function () {
+    return _surfaceLevels.surfaceTextOn;
+  }
+});
 exports.tokens = void 0;
+Object.defineProperty(exports, "useSurfaceFill", {
+  enumerable: true,
+  get: function () {
+    return _surfaceLevels.useSurfaceFill;
+  }
+});
+Object.defineProperty(exports, "useSurfaceLevel", {
+  enumerable: true,
+  get: function () {
+    return _surfaceLevels.useSurfaceLevel;
+  }
+});
+Object.defineProperty(exports, "useSurfaceLevelValue", {
+  enumerable: true,
+  get: function () {
+    return _surfaceLevels.useSurfaceLevelValue;
+  }
+});
 Object.defineProperty(exports, "web", {
   enumerable: true,
   get: function () {
     return _platform.web;
   }
 });
+Object.defineProperty(exports, "webDataSet", {
+  enumerable: true,
+  get: function () {
+    return _webData.webDataSet;
+  }
+});
 var _atoms = require("./atoms.js");
 var _tokens = _interopRequireWildcard(require("./tokens.js"));
 exports.tokens = _tokens;
@@ -90,5 +252,8 @@ var _zIndex = require("./z-index.js");
 var _platform = require("./platform.js");
 var _nativeDriver = require("./native-driver.js");
 var _colorContrast = require("./color-contrast.js");
+var _webData = require("./web-data.js");
+var _clamp = require("./clamp.js");
+var _surfaceLevels = require("./surface-levels.js");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 //# sourceMappingURL=index.js.map

package/lib/commonjs/styles/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_atoms","require","_tokens","_interopRequireWildcard","exports","tokens","_breakpoints","_zIndex","_platform","_nativeDriver","_colorContrast","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor"],"sourceRoot":"../../../src","sources":["styles/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAyC,IAAAC,OAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAAG,OAAA,CAAAC,MAAA,GAAAH,OAAA;AAGzC,IAAAI,YAAA,GAAAL,OAAA;AAEA,IAAAM,OAAA,GAAAN,OAAA;AACA,IAAAO,SAAA,GAAAP,OAAA;AACA,IAAAQ,aAAA,GAAAR,OAAA;AACA,IAAAS,cAAA,GAAAT,OAAA;AAAoE,SAAAE,wBAAAQ,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAQ,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA","ignoreList":[]}
+{"version":3,"names":["_atoms","require","_tokens","_interopRequireWildcard","exports","tokens","_breakpoints","_zIndex","_platform","_nativeDriver","_colorContrast","_webData","_clamp","_surfaceLevels","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor"],"sourceRoot":"../../../src","sources":["styles/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAyC,IAAAC,OAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAAG,OAAA,CAAAC,MAAA,GAAAH,OAAA;AAGzC,IAAAI,YAAA,GAAAL,OAAA;AAEA,IAAAM,OAAA,GAAAN,OAAA;AACA,IAAAO,SAAA,GAAAP,OAAA;AACA,IAAAQ,aAAA,GAAAR,OAAA;AACA,IAAAS,cAAA,GAAAT,OAAA;AAUA,IAAAU,QAAA,GAAAV,OAAA;AACA,IAAAW,MAAA,GAAAX,OAAA;AAEA,IAAAY,cAAA,GAAAZ,OAAA;AAgB0B,SAAAE,wBAAAW,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAb,uBAAA,YAAAA,CAAAW,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA","ignoreList":[]}

package/lib/commonjs/styles/interactive-web-css.js

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NOT_DISABLED = void 0;
+exports.RING_OFFSET_VAR = exports.RING_OFFSET_FALLBACK = exports.NOT_DISABLED = void 0;
+exports.focusRingShadow = focusRingShadow;
 exports.interactiveWebCss = interactiveWebCss;
 exports.useInteractiveWebCss = useInteractiveWebCss;
 var _react = require("react");
 var _adoptStyleSheet = require("./adopt-style-sheet.js");
+var _tokens = require("./tokens.js");
 /**
  * The one recipe every raw-DOM Bloom control's stylesheet is built from.
  *
@@ -25,6 +27,17 @@ var _adoptStyleSheet = require("./adopt-style-sheet.js");
  * base declarations (layout, border, font), the transition list, WHICH property
  * hover changes, and the focus ring's offset.
  *
+ * It grew because it was not being used. Thirty-odd families called only
+ * `useInteractiveWebCss()` — the two-line adopter — and hand-wrote the sheet it
+ * was supposed to build, which is exactly why rings, hovers and disabled states
+ * drifted: three focus-ring mechanisms in one package, a `#FFFFFF` ring gap
+ * baked into a dark-mode component, and disabled opacity at 0.4, 0.5 and 0.6.
+ * The options below therefore cover what those callers actually needed — a
+ * hover fill, a pressed fill, a disabled block and a focus ring whose GAP comes
+ * from the surface — so that hand-writing one is a decision rather than the
+ * default. **This is THE way to build a raw-DOM or `dataSet`-hooked control's
+ * stylesheet in Bloom.**
+ *
  * TWO RULES THAT MUST SURVIVE ANY EDIT HERE:
  *
  * - **The keyboard focus ring is `:focus-visible`, never `:focus`.** An
@@ -42,6 +55,44 @@ var _adoptStyleSheet = require("./adopt-style-sheet.js");
  * runtime in behind a stylesheet.
  */
 
+/**
+ * The custom property every Bloom focus ring reads its GAP colour from.
+ *
+ * Three ring mechanisms existed: the canonical `outline` + `outline-offset`, a
+ * two-step `box-shadow` whose gap was the literal `#FFFFFF`, and an inset
+ * shadow. The literal is the one that broke — `ring-offset-color` defaults to
+ * white in Tailwind and was never overridden, so in DARK mode a focused filter
+ * chip, filter text button, stepper value or slider thumb drew a 2px white halo
+ * against a near-black page. A gap is meant to be a hole in the ring, and a hole
+ * is the colour of whatever is behind it.
+ *
+ * So the gap is a variable, set inline from the surface the control sits on
+ * (`useRingOffsetStyle()` in `styles/surface-levels.ts`). The fallback below is
+ * only for a control that sets nothing.
+ */
+const RING_OFFSET_VAR = exports.RING_OFFSET_VAR = '--bloom-ring-offset';
+
+/** What the gap falls back to when nothing sets {@link RING_OFFSET_VAR}. */
+const RING_OFFSET_FALLBACK = exports.RING_OFFSET_FALLBACK = '#FFFFFF';
+
+/** The two-step ring: a `gap`px hole in the surface colour, then a `width`px ring. */
+
+/**
+ * The `box-shadow` value of a `ring`-mode focus ring.
+ *
+ * `ringVar` is the full custom-property name the family already sets inline for
+ * its accent, e.g. `--bloom-stepper-ring`. Anything in `extra` is appended, for
+ * a control that also carries a resting shadow the ring must not erase.
+ */
+function focusRingShadow(ringVar, {
+  offset = 2,
+  width = 2
+} = {}, extra) {
+  const gap = `0 0 0 ${offset}px var(${RING_OFFSET_VAR}, ${RING_OFFSET_FALLBACK})`;
+  const ring = `0 0 0 ${offset + width}px var(${ringVar}, currentColor)`;
+  return extra ? `${gap}, ${ring}, ${extra}` : `${gap}, ${ring}`;
+}
+
 /**
  * The filter every interactive rule carries: a control that is disabled by
  * either spelling reacts to nothing. Exported so a family-specific `extraRules`
@@ -62,18 +113,20 @@ function block(declarations) {
 function interactiveWebCss({
   selector,
   varPrefix,
-  base,
+  reset = 'button',
+  base = '',
   transition,
   hover,
   pressDeclarations,
+  pressScale = reset === 'button',
   outlineOffset,
+  focus,
+  disabled,
   extraRules
 }) {
   const c = selector;
   const interactive = `${c}${NOT_DISABLED}`;
-  return `
-${c} {
-  appearance: none;
+  const resetDeclarations = reset === 'button' ? `  appearance: none;
   -webkit-appearance: none;
   box-sizing: border-box;
   display: inline-flex;
@@ -83,23 +136,33 @@ ${c} {
   cursor: pointer;
   user-select: none;
   outline: none;
-${block(base)}
-  transition: ${transition};
+` : `  cursor: pointer;
+  outline: none;
+`;
+  const ring = {
+    mode: 'outline',
+    offset: outlineOffset ?? 2,
+    width: 2,
+    ...focus
+  };
+  const focusDeclarations = ring.mode === 'ring' ? `box-shadow: ${focusRingShadow(`--${varPrefix}-ring`, ring)};` : `outline: 2px solid var(--${varPrefix}-ring, currentColor);\n  outline-offset: ${ring.offset ?? 0}px;`;
+  const disabledOpacity = disabled?.opacity === undefined ? _tokens.DISABLED_OPACITY : disabled.opacity;
+  const pressRule = pressScale || pressDeclarations ? `${interactive}:active {
+${pressScale ? `  transform: scale(var(--${varPrefix}-press-scale, 1));\n` : ''}${pressDeclarations ? `${block(pressDeclarations)}\n` : ''}}
+` : '';
+  return `
+${c} {
+${resetDeclarations}${base.trim() ? `${block(base)}\n` : ''}  transition: ${transition};
 }
 ${c}:disabled,
 ${c}[aria-disabled="true"] {
   cursor: default;
-  opacity: 0.5;
-}
-${interactive}${hover.filter ?? ''}:hover {
+${disabledOpacity === null ? '' : `  opacity: ${disabledOpacity};\n`}${disabled?.declarations ? `${block(disabled.declarations)}\n` : ''}}
+${hover ? `${interactive}${hover.filter ?? ''}:hover {
 ${block(hover.declarations)}
 }
-${interactive}:active {
-  transform: scale(var(--${varPrefix}-press-scale, 1));
-${pressDeclarations ? `${block(pressDeclarations)}\n` : ''}}
-${c}:focus-visible {
-  outline: 2px solid var(--${varPrefix}-ring, currentColor);
-  outline-offset: ${outlineOffset}px;
+` : ''}${pressRule}${c}:focus-visible {
+  ${focusDeclarations}
 }
 ${extraRules ? `${extraRules.trim()}\n` : ''}`;
 }

package/lib/commonjs/styles/interactive-web-css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_adoptStyleSheet","NOT_DISABLED","exports","block","declarations","split","map","line","trim","filter","Boolean","join","interactiveWebCss","selector","varPrefix","base","transition","hover","pressDeclarations","outlineOffset","extraRules","c","interactive","useInteractiveWebCss","styleId","css","useEffect","adoptStyleSheet"],"sourceRoot":"../../../src","sources":["styles/interactive-web-css.ts"],"mappings":";;;;;;;;AAiCA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,gBAAA,GAAAD,OAAA;AAnCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACO,MAAME,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,6CAA6C;AAmDzE;AACA,SAASE,KAAKA,CAACC,YAAoB,EAAU;EAC3C,OAAOA,YAAY,CAChBC,KAAK,CAAC,IAAI,CAAC,CACXC,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAACC,IAAI,CAAC,CAAC,CAAC,CAC1BC,MAAM,CAACC,OAAO,CAAC,CACfJ,GAAG,CAAEC,IAAI,IAAK,KAAKA,IAAI,EAAE,CAAC,CAC1BI,IAAI,CAAC,IAAI,CAAC;AACf;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,iBAAiBA,CAAC;EAChCC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJC,UAAU;EACVC,KAAK;EACLC,iBAAiB;EACjBC,aAAa;EACbC;AACwB,CAAC,EAAU;EACnC,MAAMC,CAAC,GAAGR,QAAQ;EAClB,MAAMS,WAAW,GAAG,GAAGD,CAAC,GAAGpB,YAAY,EAAE;EAEzC,OAAO;AACT,EAAEoB,CAAC;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAElB,KAAK,CAACY,IAAI,CAAC;AACb,gBAAgBC,UAAU;AAC1B;AACA,EAAEK,CAAC;AACH,EAAEA,CAAC;AACH;AACA;AACA;AACA,EAAEC,WAAW,GAAGL,KAAK,CAACR,MAAM,IAAI,EAAE;AAClC,EAAEN,KAAK,CAACc,KAAK,CAACb,YAAY,CAAC;AAC3B;AACA,EAAEkB,WAAW;AACb,2BAA2BR,SAAS;AACpC,EAAEI,iBAAiB,GAAG,GAAGf,KAAK,CAACe,iBAAiB,CAAC,IAAI,GAAG,EAAE;AAC1D,EAAEG,CAAC;AACH,6BAA6BP,SAAS;AACtC,oBAAoBK,aAAa;AACjC;AACA,EAAEC,UAAU,GAAG,GAAGA,UAAU,CAACZ,IAAI,CAAC,CAAC,IAAI,GAAG,EAAE,EAAE;AAC9C;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,SAASe,oBAAoBA,CAACC,OAAe,EAAEC,GAAW,EAAQ;EACvE,IAAAC,gBAAS,EAAC,MAAM;IACd,IAAAC,gCAAe,EAACH,OAAO,EAAEC,GAAG,CAAC;EAC/B,CAAC,EAAE,CAACD,OAAO,EAAEC,GAAG,CAAC,CAAC;AACpB","ignoreList":[]}
+{"version":3,"names":["_react","require","_adoptStyleSheet","_tokens","RING_OFFSET_VAR","exports","RING_OFFSET_FALLBACK","focusRingShadow","ringVar","offset","width","extra","gap","ring","NOT_DISABLED","block","declarations","split","map","line","trim","filter","Boolean","join","interactiveWebCss","selector","varPrefix","reset","base","transition","hover","pressDeclarations","pressScale","outlineOffset","focus","disabled","extraRules","c","interactive","resetDeclarations","mode","focusDeclarations","disabledOpacity","opacity","undefined","DISABLED_OPACITY","pressRule","useInteractiveWebCss","styleId","css","useEffect","adoptStyleSheet"],"sourceRoot":"../../../src","sources":["styles/interactive-web-css.ts"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/styles/panel-chrome.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PANEL_SHADOW = void 0;
+exports.resolvePanelChrome = resolvePanelChrome;
+exports.useOptionalPanelChrome = useOptionalPanelChrome;
+var _react = require("react");
+var _shared = require("../button/shared.js");
+var _BloomThemeProvider = require("../theme/BloomThemeProvider.js");
+/**
+ * The FLOATING PANEL chrome — the edge Bloom's big surfaces wear: a hairline
+ * plus the soft three-part shadow that lifts a panel off the page background.
+ *
+ * It lives here because two surfaces wear the same thing and had it written
+ * twice: the `Sidebar`'s panel and the framed `ContentPanel`. A panel that only
+ * draws a border reads as a box; the shadow is what makes it a panel.
+ *
+ *   shadow   0 1px 0 (the seat), 0 1px 12px (the soft body), 0 0 1px (the edge
+ *            definition that keeps the hairline from disappearing on a
+ *            same-coloured background)
+ *   border   the CARD colour in light mode — a panel on a tinted page reads as
+ *            a lighter edge, not a grey line — and neutral-800 in dark
+ */
+
+const PANEL_SHADOW = exports.PANEL_SHADOW = {
+  light: '0 1px 0 0 rgba(0, 0, 0, 0.0196), 0 1px 12px 0 rgba(0, 0, 0, 0.0588), 0 0 1px 0 rgba(0, 0, 0, 0.3216)',
+  dark: '0 1px 0 0 rgba(0, 0, 0, 0.1), 0 1px 12px 0 rgba(0, 0, 0, 0.16), 0 0 1px 0 rgba(0, 0, 0, 0.42)'
+};
+function resolvePanelChrome(theme) {
+  const {
+    neutral: n
+  } = (0, _shared.resolveButtonRamps)(theme);
+  const dark = theme.isDark;
+  return {
+    surface: dark ? n[900] : n[100],
+    border: dark ? n[800] : theme.colors.card,
+    shadow: dark ? PANEL_SHADOW.dark : PANEL_SHADOW.light
+  };
+}
+
+/**
+ * The chrome for the current theme, or `null` outside a `BloomThemeProvider`.
+ *
+ * Optional on purpose: `ContentPanel` draws its own surface and had never
+ * touched the theme, so a consumer (or a test) rendering one without the
+ * provider used to work. Making the shadow mandatory would have turned that
+ * into a thrown error at the moment the panel merely got prettier.
+ */
+function useOptionalPanelChrome() {
+  const ctx = (0, _react.useContext)(_BloomThemeProvider.BloomThemeContext);
+  return ctx ? resolvePanelChrome(ctx.theme) : null;
+}
+//# sourceMappingURL=panel-chrome.js.map

package/lib/commonjs/styles/panel-chrome.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_shared","_BloomThemeProvider","PANEL_SHADOW","exports","light","dark","resolvePanelChrome","theme","neutral","n","resolveButtonRamps","isDark","surface","border","colors","card","shadow","useOptionalPanelChrome","ctx","useContext","BloomThemeContext"],"sourceRoot":"../../../src","sources":["styles/panel-chrome.ts"],"mappings":";;;;;;;;AAcA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AAjBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAOO,MAAMG,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG;EAC1BE,KAAK,EAAE,sGAAsG;EAC7GC,IAAI,EAAE;AACR,CAAU;AAWH,SAASC,kBAAkBA,CAACC,KAAY,EAAe;EAC5D,MAAM;IAAEC,OAAO,EAAEC;EAAE,CAAC,GAAG,IAAAC,0BAAkB,EAACH,KAAK,CAAC;EAChD,MAAMF,IAAI,GAAGE,KAAK,CAACI,MAAM;EACzB,OAAO;IACLC,OAAO,EAAEP,IAAI,GAAGI,CAAC,CAAC,GAAG,CAAC,GAAGA,CAAC,CAAC,GAAG,CAAC;IAC/BI,MAAM,EAAER,IAAI,GAAGI,CAAC,CAAC,GAAG,CAAC,GAAGF,KAAK,CAACO,MAAM,CAACC,IAAI;IACzCC,MAAM,EAAEX,IAAI,GAAGH,YAAY,CAACG,IAAI,GAAGH,YAAY,CAACE;EAClD,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASa,sBAAsBA,CAAA,EAAuB;EAC3D,MAAMC,GAAG,GAAG,IAAAC,iBAAU,EAACC,qCAAiB,CAAC;EACzC,OAAOF,GAAG,GAAGZ,kBAAkB,CAACY,GAAG,CAACX,KAAK,CAAC,GAAG,IAAI;AACnD","ignoreList":[]}