@carbon/web-components 2.57.0-rc.0 → 2.58.0-rc.0

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-rc.0",
+  "version": "2.58.0-rc.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-rc.0",
+    "@carbon/icons": "^11.83.0-rc.0",
+    "@carbon/styles": "^1.110.0-rc.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-rc.0",
+    "@carbon/motion": "^11.47.0-rc.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": "3aa2f52f41ca1232c1023c59246ba61d06950718"
+  "gitHead": "415bf87b56763dc172a38f310ee5536e70dd792b"
 }

package/scss/components/tabs/tabs.scss

@@ -91,7 +91,8 @@ $inset-transition: inset 110ms motion(standard, productive);
   @extend .#{$prefix}--layout--size-md;
 }
 
-:host(#{$prefix}-tabs[size='lg']) {
+:host(#{$prefix}-tabs[type='contained'][size='lg']),
+:host(#{$prefix}-tabs[vertical][size='lg']) {
   @extend .#{$prefix}--layout--size-lg;
 }
 
@@ -596,6 +597,7 @@ $inset-transition: inset 110ms motion(standard, productive);
 :host(#{$prefix}-tab[vertical]) .#{$prefix}--tabs__nav-link {
   display: flex;
   align-items: center;
+  block-size: 100%;
   border-block-end: 1px solid $border-subtle;
 }
 
@@ -667,6 +669,9 @@ $inset-transition: inset 110ms motion(standard, productive);
 // Internal styles for cds-tabs when inside cds-tabs-vertical
 // These are applied via a CSS custom property / attribute set by the wrapper
 :host(#{$prefix}-tabs[vertical]) {
+  // Default line-clamp for vertical tabs
+  --#{$prefix}-tabs-vertical-line-clamp: 2;
+
   .#{$prefix}--tabs-nav-content-container {
     block-size: 100%;
     overflow-x: hidden;
@@ -690,22 +695,17 @@ $inset-transition: inset 110ms motion(standard, productive);
   .#{$prefix}--tab--overflow-nav-button {
     display: none;
   }
+}
 
-  .#{$prefix}--tabs__nav-item-label {
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    line-height: var(--cds-body-compact-01-line-height);
-    text-overflow: ellipsis;
-    white-space: normal;
-  }
+// Size-specific line-clamp overrides for vertical tabs
+:host(#{$prefix}-tabs[size='sm'][vertical]) {
+  --#{$prefix}-tabs-vertical-line-clamp: 1;
 }
 
 :host(#{$prefix}-tab[vertical]) {
   flex: none;
   background-color: $layer-01;
-  block-size: $spacing-10;
+  block-size: var(--#{$prefix}-layout-size-height, $spacing-10);
   border-inline-end: 1px solid $border-subtle;
   box-shadow: inset 3px 0 0 0 $border-subtle;
   inline-size: 100%;
@@ -714,7 +714,7 @@ $inset-transition: inset 110ms motion(standard, productive);
     display: -webkit-box;
     overflow: hidden;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
+    -webkit-line-clamp: var(--#{$prefix}-tabs-vertical-line-clamp);
     line-height: var(--cds-body-compact-01-line-height);
     text-overflow: ellipsis;
     white-space: normal;