impact-ui 5.0.0-beta.1 → 5.0.0-beta.2

package/dist/tokens/themeDom.d.ts

@@ -4,7 +4,11 @@ import { ImpactUiThemeChangeDetail, ImpactUiThemeMode } from './theme.types';
 export { IU_THEME_ATTR };
 /** Stores user preference (`light` | `dark` | `system`). Omitted when `light`. */
 export declare const IU_THEME_MODE_ATTR: "data-iu-theme-mode";
+/** `localStorage` key for theme preference (`dark` | `system`; omitted when `light`). */
+export declare const IU_THEME_STORAGE_KEY: "impact-ui-theme-preference";
 export declare const IMPACT_UI_THEME_CHANGE = "impact-ui-theme-change";
+/** Applied on `<html>` briefly while semantic token colors cross-fade (see theme-transition.scss). */
+export declare const IU_THEME_TRANSITION_CLASS: "ia-theme-changing";
 export declare function resolveThemeAppearance(preference: ImpactUiThemeMode): ThemeMode;
 /** Resolved light/dark from `<html data-iu-theme>` (SSR default: light). */
 export declare function readImpactUiThemeModeFromDom(): ThemeMode;
@@ -13,8 +17,10 @@ export declare function readImpactUiThemeModeFromDom(): ThemeMode;
  * Prefer CSS vars or `useImpactUiTheme().getSemanticColor` when UI must update on theme toggle.
  */
 export declare function getSemanticColorFromDom(name: ColorTokenName): string;
-/** Preference from `<html data-iu-theme-mode>`; falls back to resolved appearance. */
-export declare function readImpactUiThemePreferenceFromDom(): ImpactUiThemeMode;
+/**
+ * Preference from storage, then `<html data-iu-theme-mode>`, then resolved appearance, then `fallback`.
+ */
+export declare function readImpactUiThemePreferenceFromDom(fallback?: ImpactUiThemeMode): ImpactUiThemeMode;
 /** Apply preference + resolved appearance on `<html>`. */
 export declare function applyImpactUiThemeToDom(preference: ImpactUiThemeMode, resolved?: ThemeMode): void;
 export declare function notifyImpactUiThemeChange(detail: ImpactUiThemeChangeDetail): void;

package/dist/tokens/themeDom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themeDom.d.ts","sourceRoot":"","sources":["../../src/tokens/themeDom.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,aAAa,EACb,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,mCAAmC,CAAC;AAE3C,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElF,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,kFAAkF;AAClF,eAAO,MAAM,kBAAkB,EAAG,oBAA6B,CAAC;AAEhE,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAO/D,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,iBAAiB,GAAG,SAAS,CAG/E;AAED,4EAA4E;AAC5E,wBAAgB,4BAA4B,IAAI,SAAS,CAGxD;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,CAEpE;AAED,sFAAsF;AACtF,wBAAgB,kCAAkC,IAAI,iBAAiB,CAOtE;AAED,0DAA0D;AAC1D,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,iBAAiB,EAC7B,QAAQ,GAAE,SAA8C,GACvD,IAAI,CAeN;AAED,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,yBAAyB,GAAG,IAAI,CAGjF;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,iBAAiB,GAAG,IAAI,CAI9D;AAED,wBAAgB,0BAA0B,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAO3E;AAED,wBAAgB,4BAA4B,IAAI,SAAS,CAExD"}
+{"version":3,"file":"themeDom.d.ts","sourceRoot":"","sources":["../../src/tokens/themeDom.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,aAAa,EACb,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,mCAAmC,CAAC;AAE3C,OAAO,KAAK,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElF,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,kFAAkF;AAClF,eAAO,MAAM,kBAAkB,EAAG,oBAA6B,CAAC;AAEhE,yFAAyF;AACzF,eAAO,MAAM,oBAAoB,EAAG,4BAAqC,CAAC;AAE1E,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAE/D,sGAAsG;AACtG,eAAO,MAAM,yBAAyB,EAAG,mBAA4B,CAAC;AAyCtE,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,iBAAiB,GAAG,SAAS,CAG/E;AAED,4EAA4E;AAC5E,wBAAgB,4BAA4B,IAAI,SAAS,CAGxD;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM,CAEpE;AA0BD;;GAEG;AACH,wBAAgB,kCAAkC,CAChD,QAAQ,GAAE,iBAA2B,GACpC,iBAAiB,CAcnB;AAED,0DAA0D;AAC1D,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,iBAAiB,EAC7B,QAAQ,GAAE,SAA8C,GACvD,IAAI,CA4BN;AAED,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,yBAAyB,GAAG,IAAI,CAGjF;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,iBAAiB,GAAG,IAAI,CAI9D;AAED,wBAAgB,0BAA0B,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAO3E;AAED,wBAAgB,4BAA4B,IAAI,SAAS,CAExD"}

package/dist/tokens/themeDom.js

@@ -1,6 +1,35 @@
 import { IU_THEME_ATTR, getColorToken } from "../styles/tokens/tokens.generated.js";
 const IU_THEME_MODE_ATTR = "data-iu-theme-mode";
+const IU_THEME_STORAGE_KEY = "impact-ui-theme-preference";
 const IMPACT_UI_THEME_CHANGE = "impact-ui-theme-change";
+const IU_THEME_TRANSITION_CLASS = "ia-theme-changing";
+const IU_THEME_TRANSITION_MS = 280;
+let themeTransitionTimeout = null;
+function themeDomSnapshot(root) {
+  return `${root.getAttribute(IU_THEME_ATTR) ?? ""}|${root.getAttribute(IU_THEME_MODE_ATTR) ?? ""}`;
+}
+function predictedThemeDomSnapshot(preference, resolved) {
+  const themeAttr = resolved === "light" ? "" : resolved;
+  const modeAttr = preference === "light" ? "" : preference;
+  return `${themeAttr}|${modeAttr}`;
+}
+function beginThemeColorTransition() {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  root.classList.add(IU_THEME_TRANSITION_CLASS);
+  void root.offsetHeight;
+}
+function endThemeColorTransition() {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  if (themeTransitionTimeout != null) {
+    clearTimeout(themeTransitionTimeout);
+  }
+  themeTransitionTimeout = setTimeout(() => {
+    root.classList.remove(IU_THEME_TRANSITION_CLASS);
+    themeTransitionTimeout = null;
+  }, IU_THEME_TRANSITION_MS);
+}
 function getSystemAppearance() {
   if (typeof window === "undefined") return "light";
   return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
@@ -16,17 +45,46 @@ function readImpactUiThemeModeFromDom() {
 function getSemanticColorFromDom(name) {
   return getColorToken(readImpactUiThemeModeFromDom(), name);
 }
-function readImpactUiThemePreferenceFromDom() {
-  if (typeof document === "undefined") return "light";
+function readStoredThemePreference() {
+  if (typeof window === "undefined") return null;
+  try {
+    const stored = localStorage.getItem(IU_THEME_STORAGE_KEY);
+    if (stored === "light" || stored === "dark" || stored === "system") return stored;
+  } catch {
+  }
+  return null;
+}
+function persistThemePreference(preference) {
+  if (typeof window === "undefined") return;
+  try {
+    if (preference === "light") {
+      localStorage.removeItem(IU_THEME_STORAGE_KEY);
+    } else {
+      localStorage.setItem(IU_THEME_STORAGE_KEY, preference);
+    }
+  } catch {
+  }
+}
+function readImpactUiThemePreferenceFromDom(fallback = "light") {
+  if (typeof document === "undefined") return fallback;
+  const fromStorage = readStoredThemePreference();
+  if (fromStorage != null) return fromStorage;
   const root = document.documentElement;
   const stored = root.getAttribute(IU_THEME_MODE_ATTR);
   if (stored === "dark" || stored === "system") return stored;
   if (stored === "light") return "light";
-  return readImpactUiThemeModeFromDom();
+  if (readImpactUiThemeModeFromDom() === "dark") return "dark";
+  return fallback;
 }
 function applyImpactUiThemeToDom(preference, resolved = resolveThemeAppearance(preference)) {
   if (typeof document === "undefined") return;
   const root = document.documentElement;
+  const before = themeDomSnapshot(root);
+  const after = predictedThemeDomSnapshot(preference, resolved);
+  const willAnimate = after !== before;
+  if (willAnimate) {
+    beginThemeColorTransition();
+  }
   if (preference === "light") {
     root.removeAttribute(IU_THEME_MODE_ATTR);
   } else {
@@ -37,6 +95,10 @@ function applyImpactUiThemeToDom(preference, resolved = resolveThemeAppearance(p
   } else {
     root.setAttribute(IU_THEME_ATTR, resolved);
   }
+  persistThemePreference(preference);
+  if (willAnimate) {
+    endThemeColorTransition();
+  }
 }
 function notifyImpactUiThemeChange(detail) {
   if (typeof window === "undefined") return;
@@ -62,6 +124,8 @@ export {
   IMPACT_UI_THEME_CHANGE,
   IU_THEME_ATTR,
   IU_THEME_MODE_ATTR,
+  IU_THEME_STORAGE_KEY,
+  IU_THEME_TRANSITION_CLASS,
   applyImpactUiThemeToDom,
   getSemanticColorFromDom,
   getSystemColorSchemeSnapshot,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "impact-ui",
-  "version": "5.0.0-beta.1",
+  "version": "5.0.0-beta.2",
   "description": "Impact Analytics UI library",
   "type": "module",
   "main": "./dist/components/index.js",

package/dist/_virtual/ArticleOutlined.js

@@ -1,4 +0,0 @@
-var ArticleOutlined = {};
-export {
-  ArticleOutlined as __exports
-};

package/dist/_virtual/Check.js

@@ -1,4 +0,0 @@
-var Check = {};
-export {
-  Check as __exports
-};

package/dist/_virtual/NotificationsOffOutlined.js

@@ -1,4 +0,0 @@
-var NotificationsOffOutlined = {};
-export {
-  NotificationsOffOutlined as __exports
-};

package/dist/node_modules/@mui/icons-material/ArticleOutlined.js

@@ -1,19 +0,0 @@
-import { __exports as ArticleOutlined } from "../../../_virtual/ArticleOutlined.js";
-import require$$0 from "@babel/runtime/helpers/interopRequireDefault";
-import { __require as requireCreateSvgIcon } from "./utils/createSvgIcon.js";
-import require$$2 from "react/jsx-runtime";
-var _interopRequireDefault = require$$0;
-Object.defineProperty(ArticleOutlined, "__esModule", {
-  value: true
-});
-var default_1 = ArticleOutlined.default = void 0;
-var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
-var _jsxRuntime = require$$2;
-default_1 = ArticleOutlined.default = (0, _createSvgIcon.default)([/* @__PURE__ */ (0, _jsxRuntime.jsx)("path", {
-  d: "M19 5v14H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2"
-}, "0"), /* @__PURE__ */ (0, _jsxRuntime.jsx)("path", {
-  d: "M14 17H7v-2h7zm3-4H7v-2h10zm0-4H7V7h10z"
-}, "1")], "ArticleOutlined");
-export {
-  default_1 as default
-};

package/dist/node_modules/@mui/icons-material/Check.js

@@ -1,17 +0,0 @@
-import { __exports as Check } from "../../../_virtual/Check.js";
-import require$$0 from "@babel/runtime/helpers/interopRequireDefault";
-import { __require as requireCreateSvgIcon } from "./utils/createSvgIcon.js";
-import require$$2 from "react/jsx-runtime";
-var _interopRequireDefault = require$$0;
-Object.defineProperty(Check, "__esModule", {
-  value: true
-});
-var default_1 = Check.default = void 0;
-var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
-var _jsxRuntime = require$$2;
-default_1 = Check.default = (0, _createSvgIcon.default)(/* @__PURE__ */ (0, _jsxRuntime.jsx)("path", {
-  d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-}), "Check");
-export {
-  default_1 as default
-};

package/dist/node_modules/@mui/icons-material/NotificationsOffOutlined.js

@@ -1,17 +0,0 @@
-import { __exports as NotificationsOffOutlined } from "../../../_virtual/NotificationsOffOutlined.js";
-import require$$0 from "@babel/runtime/helpers/interopRequireDefault";
-import { __require as requireCreateSvgIcon } from "./utils/createSvgIcon.js";
-import require$$2 from "react/jsx-runtime";
-var _interopRequireDefault = require$$0;
-Object.defineProperty(NotificationsOffOutlined, "__esModule", {
-  value: true
-});
-var default_1 = NotificationsOffOutlined.default = void 0;
-var _createSvgIcon = _interopRequireDefault(requireCreateSvgIcon());
-var _jsxRuntime = require$$2;
-default_1 = NotificationsOffOutlined.default = (0, _createSvgIcon.default)(/* @__PURE__ */ (0, _jsxRuntime.jsx)("path", {
-  d: "M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2m0-15.5c2.49 0 4 2.02 4 4.5v.1l2 2V11c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68c-.24.06-.47.15-.69.23l1.64 1.64c.18-.02.36-.05.55-.05M5.41 3.35 4 4.76l2.81 2.81C6.29 8.57 6 9.74 6 11v5l-2 2v1h14.24l1.74 1.74 1.41-1.41zM16 17H8v-6c0-.68.12-1.32.34-1.9L16 16.76z"
-}), "NotificationsOffOutlined");
-export {
-  default_1 as default
-};