@cloudscape-design/components-themeable 3.0.1311 → 3.0.1313

package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portal-overlay.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/portal-overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAY5E,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,UAAU,EACV,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC3C,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eAkEA"}
+{"version":3,"file":"portal-overlay.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/portal-overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAY5E,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,UAAU,EACV,UAAU,EACV,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC3C,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eA0EA"}

package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.js

@@ -4,7 +4,7 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { getIsRtl, getLogicalBoundingClientRect, getScrollInlineStart, Portal, } from '@cloudscape-design/component-toolkit/internal';
 import styles from './styles.css.js';
-export default function PortalOverlay({ track, isDisabled, children, }) {
+export default function PortalOverlay({ track, isDisabled, referrerId, children, }) {
     const ref = useRef(null);
     const [container, setContainer] = useState(null);
     useLayoutEffect(() => {
@@ -57,7 +57,7 @@ export default function PortalOverlay({ track, isDisabled, children, }) {
         };
     }, [isDisabled, track]);
     return (React.createElement(Portal, { container: container },
-        React.createElement("span", { ref: ref, className: clsx(styles['portal-overlay'], isDisabled && styles['portal-overlay-disabled']) },
+        React.createElement("span", { ref: ref, "data-awsui-referrer-id": referrerId, className: clsx(styles['portal-overlay'], isDisabled && styles['portal-overlay-disabled']) },
             React.createElement("span", { className: styles['portal-overlay-contents'] }, children))));
 }
 //# sourceMappingURL=portal-overlay.js.map

package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal-overlay.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/portal-overlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport {\n  getIsRtl,\n  getLogicalBoundingClientRect,\n  getScrollInlineStart,\n  Portal,\n} from '@cloudscape-design/component-toolkit/internal';\n\nimport styles from './styles.css.js';\n\nexport default function PortalOverlay({\n  track,\n  isDisabled,\n  children,\n}: {\n  track: React.RefObject<HTMLElement | null>;\n  isDisabled: boolean;\n  children: React.ReactNode;\n}) {\n  const ref = useRef<HTMLSpanElement | null>(null);\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (track.current) {\n      const newContainer = track.current.ownerDocument.createElement('div');\n      track.current.ownerDocument.body.appendChild(newContainer);\n      setContainer(newContainer);\n      return () => newContainer.remove();\n    }\n  }, [track]);\n\n  useEffect(() => {\n    if (track.current === null || isDisabled) {\n      return;\n    }\n\n    let cleanedUp = false;\n    let lastX: number | undefined;\n    let lastY: number | undefined;\n    let lastInlineSize: number | undefined;\n    let lastBlockSize: number | undefined;\n    const updateElement = () => {\n      // It could be that the portal hasn't been attached to the DOM yet - ensure the ref exists and is attached DOM tree.\n      if (track.current && ref.current && document.body.contains(ref.current)) {\n        const isRtl = getIsRtl(ref.current);\n        const { insetInlineStart, insetBlockStart, inlineSize, blockSize } = getLogicalBoundingClientRect(\n          track.current\n        );\n        // For simplicity, we just make all our calculations independent of\n        // the browser's scrolling edge. When it comes to applying the changes,\n        // translate is independent of writing direction, so we need to invert\n        // the X coordinate ourselves just before applying the values.\n        const newX = (insetInlineStart + getScrollInlineStart(document.documentElement)) * (isRtl ? -1 : 1);\n        const newY = insetBlockStart + document.documentElement.scrollTop;\n        if (lastX !== newX || lastY !== newY) {\n          ref.current.style.translate = `${newX}px ${newY}px`;\n          lastX = newX;\n          lastY = newY;\n        }\n        if (lastInlineSize !== inlineSize || lastBlockSize !== blockSize) {\n          ref.current.style.width = `${inlineSize}px`;\n          ref.current.style.height = `${blockSize}px`;\n          lastInlineSize = inlineSize;\n          lastBlockSize = blockSize;\n        }\n      }\n      if (!cleanedUp) {\n        requestAnimationFrame(updateElement);\n      }\n    };\n    updateElement();\n\n    return () => {\n      cleanedUp = true;\n    };\n  }, [isDisabled, track]);\n\n  return (\n    <Portal container={container}>\n      <span ref={ref} className={clsx(styles['portal-overlay'], isDisabled && styles['portal-overlay-disabled'])}>\n        <span className={styles['portal-overlay-contents']}>{children}</span>\n      </span>\n    </Portal>\n  );\n}\n"]}
+{"version":3,"file":"portal-overlay.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/portal-overlay.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport {\n  getIsRtl,\n  getLogicalBoundingClientRect,\n  getScrollInlineStart,\n  Portal,\n} from '@cloudscape-design/component-toolkit/internal';\n\nimport styles from './styles.css.js';\n\nexport default function PortalOverlay({\n  track,\n  isDisabled,\n  referrerId,\n  children,\n}: {\n  track: React.RefObject<HTMLElement | null>;\n  isDisabled: boolean;\n  referrerId?: string;\n  children: React.ReactNode;\n}) {\n  const ref = useRef<HTMLSpanElement | null>(null);\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (track.current) {\n      const newContainer = track.current.ownerDocument.createElement('div');\n      track.current.ownerDocument.body.appendChild(newContainer);\n      setContainer(newContainer);\n      return () => newContainer.remove();\n    }\n  }, [track]);\n\n  useEffect(() => {\n    if (track.current === null || isDisabled) {\n      return;\n    }\n\n    let cleanedUp = false;\n    let lastX: number | undefined;\n    let lastY: number | undefined;\n    let lastInlineSize: number | undefined;\n    let lastBlockSize: number | undefined;\n    const updateElement = () => {\n      // It could be that the portal hasn't been attached to the DOM yet - ensure the ref exists and is attached DOM tree.\n      if (track.current && ref.current && document.body.contains(ref.current)) {\n        const isRtl = getIsRtl(ref.current);\n        const { insetInlineStart, insetBlockStart, inlineSize, blockSize } = getLogicalBoundingClientRect(\n          track.current\n        );\n        // For simplicity, we just make all our calculations independent of\n        // the browser's scrolling edge. When it comes to applying the changes,\n        // translate is independent of writing direction, so we need to invert\n        // the X coordinate ourselves just before applying the values.\n        const newX = (insetInlineStart + getScrollInlineStart(document.documentElement)) * (isRtl ? -1 : 1);\n        const newY = insetBlockStart + document.documentElement.scrollTop;\n        if (lastX !== newX || lastY !== newY) {\n          ref.current.style.translate = `${newX}px ${newY}px`;\n          lastX = newX;\n          lastY = newY;\n        }\n        if (lastInlineSize !== inlineSize || lastBlockSize !== blockSize) {\n          ref.current.style.width = `${inlineSize}px`;\n          ref.current.style.height = `${blockSize}px`;\n          lastInlineSize = inlineSize;\n          lastBlockSize = blockSize;\n        }\n      }\n      if (!cleanedUp) {\n        requestAnimationFrame(updateElement);\n      }\n    };\n    updateElement();\n\n    return () => {\n      cleanedUp = true;\n    };\n  }, [isDisabled, track]);\n\n  return (\n    <Portal container={container}>\n      {/* `data-awsui-referrer-id` links this portaled overlay back to the tracked element in the\n          regular DOM, so outside-click / focus detection (see `nodeBelongs`) treats interactions\n          with the UAP buttons as belonging to wherever the drag handle is mounted (e.g. inside a\n          dropdown), instead of as a click outside it. */}\n      <span\n        ref={ref}\n        data-awsui-referrer-id={referrerId}\n        className={clsx(styles['portal-overlay'], isDisabled && styles['portal-overlay-disabled'])}\n      >\n        <span className={styles['portal-overlay-contents']}>{children}</span>\n      </span>\n    </Portal>\n  );\n}\n"]}

package/lib/internal/template/internal/components/expand-toggle-button/index.js

@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useRef } from 'react';
 import clsx from 'clsx';
-import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
+import { isThemeActive, Theme, useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
 import InternalIcon from '../../../icon/internal';
 import styles from './styles.css.js';
 export function ExpandToggleButton({ isExpanded, onExpandableItemToggle, expandButtonLabel, collapseButtonLabel, customIcon, className, disableFocusHighlight, }) {
     const buttonRef = useRef(null);
     const { tabIndex } = useSingleTabStopNavigation(buttonRef);
-    return (React.createElement("button", { type: "button", ref: buttonRef, tabIndex: tabIndex, "aria-label": isExpanded ? collapseButtonLabel : expandButtonLabel, "aria-expanded": isExpanded, className: clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className), onClick: onExpandableItemToggle }, customIcon !== null && customIcon !== void 0 ? customIcon : (React.createElement(InternalIcon, { size: "small", name: "caret-down-filled", className: clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded']) }))));
+    return (React.createElement("button", { type: "button", ref: buttonRef, tabIndex: tabIndex, "aria-label": isExpanded ? collapseButtonLabel : expandButtonLabel, "aria-expanded": isExpanded, className: clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className), onClick: onExpandableItemToggle }, customIcon !== null && customIcon !== void 0 ? customIcon : (React.createElement(InternalIcon, { size: isThemeActive(Theme.OneTheme) ? 'x-small' : 'small', name: isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled', className: clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded']) }))));
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/internal/components/expand-toggle-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/expand-toggle-button/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAE3F,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,UAAU,kBAAkB,CAAC,EACjC,UAAU,EACV,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,SAAS,EACT,qBAAqB,GAStB;IACC,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,EAAE,QAAQ,EAAE,GAAG,0BAA0B,CAAC,SAAS,CAAC,CAAC;IAE3D,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,QAAQ,gBACN,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,mBACjD,UAAU,EACzB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,qBAAqB,IAAI,MAAM,CAAC,yBAAyB,CAAC,EAAE,SAAS,CAAC,EAC/G,OAAO,EAAE,sBAAsB,IAE9B,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,CACb,oBAAC,YAAY,IACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,mBAAmB,EACxB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,UAAU,IAAI,MAAM,CAAC,6BAA6B,CAAC,CAAC,GAClG,CACH,CACM,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalIcon from '../../../icon/internal';\n\nimport styles from './styles.css.js';\n\nexport function ExpandToggleButton({\n  isExpanded,\n  onExpandableItemToggle,\n  expandButtonLabel,\n  collapseButtonLabel,\n  customIcon,\n  className,\n  disableFocusHighlight,\n}: {\n  isExpanded?: boolean;\n  onExpandableItemToggle?: () => void;\n  expandButtonLabel?: string;\n  collapseButtonLabel?: string;\n  customIcon?: React.ReactNode;\n  className?: string;\n  disableFocusHighlight?: boolean;\n}) {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { tabIndex } = useSingleTabStopNavigation(buttonRef);\n\n  return (\n    <button\n      type=\"button\"\n      ref={buttonRef}\n      tabIndex={tabIndex}\n      aria-label={isExpanded ? collapseButtonLabel : expandButtonLabel}\n      aria-expanded={isExpanded}\n      className={clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className)}\n      onClick={onExpandableItemToggle}\n    >\n      {customIcon ?? (\n        <InternalIcon\n          size=\"small\"\n          name=\"caret-down-filled\"\n          className={clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded'])}\n        />\n      )}\n    </button>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/expand-toggle-button/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAEjH,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,UAAU,kBAAkB,CAAC,EACjC,UAAU,EACV,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,SAAS,EACT,qBAAqB,GAStB;IACC,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,EAAE,QAAQ,EAAE,GAAG,0BAA0B,CAAC,SAAS,CAAC,CAAC;IAE3D,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,QAAQ,gBACN,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,mBACjD,UAAU,EACzB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,qBAAqB,IAAI,MAAM,CAAC,yBAAyB,CAAC,EAAE,SAAS,CAAC,EAC/G,OAAO,EAAE,sBAAsB,IAE9B,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,CACb,oBAAC,YAAY,IACX,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACzD,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,mBAAmB,EACxE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,UAAU,IAAI,MAAM,CAAC,6BAA6B,CAAC,CAAC,GAClG,CACH,CACM,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { isThemeActive, Theme, useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalIcon from '../../../icon/internal';\n\nimport styles from './styles.css.js';\n\nexport function ExpandToggleButton({\n  isExpanded,\n  onExpandableItemToggle,\n  expandButtonLabel,\n  collapseButtonLabel,\n  customIcon,\n  className,\n  disableFocusHighlight,\n}: {\n  isExpanded?: boolean;\n  onExpandableItemToggle?: () => void;\n  expandButtonLabel?: string;\n  collapseButtonLabel?: string;\n  customIcon?: React.ReactNode;\n  className?: string;\n  disableFocusHighlight?: boolean;\n}) {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { tabIndex } = useSingleTabStopNavigation(buttonRef);\n\n  return (\n    <button\n      type=\"button\"\n      ref={buttonRef}\n      tabIndex={tabIndex}\n      aria-label={isExpanded ? collapseButtonLabel : expandButtonLabel}\n      aria-expanded={isExpanded}\n      className={clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className)}\n      onClick={onExpandableItemToggle}\n    >\n      {customIcon ?? (\n        <InternalIcon\n          size={isThemeActive(Theme.OneTheme) ? 'x-small' : 'small'}\n          name={isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled'}\n          className={clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded'])}\n        />\n      )}\n    </button>\n  );\n}\n"]}

package/lib/internal/template/internal/environment.js

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (22d5a6b4)";
-export var GIT_SHA = "22d5a6b4";
+export var PACKAGE_VERSION = "3.0.0 (82d11d66)";
+export var GIT_SHA = "82d11d66";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "core";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (22d5a6b4)",
-  "GIT_SHA": "22d5a6b4",
+  "PACKAGE_VERSION": "3.0.0 (82d11d66)",
+  "GIT_SHA": "82d11d66",
   "THEME": "default",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": false,

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

@@ -300,6 +300,7 @@ export const colorBackgroundButtonNormalDisabled: string;
 export const colorBackgroundButtonNormalHover: string;
 export const colorBackgroundToggleButtonNormalPressed: string;
 export const colorBackgroundToggleButtonNormalDefault: string;
+export const colorBackgroundToggleButtonNormalHover: string;
 export const colorBackgroundButtonPrimaryActive: string;
 export const colorBackgroundButtonPrimaryDefault: string;
 export const colorBackgroundButtonPrimaryDisabled: string;
@@ -339,6 +340,7 @@ export const colorBackgroundLayoutMain: string;
 export const colorBackgroundDrawer: string;
 export const colorBackgroundDrawerBackdrop: string;
 export const colorBackgroundLayoutMobilePanel: string;
+export const colorBackgroundLayoutPanel: string;
 export const colorBackgroundLayoutPanelContent: string;
 export const colorBackgroundLayoutPanelHover: string;
 export const colorBackgroundLayoutToolbar: string;
@@ -405,6 +407,8 @@ export const colorBorderButtonLinkDisabled: string;
 export const colorBorderButtonNormalActive: string;
 export const colorBorderButtonNormalDefault: string;
 export const colorBorderToggleButtonNormalPressed: string;
+export const colorBorderToggleButtonNormalDefault: string;
+export const colorBorderToggleButtonNormalHover: string;
 export const colorBorderButtonNormalDisabled: string;
 export const colorTextButtonNormalDisabled: string;
 export const colorBorderButtonNormalHover: string;
@@ -436,6 +440,7 @@ export const colorBorderDividerDefault: string;
 export const colorBorderDividerPanelBottom: string;
 export const colorBorderDividerPanelSide: string;
 export const colorBorderDividerSecondary: string;
+export const colorBorderDividerTableGroup: string;
 export const colorBorderDropdownContainer: string;
 export const colorBorderDropdownGroup: string;
 export const colorBorderDropdownItemDefault: string;
@@ -459,6 +464,7 @@ export const colorBorderSegmentActive: string;
 export const colorBorderSegmentDefault: string;
 export const colorBorderSegmentDisabled: string;
 export const colorBorderSegmentHover: string;
+export const colorBorderSegmentWrapper: string;
 export const colorBorderStatusError: string;
 export const colorBorderStatusInfo: string;
 export const colorBorderStatusSuccess: string;
@@ -476,6 +482,7 @@ export const colorForegroundControlReadOnly: string;
 export const colorShadowDefault: string;
 export const colorShadowMedium: string;
 export const colorShadowSide: string;
+export const colorShadowToggleHandle: string;
 export const colorStrokeChartLine: string;
 export const colorStrokeCodeEditorGutterActiveLineDefault: string;
 export const colorStrokeCodeEditorGutterActiveLineHover: string;
@@ -732,6 +739,7 @@ export const borderRadiusStatusIndicator: string;
 export const borderRadiusTabsFocusRing: string;
 export const borderRadiusTiles: string;
 export const borderRadiusToken: string;
+export const borderRadiusTokenInline: string;
 export const borderRadiusTutorialPanelItem: string;
 export const borderTableStickyWidth: string;
 export const borderWidthActionCardActive: string;

package/lib/internal/template/internal/generated/styles/tokens.js

@@ -300,6 +300,7 @@ export var colorBackgroundButtonNormalDisabled = "var(--color-background-button-
 export var colorBackgroundButtonNormalHover = "var(--color-background-button-normal-hover-53op9s, #f0fbff)";
 export var colorBackgroundToggleButtonNormalPressed = "var(--color-background-toggle-button-normal-pressed-4khex7, #d1f1ff)";
 export var colorBackgroundToggleButtonNormalDefault = "var(--color-background-toggle-button-normal-default-ipnqr5, #ffffff)";
+export var colorBackgroundToggleButtonNormalHover = "var(--color-background-toggle-button-normal-hover-0r2lj4, #f0fbff)";
 export var colorBackgroundButtonPrimaryActive = "var(--color-background-button-primary-active-5cqoqt, #002b66)";
 export var colorBackgroundButtonPrimaryDefault = "var(--color-background-button-primary-default-vdt0fu, #006ce0)";
 export var colorBackgroundButtonPrimaryDisabled = "var(--color-background-button-primary-disabled-sgo4zo, #ebebf0)";
@@ -339,6 +340,7 @@ export var colorBackgroundLayoutMain = "var(--color-background-layout-main-5ilwc
 export var colorBackgroundDrawer = "var(--color-background-drawer-5hs0eh, #ffffff)";
 export var colorBackgroundDrawerBackdrop = "var(--color-background-drawer-backdrop-ducxi3, rgba(35, 43, 55, 0.7))";
 export var colorBackgroundLayoutMobilePanel = "var(--color-background-layout-mobile-panel-ed0ava, #0f141a)";
+export var colorBackgroundLayoutPanel = "var(--color-background-layout-panel-jv6exs, #ffffff)";
 export var colorBackgroundLayoutPanelContent = "var(--color-background-layout-panel-content-xto15e, #ffffff)";
 export var colorBackgroundLayoutPanelHover = "var(--color-background-layout-panel-hover-tguulw, #ebebf0)";
 export var colorBackgroundLayoutToolbar = "var(--color-background-layout-toolbar-y0cu80, #ffffff)";
@@ -405,6 +407,8 @@ export var colorBorderButtonLinkDisabled = "var(--color-border-button-link-disab
 export var colorBorderButtonNormalActive = "var(--color-border-button-normal-active-ru7yhb, #002b66)";
 export var colorBorderButtonNormalDefault = "var(--color-border-button-normal-default-glqfp1, #006ce0)";
 export var colorBorderToggleButtonNormalPressed = "var(--color-border-toggle-button-normal-pressed-tq8o41, #006ce0)";
+export var colorBorderToggleButtonNormalDefault = "var(--color-border-toggle-button-normal-default-13wcrj, #006ce0)";
+export var colorBorderToggleButtonNormalHover = "var(--color-border-toggle-button-normal-hover-0gzb6n, #002b66)";
 export var colorBorderButtonNormalDisabled = "var(--color-border-button-normal-disabled-pkhetz, #b4b4bb)";
 export var colorTextButtonNormalDisabled = "var(--color-text-button-normal-disabled-05p74s, #8c8c94)";
 export var colorBorderButtonNormalHover = "var(--color-border-button-normal-hover-6a2tdq, #002b66)";
@@ -436,6 +440,7 @@ export var colorBorderDividerDefault = "var(--color-border-divider-default-nr68j
 export var colorBorderDividerPanelBottom = "var(--color-border-divider-panel-bottom-bruvuz, #c6c6cd)";
 export var colorBorderDividerPanelSide = "var(--color-border-divider-panel-side-an0w07, #c6c6cd)";
 export var colorBorderDividerSecondary = "var(--color-border-divider-secondary-qoitch, #ebebf0)";
+export var colorBorderDividerTableGroup = "var(--color-border-divider-table-group-l55omi, #8c8c94)";
 export var colorBorderDropdownContainer = "var(--color-border-dropdown-container-cmthq7, #b4b4bb)";
 export var colorBorderDropdownGroup = "var(--color-border-dropdown-group-ylcnh8, #c6c6cd)";
 export var colorBorderDropdownItemDefault = "var(--color-border-dropdown-item-default-kape37, #c6c6cd)";
@@ -459,6 +464,7 @@ export var colorBorderSegmentActive = "var(--color-border-segment-active-ls9t4n,
 export var colorBorderSegmentDefault = "var(--color-border-segment-default-6ig2mo, #424650)";
 export var colorBorderSegmentDisabled = "var(--color-border-segment-disabled-fcrbcl, #424650)";
 export var colorBorderSegmentHover = "var(--color-border-segment-hover-0o9ey3, #424650)";
+export var colorBorderSegmentWrapper = "var(--color-border-segment-wrapper-mvxnza, #8c8c94)";
 export var colorBorderStatusError = "var(--color-border-status-error-j8acpp, #db0000)";
 export var colorBorderStatusInfo = "var(--color-border-status-info-qf6jok, #006ce0)";
 export var colorBorderStatusSuccess = "var(--color-border-status-success-8z5f8u, #00802f)";
@@ -476,6 +482,7 @@ export var colorForegroundControlReadOnly = "var(--color-foreground-control-read
 export var colorShadowDefault = "var(--color-shadow-default-o7dmmm, rgba(15, 20, 26, 0.12))";
 export var colorShadowMedium = "var(--color-shadow-medium-x7of55, rgba(15, 20, 26, 0.12))";
 export var colorShadowSide = "var(--color-shadow-side-rtsbda, rgba(15, 20, 26, 0.12))";
+export var colorShadowToggleHandle = "var(--color-shadow-toggle-handle-at8aqh, rgba(0, 0, 0, 0.25))";
 export var colorStrokeChartLine = "var(--color-stroke-chart-line-3nsnk6, #8c8c94)";
 export var colorStrokeCodeEditorGutterActiveLineDefault = "var(--color-stroke-code-editor-gutter-active-line-default-5hrdmu, #dedee3)";
 export var colorStrokeCodeEditorGutterActiveLineHover = "var(--color-stroke-code-editor-gutter-active-line-hover-vqrb6s, #f9f9fa)";
@@ -732,6 +739,7 @@ export var borderRadiusStatusIndicator = "var(--border-radius-status-indicator-f
 export var borderRadiusTabsFocusRing = "var(--border-radius-tabs-focus-ring-o4qku1, 20px)";
 export var borderRadiusTiles = "var(--border-radius-tiles-wm1vgw, 8px)";
 export var borderRadiusToken = "var(--border-radius-token-ycnemh, 8px)";
+export var borderRadiusTokenInline = "var(--border-radius-token-inline-tio0a0, 4px)";
 export var borderRadiusTutorialPanelItem = "var(--border-radius-tutorial-panel-item-ojaqxg, 8px)";
 export var borderTableStickyWidth = "var(--border-table-sticky-width-ai31mi, 1px)";
 export var borderWidthActionCardActive = "var(--border-width-action-card-active-pwtgzu, 1px)";