@dynatrace/strato-components 3.12.1 → 3.13.0

package/content/chip/GroupedChip.js

@@ -35,6 +35,7 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_BaseChip = require("./BaseChip.js");
 var styles = __toESM(require("./GroupedChip.sty.js"));
+var import_usePendingFocusAnnouncement = require("./hooks/usePendingFocusAnnouncement.js");
 var import_useContainerSize = require("../../core/hooks/useContainerSize.js");
 var import_useId = require("../../core/hooks/useId.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
@@ -47,6 +48,7 @@ const GroupedChip = /* @__PURE__ */ (0, import_react.forwardRef)(
       children,
       size: propSize,
       disabled: propDisabled,
+      color = "neutral",
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
       ...remainingProps
@@ -60,7 +62,9 @@ const GroupedChip = /* @__PURE__ */ (0, import_react.forwardRef)(
     const {
       disabled: chipGroupDisabled,
       size: chipGroupSize,
-      dispatch
+      dispatch,
+      pendingFocusChip,
+      setPendingFocusChip
     } = internalChipGroupContext || {};
     const disabled = propDisabled ?? chipGroupDisabled ?? false;
     const size = propSize ?? chipGroupSize ?? "default";
@@ -84,14 +88,30 @@ const GroupedChip = /* @__PURE__ */ (0, import_react.forwardRef)(
         payload: { uniqueId, width: width === 0 ? void 0 : width }
       });
     }, [dispatch, uniqueId, width]);
+    const isVisible = visibleKeys.includes(uniqueId);
+    const isPendingFocus = pendingFocusChip?.uniqueId === uniqueId;
+    const showFocusRing = isPendingFocus && pendingFocusChip?.showFocusRing === true;
+    const pendingFocusRingColor = disabled ? "neutral" : color ?? "neutral";
+    (0, import_usePendingFocusAnnouncement.usePendingFocusAnnouncement)(chipRef, {
+      isPendingFocus,
+      isVisible,
+      disabled,
+      uniqueId,
+      setPendingFocusChip
+    });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref: rootRef,
-        className: (0, import_clsx.default)("chip", styles.grouped, {
-          [styles.first]: visibleKeys.includes(uniqueId) && visibleKeys.length === 1,
-          [styles.hidden]: !visibleKeys.includes(uniqueId)
-        }),
+        className: (0, import_clsx.default)(
+          "chip",
+          styles.grouped,
+          showFocusRing && styles.pendingFocusRing[pendingFocusRingColor],
+          {
+            [styles.first]: isVisible && visibleKeys.length === 1,
+            [styles.hidden]: !isVisible
+          }
+        ),
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -100,6 +120,7 @@ const GroupedChip = /* @__PURE__ */ (0, import_react.forwardRef)(
             ...remainingProps,
             disabled,
             size,
+            color,
             children
           }
         )

package/content/chip/GroupedChip.sty.js

@@ -19,10 +19,13 @@ var GroupedChip_css_exports = {};
 __export(GroupedChip_css_exports, {
   first: () => first,
   grouped: () => grouped,
-  hidden: () => hidden
+  hidden: () => hidden,
+  pendingFocusRing: () => pendingFocusRing
 });
 module.exports = __toCommonJS(GroupedChip_css_exports);
+var import_focusRingStatic_css_ts_vanilla = require("../../core/styles/focusRingStatic.css");
 var import_GroupedChip_css_ts_vanilla = require("./GroupedChip.css");
-var first = "_4mpedx2-3-12-1";
-var grouped = "_4mpedx1-3-12-1";
-var hidden = "_4mpedx0-3-12-1";
+var first = "_4mpedx2-3-13-0";
+var grouped = "_4mpedx1-3-13-0";
+var hidden = "_4mpedx0-3-13-0";
+var pendingFocusRing = { neutral: "_4mpedx3-3-13-0", primary: "_4mpedx4-3-13-0", success: "_4mpedx5-3-13-0", warning: "_4mpedx6-3-13-0", critical: "_4mpedx7-3-13-0" };

package/content/chip/hooks/usePendingFocusAnnouncement.d.ts

@@ -0,0 +1,15 @@
+import { type Dispatch, type RefObject, type SetStateAction } from 'react';
+import type { PendingFocusChip } from '../../chip-group/contexts/InternalChipGroupContext.js';
+/**
+ * Moves focus onto the first revealed chip after "Show more" expands the group.
+ * Cleanup happens on blur.
+ * @internal
+ */
+export declare function usePendingFocusAnnouncement(chipRef: RefObject<HTMLElement | null>, options: {
+    isPendingFocus: boolean;
+    isVisible: boolean;
+    disabled: boolean;
+    uniqueId: string;
+    setPendingFocusChip?: Dispatch<SetStateAction<PendingFocusChip>>;
+}): void;
+//# sourceMappingURL=usePendingFocusAnnouncement.d.ts.map

package/content/chip/hooks/usePendingFocusAnnouncement.js

@@ -0,0 +1,70 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var usePendingFocusAnnouncement_exports = {};
+__export(usePendingFocusAnnouncement_exports, {
+  usePendingFocusAnnouncement: () => usePendingFocusAnnouncement
+});
+module.exports = __toCommonJS(usePendingFocusAnnouncement_exports);
+var import_react = require("react");
+function usePendingFocusAnnouncement(chipRef, options) {
+  const { isPendingFocus, isVisible, disabled, uniqueId, setPendingFocusChip } = options;
+  (0, import_react.useEffect)(() => {
+    if (!isPendingFocus || !isVisible) {
+      return;
+    }
+    const chipWrapper = chipRef.current;
+    if (!chipWrapper) {
+      return;
+    }
+    const removeFocusAttributes = () => {
+      chipWrapper.removeAttribute("tabindex");
+      chipWrapper.removeAttribute("aria-label");
+      chipWrapper.removeAttribute("aria-disabled");
+      chipWrapper.removeAttribute("role");
+    };
+    const handleBlur = () => {
+      removeFocusAttributes();
+      setPendingFocusChip?.(
+        (current) => current?.uniqueId === uniqueId ? null : current
+      );
+    };
+    chipWrapper.setAttribute("tabindex", "-1");
+    chipWrapper.setAttribute("role", "group");
+    chipWrapper.setAttribute("aria-disabled", String(disabled));
+    const chipLabel = chipWrapper.querySelector(".strato-surface")?.textContent?.trim();
+    if (chipLabel) {
+      chipWrapper.setAttribute("aria-label", chipLabel);
+    }
+    chipWrapper.focus();
+    chipWrapper.addEventListener("blur", handleBlur, { once: true });
+    return () => {
+      removeFocusAttributes();
+      chipWrapper.removeEventListener("blur", handleBlur);
+      setPendingFocusChip?.(
+        (current) => current?.uniqueId === uniqueId ? null : current
+      );
+    };
+  }, [
+    chipRef,
+    disabled,
+    isPendingFocus,
+    isVisible,
+    setPendingFocusChip,
+    uniqueId
+  ]);
+}

package/content/chip/messages.d.ts

@@ -0,0 +1,8 @@
+export declare const chipMessages: {
+    deleteButtonLabel: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
+};
+//# sourceMappingURL=messages.d.ts.map

package/content/chip/messages.js

@@ -0,0 +1,30 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var messages_exports = {};
+__export(messages_exports, {
+  chipMessages: () => chipMessages
+});
+module.exports = __toCommonJS(messages_exports);
+var import_react_intl = require("react-intl");
+const chipMessages = (0, import_react_intl.defineMessages)({
+  deleteButtonLabel: {
+    defaultMessage: "Delete chip",
+    description: "Aria label used to describe the delete chip button.",
+    id: "JfsC0aOiAl7G3esV"
+  }
+});

package/content/chip-group/ChipGroup.css

@@ -1,4 +1,4 @@
-._dwt8fp0-3-12-1 {
+._dwt8fp0-3-13-0 {
   position: relative;
   align-items: center;
   align-content: center;
@@ -7,12 +7,12 @@
   overflow: hidden;
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
 }
-._dwt8fp1-3-12-1 {
+._dwt8fp1-3-13-0 {
   gap: var(--dt-spacings-size-6, 6px);
 }
-._dwt8fp3-3-12-1 {
+._dwt8fp3-3-13-0 {
   flex-wrap: wrap;
 }
-._dwt8fp4-3-12-1 {
+._dwt8fp4-3-13-0 {
   flex-wrap: nowrap;
 }

package/content/chip-group/ChipGroup.js

@@ -87,6 +87,7 @@ const RootChipGroup = (0, import_react.forwardRef)(
     const [allChipsFit, setAllChipsFit] = (0, import_react.useState)(false);
     const [hiddenChips, setHiddenChips] = (0, import_react.useState)([]);
     const [visibleChips, setVisibleChips] = (0, import_react.useState)([]);
+    const [pendingFocusChip, setPendingFocusChip] = (0, import_react.useState)(null);
     (0, import_react.useEffect)(() => {
       const chipEntries = Object.entries(state.chips);
       const chipEntriesKeys = chipEntries.map(
@@ -147,7 +148,9 @@ const RootChipGroup = (0, import_react.forwardRef)(
               expanded,
               allChipsFit,
               dispatch,
-              setExpanded
+              setExpanded,
+              pendingFocusChip,
+              setPendingFocusChip
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_Flex.Flex,

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

@@ -22,4 +22,4 @@ __export(ChipGroup_css_exports, {
 module.exports = __toCommonJS(ChipGroup_css_exports);
 var import_ChipGroup_css_ts_vanilla = require("./ChipGroup.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var chipGroupCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dwt8fp0-3-12-1", variantClassNames: { size: { condensed: "_dwt8fp1-3-12-1", "default": "_dwt8fp2-3-12-1" }, expanded: { true: "_dwt8fp3-3-12-1", false: "_dwt8fp4-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
+var chipGroupCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_dwt8fp0-3-13-0", variantClassNames: { size: { condensed: "_dwt8fp1-3-13-0", "default": "_dwt8fp2-3-13-0" }, expanded: { true: "_dwt8fp3-3-13-0", false: "_dwt8fp4-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });

package/content/chip-group/Control.css

@@ -1,4 +1,4 @@
-._uoyq2d0-3-12-1 {
+._uoyq2d0-3-13-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-12-1:hover {
+._uoyq2d0-3-13-0:hover {
   background: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._uoyq2d0-3-12-1:active {
+._uoyq2d0-3-13-0:active {
   background: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._uoyq2d1-3-12-1 {
+._uoyq2d1-3-13-0 {
   text-decoration: none;
 }

package/content/chip-group/Control.js

@@ -58,7 +58,14 @@ const Control = (props) => {
   });
   const { hiddenKeys, visibleKeys } = (0, import_useChipGroupContext.useChipGroupContext)();
   const internalChipGroupContext = (0, import_useInternalChipGroupContext.useInternalChipGroupContext)();
-  const { chipGroupId, expanded, allChipsFit, setExpanded, dispatch } = internalChipGroupContext || {};
+  const {
+    chipGroupId,
+    expanded,
+    allChipsFit,
+    setExpanded,
+    dispatch,
+    setPendingFocusChip
+  } = internalChipGroupContext || {};
   const controlRef = (0, import_react.useRef)(null);
   const { width: controlWidth } = (0, import_useContainerSize.useContainerSize)(controlRef);
   const width = Math.ceil(controlWidth);
@@ -110,6 +117,13 @@ const Control = (props) => {
       ref: controlRef,
       onClick: (event) => {
         onClick?.(event);
+        const isExpanding = display === "more" || !expanded;
+        if (isExpanding && hiddenKeys.length > 0) {
+          setPendingFocusChip?.({
+            uniqueId: hiddenKeys[0],
+            showFocusRing: isFocusVisible
+          });
+        }
         setExpanded?.((prev) => display === "more" ? true : !prev);
       },
       "aria-controls": chipGroupId,

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

@@ -22,4 +22,4 @@ __export(Control_css_exports, {
 module.exports = __toCommonJS(Control_css_exports);
 var import_Control_css_ts_vanilla = require("./Control.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var expandButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_uoyq2d0-3-12-1", variantClassNames: { isFocusVisible: { true: "_uoyq2d1-3-12-1", false: "_uoyq2d2-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
+var expandButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_uoyq2d0-3-13-0", variantClassNames: { isFocusVisible: { true: "_uoyq2d1-3-13-0", false: "_uoyq2d2-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });

package/content/chip-group/contexts/InternalChipGroupContext.d.ts

@@ -1,6 +1,16 @@
 import { type Context, type Dispatch, type SetStateAction } from 'react';
 import type { ChipOwnProps } from '../../chip/types/chip.js';
 import type { ChipGroupReducerActions } from '../state/chip-group-state-reducer.js';
+/**
+ * The chip that should receive focus after being revealed, along with
+ * whether the focus ring should be shown. The ring is only shown when the
+ * reveal was triggered via keyboard.
+ * @internal
+ */
+export type PendingFocusChip = {
+    uniqueId: string;
+    showFocusRing: boolean;
+} | null;
 /** @internal */
 export type InternalChipGroupContextProps = {
     chipGroupId?: string;
@@ -10,6 +20,8 @@ export type InternalChipGroupContextProps = {
     allChipsFit?: boolean;
     dispatch: Dispatch<ChipGroupReducerActions>;
     setExpanded: Dispatch<SetStateAction<boolean>>;
+    pendingFocusChip: PendingFocusChip;
+    setPendingFocusChip: Dispatch<SetStateAction<PendingFocusChip>>;
 } | undefined;
 /**
  * The _InternalChipGroupContext provides access to required states and callbacks.

package/content/code-snippet/CodeHighlight.css

@@ -1,4 +1,4 @@
-._1jmxup81-3-12-1 {
+._1jmxup81-3-13-0 {
   margin: 0;
   padding: 0;
   overflow: visible;
@@ -8,19 +8,19 @@
   font-weight: var(--dt-typography-code-base-default-weight, 400);
   word-break: break-word;
 }
-._1jmxup82-3-12-1 {
+._1jmxup82-3-13-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));
 }
-._1jmxup83-3-12-1 {
+._1jmxup83-3-13-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));
 }
-._1jmxup84-3-12-1 {
+._1jmxup84-3-13-0 {
   display: table-cell;
   position: sticky;
   left: 0;
@@ -32,75 +32,75 @@
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   user-select: none;
 }
-._1jgl8s50-3-12-1 ._1jmxup84-3-12-1 {
+._1jgl8s50-3-13-0 ._1jmxup84-3-13-0 {
   border-right-width: var(--dt-borders-width-default, 1px);
 }
-._1jmxup85-3-12-1 {
+._1jmxup85-3-13-0 {
   white-space: nowrap;
 }
-._1jmxup86-3-12-1 {
+._1jmxup86-3-13-0 {
   white-space: pre;
 }
-._1jmxup87-3-12-1 {
+._1jmxup87-3-13-0 {
   display: table-row;
 }
-._1jmxup88-3-12-1 {
+._1jmxup88-3-13-0 {
   display: block;
   box-sizing: border-box;
   pointer-events: none;
   user-select: none;
   -webkit-user-select: none;
 }
-._1jmxup88-3-12-1::before {
+._1jmxup88-3-13-0::before {
   content: attr(data-linenumber);
 }
-._1jmxup82-3-12-1 ._1jmxup87-3-12-1:first-child ._1jmxup88-3-12-1 {
+._1jmxup82-3-13-0 ._1jmxup87-3-13-0:first-child ._1jmxup88-3-13-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup83-3-12-1 ._1jmxup87-3-12-1:first-child ._1jmxup88-3-12-1 {
+._1jmxup83-3-13-0 ._1jmxup87-3-13-0:first-child ._1jmxup88-3-13-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup82-3-12-1 ._1jmxup87-3-12-1:last-child ._1jmxup88-3-12-1 {
+._1jmxup82-3-13-0 ._1jmxup87-3-13-0:last-child ._1jmxup88-3-13-0 {
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup83-3-12-1 ._1jmxup87-3-12-1:last-child ._1jmxup88-3-12-1 {
+._1jmxup83-3-13-0 ._1jmxup87-3-13-0:last-child ._1jmxup88-3-13-0 {
   padding-bottom: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup89-3-12-1 {
+._1jmxup89-3-13-0 {
   padding-left: var(--dt-spacings-size-16, 16px);
   min-width: 33px;
 }
-._1jmxup8a-3-12-1 {
+._1jmxup8a-3-13-0 {
   padding-left: var(--dt-spacings-size-12, 12px);
   min-width: 27px;
 }
-._1jmxup8c-3-12-1 {
+._1jmxup8c-3-13-0 {
   white-space: pre;
 }
-._1jmxup8d-3-12-1 {
+._1jmxup8d-3-13-0 {
   display: table-cell;
   width: 100%;
 }
-._1jmxup82-3-12-1 ._1jmxup87-3-12-1:first-child ._1jmxup8d-3-12-1 {
+._1jmxup82-3-13-0 ._1jmxup87-3-13-0:first-child ._1jmxup8d-3-13-0 {
   padding-top: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup83-3-12-1 ._1jmxup87-3-12-1:first-child ._1jmxup8d-3-12-1 {
+._1jmxup83-3-13-0 ._1jmxup87-3-13-0:first-child ._1jmxup8d-3-13-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup82-3-12-1 ._1jmxup87-3-12-1:last-child ._1jmxup8d-3-12-1 {
+._1jmxup82-3-13-0 ._1jmxup87-3-13-0:last-child ._1jmxup8d-3-13-0 {
   padding-bottom: var(--dt-spacings-size-12, 12px);
 }
-._1jmxup83-3-12-1 ._1jmxup87-3-12-1:last-child ._1jmxup8d-3-12-1 {
+._1jmxup83-3-13-0 ._1jmxup87-3-13-0:last-child ._1jmxup8d-3-13-0 {
   padding-bottom: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup8e-3-12-1 {
+._1jmxup8e-3-13-0 {
   padding-left: var(--dt-spacings-size-16, 16px);
   padding-right: var(--dt-spacings-size-8, 8px);
 }
-._1jmxup8f-3-12-1 {
+._1jmxup8f-3-13-0 {
   padding-left: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-6, 6px);
 }
-._1jmxup8h-3-12-1 {
+._1jmxup8h-3-13-0 {
   white-space: pre;
 }

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

@@ -29,10 +29,10 @@ module.exports = __toCommonJS(CodeHighlight_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_CodeHighlight_css_ts_vanilla = require("./CodeHighlight.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var gutterColumnWidth = "var(--_1jmxup80-3-12-1)";
-var highlightWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup81-3-12-1", variantClassNames: { size: { "default": "_1jmxup82-3-12-1", condensed: "_1jmxup83-3-12-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var line = "_1jmxup87-3-12-1";
-var lineContent = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup8d-3-12-1", variantClassNames: { size: { "default": "_1jmxup8e-3-12-1", condensed: "_1jmxup8f-3-12-1" }, multiLine: { false: "_1jmxup8g-3-12-1", true: "_1jmxup8h-3-12-1" } }, defaultVariants: { size: "default", multiLine: false }, compoundVariants: [] });
-var lineNumber = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup88-3-12-1", variantClassNames: { size: { "default": "_1jmxup89-3-12-1", condensed: "_1jmxup8a-3-12-1" }, multiLine: { false: "_1jmxup8b-3-12-1", true: "_1jmxup8c-3-12-1" } }, defaultVariants: { size: "default", multiLine: false }, compoundVariants: [] });
-var lineNumberContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup84-3-12-1", variantClassNames: { multiLine: { false: "_1jmxup85-3-12-1", true: "_1jmxup86-3-12-1" } }, defaultVariants: { multiLine: false }, compoundVariants: [] });
+var gutterColumnWidth = "var(--_1jmxup80-3-13-0)";
+var highlightWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup81-3-13-0", variantClassNames: { size: { "default": "_1jmxup82-3-13-0", condensed: "_1jmxup83-3-13-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var line = "_1jmxup87-3-13-0";
+var lineContent = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup8d-3-13-0", variantClassNames: { size: { "default": "_1jmxup8e-3-13-0", condensed: "_1jmxup8f-3-13-0" }, multiLine: { false: "_1jmxup8g-3-13-0", true: "_1jmxup8h-3-13-0" } }, defaultVariants: { size: "default", multiLine: false }, compoundVariants: [] });
+var lineNumber = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup88-3-13-0", variantClassNames: { size: { "default": "_1jmxup89-3-13-0", condensed: "_1jmxup8a-3-13-0" }, multiLine: { false: "_1jmxup8b-3-13-0", true: "_1jmxup8c-3-13-0" } }, defaultVariants: { size: "default", multiLine: false }, compoundVariants: [] });
+var lineNumberContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1jmxup84-3-13-0", variantClassNames: { multiLine: { false: "_1jmxup85-3-13-0", true: "_1jmxup86-3-13-0" } }, defaultVariants: { multiLine: false }, compoundVariants: [] });
 var lineNumberMinWidth = { "default": "33px", condensed: "27px" };

package/content/code-snippet/CodeSnippet.css

@@ -1,4 +1,4 @@
-._17pa72a1-3-12-1 {
+._17pa72a1-3-13-0 {
   position: relative;
   display: flex;
   border-radius: var(--dt-borders-radius-container-subdued, 6px);
@@ -9,36 +9,36 @@
   overflow: auto;
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1jgl8s50-3-12-1 ._17pa72a1-3-12-1 {
+._1jgl8s50-3-13-0 ._17pa72a1-3-13-0 {
   border-width: var(--dt-borders-width-default, 1px);
 }
-._17pa72a2-3-12-1 {
+._17pa72a2-3-13-0 {
   min-height: 100%;
   max-height: 100%;
 }
-._17pa72a3-3-12-1 {
-  --_17pa72a0-3-12-1: var(--dt-borders-width-emphasized, 2px);
+._17pa72a3-3-13-0 {
+  --_17pa72a0-3-13-0: var(--dt-borders-width-emphasized, 2px);
 }
-._1jgl8s50-3-12-1 ._17pa72a3-3-12-1 {
-  --_17pa72a0-3-12-1: var(--dt-borders-width-default, 1px);
+._1jgl8s50-3-13-0 ._17pa72a3-3-13-0 {
+  --_17pa72a0-3-13-0: var(--dt-borders-width-default, 1px);
 }
-._17pa72a3-3-12-1::before {
+._17pa72a3-3-13-0::before {
   content: "";
   position: sticky;
   left: 0;
   flex-shrink: 0;
-  width: var(--_1jmxup80-3-12-1);
-  margin-right: calc(-1 * var(--_1jmxup80-3-12-1));
+  width: var(--_1jmxup80-3-13-0);
+  margin-right: calc(-1 * var(--_1jmxup80-3-13-0));
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
-  box-shadow: inset calc(-1 * var(--_17pa72a0-3-12-1)) 0 0 0 var(--dt-colors-border-neutral-default, #dadbe4);
+  box-shadow: inset calc(-1 * var(--_17pa72a0-3-13-0)) 0 0 0 var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._17pa72a4-3-12-1 {
-  --_1jmxup80-3-12-1: calc(33px + var(--dt-spacings-size-16, 16px) + var(--_17pa72a0-3-12-1));
+._17pa72a4-3-13-0 {
+  --_1jmxup80-3-13-0: calc(33px + var(--dt-spacings-size-16, 16px) + var(--_17pa72a0-3-13-0));
 }
-._17pa72a5-3-12-1 {
-  --_1jmxup80-3-12-1: calc(27px + var(--dt-spacings-size-16, 16px) + var(--_17pa72a0-3-12-1));
+._17pa72a5-3-13-0 {
+  --_1jmxup80-3-13-0: calc(27px + var(--dt-spacings-size-16, 16px) + var(--_17pa72a0-3-13-0));
 }
-._17pa72a6-3-12-1 {
+._17pa72a6-3-13-0 {
   position: sticky;
   display: flex;
   align-self: stretch;
@@ -47,9 +47,9 @@
   inset-block: 0;
   right: 0;
 }
-._17pa72a7-3-12-1 {
+._17pa72a7-3-13-0 {
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-6, 6px) 0;
 }
-._17pa72a8-3-12-1 {
+._17pa72a8-3-13-0 {
   padding: var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-2, 2px) 0;
 }

package/content/code-snippet/CodeSnippet.js

@@ -50,7 +50,7 @@ const CodeSnippet = /* @__PURE__ */ (0, import_react.forwardRef)((props, forward
   const {
     children,
     language,
-    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    // oxlint-disable-next-line typescript/no-deprecated
     allowCopy: allowCopyProp,
     showCopyAction: showCopyActionProp,
     showLineNumbers = true,

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

@@ -27,7 +27,7 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_CodeHighlight_css_ts_vanilla = require("./CodeHighlight.css");
 var import_CodeSnippet_css_ts_vanilla = require("./CodeSnippet.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var copyButtonContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_17pa72a6-3-12-1", variantClassNames: { size: { "default": "_17pa72a7-3-12-1", condensed: "_17pa72a8-3-12-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
-var wrapper = "_17pa72a1-3-12-1";
-var wrapperFullHeight = "_17pa72a2-3-12-1";
-var wrapperGutter = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_17pa72a3-3-12-1", variantClassNames: { size: { "default": "_17pa72a4-3-12-1", condensed: "_17pa72a5-3-12-1" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var copyButtonContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_17pa72a6-3-13-0", variantClassNames: { size: { "default": "_17pa72a7-3-13-0", condensed: "_17pa72a8-3-13-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });
+var wrapper = "_17pa72a1-3-13-0";
+var wrapperFullHeight = "_17pa72a2-3-13-0";
+var wrapperGutter = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_17pa72a3-3-13-0", variantClassNames: { size: { "default": "_17pa72a4-3-13-0", condensed: "_17pa72a5-3-13-0" } }, defaultVariants: { size: "default" }, compoundVariants: [] });

package/content/code-snippet/HighlightExtended.js

@@ -53,14 +53,11 @@ function enhancePrismLogLanguage() {
   });
 }
 const additionalLanguageImports = {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
+  // @ts-expect-error: prismjs does not ship type declarations for individual language component files
   bash: () => Promise.resolve().then(() => __toESM(require("prismjs/components/prism-bash.js"))),
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
+  // @ts-expect-error: prismjs does not ship type declarations for individual language component files
   log: () => Promise.resolve().then(() => __toESM(require("prismjs/components/prism-log.js"))),
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
+  // @ts-expect-error: prismjs does not ship type declarations for individual language component files
   groovy: () => Promise.resolve().then(() => __toESM(require("prismjs/components/prism-groovy.js")))
 };
 const HighlightExtended = (props) => {