@dbcdk/react-components 0.0.207 → 0.0.209

package/dist/components/overlay/side-panel/SidePanel.cjs

@@ -13,6 +13,36 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
+function getFocusable(container) {
+  var _a, _b;
+  const selector = [
+    'a[href]:not([aria-disabled="true"])',
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    '[tabindex]:not([tabindex="-1"])'
+  ].join(",");
+  const focusables = [];
+  const addFocusableContent = (root) => {
+    const candidates = root.querySelectorAll(selector);
+    for (const element of candidates) {
+      if (element.hasAttribute("hidden") || element.getAttribute("aria-hidden") === "true" || element.getAttribute("aria-disabled") === "true") {
+        continue;
+      }
+      if (!focusables.includes(element)) focusables.push(element);
+    }
+  };
+  addFocusableContent(container);
+  for (const trigger of container.querySelectorAll("[aria-controls]")) {
+    const controlledIds = (_b = (_a = trigger.getAttribute("aria-controls")) == null ? void 0 : _a.split(/\s+/)) != null ? _b : [];
+    for (const controlledId of controlledIds) {
+      const controlledContent = document.getElementById(controlledId);
+      if (controlledContent) addFocusableContent(controlledContent);
+    }
+  }
+  return focusables;
+}
 function SidePanel({
   isOpen,
   onClose,
@@ -36,23 +66,70 @@ function SidePanel({
   const [shouldRender, setShouldRender] = react.useState(isOpen);
   const [isActive, setIsActive] = react.useState(false);
   const panelRef = react.useRef(null);
+  const returnFocusRef = react.useRef(null);
+  const wasOpenRef = react.useRef(false);
   react.useEffect(() => setMounted(true), []);
   react.useEffect(() => {
     if (isOpen) setShouldRender(true);
   }, [isOpen]);
   react.useEffect(() => {
-    if (!isOpen) return;
+    if (!isOpen || !shouldRender || !mounted) return;
+    if (!wasOpenRef.current) {
+      const activeElement = document.activeElement;
+      returnFocusRef.current = activeElement instanceof HTMLElement ? activeElement : null;
+      wasOpenRef.current = true;
+    }
+    const focusInitial = () => {
+      var _a;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const closeButton = panel.querySelector(
+        '[data-cy="side-panel-close-button"]'
+      );
+      const focusables = getFocusable(panel);
+      ((_a = closeButton != null ? closeButton : focusables[0]) != null ? _a : panel).focus();
+    };
+    focusInitial();
+    const frame = requestAnimationFrame(focusInitial);
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         e.stopPropagation();
         onClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const focusables = getFocusable(panel);
+      if (focusables.length === 0) {
+        e.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !panel.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || !panel.contains(active))) {
+        e.preventDefault();
+        first.focus();
       }
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => {
+      cancelAnimationFrame(frame);
       document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [isOpen, onClose]);
+  }, [isOpen, mounted, onClose, shouldRender]);
+  react.useEffect(() => {
+    var _a;
+    if (isOpen || !wasOpenRef.current) return;
+    wasOpenRef.current = false;
+    (_a = returnFocusRef.current) == null ? void 0 : _a.focus();
+    returnFocusRef.current = null;
+  }, [isOpen]);
   react.useEffect(() => {
     if (!shouldRender) return;
     if (!isOpen) {
@@ -103,6 +180,7 @@ function SidePanel({
           "data-cy": "details-panel",
           role: "dialog",
           "aria-modal": "true",
+          tabIndex: -1,
           children: [
             hasDetails ? /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: styles__default.default.detailsCol, "data-cy": "details-panel-details", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.detailsHeader, children: [

package/dist/components/overlay/side-panel/SidePanel.js

@@ -7,6 +7,36 @@ import { Headline } from '../../../components/headline/Headline';
 import { MOTION_MS } from '../../../styles/animation';
 import styles from './SidePanel.module.css';
 
+function getFocusable(container) {
+  var _a, _b;
+  const selector = [
+    'a[href]:not([aria-disabled="true"])',
+    "button:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    '[tabindex]:not([tabindex="-1"])'
+  ].join(",");
+  const focusables = [];
+  const addFocusableContent = (root) => {
+    const candidates = root.querySelectorAll(selector);
+    for (const element of candidates) {
+      if (element.hasAttribute("hidden") || element.getAttribute("aria-hidden") === "true" || element.getAttribute("aria-disabled") === "true") {
+        continue;
+      }
+      if (!focusables.includes(element)) focusables.push(element);
+    }
+  };
+  addFocusableContent(container);
+  for (const trigger of container.querySelectorAll("[aria-controls]")) {
+    const controlledIds = (_b = (_a = trigger.getAttribute("aria-controls")) == null ? void 0 : _a.split(/\s+/)) != null ? _b : [];
+    for (const controlledId of controlledIds) {
+      const controlledContent = document.getElementById(controlledId);
+      if (controlledContent) addFocusableContent(controlledContent);
+    }
+  }
+  return focusables;
+}
 function SidePanel({
   isOpen,
   onClose,
@@ -30,23 +60,70 @@ function SidePanel({
   const [shouldRender, setShouldRender] = useState(isOpen);
   const [isActive, setIsActive] = useState(false);
   const panelRef = useRef(null);
+  const returnFocusRef = useRef(null);
+  const wasOpenRef = useRef(false);
   useEffect(() => setMounted(true), []);
   useEffect(() => {
     if (isOpen) setShouldRender(true);
   }, [isOpen]);
   useEffect(() => {
-    if (!isOpen) return;
+    if (!isOpen || !shouldRender || !mounted) return;
+    if (!wasOpenRef.current) {
+      const activeElement = document.activeElement;
+      returnFocusRef.current = activeElement instanceof HTMLElement ? activeElement : null;
+      wasOpenRef.current = true;
+    }
+    const focusInitial = () => {
+      var _a;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const closeButton = panel.querySelector(
+        '[data-cy="side-panel-close-button"]'
+      );
+      const focusables = getFocusable(panel);
+      ((_a = closeButton != null ? closeButton : focusables[0]) != null ? _a : panel).focus();
+    };
+    focusInitial();
+    const frame = requestAnimationFrame(focusInitial);
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         e.stopPropagation();
         onClose();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const focusables = getFocusable(panel);
+      if (focusables.length === 0) {
+        e.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !panel.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || !panel.contains(active))) {
+        e.preventDefault();
+        first.focus();
       }
     };
     document.addEventListener("keydown", handleKeyDown);
     return () => {
+      cancelAnimationFrame(frame);
       document.removeEventListener("keydown", handleKeyDown);
     };
-  }, [isOpen, onClose]);
+  }, [isOpen, mounted, onClose, shouldRender]);
+  useEffect(() => {
+    var _a;
+    if (isOpen || !wasOpenRef.current) return;
+    wasOpenRef.current = false;
+    (_a = returnFocusRef.current) == null ? void 0 : _a.focus();
+    returnFocusRef.current = null;
+  }, [isOpen]);
   useEffect(() => {
     if (!shouldRender) return;
     if (!isOpen) {
@@ -97,6 +174,7 @@ function SidePanel({
           "data-cy": "details-panel",
           role: "dialog",
           "aria-modal": "true",
+          tabIndex: -1,
           children: [
             hasDetails ? /* @__PURE__ */ jsxs("aside", { className: styles.detailsCol, "data-cy": "details-panel-details", children: [
               /* @__PURE__ */ jsxs("div", { className: styles.detailsHeader, children: [

package/dist/components/split-pane/SplitPane.cjs

@@ -22,7 +22,8 @@ function SplitPane({
   showDivider = "hover",
   gutterSize = 16,
   storageKey,
-  fillViewport = false
+  fillViewport = false,
+  secondaryVisible = true
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     SplitPaneContext.SplitPaneProvider,
@@ -31,6 +32,7 @@ function SplitPane({
       initialPrimarySize,
       minPrimarySize,
       minSecondarySize,
+      gutterSize,
       storageKey,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         SplitPaneContainer,
@@ -38,6 +40,7 @@ function SplitPane({
           showDivider,
           gutterSize,
           fillViewport,
+          secondaryVisible,
           children
         }
       )
@@ -48,7 +51,8 @@ function SplitPaneContainer({
   children,
   showDivider,
   gutterSize,
-  fillViewport
+  fillViewport,
+  secondaryVisible
 }) {
   const { direction, primarySize, containerRef } = SplitPaneContext.useSplitPaneContext();
   const style = react.useMemo(
@@ -66,6 +70,7 @@ function SplitPaneContainer({
       "data-direction": direction,
       "data-divider": showDivider,
       "data-fill-viewport": fillViewport,
+      "data-secondary-visible": secondaryVisible,
       style,
       children
     }
@@ -77,13 +82,14 @@ function SplitPanePrimary({ children }) {
 function SplitPaneSecondary({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.secondary, children });
 }
-function SplitPaneGutter() {
+function SplitPaneGutter({ label = "Resize panes" }) {
   const {
     direction,
     primarySize,
     setPrimarySize,
     minPrimarySize,
     minSecondarySize,
+    gutterSize,
     containerRef,
     resetDefault
   } = SplitPaneContext.useSplitPaneContext();
@@ -101,9 +107,10 @@ function SplitPaneGutter() {
     if (!el) return { maxPrimary: Infinity, total: 0 };
     const rect = el.getBoundingClientRect();
     const total = direction === "horizontal" ? rect.width : rect.height;
-    const maxPrimary2 = Math.max(minPrimarySize, total - minSecondarySize);
+    if (!Number.isFinite(total) || total <= 0) return { maxPrimary: Infinity, total };
+    const maxPrimary2 = Math.max(minPrimarySize, total - minSecondarySize - gutterSize);
     return { maxPrimary: maxPrimary2, total };
-  }, [containerRef, direction, minPrimarySize, minSecondarySize]);
+  }, [containerRef, direction, gutterSize, minPrimarySize, minSecondarySize]);
   const onPointerDown = react.useCallback(
     (e) => {
       const el = containerRef.current;
@@ -163,13 +170,21 @@ function SplitPaneGutter() {
   const ariaOrientation = direction === "horizontal" ? "vertical" : "horizontal";
   const [maxPrimary, setMaxPrimary] = react.useState(Infinity);
   react.useEffect(() => {
-    setMaxPrimary(computeClamp().maxPrimary);
-  }, [computeClamp]);
+    const container = containerRef.current;
+    if (!container) return;
+    const updateMax = () => setMaxPrimary(computeClamp().maxPrimary);
+    updateMax();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateMax);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [computeClamp, containerRef]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.gutter, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: styles__default.default.resizer,
       role: "separator",
+      "aria-label": label,
       "aria-orientation": ariaOrientation,
       "aria-valuemin": Math.round(minPrimarySize),
       "aria-valuemax": Number.isFinite(maxPrimary) ? Math.round(maxPrimary) : void 0,

package/dist/components/split-pane/SplitPane.d.ts

@@ -10,12 +10,15 @@ export interface SplitPaneProps {
     gutterSize?: number;
     storageKey?: string;
     fillViewport?: boolean;
+    secondaryVisible?: boolean;
 }
-export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, fillViewport, }: SplitPaneProps): JSX.Element;
+export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, fillViewport, secondaryVisible, }: SplitPaneProps): JSX.Element;
 export declare function SplitPanePrimary({ children }: {
     children: ReactNode;
 }): JSX.Element;
 export declare function SplitPaneSecondary({ children }: {
     children: ReactNode;
 }): JSX.Element;
-export declare function SplitPaneGutter(): JSX.Element;
+export declare function SplitPaneGutter({ label }: {
+    label?: string;
+}): JSX.Element;

package/dist/components/split-pane/SplitPane.js

@@ -16,7 +16,8 @@ function SplitPane({
   showDivider = "hover",
   gutterSize = 16,
   storageKey,
-  fillViewport = false
+  fillViewport = false,
+  secondaryVisible = true
 }) {
   return /* @__PURE__ */ jsx(
     SplitPaneProvider,
@@ -25,6 +26,7 @@ function SplitPane({
       initialPrimarySize,
       minPrimarySize,
       minSecondarySize,
+      gutterSize,
       storageKey,
       children: /* @__PURE__ */ jsx(
         SplitPaneContainer,
@@ -32,6 +34,7 @@ function SplitPane({
           showDivider,
           gutterSize,
           fillViewport,
+          secondaryVisible,
           children
         }
       )
@@ -42,7 +45,8 @@ function SplitPaneContainer({
   children,
   showDivider,
   gutterSize,
-  fillViewport
+  fillViewport,
+  secondaryVisible
 }) {
   const { direction, primarySize, containerRef } = useSplitPaneContext();
   const style = useMemo(
@@ -60,6 +64,7 @@ function SplitPaneContainer({
       "data-direction": direction,
       "data-divider": showDivider,
       "data-fill-viewport": fillViewport,
+      "data-secondary-visible": secondaryVisible,
       style,
       children
     }
@@ -71,13 +76,14 @@ function SplitPanePrimary({ children }) {
 function SplitPaneSecondary({ children }) {
   return /* @__PURE__ */ jsx("div", { className: styles.secondary, children });
 }
-function SplitPaneGutter() {
+function SplitPaneGutter({ label = "Resize panes" }) {
   const {
     direction,
     primarySize,
     setPrimarySize,
     minPrimarySize,
     minSecondarySize,
+    gutterSize,
     containerRef,
     resetDefault
   } = useSplitPaneContext();
@@ -95,9 +101,10 @@ function SplitPaneGutter() {
     if (!el) return { maxPrimary: Infinity, total: 0 };
     const rect = el.getBoundingClientRect();
     const total = direction === "horizontal" ? rect.width : rect.height;
-    const maxPrimary2 = Math.max(minPrimarySize, total - minSecondarySize);
+    if (!Number.isFinite(total) || total <= 0) return { maxPrimary: Infinity, total };
+    const maxPrimary2 = Math.max(minPrimarySize, total - minSecondarySize - gutterSize);
     return { maxPrimary: maxPrimary2, total };
-  }, [containerRef, direction, minPrimarySize, minSecondarySize]);
+  }, [containerRef, direction, gutterSize, minPrimarySize, minSecondarySize]);
   const onPointerDown = useCallback(
     (e) => {
       const el = containerRef.current;
@@ -157,13 +164,21 @@ function SplitPaneGutter() {
   const ariaOrientation = direction === "horizontal" ? "vertical" : "horizontal";
   const [maxPrimary, setMaxPrimary] = useState(Infinity);
   useEffect(() => {
-    setMaxPrimary(computeClamp().maxPrimary);
-  }, [computeClamp]);
+    const container = containerRef.current;
+    if (!container) return;
+    const updateMax = () => setMaxPrimary(computeClamp().maxPrimary);
+    updateMax();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateMax);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [computeClamp, containerRef]);
   return /* @__PURE__ */ jsx("div", { className: styles.gutter, children: /* @__PURE__ */ jsx(
     "div",
     {
       className: styles.resizer,
       role: "separator",
+      "aria-label": label,
       "aria-orientation": ariaOrientation,
       "aria-valuemin": Math.round(minPrimarySize),
       "aria-valuemax": Number.isFinite(maxPrimary) ? Math.round(maxPrimary) : void 0,

package/dist/components/split-pane/SplitPane.module.css

@@ -13,6 +13,15 @@
   max-height: 100%;
 }
 
+.container[data-secondary-visible='false'] > .primary {
+  flex: 1 1 auto;
+}
+
+.container[data-secondary-visible='false'] > .gutter,
+.container[data-secondary-visible='false'] > .secondary {
+  display: none;
+}
+
 .container[data-direction='horizontal'] {
   flex-direction: row;
 }

package/dist/components/split-pane/provider/SplitPaneContext.cjs

@@ -44,6 +44,7 @@ function SplitPaneProvider({
   initialPrimarySize,
   minPrimarySize,
   minSecondarySize,
+  gutterSize,
   storageKey
 }) {
   const containerRef = React.useRef(null);
@@ -55,8 +56,8 @@ function SplitPaneProvider({
     const rect = el.getBoundingClientRect();
     const total = direction === "horizontal" ? rect.width : rect.height;
     if (!Number.isFinite(total) || total <= 0) return null;
-    return Math.max(minPrimarySize, total - minSecondarySize);
-  }, [direction, minPrimarySize, minSecondarySize]);
+    return Math.max(minPrimarySize, total - minSecondarySize - gutterSize);
+  }, [direction, gutterSize, minPrimarySize, minSecondarySize]);
   React.useEffect(() => {
     if (!storageKey) return;
     const stored = readStoredSize(storageKey);
@@ -108,6 +109,7 @@ function SplitPaneProvider({
       resetDefault,
       minPrimarySize,
       minSecondarySize,
+      gutterSize,
       containerRef,
       storageKey
     }),
@@ -118,6 +120,7 @@ function SplitPaneProvider({
       resetDefault,
       minPrimarySize,
       minSecondarySize,
+      gutterSize,
       storageKey
     ]
   );

package/dist/components/split-pane/provider/SplitPaneContext.d.ts

@@ -6,6 +6,7 @@ export interface SplitPaneContextValue {
     setPrimarySize: (newSize: number) => void;
     minPrimarySize: number;
     minSecondarySize: number;
+    gutterSize: number;
     containerRef: React.RefObject<HTMLDivElement | null>;
     storageKey?: string;
     resetDefault: () => void;
@@ -18,7 +19,8 @@ type SplitPaneProviderProps = {
     initialPrimarySize: number;
     minPrimarySize: number;
     minSecondarySize: number;
+    gutterSize: number;
     storageKey?: string;
 };
-export declare function SplitPaneProvider({ children, direction, initialPrimarySize, minPrimarySize, minSecondarySize, storageKey, }: SplitPaneProviderProps): React.ReactNode;
+export declare function SplitPaneProvider({ children, direction, initialPrimarySize, minPrimarySize, minSecondarySize, gutterSize, storageKey, }: SplitPaneProviderProps): React.ReactNode;
 export {};

package/dist/components/split-pane/provider/SplitPaneContext.js

@@ -38,6 +38,7 @@ function SplitPaneProvider({
   initialPrimarySize,
   minPrimarySize,
   minSecondarySize,
+  gutterSize,
   storageKey
 }) {
   const containerRef = useRef(null);
@@ -49,8 +50,8 @@ function SplitPaneProvider({
     const rect = el.getBoundingClientRect();
     const total = direction === "horizontal" ? rect.width : rect.height;
     if (!Number.isFinite(total) || total <= 0) return null;
-    return Math.max(minPrimarySize, total - minSecondarySize);
-  }, [direction, minPrimarySize, minSecondarySize]);
+    return Math.max(minPrimarySize, total - minSecondarySize - gutterSize);
+  }, [direction, gutterSize, minPrimarySize, minSecondarySize]);
   useEffect(() => {
     if (!storageKey) return;
     const stored = readStoredSize(storageKey);
@@ -102,6 +103,7 @@ function SplitPaneProvider({
       resetDefault,
       minPrimarySize,
       minSecondarySize,
+      gutterSize,
       containerRef,
       storageKey
     }),
@@ -112,6 +114,7 @@ function SplitPaneProvider({
       resetDefault,
       minPrimarySize,
       minSecondarySize,
+      gutterSize,
       storageKey
     ]
   );

package/dist/components/status-text/StatusText.cjs

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./StatusText.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function StatusText({
+  children,
+  severity = "neutral",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ...props,
+      className: [styles__default.default.statusText, styles__default.default[severity], className].filter(Boolean).join(" "),
+      children
+    }
+  );
+}
+
+exports.StatusText = StatusText;

package/dist/components/status-text/StatusText.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { Severity } from '../../constants/severity.types';
+export interface StatusTextProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+    severity?: Severity;
+}
+export declare function StatusText({ children, severity, className, ...props }: Readonly<StatusTextProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/status-text/StatusText.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import styles from './StatusText.module.css';
+
+function StatusText({
+  children,
+  severity = "neutral",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      className: [styles.statusText, styles[severity], className].filter(Boolean).join(" "),
+      children
+    }
+  );
+}
+
+export { StatusText };

package/dist/components/status-text/StatusText.module.css

@@ -0,0 +1,41 @@
+.statusText {
+  background: var(--status-text-bg);
+  color: var(--status-text-fg);
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+.neutral {
+  --status-text-bg: var(--color-bg-surface-subtle);
+  --status-text-fg: var(--color-fg-default);
+}
+
+.brand {
+  --status-text-bg: color-mix(in srgb, var(--color-brand) 12%, var(--color-bg-surface));
+  --status-text-fg: var(--color-brand);
+}
+
+.accent {
+  --status-text-bg: var(--color-accent-bg-soft);
+  --status-text-fg: var(--color-accent-fg-soft);
+}
+
+.success {
+  --status-text-bg: var(--color-status-success-bg);
+  --status-text-fg: var(--color-status-success-fg);
+}
+
+.error {
+  --status-text-bg: var(--color-status-error-bg);
+  --status-text-fg: var(--color-status-error-fg);
+}
+
+.info {
+  --status-text-bg: var(--color-status-info-bg);
+  --status-text-fg: var(--color-status-info-fg);
+}
+
+.warning {
+  --status-text-bg: var(--color-status-warning-bg);
+  --status-text-fg: var(--color-status-warning-fg);
+}