🐛 Fix Swatch Storybook dev-mode error by moving @property to global CSS

frontend/packages/ui/src/lib/utilities/Swatch.module.scss

@@ -7,12 +7,6 @@
 @use "../_ds/_borders.scss" as *;
 @use "../_ds/_sizes.scss" as *;
 
-@property --solid-color-overlay {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: rgb(0 0 0 / 0%);
-}
-
 .swatch {
   --border-color: var(--color-accent-primary-muted);
   --border-radius: #{$br-4};

frontend/packages/ui/src/lib/utilities/Swatch.tsx

@@ -6,6 +6,9 @@
 
 import { memo, useCallback, useId, useRef } from "react";
 import clsx from "clsx";
+// Global @property registration — must be a non-module import so the
+// @property rule lands in the global scope (CSS Modules cannot scope it).
+import "./swatch-properties.scss";
 import styles from "./Swatch.module.scss";
 
 // ---------------------------------------------------------------------------

frontend/packages/ui/src/lib/utilities/swatch-properties.scss

@@ -0,0 +1,15 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+// Global CSS @property registration for Swatch component.
+// This must be a non-module SCSS file because @property rules cannot be
+// scoped — they register a CSS property globally.
+
+@property --solid-color-overlay {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: rgb(0 0 0 / 0%);
+}