@cloudscape-design/chart-components 1.0.68 → 1.0.70

package/core/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/core/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type Highcharts from \"highcharts\";\n\nimport type * as InternalComponentTypes from \"../internal/components/interfaces\";\nimport { ChartSeriesMarkerStatus } from \"../internal/components/series-marker/interfaces\";\nimport { type NonCancelableEventHandler } from \"../internal/events\";\n\n// All charts take `highcharts` instance, that can be served statically or dynamically.\n// Although it has to be of type Highcharts, the TS type we use is `null | object`, so\n// that it is ignored by the documenter.\n\n/**\n * This interface includes common public chart properties, applicable for all chart types.\n */\nexport interface BaseChartOptions {\n  /**\n   * The Highcharts instance, which can be obtained using `import Highcharts from \"highcharts\"`.\n   * Supported Highcharts versions: 12.\n   */\n  highcharts: null | object;\n\n  /**\n   * Custom content that renders when `highcharts=null`. It renders a spinner if not defined.\n   */\n  fallback?: React.ReactNode;\n\n  /**\n   * The height of the chart plot in pixels. It does not include legend and filter.\n   */\n  chartHeight?: number;\n\n  /**\n   * The chart automatically adjusts its height to fill the parent container when this property is set.\n   */\n  fitHeight?: boolean;\n\n  /**\n   * Defines the minimum allowed height of the chart plot. Use this when `fitHeight=true` to\n   * prevent the chart plot from becoming too small to display its content. When the parent\n   * container is shorter than the minimum height, a vertical scrollbar appears automatically.\n   */\n  chartMinHeight?: number;\n\n  /**\n   * Defines the minimum allowed width of the chart plot. When the parent container is narrower than the\n   * minimum width, the horizontal scrollbar is automatically added.\n   */\n  chartMinWidth?: number;\n\n  /**\n   * Defines the ARIA label for the chart container.\n   * This property corresponds to [lang.chartContainerLabel](https://api.highcharts.com/highcharts/lang.accessibility.chartContainerLabel),\n   * and requires the [accessibility module](https://www.highcharts.com/docs/accessibility/accessibility-module).\n   */\n  ariaLabel?: string;\n\n  /**\n   * Defines the ARIA description of the chart container.\n   * This property corresponds to [accessibility.description](https://api.highcharts.com/highcharts/accessibility.description),\n   * and requires the [accessibility module](https://www.highcharts.com/docs/accessibility/accessibility-module).\n   */\n  ariaDescription?: string;\n\n  /**\n   * Defines chart legend options, including:\n   * * `enabled` (optional, boolean) - Hides legend when set to `false`.\n   * * `title` (optional, string) - Visible label, shown above the legend.\n   * * `actions` (optional, slot) - A slot before the legend that can be used to render custom actions.\n   */\n  legend?: BaseLegendOptions;\n\n  /**\n   * Defines options to represent empty, no-match, loading, and error state of the chart, including:\n   * * `statusType` (optional, \"finished\" | \"loading\" | \"error\") - Specifies the current status of loading data.\n   * * `empty` (optional, ReactNode) - Content displayed when the chart data is empty.\n   * * `noMatch` (optional, ReactNode) - Content displayed when there is no data to display due to the built-in filtering.\n   * * `loading` (optional, ReactNode) - Content displayed when `statusType=\"loading\"`. If omitted, the default loading state\n   * is shown, using `i18n.loadingText` or built-in i18n.\n   * * `error` (optional, ReactNode) - Content displayed when `statusType=\"error\"`. If omitted, the default error state\n   * is shown, using `i18n.errorText` and `i18n.recoveryText` (when `onRecoveryClick` is provided), or built-in i18n.\n   * * `onRecoveryClick` (optional, function) - Called when the user clicks the recovery button that appears when using default error\n   * state, and only if `onRecoveryClick` is provided. Use this to enable the user to retry a failed request or provide another option\n   * for the user to recover from the error.\n   */\n  noData?: BaseNoDataOptions;\n\n  /**\n   * Defines options for filtering in the chart, including:\n   * * `seriesFilter` (optional, boolean) - Displays default series filter at the top of the chart.\n   * * `additionalFilters` (optional, slot) - A slot for custom chart filters at the top of the chart.\n   */\n  filter?: BaseFilterOptions;\n}\n\nexport interface BaseLegendOptions {\n  enabled?: boolean;\n  title?: string;\n  actions?: React.ReactNode;\n}\n\nexport interface BaseNoDataOptions {\n  statusType?: \"finished\" | \"loading\" | \"error\";\n  empty?: React.ReactNode;\n  error?: React.ReactNode;\n  loading?: React.ReactNode;\n  noMatch?: React.ReactNode;\n  onRecoveryClick?: NonCancelableEventHandler;\n}\n\nexport interface BaseTooltipDetail {\n  key: React.ReactNode;\n  value: React.ReactNode;\n}\n\nexport interface BaseI18nStrings {\n  loadingText?: string;\n  errorText?: string;\n  recoveryText?: string;\n  seriesFilterLabel?: string;\n  seriesFilterPlaceholder?: string;\n  seriesFilterSelectedAriaLabel?: string;\n  legendAriaLabel?: string;\n  detailPopoverDismissAriaLabel?: string;\n  chartRoleDescription?: string;\n}\n\nexport interface CoreI18nStrings extends BaseI18nStrings {\n  /**\n   * ARIA label for the secondary legend when using dual axes charts.\n   *\n   * **Important**: When using dual axes, you should explicitly provide visible titles or ARIA labels\n   * for both the primary and secondary legends to ensure proper accessibility. The primary legend\n   * has built-in i18n support through `legendAriaLabel`, but the secondary legend currently requires\n   * this property to be explicitly provided.\n   */\n  secondaryLegendAriaLabel?: string;\n\n  /**\n   * ARIA label for the marker of a series. Series with status \"default\" will not announce a label, thus excluded by this method.\n   */\n  itemMarkerStatusAriaLabel?: (status: Exclude<ChartSeriesMarkerStatus, \"default\">) => string;\n}\n\nexport interface WithCartesianI18nStrings {\n  /**\n   * An object that contains all of the localized strings required by the component.\n   * @i18n\n   *\n   * Available properties:\n   * * `loadingText` (optional, string) - Text, displayed when the chart is loading, i.e. when `noData.statusType` is set to \"loading\".\n   * * `errorText` (optional, string) - Text, displayed when the chart is in error state, i.e. when `noData.statusType` is set to \"error\".\n   * * `recoveryText` (optional, string) - Text for the recovery button, displayed next to the error text.\n   * * `seriesFilterLabel` (optional, string) - Text for the visible label of the default series filter.\n   * * `seriesFilterPlaceholder` (optional, string) - Text for the default series filter placeholder.\n   * * `seriesFilterSelectedAriaLabel` (optional, string) - ARIA label of the default series filter which is appended to any option that is selected.\n   * * `legendAriaLabel` (optional, string) - ARIA label that is associated with the legend in case there is no visible `legend.title` defined.\n   * * `detailPopoverDismissAriaLabel` (optional, string) - ARIA label for the details popover dismiss button.\n   * * `chartRoleDescription` (optional, string) - Accessible role description of the chart plot area, e.g. \"interactive chart\".\n   * * `xAxisRoleDescription` (optional, string) - Accessible role description of the x axis, e.g. \"x axis\".\n   * * `yAxisRoleDescription` (optional, string) - Accessible role description of the y axis, e.g. \"y axis\".\n   */\n  i18nStrings?: CartesianI18nStrings;\n}\n\nexport interface WithPieI18nStrings {\n  /**\n   * An object that contains all of the localized strings required by the component.\n   * @i18n\n   *\n   * Available properties:\n   * * `loadingText` (optional, string) - Text, displayed when the chart is loading, i.e. when `noData.statusType` is set to \"loading\".\n   * * `errorText` (optional, string) - Text, displayed when the chart is in error state, i.e. when `noData.statusType` is set to \"error\".\n   * * `recoveryText` (optional, string) - Text for the recovery button, displayed next to the error text.\n   * * `seriesFilterLabel` (optional, string) - Text for the visible label of the default series filter.\n   * * `seriesFilterPlaceholder` (optional, string) - Text for the default series filter placeholder.\n   * * `seriesFilterSelectedAriaLabel` (optional, string) - ARIA label of the default series filter which is appended to any option that is selected.\n   * * `legendAriaLabel` (optional, string) - ARIA label that is associated with the legend in case there is no visible `legend.title` defined.\n   * * `detailPopoverDismissAriaLabel` (optional, string) - ARIA label for the details popover dismiss button.\n   * * `chartRoleDescription` (optional, string) - Accessible role description of the chart plot area, e.g. \"interactive chart\".\n   * * `segmentRoleDescription` (optional, string) - Accessible role description of the segment.\n   */\n  i18nStrings?: PieI18nStrings;\n}\n\nexport interface CartesianI18nStrings extends BaseI18nStrings {\n  xAxisRoleDescription?: string;\n  yAxisRoleDescription?: string;\n}\n\nexport interface PieI18nStrings extends BaseI18nStrings {\n  segmentRoleDescription?: string;\n}\n\nexport interface BaseFilterOptions {\n  seriesFilter?: boolean;\n  additionalFilters?: React.ReactNode;\n}\n\nexport interface BaseTooltipPointFormatted {\n  key?: React.ReactNode;\n  value?: React.ReactNode;\n  description?: React.ReactNode;\n  expandable?: boolean;\n  subItems?: ReadonlyArray<{ key: React.ReactNode; value: React.ReactNode }>;\n}\n\nexport interface AreaSeriesOptions extends BaseCartesianLineLikeOptions {\n  type: \"area\";\n  data: readonly PointDataItemType[];\n}\n\nexport interface AreaSplineSeriesOptions extends BaseCartesianLineLikeOptions {\n  type: \"areaspline\";\n  data: readonly PointDataItemType[];\n}\n\nexport interface ColumnSeriesOptions extends BaseCartesianSeriesOptions {\n  type: \"column\";\n  data: readonly PointDataItemType[];\n}\n\nexport interface LineSeriesOptions extends BaseCartesianLineLikeOptions {\n  type: \"line\";\n  data: readonly PointDataItemType[];\n}\n\nexport interface SplineSeriesOptions extends BaseCartesianLineLikeOptions {\n  type: \"spline\";\n  data: readonly PointDataItemType[];\n}\n\nexport interface ScatterSeriesOptions extends BaseCartesianSeriesOptions {\n  type: \"scatter\";\n  data: readonly PointDataItemType[];\n  marker?: PointMarkerOptions;\n}\n\nexport interface ErrorBarSeriesOptions extends Omit<BaseCartesianSeriesOptions, \"name\"> {\n  type: \"errorbar\";\n  name?: string;\n  data: readonly RangeDataItemOptions[];\n  linkedTo: string;\n}\n\nexport interface XThresholdSeriesOptions extends BaseCartesianLineLikeOptions {\n  type: \"x-threshold\";\n  value: number;\n}\n\nexport interface YThresholdSeriesOptions extends BaseCartesianLineLikeOptions {\n  type: \"y-threshold\";\n  value: number;\n}\n\nexport interface PieSeriesOptions extends BaseSeriesOptions {\n  type: \"pie\";\n  data: readonly PieSegmentOptions[];\n}\n\nexport interface DonutSeriesOptions extends BaseSeriesOptions {\n  type: \"donut\";\n  data: readonly PieSegmentOptions[];\n}\n\nexport interface PieSegmentOptions {\n  y: number | null;\n  id?: string;\n  name: string;\n  color?: string;\n}\n\nexport type PointDataItemType = null | number | PointDataItemOptions;\n\nexport interface PointDataItemOptions {\n  x?: number;\n  y: number | null;\n}\n\nexport interface RangeDataItemOptions {\n  x?: number;\n  low: number;\n  high: number;\n}\n\ninterface BaseSeriesOptions {\n  id?: string;\n  name: string;\n  color?: string;\n}\n\ntype BaseCartesianSeriesOptions = BaseSeriesOptions;\n\ninterface BaseCartesianLineLikeOptions extends BaseCartesianSeriesOptions {\n  dashStyle?: Highcharts.DashStyleValue;\n}\n\n// The symbols union matches that of Highcharts.PointMarkerOptionsObject\ninterface PointMarkerOptions {\n  symbol?: \"circle\" | \"diamond\" | \"square\" | \"triangle\" | \"triangle-down\";\n}\n\nexport interface CoreCartesianOptions {\n  /**\n   * When set to `true`, adds a visual emphasis on the zero baseline axis.\n   */\n  emphasizeBaseline?: boolean;\n  /**\n   * Controls the placement of the vertical axis title.\n   * When set to \"side\", displays the title along the axis line.\n   */\n  verticalAxisTitlePlacement?: \"top\" | \"side\";\n}\n\nexport interface CoreChartProps\n  extends\n    Pick<\n      BaseChartOptions,\n      | \"highcharts\"\n      | \"fallback\"\n      | \"fitHeight\"\n      | \"chartHeight\"\n      | \"chartMinHeight\"\n      | \"chartMinWidth\"\n      | \"ariaLabel\"\n      | \"ariaDescription\"\n      | \"filter\"\n      | \"noData\"\n    >,\n    CoreCartesianOptions {\n  /**\n   * The Highcharts options. Cloudscape injects custom styles and settings, but all can be\n   * overridden with explicitly provided options. An exception is event handlers - those are\n   * not overridden, but merged with Cloudscape event handlers so that both are getting called.\n   */\n  options: CoreChartProps.ChartOptions;\n  /**\n   * The Cloudscape tooltip, that comes with a vertical cursor when used on cartesian series.\n   * The tooltip content is only shown when `getContent` property is defined, which is called\n   * for each visited { x, y } point.\n   */\n  tooltip?: CoreChartProps.TooltipOptions;\n  /**\n   * A custom slot above the chart plot, chart's axis title, and filter.\n   */\n  header?: CoreChartProps.HeaderOptions;\n  /**\n   * Prop for passing a custom navigation control component to be rendered with the chart.\n   * Use this property to add timeline navigation, range selectors, or other custom navigation elements.\n   */\n  navigator?: React.ReactNode;\n  /**\n   * A custom slot below the chart plot and legend.\n   */\n  footer?: CoreChartProps.FooterOptions;\n  /**\n   * Chart legend options.\n   */\n  legend?: CoreChartProps.LegendOptions;\n  /**\n   * The callback to init the chart's API when it is ready. The API includes the Highcharts chart object, and\n   * additional Cloudscape methods.\n   */\n  callback?: (chart: CoreChartProps.ChartAPI) => void;\n  /**\n   * This is used to provide a test-utils selector. Do not use this property to provide custom styles.\n   */\n  className?: string;\n  /**\n   * IDs of visible series or points.\n   */\n  visibleItems?: readonly string[];\n  /**\n   * Called when a legend item is highlighted.\n   */\n  onLegendItemHighlight?: NonCancelableEventHandler<CoreChartProps.LegendItemHighlightDetail>;\n  /**\n   * Called when series/points visibility changes due to user interaction with legend or filter.\n   */\n  onVisibleItemsChange?: NonCancelableEventHandler<CoreChartProps.VisibleItemsChangeDetail>;\n  /**\n   * Called whenever chart tooltip is rendered to provide content for tooltip's header, body, and (optional) footer.\n   */\n  getTooltipContent?: CoreChartProps.GetTooltipContent;\n  /**\n   * Called whenever a legend item is hovered to provide content for legend tooltip's header, body, and (optional) footer.\n   * If not provided, no tooltip will be displayed.\n   */\n  getLegendTooltipContent?: CoreChartProps.GetLegendTooltipContent;\n  /**\n   * Called whenever chart point or group is highlighted.\n   */\n  onHighlight?: NonCancelableEventHandler<CoreChartProps.HighlightChangeDetail>;\n  /**\n   * Called whenever chart point or group loses highlight.\n   */\n  onClearHighlight?: NonCancelableEventHandler<CoreChartProps.HighlightClearDetail>;\n  /**\n   * Use Cloudscape keyboard navigation.\n   */\n  keyboardNavigation?: boolean;\n  /**\n   * An object that contains all of the localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: CoreChartProps.I18nStrings;\n  /**\n   * Specifies the options for each item in the chart.\n   */\n  getItemOptions?: CoreChartProps.GetItemOptions;\n}\n\nexport namespace CoreChartProps {\n  // The API methods allow programmatic triggering of chart's behaviors, some of which are not accessible via React state.\n  // This enables advanced integration scenarios, such as building a custom legend, or making multiple charts synchronized.\n  export interface ChartAPI {\n    chart: Highcharts.Chart;\n    highcharts: typeof Highcharts;\n    highlightItems(itemIds: readonly string[]): void;\n    setItemsVisible(itemIds: readonly string[]): void;\n    highlightChartPoint(point: Highcharts.Point): void;\n    highlightChartGroup(group: readonly Highcharts.Point[]): void;\n    clearChartHighlight(): void;\n  }\n\n  /**\n   * The item id. Can be the id of a series or a point.\n   */\n  export type GetItemOptions = (itemId: string) => CoreChartProps.ChartItemOptions;\n\n  // The extended version of Highcharts.Options. The axes types are extended with Cloudscape value formatter.\n  // We use a custom formatter because we cannot use the built-in Highcharts formatter for our tooltip.\n  export type ChartOptions = Omit<Highcharts.Options, \"xAxis\" | \"yAxis\"> & {\n    xAxis?: XAxisOptions | XAxisOptions[];\n    yAxis?: YAxisOptions | YAxisOptions[];\n  };\n  export type XAxisOptions = Highcharts.XAxisOptions & { valueFormatter?: (value: null | number) => string };\n  export type YAxisOptions = Highcharts.YAxisOptions & { valueFormatter?: (value: null | number) => string };\n\n  export interface ChartItemOptions {\n    /**\n     * If specified, specifies the status of an item.\n     * An item can be a point or a series.\n     */\n    status?: ChartSeriesMarkerStatus;\n  }\n\n  export interface HeaderOptions {\n    content: React.ReactNode;\n  }\n  export interface FooterOptions {\n    content: React.ReactNode;\n  }\n\n  export interface LegendOptions extends BaseLegendOptions {\n    bottomMaxHeight?: number;\n    position?: \"bottom\" | \"side\";\n    /**\n     * This property only applies when there are secondary items.\n     */\n    secondaryLegendTitle?: string;\n    /**\n     * This property only applies when there are secondary items.\n     */\n    secondaryLegendActions?: React.ReactNode;\n    /**\n     * When set to true, enables horizontal scrolling for legend items with long text.\n     * By default, long text is truncated with ellipsis.\n     */\n    enableHorizontalScroll?: boolean;\n    /**\n     * This property only applies when there are no secondary items and `position=\"bottom\"`.\n     */\n    horizontalAlignment?: LegendOptionsHorizontalAlignment;\n  }\n\n  export type LegendOptionsHorizontalAlignment = \"start\" | \"center\";\n\n  export type LegendItem = InternalComponentTypes.LegendItem;\n  export type LegendTooltipContent = InternalComponentTypes.LegendTooltipContent;\n  export type GetLegendTooltipContent = InternalComponentTypes.GetLegendTooltipContent;\n  export type GetLegendTooltipContentProps = InternalComponentTypes.GetLegendTooltipContentProps;\n\n  export interface TooltipOptions {\n    enabled?: boolean;\n    placement?: \"middle\" | \"outside\" | \"target\";\n    size?: \"small\" | \"medium\" | \"large\";\n    debounce?: number | boolean;\n    seriesSorting?: \"as-added\" | \"by-value-desc\";\n  }\n\n  export type GetTooltipContent = (props: GetTooltipContentProps) => TooltipContentRenderer;\n  export interface GetTooltipContentProps {\n    point: null | Highcharts.Point;\n    group: readonly Highcharts.Point[];\n  }\n  export interface TooltipContentRenderer {\n    point?: (props: TooltipPointProps) => TooltipPointFormatted;\n    details?: (props: TooltipDetailsProps) => readonly TooltipDetail[];\n    header?: (props: TooltipSlotProps) => React.ReactNode;\n    body?: (props: TooltipSlotProps) => React.ReactNode;\n    footer?: (props: TooltipSlotProps) => React.ReactNode;\n  }\n  export type TooltipPointFormatted = BaseTooltipPointFormatted;\n  export interface TooltipContentItem {\n    point: Highcharts.Point;\n    errorRanges: Highcharts.Point[];\n  }\n  export interface TooltipPointProps {\n    item: TooltipContentItem;\n    hideTooltip: () => void;\n  }\n  export interface TooltipSlotProps {\n    x: number;\n    items: TooltipContentItem[];\n    hideTooltip: () => void;\n  }\n\n  export interface TooltipDetailsProps {\n    point: Highcharts.Point;\n    hideTooltip: () => void;\n  }\n\n  export type TooltipDetail = BaseTooltipDetail;\n\n  export interface LegendItemHighlightDetail {\n    item: LegendItem;\n  }\n\n  export interface ApiInteraction {\n    interactionType: \"api\";\n  }\n  export interface FilterInteraction {\n    interactionType: \"filter\";\n  }\n  export interface ToggleInteraction {\n    interactionType: \"toggle\";\n    targetItemId: string;\n  }\n  export interface SelectInteraction {\n    interactionType: \"select\";\n    targetItemId: string;\n  }\n\n  export type InteractionKind = ApiInteraction | FilterInteraction | ToggleInteraction | SelectInteraction;\n\n  export type VisibleItemsChangeDetail = { items: readonly LegendItem[] } & InteractionKind;\n\n  export interface HighlightChangeDetail {\n    point: null | Highcharts.Point;\n    group: readonly Highcharts.Point[];\n    isApiCall: boolean;\n  }\n  export interface HighlightClearDetail {\n    isApiCall: boolean;\n  }\n\n  export type I18nStrings = CartesianI18nStrings & PieI18nStrings & CoreI18nStrings;\n}\n\nexport interface CoreLegendProps {\n  items: readonly CoreLegendProps.Item[];\n  title?: string;\n  ariaLabel?: string;\n  actions?: React.ReactNode;\n  alignment?: \"horizontal\" | \"vertical\";\n  enableHorizontalScroll?: boolean;\n  horizontalAlignment?: CoreChartProps.LegendOptionsHorizontalAlignment;\n  onClearHighlight?: NonCancelableEventHandler;\n  onItemHighlight?: NonCancelableEventHandler<CoreLegendProps.ItemHighlightDetail>;\n  onVisibleItemsChange?: NonCancelableEventHandler<CoreLegendProps.VisibleItemsChangeDetail>;\n  getLegendTooltipContent?: CoreLegendProps.GetTooltipContent;\n}\n\nexport namespace CoreLegendProps {\n  export type Item = InternalComponentTypes.LegendItem;\n  export type GetTooltipContent = InternalComponentTypes.GetLegendTooltipContent;\n  export interface ItemHighlightDetail {\n    item: Item;\n  }\n  export type VisibleItemsChangeDetail = { items: readonly string[] } & (\n    | CoreChartProps.ToggleInteraction\n    | CoreChartProps.SelectInteraction\n  );\n}\n\n// Utility types\n\nexport interface Rect {\n  x: number;\n  y: number;\n  height: number;\n  width: number;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/core/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type Highcharts from \"highcharts\";\n\nimport type * as InternalComponentTypes from \"../internal/components/interfaces\";\nimport { ChartSeriesMarkerStatus } from \"../internal/components/series-marker/interfaces\";\nimport { type NonCancelableEventHandler } from \"../internal/events\";\n\n// All charts take `highcharts` instance, that can be served statically or dynamically.\n// Although it has to be of type Highcharts, the TS type we use is `null | object`, so\n// that it is ignored by the documenter.\n\n/**\n * This interface includes common public chart properties, applicable for all chart types.\n */\nexport interface BaseChartOptions {\n  /**\n   * The Highcharts instance, which can be obtained using `import Highcharts from \"highcharts\"`.\n   * Supported Highcharts versions: 12.\n   */\n  highcharts: null | object;\n\n  /**\n   * Custom content that renders when `highcharts=null`. It renders a spinner if not defined.\n   */\n  fallback?: React.ReactNode;\n\n  /**\n   * The height of the chart plot in pixels. It does not include legend and filter.\n   */\n  chartHeight?: number;\n\n  /**\n   * The chart automatically adjusts its height to fill the parent container when this property is set.\n   */\n  fitHeight?: boolean;\n\n  /**\n   * Defines the minimum allowed height of the chart plot. Use this when `fitHeight=true` to\n   * prevent the chart plot from becoming too small to display its content. When the parent\n   * container is shorter than the minimum height, a vertical scrollbar appears automatically.\n   */\n  chartMinHeight?: number;\n\n  /**\n   * Defines the minimum allowed width of the chart plot. When the parent container is narrower than the\n   * minimum width, the horizontal scrollbar is automatically added.\n   */\n  chartMinWidth?: number;\n\n  /**\n   * Defines the ARIA label for the chart container.\n   * This property corresponds to [lang.chartContainerLabel](https://api.highcharts.com/highcharts/lang.accessibility.chartContainerLabel),\n   * and requires the [accessibility module](https://www.highcharts.com/docs/accessibility/accessibility-module).\n   */\n  ariaLabel?: string;\n\n  /**\n   * Defines the ARIA description of the chart container.\n   * This property corresponds to [accessibility.description](https://api.highcharts.com/highcharts/accessibility.description),\n   * and requires the [accessibility module](https://www.highcharts.com/docs/accessibility/accessibility-module).\n   */\n  ariaDescription?: string;\n\n  /**\n   * Defines chart legend options, including:\n   * * `enabled` (optional, boolean) - Hides legend when set to `false`.\n   * * `title` (optional, string) - Visible label, shown above the legend.\n   * * `actions` (optional, slot) - A slot before the legend that can be used to render custom actions.\n   */\n  legend?: BaseLegendOptions;\n\n  /**\n   * Defines options to represent empty, no-match, loading, and error state of the chart, including:\n   * * `statusType` (optional, \"finished\" | \"loading\" | \"error\") - Specifies the current status of loading data.\n   * * `empty` (optional, ReactNode) - Content displayed when the chart data is empty.\n   * * `noMatch` (optional, ReactNode) - Content displayed when there is no data to display due to the built-in filtering.\n   * * `loading` (optional, ReactNode) - Content displayed when `statusType=\"loading\"`. If omitted, the default loading state\n   * is shown, using `i18n.loadingText` or built-in i18n.\n   * * `error` (optional, ReactNode) - Content displayed when `statusType=\"error\"`. If omitted, the default error state\n   * is shown, using `i18n.errorText` and `i18n.recoveryText` (when `onRecoveryClick` is provided), or built-in i18n.\n   * * `onRecoveryClick` (optional, function) - Called when the user clicks the recovery button that appears when using default error\n   * state, and only if `onRecoveryClick` is provided. Use this to enable the user to retry a failed request or provide another option\n   * for the user to recover from the error.\n   */\n  noData?: BaseNoDataOptions;\n\n  /**\n   * Defines options for filtering in the chart, including:\n   * * `seriesFilter` (optional, boolean) - Displays default series filter at the top of the chart.\n   * * `additionalFilters` (optional, slot) - A slot for custom chart filters at the top of the chart.\n   */\n  filter?: BaseFilterOptions;\n}\n\nexport interface BaseLegendOptions {\n  enabled?: boolean;\n  title?: string;\n  actions?: React.ReactNode;\n}\n\nexport interface BaseNoDataOptions {\n  statusType?: \"finished\" | \"loading\" | \"error\";\n  empty?: React.ReactNode;\n  error?: React.ReactNode;\n  loading?: React.ReactNode;\n  noMatch?: React.ReactNode;\n  onRecoveryClick?: NonCancelableEventHandler;\n}\n\nexport interface BaseTooltipDetail {\n  key: React.ReactNode;\n  value: React.ReactNode;\n}\n\nexport interface BaseI18nStrings {\n  loadingText?: string;\n  errorText?: string;\n  recoveryText?: string;\n  seriesFilterLabel?: string;\n  seriesFilterPlaceholder?: string;\n  seriesFilterSelectedAriaLabel?: string;\n  legendAriaLabel?: string;\n  detailPopoverDismissAriaLabel?: string;\n  chartRoleDescription?: string;\n}\n\nexport interface CoreI18nStrings extends BaseI18nStrings {\n  /**\n   * ARIA label for the secondary legend when using dual axes charts.\n   *\n   * **Important**: When using dual axes, you should explicitly provide visible titles or ARIA labels\n   * for both the primary and secondary legends to ensure proper accessibility. The primary legend\n   * has built-in i18n support through `legendAriaLabel`, but the secondary legend currently requires\n   * this property to be explicitly provided.\n   */\n  secondaryLegendAriaLabel?: string;\n\n  /**\n   * ARIA label for the marker of a series. Series with status \"default\" will not announce a label, thus excluded by this method.\n   */\n  itemMarkerStatusAriaLabel?: (status: Exclude<ChartSeriesMarkerStatus, \"default\">) => string;\n}\n\nexport interface WithCartesianI18nStrings {\n  /**\n   * An object that contains all of the localized strings required by the component.\n   * @i18n\n   *\n   * Available properties:\n   * * `loadingText` (optional, string) - Text, displayed when the chart is loading, i.e. when `noData.statusType` is set to \"loading\".\n   * * `errorText` (optional, string) - Text, displayed when the chart is in error state, i.e. when `noData.statusType` is set to \"error\".\n   * * `recoveryText` (optional, string) - Text for the recovery button, displayed next to the error text.\n   * * `seriesFilterLabel` (optional, string) - Text for the visible label of the default series filter.\n   * * `seriesFilterPlaceholder` (optional, string) - Text for the default series filter placeholder.\n   * * `seriesFilterSelectedAriaLabel` (optional, string) - ARIA label of the default series filter which is appended to any option that is selected.\n   * * `legendAriaLabel` (optional, string) - ARIA label that is associated with the legend in case there is no visible `legend.title` defined.\n   * * `detailPopoverDismissAriaLabel` (optional, string) - ARIA label for the details popover dismiss button.\n   * * `chartRoleDescription` (optional, string) - Accessible role description of the chart plot area, e.g. \"interactive chart\".\n   * * `xAxisRoleDescription` (optional, string) - Accessible role description of the x axis, e.g. \"x axis\".\n   * * `yAxisRoleDescription` (optional, string) - Accessible role description of the y axis, e.g. \"y axis\".\n   */\n  i18nStrings?: CartesianI18nStrings;\n}\n\nexport interface WithPieI18nStrings {\n  /**\n   * An object that contains all of the localized strings required by the component.\n   * @i18n\n   *\n   * Available properties:\n   * * `loadingText` (optional, string) - Text, displayed when the chart is loading, i.e. when `noData.statusType` is set to \"loading\".\n   * * `errorText` (optional, string) - Text, displayed when the chart is in error state, i.e. when `noData.statusType` is set to \"error\".\n   * * `recoveryText` (optional, string) - Text for the recovery button, displayed next to the error text.\n   * * `seriesFilterLabel` (optional, string) - Text for the visible label of the default series filter.\n   * * `seriesFilterPlaceholder` (optional, string) - Text for the default series filter placeholder.\n   * * `seriesFilterSelectedAriaLabel` (optional, string) - ARIA label of the default series filter which is appended to any option that is selected.\n   * * `legendAriaLabel` (optional, string) - ARIA label that is associated with the legend in case there is no visible `legend.title` defined.\n   * * `detailPopoverDismissAriaLabel` (optional, string) - ARIA label for the details popover dismiss button.\n   * * `chartRoleDescription` (optional, string) - Accessible role description of the chart plot area, e.g. \"interactive chart\".\n   * * `segmentRoleDescription` (optional, string) - Accessible role description of the segment.\n   */\n  i18nStrings?: PieI18nStrings;\n}\n\nexport interface CartesianI18nStrings extends BaseI18nStrings {\n  xAxisRoleDescription?: string;\n  yAxisRoleDescription?: string;\n}\n\nexport interface PieI18nStrings extends BaseI18nStrings {\n  segmentRoleDescription?: string;\n}\n\nexport interface BaseFilterOptions {\n  seriesFilter?: boolean;\n  additionalFilters?: React.ReactNode;\n}\n\nexport interface BaseTooltipPointFormatted {\n  key?: React.ReactNode;\n  value?: React.ReactNode;\n  description?: React.ReactNode;\n  expandable?: boolean;\n  subItems?: ReadonlyArray<{ key: React.ReactNode; value: React.ReactNode }>;\n}\n\nexport interface AreaSeriesOptions extends BaseCartesianLineLikeOptions, LinkableSeries {\n  type: \"area\";\n  data: readonly PointDataItemType[];\n}\n\nexport interface AreaSplineSeriesOptions extends BaseCartesianLineLikeOptions, LinkableSeries {\n  type: \"areaspline\";\n  data: readonly PointDataItemType[];\n}\n\nexport interface ColumnSeriesOptions extends BaseCartesianSeriesOptions, LinkableSeries {\n  type: \"column\";\n  data: readonly PointDataItemType[];\n}\n\nexport interface LineSeriesOptions extends BaseCartesianLineLikeOptions, LinkableSeries {\n  type: \"line\";\n  data: readonly PointDataItemType[];\n}\n\nexport interface SplineSeriesOptions extends BaseCartesianLineLikeOptions, LinkableSeries {\n  type: \"spline\";\n  data: readonly PointDataItemType[];\n}\n\nexport interface ScatterSeriesOptions extends BaseCartesianSeriesOptions, LinkableSeries {\n  type: \"scatter\";\n  data: readonly PointDataItemType[];\n  marker?: PointMarkerOptions;\n}\n\nexport interface ErrorBarSeriesOptions extends Omit<BaseCartesianSeriesOptions, \"name\"> {\n  type: \"errorbar\";\n  name?: string;\n  data: readonly RangeDataItemOptions[];\n  linkedTo: string;\n}\n\nexport interface XThresholdSeriesOptions extends BaseCartesianLineLikeOptions {\n  type: \"x-threshold\";\n  value: number;\n}\n\nexport interface YThresholdSeriesOptions extends BaseCartesianLineLikeOptions {\n  type: \"y-threshold\";\n  value: number;\n}\n\nexport interface PieSeriesOptions extends BaseSeriesOptions {\n  type: \"pie\";\n  data: readonly PieSegmentOptions[];\n}\n\nexport interface DonutSeriesOptions extends BaseSeriesOptions {\n  type: \"donut\";\n  data: readonly PieSegmentOptions[];\n}\n\nexport interface PieSegmentOptions {\n  y: number | null;\n  id?: string;\n  name: string;\n  color?: string;\n}\n\nexport type PointDataItemType = null | number | PointDataItemOptions;\n\nexport interface PointDataItemOptions {\n  x?: number;\n  y: number | null;\n}\n\nexport interface RangeDataItemOptions {\n  x?: number;\n  low: number;\n  high: number;\n}\n\ninterface BaseSeriesOptions {\n  id?: string;\n  name: string;\n  color?: string;\n}\n\ntype BaseCartesianSeriesOptions = BaseSeriesOptions;\n\nexport interface LinkableSeries {\n  /**\n   * Links this series to another series by ID, or `\":previous\"` for the immediately preceding series.\n   * A linked series does not appear as a separate item in the legend or series filter, and its visibility\n   * follows the series it is linked to. It still renders in the chart and appears as a separate row in the tooltip.\n   *\n   * Use this to attach projected, forecast, or supplementary series to a primary series without cluttering the legend.\n   */\n  linkedTo?: string;\n}\n\ninterface BaseCartesianLineLikeOptions extends BaseCartesianSeriesOptions {\n  dashStyle?: Highcharts.DashStyleValue;\n}\n\n// The symbols union matches that of Highcharts.PointMarkerOptionsObject\ninterface PointMarkerOptions {\n  symbol?: \"circle\" | \"diamond\" | \"square\" | \"triangle\" | \"triangle-down\";\n}\n\nexport interface CoreCartesianOptions {\n  /**\n   * When set to `true`, adds a visual emphasis on the zero baseline axis.\n   */\n  emphasizeBaseline?: boolean;\n  /**\n   * Controls the placement of the vertical axis title.\n   * When set to \"side\", displays the title along the axis line.\n   */\n  verticalAxisTitlePlacement?: \"top\" | \"side\";\n}\n\nexport interface CoreChartProps\n  extends\n    Pick<\n      BaseChartOptions,\n      | \"highcharts\"\n      | \"fallback\"\n      | \"fitHeight\"\n      | \"chartHeight\"\n      | \"chartMinHeight\"\n      | \"chartMinWidth\"\n      | \"ariaLabel\"\n      | \"ariaDescription\"\n      | \"filter\"\n      | \"noData\"\n    >,\n    CoreCartesianOptions {\n  /**\n   * The Highcharts options. Cloudscape injects custom styles and settings, but all can be\n   * overridden with explicitly provided options. An exception is event handlers - those are\n   * not overridden, but merged with Cloudscape event handlers so that both are getting called.\n   */\n  options: CoreChartProps.ChartOptions;\n  /**\n   * The Cloudscape tooltip, that comes with a vertical cursor when used on cartesian series.\n   * The tooltip content is only shown when `getContent` property is defined, which is called\n   * for each visited { x, y } point.\n   */\n  tooltip?: CoreChartProps.TooltipOptions;\n  /**\n   * A custom slot above the chart plot, chart's axis title, and filter.\n   */\n  header?: CoreChartProps.HeaderOptions;\n  /**\n   * Prop for passing a custom navigation control component to be rendered with the chart.\n   * Use this property to add timeline navigation, range selectors, or other custom navigation elements.\n   */\n  navigator?: React.ReactNode;\n  /**\n   * A custom slot below the chart plot and legend.\n   */\n  footer?: CoreChartProps.FooterOptions;\n  /**\n   * Chart legend options.\n   */\n  legend?: CoreChartProps.LegendOptions;\n  /**\n   * The callback to init the chart's API when it is ready. The API includes the Highcharts chart object, and\n   * additional Cloudscape methods.\n   */\n  callback?: (chart: CoreChartProps.ChartAPI) => void;\n  /**\n   * This is used to provide a test-utils selector. Do not use this property to provide custom styles.\n   */\n  className?: string;\n  /**\n   * IDs of visible series or points.\n   */\n  visibleItems?: readonly string[];\n  /**\n   * Called when a legend item is highlighted.\n   */\n  onLegendItemHighlight?: NonCancelableEventHandler<CoreChartProps.LegendItemHighlightDetail>;\n  /**\n   * Called when series/points visibility changes due to user interaction with legend or filter.\n   */\n  onVisibleItemsChange?: NonCancelableEventHandler<CoreChartProps.VisibleItemsChangeDetail>;\n  /**\n   * Called whenever chart tooltip is rendered to provide content for tooltip's header, body, and (optional) footer.\n   */\n  getTooltipContent?: CoreChartProps.GetTooltipContent;\n  /**\n   * Called whenever a legend item is hovered to provide content for legend tooltip's header, body, and (optional) footer.\n   * If not provided, no tooltip will be displayed.\n   */\n  getLegendTooltipContent?: CoreChartProps.GetLegendTooltipContent;\n  /**\n   * Called whenever chart point or group is highlighted.\n   */\n  onHighlight?: NonCancelableEventHandler<CoreChartProps.HighlightChangeDetail>;\n  /**\n   * Called whenever chart point or group loses highlight.\n   */\n  onClearHighlight?: NonCancelableEventHandler<CoreChartProps.HighlightClearDetail>;\n  /**\n   * Use Cloudscape keyboard navigation.\n   */\n  keyboardNavigation?: boolean;\n  /**\n   * An object that contains all of the localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: CoreChartProps.I18nStrings;\n  /**\n   * Specifies the options for each item in the chart.\n   */\n  getItemOptions?: CoreChartProps.GetItemOptions;\n}\n\nexport namespace CoreChartProps {\n  // The API methods allow programmatic triggering of chart's behaviors, some of which are not accessible via React state.\n  // This enables advanced integration scenarios, such as building a custom legend, or making multiple charts synchronized.\n  export interface ChartAPI {\n    chart: Highcharts.Chart;\n    highcharts: typeof Highcharts;\n    highlightItems(itemIds: readonly string[]): void;\n    setItemsVisible(itemIds: readonly string[]): void;\n    highlightChartPoint(point: Highcharts.Point): void;\n    highlightChartGroup(group: readonly Highcharts.Point[]): void;\n    clearChartHighlight(): void;\n  }\n\n  /**\n   * The item id. Can be the id of a series or a point.\n   */\n  export type GetItemOptions = (itemId: string) => CoreChartProps.ChartItemOptions;\n\n  // The extended version of Highcharts.Options. The axes types are extended with Cloudscape value formatter.\n  // We use a custom formatter because we cannot use the built-in Highcharts formatter for our tooltip.\n  export type ChartOptions = Omit<Highcharts.Options, \"xAxis\" | \"yAxis\"> & {\n    xAxis?: XAxisOptions | XAxisOptions[];\n    yAxis?: YAxisOptions | YAxisOptions[];\n  };\n  export type XAxisOptions = Highcharts.XAxisOptions & { valueFormatter?: (value: null | number) => string };\n  export type YAxisOptions = Highcharts.YAxisOptions & { valueFormatter?: (value: null | number) => string };\n\n  export interface ChartItemOptions {\n    /**\n     * If specified, specifies the status of an item.\n     * An item can be a point or a series.\n     */\n    status?: ChartSeriesMarkerStatus;\n  }\n\n  export interface HeaderOptions {\n    content: React.ReactNode;\n  }\n  export interface FooterOptions {\n    content: React.ReactNode;\n  }\n\n  export interface LegendOptions extends BaseLegendOptions {\n    bottomMaxHeight?: number;\n    position?: \"bottom\" | \"side\";\n    /**\n     * This property only applies when there are secondary items.\n     */\n    secondaryLegendTitle?: string;\n    /**\n     * This property only applies when there are secondary items.\n     */\n    secondaryLegendActions?: React.ReactNode;\n    /**\n     * When set to true, enables horizontal scrolling for legend items with long text.\n     * By default, long text is truncated with ellipsis.\n     */\n    enableHorizontalScroll?: boolean;\n    /**\n     * This property only applies when there are no secondary items and `position=\"bottom\"`.\n     */\n    horizontalAlignment?: LegendOptionsHorizontalAlignment;\n  }\n\n  export type LegendOptionsHorizontalAlignment = \"start\" | \"center\";\n\n  export type LegendItem = InternalComponentTypes.LegendItem;\n  export type LegendTooltipContent = InternalComponentTypes.LegendTooltipContent;\n  export type GetLegendTooltipContent = InternalComponentTypes.GetLegendTooltipContent;\n  export type GetLegendTooltipContentProps = InternalComponentTypes.GetLegendTooltipContentProps;\n\n  export interface TooltipOptions {\n    enabled?: boolean;\n    placement?: \"middle\" | \"outside\" | \"target\";\n    size?: \"small\" | \"medium\" | \"large\";\n    debounce?: number | boolean;\n    seriesSorting?: \"as-added\" | \"by-value-desc\";\n  }\n\n  export type GetTooltipContent = (props: GetTooltipContentProps) => TooltipContentRenderer;\n  export interface GetTooltipContentProps {\n    point: null | Highcharts.Point;\n    group: readonly Highcharts.Point[];\n  }\n  export interface TooltipContentRenderer {\n    point?: (props: TooltipPointProps) => TooltipPointFormatted;\n    details?: (props: TooltipDetailsProps) => readonly TooltipDetail[];\n    header?: (props: TooltipSlotProps) => React.ReactNode;\n    body?: (props: TooltipSlotProps) => React.ReactNode;\n    footer?: (props: TooltipSlotProps) => React.ReactNode;\n  }\n  export type TooltipPointFormatted = BaseTooltipPointFormatted;\n  export interface TooltipContentItem {\n    point: Highcharts.Point;\n    errorRanges: Highcharts.Point[];\n  }\n  export interface TooltipPointProps {\n    item: TooltipContentItem;\n    hideTooltip: () => void;\n  }\n  export interface TooltipSlotProps {\n    x: number;\n    items: TooltipContentItem[];\n    hideTooltip: () => void;\n  }\n\n  export interface TooltipDetailsProps {\n    point: Highcharts.Point;\n    hideTooltip: () => void;\n  }\n\n  export type TooltipDetail = BaseTooltipDetail;\n\n  export interface LegendItemHighlightDetail {\n    item: LegendItem;\n  }\n\n  export interface ApiInteraction {\n    interactionType: \"api\";\n  }\n  export interface FilterInteraction {\n    interactionType: \"filter\";\n  }\n  export interface ToggleInteraction {\n    interactionType: \"toggle\";\n    targetItemId: string;\n  }\n  export interface SelectInteraction {\n    interactionType: \"select\";\n    targetItemId: string;\n  }\n\n  export type InteractionKind = ApiInteraction | FilterInteraction | ToggleInteraction | SelectInteraction;\n\n  export type VisibleItemsChangeDetail = { items: readonly LegendItem[] } & InteractionKind;\n\n  export interface HighlightChangeDetail {\n    point: null | Highcharts.Point;\n    group: readonly Highcharts.Point[];\n    isApiCall: boolean;\n  }\n  export interface HighlightClearDetail {\n    isApiCall: boolean;\n  }\n\n  export type I18nStrings = CartesianI18nStrings & PieI18nStrings & CoreI18nStrings;\n}\n\nexport interface CoreLegendProps {\n  items: readonly CoreLegendProps.Item[];\n  title?: string;\n  ariaLabel?: string;\n  actions?: React.ReactNode;\n  alignment?: \"horizontal\" | \"vertical\";\n  enableHorizontalScroll?: boolean;\n  horizontalAlignment?: CoreChartProps.LegendOptionsHorizontalAlignment;\n  onClearHighlight?: NonCancelableEventHandler;\n  onItemHighlight?: NonCancelableEventHandler<CoreLegendProps.ItemHighlightDetail>;\n  onVisibleItemsChange?: NonCancelableEventHandler<CoreLegendProps.VisibleItemsChangeDetail>;\n  getLegendTooltipContent?: CoreLegendProps.GetTooltipContent;\n}\n\nexport namespace CoreLegendProps {\n  export type Item = InternalComponentTypes.LegendItem;\n  export type GetTooltipContent = InternalComponentTypes.GetLegendTooltipContent;\n  export interface ItemHighlightDetail {\n    item: Item;\n  }\n  export type VisibleItemsChangeDetail = { items: readonly string[] } & (\n    | CoreChartProps.ToggleInteraction\n    | CoreChartProps.SelectInteraction\n  );\n}\n\n// Utility types\n\nexport interface Rect {\n  x: number;\n  y: number;\n  height: number;\n  width: number;\n}\n"]}

package/internal/environment.js

@@ -1,5 +1,5 @@
 export var PACKAGE_SOURCE = "chart-components";
-export var PACKAGE_VERSION = "1.0.0 (be40ed7a)";
+export var PACKAGE_VERSION = "1.0.0 (9a1b8225)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;
 export var SYSTEM = "core";

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "chart-components",
-  "PACKAGE_VERSION": "1.0.0 (be40ed7a)",
+  "PACKAGE_VERSION": "1.0.0 (9a1b8225)",
   "THEME": "open-source-visual-refresh",
   "ALWAYS_VISUAL_REFRESH": true,
   "SYSTEM": "core"

package/internal/generated/styles/tokens.d.ts

@@ -305,6 +305,7 @@ export const colorBackgroundCodeEditorGutterDefault: string;
 export const colorBackgroundCodeEditorLoading: string;
 export const colorBackgroundCodeEditorPaneItemHover: string;
 export const colorBackgroundCodeEditorStatusBar: string;
+export const colorBackgroundCard: string;
 export const colorBackgroundContainerContent: string;
 export const colorBackgroundContainerHeader: string;
 export const colorBackgroundControlChecked: string;
@@ -395,6 +396,8 @@ export const colorBorderCodeEditorAceActiveLineLightTheme: string;
 export const colorBorderCodeEditorAceActiveLineDarkTheme: string;
 export const colorBorderCodeEditorDefault: string;
 export const colorBorderCodeEditorPaneItemHover: string;
+export const colorBorderCard: string;
+export const colorBorderCardHighlighted: string;
 export const colorBorderContainerDivider: string;
 export const colorBorderContainerTop: string;
 export const colorBorderControlChecked: string;
@@ -624,6 +627,8 @@ export const borderRadiusBadge: string;
 export const borderRadiusButton: string;
 export const borderRadiusCalendarDayFocusRing: string;
 export const borderRadiusCodeEditor: string;
+export const borderRadiusCardDefault: string;
+export const borderRadiusCardEmbedded: string;
 export const borderRadiusContainer: string;
 export const borderRadiusControlCircularFocusRing: string;
 export const borderRadiusControlDefaultFocusRing: string;
@@ -641,6 +646,8 @@ export const borderRadiusTutorialPanelItem: string;
 export const borderTableStickyWidth: string;
 export const borderLinkFocusRingOutline: string;
 export const borderLinkFocusRingShadowSpread: string;
+export const borderWidthCard: string;
+export const borderWidthCardHighlighted: string;
 export const borderWidthAlert: string;
 export const borderWidthButton: string;
 export const borderWidthDropdown: string;
@@ -715,8 +722,10 @@ export const spaceButtonModalDismissVertical: string;
 export const spaceCalendarGridFocusOutlineGutter: string;
 export const spaceCalendarGridSelectedFocusOutlineGutter: string;
 export const spaceCalendarGridGutter: string;
-export const spaceCardHorizontal: string;
-export const spaceCardVertical: string;
+export const spaceCardHorizontalDefault: string;
+export const spaceCardHorizontalEmbedded: string;
+export const spaceCardVerticalDefault: string;
+export const spaceCardVerticalEmbedded: string;
 export const spaceCodeEditorStatusFocusOutlineGutter: string;
 export const spaceContainerContentTop: string;
 export const spaceContainerHeaderTop: string;
@@ -802,6 +811,7 @@ export const spaceL: string;
 export const spaceXl: string;
 export const spaceXxl: string;
 export const spaceXxxl: string;
+export const shadowCard: string;
 export const shadowContainer: string;
 export const shadowContainerActive: string;
 export const shadowDropdown: string;

package/internal/generated/styles/tokens.js

@@ -305,6 +305,7 @@ export var colorBackgroundCodeEditorGutterDefault = "var(--color-background-code
 export var colorBackgroundCodeEditorLoading = "var(--color-background-code-editor-loading-6nwpin, #f9f9fa)";
 export var colorBackgroundCodeEditorPaneItemHover = "var(--color-background-code-editor-pane-item-hover-z6k9mr, #ebebf0)";
 export var colorBackgroundCodeEditorStatusBar = "var(--color-background-code-editor-status-bar-yjtxod, #f3f3f7)";
+export var colorBackgroundCard = "var(--color-background-card-p5vrq0, #ffffff)";
 export var colorBackgroundContainerContent = "var(--color-background-container-content-6u8rvp, #ffffff)";
 export var colorBackgroundContainerHeader = "var(--color-background-container-header-gs3mbe, #ffffff)";
 export var colorBackgroundControlChecked = "var(--color-background-control-checked-ka7kc2, #006ce0)";
@@ -395,6 +396,8 @@ export var colorBorderCodeEditorAceActiveLineLightTheme = "var(--color-border-co
 export var colorBorderCodeEditorAceActiveLineDarkTheme = "var(--color-border-code-editor-ace-active-line-dark-theme-v09eti, #656871)";
 export var colorBorderCodeEditorDefault = "var(--color-border-code-editor-default-2bfcfq, #dedee3)";
 export var colorBorderCodeEditorPaneItemHover = "var(--color-border-code-editor-pane-item-hover-wvblek, #8c8c94)";
+export var colorBorderCard = "var(--color-border-card-3n24fu, #c6c6cd)";
+export var colorBorderCardHighlighted = "var(--color-border-card-highlighted-ygosod, #006ce0)";
 export var colorBorderContainerDivider = "var(--color-border-container-divider-9huz1a, transparent)";
 export var colorBorderContainerTop = "var(--color-border-container-top-k3vmoz, transparent)";
 export var colorBorderControlChecked = "var(--color-border-control-checked-bdv28l, #006ce0)";
@@ -624,6 +627,8 @@ export var borderRadiusBadge = "var(--border-radius-badge-exolfb, 4px)";
 export var borderRadiusButton = "var(--border-radius-button-7bgkcs, 20px)";
 export var borderRadiusCalendarDayFocusRing = "var(--border-radius-calendar-day-focus-ring-xvvbuc, 3px)";
 export var borderRadiusCodeEditor = "var(--border-radius-code-editor-5palck, 8px)";
+export var borderRadiusCardDefault = "var(--border-radius-card-default-d8ipr7, 16px)";
+export var borderRadiusCardEmbedded = "var(--border-radius-card-embedded-fvclp8, 8px)";
 export var borderRadiusContainer = "var(--border-radius-container-nsfwmm, 16px)";
 export var borderRadiusControlCircularFocusRing = "var(--border-radius-control-circular-focus-ring-yjhscw, 4px)";
 export var borderRadiusControlDefaultFocusRing = "var(--border-radius-control-default-focus-ring-1uabki, 4px)";
@@ -641,6 +646,8 @@ export var borderRadiusTutorialPanelItem = "var(--border-radius-tutorial-panel-i
 export var borderTableStickyWidth = "var(--border-table-sticky-width-ai31mi, 1px)";
 export var borderLinkFocusRingOutline = "var(--border-link-focus-ring-outline-1p0hnu, 0)";
 export var borderLinkFocusRingShadowSpread = "var(--border-link-focus-ring-shadow-spread-39uvxr, 2px)";
+export var borderWidthCard = "var(--border-width-card-x24gzt, 1px)";
+export var borderWidthCardHighlighted = "var(--border-width-card-highlighted-x17dhn, 2px)";
 export var borderWidthAlert = "var(--border-width-alert-tuifgy, 2px)";
 export var borderWidthButton = "var(--border-width-button-jm0qg7, 2px)";
 export var borderWidthDropdown = "var(--border-width-dropdown-youcay, 2px)";
@@ -715,8 +722,10 @@ export var spaceButtonModalDismissVertical = "var(--space-button-modal-dismiss-v
 export var spaceCalendarGridFocusOutlineGutter = "var(--space-calendar-grid-focus-outline-gutter-vvh43m, -5px)";
 export var spaceCalendarGridSelectedFocusOutlineGutter = "var(--space-calendar-grid-selected-focus-outline-gutter-dy6gf8, -5px)";
 export var spaceCalendarGridGutter = "var(--space-calendar-grid-gutter-zojo6r, 6px)";
-export var spaceCardHorizontal = "var(--space-card-horizontal-8o8t31, 20px)";
-export var spaceCardVertical = "var(--space-card-vertical-uad0cc, 16px)";
+export var spaceCardHorizontalDefault = "var(--space-card-horizontal-default-pihe12, 20px)";
+export var spaceCardHorizontalEmbedded = "var(--space-card-horizontal-embedded-sasxhu, 12px)";
+export var spaceCardVerticalDefault = "var(--space-card-vertical-default-e40tif, 16px)";
+export var spaceCardVerticalEmbedded = "var(--space-card-vertical-embedded-30pnhg, 10px)";
 export var spaceCodeEditorStatusFocusOutlineGutter = "var(--space-code-editor-status-focus-outline-gutter-o87hra, -7px)";
 export var spaceContainerContentTop = "var(--space-container-content-top-1wtqrc, 4px)";
 export var spaceContainerHeaderTop = "var(--space-container-header-top-am4vzw, 12px)";
@@ -802,6 +811,7 @@ export var spaceL = "var(--space-l-2ud1p3, 20px)";
 export var spaceXl = "var(--space-xl-jfy3x4, 24px)";
 export var spaceXxl = "var(--space-xxl-32srm4, 32px)";
 export var spaceXxxl = "var(--space-xxxl-aut1u7, 40px)";
+export var shadowCard = "var(--shadow-card-hmrw4q, none)";
 export var shadowContainer = "var(--shadow-container-53ltfv, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12))";
 export var shadowContainerActive = "var(--shadow-container-active-ypjjoc, 0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a)";
 export var shadowDropdown = "var(--shadow-dropdown-isf0w4, 0px 4px 20px 1px rgba(0, 7, 22, 0.10))";