@oxyhq/bloom 0.7.0 → 0.7.2

package/lib/typescript/commonjs/theme/preset-vars.d.ts

@@ -1,11 +1,44 @@
 import { type AppColorName, type PresetTokens } from './color-presets';
+/**
+ * Convert a shadcn-style HSL triple (`'H S% L%'`, optionally with an alpha tail
+ * `'H S% L% / A'`) into an sRGB `rgb(...)` string.
+ *
+ * Why rgb and not hsl (the native alpha-utility bug this fixes)
+ * -------------------------------------------------------------
+ * Tailwind v4 compiles an alpha-on-theme-color utility (`bg-primary/10`) into a
+ * `color-mix(... var(--color-primary) 10%, transparent)` declaration. On native,
+ * react-native-css resolves that `color-mix` at runtime via `colorjs.io/fn`, but
+ * its `color-mix` implementation registers ONLY the `sRGB`, `P3`, and `OKLab`
+ * color spaces — never `HSL`. So if `--color-primary` resolves to an `hsl(...)`
+ * string, `parse('hsl(...)')` throws, the mix is swallowed, and the utility
+ * silently produces no color. Emitting the resolved var as `rgb(...)` (a space
+ * colorjs.io always has registered) makes the alpha utilities resolve on native,
+ * matching web. Full (non-alpha) utilities already worked because React Native's
+ * native color parser handles `hsl()` directly; only `color-mix` was affected.
+ *
+ * Output is space-separated channels (`rgb(31 153 239)`), the modern CSS syntax
+ * parsed by both `colorjs.io/fn` (with only sRGB/P3/OKLab registered) and
+ * react-native-web / browsers. An alpha tail emits `rgb(r g b / a)`, likewise
+ * parsed by both.
+ *
+ * Pure function — standard HSL→sRGB conversion, channels rounded to integers.
+ * Tolerates a `deg` suffix on the hue and `%` suffixes on saturation/lightness.
+ */
+export declare function hslTripletToRgb(triplet: string): string;
 export interface PresetVarsOptions {
     /**
-     * Also emit Tailwind v4 resolved `--color-*` vars (wrapped in `hsl(...)`)
+     * Also emit Tailwind v4 resolved `--color-*` vars (as sRGB `rgb(...)` strings)
      * alongside the raw HSL triples. Needed when scoping a subtree where
      * Tailwind's `@theme` block has already precomputed `--color-*` at `:root`,
      * so overriding `--background` alone wouldn't cascade to `bg-background`.
-     * Default `false`.
+     *
+     * The resolved vars are emitted as `rgb(...)` rather than `hsl(...)` so the
+     * alpha-on-theme-color utilities (`bg-primary/10`, `text-foreground/50`)
+     * resolve on native: Tailwind compiles those to a runtime `color-mix(...)` that
+     * react-native-css evaluates via `colorjs.io/fn`, which only registers the
+     * sRGB/P3/OKLab spaces (not HSL) — so an `hsl(...)` var would throw and the
+     * utility would silently render no color. See `hslTripletToRgb`. Default
+     * `false`.
      */
     includeResolvedColorVars?: boolean;
 }

package/lib/typescript/commonjs/theme/preset-vars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/preset-vars.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAiC1F,MAAM,WAAW,iBAAiB;IAChC;;;;;;OAMG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,GAAE,iBAAsB,GAC9B,YAAY,CAqCd;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,IAAI,CAQN"}
+{"version":3,"file":"preset-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/preset-vars.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAU1F;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CA+CvD;AAyBD,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;;;;;;OAaG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,GAAE,iBAAsB,GAC9B,YAAY,CAwCd;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,IAAI,CAQN"}

package/lib/typescript/module/icons/common.d.ts

@@ -37,14 +37,6 @@ export declare function useCommonSVGProps(props: Props): {
     title?: string | undefined;
     children?: React.ReactNode;
     filter?: string | undefined;
-    color?: ColorValue | undefined;
-    scale?: import("react-native-svg").NumberArray | undefined;
-    scaleX?: import("react-native-svg").NumberProp | undefined;
-    scaleY?: import("react-native-svg").NumberProp | undefined;
-    translateX?: import("react-native-svg").NumberProp | undefined;
-    translateY?: import("react-native-svg").NumberProp | undefined;
-    skewX?: import("react-native-svg").NumberProp | undefined;
-    skewY?: import("react-native-svg").NumberProp | undefined;
     hitSlop?: number | import("react-native").Insets | undefined;
     id?: string | undefined;
     needsOffscreenAlphaCompositing?: boolean | undefined | undefined;
@@ -136,6 +128,14 @@ export declare function useCommonSVGProps(props: Props): {
     accessibilityShowsLargeContentViewer?: boolean | undefined | undefined;
     accessibilityLargeContentTitle?: string | undefined | undefined;
     accessibilityRespondsToUserInteraction?: boolean | undefined | undefined;
+    color?: ColorValue | undefined;
+    scale?: import("react-native-svg").NumberArray | undefined;
+    scaleX?: import("react-native-svg").NumberProp | undefined;
+    scaleY?: import("react-native-svg").NumberProp | undefined;
+    translateX?: import("react-native-svg").NumberProp | undefined;
+    translateY?: import("react-native-svg").NumberProp | undefined;
+    skewX?: import("react-native-svg").NumberProp | undefined;
+    skewY?: import("react-native-svg").NumberProp | undefined;
     fontSize?: import("react-native-svg").NumberProp | undefined;
     fontWeight?: import("react-native-svg").FontWeight | undefined;
     fontStyle?: import("react-native-svg").FontStyle | undefined;

package/lib/typescript/module/theme/BloomThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,OAAO,EAKL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,8CAAqD,CAAC;AAEpF,MAAM,WAAW,uBAAuB;IACtC,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,mEAAmE;IACnE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAErD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wDAAwD;IACxD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkJD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,gBAAgB,EAC7B,WAA0B,EAC1B,kBAAmC,EACnC,YAAY,EACZ,mBAAmB,EACnB,UAAU,EACV,OAAO,EACP,cAAc,EACd,WAAW,EACX,KAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,QAAQ,GACT,EAAE,uBAAuB,2CA+DzB"}
+{"version":3,"file":"BloomThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/theme/BloomThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAQN,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,OAAO,EAKL,KAAK,iBAAiB,EAEvB,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,EAAE,YAAY,CAAC;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,cAAc,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAC/C;;;;OAIG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,8CAAqD,CAAC;AAEpF,MAAM,WAAW,uBAAuB;IACtC,uFAAuF;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,mEAAmE;IACnE,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,mEAAmE;IACnE,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAElC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IAErD;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wDAAwD;IACxD,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkJD,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EAAE,cAAc,EACpB,WAAW,EAAE,gBAAgB,EAC7B,WAA0B,EAC1B,kBAAmC,EACnC,YAAY,EACZ,mBAAmB,EACnB,UAAU,EACV,OAAO,EACP,cAAc,EACd,WAAW,EACX,KAAY,EACZ,cAAc,EACd,kBAAkB,EAClB,QAAQ,GACT,EAAE,uBAAuB,2CAwFzB"}

package/lib/typescript/module/theme/apply-dark-class.d.ts

@@ -5,10 +5,13 @@ export declare function applyDarkClass(resolved: 'light' | 'dark'): void;
  * No-op on native — only affects web.
  *
  * Writes both the raw HSL triples (e.g. `--primary: 185 100% 20%`) and the
- * resolved `--color-*` vars (`--color-primary: hsl(185 100% 20%)`) so both
+ * resolved `--color-*` vars (`--color-primary: rgb(0 94 102)`) so both
  * shadcn-style `hsl(var(--primary))` plumbing and Tailwind v4 `@theme`
- * utilities resolve consistently. Includes extended tokens (card, chart-*,
- * content-area, sidebar-*) so consumer apps don't need to synthesize them.
+ * utilities resolve consistently. The resolved vars are emitted as `rgb(...)`
+ * (not `hsl(...)`) so the alpha utilities (`bg-primary/10`) resolve on native —
+ * see `getPresetVars` / `hslTripletToRgb`. Includes extended tokens (card,
+ * chart-*, content-area, sidebar-*) so consumer apps don't need to synthesize
+ * them.
  */
 export declare function applyColorPresetVars(preset: AppColorName, resolved: 'light' | 'dark'): void;
 //# sourceMappingURL=apply-dark-class.d.ts.map

package/lib/typescript/module/theme/apply-dark-class.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apply-dark-class.d.ts","sourceRoot":"","sources":["../../../../src/theme/apply-dark-class.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGvE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,QAIxD;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,QAUpF"}
+{"version":3,"file":"apply-dark-class.d.ts","sourceRoot":"","sources":["../../../../src/theme/apply-dark-class.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGvE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,QAIxD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,QAUpF"}

package/lib/typescript/module/theme/color-scope/index.d.ts

@@ -19,8 +19,15 @@ export interface BloomColorScopeProps {
 export declare function BloomColorScope({ colorPreset, asChild, style, children, }: BloomColorScopeProps): import("react/jsx-runtime").JSX.Element;
 /**
  * Escape hatch for advanced cases where the wrapping element is owned by the
- * caller. Returns a stable native style object carrying the preset's CSS vars.
- * Returns `undefined` on web or when `nativewind` is not installed.
+ * caller. Returns a stable native style object carrying the preset's CSS vars
+ * via NativeWind's `vars()`. Returns `undefined` on web or when `nativewind`
+ * is not installed.
+ *
+ * NOTE: subject to the react-native-css@3 limitation — the returned style only
+ * propagates vars to descendants when applied to an interop className component
+ * (the runtime gates propagation on matched className style rules). It is a
+ * no-op on a plain `<View>` with no `className`. For the common case prefer
+ * `<BloomColorScope>`, which wraps children in `VariableContextProvider`.
  */
 export declare function useColorScopeStyle(colorPreset: AppColorName): StyleProp<ViewStyle>;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/theme/color-scope/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAC3F,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0GAA0G;IAC1G,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CAoCtB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,CAUlF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAC3F,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0GAA0G;IAC1G,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAMD,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,OAAe,EACf,KAAK,EACL,QAAQ,GACT,EAAE,oBAAoB,2CAmDtB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,YAAY,GAAG,SAAS,CAAC,SAAS,CAAC,CAUlF"}

package/lib/typescript/module/theme/color-scope/style-builder.d.ts

@@ -1,16 +1,48 @@
+import type React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 import type { AppColorName } from '../color-presets';
+/**
+ * Component that provides inline CSS variables to a subtree via NativeWind's
+ * (react-native-css's) real `VariableContext`. The runtime strips the leading
+ * `--` from each key internally, so we feed it the full `--name -> value`
+ * record produced by `buildScopeVars`.
+ */
+export type VariableContextProviderComponent = React.ComponentType<{
+    value: Record<string, string>;
+    children: React.ReactNode;
+}>;
 /**
  * Build the CSS custom-property map for a preset, ready to be applied to a
  * subtree. Always includes the resolved `--color-*` vars so Tailwind v4
  * `@theme` utilities (e.g. `bg-background`) honour the scope.
  */
 export declare function buildScopeVars(colorPreset: AppColorName, mode: 'light' | 'dark'): Record<string, string>;
+/**
+ * Resolve NativeWind's `VariableContextProvider` — the canonical, non-deprecated
+ * react-native-css v3 API for providing inline CSS variables to a subtree. It
+ * reads the same `VariableContext` that interop className components consume, so
+ * descendants resolve `var(--primary)` etc. correctly. Returns `null` on web or
+ * when `nativewind` is not installed.
+ *
+ * This replaces the deprecated `vars()`-on-a-plain-`<View>`-style mechanism:
+ * under react-native-css@3, `vars()` returns an inline-vars marker that is only
+ * propagated to children when the host element matches className style rules
+ * (`usesVariables`/`variables`). A plain `<View>` with no `className` drops the
+ * vars silently, so the subtree renders without the preset palette.
+ */
+export declare function getVariableContextProvider(): VariableContextProviderComponent | null;
 /**
  * Build a native style object carrying every CSS var of the preset, using
  * NativeWind's `vars()` when available. Returns `undefined` on web (where the
  * provider writes vars to `documentElement` instead) or when `nativewind` is
  * not installed.
+ *
+ * @deprecated Under react-native-css@3, `vars()` only propagates to a subtree
+ * when applied to an interop className component (the runtime gates propagation
+ * on matched className style rules). Applied to a plain `<View>` the vars are
+ * dropped silently. Prefer wrapping children in `getVariableContextProvider()`.
+ * Retained only as the escape-hatch contract of `useColorScopeStyle`, where the
+ * caller owns the host element and is expected to be a className component.
  */
 export declare function buildNativePresetStyle(colorPreset: AppColorName, mode: 'light' | 'dark'): StyleProp<ViewStyle>;
 //# sourceMappingURL=style-builder.d.ts.map

package/lib/typescript/module/theme/color-scope/style-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style-builder.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/style-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AASrD;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAExB;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,SAAS,CAAC,SAAS,CAAC,CAKtB"}
+{"version":3,"file":"style-builder.d.ts","sourceRoot":"","sources":["../../../../../src/theme/color-scope/style-builder.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD;;;;;GAKG;AACH,MAAM,MAAM,gCAAgC,GAAG,KAAK,CAAC,aAAa,CAAC;IACjE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC,CAAC;AASH;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAExB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,0BAA0B,IAAI,gCAAgC,GAAG,IAAI,CAKpF;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,YAAY,EACzB,IAAI,EAAE,OAAO,GAAG,MAAM,GACrB,SAAS,CAAC,SAAS,CAAC,CAKtB"}

package/lib/typescript/module/theme/native-root-vars.d.ts

@@ -0,0 +1,94 @@
+import { type AppColorName } from './color-presets';
+/**
+ * Publish the active color preset's CSS custom properties into react-native-css's
+ * GLOBAL root-variable family so they reach the ENTIRE native app tree — including
+ * content rendered outside the React subtree of `BloomThemeProvider`: expo-router
+ * navigator screens, `Portal`s, `Dialog`/`BottomSheet` overlays, and any other host
+ * that paints through a separate React root.
+ *
+ * Why a global write is required (native only)
+ * --------------------------------------------
+ * react-native-css resolves a `var(--x)` reference (its `varResolver`) in this order:
+ *   1. `name in inheritedVariables`  — the React-context-inherited vars. This is what
+ *      `VariableContextProvider` populates, but it is React-context-scoped, so it only
+ *      reaches *direct descendants* of the provider in the React tree.
+ *   2. `inlineVariables[name]`        — same-component inline vars.
+ *   3. `variables[name]`             — resolved inherited vars.
+ *   4. `universalVariables(name)`    — a GLOBAL observable family.
+ *   5. `rootVariables(name)`         — a GLOBAL observable family.
+ *   6. the declared fallback.
+ *
+ * `BloomThemeProvider`'s `VariableContextProvider` only feeds path #1, so the navigator
+ * host and every portal/modal — which render outside that subtree — never see the
+ * preset vars and fall through to `rootVariables`/`universalVariables`. By default those
+ * families hold only react-native-css's own `__rn-css-rem`/`__rn-css-color` entries
+ * (Bloom's `global.css` defines the `hsl(var(--primary))` indirection but not the HSL
+ * triples themselves — those are injected at runtime), so the whole tree below the
+ * navigator renders monochrome. Writing the vars into `rootVariables` here is the
+ * exact same mechanism react-native-css uses for compiled `:root {}` / `@theme` vars
+ * (`StyleCollection.inject` does `rootVariables(name).set(valueArray)`), so portaled
+ * content resolves the palette identically regardless of React-tree position.
+ *
+ * The raw tokens are written as HSL triples (`primary: '205 87% 53%'`) and the
+ * resolved Tailwind v4 `--color-*` vars as sRGB `rgb(...)` (`color-primary:
+ * 'rgb(31 153 239)'`) — the latter so `color-mix`-based alpha utilities resolve
+ * on native (see `getPresetVars` / `hslTripletToRgb`).
+ *
+ * Why a STATIC `import`, not a runtime `require` (critical)
+ * ---------------------------------------------------------
+ * react-native-css@3.0.7 ships both a `dist/commonjs` and a `dist/module` build, and
+ * Metro bundles BOTH. In `native-internal/root.js` the variable families are plain
+ * module-local consts — NOT `globalThis`-guarded the way `StyleCollection` is — so the
+ * commonjs `root.js` and the module `root.js` each instantiate their OWN separate
+ * `rootVariables` family. The react-native-css renderer (`react-native-css/src/components/View.tsx`
+ * → `varResolver`) imports its `root.js` via ESM `import`, i.e. the MODULE build. A
+ * runtime `require('react-native-css/native-internal')` resolves the package's `require`
+ * export condition → the COMMONJS build → a DIFFERENT family the renderer never
+ * subscribes to, so the writes are a silent no-op on device. A static top-level
+ * `import` resolves the `import` condition → the MODULE build → the renderer's instance.
+ *
+ * This plain file is the NATIVE/default variant (Metro selects it on iOS/Android,
+ * which have no `.native` override here); the web variant lives in the sibling
+ * `native-root-vars.web.ts` no-op, which web bundlers pick over this one. So the
+ * static `react-native-css/native-internal` import below is never pulled into a web
+ * bundle — only into native. This mirrors Bloom's existing platform-split convention
+ * (`color-scope/index.tsx` + `color-scope/index.web.tsx`, `FontLoader.native.tsx`).
+ *
+ * Keying contract (verified against react-native-css@3.0.7)
+ * ---------------------------------------------------------
+ * The `rootVariables` family is keyed by the BARE variable name, WITHOUT the leading
+ * `--`. The compiler strips it uniformly: a `:root { --primary: ... }` declaration is
+ * stored via `rule.v.push([property.slice(2), value])` then routed into
+ * `shared.rootVariables[name]`, and `@property --x` goes through
+ * `name.startsWith("--") ? name.slice(2) : name`. The lookup side matches: a `var(--x)`
+ * reference compiles to `[{}, "var", ident.slice(2)]`, so `varResolver` looks up the
+ * bare name. `buildScopeVars` returns keys WITH the `--` prefix, so we strip it before
+ * writing each entry.
+ *
+ * Value shape
+ * -----------
+ * Each entry is a `VariableValue[]` — an array of `[value, mediaCondition?]` tuples.
+ * Bloom's preset vars are unconditional, so each is a single-element `[[value]]`, e.g.
+ * `rootVariables('primary').set([['205 87% 53%']])`. This is the same shape the compiler
+ * emits for unconditional `:root` vars.
+ *
+ * This is native-only and additive: the `VariableContextProvider` wrapper stays (it is
+ * the correct, scoped mechanism for `BloomColorScope` subtree overrides and harmlessly
+ * covers direct descendants). The web fork (`native-root-vars.web.ts`) no-ops — web
+ * writes the same vars to `document.documentElement` via `applyColorPresetVars`.
+ */
+/**
+ * Write the preset's CSS vars to react-native-css's global `rootVariables` family
+ * so the whole native tree (navigator screens + portals/modals/bottom-sheets)
+ * resolves the active palette.
+ *
+ * Each `.set` notifies its own observers synchronously (react-native-css only
+ * batches notifications inside its own `StyleCollection.inject`; outside it,
+ * `observableBatch.current` is unset so every `.set` runs observers immediately),
+ * so sequential writes correctly trigger a re-render when the preset/mode changes.
+ *
+ * Defensive guard: if a host ships a react-native-css build that doesn't expose
+ * `rootVariables` as a callable (it always does on @3), we bail rather than throw.
+ */
+export declare function applyNativeRootVars(colorPreset: AppColorName, mode: 'light' | 'dark'): void;
+//# sourceMappingURL=native-root-vars.d.ts.map

package/lib/typescript/module/theme/native-root-vars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-root-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AAEH;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAS3F"}

package/lib/typescript/module/theme/native-root-vars.web.d.ts

@@ -0,0 +1,20 @@
+import { type AppColorName } from './color-presets';
+/**
+ * Web fork of `applyNativeRootVars` — a no-op.
+ *
+ * On web, `BloomThemeProvider` already writes the active preset's CSS vars to
+ * `document.documentElement` via `applyColorPresetVars`, which the browser /
+ * react-native-web resolve natively. The native/default variant — the plain
+ * sibling `native-root-vars.ts` — instead publishes those vars into
+ * react-native-css's GLOBAL `rootVariables` family.
+ *
+ * Keeping the native variant's `react-native-css/native-internal` import out of
+ * the web bundle is the whole reason this is a platform-split module: web (and
+ * any non-NativeWind host) picks this `.web` fork over the plain file and so
+ * never statically pulls react-native-css internals.
+ *
+ * The signature is intentionally identical to the plain variant so the import
+ * site in `BloomThemeProvider` is platform-agnostic.
+ */
+export declare function applyNativeRootVars(_colorPreset: AppColorName, _mode: 'light' | 'dark'): void;
+//# sourceMappingURL=native-root-vars.web.d.ts.map

package/lib/typescript/module/theme/native-root-vars.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native-root-vars.web.d.ts","sourceRoot":"","sources":["../../../../src/theme/native-root-vars.web.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAE7F"}

package/lib/typescript/module/theme/preset-vars.d.ts

@@ -1,11 +1,44 @@
 import { type AppColorName, type PresetTokens } from './color-presets';
+/**
+ * Convert a shadcn-style HSL triple (`'H S% L%'`, optionally with an alpha tail
+ * `'H S% L% / A'`) into an sRGB `rgb(...)` string.
+ *
+ * Why rgb and not hsl (the native alpha-utility bug this fixes)
+ * -------------------------------------------------------------
+ * Tailwind v4 compiles an alpha-on-theme-color utility (`bg-primary/10`) into a
+ * `color-mix(... var(--color-primary) 10%, transparent)` declaration. On native,
+ * react-native-css resolves that `color-mix` at runtime via `colorjs.io/fn`, but
+ * its `color-mix` implementation registers ONLY the `sRGB`, `P3`, and `OKLab`
+ * color spaces — never `HSL`. So if `--color-primary` resolves to an `hsl(...)`
+ * string, `parse('hsl(...)')` throws, the mix is swallowed, and the utility
+ * silently produces no color. Emitting the resolved var as `rgb(...)` (a space
+ * colorjs.io always has registered) makes the alpha utilities resolve on native,
+ * matching web. Full (non-alpha) utilities already worked because React Native's
+ * native color parser handles `hsl()` directly; only `color-mix` was affected.
+ *
+ * Output is space-separated channels (`rgb(31 153 239)`), the modern CSS syntax
+ * parsed by both `colorjs.io/fn` (with only sRGB/P3/OKLab registered) and
+ * react-native-web / browsers. An alpha tail emits `rgb(r g b / a)`, likewise
+ * parsed by both.
+ *
+ * Pure function — standard HSL→sRGB conversion, channels rounded to integers.
+ * Tolerates a `deg` suffix on the hue and `%` suffixes on saturation/lightness.
+ */
+export declare function hslTripletToRgb(triplet: string): string;
 export interface PresetVarsOptions {
     /**
-     * Also emit Tailwind v4 resolved `--color-*` vars (wrapped in `hsl(...)`)
+     * Also emit Tailwind v4 resolved `--color-*` vars (as sRGB `rgb(...)` strings)
      * alongside the raw HSL triples. Needed when scoping a subtree where
      * Tailwind's `@theme` block has already precomputed `--color-*` at `:root`,
      * so overriding `--background` alone wouldn't cascade to `bg-background`.
-     * Default `false`.
+     *
+     * The resolved vars are emitted as `rgb(...)` rather than `hsl(...)` so the
+     * alpha-on-theme-color utilities (`bg-primary/10`, `text-foreground/50`)
+     * resolve on native: Tailwind compiles those to a runtime `color-mix(...)` that
+     * react-native-css evaluates via `colorjs.io/fn`, which only registers the
+     * sRGB/P3/OKLab spaces (not HSL) — so an `hsl(...)` var would throw and the
+     * utility would silently render no color. See `hslTripletToRgb`. Default
+     * `false`.
      */
     includeResolvedColorVars?: boolean;
 }

package/lib/typescript/module/theme/preset-vars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/preset-vars.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAiC1F,MAAM,WAAW,iBAAiB;IAChC;;;;;;OAMG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,GAAE,iBAAsB,GAC9B,YAAY,CAqCd;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,IAAI,CAQN"}
+{"version":3,"file":"preset-vars.d.ts","sourceRoot":"","sources":["../../../../src/theme/preset-vars.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAU1F;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CA+CvD;AAyBD,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;;;;;;OAaG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAC3B,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,GAAE,iBAAsB,GAC9B,YAAY,CAwCd;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,OAAO,CAAC,EAAE,iBAAiB,GAC1B,IAAI,CAQN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/__tests__/native-root-vars.test.ts

@@ -0,0 +1,127 @@
+type SetCall = ReadonlyArray<readonly [string]>;
+
+/**
+ * Verifies the native/default variant `theme/native-root-vars.ts` publishes the
+ * active preset into react-native-css's GLOBAL `rootVariables` family with the
+ * exact keying and value shape react-native-css itself uses for compiled `:root`
+ * vars, and that the web fork `theme/native-root-vars.web.ts` is an inert no-op.
+ *
+ *  - keys are written WITHOUT the leading `--` (the family is keyed by the bare
+ *    name — confirmed against react-native-css@3.0.7's compiler, which stores
+ *    `:root { --x }` via `slice(2)` and looks up `var(--x)` by the bare name);
+ *  - each value is a single-element value-array `[[value]]` (`VariableValue[]`);
+ *  - the native variant reaches react-native-css via a STATIC ESM import (so
+ *    Metro resolves the `module` build — the SAME family the renderer reads);
+ *  - the web variant never imports react-native-css and writes nothing.
+ *
+ * react-native-css is NOT a Bloom dependency (it arrives transitively via the
+ * host's NativeWind install), so the subpath is mocked virtually here — both for
+ * the runtime `.set` capture AND so ts-jest can compile the static import. The
+ * ambient `src/react-native-css.d.ts` declares the subpath's types for `tsc`.
+ */
+describe('applyNativeRootVars (native variant)', () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  it('writes preset vars to rootVariables with the leading -- stripped', () => {
+    const sets: Record<string, SetCall> = {};
+
+    jest.isolateModules(() => {
+      jest.doMock(
+        'react-native-css/native-internal',
+        () => ({
+          rootVariables: (name: string) => ({
+            set: (value: SetCall) => {
+              sets[name] = value;
+            },
+          }),
+        }),
+        { virtual: true },
+      );
+
+      const { applyNativeRootVars } = require('../theme/native-root-vars') as {
+        applyNativeRootVars: (preset: string, mode: 'light' | 'dark') => void;
+      };
+      applyNativeRootVars('blue', 'light');
+    });
+
+    // Keys are bare (no `--`), and the raw HSL triple is present unwrapped.
+    expect(sets).toHaveProperty('primary');
+    expect(sets).not.toHaveProperty('--primary');
+    expect(sets.primary).toEqual([['205 87% 53%']]);
+
+    // Resolved Tailwind v4 `--color-*` vars are written too, also bare-keyed,
+    // and as sRGB `rgb(...)` (not `hsl(...)`) so native `color-mix` alpha
+    // utilities resolve — `205 87% 53%` → `rgb(31 153 239)`.
+    expect(sets).toHaveProperty('color-primary');
+    expect(sets['color-primary']).toEqual([['rgb(31 153 239)']]);
+
+    // Every value is a single-element value-array `[[value]]` of strings.
+    for (const value of Object.values(sets)) {
+      expect(Array.isArray(value)).toBe(true);
+      expect(value).toHaveLength(1);
+      expect(value[0]).toHaveLength(1);
+      expect(typeof value[0]?.[0]).toBe('string');
+    }
+  });
+
+  it('reflects the resolved mode (dark preset differs from light)', () => {
+    const collect = (mode: 'light' | 'dark'): Record<string, SetCall> => {
+      const sets: Record<string, SetCall> = {};
+      jest.isolateModules(() => {
+        jest.doMock(
+          'react-native-css/native-internal',
+          () => ({
+            rootVariables: (name: string) => ({
+              set: (value: SetCall) => {
+                sets[name] = value;
+              },
+            }),
+          }),
+          { virtual: true },
+        );
+        const { applyNativeRootVars } = require('../theme/native-root-vars') as {
+          applyNativeRootVars: (preset: string, mode: 'light' | 'dark') => void;
+        };
+        applyNativeRootVars('teal', mode);
+      });
+      return sets;
+    };
+
+    expect(collect('light').background).not.toEqual(collect('dark').background);
+  });
+
+  it('guards when rootVariables is not callable (defensive, never throws)', () => {
+    jest.isolateModules(() => {
+      jest.doMock(
+        'react-native-css/native-internal',
+        () => ({ rootVariables: undefined }),
+        { virtual: true },
+      );
+      const { applyNativeRootVars } = require('../theme/native-root-vars') as {
+        applyNativeRootVars: (preset: string, mode: 'light' | 'dark') => void;
+      };
+      expect(() => applyNativeRootVars('blue', 'light')).not.toThrow();
+    });
+  });
+});
+
+describe('applyNativeRootVars (web fork)', () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
+  it('no-ops on web (vars are written to documentElement there instead)', () => {
+    // The web fork must never touch react-native-css. We assert it neither
+    // imports the subpath nor throws — it is a pure no-op with the same
+    // signature as the native variant.
+    jest.isolateModules(() => {
+      const { applyNativeRootVars } = require('../theme/native-root-vars.web') as {
+        applyNativeRootVars: (preset: string, mode: 'light' | 'dark') => void;
+      };
+      expect(() => applyNativeRootVars('blue', 'light')).not.toThrow();
+      expect(applyNativeRootVars('blue', 'light')).toBeUndefined();
+    });
+  });
+});

package/src/__tests__/preset-vars.test.ts

@@ -1,5 +1,5 @@
 import { APP_COLOR_NAMES, APP_COLOR_PRESETS } from '../theme/color-presets';
-import { getPresetVars } from '../theme/preset-vars';
+import { getPresetVars, hslTripletToRgb } from '../theme/preset-vars';
 
 const EXTENDED_KEYS = [
   '--card',
@@ -50,9 +50,50 @@ describe('getPresetVars', () => {
     expect(vars['--color-primary']).toBeUndefined();
   });
 
-  it('emits resolved --color-* vars wrapped in hsl() when requested', () => {
+  it('emits resolved --color-* vars as rgb() when requested', () => {
     const vars = getPresetVars('green', 'dark', { includeResolvedColorVars: true });
-    expect(vars['--color-primary']).toBe(`hsl(${APP_COLOR_PRESETS.green.dark['--primary']})`);
-    expect(vars['--color-card']).toBe(`hsl(${vars['--card']})`);
+    const primaryTriple = APP_COLOR_PRESETS.green.dark['--primary'] ?? '';
+    expect(vars['--color-primary']).toBe(hslTripletToRgb(primaryTriple));
+    expect(vars['--color-primary']).toMatch(/^rgb\(\d+ \d+ \d+\)$/);
+    expect(vars['--color-card']).toBe(hslTripletToRgb(vars['--card'] ?? ''));
+  });
+
+  it('resolves --color-primary to rgb for the blue preset (matches web reference)', () => {
+    // `blue` preset light `--primary` is `205 87% 53%` → rgb(31 153 239).
+    const vars = getPresetVars('blue', 'light', { includeResolvedColorVars: true });
+    expect(vars['--color-primary']).toBe('rgb(31 153 239)');
+  });
+});
+
+describe('hslTripletToRgb', () => {
+  it('converts a plain HSL triple to a space-separated rgb() string', () => {
+    expect(hslTripletToRgb('205 87% 53%')).toBe('rgb(31 153 239)');
+  });
+
+  it('converts the achromatic extremes', () => {
+    expect(hslTripletToRgb('0 0% 0%')).toBe('rgb(0 0 0)');
+    expect(hslTripletToRgb('0 0% 100%')).toBe('rgb(255 255 255)');
+    expect(hslTripletToRgb('0 0% 12%')).toBe('rgb(31 31 31)');
+  });
+
+  it('converts a saturated triple within ±1 per channel of the reference', () => {
+    // teal `185 100% 20%` ≈ rgb(0 94 102).
+    const match = /^rgb\((\d+) (\d+) (\d+)\)$/.exec(hslTripletToRgb('185 100% 20%'));
+    expect(match).not.toBeNull();
+    const r = Number(match?.[1] ?? NaN);
+    const g = Number(match?.[2] ?? NaN);
+    const b = Number(match?.[3] ?? NaN);
+    expect(Math.abs(r - 0)).toBeLessThanOrEqual(1);
+    expect(Math.abs(g - 94)).toBeLessThanOrEqual(1);
+    expect(Math.abs(b - 102)).toBeLessThanOrEqual(1);
+  });
+
+  it('tolerates a deg suffix on the hue', () => {
+    expect(hslTripletToRgb('205deg 87% 53%')).toBe('rgb(31 153 239)');
+  });
+
+  it('emits rgb(r g b / a) for an alpha tail (decimal or percentage)', () => {
+    expect(hslTripletToRgb('205 87% 53% / 0.5')).toBe('rgb(31 153 239 / 0.5)');
+    expect(hslTripletToRgb('205 87% 53% / 50%')).toBe('rgb(31 153 239 / 0.5)');
   });
 });