@dynatrace/strato-components 3.4.0 → 3.5.0

package/esm/content/chip-group/ChipGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip-group/ChipGroup.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useEffect, useReducer, useRef, useState } from 'react';\n\nimport { chipGroupCSS } from './ChipGroup.sty.js';\nimport { ChipGroupContext } from './contexts/ChipGroupContext.js';\nimport { InternalChipGroupContext } from './contexts/InternalChipGroupContext.js';\nimport { Control } from './Control.js';\nimport { HiddenCount } from './HiddenCount.js';\nimport { chipGroupReducer } from './state/chip-group-state-reducer.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport type { ChipOwnProps } from '../chip/types/chip.js';\n\nconst COMPONENT_NAME = 'ChipGroup';\n\n/**\n * Accepted base properties for ChipGroup.\n * @public\n */\nexport interface ChipGroupBaseProps\n  extends StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * Whether the chip group is disabled.\n   * If set to true, all the chips inside the group are disabled, unless explicitly overridden.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * The size of the spacing and chips in the group.\n   * All the chips match the size of the group, but can be overridden individually.\n   * @defaultValue default\n   */\n  size?: ChipOwnProps['size'];\n\n  /**\n   * Callback triggered when the expanded state changes.\n   */\n  onExpandedChange?: (state: boolean) => void;\n\n  /**\n   * Maximum number of chips rendered before the \"Show more\" control.\n   *\n   * If set to 'auto', the chip group automatically determines\n   * how many chips can fit based on the available width.\n   * If a number is provided, it limits the visible chips to that number\n   * when the group is collapsed, regardless of available space.\n   * @defaultValue 'auto'\n   */\n  maxVisibleChips?: 'auto' | number;\n}\n\n/**\n * Properties for the controlled variant of ChipGroup.\n * @public\n */\nexport interface ChipGroupControlledProps {\n  /** Whether the chip group is expanded. */\n  expanded?: boolean;\n  /** Whether the chip group is expanded by default. */\n  defaultExpanded?: never;\n}\n\n/**\n * Properties for the uncontrolled variant of ChipGroup.\n * @public\n */\nexport interface ChipGroupUncontrolledProps {\n  /** Whether the chip group is expanded. */\n  expanded?: never;\n  /** Whether the chip group is expanded by default. */\n  defaultExpanded?: boolean;\n}\n\n/**\n * Properties for the ChipGroup component.\n * @public\n */\nexport type ChipGroupProps = ChipGroupBaseProps &\n  (ChipGroupControlledProps | ChipGroupUncontrolledProps) &\n  WithChildren;\n\n/**\n * ChipGroup component\n */\nconst RootChipGroup = forwardRef<HTMLElement, ChipGroupProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      expanded: expandedProp,\n      defaultExpanded,\n      disabled,\n      size,\n      onExpandedChange,\n      maxVisibleChips = 'auto',\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const uniqueId = useId();\n\n    const [state, dispatch] = useReducer(chipGroupReducer, {\n      chips: {},\n    });\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const rootRef = useMergeRefs<HTMLElement | null>([\n      containerRef,\n      forwardedRef,\n    ]);\n\n    // Width of the chip group container.\n    const { width: containerWidth } = useContainerSize(containerRef);\n\n    const [expanded, setExpanded] = useControllableState({\n      value: expandedProp,\n      defaultValue: defaultExpanded,\n      onChange: onExpandedChange,\n    });\n\n    const [allChipsFit, setAllChipsFit] = useState(false);\n    const [hiddenChips, setHiddenChips] = useState<string[]>([]);\n    const [visibleChips, setVisibleChips] = useState<string[]>([]);\n\n    useEffect(() => {\n      const chips = Object.entries(state.chips);\n      const chipKeys = chips.map(([uniqueChipKey]) => uniqueChipKey);\n\n      // Reset visibility when there are no chips.\n      if (chips.length === 0) {\n        setVisibleChips([]);\n        return;\n      }\n\n      // Cannot calculate visibility when any chip has not been measured yet.\n      if (chips.some(([, chip]) => !chip.width)) {\n        return;\n      }\n\n      // No need to calculate fitting chips if the group is expanded, but all of them have to be set to visible again.\n      if (expanded) {\n        setHiddenChips([]);\n        setVisibleChips(chipKeys);\n\n        if (\n          !containerRef.current?.firstChild // ChipGroup may be empty.\n        ) {\n          setAllChipsFit(true);\n          return;\n        }\n\n        // Check if the flex container is wrapping. If not, the container has grown\n        // enough so all chips fit again, and we can hide the control.\n        let wrap = false;\n        let child = containerRef.current.firstChild as HTMLElement;\n\n        // requestAnimationFrame ensures the DOM updates are completed before performing the check\n        // and prevent issues with displaying the \"show less\" button.\n        const rafId = requestAnimationFrame(() => {\n          // Check if any chip is wrapped to the next line.\n          do {\n            if (child.classList.contains('chip') && child.offsetTop > 0) {\n              wrap = true;\n            }\n            child = child.nextSibling as HTMLElement;\n          } while (!wrap && child);\n          setAllChipsFit(!wrap);\n        });\n\n        return () => {\n          cancelAnimationFrame(rafId);\n        };\n      }\n\n      // Flex gap needs to be considered in the calculation.\n      // Either `Spacings.Size6` or `Spacings.Size8`\n      const spacing = size === 'condensed' ? 6 : 8;\n\n      /**\n       * Iterate over all chips and check, if the chips + flex gap still fit in one line.\n       */\n      let totalChipsWidth = 0;\n      let setHidden = true;\n      let _hiddenChipsIndex = chips.length;\n\n      for (const [index, [, value]] of Array.from(chips).entries()) {\n        totalChipsWidth += value.width || 0;\n\n        // Whether the chips have enough space in the container. The first chip is always visible.\n        const chipFits =\n          index === 0 ||\n          Math.floor(totalChipsWidth + index * spacing) <=\n            Math.round(containerWidth);\n\n        // Whether the chips + control have enough space in the container.\n        const chipAndControlFits =\n          index === 0 ||\n          totalChipsWidth +\n            (index + 1) * spacing +\n            (state.control?.width || 0) <=\n            containerWidth;\n\n        // Whether the chip should be visible.\n        // If we are at the last chip and the visibility of the control is determined automatically,\n        // we can safely show the chip. In this case, all of them fit in one line and the control will be hidden.\n        // If the control is always shown, we only show the chip if there's enough space left to also render the control.\n        const visible =\n          index === chips.length - 1 &&\n          (state.control?.show ?? 'auto') === 'auto'\n            ? chipFits\n            : chipAndControlFits;\n\n        // Set the index of the first hidden chip for the first chip that doesn't fit anymore.\n        if (!visible && setHidden) {\n          setHidden = false;\n\n          _hiddenChipsIndex = index;\n        }\n      }\n\n      // Apply maxVisibleChips limit if specified and valid (non-negative)\n      const effectiveHiddenChipsIndex =\n        maxVisibleChips !== 'auto' && maxVisibleChips >= 0\n          ? Math.min(_hiddenChipsIndex, maxVisibleChips)\n          : _hiddenChipsIndex;\n\n      const allFit = effectiveHiddenChipsIndex === chips.length;\n      setAllChipsFit(allFit);\n\n      setHiddenChips(chipKeys.slice(effectiveHiddenChipsIndex));\n      setVisibleChips(chipKeys.slice(0, effectiveHiddenChipsIndex));\n    }, [containerWidth, expanded, size, state, maxVisibleChips]);\n\n    return (\n      <ChipGroupContext.Provider\n        value={{\n          visibleKeys: visibleChips,\n          hiddenKeys: hiddenChips,\n        }}\n      >\n        <InternalChipGroupContext.Provider\n          value={{\n            chipGroupId: uniqueId,\n            disabled,\n            size,\n            expanded,\n            allChipsFit,\n            dispatch,\n            setExpanded,\n          }}\n        >\n          <Flex\n            ref={rootRef}\n            id={uniqueId}\n            className={clsx(\n              chipGroupCSS({ size, expanded }),\n              consumerClassName,\n            )}\n            style={consumerStyle}\n            data-testid={dataTestId}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            {...ariaLabelingProps}\n            {...behavioralTrackingProps}\n            {...forwardProps}\n            data-dt-component={COMPONENT_NAME}\n          >\n            {children}\n          </Flex>\n        </InternalChipGroupContext.Provider>\n      </ChipGroupContext.Provider>\n    );\n  },\n);\n\n(RootChipGroup as typeof RootChipGroup & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\n/**\n * Use the `ChipGroup` component to group multiple `Chip`s in an expandable container.\n * @public\n */\nexport const ChipGroup = Object.assign(RootChipGroup, {\n  Control,\n  HiddenCount,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef, useEffect, useReducer, useRef, useState } from 'react';\n\nimport { chipGroupCSS } from './ChipGroup.sty.js';\nimport { ChipGroupContext } from './contexts/ChipGroupContext.js';\nimport { InternalChipGroupContext } from './contexts/InternalChipGroupContext.js';\nimport { Control } from './Control.js';\nimport { HiddenCount } from './HiddenCount.js';\nimport { chipGroupReducer } from './state/chip-group-state-reducer.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { MaskingProps } from '../../core/types/masking-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport type { WithChildren } from '../../core/types/with-children.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport type { ChipOwnProps } from '../chip/types/chip.js';\n\nconst COMPONENT_NAME = 'ChipGroup';\n\n/**\n * Accepted base properties for ChipGroup.\n * @public\n */\nexport interface ChipGroupBaseProps\n  extends StylingProps,\n    DataTestId,\n    MaskingProps,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * Whether the chip group is disabled.\n   * If set to true, all the chips inside the group are disabled, unless explicitly overridden.\n   * @defaultValue false\n   */\n  disabled?: boolean;\n\n  /**\n   * The size of the spacing and chips in the group.\n   * All the chips match the size of the group, but can be overridden individually.\n   * @defaultValue default\n   */\n  size?: ChipOwnProps['size'];\n\n  /**\n   * Callback triggered when the expanded state changes.\n   */\n  onExpandedChange?: (state: boolean) => void;\n\n  /**\n   * Maximum number of chips rendered before the \"Show more\" control.\n   *\n   * If set to 'auto', the chip group automatically determines\n   * how many chips can fit based on the available width.\n   * If a number is provided, it limits the visible chips to that number\n   * when the group is collapsed, regardless of available space.\n   * @defaultValue 'auto'\n   */\n  maxVisibleChips?: 'auto' | number;\n}\n\n/**\n * Properties for the controlled variant of ChipGroup.\n * @public\n */\nexport interface ChipGroupControlledProps {\n  /** Whether the chip group is expanded. */\n  expanded?: boolean;\n  /** Whether the chip group is expanded by default. */\n  defaultExpanded?: never;\n}\n\n/**\n * Properties for the uncontrolled variant of ChipGroup.\n * @public\n */\nexport interface ChipGroupUncontrolledProps {\n  /** Whether the chip group is expanded. */\n  expanded?: never;\n  /** Whether the chip group is expanded by default. */\n  defaultExpanded?: boolean;\n}\n\n/**\n * Properties for the ChipGroup component.\n * @public\n */\nexport type ChipGroupProps = ChipGroupBaseProps &\n  (ChipGroupControlledProps | ChipGroupUncontrolledProps) &\n  WithChildren;\n\n/**\n * ChipGroup component\n */\nconst RootChipGroup = forwardRef<HTMLElement, ChipGroupProps>(\n  (props, forwardedRef) => {\n    const {\n      children,\n      expanded: expandedProp,\n      defaultExpanded,\n      disabled,\n      size,\n      onExpandedChange,\n      maxVisibleChips = 'auto',\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n    const ariaLabelingProps = useAriaLabelingProps(restProps);\n    const forwardProps = useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const uniqueId = useId();\n\n    const [state, dispatch] = useReducer(chipGroupReducer, {\n      chips: {},\n    });\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const rootRef = useMergeRefs<HTMLElement | null>([\n      containerRef,\n      forwardedRef,\n    ]);\n\n    // Width of the chip group container.\n    const { width: containerWidth } = useContainerSize(containerRef);\n\n    const [expanded, setExpanded] = useControllableState({\n      value: expandedProp,\n      defaultValue: defaultExpanded,\n      onChange: onExpandedChange,\n    });\n\n    const [allChipsFit, setAllChipsFit] = useState(false);\n    const [hiddenChips, setHiddenChips] = useState<string[]>([]);\n    const [visibleChips, setVisibleChips] = useState<string[]>([]);\n\n    useEffect(() => {\n      const chips = Object.entries(state.chips);\n      const chipKeys = chips.map(([uniqueChipKey]) => uniqueChipKey);\n\n      // Reset visibility when there are no chips.\n      if (chips.length === 0) {\n        setVisibleChips([]);\n        return;\n      }\n\n      // Cannot calculate visibility when any chip has not been measured yet.\n      if (chips.some(([, chip]) => !chip.width)) {\n        return;\n      }\n\n      // No need to calculate fitting chips if the group is expanded, but all of them have to be set to visible again.\n      if (expanded) {\n        setHiddenChips([]);\n        setVisibleChips(chipKeys);\n\n        if (\n          !containerRef.current?.firstChild // ChipGroup may be empty.\n        ) {\n          setAllChipsFit(true);\n          return;\n        }\n\n        // Check if the flex container is wrapping. If not, the container has grown\n        // enough so all chips fit again, and we can hide the control.\n        let wrap = false;\n        let child = containerRef.current.firstChild as HTMLElement;\n\n        // requestAnimationFrame ensures the DOM updates are completed before performing the check\n        // and prevent issues with displaying the \"show less\" button.\n        const rafId = requestAnimationFrame(() => {\n          // Check if any chip is wrapped to the next line.\n          do {\n            if (child.classList.contains('chip') && child.offsetTop > 0) {\n              wrap = true;\n            }\n            child = child.nextSibling as HTMLElement;\n          } while (!wrap && child);\n          setAllChipsFit(!wrap);\n\n          // Restore focus to the control button after expansion.\n          // There are one or more re-renders in between so need to\n          // use setTimeout (macrotask) to defer this until re-renders are finished.\n          setTimeout(() => {\n            const controlButton =\n              containerRef.current?.querySelector<HTMLButtonElement>(\n                `button[aria-controls=\"${uniqueId}\"]`,\n              );\n            if (controlButton) {\n              controlButton.focus();\n            }\n          }, 0);\n        });\n\n        return () => {\n          cancelAnimationFrame(rafId);\n        };\n      }\n\n      // Flex gap needs to be considered in the calculation.\n      // Either `Spacings.Size6` or `Spacings.Size8`\n      const spacing = size === 'condensed' ? 6 : 8;\n\n      /**\n       * Iterate over all chips and check, if the chips + flex gap still fit in one line.\n       */\n      let totalChipsWidth = 0;\n      let setHidden = true;\n      let _hiddenChipsIndex = chips.length;\n\n      for (const [index, [, value]] of Array.from(chips).entries()) {\n        totalChipsWidth += value.width || 0;\n\n        // Whether the chips have enough space in the container. The first chip is always visible.\n        const chipFits =\n          index === 0 ||\n          Math.floor(totalChipsWidth + index * spacing) <=\n            Math.round(containerWidth);\n\n        // Whether the chips + control have enough space in the container.\n        const chipAndControlFits =\n          index === 0 ||\n          totalChipsWidth +\n            (index + 1) * spacing +\n            (state.control?.width || 0) <=\n            containerWidth;\n\n        // Whether the chip should be visible.\n        // If we are at the last chip and the visibility of the control is determined automatically,\n        // we can safely show the chip. In this case, all of them fit in one line and the control will be hidden.\n        // If the control is always shown, we only show the chip if there's enough space left to also render the control.\n        const visible =\n          index === chips.length - 1 &&\n          (state.control?.show ?? 'auto') === 'auto'\n            ? chipFits\n            : chipAndControlFits;\n\n        // Set the index of the first hidden chip for the first chip that doesn't fit anymore.\n        if (!visible && setHidden) {\n          setHidden = false;\n\n          _hiddenChipsIndex = index;\n        }\n      }\n\n      // Apply maxVisibleChips limit if specified and valid (non-negative)\n      const effectiveHiddenChipsIndex =\n        maxVisibleChips !== 'auto' && maxVisibleChips >= 0\n          ? Math.min(_hiddenChipsIndex, maxVisibleChips)\n          : _hiddenChipsIndex;\n\n      const allFit = effectiveHiddenChipsIndex === chips.length;\n      setAllChipsFit(allFit);\n\n      setHiddenChips(chipKeys.slice(effectiveHiddenChipsIndex));\n      setVisibleChips(chipKeys.slice(0, effectiveHiddenChipsIndex));\n    }, [containerWidth, expanded, size, state, maxVisibleChips, uniqueId]);\n\n    return (\n      <ChipGroupContext.Provider\n        value={{\n          visibleKeys: visibleChips,\n          hiddenKeys: hiddenChips,\n        }}\n      >\n        <InternalChipGroupContext.Provider\n          value={{\n            chipGroupId: uniqueId,\n            disabled,\n            size,\n            expanded,\n            allChipsFit,\n            dispatch,\n            setExpanded,\n          }}\n        >\n          <Flex\n            ref={rootRef}\n            id={uniqueId}\n            className={clsx(\n              chipGroupCSS({ size, expanded }),\n              consumerClassName,\n            )}\n            style={consumerStyle}\n            data-testid={dataTestId}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            {...ariaLabelingProps}\n            {...behavioralTrackingProps}\n            {...forwardProps}\n            data-dt-component={COMPONENT_NAME}\n          >\n            {children}\n          </Flex>\n        </InternalChipGroupContext.Provider>\n      </ChipGroupContext.Provider>\n    );\n  },\n);\n\n(RootChipGroup as typeof RootChipGroup & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\n/**\n * Use the `ChipGroup` component to group multiple `Chip`s in an expandable container.\n * @public\n */\nexport const ChipGroup = Object.assign(RootChipGroup, {\n  Control,\n  HiddenCount,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/content/chip-group/ChipGroup.sty.js

@@ -1,6 +1,6 @@
 import "./ChipGroup.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var chipGroupCSS = _7a468({ defaultClassName: "_dwt8fp0-3-4-0", variantClassNames: { size: { condensed: "_dwt8fp1-3-4-0", "default": "_dwt8fp2-3-4-0" }, expanded: { true: "_dwt8fp3-3-4-0", false: "_dwt8fp4-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
+var chipGroupCSS = _7a468({ defaultClassName: "_dwt8fp0-3-5-0", variantClassNames: { size: { condensed: "_dwt8fp1-3-5-0", "default": "_dwt8fp2-3-5-0" }, expanded: { true: "_dwt8fp3-3-5-0", false: "_dwt8fp4-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   chipGroupCSS
 };

package/esm/content/chip-group/ChipGroup.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip-group/ChipGroup.css.ts"],
-  "sourcesContent": ["import './ChipGroup.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chipGroupCSS = _7a468({defaultClassName:'_dwt8fp0-3-4-0',variantClassNames:{size:{condensed:'_dwt8fp1-3-4-0','default':'_dwt8fp2-3-4-0'},expanded:{true:'_dwt8fp3-3-4-0',false:'_dwt8fp4-3-4-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './ChipGroup.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chipGroupCSS = _7a468({defaultClassName:'_dwt8fp0-3-5-0',variantClassNames:{size:{condensed:'_dwt8fp1-3-5-0','default':'_dwt8fp2-3-5-0'},expanded:{true:'_dwt8fp3-3-5-0',false:'_dwt8fp4-3-5-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,MAAK,EAAC,WAAU,kBAAiB,WAAU,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/content/chip-group/Control.css

@@ -1,4 +1,4 @@
-._uoyq2d0-3-4-0 {
+._uoyq2d0-3-5-0 {
   gap: var(--dt-spacings-size-4, 4px);
   display: inline-flex;
   padding: var(--dt-spacings-size-0, 0);
@@ -23,12 +23,12 @@
   cursor: pointer;
   transition: background-color var(--dt-animations-hover-duration-base, 150ms) var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._uoyq2d0-3-4-0:focus-visible {
-  text-decoration: none;
-}
-._uoyq2d0-3-4-0:hover {
+._uoyq2d0-3-5-0:hover {
   background: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._uoyq2d0-3-4-0:active {
+._uoyq2d0-3-5-0:active {
   background: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
+}
+._uoyq2d1-3-5-0 {
+  text-decoration: none;
 }

package/esm/content/chip-group/Control.js

@@ -6,11 +6,12 @@ import {
   useRef
 } from "react";
 import { useIntl } from "react-intl";
-import { expandButtonCSS } from "./Control.sty.js";
+import * as styles from "./Control.sty.js";
 import { useChipGroupContext } from "./hooks/useChipGroupContext.js";
 import { useInternalChipGroupContext } from "./hooks/useInternalChipGroupContext.js";
 import { ChipGroupActions } from "./state/chip-group-state-reducer.js";
 import { useContainerSize } from "../../core/hooks/useContainerSize.js";
+import { useFocusRing } from "../../core/styles/useFocusRing.js";
 import { ProgressCircle } from "../progress/ProgressCircle.js";
 const Control = (props) => {
   const {
@@ -24,6 +25,9 @@ const Control = (props) => {
     "data-testid": dataTestId
   } = props;
   const intl = useIntl();
+  const { focusProps, focusClassName, isFocusVisible } = useFocusRing({
+    color: "neutral"
+  });
   const { hiddenKeys, visibleKeys } = useChipGroupContext();
   const internalChipGroupContext = useInternalChipGroupContext();
   const { chipGroupId, expanded, allChipsFit, setExpanded, dispatch } = internalChipGroupContext || {};
@@ -67,7 +71,8 @@ const Control = (props) => {
       }
     });
   }, [dispatch, display, width]);
-  if (display === void 0 && (allChipsFit || visibleKeys.length === 0)) {
+  const shouldHide = display === void 0 && (allChipsFit || visibleKeys.length === 0) && !loading;
+  if (shouldHide) {
     return null;
   }
   return /* @__PURE__ */ jsxs(
@@ -81,8 +86,13 @@ const Control = (props) => {
       },
       "aria-controls": chipGroupId,
       "aria-expanded": expanded,
-      className: clsx(expandButtonCSS, consumerClassName),
+      className: clsx(
+        styles.expandButton({ isFocusVisible }),
+        focusClassName,
+        consumerClassName
+      ),
       style: consumerStyle,
+      ...focusProps,
       children: [
         loading && /* @__PURE__ */ jsx(
           ProgressCircle,

package/esm/content/chip-group/Control.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip-group/Control.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  useEffect,\n  useMemo,\n  useRef,\n  type MouseEventHandler as ReactMouseEventHandler,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\n\nimport { expandButtonCSS } from './Control.sty.js';\nimport { useChipGroupContext } from './hooks/useChipGroupContext.js';\nimport { useInternalChipGroupContext } from './hooks/useInternalChipGroupContext.js';\nimport { ChipGroupActions } from './state/chip-group-state-reducer.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { ProgressCircle } from '../progress/ProgressCircle.js';\n\n//#region Types\n\n/**\n * @public\n */\nexport interface ChipGroupControlProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId {\n  /**\n   * Whether to show more chips or collapse chips.\n   * If undefined, the action is inferred.\n   * If no more items are available and all items fit in one line,\n   * the control is automatically hidden unless display is set.\n   * @defaultValue inferred from the `expanded` / `defaultExpanded` prop of the `ChipGroup`\n   */\n  display?: 'more' | 'less';\n\n  /**\n   * Whether to render `Show more` or `Show x more` by default.\n   * If true, the count is calculated automatically. The count can be overridden\n   * by passing a number.\n   * @defaultValue undefined\n   */\n  count?: boolean | number;\n\n  /**\n   * Whether the control should show the loading indicator.\n   * @defaultValue false\n   */\n  loading?: boolean;\n\n  /** Callback triggered when the control is interacted with. */\n  onClick?: ReactMouseEventHandler<HTMLButtonElement>;\n}\n//#endregion\n\n/**\n * @public\n */\nexport const Control = (props: ChipGroupControlProps) => {\n  const {\n    display,\n    count,\n    loading = false,\n    onClick,\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  }: ChipGroupControlProps = props;\n  const intl = useIntl();\n\n  const { hiddenKeys, visibleKeys } = useChipGroupContext();\n  const internalChipGroupContext = useInternalChipGroupContext();\n  const { chipGroupId, expanded, allChipsFit, setExpanded, dispatch } =\n    internalChipGroupContext || {};\n\n  const controlRef = useRef<HTMLButtonElement | null>(null);\n  const { width: controlWidth } = useContainerSize(controlRef);\n  const width = Math.ceil(controlWidth);\n\n  const label = useMemo(() => {\n    const moreOrLess = expanded && display !== 'more' ? 'less' : 'more';\n    const hiddenChipsCount =\n      count === true && hiddenKeys.length > 0 ? hiddenKeys.length : count;\n    const showCount =\n      typeof hiddenChipsCount === 'number' && moreOrLess === 'more';\n\n    return intl.formatMessage(\n      {\n        defaultMessage: 'Show {count} {moreOrLess}',\n        id: 'ARdI7d8cJxHnUayP',\n        description: 'Label for the expand / collapse button.',\n      },\n      {\n        moreOrLess: expanded && display !== 'more' ? 'less' : 'more',\n        count: showCount ? hiddenChipsCount : undefined,\n      },\n    );\n  }, [count, display, expanded, hiddenKeys, intl]);\n\n  useEffect(() => {\n    dispatch?.({\n      type: ChipGroupActions.ADDCONTROL,\n      payload: { width },\n    });\n\n    return () => {\n      dispatch?.({\n        type: ChipGroupActions.REMOVECONTROL,\n        payload: {},\n      });\n    };\n    // only for mount and unmount\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    dispatch?.({\n      type: ChipGroupActions.UPDATECONTROL,\n      payload: {\n        width: width === 0 ? undefined : width,\n        show: display !== undefined ? 'always' : 'auto',\n      },\n    });\n  }, [dispatch, display, width]);\n\n  if (display === undefined && (allChipsFit || visibleKeys.length === 0)) {\n    return null;\n  }\n\n  return (\n    <button\n      data-testid={dataTestId}\n      ref={controlRef}\n      onClick={(event: ReactMouseEvent<HTMLButtonElement>) => {\n        onClick?.(event);\n        setExpanded?.((prev) => (display === 'more' ? true : !prev));\n      }}\n      aria-controls={chipGroupId}\n      aria-expanded={expanded}\n      className={clsx(expandButtonCSS, consumerClassName)}\n      style={consumerStyle}\n    >\n      {loading && (\n        <ProgressCircle\n          size=\"small\"\n          aria-label={intl.formatMessage({\n            defaultMessage: 'Loading',\n            id: 'cycz+bYG+VH7Of4e',\n            description: 'Label for the loading state.',\n          })}\n        />\n      )}\n      {children ?? label}\n    </button>\n  );\n};\n"],
-  "mappings": "AAsII,SAaI,KAbJ;AAtIJ,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,eAAe;AAGxB,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAIjC,SAAS,sBAAsB;AA0CxB,MAAM,UAAU,CAAC,UAAiC;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,EACjB,IAA2B;AAC3B,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,YAAY,YAAY,IAAI,oBAAoB;AACxD,QAAM,2BAA2B,4BAA4B;AAC7D,QAAM,EAAE,aAAa,UAAU,aAAa,aAAa,SAAS,IAChE,4BAA4B,CAAC;AAE/B,QAAM,aAAa,OAAiC,IAAI;AACxD,QAAM,EAAE,OAAO,aAAa,IAAI,iBAAiB,UAAU;AAC3D,QAAM,QAAQ,KAAK,KAAK,YAAY;AAEpC,QAAM,QAAQ,QAAQ,MAAM;AAC1B,UAAM,aAAa,YAAY,YAAY,SAAS,SAAS;AAC7D,UAAM,mBACJ,UAAU,QAAQ,WAAW,SAAS,IAAI,WAAW,SAAS;AAChE,UAAM,YACJ,OAAO,qBAAqB,YAAY,eAAe;AAEzD,WAAO,KAAK;AAAA,MACV;AAAA,QACE,gBAAgB;AAAA,QAChB,IAAI;AAAA,QACJ,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,YAAY,YAAY,YAAY,SAAS,SAAS;AAAA,QACtD,OAAO,YAAY,mBAAmB;AAAA,MACxC;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,SAAS,UAAU,YAAY,IAAI,CAAC;AAE/C,YAAU,MAAM;AACd,eAAW;AAAA,MACT,MAAM,iBAAiB;AAAA,MACvB,SAAS,EAAE,MAAM;AAAA,IACnB,CAAC;AAED,WAAO,MAAM;AACX,iBAAW;AAAA,QACT,MAAM,iBAAiB;AAAA,QACvB,SAAS,CAAC;AAAA,MACZ,CAAC;AAAA,IACH;AAAA,EAGF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,eAAW;AAAA,MACT,MAAM,iBAAiB;AAAA,MACvB,SAAS;AAAA,QACP,OAAO,UAAU,IAAI,SAAY;AAAA,QACjC,MAAM,YAAY,SAAY,WAAW;AAAA,MAC3C;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,SAAS,KAAK,CAAC;AAE7B,MAAI,YAAY,WAAc,eAAe,YAAY,WAAW,IAAI;AACtE,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK;AAAA,MACL,SAAS,CAAC,UAA8C;AACtD,kBAAU,KAAK;AACf,sBAAc,CAAC,SAAU,YAAY,SAAS,OAAO,CAAC,IAAK;AAAA,MAC7D;AAAA,MACA,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,WAAW,KAAK,iBAAiB,iBAAiB;AAAA,MAClD,OAAO;AAAA,MAEN;AAAA,mBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAY,KAAK,cAAc;AAAA,cAC7B,gBAAgB;AAAA,cAChB,IAAI;AAAA,cACJ,aAAa;AAAA,YACf,CAAC;AAAA;AAAA,QACH;AAAA,QAED,YAAY;AAAA;AAAA;AAAA,EACf;AAEJ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  useEffect,\n  useMemo,\n  useRef,\n  type MouseEventHandler as ReactMouseEventHandler,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './Control.sty.js';\nimport { useChipGroupContext } from './hooks/useChipGroupContext.js';\nimport { useInternalChipGroupContext } from './hooks/useInternalChipGroupContext.js';\nimport { ChipGroupActions } from './state/chip-group-state-reducer.js';\nimport { useContainerSize } from '../../core/hooks/useContainerSize.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { ProgressCircle } from '../progress/ProgressCircle.js';\n\n//#region Types\n\n/**\n * @public\n */\nexport interface ChipGroupControlProps\n  extends WithChildren,\n    StylingProps,\n    DataTestId {\n  /**\n   * Whether to show more chips or collapse chips.\n   * If undefined, the action is inferred.\n   * If no more items are available and all items fit in one line,\n   * the control is automatically hidden unless display is set.\n   * @defaultValue inferred from the `expanded` / `defaultExpanded` prop of the `ChipGroup`\n   */\n  display?: 'more' | 'less';\n\n  /**\n   * Whether to render `Show more` or `Show x more` by default.\n   * If true, the count is calculated automatically. The count can be overridden\n   * by passing a number.\n   * @defaultValue undefined\n   */\n  count?: boolean | number;\n\n  /**\n   * Whether the control should show the loading indicator.\n   * @defaultValue false\n   */\n  loading?: boolean;\n\n  /** Callback triggered when the control is interacted with. */\n  onClick?: ReactMouseEventHandler<HTMLButtonElement>;\n}\n//#endregion\n\n/**\n * @public\n */\nexport const Control = (props: ChipGroupControlProps) => {\n  const {\n    display,\n    count,\n    loading = false,\n    onClick,\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n  }: ChipGroupControlProps = props;\n  const intl = useIntl();\n\n  const { focusProps, focusClassName, isFocusVisible } = useFocusRing({\n    color: 'neutral',\n  });\n\n  const { hiddenKeys, visibleKeys } = useChipGroupContext();\n  const internalChipGroupContext = useInternalChipGroupContext();\n  const { chipGroupId, expanded, allChipsFit, setExpanded, dispatch } =\n    internalChipGroupContext || {};\n\n  const controlRef = useRef<HTMLButtonElement | null>(null);\n  const { width: controlWidth } = useContainerSize(controlRef);\n  const width = Math.ceil(controlWidth);\n\n  const label = useMemo(() => {\n    const moreOrLess = expanded && display !== 'more' ? 'less' : 'more';\n    const hiddenChipsCount =\n      count === true && hiddenKeys.length > 0 ? hiddenKeys.length : count;\n    const showCount =\n      typeof hiddenChipsCount === 'number' && moreOrLess === 'more';\n\n    return intl.formatMessage(\n      {\n        defaultMessage: 'Show {count} {moreOrLess}',\n        id: 'ARdI7d8cJxHnUayP',\n        description: 'Label for the expand / collapse button.',\n      },\n      {\n        moreOrLess: expanded && display !== 'more' ? 'less' : 'more',\n        count: showCount ? hiddenChipsCount : undefined,\n      },\n    );\n  }, [count, display, expanded, hiddenKeys, intl]);\n\n  useEffect(() => {\n    dispatch?.({\n      type: ChipGroupActions.ADDCONTROL,\n      payload: { width },\n    });\n\n    return () => {\n      dispatch?.({\n        type: ChipGroupActions.REMOVECONTROL,\n        payload: {},\n      });\n    };\n    // only for mount and unmount\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    dispatch?.({\n      type: ChipGroupActions.UPDATECONTROL,\n      payload: {\n        width: width === 0 ? undefined : width,\n        show: display !== undefined ? 'always' : 'auto',\n      },\n    });\n  }, [dispatch, display, width]);\n\n  const shouldHide =\n    display === undefined &&\n    (allChipsFit || visibleKeys.length === 0) &&\n    !loading;\n\n  if (shouldHide) {\n    return null;\n  }\n\n  return (\n    <button\n      data-testid={dataTestId}\n      ref={controlRef}\n      onClick={(event: ReactMouseEvent<HTMLButtonElement>) => {\n        onClick?.(event);\n        setExpanded?.((prev) => (display === 'more' ? true : !prev));\n      }}\n      aria-controls={chipGroupId}\n      aria-expanded={expanded}\n      className={clsx(\n        styles.expandButton({ isFocusVisible }),\n        focusClassName,\n        consumerClassName,\n      )}\n      style={consumerStyle}\n      {...focusProps}\n    >\n      {loading && (\n        <ProgressCircle\n          size=\"small\"\n          aria-label={intl.formatMessage({\n            defaultMessage: 'Loading',\n            id: 'cycz+bYG+VH7Of4e',\n            description: 'Label for the loading state.',\n          })}\n        />\n      )}\n      {children ?? label}\n    </button>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/content/chip-group/Control.sty.js

@@ -1,7 +1,7 @@
-import "../../core/styles/focusRingStatic.css";
 import "./Control.css";
-var expandButtonCSS = "_uoyq2d0-3-4-0 _z0fq9b4-3-4-0 _z0fq9bc-3-4-0 _z0fq9b6-3-4-0 _z0fq9ba-3-4-0";
+import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
+var expandButton = _7a468({ defaultClassName: "_uoyq2d0-3-5-0", variantClassNames: { isFocusVisible: { true: "_uoyq2d1-3-5-0", false: "_uoyq2d2-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
-  expandButtonCSS
+  expandButton
 };
 //# sourceMappingURL=Control.sty.js.map

package/esm/content/chip-group/Control.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/chip-group/Control.css.ts"],
-  "sourcesContent": ["import '../../core/styles/focusRingStatic.css';\nimport './Control.css';\nexport var expandButtonCSS = '_uoyq2d0-3-4-0 _z0fq9b4-3-4-0 _z0fq9bc-3-4-0 _z0fq9b6-3-4-0 _z0fq9ba-3-4-0';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;",
+  "sourcesContent": ["import './Control.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var expandButton = _7a468({defaultClassName:'_uoyq2d0-3-5-0',variantClassNames:{isFocusVisible:{true:'_uoyq2d1-3-5-0',false:'_uoyq2d2-3-5-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,gBAAe,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/content/code-snippet/CodeHighlight.css

@@ -1,4 +1,4 @@
-._1jmxup80-3-4-0 {
+._1jmxup80-3-5-0 {
   margin: 0;
   padding: 0;
   overflow: visible;
@@ -9,19 +9,19 @@
   font-weight: var(--dt-typography-code-base-default-weight, 400);
   word-break: break-word;
 }
-._1jmxup81-3-4-0 {
+._1jmxup81-3-5-0 {
   font-family: var(--dt-typography-code-base-default-family, Roboto Mono,monospace);
   font-size: var(--dt-typography-code-base-default-size, 14px);
   line-height: var(--dt-typography-code-base-default-line-height, 1.4285714286);
   min-height: calc(2 * var(--dt-spacings-size-12, 12px) + var(--dt-spacings-size-20, 20px));
 }
-._1jmxup82-3-4-0 {
+._1jmxup82-3-5-0 {
   font-family: var(--dt-typography-code-small-default-family, Roboto Mono,monospace);
   font-size: var(--dt-typography-code-small-default-size, 12px);
   line-height: var(--dt-typography-code-small-default-line-height, 1.333333333);
   min-height: calc(2 * var(--dt-spacings-size-6, 6px) + var(--dt-spacings-size-16, 16px));
 }
-._1jmxup83-3-4-0 {
+._1jmxup83-3-5-0 {
   display: table-cell;
   position: sticky;
   left: 0;
@@ -33,72 +33,75 @@
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   user-select: none;
 }
-._1jmxup84-3-4-0 {
+._1jgl8s50-3-5-0 ._1jmxup83-3-5-0 {
+  border-right-width: var(--dt-borders-width-default, 1px);
+}
+._1jmxup84-3-5-0 {
   white-space: nowrap;
 }
-._1jmxup85-3-4-0 {
+._1jmxup85-3-5-0 {
   white-space: pre;
 }
-._1jmxup86-3-4-0 {
+._1jmxup86-3-5-0 {
   display: table-row;
 }
-._1jmxup87-3-4-0 {
+._1jmxup87-3-5-0 {
   display: block;
   box-sizing: border-box;
   pointer-events: none;
   user-select: none;
   -webkit-user-select: none;
 }
-._1jmxup87-3-4-0::before {
+._1jmxup87-3-5-0::before {
   content: attr(data-linenumber);
 }
-._1jmxup81-3-4-0 ._1jmxup86-3-4-0:first-child ._1jmxup87-3-4-0 {
+._1jmxup81-3-5-0 ._1jmxup86-3-5-0:first-child ._1jmxup87-3-5-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-4-0 ._1jmxup86-3-4-0:first-child ._1jmxup87-3-4-0 {
+._1jmxup82-3-5-0 ._1jmxup86-3-5-0:first-child ._1jmxup87-3-5-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup81-3-4-0 ._1jmxup86-3-4-0:last-child ._1jmxup87-3-4-0 {
+._1jmxup81-3-5-0 ._1jmxup86-3-5-0:last-child ._1jmxup87-3-5-0 {
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-4-0 ._1jmxup86-3-4-0:last-child ._1jmxup87-3-4-0 {
+._1jmxup82-3-5-0 ._1jmxup86-3-5-0:last-child ._1jmxup87-3-5-0 {
   padding-bottom: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup88-3-4-0 {
+._1jmxup88-3-5-0 {
   padding-left: var(--dt-spacings-size-16, 16px);
   min-width: 33px;
 }
-._1jmxup89-3-4-0 {
+._1jmxup89-3-5-0 {
   padding-left: var(--dt-spacings-size-12, 12px);
   min-width: 27px;
 }
-._1jmxup8b-3-4-0 {
+._1jmxup8b-3-5-0 {
   white-space: pre;
 }
-._1jmxup8c-3-4-0 {
+._1jmxup8c-3-5-0 {
   display: table-cell;
   width: 100%;
 }
-._1jmxup81-3-4-0 ._1jmxup86-3-4-0:first-child ._1jmxup8c-3-4-0 {
+._1jmxup81-3-5-0 ._1jmxup86-3-5-0:first-child ._1jmxup8c-3-5-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-4-0 ._1jmxup86-3-4-0:first-child ._1jmxup8c-3-4-0 {
+._1jmxup82-3-5-0 ._1jmxup86-3-5-0:first-child ._1jmxup8c-3-5-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup81-3-4-0 ._1jmxup86-3-4-0:last-child ._1jmxup8c-3-4-0 {
+._1jmxup81-3-5-0 ._1jmxup86-3-5-0:last-child ._1jmxup8c-3-5-0 {
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup82-3-4-0 ._1jmxup86-3-4-0:last-child ._1jmxup8c-3-4-0 {
+._1jmxup82-3-5-0 ._1jmxup86-3-5-0:last-child ._1jmxup8c-3-5-0 {
   padding-bottom: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup8d-3-4-0 {
+._1jmxup8d-3-5-0 {
   padding-left: var(--dt-spacings-size-16, 16px);
   padding-right: var(--dt-spacings-size-8, 8px);
 }
-._1jmxup8e-3-4-0 {
+._1jmxup8e-3-5-0 {
   padding-left: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup8g-3-4-0 {
+._1jmxup8g-3-5-0 {
   white-space: pre;
 }

package/esm/content/code-snippet/CodeHighlight.sty.js

@@ -1,10 +1,11 @@
+import "../../core/components/app-root/AppRoot.css";
 import "./CodeHighlight.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var highlightWrapper = _7a468({ defaultClassName: "_1jmxup80-3-4-0", variantClassNames: { size: { "default": "_1jmxup81-3-4-0", condensed: "_1jmxup82-3-4-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var line = "_1jmxup86-3-4-0";
-var lineContent = _7a468({ defaultClassName: "_1jmxup8c-3-4-0", variantClassNames: { size: { "default": "_1jmxup8d-3-4-0", condensed: "_1jmxup8e-3-4-0" }, multiLine: { false: "_1jmxup8f-3-4-0", true: "_1jmxup8g-3-4-0" } }, defaultVariants: { size: "default", multiLine: false }, compoundVariants: [] });
-var lineNumber = _7a468({ defaultClassName: "_1jmxup87-3-4-0", variantClassNames: { size: { "default": "_1jmxup88-3-4-0", condensed: "_1jmxup89-3-4-0" }, multiLine: { false: "_1jmxup8a-3-4-0", true: "_1jmxup8b-3-4-0" } }, defaultVariants: { size: "default", multiLine: false }, compoundVariants: [] });
-var lineNumberContainer = _7a468({ defaultClassName: "_1jmxup83-3-4-0", variantClassNames: { multiLine: { false: "_1jmxup84-3-4-0", true: "_1jmxup85-3-4-0" } }, defaultVariants: { multiLine: false }, compoundVariants: [] });
+var highlightWrapper = _7a468({ defaultClassName: "_1jmxup80-3-5-0", variantClassNames: { size: { "default": "_1jmxup81-3-5-0", condensed: "_1jmxup82-3-5-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var line = "_1jmxup86-3-5-0";
+var lineContent = _7a468({ defaultClassName: "_1jmxup8c-3-5-0", variantClassNames: { size: { "default": "_1jmxup8d-3-5-0", condensed: "_1jmxup8e-3-5-0" }, multiLine: { false: "_1jmxup8f-3-5-0", true: "_1jmxup8g-3-5-0" } }, defaultVariants: { size: "default", multiLine: false }, compoundVariants: [] });
+var lineNumber = _7a468({ defaultClassName: "_1jmxup87-3-5-0", variantClassNames: { size: { "default": "_1jmxup88-3-5-0", condensed: "_1jmxup89-3-5-0" }, multiLine: { false: "_1jmxup8a-3-5-0", true: "_1jmxup8b-3-5-0" } }, defaultVariants: { size: "default", multiLine: false }, compoundVariants: [] });
+var lineNumberContainer = _7a468({ defaultClassName: "_1jmxup83-3-5-0", variantClassNames: { multiLine: { false: "_1jmxup84-3-5-0", true: "_1jmxup85-3-5-0" } }, defaultVariants: { multiLine: false }, compoundVariants: [] });
 export {
   highlightWrapper,
   line,

package/esm/content/code-snippet/CodeHighlight.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/code-snippet/CodeHighlight.css.ts"],
-  "sourcesContent": ["import './CodeHighlight.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var highlightWrapper = _7a468({defaultClassName:'_1jmxup80-3-4-0',variantClassNames:{size:{'default':'_1jmxup81-3-4-0',condensed:'_1jmxup82-3-4-0'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var line = '_1jmxup86-3-4-0';\nexport var lineContent = _7a468({defaultClassName:'_1jmxup8c-3-4-0',variantClassNames:{size:{'default':'_1jmxup8d-3-4-0',condensed:'_1jmxup8e-3-4-0'},multiLine:{false:'_1jmxup8f-3-4-0',true:'_1jmxup8g-3-4-0'}},defaultVariants:{size:'default',multiLine:false},compoundVariants:[]});\nexport var lineNumber = _7a468({defaultClassName:'_1jmxup87-3-4-0',variantClassNames:{size:{'default':'_1jmxup88-3-4-0',condensed:'_1jmxup89-3-4-0'},multiLine:{false:'_1jmxup8a-3-4-0',true:'_1jmxup8b-3-4-0'}},defaultVariants:{size:'default',multiLine:false},compoundVariants:[]});\nexport var lineNumberContainer = _7a468({defaultClassName:'_1jmxup83-3-4-0',variantClassNames:{multiLine:{false:'_1jmxup84-3-4-0',true:'_1jmxup85-3-4-0'}},defaultVariants:{multiLine:false},compoundVariants:[]});"],
-  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1M,IAAI,OAAO;AACX,IAAI,cAAc,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,GAAE,WAAU,EAAC,OAAM,mBAAkB,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,WAAU,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAChR,IAAI,aAAa,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,GAAE,WAAU,EAAC,OAAM,mBAAkB,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,WAAU,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/Q,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,OAAM,mBAAkB,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './CodeHighlight.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var highlightWrapper = _7a468({defaultClassName:'_1jmxup80-3-5-0',variantClassNames:{size:{'default':'_1jmxup81-3-5-0',condensed:'_1jmxup82-3-5-0'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var line = '_1jmxup86-3-5-0';\nexport var lineContent = _7a468({defaultClassName:'_1jmxup8c-3-5-0',variantClassNames:{size:{'default':'_1jmxup8d-3-5-0',condensed:'_1jmxup8e-3-5-0'},multiLine:{false:'_1jmxup8f-3-5-0',true:'_1jmxup8g-3-5-0'}},defaultVariants:{size:'default',multiLine:false},compoundVariants:[]});\nexport var lineNumber = _7a468({defaultClassName:'_1jmxup87-3-5-0',variantClassNames:{size:{'default':'_1jmxup88-3-5-0',condensed:'_1jmxup89-3-5-0'},multiLine:{false:'_1jmxup8a-3-5-0',true:'_1jmxup8b-3-5-0'}},defaultVariants:{size:'default',multiLine:false},compoundVariants:[]});\nexport var lineNumberContainer = _7a468({defaultClassName:'_1jmxup83-3-5-0',variantClassNames:{multiLine:{false:'_1jmxup84-3-5-0',true:'_1jmxup85-3-5-0'}},defaultVariants:{multiLine:false},compoundVariants:[]});"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1M,IAAI,OAAO;AACX,IAAI,cAAc,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,GAAE,WAAU,EAAC,OAAM,mBAAkB,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,WAAU,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAChR,IAAI,aAAa,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,GAAE,WAAU,EAAC,OAAM,mBAAkB,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,WAAU,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/Q,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,OAAM,mBAAkB,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,WAAU,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/content/code-snippet/CodeSnippet.css

@@ -1,4 +1,4 @@
-._17pa72a0-3-4-0 {
+._17pa72a0-3-5-0 {
   position: relative;
   display: flex;
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
@@ -9,7 +9,10 @@
   overflow: auto;
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._17pa72a1-3-4-0 {
+._1jgl8s50-3-5-0 ._17pa72a0-3-5-0 {
+  border-width: var(--dt-borders-width-default, 1px);
+}
+._17pa72a1-3-5-0 {
   position: sticky;
   display: flex;
   align-self: stretch;
@@ -18,9 +21,9 @@
   inset-block: 0;
   right: 0;
 }
-._17pa72a2-3-4-0 {
+._17pa72a2-3-5-0 {
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-6, 6px) 0;
 }
-._17pa72a3-3-4-0 {
+._17pa72a3-3-5-0 {
   padding: var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-2, 2px) 0;
 }

package/esm/content/code-snippet/CodeSnippet.sty.js

@@ -1,7 +1,8 @@
+import "../../core/components/app-root/AppRoot.css";
 import "./CodeSnippet.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var copyButtonContainer = _7a468({ defaultClassName: "_17pa72a1-3-4-0", variantClassNames: { size: { "default": "_17pa72a2-3-4-0", condensed: "_17pa72a3-3-4-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var wrapper = "_17pa72a0-3-4-0";
+var copyButtonContainer = _7a468({ defaultClassName: "_17pa72a1-3-5-0", variantClassNames: { size: { "default": "_17pa72a2-3-5-0", condensed: "_17pa72a3-3-5-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var wrapper = "_17pa72a0-3-5-0";
 export {
   copyButtonContainer,
   wrapper

package/esm/content/code-snippet/CodeSnippet.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/code-snippet/CodeSnippet.css.ts"],
-  "sourcesContent": ["import './CodeSnippet.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var copyButtonContainer = _7a468({defaultClassName:'_17pa72a1-3-4-0',variantClassNames:{size:{'default':'_17pa72a2-3-4-0',condensed:'_17pa72a3-3-4-0'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var wrapper = '_17pa72a0-3-4-0';"],
-  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7M,IAAI,UAAU;",
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './CodeSnippet.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var copyButtonContainer = _7a468({defaultClassName:'_17pa72a1-3-5-0',variantClassNames:{size:{'default':'_17pa72a2-3-5-0',condensed:'_17pa72a3-3-5-0'}},defaultVariants:{size:'default'},compoundVariants:[]});\nexport var wrapper = '_17pa72a0-3-5-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7M,IAAI,UAAU;",
   "names": []
 }

package/esm/content/code-snippet/HighlightExtended.js

@@ -6,6 +6,20 @@ import { devLog } from "../../core/utils/logging.js";
 import { DTPrismTheme } from "../../core/utils/prism-theme.js";
 (typeof global !== "undefined" ? global : window).Prism = Prism;
 Prism.languages.dql = prismDqlLanguage;
+const SHORT_HEX_ID_TOKEN_NAME = "strato-short-hash";
+const SHORT_HEX_ID_PATTERN = /\b[a-f0-9]{16}\b/i;
+function enhancePrismLogLanguage() {
+  const logLanguage = Prism.languages.log;
+  if (!logLanguage || SHORT_HEX_ID_TOKEN_NAME in logLanguage) {
+    return;
+  }
+  Prism.languages.insertBefore("log", "property", {
+    [SHORT_HEX_ID_TOKEN_NAME]: {
+      pattern: SHORT_HEX_ID_PATTERN,
+      alias: "constant"
+    }
+  });
+}
 const additionalLanguageImports = {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
@@ -30,12 +44,20 @@ const HighlightExtended = (props) => {
   useEffect(() => {
     if (language && additionalLanguageImports[language] && !loadedLanguages[language]) {
       additionalLanguageImports[language]().then(() => {
+        if (language === "log") {
+          enhancePrismLogLanguage();
+        }
         setLoadedLanguages((prev) => ({ ...prev, [language]: true }));
       }).catch((error) => {
         devLog(`Failed to load language '${language}':`, error);
       });
     }
   }, [language, loadedLanguages]);
+  useEffect(() => {
+    if (language === "log" && loadedLanguages.log) {
+      enhancePrismLogLanguage();
+    }
+  }, [language, loadedLanguages.log]);
   return /* @__PURE__ */ jsx(
     Highlight,
     {

package/esm/content/code-snippet/HighlightExtended.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/content/code-snippet/HighlightExtended.tsx"],
-  "sourcesContent": ["import { Prism, Highlight, type RenderProps } from 'prism-react-renderer';\nimport { useEffect, useState, type JSX } from 'react';\n\nimport { prismDqlLanguage } from './prism-dql-language.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport { DTPrismTheme } from '../../core/utils/prism-theme.js';\n\n// Ensure Prism is globally available\n(typeof global !== 'undefined' ? global : window).Prism = Prism;\n\nPrism.languages.dql = prismDqlLanguage;\n\n/**\n * Supported languages for syntax highlighting.\n * @public\n */\nexport type HighlightLanguage =\n  | 'markup'\n  | 'bash'\n  | 'clike'\n  | 'c'\n  | 'cpp'\n  | 'css'\n  | 'javascript'\n  | 'jsx'\n  | 'coffeescript'\n  | 'actionscript'\n  | 'go'\n  | 'graphql'\n  | 'json'\n  | 'markdown'\n  | 'objectivec'\n  | 'python'\n  | 'reason'\n  | 'sql'\n  | 'tsx'\n  | 'typescript'\n  | 'yaml'\n  | 'dql'\n  | 'log'\n  | 'kotlin'\n  | 'swift'\n  | 'groovy';\n\ninterface HighlightExtendedProps {\n  language?: HighlightLanguage;\n  code: string;\n  children: (props: RenderProps) => JSX.Element;\n}\n\n// Map of additional languages that need to be dynamically imported from PrismJS.\n// These are not included in the 'prism-react-renderer' basic set of languages.\n// With that, it ensures that the necessary syntax highlighting for additional languages\n// is implemented when the Prism instance is available.\nconst additionalLanguageImports: Partial<\n  Record<HighlightLanguage, () => Promise<void>>\n> = {\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  bash: () => import('prismjs/components/prism-bash.js'),\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  log: () => import('prismjs/components/prism-log.js'),\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  groovy: () => import('prismjs/components/prism-groovy.js'),\n};\n\n/**\n * Extends the `Highlight` component from the Prism library.\n * This component can be used across Strato components to handle loading additional and custom languages.\n * @internal\n */\nexport const HighlightExtended = (props: HighlightExtendedProps) => {\n  const { language, code, children } = props;\n  const [loadedLanguages, setLoadedLanguages] = useState<\n    Record<string, boolean>\n  >(() =>\n    Object.fromEntries(\n      Object.keys(additionalLanguageImports).map((lang) => [\n        lang,\n        Prism.languages[lang] !== undefined,\n      ]),\n    ),\n  );\n\n  // Dynamically loads additional Prism languages when needed.\n  useEffect(() => {\n    if (\n      language &&\n      additionalLanguageImports[language] &&\n      !loadedLanguages[language]\n    ) {\n      additionalLanguageImports[language]()\n        .then(() => {\n          setLoadedLanguages((prev) => ({ ...prev, [language]: true }));\n        })\n        .catch((error) => {\n          devLog(`Failed to load language '${language}':`, error);\n        });\n    }\n  }, [language, loadedLanguages]);\n\n  return (\n    <Highlight\n      language={language ?? 'plain'}\n      code={code}\n      theme={language === 'log' ? DTPrismTheme.Log : DTPrismTheme.Default}\n      // @ts-expect-error language prop accepts limited set of languages that don't include `log`\n      Prism={Prism}\n    >\n      {({ tokens, getLineProps, getTokenProps, className, style }) => (\n        <>\n          {children({\n            tokens,\n            getLineProps,\n            getTokenProps,\n            className,\n            style,\n          })}\n        </>\n      )}\n    </Highlight>\n  );\n};\n"],
-  "mappings": "AAgHQ;AAhHR,SAAS,OAAO,iBAAmC;AACnD,SAAS,WAAW,gBAA0B;AAE9C,SAAS,wBAAwB;AACjC,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAAA,CAG5B,OAAO,WAAW,cAAc,SAAS,QAAQ,QAAQ;AAE1D,MAAM,UAAU,MAAM;AA4CtB,MAAM,4BAEF;AAAA;AAAA;AAAA,EAGF,MAAM,MAAM,OAAO,kCAAkC;AAAA;AAAA;AAAA,EAGrD,KAAK,MAAM,OAAO,iCAAiC;AAAA;AAAA;AAAA,EAGnD,QAAQ,MAAM,OAAO,oCAAoC;AAC3D;AAOO,MAAM,oBAAoB,CAAC,UAAkC;AAClE,QAAM,EAAE,UAAU,MAAM,SAAS,IAAI;AACrC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAE5C,MACA,OAAO;AAAA,MACL,OAAO,KAAK,yBAAyB,EAAE,IAAI,CAAC,SAAS;AAAA,QACnD;AAAA,QACA,MAAM,UAAU,IAAI,MAAM;AAAA,MAC5B,CAAC;AAAA,IACH;AAAA,EACF;AAGA,YAAU,MAAM;AACd,QACE,YACA,0BAA0B,QAAQ,KAClC,CAAC,gBAAgB,QAAQ,GACzB;AACA,gCAA0B,QAAQ,EAAE,EACjC,KAAK,MAAM;AACV,2BAAmB,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,QAAQ,GAAG,KAAK,EAAE;AAAA,MAC9D,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,eAAO,4BAA4B,QAAQ,MAAM,KAAK;AAAA,MACxD,CAAC;AAAA,IACL;AAAA,EACF,GAAG,CAAC,UAAU,eAAe,CAAC;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,YAAY;AAAA,MACtB;AAAA,MACA,OAAO,aAAa,QAAQ,aAAa,MAAM,aAAa;AAAA,MAE5D;AAAA,MAEC,WAAC,EAAE,QAAQ,cAAc,eAAe,WAAW,MAAM,MACxD,gCACG,mBAAS;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC,GACH;AAAA;AAAA,EAEJ;AAEJ;",
+  "sourcesContent": ["import { Prism, Highlight, type RenderProps } from 'prism-react-renderer';\nimport { useEffect, useState, type JSX } from 'react';\n\nimport { prismDqlLanguage } from './prism-dql-language.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport { DTPrismTheme } from '../../core/utils/prism-theme.js';\n\n// Ensure Prism is globally available\n(typeof global !== 'undefined' ? global : window).Prism = Prism;\n\nPrism.languages.dql = prismDqlLanguage;\n\n// Prism's built-in 'hash' token only matches 32/64-char hex strings, and the 'number'\n// token only matches hex strings that start with a digit \u2014 leaving letter-leading 16-char\n// hex IDs (e.g. trace/span IDs) unhighlighted. This fills that gap generically.\nconst SHORT_HEX_ID_TOKEN_NAME = 'strato-short-hash';\nconst SHORT_HEX_ID_PATTERN = /\\b[a-f0-9]{16}\\b/i;\n\n/**\n *  Enhances the Prism 'log' language definition to include a token for short hex IDs.\n *  This is necessary because the default 'hash' and 'number' tokens do not cover letter-leading 16-char hex strings,\n *  which are common in log files (e.g. trace/span IDs). By adding a 'strato-short-hash' token, we ensure that these IDs are properly highlighted as constants.\n */\nfunction enhancePrismLogLanguage(): void {\n  const logLanguage = Prism.languages.log;\n\n  if (!logLanguage || SHORT_HEX_ID_TOKEN_NAME in logLanguage) {\n    return;\n  }\n\n  // Insert before 'property' because Prism's property pattern may consume\n  // sequences like `span_id: <hex> trace_id:` as one token.\n  Prism.languages.insertBefore('log', 'property', {\n    [SHORT_HEX_ID_TOKEN_NAME]: {\n      pattern: SHORT_HEX_ID_PATTERN,\n      alias: 'constant',\n    },\n  });\n}\n\n/**\n * Supported languages for syntax highlighting.\n * @public\n */\nexport type HighlightLanguage =\n  | 'markup'\n  | 'bash'\n  | 'clike'\n  | 'c'\n  | 'cpp'\n  | 'css'\n  | 'javascript'\n  | 'jsx'\n  | 'coffeescript'\n  | 'actionscript'\n  | 'go'\n  | 'graphql'\n  | 'json'\n  | 'markdown'\n  | 'objectivec'\n  | 'python'\n  | 'reason'\n  | 'sql'\n  | 'tsx'\n  | 'typescript'\n  | 'yaml'\n  | 'dql'\n  | 'log'\n  | 'kotlin'\n  | 'swift'\n  | 'groovy';\n\ninterface HighlightExtendedProps {\n  language?: HighlightLanguage;\n  code: string;\n  children: (props: RenderProps) => JSX.Element;\n}\n\n// Map of additional languages that need to be dynamically imported from PrismJS.\n// These are not included in the 'prism-react-renderer' basic set of languages.\n// With that, it ensures that the necessary syntax highlighting for additional languages\n// is implemented when the Prism instance is available.\nconst additionalLanguageImports: Partial<\n  Record<HighlightLanguage, () => Promise<void>>\n> = {\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  bash: () => import('prismjs/components/prism-bash.js'),\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  log: () => import('prismjs/components/prism-log.js'),\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  groovy: () => import('prismjs/components/prism-groovy.js'),\n};\n\n/**\n * Extends the `Highlight` component from the Prism library.\n * This component can be used across Strato components to handle loading additional and custom languages.\n * @internal\n */\nexport const HighlightExtended = (props: HighlightExtendedProps) => {\n  const { language, code, children } = props;\n  const [loadedLanguages, setLoadedLanguages] = useState<\n    Record<string, boolean>\n  >(() =>\n    Object.fromEntries(\n      Object.keys(additionalLanguageImports).map((lang) => [\n        lang,\n        Prism.languages[lang] !== undefined,\n      ]),\n    ),\n  );\n\n  // Dynamically loads additional Prism languages when needed.\n  useEffect(() => {\n    if (\n      language &&\n      additionalLanguageImports[language] &&\n      !loadedLanguages[language]\n    ) {\n      additionalLanguageImports[language]()\n        .then(() => {\n          if (language === 'log') {\n            enhancePrismLogLanguage();\n          }\n          setLoadedLanguages((prev) => ({ ...prev, [language]: true }));\n        })\n        .catch((error) => {\n          devLog(`Failed to load language '${language}':`, error);\n        });\n    }\n  }, [language, loadedLanguages]);\n\n  // For the 'log' language, we need to ensure that the custom enhancement for short hex IDs is applied even if the language was already loaded (e.g. from a previous story).\n  useEffect(() => {\n    if (language === 'log' && loadedLanguages.log) {\n      enhancePrismLogLanguage();\n    }\n  }, [language, loadedLanguages.log]);\n\n  return (\n    <Highlight\n      language={language ?? 'plain'}\n      code={code}\n      theme={language === 'log' ? DTPrismTheme.Log : DTPrismTheme.Default}\n      // @ts-expect-error language prop accepts limited set of languages that don't include `log`\n      Prism={Prism}\n    >\n      {({ tokens, getLineProps, getTokenProps, className, style }) => (\n        <>\n          {children({\n            tokens,\n            getLineProps,\n            getTokenProps,\n            className,\n            style,\n          })}\n        </>\n      )}\n    </Highlight>\n  );\n};\n"],
+  "mappings": "AAsJQ;AAtJR,SAAS,OAAO,iBAAmC;AACnD,SAAS,WAAW,gBAA0B;AAE9C,SAAS,wBAAwB;AACjC,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAAA,CAG5B,OAAO,WAAW,cAAc,SAAS,QAAQ,QAAQ;AAE1D,MAAM,UAAU,MAAM;AAKtB,MAAM,0BAA0B;AAChC,MAAM,uBAAuB;AAO7B,SAAS,0BAAgC;AACvC,QAAM,cAAc,MAAM,UAAU;AAEpC,MAAI,CAAC,eAAe,2BAA2B,aAAa;AAC1D;AAAA,EACF;AAIA,QAAM,UAAU,aAAa,OAAO,YAAY;AAAA,IAC9C,CAAC,uBAAuB,GAAG;AAAA,MACzB,SAAS;AAAA,MACT,OAAO;AAAA,IACT;AAAA,EACF,CAAC;AACH;AA4CA,MAAM,4BAEF;AAAA;AAAA;AAAA,EAGF,MAAM,MAAM,OAAO,kCAAkC;AAAA;AAAA;AAAA,EAGrD,KAAK,MAAM,OAAO,iCAAiC;AAAA;AAAA;AAAA,EAGnD,QAAQ,MAAM,OAAO,oCAAoC;AAC3D;AAOO,MAAM,oBAAoB,CAAC,UAAkC;AAClE,QAAM,EAAE,UAAU,MAAM,SAAS,IAAI;AACrC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAE5C,MACA,OAAO;AAAA,MACL,OAAO,KAAK,yBAAyB,EAAE,IAAI,CAAC,SAAS;AAAA,QACnD;AAAA,QACA,MAAM,UAAU,IAAI,MAAM;AAAA,MAC5B,CAAC;AAAA,IACH;AAAA,EACF;AAGA,YAAU,MAAM;AACd,QACE,YACA,0BAA0B,QAAQ,KAClC,CAAC,gBAAgB,QAAQ,GACzB;AACA,gCAA0B,QAAQ,EAAE,EACjC,KAAK,MAAM;AACV,YAAI,aAAa,OAAO;AACtB,kCAAwB;AAAA,QAC1B;AACA,2BAAmB,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,QAAQ,GAAG,KAAK,EAAE;AAAA,MAC9D,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,eAAO,4BAA4B,QAAQ,MAAM,KAAK;AAAA,MACxD,CAAC;AAAA,IACL;AAAA,EACF,GAAG,CAAC,UAAU,eAAe,CAAC;AAG9B,YAAU,MAAM;AACd,QAAI,aAAa,SAAS,gBAAgB,KAAK;AAC7C,8BAAwB;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,UAAU,gBAAgB,GAAG,CAAC;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,YAAY;AAAA,MACtB;AAAA,MACA,OAAO,aAAa,QAAQ,aAAa,MAAM,aAAa;AAAA,MAE5D;AAAA,MAEC,WAAC,EAAE,QAAQ,cAAc,eAAe,WAAW,MAAM,MACxD,gCACG,mBAAS;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC,GACH;AAAA;AAAA,EAEJ;AAEJ;",
   "names": []
 }

package/esm/content/code-snippet/prism-dql-language.js

@@ -1,6 +1,12 @@
+import {
+  booleanLiteralPattern,
+  dqlUnitSuffixPattern,
+  parameterNamePattern,
+  sortedDqlCommands
+} from "../../core/dql/dql-common.js";
 const comments = {
   comment: {
-    // All characters except for newline,carriage return, form feed, vertical tab characters
+    // All characters except for newline, carriage return, form feed, vertical tab characters
     pattern: /\/\/[^\n\r\v\f]*/,
     greedy: true
   },
@@ -13,6 +19,10 @@ const comments = {
 const stringPattern = /"(?:[^"\\]|\\.)*"/m;
 const backtickStringPattern = /`(?:[^`\\]|\\.)*`/m;
 const tripleQuoteStringPattern = /"""[\s\S]*"""/m;
+const dqlCommandNamePattern = new RegExp(
+  `\\b(?:${sortedDqlCommands.join("|")})\\b`,
+  "i"
+);
 const commandNamePattern = /[A-Za-z]+/;
 const commandParametersPattern = new RegExp(
   `(${commandNamePattern.source})(?:${stringPattern.source}|[^|])*`
@@ -23,7 +33,7 @@ const commandPattern = new RegExp(
 );
 const commandName = {
   commandName: {
-    pattern: commandNamePattern,
+    pattern: dqlCommandNamePattern,
     alias: "keyword"
   }
 };
@@ -58,12 +68,17 @@ const prismDqlLanguage = {
             pattern: backtickStringPattern,
             alias: "string"
           },
-          number: /\b\d+(?:\.\d+)?\b/,
-          // Match standalone numbers not surrounded by words
-          parameterName: { pattern: /\w+:/, alias: "variable" },
+          number: new RegExp(`\\b\\d+(?:\\.\\d+)?${dqlUnitSuffixPattern}?\\b`),
+          // Match numbers with optional unit suffix
+          boolean: booleanLiteralPattern,
+          // Match boolean literals (true/false)
+          parameterName: { pattern: parameterNamePattern, alias: "variable" },
           ...comments,
           commandName: {
-            pattern: new RegExp(`(\\[\\s*)${commandNamePattern.source}`),
+            pattern: new RegExp(
+              `(\\[\\s*)${dqlCommandNamePattern.source}`,
+              "i"
+            ),
             lookbehind: true,
             alias: "keyword"
           }