@carbon/web-components 2.57.0 → 2.58.0

package/lib/components/ui-shell/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/ui-shell/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Collapse modes of side nav.\n */\nexport enum SIDE_NAV_COLLAPSE_MODE {\n  /**\n   * Fixed mode.\n   * In this mode, side nav is non-collapsible.\n   */\n  FIXED = 'fixed',\n\n  /**\n   * Rail mode.\n   * In this mode, side nav can be collapsed to a narrower width (\"rail\" look) with a toggle button.\n   */\n  RAIL = 'rail',\n\n  /**\n   * Responsive mode.\n   * In this mode, side nav sticks in wider screen, and can be completely collapsed with a toggle button in narrower screen.\n   */\n  RESPONSIVE = 'responsive',\n}\n\n/**\n * The usage purpose of side nav.\n */\nexport enum SIDE_NAV_USAGE_MODE {\n  /**\n   * Regular usage.\n   */\n  REGULAR = '',\n\n  /**\n   * To represent header nav.\n   * In this mode, side nav is hidden when header nav is shown, and side nav is shown then header nav is hidden.\n   * This mode can be used only with `SIDE_NAV_COLLAPSE_MODE.REGULAR`.\n   */\n  HEADER_NAV = 'header-nav',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,IAAY,yBAAL,yBAAA,wBAAA;;;;;AAKL,wBAAA,WAAA;;;;;AAMA,wBAAA,UAAA;;;;;AAMA,wBAAA,gBAAA;;KACD;;;;AAKD,IAAY,sBAAL,yBAAA,qBAAA;;;;AAIL,qBAAA,aAAA;;;;;;AAOA,qBAAA,gBAAA;;KACD"}
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/ui-shell/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Collapse modes of side nav.\n */\nexport enum SIDE_NAV_COLLAPSE_MODE {\n  /**\n   * Fixed mode.\n   * In this mode, side nav is non-collapsible.\n   */\n  FIXED = 'fixed',\n\n  /**\n   * Rail mode.\n   * In this mode, side nav can be collapsed to a narrower width (\"rail\" look) with a toggle button.\n   */\n  RAIL = 'rail',\n\n  /**\n   * Responsive mode.\n   * In this mode, side nav sticks in wider screen, and can be completely collapsed with a toggle button in narrower screen.\n   */\n  RESPONSIVE = 'responsive',\n}\n\n/**\n * The usage purpose of side nav.\n */\nexport enum SIDE_NAV_USAGE_MODE {\n  /**\n   * Regular usage.\n   */\n  REGULAR = '',\n\n  /**\n   * To represent header nav.\n   * In this mode, side nav is hidden when header nav is shown, and side nav is shown then header nav is hidden.\n   * This mode can be used only with `SIDE_NAV_COLLAPSE_MODE.REGULAR`.\n   */\n  HEADER_NAV = 'header-nav',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,IAAY,yBAAL,yBAAA,wBAAA;;;;;CAKL,uBAAA,WAAA;;;;;CAMA,uBAAA,UAAA;;;;;CAMA,uBAAA,gBAAA;;AACF,EAAA,CAAA,CAAA;;;;AAKA,IAAY,sBAAL,yBAAA,qBAAA;;;;CAIL,oBAAA,aAAA;;;;;;CAOA,oBAAA,gBAAA;;AACF,EAAA,CAAA,CAAA"}

package/lib/globals/controllers/floating-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"floating-controller.js","names":[],"sources":["../../../src/globals/controllers/floating-controller.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2024, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ReactiveController, ReactiveElement } from 'lit';\nimport {\n  computePosition,\n  flip,\n  size,\n  offset,\n  arrow,\n  autoUpdate,\n  hide,\n  Placement,\n  type Boundary,\n} from '@floating-ui/dom';\n\ntype FloatingControllerOptions = {\n  target: HTMLElement;\n  trigger: HTMLElement;\n  alignment: string;\n\n  arrowElement?: HTMLElement | undefined;\n  flipArguments?: Parameters<typeof flip>[0];\n  caret?: boolean;\n\n  styleElement?: HTMLElement;\n  matchWidth?: boolean;\n  open: boolean;\n  alignmentAxisOffset?: number;\n  mainAxisOffset?: number;\n  autoAlignBoundary?: Boundary;\n  isTabTip?: boolean;\n};\n\n/**\n * Controller for positioning the menu using Floating UI.\n */\nexport default class FloatingController implements ReactiveController {\n  /**\n   * Host component\n   */\n  private host: ReactiveElement;\n  /**\n   * Floating-ui options to pass to `computePlacement()`\n   */\n  private options!: FloatingControllerOptions;\n  /**\n   * cleanup function to stop auto updates\n   */\n  private cleanup?: () => void;\n\n  /**\n   * register with host component\n   * @param host host component\n   */\n  constructor(host: ReactiveElement) {\n    this.host = host;\n    host.addController(this);\n  }\n\n  async setPlacement(options: FloatingControllerOptions = this.options) {\n    this.options = options;\n    const { trigger, target } = options;\n    this.cleanup?.();\n    this.cleanup = autoUpdate(trigger, target, this.updatePlacement);\n  }\n\n  updatePlacement = (): void => {\n    this.computePlacement();\n  };\n\n  async computePlacement() {\n    const {\n      arrowElement,\n      alignment,\n      caret,\n      trigger,\n      target,\n      styleElement,\n      matchWidth,\n      open,\n      alignmentAxisOffset,\n      mainAxisOffset,\n      autoAlignBoundary,\n      isTabTip,\n      flipArguments,\n    } = this.options;\n\n    const isListBox = target?.role === 'listbox';\n    const isMenu = target?.localName === 'cds-menu';\n\n    const element = styleElement ?? target;\n\n    if (!element) return;\n\n    let shimmedAlign;\n    switch (alignment) {\n      case 'top-left':\n        shimmedAlign = 'top-start';\n        break;\n      case 'top-right':\n        shimmedAlign = 'top-end';\n        break;\n      case 'bottom-left':\n        shimmedAlign = 'bottom-start';\n        break;\n      case 'bottom-right':\n        shimmedAlign = 'bottom-end';\n        break;\n      case 'left-bottom':\n        shimmedAlign = 'left-end';\n        break;\n      case 'left-top':\n        shimmedAlign = 'left-start';\n        break;\n      case 'right-bottom':\n        shimmedAlign = 'right-end';\n        break;\n      case 'right-top':\n        shimmedAlign = 'right-start';\n        break;\n      default:\n        shimmedAlign = alignment;\n        break;\n    }\n    const cs = getComputedStyle(element);\n    const toPx = (val: string) => {\n      const raw = parseFloat(val);\n      return val.trim().endsWith('rem') ? raw * 16 : raw;\n    };\n    const offsetPx = !isTabTip\n      ? (toPx(cs.getPropertyValue('--cds-popover-offset').trim()) ?? 10)\n      : 0;\n\n    const middleware = [\n      offset(\n        !isTabTip\n          ? {\n              alignmentAxis: alignmentAxisOffset,\n              // Allow callers to override default trigger-to-surface spacing.\n              // Fallback remains 4px for non-caret overlays.\n              mainAxis: mainAxisOffset ?? (caret ? offsetPx : 4),\n            }\n          : 0\n      ),\n      flip({\n        fallbackPlacements: isTabTip\n          ? shimmedAlign.includes('bottom')\n            ? ['bottom-start', 'bottom-end', 'top-start', 'top-end']\n            : ['top-start', 'top-end', 'bottom-start', 'bottom-end']\n          : isListBox || isMenu\n            ? ['top', 'bottom']\n            : shimmedAlign.includes('bottom')\n              ? [\n                  'bottom',\n                  'bottom-start',\n                  'bottom-end',\n                  'right',\n                  'right-start',\n                  'right-end',\n                  'left',\n                  'left-start',\n                  'left-end',\n                  'top',\n                  'top-start',\n                  'top-end',\n                ]\n              : [\n                  'top',\n                  'top-start',\n                  'top-end',\n                  'left',\n                  'left-start',\n                  'left-end',\n                  'right',\n                  'right-start',\n                  'right-end',\n                  'bottom',\n                  'bottom-start',\n                  'bottom-end',\n                ],\n\n        fallbackStrategy: 'initialPlacement',\n        fallbackAxisSideDirection: 'start',\n        boundary: autoAlignBoundary,\n        ...flipArguments,\n      }),\n      ...(matchWidth && (shimmedAlign === 'bottom' || shimmedAlign === 'top')\n        ? [\n            size({\n              apply({ rects, elements }) {\n                elements.floating.style.width = `${rects.reference.width}px`;\n              },\n            }),\n          ]\n        : [\n            size({\n              apply({ elements }) {\n                elements.floating.style.removeProperty('width');\n              },\n            }),\n          ]),\n\n      ...(caret && arrowElement\n        ? [arrow({ element: arrowElement, padding: 15 })]\n        : []),\n\n      ...[hide()],\n    ];\n\n    if (open) {\n      const { x, y, placement, middlewareData, strategy } =\n        await computePosition(trigger, element, {\n          strategy: 'fixed',\n          middleware,\n          placement: shimmedAlign as Placement,\n        });\n\n      element.setAttribute('align', placement);\n\n      element.style.left = `${x}px`;\n      element.style.top = `${y}px`;\n      element.style.position = `${strategy}`;\n\n      element.style.visibility = middlewareData.hide?.referenceHidden\n        ? 'hidden'\n        : 'visible';\n\n      if (arrowElement) {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n        // @ts-ignore\n        const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n        const staticSide: any = {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]];\n\n        arrowElement.style.left = arrowX != null ? `${arrowX}px` : '';\n        arrowElement.style.top = arrowY != null ? `${arrowY}px` : '';\n        arrowElement.style.right = '';\n        arrowElement.style.bottom = '';\n        arrowElement.style[staticSide] = `${-arrowElement.offsetWidth / 2}px`;\n      }\n\n      // adding specific case here where the style of the caret/arrow\n      // is dependent on the placement\n      // TODO: remove reference to slug in v12\n      if (\n        this.host.tagName === 'CDS-AI-LABEL' ||\n        this.host.tagName === 'CDS-SLUG'\n      ) {\n        this.host?.setAttribute('alignment', placement);\n      }\n    }\n  }\n\n  hostUpdated(): void {\n    if (!this.host.hasAttribute('open')) {\n      this.cleanup?.();\n      this.cleanup = undefined;\n    }\n  }\n\n  hostDisconnected(): void {\n    this.cleanup?.();\n    this.cleanup = undefined;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"floating-controller.js","names":[],"sources":["../../../src/globals/controllers/floating-controller.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2024, 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ReactiveController, ReactiveElement } from 'lit';\nimport {\n  computePosition,\n  flip,\n  size,\n  offset,\n  arrow,\n  autoUpdate,\n  hide,\n  Placement,\n  type Boundary,\n} from '@floating-ui/dom';\n\ntype FloatingControllerOptions = {\n  target: HTMLElement;\n  trigger: HTMLElement;\n  alignment: string;\n\n  arrowElement?: HTMLElement | undefined;\n  flipArguments?: Parameters<typeof flip>[0];\n  caret?: boolean;\n\n  styleElement?: HTMLElement;\n  matchWidth?: boolean;\n  open: boolean;\n  alignmentAxisOffset?: number;\n  mainAxisOffset?: number;\n  autoAlignBoundary?: Boundary;\n  isTabTip?: boolean;\n};\n\n/**\n * Controller for positioning the menu using Floating UI.\n */\nexport default class FloatingController implements ReactiveController {\n  /**\n   * Host component\n   */\n  private host: ReactiveElement;\n  /**\n   * Floating-ui options to pass to `computePlacement()`\n   */\n  private options!: FloatingControllerOptions;\n  /**\n   * cleanup function to stop auto updates\n   */\n  private cleanup?: () => void;\n\n  /**\n   * register with host component\n   * @param host host component\n   */\n  constructor(host: ReactiveElement) {\n    this.host = host;\n    host.addController(this);\n  }\n\n  async setPlacement(options: FloatingControllerOptions = this.options) {\n    this.options = options;\n    const { trigger, target } = options;\n    this.cleanup?.();\n    this.cleanup = autoUpdate(trigger, target, this.updatePlacement);\n  }\n\n  updatePlacement = (): void => {\n    this.computePlacement();\n  };\n\n  async computePlacement() {\n    const {\n      arrowElement,\n      alignment,\n      caret,\n      trigger,\n      target,\n      styleElement,\n      matchWidth,\n      open,\n      alignmentAxisOffset,\n      mainAxisOffset,\n      autoAlignBoundary,\n      isTabTip,\n      flipArguments,\n    } = this.options;\n\n    const isListBox = target?.role === 'listbox';\n    const isMenu = target?.localName === 'cds-menu';\n\n    const element = styleElement ?? target;\n\n    if (!element) return;\n\n    let shimmedAlign;\n    switch (alignment) {\n      case 'top-left':\n        shimmedAlign = 'top-start';\n        break;\n      case 'top-right':\n        shimmedAlign = 'top-end';\n        break;\n      case 'bottom-left':\n        shimmedAlign = 'bottom-start';\n        break;\n      case 'bottom-right':\n        shimmedAlign = 'bottom-end';\n        break;\n      case 'left-bottom':\n        shimmedAlign = 'left-end';\n        break;\n      case 'left-top':\n        shimmedAlign = 'left-start';\n        break;\n      case 'right-bottom':\n        shimmedAlign = 'right-end';\n        break;\n      case 'right-top':\n        shimmedAlign = 'right-start';\n        break;\n      default:\n        shimmedAlign = alignment;\n        break;\n    }\n    const cs = getComputedStyle(element);\n    const toPx = (val: string) => {\n      const raw = parseFloat(val);\n      return val.trim().endsWith('rem') ? raw * 16 : raw;\n    };\n    const offsetPx = !isTabTip\n      ? (toPx(cs.getPropertyValue('--cds-popover-offset').trim()) ?? 10)\n      : 0;\n\n    const middleware = [\n      offset(\n        !isTabTip\n          ? {\n              alignmentAxis: alignmentAxisOffset,\n              // Allow callers to override default trigger-to-surface spacing.\n              // Fallback remains 4px for non-caret overlays.\n              mainAxis: mainAxisOffset ?? (caret ? offsetPx : 4),\n            }\n          : 0\n      ),\n      flip({\n        fallbackPlacements: isTabTip\n          ? shimmedAlign.includes('bottom')\n            ? ['bottom-start', 'bottom-end', 'top-start', 'top-end']\n            : ['top-start', 'top-end', 'bottom-start', 'bottom-end']\n          : isListBox || isMenu\n            ? ['top', 'bottom']\n            : shimmedAlign.includes('bottom')\n              ? [\n                  'bottom',\n                  'bottom-start',\n                  'bottom-end',\n                  'right',\n                  'right-start',\n                  'right-end',\n                  'left',\n                  'left-start',\n                  'left-end',\n                  'top',\n                  'top-start',\n                  'top-end',\n                ]\n              : [\n                  'top',\n                  'top-start',\n                  'top-end',\n                  'left',\n                  'left-start',\n                  'left-end',\n                  'right',\n                  'right-start',\n                  'right-end',\n                  'bottom',\n                  'bottom-start',\n                  'bottom-end',\n                ],\n\n        fallbackStrategy: 'initialPlacement',\n        fallbackAxisSideDirection: 'start',\n        boundary: autoAlignBoundary,\n        ...flipArguments,\n      }),\n      ...(matchWidth && (shimmedAlign === 'bottom' || shimmedAlign === 'top')\n        ? [\n            size({\n              apply({ rects, elements }) {\n                elements.floating.style.width = `${rects.reference.width}px`;\n              },\n            }),\n          ]\n        : [\n            size({\n              apply({ elements }) {\n                elements.floating.style.removeProperty('width');\n              },\n            }),\n          ]),\n\n      ...(caret && arrowElement\n        ? [arrow({ element: arrowElement, padding: 15 })]\n        : []),\n\n      ...[hide()],\n    ];\n\n    if (open) {\n      const { x, y, placement, middlewareData, strategy } =\n        await computePosition(trigger, element, {\n          strategy: 'fixed',\n          middleware,\n          placement: shimmedAlign as Placement,\n        });\n\n      element.setAttribute('align', placement);\n\n      element.style.left = `${x}px`;\n      element.style.top = `${y}px`;\n      element.style.position = `${strategy}`;\n\n      element.style.visibility = middlewareData.hide?.referenceHidden\n        ? 'hidden'\n        : 'visible';\n\n      if (arrowElement) {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n        // @ts-ignore\n        const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n        const staticSide: any = {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]];\n\n        arrowElement.style.left = arrowX != null ? `${arrowX}px` : '';\n        arrowElement.style.top = arrowY != null ? `${arrowY}px` : '';\n        arrowElement.style.right = '';\n        arrowElement.style.bottom = '';\n        arrowElement.style[staticSide] = `${-arrowElement.offsetWidth / 2}px`;\n      }\n\n      // adding specific case here where the style of the caret/arrow\n      // is dependent on the placement\n      // TODO: remove reference to slug in v12\n      if (\n        this.host.tagName === 'CDS-AI-LABEL' ||\n        this.host.tagName === 'CDS-SLUG'\n      ) {\n        this.host?.setAttribute('alignment', placement);\n      }\n    }\n  }\n\n  hostUpdated(): void {\n    if (!this.host.hasAttribute('open')) {\n      this.cleanup?.();\n      this.cleanup = undefined;\n    }\n  }\n\n  hostDisconnected(): void {\n    this.cleanup?.();\n    this.cleanup = undefined;\n  }\n}\n"],"mappings":"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"}

package/lib/globals/shared-enums.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared-enums.js","names":[],"sources":["../../src/globals/shared-enums.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Color scheme for form elements.\n */\nexport enum FORM_ELEMENT_COLOR_SCHEME {\n  /**\n   * Regular color scheme.\n   */\n  REGULAR = '',\n\n  /**\n   * Light color scheme.\n   */\n  LIGHT = 'light',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,IAAY,4BAAL,yBAAA,2BAAA;;;;AAIL,2BAAA,aAAA;;;;AAKA,2BAAA,WAAA;;KACD"}
+{"version":3,"file":"shared-enums.js","names":[],"sources":["../../src/globals/shared-enums.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Color scheme for form elements.\n */\nexport enum FORM_ELEMENT_COLOR_SCHEME {\n  /**\n   * Regular color scheme.\n   */\n  REGULAR = '',\n\n  /**\n   * Light color scheme.\n   */\n  LIGHT = 'light',\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,IAAY,4BAAL,yBAAA,2BAAA;;;;CAIL,0BAAA,aAAA;;;;CAKA,0BAAA,WAAA;;AACF,EAAA,CAAA,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/web-components",
   "description": "Web components for the Carbon Design System",
-  "version": "2.57.0",
+  "version": "2.58.0",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -66,8 +66,8 @@
   },
   "dependencies": {
     "@carbon/icon-helpers": "10.47.0",
-    "@carbon/icons": "^11.82.0",
-    "@carbon/styles": "^1.109.0",
+    "@carbon/icons": "^11.83.0",
+    "@carbon/styles": "^1.110.0",
     "@carbon/utilities": "^0.17.0",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.10.2",
@@ -77,8 +77,8 @@
     "tslib": "^2.6.3"
   },
   "devDependencies": {
-    "@carbon/layout": "^11.53.0",
-    "@carbon/motion": "^11.46.0",
+    "@carbon/layout": "^11.54.0",
+    "@carbon/motion": "^11.47.0",
     "@juggle/resize-observer": "^3.4.0",
     "@mordech/vite-lit-loader": "^0.40.0",
     "@open-wc/testing": "^4.0.0",
@@ -102,7 +102,7 @@
     "sass": "^1.93.2",
     "storybook": "^10.3.5",
     "storybook-addon-accessibility-checker": "^9.2.0-rc.4",
-    "tsdown": "^0.21.0",
+    "tsdown": "^0.22.0",
     "typescript-config-carbon": "^0.10.0",
     "vite": "^8.0.0",
     "web-component-analyzer": "2.0.0"
@@ -126,5 +126,5 @@
       }
     ]
   },
-  "gitHead": "a4c90a9dc15cc4f0e6a99b3c0001a7a25303b555"
+  "gitHead": "30ca2b932469a5c89da10cb8d1fa82586ed14018"
 }

package/scss/components/accordion/accordion.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2025
+// Copyright IBM Corp. 2019, 2026
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -106,37 +106,39 @@ $css--plex: true !default;
   }
 }
 
-:host([isFlush]) .#{$prefix}--accordion__heading:hover {
-  position: relative;
-  z-index: 1;
+@media (any-hover: hover) {
+  :host([isFlush]) .#{$prefix}--accordion__heading:hover {
+    position: relative;
+    z-index: 1;
 
-  &::before,
-  &::after {
-    position: absolute;
-    display: block;
-    background: $layer-hover;
-    block-size: 1px;
-    content: '';
-    inline-size: 100%;
-    inset-inline-start: 0;
-    transition: background $duration-fast-02 motion(standard, productive);
+    &::before,
+    &::after {
+      position: absolute;
+      display: block;
+      background: $layer-hover;
+      block-size: 1px;
+      content: '';
+      inline-size: 100%;
+      inset-inline-start: 0;
+      transition: background $duration-fast-02 motion(standard, productive);
 
-    @media screen and (prefers-reduced-motion: reduce) {
-      transition: none;
+      @media screen and (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
     }
-  }
 
-  &::before {
-    inset-block-start: -1px;
-  }
+    &::before {
+      inset-block-start: -1px;
+    }
 
-  &::after {
-    inset-block-end: -1px;
-  }
+    &::after {
+      inset-block-end: -1px;
+    }
 
-  &:focus::before,
-  &:focus::after {
-    background: none;
+    &:focus::before,
+    &:focus::after {
+      background: none;
+    }
   }
 }
 
@@ -170,8 +172,10 @@ $css--plex: true !default;
     cursor: default;
     pointer-events: none;
 
-    &:hover::before {
-      background: transparent;
+    @media (any-hover: hover) {
+      &:hover::before {
+        background: transparent;
+      }
     }
   }
 }

package/scss/components/grid/grid-story.scss

@@ -75,6 +75,7 @@
 
     background: $white;
     box-shadow: 0 0 0 1px var(--border-color);
+    color: $gray-100;
 
     min-block-size: 80px;
   }