@dynatrace/strato-components 3.11.3 → 3.12.0

package/charts/xy-chart-adoption/categorical-bar/utils/map-axes-to-xy.js

@@ -28,7 +28,7 @@ function mapCategoryAxisToXAxis(config) {
     ...config.maxSize !== void 0 && { tickLabelMaxSize: config.maxSize }
   };
 }
-function mapValueAxisToYAxis(config) {
+function mapValueAxisToYAxis(config, valueRepresentation) {
   return {
     type: config.scale === "log" ? "log" : "numerical",
     label: config.label,
@@ -36,6 +36,7 @@ function mapValueAxisToYAxis(config) {
     max: config.max ?? "auto",
     formatter: config.formatter,
     disableZoom: true,
-    disablePan: true
+    disablePan: true,
+    valueRepresentation
   };
 }

package/charts/xy-chart-adoption/histogram/HistogramToXY.js

@@ -22,6 +22,7 @@ __export(HistogramToXY_exports, {
 module.exports = __toCommonJS(HistogramToXY_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_constants = require("./constants.js");
 var import_use_histogram_to_xy_color_rules = require("./hooks/use-histogram-to-xy-color-rules.js");
 var import_transformer_annotations_to_xy = require("./transformer-annotations-to-xy.js");
 var import_transformer_data_to_xy = require("./transformer-data-to-xy.js");
@@ -37,7 +38,7 @@ var import_format_csv = require("./utils/format-csv.js");
 var import_useBehavioralTrackingProps = require("../../../core/hooks/useBehavioralTrackingProps.js");
 var import_download = require("../../../core/utils/download.js");
 var import_get_chart_states_template = require("../../core/components/chart-states/utils/get-chart-states-template.js");
-var import_constants = require("../../core/constants.js");
+var import_constants2 = require("../../core/constants.js");
 var import_useHistogramChartConfig = require("../../histogram/hooks/useHistogramChartConfig.js");
 var import_XYChartRoot = require("../../xy-chart/XYChartRoot.js");
 var import_render_xy_annotations = require("../shared/utils/render-xy-annotations.js");
@@ -59,7 +60,11 @@ const HistogramToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
     initialZoom,
     currentZoom,
     onZoomChange,
-    infiniteZoom
+    infiniteZoom,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-details": ariaDetails
   } = props;
   const [behaviorTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(props);
   const config = (0, import_useHistogramChartConfig.useHistogramChartConfig)(children, {
@@ -80,7 +85,7 @@ const HistogramToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
   const { emptyState, errorState } = (0, import_get_chart_states_template.getChartStatesTemplates)(children);
   const downloadDataCallback = (0, import_react.useCallback)(() => {
     const csvString = (0, import_format_csv.formatCSV)(propsData);
-    (0, import_download.downloadCSV)(csvString, import_constants.CSS_DOWNLOAD_FILENAME);
+    (0, import_download.downloadCSV)(csvString, import_constants2.CSS_DOWNLOAD_FILENAME);
   }, [propsData]);
   const selectActions = config.select?.actions;
   const mappedSeriesActions = (0, import_react.useMemo)(
@@ -131,6 +136,10 @@ const HistogramToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
       truncationMode: config.truncationMode,
       __downloadDataCallback: downloadDataCallback,
       "data-dt-component": "HistogramChart",
+      "aria-label": ariaLabel ?? import_constants.HISTOGRAM_CHART_ARIA_LABEL,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-details": ariaDetails,
       ...behaviorTrackingProps,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Tooltip, { _variant: tooltipVariant }),

package/charts/xy-chart-adoption/histogram/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const HISTOGRAM_CHART_ARIA_LABEL = "Histogram Chart";
+//# sourceMappingURL=constants.d.ts.map

package/charts/xy-chart-adoption/histogram/constants.js

@@ -0,0 +1,23 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var constants_exports = {};
+__export(constants_exports, {
+  HISTOGRAM_CHART_ARIA_LABEL: () => HISTOGRAM_CHART_ARIA_LABEL
+});
+module.exports = __toCommonJS(constants_exports);
+const HISTOGRAM_CHART_ARIA_LABEL = "Histogram Chart";

package/charts/xy-chart-adoption/histogram/transformer-thresholds-to-xy.d.ts

@@ -1,5 +1,5 @@
 import type { HistogramThresholdsConfig } from '../../histogram/types/histogram-props.js';
-import type { XYChartThresholdIndicatorProps } from '../../xy-chart/types/xy-chart-props.js';
+import type { XYChartThresholdDynamicProps, XYChartThresholdStaticProps } from '../../xy-chart/types/xy-chart-props.js';
 import { type AxisEntry } from '../shared/utils/thresholds/reduce-thresholds-to-xy.js';
-export declare function mapHistogramThresholdsToXY(thresholds: HistogramThresholdsConfig | undefined, axisEntries: AxisEntry[]): XYChartThresholdIndicatorProps[];
+export declare function mapHistogramThresholdsToXY(thresholds: HistogramThresholdsConfig | undefined, axisEntries: AxisEntry[]): (XYChartThresholdStaticProps | XYChartThresholdDynamicProps)[];
 //# sourceMappingURL=transformer-thresholds-to-xy.d.ts.map

package/charts/xy-chart-adoption/timeseries/TimeseriesToXY.d.ts

@@ -1,5 +1,5 @@
 import { type TimeseriesChartRef } from './types/timeseries.js';
-export declare const TimeseriesToXY: (props: import("../../../index.js").StylingProps & import("../../../index.js").MaskingProps & {
+export declare const TimeseriesToXY: (props: import("../../../index.js").StylingProps & import("../../../index.js").MaskingProps & import("../../../index.js").AriaLabelingProps & {
     data?: import("../../index.js").Timeseries[];
     variant?: import("./types/timeseries.js").ChartVariant;
     valueRepresentation?: import("../../index.js").ValueRepresentation;

package/charts/xy-chart-adoption/timeseries/TimeseriesToXY.js

@@ -22,6 +22,7 @@ __export(TimeseriesToXY_exports, {
 module.exports = __toCommonJS(TimeseriesToXY_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_constants = require("./constants.js");
 var import_use_timeseries_chart_config = require("./hooks/use-timeseries-chart-config.js");
 var import_iterate_slots = require("./iterate-slots.js");
 var import_map_select_actions = require("./map-select-actions.js");
@@ -42,7 +43,7 @@ var import_transformer_thresholds_to_xy = require("./utils/transformer-threshold
 var import_useBehavioralTrackingProps = require("../../../core/hooks/useBehavioralTrackingProps.js");
 var import_download = require("../../../core/utils/download.js");
 var import_get_chart_states_template = require("../../core/components/chart-states/utils/get-chart-states-template.js");
-var import_constants = require("../../core/constants.js");
+var import_constants2 = require("../../core/constants.js");
 var import_extract_behavior_tracking_props = require("../../core/utils/extract-behavior-tracking-props.js");
 var import_XYChartRoot = require("../../xy-chart/XYChartRoot.js");
 var import_render_xy_annotations = require("../shared/utils/render-xy-annotations.js");
@@ -68,7 +69,11 @@ const TimeseriesToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
     seriesActions,
     gapPolicy,
     pointsDisplay,
-    curve
+    curve,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-details": ariaDetails
   } = props;
   const [behaviorTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(props);
   const config = (0, import_use_timeseries_chart_config.useTimeseriesChartConfig)(children, {
@@ -180,7 +185,7 @@ const TimeseriesToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
       bar: buckets.bar.map((s) => s.data),
       band: bandData
     });
-    (0, import_download.downloadCSV)(csvString, import_constants.CSS_DOWNLOAD_FILENAME);
+    (0, import_download.downloadCSV)(csvString, import_constants2.CSS_DOWNLOAD_FILENAME);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_XYChartRoot.XYChart,
@@ -198,6 +203,10 @@ const TimeseriesToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
       truncationMode: config.truncationMode,
       __downloadDataCallback: downloadDataCallback,
       "data-dt-component": "TimeseriesChart",
+      "aria-label": ariaLabel ?? import_constants.TIMESERIES_CHART_ARIA_LABEL,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-details": ariaDetails,
       ...behaviorTrackingProps,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/charts/xy-chart-adoption/timeseries/constants.d.ts

@@ -18,5 +18,6 @@ export declare const defaultLegend: TimeseriesChartLegendConfig;
 export declare const defaultToolbar: TimeseriesToolbarInternalProps;
 export declare const defaultInteractions: ChartInteractionsConfig;
 export declare const defaultColorPalette = "categorical";
+export declare const TIMESERIES_CHART_ARIA_LABEL = "Timeseries Chart";
 export declare const defaultTimeseriesChartConfig: TimeseriesChartConfigProperties;
 //# sourceMappingURL=constants.d.ts.map

package/charts/xy-chart-adoption/timeseries/constants.js

@@ -18,6 +18,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var constants_exports = {};
 __export(constants_exports, {
   DEFAULT_SCALE_FALLBACK_COLOR: () => DEFAULT_SCALE_FALLBACK_COLOR,
+  TIMESERIES_CHART_ARIA_LABEL: () => TIMESERIES_CHART_ARIA_LABEL,
   defaultColorPalette: () => defaultColorPalette,
   defaultGapPolicy: () => defaultGapPolicy,
   defaultInteractions: () => defaultInteractions,
@@ -61,6 +62,7 @@ const defaultInteractions = {
   }
 };
 const defaultColorPalette = "categorical";
+const TIMESERIES_CHART_ARIA_LABEL = "Timeseries Chart";
 const defaultTimeseriesChartConfig = {
   legend: defaultLegend,
   colorPalette: defaultColorPalette,

package/charts/xy-chart-adoption/timeseries/types/timeseries.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import type { Unit } from '@dynatrace-sdk/units';
 import type { TimeseriesChartConfiguration } from './timeseries-config.js';
+import type { AriaLabelingProps } from '../../../../core/types/a11y-props.js';
 import type { MaskingProps } from '../../../../core/types/masking-props.js';
 import type { StylingProps } from '../../../../core/types/styling-props.js';
 import type { TruncationMode } from '../../../../typography/text-ellipsis/TextEllipsis.js';
@@ -56,7 +57,7 @@ export interface TimeseriesChartBandProps {
     color?: string;
     gapPolicy?: TimeGapPolicy;
 }
-export type TimeseriesChartProps = StylingProps & MaskingProps & {
+export type TimeseriesChartProps = StylingProps & MaskingProps & AriaLabelingProps & {
     data?: Timeseries[];
     variant?: ChartVariant;
     valueRepresentation?: ValueRepresentation;

package/content/accordion/Accordion.css

@@ -1,45 +1,45 @@
-._12zc70k0-3-11-3 {
+._12zc70k0-3-12-0 {
   width: 100%;
-  color: var(--_bx32h0-3-11-3);
+  color: var(--_bx32h0-3-12-0);
 }
-._12zc70k1-3-11-3 {
+._12zc70k1-3-12-0 {
   margin: var(--dt-spacings-size-8, 8px) 0;
 }
-._12zc70k2-3-11-3 {
+._12zc70k2-3-12-0 {
   margin: var(--dt-spacings-size-4, 4px) 0;
 }
-._12zc70k3-3-11-3 {
+._12zc70k3-3-12-0 {
   transition-duration: var(--dt-animations-expand-collapse-duration-fast, 250ms);
   transition-timing-function: var(--dt-animations-expand-collapse-easing, cubic-bezier(0.4, 0, 0.2, 1));
   transition-property: transform;
 }
-._12zc70k4-3-11-3 {
+._12zc70k4-3-12-0 {
   transform: rotate(-90deg);
 }
-._12zc70k5-3-11-3 {
+._12zc70k5-3-12-0 {
   transform: rotate(90deg);
 }
-._12zc70k6-3-11-3 {
+._12zc70k6-3-12-0 {
   transform: rotate(0);
 }
-._12zc70k7-3-11-3 {
+._12zc70k7-3-12-0 {
   box-sizing: border-box;
   transform-origin: top center;
   display: flex;
 }
-._12zc70k8-3-11-3 {
+._12zc70k8-3-12-0 {
   width: 100%;
   box-sizing: border-box;
-  color: var(--_bx32h0-3-11-3);
+  color: var(--_bx32h0-3-12-0);
 }
-._12zc70k9-3-11-3 {
+._12zc70k9-3-12-0 {
   padding-top: var(--dt-spacings-size-8, 8px);
 }
-._12zc70ka-3-11-3 {
+._12zc70ka-3-12-0 {
   padding-top: var(--dt-spacings-size-4, 4px);
 }
 @media (prefers-reduced-motion) {
-  ._12zc70k3-3-11-3 {
+  ._12zc70k3-3-12-0 {
     transition-duration: 0s;
   }
 }

package/content/accordion/Accordion.d.ts

@@ -5,7 +5,9 @@ import type { AccordionProps } from './accordion-types.js';
  */
 export declare const Accordion: (<Multiple extends boolean = false>(props: AccordionProps<Multiple> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null) & {
     Section: <E extends import("react").ElementType = "div">(props: import("./AccordionSection.js").AccordionSectionProps<E>) => import("react").ReactElement | null;
-    SectionLabel: (props: import("../../index.js").WithChildren & import("../../index.js").StylingProps & import("../../index.js").DataTestId & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+    SectionLabel: (props: import("../../index.js").WithChildren & import("../../index.js").StylingProps & import("../../index.js").DataTestId & {
+        'aria-label'?: string;
+    } & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
     SectionContent: (props: import("../../index.js").WithChildren & import("../../index.js").StylingProps & import("../../index.js").DataTestId & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
 };
 //# sourceMappingURL=Accordion.d.ts.map

package/content/accordion/Accordion.js

@@ -59,7 +59,14 @@ function RootAccordion(props, forwardedRef) {
   const sectionCount = import_react.Children.count(children);
   const accordionSections = import_react.Children.map(children, (child, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     child,
-    showDividers && sectionCount > 1 && index < sectionCount - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Divider.Divider, { className: import_Accordion_css.accordionDividerMarginCSS[size], color })
+    showDividers && sectionCount > 1 && index < sectionCount - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Divider.Divider,
+      {
+        className: import_Accordion_css.accordionDividerMarginCSS[size],
+        color,
+        "aria-hidden": true
+      }
+    )
   ] }));
   const [state, dispatch] = (0, import_accordion_state.useAccordionState)({
     expanded,

package/content/accordion/Accordion.sty.js

@@ -31,11 +31,11 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_Accordion_css_ts_vanilla = require("./Accordion.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var accordionContentCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zc70k8-3-11-3", variantClassNames: { size: { "default": "_12zc70k9-3-11-3", condensed: "_12zc70ka-3-11-3" } }, defaultVariants: {}, compoundVariants: [] });
-var accordionContentWrapperCSS = "_12zc70k7-3-11-3";
-var accordionDividerMarginCSS = { "default": "_12zc70k1-3-11-3", condensed: "_12zc70k2-3-11-3" };
-var accordionLabelCSS = "_12zc70k0-3-11-3";
-var accordionTriggerIconCSS = "_12zc70k3-3-11-3";
-var accordionTriggerIconEndCSS = "_12zc70k5-3-11-3";
-var accordionTriggerIconExpandedCSS = "_12zc70k6-3-11-3";
-var accordionTriggerIconStartCSS = "_12zc70k4-3-11-3";
+var accordionContentCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zc70k8-3-12-0", variantClassNames: { size: { "default": "_12zc70k9-3-12-0", condensed: "_12zc70ka-3-12-0" } }, defaultVariants: {}, compoundVariants: [] });
+var accordionContentWrapperCSS = "_12zc70k7-3-12-0";
+var accordionDividerMarginCSS = { "default": "_12zc70k1-3-12-0", condensed: "_12zc70k2-3-12-0" };
+var accordionLabelCSS = "_12zc70k0-3-12-0";
+var accordionTriggerIconCSS = "_12zc70k3-3-12-0";
+var accordionTriggerIconEndCSS = "_12zc70k5-3-12-0";
+var accordionTriggerIconExpandedCSS = "_12zc70k6-3-12-0";
+var accordionTriggerIconStartCSS = "_12zc70k4-3-12-0";

package/content/accordion/AccordionSection.js

@@ -64,6 +64,8 @@ const AccordionSection = /* @__PURE__ */ (0, import_react.forwardRef)(
       label: import_AccordionSectionLabel.AccordionSectionLabel,
       content: import_AccordionSectionContent.AccordionSectionContent
     });
+    const sectionLabel = slots.label;
+    const triggerAriaLabel = sectionLabel?.props?.["aria-label"];
     const { triggerPosition, interactive, color, size, state, dispatch } = (0, import_AccordionContext.useAccordionContext)();
     const sectionColor = props.color ?? color;
     const triggerId = (0, import_useId.useId)();
@@ -98,7 +100,8 @@ const AccordionSection = /* @__PURE__ */ (0, import_react.forwardRef)(
         color: sectionColor,
         size,
         disabled,
-        "aria-labelledby": labelId,
+        "aria-label": triggerAriaLabel,
+        "aria-labelledby": triggerAriaLabel ? void 0 : labelId,
         "aria-expanded": isExpanded,
         "aria-controls": isExpanded || keepMounted ? contentId : void 0,
         "data-dt-children-name": "ExpandCollapse",
@@ -127,11 +130,12 @@ const AccordionSection = /* @__PURE__ */ (0, import_react.forwardRef)(
         ),
         style: consumerStyle,
         ...remainingProps,
-        children: (slots.label || slots.content) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        children: (sectionLabel || slots.content) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           import_AccordionSectionContext.AccordionSectionContext.Provider,
           {
             value: {
               labelId,
+              triggerId,
               contentId,
               isExpanded,
               keepMounted,
@@ -146,7 +150,6 @@ const AccordionSection = /* @__PURE__ */ (0, import_react.forwardRef)(
                   alignItems: "center",
                   justifyContent: triggerIsStart ? void 0 : "space-between",
                   gap: size === "default" ? 8 : 4,
-                  id: labelId,
                   onClick: () => {
                     if (interactive && !disabled) {
                       dispatch({
@@ -163,7 +166,7 @@ const AccordionSection = /* @__PURE__ */ (0, import_react.forwardRef)(
                   "data-dt-properties": dataDtProperties,
                   children: [
                     triggerIsStart && trigger,
-                    slots.label,
+                    sectionLabel,
                     !triggerIsStart && trigger
                   ]
                 }

package/content/accordion/AccordionSectionContent.js

@@ -57,7 +57,7 @@ const AccordionSectionContent = /* @__PURE__ */ (0, import_react.forwardRef)((pr
     style: consumerStyle,
     "data-testid": dataTestId
   } = props;
-  const { labelId, contentId, isExpanded, keepMounted, size } = (0, import_react.useContext)(
+  const { triggerId, contentId, isExpanded, keepMounted, size } = (0, import_react.useContext)(
     import_AccordionSectionContext.AccordionSectionContext
   );
   const childIsText = (0, import_can_receive_default_text_format.canReceiveDefaultTextFormat)(children);
@@ -100,7 +100,7 @@ const AccordionSectionContent = /* @__PURE__ */ (0, import_react.forwardRef)((pr
           ref: forwardedRef,
           id: contentId,
           role: "region",
-          "aria-labelledby": labelId,
+          "aria-labelledby": triggerId,
           children: childIsText ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { textStyle: "base", as: "p", children }) : children
         }
       )

package/content/accordion/AccordionSectionLabel.d.ts

@@ -2,10 +2,20 @@ import { DataTestId } from '../../core/types/data-props.js';
 import { StylingProps } from '../../core/types/styling-props.js';
 import { WithChildren } from '../../core/types/with-children.js';
 /** @public */
-export type AccordionSectionLabelProps = WithChildren & StylingProps & DataTestId;
+export type AccordionSectionLabelProps = WithChildren & StylingProps & DataTestId & {
+    /**
+     * Overrides the accessible name of the accordion section.
+     */
+    'aria-label'?: string;
+};
 /**
  * Accordion Section Label component
  * @public
  */
-export declare const AccordionSectionLabel: (props: WithChildren & StylingProps & DataTestId & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+export declare const AccordionSectionLabel: (props: WithChildren & StylingProps & DataTestId & {
+    /**
+     * Overrides the accessible name of the accordion section.
+     */
+    'aria-label'?: string;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
 //# sourceMappingURL=AccordionSectionLabel.d.ts.map

package/content/accordion/AccordionSectionLabel.js

@@ -34,6 +34,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_Accordion_css = require("./Accordion.sty.js");
+var import_AccordionSectionContext = require("./contexts/AccordionSectionContext.js");
 var import_can_receive_default_text_format = require("../../core/utils/can-receive-default-text-format.js");
 var import_Text = require("../../typography/text/Text.js");
 const AccordionSectionLabel = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
@@ -43,10 +44,12 @@ const AccordionSectionLabel = /* @__PURE__ */ (0, import_react.forwardRef)((prop
     style: consumerStyle,
     "data-testid": dataTestId
   } = props;
+  const { labelId } = (0, import_react.useContext)(import_AccordionSectionContext.AccordionSectionContext);
   const childIsText = (0, import_can_receive_default_text_format.canReceiveDefaultTextFormat)(children);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
+      id: labelId,
       "data-testid": dataTestId,
       ref: forwardedRef,
       className: (0, import_clsx.default)(import_Accordion_css.accordionLabelCSS, consumerClassName),

package/content/accordion/contexts/AccordionSectionContext.d.ts

@@ -2,6 +2,7 @@ import { type Context } from 'react';
 /** @internal */
 type AccordionSectionContextProps = {
     labelId: string;
+    triggerId: string;
     contentId: string;
     isExpanded: boolean;
     keepMounted: boolean;

package/content/accordion/contexts/AccordionSectionContext.js

@@ -23,6 +23,7 @@ module.exports = __toCommonJS(AccordionSectionContext_exports);
 var import_react = require("react");
 const AccordionSectionContext = (0, import_react.createContext)({
   labelId: "",
+  triggerId: "",
   contentId: "",
   isExpanded: false,
   keepMounted: false,

package/content/ai-loading-indicator/AiLoadingIndicator.css

@@ -1,4 +1,4 @@
-@keyframes _1te6oqj4-3-11-3 {
+@keyframes _1te6oqj4-3-12-0 {
   0% {
     background-position: 20% 0%;
   }
@@ -6,27 +6,27 @@
     background-position: -120% 100%;
   }
 }
-._1te6oqj5-3-11-3 {
-  --_1te6oqj0-3-11-3: #CB53F6;
-  --_1te6oqj1-3-11-3: #7FF8F9;
-  --_1te6oqj2-3-11-3: 15%;
-  --_1te6oqj3-3-11-3: 5%;
+._1te6oqj5-3-12-0 {
+  --_1te6oqj0-3-12-0: #CB53F6;
+  --_1te6oqj1-3-12-0: #7FF8F9;
+  --_1te6oqj2-3-12-0: 15%;
+  --_1te6oqj3-3-12-0: 5%;
   position: relative;
-  background-image: linear-gradient(90deg, transparent 0%, transparent 5%, var(--dt-colors-text-neutral-default, #2f2f4f) 10%, var(--dt-colors-text-neutral-default, #2f2f4f) 90%, transparent 95%, transparent 100%), linear-gradient(var(--_1te6oqj0-3-11-3) 0%, var(--_1te6oqj1-3-11-3) 100%);
+  background-image: linear-gradient(90deg, transparent 0%, transparent 5%, var(--dt-colors-text-neutral-default, #2f2f4f) 10%, var(--dt-colors-text-neutral-default, #2f2f4f) 90%, transparent 95%, transparent 100%), linear-gradient(var(--_1te6oqj0-3-12-0) 0%, var(--_1te6oqj1-3-12-0) 100%);
   background-size: 200% 600%;
   background-position: 0% 0%;
   background-clip: text;
   color: transparent;
-  animation-name: _1te6oqj4-3-11-3;
+  animation-name: _1te6oqj4-3-12-0;
   animation-duration: var(--dt-timings-slowest-gentle, 1500ms);
   animation-iteration-count: infinite;
   animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._1te6oqj6-3-11-3 {
+._1te6oqj6-3-12-0 {
   padding-top: calc(var(--dt-spacings-size-20, 20px) / 2 - 0.5lh);
   min-width: 0;
 }
-._1te6oqj7-3-11-3 {
+._1te6oqj7-3-12-0 {
   width: var(--dt-spacings-size-20, 20px);
   min-height: 1lh;
   display: flex;
@@ -34,12 +34,12 @@
   align-items: center;
   flex-shrink: 0;
 }
-._1te6oqj7-3-11-3 svg {
+._1te6oqj7-3-12-0 svg {
   display: block;
   width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
 }
-._1te6oqj8-3-11-3 {
+._1te6oqj8-3-12-0 {
   display: inline-flex;
   align-items: center;
   vertical-align: middle;

package/content/ai-loading-indicator/AiLoadingIndicator.sty.js

@@ -24,7 +24,7 @@ __export(AiLoadingIndicator_css_exports, {
 });
 module.exports = __toCommonJS(AiLoadingIndicator_css_exports);
 var import_AiLoadingIndicator_css_ts_vanilla = require("./AiLoadingIndicator.css");
-var container = "_1te6oqj8-3-11-3";
-var iconWrapper = "_1te6oqj7-3-11-3";
-var label = "_1te6oqj6-3-11-3";
-var labelAnimation = "_1te6oqj5-3-11-3";
+var container = "_1te6oqj8-3-12-0";
+var iconWrapper = "_1te6oqj7-3-12-0";
+var label = "_1te6oqj6-3-12-0";
+var labelAnimation = "_1te6oqj5-3-12-0";

package/content/ai-response/AiResponse.css

@@ -6,20 +6,20 @@
     opacity: 1;
   }
 }
-._jdyvf80-3-11-3 {
+._jdyvf80-3-12-0 {
   word-break: normal;
   overflow-wrap: anywhere;
 }
-._jdyvf80-3-11-3 [data-sd-animate]:not(table [data-sd-animate]) {
+._jdyvf80-3-12-0 [data-sd-animate]:not(table [data-sd-animate]) {
   animation: var(--sd-animation, sd-aiResponseAnimation) var(--sd-duration, 200ms) var(--sd-easing, ease) both;
 }
-._jdyvf80-3-11-3 ._17pa72a1-3-11-3 {
+._jdyvf80-3-12-0 ._17pa72a1-3-12-0 {
   margin-bottom: calc(var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px));
   margin-top: calc(var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-2, 2px));
 }
-._jdyvf81-3-11-3 > :first-child {
+._jdyvf81-3-12-0 > :first-child {
   margin-top: 0;
 }
-._jdyvf81-3-11-3 > :last-child {
+._jdyvf81-3-12-0 > :last-child {
   margin-bottom: 0;
 }

package/content/ai-response/AiResponse.sty.js

@@ -25,5 +25,5 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_CodeHighlight_css_ts_vanilla = require("../code-snippet/CodeHighlight.css");
 var import_CodeSnippet_css_ts_vanilla = require("../code-snippet/CodeSnippet.css");
 var import_AiResponse_css_ts_vanilla = require("./AiResponse.css");
-var streamdown = "_jdyvf81-3-11-3";
-var wrapper = "_jdyvf80-3-11-3";
+var streamdown = "_jdyvf81-3-12-0";
+var wrapper = "_jdyvf80-3-12-0";

package/content/avatar/Avatar.css

@@ -1,4 +1,4 @@
-._7llfy90-3-11-3 {
+._7llfy90-3-12-0 {
   cursor: default;
   box-sizing: border-box;
   border: 1px solid var(--dt-colors-border-neutral-default, #dadbe4);
@@ -15,20 +15,20 @@
   line-height: 1;
   padding: 0;
 }
-._7llfy91-3-11-3 {
+._7llfy91-3-12-0 {
   min-width: var(--dt-spacings-size-20, 20px);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._7llfy92-3-11-3 {
+._7llfy92-3-12-0 {
   min-width: var(--dt-spacings-size-32, 32px);
 }
-._7llfy93-3-11-3 {
+._7llfy93-3-12-0 {
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
   background-color: var(--dt-colors-background-surface-default, #fff);
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   z-index: 0;
 }
-._7llfy93-3-11-3:before {
+._7llfy93-3-12-0:before {
   content: "";
   aspect-ratio: 1/1;
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
@@ -37,36 +37,36 @@
   position: absolute;
   z-index: -1;
 }
-._7llfy94-3-11-3[tabindex]:hover, button._7llfy94-3-11-3:hover, a._7llfy94-3-11-3:hover, ._7llfy94-3-11-3:focus {
+._7llfy94-3-12-0[tabindex]:hover, button._7llfy94-3-12-0:hover, a._7llfy94-3-12-0:hover, ._7llfy94-3-12-0:focus {
   background-color: var(--dt-colors-background-field-neutral-accent-hover, #4d4e72);
   border-color: var(--dt-colors-border-neutral-default-hover, #d0d1dc);
   z-index: 1;
 }
-button._7llfy94-3-11-3:hover, a._7llfy94-3-11-3:hover, button._7llfy94-3-11-3:active, a._7llfy94-3-11-3:active {
+button._7llfy94-3-12-0:hover, a._7llfy94-3-12-0:hover, button._7llfy94-3-12-0:active, a._7llfy94-3-12-0:active {
   cursor: pointer;
   z-index: 1;
 }
-._7llfy94-3-11-3[tabindex]:active, button._7llfy94-3-11-3:active, a._7llfy94-3-11-3:active {
+._7llfy94-3-12-0[tabindex]:active, button._7llfy94-3-12-0:active, a._7llfy94-3-12-0:active {
   background-color: var(--dt-colors-background-field-neutral-accent-active, #404164);
   border-color: var(--dt-colors-border-neutral-default-active, #c6c7d5);
   z-index: 1;
 }
-._7llfy95-3-11-3:before {
+._7llfy95-3-12-0:before {
   min-width: var(--dt-spacings-size-20, 20px);
 }
-._7llfy96-3-11-3:before {
+._7llfy96-3-12-0:before {
   min-width: var(--dt-spacings-size-32, 32px);
 }
-._7llfy97-3-11-3 {
+._7llfy97-3-12-0 {
   padding: 0;
   margin: 0;
   border: none;
   background-color: transparent;
 }
-._7llfy98-3-11-3 {
+._7llfy98-3-12-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   overflow-wrap: break-word;
 }
-._7llfy99-3-11-3 ~ div > div {
+._7llfy99-3-12-0 ~ div > div {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }