@accelint/design-toolkit 9.11.2 → 9.12.0

package/dist/components/query-builder/rule.d.ts

@@ -11,7 +11,7 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime194 from "react/jsx-runtime";
+import * as react_jsx_runtime160 from "react/jsx-runtime";
 import { RuleProps } from "react-querybuilder";
 
 //#region src/components/query-builder/rule.d.ts
@@ -33,7 +33,7 @@ import { RuleProps } from "react-querybuilder";
  * @param props - RuleProps from react-querybuilder.
  * @returns The rendered Rule component with all selectors and actions.
  */
-declare function Rule(props: RuleProps): react_jsx_runtime194.JSX.Element;
+declare function Rule(props: RuleProps): react_jsx_runtime160.JSX.Element;
 //#endregion
 export { Rule };
 //# sourceMappingURL=rule.d.ts.map

package/dist/components/query-builder/value-editor.d.ts

@@ -11,7 +11,7 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime193 from "react/jsx-runtime";
+import * as react_jsx_runtime161 from "react/jsx-runtime";
 import { ValueEditorProps } from "react-querybuilder";
 
 //#region src/components/query-builder/value-editor.d.ts
@@ -36,7 +36,7 @@ import { ValueEditorProps } from "react-querybuilder";
  * @param props - ValueEditorProps from react-querybuilder.
  * @returns The rendered value editor, or null for null/notNull operators.
  */
-declare function ValueEditor(props: ValueEditorProps): react_jsx_runtime193.JSX.Element | null;
+declare function ValueEditor(props: ValueEditorProps): react_jsx_runtime161.JSX.Element | null;
 //#endregion
 export { ValueEditor };
 //# sourceMappingURL=value-editor.d.ts.map

package/dist/components/query-builder/value-selector.d.ts

@@ -11,7 +11,7 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime195 from "react/jsx-runtime";
+import * as react_jsx_runtime162 from "react/jsx-runtime";
 import { ValueSelectorProps } from "react-querybuilder";
 
 //#region src/components/query-builder/value-selector.d.ts
@@ -36,7 +36,7 @@ import { ValueSelectorProps } from "react-querybuilder";
  * @param props - ValueSelectorProps from react-querybuilder.
  * @returns The rendered ValueSelector dropdown.
  */
-declare function ValueSelector(props: ValueSelectorProps): react_jsx_runtime195.JSX.Element;
+declare function ValueSelector(props: ValueSelectorProps): react_jsx_runtime162.JSX.Element;
 //#endregion
 export { ValueSelector };
 //# sourceMappingURL=value-selector.d.ts.map

package/dist/components/radio/context.d.ts

@@ -12,7 +12,7 @@
 
 import { RadioGroupProps, RadioProps } from "./types.js";
 import "client-only";
-import * as react44 from "react";
+import * as react40 from "react";
 import { ContextValue } from "react-aria-components/slots";
 
 //#region src/components/radio/context.d.ts
@@ -21,13 +21,13 @@ import { ContextValue } from "react-aria-components/slots";
  *
  * Provides context for RadioGroup component to share state with Radio components
  */
-declare const RadioGroupContext: react44.Context<ContextValue<RadioGroupProps, HTMLDivElement>>;
+declare const RadioGroupContext: react40.Context<ContextValue<RadioGroupProps, HTMLDivElement>>;
 /**
  * Context for Radio component
  *
  * Provides context for Radio component to share configuration from RadioGroup
  */
-declare const RadioContext: react44.Context<ContextValue<RadioProps, HTMLLabelElement>>;
+declare const RadioContext: react40.Context<ContextValue<RadioProps, HTMLLabelElement>>;
 //#endregion
 export { RadioContext, RadioGroupContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/radio/group.d.ts

@@ -12,7 +12,7 @@
 
 import { RadioGroupProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime196 from "react/jsx-runtime";
+import * as react_jsx_runtime163 from "react/jsx-runtime";
 
 //#region src/components/radio/group.d.ts
 
@@ -41,7 +41,7 @@ import * as react_jsx_runtime196 from "react/jsx-runtime";
 declare function RadioGroup({
   ref,
   ...props
-}: RadioGroupProps): react_jsx_runtime196.JSX.Element;
+}: RadioGroupProps): react_jsx_runtime163.JSX.Element;
 //#endregion
 export { RadioGroup };
 //# sourceMappingURL=group.d.ts.map

package/dist/components/radio/index.d.ts

@@ -12,7 +12,7 @@
 
 import { RadioProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime197 from "react/jsx-runtime";
+import * as react_jsx_runtime166 from "react/jsx-runtime";
 
 //#region src/components/radio/index.d.ts
 
@@ -37,7 +37,7 @@ import * as react_jsx_runtime197 from "react/jsx-runtime";
 declare function Radio({
   ref,
   ...props
-}: RadioProps): react_jsx_runtime197.JSX.Element;
+}: RadioProps): react_jsx_runtime166.JSX.Element;
 //#endregion
 export { Radio };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/search-field/context.d.ts

@@ -13,8 +13,8 @@
 import { ProviderProps } from "../../lib/types.js";
 import { SearchFieldProps } from "./types.js";
 import "client-only";
-import * as react47 from "react";
-import * as react_jsx_runtime202 from "react/jsx-runtime";
+import * as react42 from "react";
+import * as react_jsx_runtime164 from "react/jsx-runtime";
 import { ContextValue } from "react-aria-components/slots";
 
 //#region src/components/search-field/context.d.ts
@@ -23,7 +23,7 @@ import { ContextValue } from "react-aria-components/slots";
  *
  * Provides context for SearchField component to share props
  */
-declare const SearchFieldContext: react47.Context<ContextValue<SearchFieldProps, HTMLDivElement>>;
+declare const SearchFieldContext: react42.Context<ContextValue<SearchFieldProps, HTMLDivElement>>;
 /**
  * Provider for SearchField component
  *
@@ -35,7 +35,7 @@ declare const SearchFieldContext: react47.Context<ContextValue<SearchFieldProps,
 declare function SearchFieldProvider({
   children,
   ...props
-}: ProviderProps<SearchFieldProps>): react_jsx_runtime202.JSX.Element;
+}: ProviderProps<SearchFieldProps>): react_jsx_runtime164.JSX.Element;
 //#endregion
 export { SearchFieldContext, SearchFieldProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/search-field/index.d.ts

@@ -12,7 +12,7 @@
 
 import { SearchFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime203 from "react/jsx-runtime";
+import * as react_jsx_runtime165 from "react/jsx-runtime";
 
 //#region src/components/search-field/index.d.ts
 
@@ -41,7 +41,7 @@ import * as react_jsx_runtime203 from "react/jsx-runtime";
 declare function SearchField({
   ref,
   ...props
-}: SearchFieldProps): react_jsx_runtime203.JSX.Element;
+}: SearchFieldProps): react_jsx_runtime165.JSX.Element;
 //#endregion
 export { SearchField };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/select-field/context.d.ts

@@ -13,13 +13,13 @@
 import { ProviderProps } from "../../lib/types.js";
 import { SelectFieldProps } from "./types.js";
 import "client-only";
-import * as react48 from "react";
-import * as react_jsx_runtime204 from "react/jsx-runtime";
+import * as react43 from "react";
+import * as react_jsx_runtime167 from "react/jsx-runtime";
 import { ContextValue } from "react-aria-components/slots";
 
 //#region src/components/select-field/context.d.ts
 /** Context for SelectField component */
-declare const SelectFieldContext: react48.Context<ContextValue<SelectFieldProps, HTMLDivElement>>;
+declare const SelectFieldContext: react43.Context<ContextValue<SelectFieldProps, HTMLDivElement>>;
 /**
  * Provider for setting default props across multiple SelectField components
  *
@@ -29,7 +29,7 @@ declare const SelectFieldContext: react48.Context<ContextValue<SelectFieldProps,
 declare function SelectFieldProvider({
   children,
   ...props
-}: ProviderProps<SelectFieldProps>): react_jsx_runtime204.JSX.Element;
+}: ProviderProps<SelectFieldProps>): react_jsx_runtime167.JSX.Element;
 //#endregion
 export { SelectFieldContext, SelectFieldProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/select-field/index.d.ts

@@ -12,7 +12,7 @@
 
 import { SelectFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime205 from "react/jsx-runtime";
+import * as react_jsx_runtime174 from "react/jsx-runtime";
 
 //#region src/components/select-field/index.d.ts
 
@@ -43,7 +43,7 @@ import * as react_jsx_runtime205 from "react/jsx-runtime";
 declare function SelectField({
   ref,
   ...props
-}: SelectFieldProps): react_jsx_runtime205.JSX.Element;
+}: SelectFieldProps): react_jsx_runtime174.JSX.Element;
 //#endregion
 export { SelectField };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/select-field/styles.module.css

@@ -13,6 +13,10 @@
 @reference '@accelint/design-foundation/styles';
 
 @layer components.l1 {
+  .field {
+    @apply gap-xs flex flex-col;
+  }
+
   .value {
     @apply font-display flex grow items-center;
 
@@ -55,7 +59,7 @@
     @apply justify-between;
 
     @variant size-medium {
-      @apply py-xs;
+      @apply py-xxs;
       min-width: 220px;
     }
 

package/dist/components/sidenav/avatar.d.ts

@@ -12,7 +12,7 @@
 
 import { SidenavAvatarProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime206 from "react/jsx-runtime";
+import * as react_jsx_runtime168 from "react/jsx-runtime";
 
 //#region src/components/sidenav/avatar.d.ts
 
@@ -41,7 +41,7 @@ declare function SidenavAvatar({
   children,
   className,
   ...rest
-}: SidenavAvatarProps): react_jsx_runtime206.JSX.Element;
+}: SidenavAvatarProps): react_jsx_runtime168.JSX.Element;
 //#endregion
 export { SidenavAvatar };
 //# sourceMappingURL=avatar.d.ts.map

package/dist/components/sidenav/content.d.ts

@@ -12,7 +12,7 @@
 
 import { SidenavContentProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime207 from "react/jsx-runtime";
+import * as react_jsx_runtime169 from "react/jsx-runtime";
 
 //#region src/components/sidenav/content.d.ts
 
@@ -45,7 +45,7 @@ declare function SidenavContent({
   className,
   children,
   ...rest
-}: SidenavContentProps): react_jsx_runtime207.JSX.Element;
+}: SidenavContentProps): react_jsx_runtime169.JSX.Element;
 //#endregion
 export { SidenavContent };
 //# sourceMappingURL=content.d.ts.map

package/dist/components/sidenav/context.d.ts

@@ -12,11 +12,11 @@
 
 import { SidenavContextValue } from "./types.js";
 import "client-only";
-import * as react49 from "react";
+import * as react44 from "react";
 
 //#region src/components/sidenav/context.d.ts
 /** Context for sidenav state and identification */
-declare const SidenavContext: react49.Context<SidenavContextValue>;
+declare const SidenavContext: react44.Context<SidenavContextValue>;
 //#endregion
 export { SidenavContext };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/sidenav/footer.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { SidenavFooterProps } from "./types.js";
-import * as react_jsx_runtime208 from "react/jsx-runtime";
+import * as react_jsx_runtime170 from "react/jsx-runtime";
 
 //#region src/components/sidenav/footer.d.ts
 
@@ -33,7 +33,7 @@ import * as react_jsx_runtime208 from "react/jsx-runtime";
  * @param props - {@link SidenavFooterProps}
  * @returns The rendered SidenavFooter component.
  */
-declare function SidenavFooter(props: SidenavFooterProps): react_jsx_runtime208.JSX.Element;
+declare function SidenavFooter(props: SidenavFooterProps): react_jsx_runtime170.JSX.Element;
 //#endregion
 export { SidenavFooter };
 //# sourceMappingURL=footer.d.ts.map

package/dist/components/sidenav/header.d.ts

@@ -12,7 +12,7 @@
 
 import { SidenavHeaderProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime209 from "react/jsx-runtime";
+import * as react_jsx_runtime171 from "react/jsx-runtime";
 
 //#region src/components/sidenav/header.d.ts
 
@@ -42,7 +42,7 @@ declare function SidenavHeader({
   children,
   classNames,
   ...rest
-}: SidenavHeaderProps): react_jsx_runtime209.JSX.Element;
+}: SidenavHeaderProps): react_jsx_runtime171.JSX.Element;
 //#endregion
 export { SidenavHeader };
 //# sourceMappingURL=header.d.ts.map

package/dist/components/sidenav/index.d.ts

@@ -12,7 +12,7 @@
 
 import { SidenavProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime210 from "react/jsx-runtime";
+import * as react_jsx_runtime172 from "react/jsx-runtime";
 
 //#region src/components/sidenav/index.d.ts
 
@@ -87,7 +87,7 @@ declare function Sidenav({
   isHiddenWhenClosed,
   children,
   ...rest
-}: SidenavProps): react_jsx_runtime210.JSX.Element | null;
+}: SidenavProps): react_jsx_runtime172.JSX.Element | null;
 //#endregion
 export { Sidenav };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/sidenav/item.d.ts

@@ -12,7 +12,7 @@
 
 import { SidenavItemProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime211 from "react/jsx-runtime";
+import * as react_jsx_runtime173 from "react/jsx-runtime";
 
 //#region src/components/sidenav/item.d.ts
 
@@ -40,7 +40,7 @@ declare function SidenavItem({
   classNames,
   textValue,
   ...rest
-}: SidenavItemProps): react_jsx_runtime211.JSX.Element;
+}: SidenavItemProps): react_jsx_runtime173.JSX.Element;
 //#endregion
 export { SidenavItem };
 //# sourceMappingURL=item.d.ts.map

package/dist/components/sidenav/link.d.ts

@@ -12,7 +12,7 @@
 
 import { SidenavLinkProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime212 from "react/jsx-runtime";
+import * as react_jsx_runtime175 from "react/jsx-runtime";
 
 //#region src/components/sidenav/link.d.ts
 
@@ -40,7 +40,7 @@ declare function SidenavLink({
   classNames,
   textValue,
   ...rest
-}: SidenavLinkProps): react_jsx_runtime212.JSX.Element;
+}: SidenavLinkProps): react_jsx_runtime175.JSX.Element;
 //#endregion
 export { SidenavLink };
 //# sourceMappingURL=link.d.ts.map

package/dist/components/sidenav/menu-item.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { SidenavMenuItemProps } from "./types.js";
-import * as react_jsx_runtime213 from "react/jsx-runtime";
+import * as react_jsx_runtime176 from "react/jsx-runtime";
 
 //#region src/components/sidenav/menu-item.d.ts
 
@@ -37,7 +37,7 @@ declare function SidenavMenuItem({
   className,
   children,
   ...rest
-}: SidenavMenuItemProps): react_jsx_runtime213.JSX.Element;
+}: SidenavMenuItemProps): react_jsx_runtime176.JSX.Element;
 //#endregion
 export { SidenavMenuItem };
 //# sourceMappingURL=menu-item.d.ts.map

package/dist/components/sidenav/menu.d.ts

@@ -12,7 +12,7 @@
 
 import { SidenavMenuProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime215 from "react/jsx-runtime";
+import * as react_jsx_runtime177 from "react/jsx-runtime";
 
 //#region src/components/sidenav/menu.d.ts
 
@@ -43,7 +43,7 @@ declare function SidenavMenu({
   classNames,
   children,
   ...rest
-}: SidenavMenuProps): react_jsx_runtime215.JSX.Element;
+}: SidenavMenuProps): react_jsx_runtime177.JSX.Element;
 //#endregion
 export { SidenavMenu };
 //# sourceMappingURL=menu.d.ts.map

package/dist/components/sidenav/styles.module.css

@@ -22,15 +22,15 @@
         var(--animation-easing-standard);
     }
 
-    @variant group-push-left/layout {
-      @apply relative;
-      transform: translateX(0);
-    }
-
     @variant closed {
       @apply items-center;
       transform: translateX(calc(-100% + var(--sidenav-width)));
     }
+
+    @variant group-push-left/layout {
+      @apply relative;
+      transform: translateX(0);
+    }
   }
 
   .header {
@@ -63,7 +63,7 @@
     }
 
     .heading {
-      @apply fg-primary-bold text-body-m text-left;
+      @apply fg-primary-bold text-body-m text-left normal-case;
       grid-area: heading;
     }
 
@@ -73,6 +73,12 @@
     }
   }
 
+  /*
+   * Section labels (e.g. "Title A", "External" — the DEFAULT_SLOT headings
+   * inside SidenavContent) render uppercase per the design system. Headings
+   * routed to the menu/panel/avatar contexts opt out via `text-transform: none`
+   * in their own nested `.heading` rules below.
+   */
   .heading {
     @apply text-body-xs uppercase;
   }
@@ -161,7 +167,7 @@
     @apply text-body-s relative;
 
     .heading {
-      @apply flex-1 text-left;
+      @apply text-body-s flex-1 text-left normal-case;
     }
 
     .item {
@@ -245,7 +251,7 @@
     @apply fg-primary-bold rounded-medium bg-surface-raised outline-static outline;
 
     .heading {
-      @apply rounded-t-medium bg-surface-overlay px-m py-s text-body-s;
+      @apply rounded-t-medium bg-surface-overlay px-m py-s text-body-s normal-case;
     }
 
     .content {

package/dist/components/sidenav/trigger.d.ts

@@ -12,7 +12,7 @@
 
 import { SidenavTriggerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime214 from "react/jsx-runtime";
+import * as react_jsx_runtime178 from "react/jsx-runtime";
 
 //#region src/components/sidenav/trigger.d.ts
 
@@ -39,7 +39,7 @@ declare function SidenavTrigger({
   children,
   for: type,
   ...rest
-}: SidenavTriggerProps): react_jsx_runtime214.JSX.Element;
+}: SidenavTriggerProps): react_jsx_runtime178.JSX.Element;
 //#endregion
 export { SidenavTrigger };
 //# sourceMappingURL=trigger.d.ts.map

package/dist/components/skeleton/index.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { SkeletonProps } from "./types.js";
-import * as react_jsx_runtime216 from "react/jsx-runtime";
+import * as react_jsx_runtime179 from "react/jsx-runtime";
 
 //#region src/components/skeleton/index.d.ts
 /**
@@ -34,7 +34,7 @@ declare function Skeleton({
   className,
   variant,
   ...rest
-}: SkeletonProps): react_jsx_runtime216.JSX.Element;
+}: SkeletonProps): react_jsx_runtime179.JSX.Element;
 //#endregion
 export { Skeleton };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/slider/index.d.ts

@@ -12,7 +12,7 @@
 
 import { SliderProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime218 from "react/jsx-runtime";
+import * as react_jsx_runtime180 from "react/jsx-runtime";
 
 //#region src/components/slider/index.d.ts
 
@@ -71,7 +71,7 @@ declare function Slider({
   step: stepProp,
   value: valueProp,
   ...rest
-}: SliderProps): react_jsx_runtime218.JSX.Element;
+}: SliderProps): react_jsx_runtime180.JSX.Element;
 //#endregion
 export { Slider };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/status-indicator/index.d.ts

@@ -12,30 +12,36 @@
 
 import { StatusIndicatorProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime217 from "react/jsx-runtime";
+import * as react_jsx_runtime181 from "react/jsx-runtime";
 
 //#region src/components/status-indicator/index.d.ts
+
 /**
  * StatusIndicator - A component for displaying connection/service status information
  *
  * Provides a purely presentational component to allow users to display the status of something.
- * Only 'good,' 'degraded,', and 'poor' statuses are being supported.
+ * Supports 'good', 'degraded', 'poor', 'unknown', and 'pending' statuses.
  *
  * @param props - {@link StatusIndicatorProps}
- * @param props.status - The status to display (good, degraded, or poor)
+ * @param props.status - The status to display
+ * @param props.textValue - Optional label to display next to the status icon
  * @returns The rendered StatusIndicator component.
  *
  * @example
  * ```tsx
  * // Basic status indicator
  * <StatusIndicator status="good" />
+ *
+ * // With label
+ * <StatusIndicator status="degraded" textValue="Connection unstable" />
  * ```
  */
 declare function StatusIndicator({
   className,
   status,
+  textValue,
   ...rest
-}: StatusIndicatorProps): react_jsx_runtime217.JSX.Element;
+}: StatusIndicatorProps): react_jsx_runtime181.JSX.Element;
 //#endregion
 export { StatusIndicator };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/status-indicator/index.js

@@ -15,7 +15,8 @@
 
 import "client-only";
 import { clsx } from "@accelint/design-foundation/lib/utils";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label } from "react-aria-components/Label";
 import styles from "./styles.module.css";
 
 //#region src/components/status-indicator/index.tsx
@@ -23,25 +24,37 @@ import styles from "./styles.module.css";
 * StatusIndicator - A component for displaying connection/service status information
 *
 * Provides a purely presentational component to allow users to display the status of something.
-* Only 'good,' 'degraded,', and 'poor' statuses are being supported.
+* Supports 'good', 'degraded', 'poor', 'unknown', and 'pending' statuses.
 *
 * @param props - {@link StatusIndicatorProps}
-* @param props.status - The status to display (good, degraded, or poor)
+* @param props.status - The status to display
+* @param props.textValue - Optional label to display next to the status icon
 * @returns The rendered StatusIndicator component.
 *
 * @example
 * ```tsx
 * // Basic status indicator
 * <StatusIndicator status="good" />
+*
+* // With label
+* <StatusIndicator status="degraded" textValue="Connection unstable" />
 * ```
 */
-function StatusIndicator({ className, status = "good", ...rest }) {
-	return /* @__PURE__ */ jsx("span", {
+function StatusIndicator({ className, status = "good", textValue, ...rest }) {
+	const statusIcon = /* @__PURE__ */ jsx("span", {
 		...rest,
 		className: clsx(styles.icon, className),
 		"data-status": status,
 		"data-testid": `status-${status}-icon`
 	});
+	if (textValue) return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-s",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex min-w-m justify-center",
+			children: statusIcon
+		}), /* @__PURE__ */ jsx(Label, { children: textValue })]
+	});
+	return statusIcon;
 }
 
 //#endregion

package/dist/components/status-indicator/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/status-indicator/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport styles from './styles.module.css';\nimport type { StatusIndicatorProps } from './types';\n\n/**\n * StatusIndicator - A component for displaying connection/service status information\n *\n * Provides a purely presentational component to allow users to display the status of something.\n * Only 'good,' 'degraded,', and 'poor' statuses are being supported.\n *\n * @param props - {@link StatusIndicatorProps}\n * @param props.status - The status to display (good, degraded, or poor)\n * @returns The rendered StatusIndicator component.\n *\n * @example\n * ```tsx\n * // Basic status indicator\n * <StatusIndicator status=\"good\" />\n * ```\n */\n\nexport function StatusIndicator({\n  className,\n  status = 'good',\n  ...rest\n}: StatusIndicatorProps) {\n  return (\n    <span\n      {...rest}\n      className={clsx(styles.icon, className)}\n      data-status={status}\n      data-testid={`status-${status}-icon`}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAAgB,gBAAgB,EAC9B,WACA,SAAS,QACT,GAAG,QACoB;AACvB,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,KAAK,OAAO,MAAM,UAAU;EACvC,eAAa;EACb,eAAa,UAAU,OAAO;GAC9B"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/status-indicator/index.tsx"],"sourcesContent":["/*\n * Copyright 2026 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport styles from './styles.module.css';\nimport type { StatusIndicatorProps } from './types';\nimport { Label } from 'react-aria-components/Label';\n\n/**\n * StatusIndicator - A component for displaying connection/service status information\n *\n * Provides a purely presentational component to allow users to display the status of something.\n * Supports 'good', 'degraded', 'poor', 'unknown', and 'pending' statuses.\n *\n * @param props - {@link StatusIndicatorProps}\n * @param props.status - The status to display\n * @param props.textValue - Optional label to display next to the status icon\n * @returns The rendered StatusIndicator component.\n *\n * @example\n * ```tsx\n * // Basic status indicator\n * <StatusIndicator status=\"good\" />\n *\n * // With label\n * <StatusIndicator status=\"degraded\" textValue=\"Connection unstable\" />\n * ```\n */\nexport function StatusIndicator({\n  className,\n  status = 'good',\n  textValue,\n  ...rest\n}: StatusIndicatorProps) {\n  const statusIcon = (\n    <span\n      {...rest}\n      className={clsx(styles.icon, className)}\n      data-status={status}\n      data-testid={`status-${status}-icon`}\n    />\n  );\n\n  if (textValue) {\n    return (\n      <div className='flex items-center gap-s'>\n        <div className='flex min-w-m justify-center'>{statusIcon}</div>\n        <Label>{textValue}</Label>\n      </div>\n    );\n  }\n\n  return statusIcon;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,SAAgB,gBAAgB,EAC9B,WACA,SAAS,QACT,WACA,GAAG,QACoB;CACvB,MAAM,aACJ,oBAAC;EACC,GAAI;EACJ,WAAW,KAAK,OAAO,MAAM,UAAU;EACvC,eAAa;EACb,eAAa,UAAU,OAAO;GAC9B;AAGJ,KAAI,UACF,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GAAI,WAAU;aAA+B;IAAiB,EAC/D,oBAAC,mBAAO,YAAkB;GACtB;AAIV,QAAO"}

package/dist/components/status-indicator/styles.module.css

@@ -30,5 +30,13 @@
       /* isosceles triangle */
       clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
     }
+
+    @variant data-[status=pending] {
+      @apply outline-accent-primary-bold size-s rounded-full bg-transparent outline-2;
+    }
+
+    @variant data-[status=unknown] {
+      @apply size-s rounded-full bg-(--fg-info-bold);
+    }
   }
 }