@cloudscape-design/components-themeable 3.0.769 → 3.0.771

package/lib/internal/template/breadcrumb-group/interfaces.d.ts

@@ -51,9 +51,9 @@ export type InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = B
 };
 export interface BreadcrumbItemProps<T extends BreadcrumbGroupProps.Item> {
     item: T;
-    isDisplayed: boolean;
+    isTruncated?: boolean;
     isLast?: boolean;
-    isCompressed?: boolean;
+    isGhost?: boolean;
     onClick?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;
     onFollow?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;
 }
@@ -66,5 +66,6 @@ export interface EllipsisDropdownProps {
     onDropdownItemFollow: CancelableEventHandler<{
         id: string;
     }>;
+    visible?: boolean;
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/breadcrumb-group/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,CACnG,SAAQ,kBAAkB;IAC1B;;;;;;;;;;;OAWG;IACH,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACtE;;;OAGG;IACH,QAAQ,CAAC,EAAE,sBAAsB,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CACxE;AAED,yBAAiB,oBAAoB,CAAC;IACpC,UAAiB,IAAI;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd;IAED,UAAiB,WAAW,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,CAC1F,SAAQ,oBAAoB;QAC5B,IAAI,EAAE,CAAC,CAAC;QACR,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd;CACF;AAED,MAAM,MAAM,4BAA4B,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,IACtG,oBAAoB,CAAC,CAAC,CAAC,GACrB,0BAA0B,GAAG;IAC3B,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C,CAAC;AAEN,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI;IACtE,IAAI,EAAE,CAAC,CAAC;IACR,WAAW,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,sBAAsB,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACtE,QAAQ,CAAC,EAAE,sBAAsB,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CACxE;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IACpD,aAAa,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,mBAAmB,EAAE,sBAAsB,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC5D,oBAAoB,EAAE,sBAAsB,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC9D"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,CACnG,SAAQ,kBAAkB;IAC1B;;;;;;;;;;;OAWG;IACH,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACtE;;;OAGG;IACH,QAAQ,CAAC,EAAE,sBAAsB,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CACxE;AAED,yBAAiB,oBAAoB,CAAC;IACpC,UAAiB,IAAI;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd;IAED,UAAiB,WAAW,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,CAC1F,SAAQ,oBAAoB;QAC5B,IAAI,EAAE,CAAC,CAAC;QACR,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd;CACF;AAED,MAAM,MAAM,4BAA4B,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,GAAG,oBAAoB,CAAC,IAAI,IACtG,oBAAoB,CAAC,CAAC,CAAC,GACrB,0BAA0B,GAAG;IAC3B,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C,CAAC;AAEN,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI;IACtE,IAAI,EAAE,CAAC,CAAC;IACR,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,sBAAsB,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IACtE,QAAQ,CAAC,EAAE,sBAAsB,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CACxE;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IACpD,aAAa,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,mBAAmB,EAAE,sBAAsB,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC5D,oBAAoB,EAAE,sBAAsB,CAAC;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/lib/internal/template/breadcrumb-group/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { LinkItem } from '../button-dropdown/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface BreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>\n  extends BaseComponentProps {\n  /**\n   * An array of breadcrumb items that describes the link hierarchy for this navigation.\n   * Each option has the following properties:\n\n   * * `text` (string) - Specifies the title text of the breadcrumb item.\n   * * `href` (string) - Specifies the URL for the link in the breadcrumb item.\n   * You should specify the link even if you have a click handler for a breadcrumb item\n   * to ensure that valid markup is generated.\n\n   * Note: The last breadcrumb item is automatically considered the current item, and it's\n   * not a link.\n   */\n  items: ReadonlyArray<T>;\n  /**\n   * Provides an `aria-label` to the breadcrumb group that screen readers can read (for accessibility).\n   */\n  ariaLabel?: string;\n\n  /**\n   * Provides an `aria-label` to the ellipsis button that screen readers can read (for accessibility).\n   * @i18n\n   */\n  expandAriaLabel?: string;\n  /**\n   * Called when the user clicks on a breadcrumb item.\n   */\n  onClick?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;\n  /**\n   * Called when the user clicks on a breadcrumb item with the left mouse button\n   * without pressing modifier keys (that is, CTRL, ALT, SHIFT, META).\n   */\n  onFollow?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;\n}\n\nexport namespace BreadcrumbGroupProps {\n  export interface Item {\n    text: string;\n    href: string;\n  }\n\n  export interface ClickDetail<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>\n    extends BaseNavigationDetail {\n    item: T;\n    text: string;\n    href: string;\n  }\n}\n\nexport type InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item> =\n  BreadcrumbGroupProps<T> &\n    InternalBaseComponentProps & {\n      __injectAnalyticsComponentMetadata?: boolean;\n    };\n\nexport interface BreadcrumbItemProps<T extends BreadcrumbGroupProps.Item> {\n  item: T;\n  isDisplayed: boolean;\n  isLast?: boolean;\n  isCompressed?: boolean;\n  onClick?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;\n  onFollow?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;\n}\n\nexport interface EllipsisDropdownProps {\n  ariaLabel?: BreadcrumbGroupProps['expandAriaLabel'];\n  dropdownItems: ReadonlyArray<LinkItem>;\n  onDropdownItemClick: CancelableEventHandler<{ id: string }>;\n  onDropdownItemFollow: CancelableEventHandler<{ id: string }>;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/breadcrumb-group/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { LinkItem } from '../button-dropdown/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface BreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>\n  extends BaseComponentProps {\n  /**\n   * An array of breadcrumb items that describes the link hierarchy for this navigation.\n   * Each option has the following properties:\n\n   * * `text` (string) - Specifies the title text of the breadcrumb item.\n   * * `href` (string) - Specifies the URL for the link in the breadcrumb item.\n   * You should specify the link even if you have a click handler for a breadcrumb item\n   * to ensure that valid markup is generated.\n\n   * Note: The last breadcrumb item is automatically considered the current item, and it's\n   * not a link.\n   */\n  items: ReadonlyArray<T>;\n  /**\n   * Provides an `aria-label` to the breadcrumb group that screen readers can read (for accessibility).\n   */\n  ariaLabel?: string;\n\n  /**\n   * Provides an `aria-label` to the ellipsis button that screen readers can read (for accessibility).\n   * @i18n\n   */\n  expandAriaLabel?: string;\n  /**\n   * Called when the user clicks on a breadcrumb item.\n   */\n  onClick?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;\n  /**\n   * Called when the user clicks on a breadcrumb item with the left mouse button\n   * without pressing modifier keys (that is, CTRL, ALT, SHIFT, META).\n   */\n  onFollow?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;\n}\n\nexport namespace BreadcrumbGroupProps {\n  export interface Item {\n    text: string;\n    href: string;\n  }\n\n  export interface ClickDetail<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item>\n    extends BaseNavigationDetail {\n    item: T;\n    text: string;\n    href: string;\n  }\n}\n\nexport type InternalBreadcrumbGroupProps<T extends BreadcrumbGroupProps.Item = BreadcrumbGroupProps.Item> =\n  BreadcrumbGroupProps<T> &\n    InternalBaseComponentProps & {\n      __injectAnalyticsComponentMetadata?: boolean;\n    };\n\nexport interface BreadcrumbItemProps<T extends BreadcrumbGroupProps.Item> {\n  item: T;\n  isTruncated?: boolean;\n  isLast?: boolean;\n  isGhost?: boolean;\n  onClick?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;\n  onFollow?: CancelableEventHandler<BreadcrumbGroupProps.ClickDetail<T>>;\n}\n\nexport interface EllipsisDropdownProps {\n  ariaLabel?: BreadcrumbGroupProps['expandAriaLabel'];\n  dropdownItems: ReadonlyArray<LinkItem>;\n  onDropdownItemClick: CancelableEventHandler<{ id: string }>;\n  onDropdownItemFollow: CancelableEventHandler<{ id: string }>;\n  visible?: boolean;\n}\n"]}

package/lib/internal/template/breadcrumb-group/item/funnel.d.ts

@@ -3,6 +3,7 @@ interface FunnelBreadcrumbItemProps {
     text: string;
     last: boolean;
     hidden?: boolean;
+    ghost?: boolean;
 }
 export declare const FunnelBreadcrumbItem: React.ForwardRefExoticComponent<FunnelBreadcrumbItemProps & React.RefAttributes<HTMLSpanElement>>;
 export {};

package/lib/internal/template/breadcrumb-group/item/funnel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"funnel.d.ts","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,yBAAyB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,oBAAoB,mGAiBhC,CAAC"}
+{"version":3,"file":"funnel.d.ts","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/funnel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,yBAAyB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,oBAAoB,mGAiBhC,CAAC"}

package/lib/internal/template/breadcrumb-group/item/funnel.js

@@ -5,11 +5,11 @@ import clsx from 'clsx';
 import { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_FUNNEL_NAME } from '../../internal/analytics/selectors';
 import analyticsSelectors from '../analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
-export const FunnelBreadcrumbItem = React.forwardRef(({ text, hidden, last }, ref) => {
+export const FunnelBreadcrumbItem = React.forwardRef(({ text, hidden, last, ghost }, ref) => {
     const funnelAttributes = {};
-    if (last) {
+    if (last && !ghost) {
         funnelAttributes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;
     }
-    return (React.createElement("span", Object.assign({}, funnelAttributes, { className: clsx(styles.text, hidden && styles['text-hidden'], analyticsSelectors['breadcrumb-item']), ref: ref }), text));
+    return (React.createElement("span", Object.assign({}, funnelAttributes, { className: clsx(styles.text, hidden && styles['text-hidden'], !ghost && analyticsSelectors['breadcrumb-item']), ref: ref }), text));
 });
 //# sourceMappingURL=funnel.js.map

package/lib/internal/template/breadcrumb-group/item/funnel.js.map

@@ -1 +1 @@
-{"version":3,"file":"funnel.js","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/funnel.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAElG,OAAO,kBAAkB,MAAM,qCAAqC,CAAC;AACrE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAQrC,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,CAClD,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9B,MAAM,gBAAgB,GAA2B,EAAE,CAAC;IACpD,IAAI,IAAI,EAAE;QACR,gBAAgB,CAAC,oBAAoB,CAAC,GAAG,sBAAsB,CAAC;KACjE;IAED,OAAO,CACL,8CACM,gBAAgB,IACpB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,EAAE,kBAAkB,CAAC,iBAAiB,CAAC,CAAC,EACpG,GAAG,EAAE,GAAG,KAEP,IAAI,CACA,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_FUNNEL_NAME } from '../../internal/analytics/selectors';\n\nimport analyticsSelectors from '../analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface FunnelBreadcrumbItemProps {\n  text: string;\n  last: boolean;\n  hidden?: boolean;\n}\n\nexport const FunnelBreadcrumbItem = React.forwardRef<HTMLSpanElement, FunnelBreadcrumbItemProps>(\n  ({ text, hidden, last }, ref) => {\n    const funnelAttributes: Record<string, string> = {};\n    if (last) {\n      funnelAttributes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;\n    }\n\n    return (\n      <span\n        {...funnelAttributes}\n        className={clsx(styles.text, hidden && styles['text-hidden'], analyticsSelectors['breadcrumb-item'])}\n        ref={ref}\n      >\n        {text}\n      </span>\n    );\n  }\n);\n"]}
+{"version":3,"file":"funnel.js","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/funnel.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAElG,OAAO,kBAAkB,MAAM,qCAAqC,CAAC;AACrE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,CAClD,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACrC,MAAM,gBAAgB,GAA2B,EAAE,CAAC;IACpD,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE;QAClB,gBAAgB,CAAC,oBAAoB,CAAC,GAAG,sBAAsB,CAAC;KACjE;IAED,OAAO,CACL,8CACM,gBAAgB,IACpB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,IAAI,kBAAkB,CAAC,iBAAiB,CAAC,CAAC,EAC9G,GAAG,EAAE,GAAG,KAEP,IAAI,CACA,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_FUNNEL_NAME } from '../../internal/analytics/selectors';\n\nimport analyticsSelectors from '../analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ninterface FunnelBreadcrumbItemProps {\n  text: string;\n  last: boolean;\n  hidden?: boolean;\n  ghost?: boolean;\n}\n\nexport const FunnelBreadcrumbItem = React.forwardRef<HTMLSpanElement, FunnelBreadcrumbItemProps>(\n  ({ text, hidden, last, ghost }, ref) => {\n    const funnelAttributes: Record<string, string> = {};\n    if (last && !ghost) {\n      funnelAttributes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;\n    }\n\n    return (\n      <span\n        {...funnelAttributes}\n        className={clsx(styles.text, hidden && styles['text-hidden'], !ghost && analyticsSelectors['breadcrumb-item'])}\n        ref={ref}\n      >\n        {text}\n      </span>\n    );\n  }\n);\n"]}

package/lib/internal/template/breadcrumb-group/item/item.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { BreadcrumbGroupProps, BreadcrumbItemProps } from '../interfaces';
-export declare function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({ item, onClick, onFollow, isDisplayed, isLast, isCompressed, }: BreadcrumbItemProps<T>): JSX.Element;
+export declare function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({ item, onClick, onFollow, isLast, isGhost, isTruncated, }: BreadcrumbItemProps<T>): JSX.Element;
 //# sourceMappingURL=item.d.ts.map

package/lib/internal/template/breadcrumb-group/item/item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAwF1E,wBAAgB,cAAc,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,EAAE,EAClE,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,WAAW,EACX,MAAc,EACd,YAAoB,GACrB,EAAE,mBAAmB,CAAC,CAAC,CAAC,eAsCxB"}
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAkE1E,wBAAgB,cAAc,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,EAAE,EAClE,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,MAAc,EACd,OAAe,EACf,WAAmB,GACpB,EAAE,mBAAmB,CAAC,CAAC,CAAC,eAiCxB"}

package/lib/internal/template/breadcrumb-group/item/item.js

@@ -5,55 +5,36 @@ import React, { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import InternalIcon from '../../icon/internal';
 import Tooltip from '../../internal/components/tooltip';
+import { registerTooltip } from '../../internal/components/tooltip/registry';
 import { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';
 import { getEventDetail } from '../utils';
 import { FunnelBreadcrumbItem } from './funnel';
 import styles from './styles.css.js';
-const BreadcrumbItemWithPopover = (_a) => {
-    var { item, isLast, anchorAttributes } = _a, itemAttributes = __rest(_a, ["item", "isLast", "anchorAttributes"]);
+const BreadcrumbItemWithPopover = ({ item, isLast, anchorAttributes, }) => {
     const [showPopover, setShowPopover] = useState(false);
     const textRef = useRef(null);
-    const virtualTextRef = useRef(null);
-    const isTruncated = (textRef, virtualTextRef) => {
-        if (!textRef || !virtualTextRef || !textRef.current || !virtualTextRef.current) {
-            return false;
-        }
-        const virtualTextWidth = virtualTextRef.current.getBoundingClientRect().width;
-        const textWidth = textRef.current.getBoundingClientRect().width;
-        if (virtualTextWidth > textWidth) {
-            return true;
-        }
-        return false;
-    };
-    const popoverContent = React.createElement(Tooltip, { trackRef: textRef, value: item.text });
+    const popoverContent = React.createElement(Tooltip, { trackRef: textRef, value: item.text, size: "medium" });
     useEffect(() => {
-        const onKeyDown = (event) => {
-            if (event.key === 'Escape') {
-                setShowPopover(false);
-            }
-        };
         if (showPopover) {
-            document.addEventListener('keydown', onKeyDown);
+            return registerTooltip(() => {
+                setShowPopover(false);
+            });
         }
-        return () => {
-            document.removeEventListener('keydown', onKeyDown);
-        };
     }, [showPopover]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Item, Object.assign({ isLast: isLast }, itemAttributes, { onFocus: () => {
-                isTruncated(textRef, virtualTextRef) && setShowPopover(true);
+        React.createElement(Item, Object.assign({ isLast: isLast, onFocus: () => {
+                setShowPopover(true);
             }, onBlur: () => setShowPopover(false), onMouseEnter: () => {
-                isTruncated(textRef, virtualTextRef) && setShowPopover(true);
-            }, onMouseLeave: () => setShowPopover(false), anchorAttributes: anchorAttributes }),
-            React.createElement(FunnelBreadcrumbItem, { ref: textRef, text: item.text, last: isLast }),
-            React.createElement("span", { className: styles['virtual-item'], ref: virtualTextRef }, item.text)),
+                setShowPopover(true);
+            }, onMouseLeave: () => setShowPopover(false), anchorAttributes: anchorAttributes }, (isLast ? { tabIndex: 0 } : {})),
+            React.createElement(FunnelBreadcrumbItem, { ref: textRef, text: item.text, last: isLast })),
         showPopover && popoverContent));
 };
 const Item = (_a) => {
     var { anchorAttributes, children, isLast } = _a, itemAttributes = __rest(_a, ["anchorAttributes", "children", "isLast"]);
-    return isLast ? (React.createElement("span", Object.assign({}, itemAttributes), children)) : (React.createElement("a", Object.assign({}, itemAttributes, anchorAttributes), children));
+    return isLast ? (React.createElement("span", Object.assign({ className: styles.anchor }, itemAttributes), children)) : (React.createElement("a", Object.assign({ className: styles.anchor }, itemAttributes, anchorAttributes), children));
 };
-export function BreadcrumbItem({ item, onClick, onFollow, isDisplayed, isLast = false, isCompressed = false, }) {
+export function BreadcrumbItem({ item, onClick, onFollow, isLast = false, isGhost = false, isTruncated = false, }) {
     const preventDefault = (event) => event.preventDefault();
     const onClickHandler = (event) => {
         if (isPlainLeftClick(event)) {
@@ -61,16 +42,16 @@ export function BreadcrumbItem({ item, onClick, onFollow, isDisplayed, isLast =
         }
         fireCancelableEvent(onClick, getEventDetail(item), event);
     };
-    const itemAttributes = {
-        className: clsx(styles.anchor, { [styles.compressed]: isCompressed }),
-    };
     const anchorAttributes = {
         href: item.href || '#',
         onClick: isLast ? preventDefault : onClickHandler,
     };
-    return (React.createElement("div", { className: clsx(styles.breadcrumb, isLast && styles.last) },
-        isDisplayed && isCompressed ? (React.createElement(BreadcrumbItemWithPopover, Object.assign({ item: item, isLast: isLast, anchorAttributes: anchorAttributes }, itemAttributes))) : (React.createElement(Item, Object.assign({ isLast: isLast, anchorAttributes: anchorAttributes }, itemAttributes),
-            React.createElement(FunnelBreadcrumbItem, { text: item.text, last: isLast }))),
+    if (isGhost) {
+        anchorAttributes.tabIndex = -1;
+    }
+    return (React.createElement("div", { className: clsx(!isGhost && styles.breadcrumb, isGhost && styles['ghost-breadcrumb'], isLast && styles.last) },
+        isTruncated && !isGhost ? (React.createElement(BreadcrumbItemWithPopover, { item: item, isLast: isLast, anchorAttributes: anchorAttributes })) : (React.createElement(Item, { isLast: isLast, anchorAttributes: anchorAttributes },
+            React.createElement(FunnelBreadcrumbItem, { text: item.text, last: isLast, ghost: isGhost }))),
         !isLast ? (React.createElement("span", { className: styles.icon },
             React.createElement(InternalIcon, { name: "angle-right" }))) : null));
 }

package/lib/internal/template/breadcrumb-group/item/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/item.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, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport InternalIcon from '../../icon/internal';\nimport Tooltip from '../../internal/components/tooltip';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport { BreadcrumbGroupProps, BreadcrumbItemProps } from '../interfaces';\nimport { getEventDetail } from '../utils';\nimport { FunnelBreadcrumbItem } from './funnel';\n\nimport styles from './styles.css.js';\n\ntype BreadcrumbItemWithPopoverProps<T extends BreadcrumbGroupProps.Item> = React.HTMLAttributes<HTMLElement> & {\n  item: T;\n  isLast: boolean;\n  anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n};\n\nconst BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({\n  item,\n  isLast,\n  anchorAttributes,\n  ...itemAttributes\n}: BreadcrumbItemWithPopoverProps<T>) => {\n  const [showPopover, setShowPopover] = useState(false);\n  const textRef = useRef<HTMLElement>(null);\n  const virtualTextRef = useRef<HTMLElement>(null);\n\n  const isTruncated = (textRef: React.RefObject<HTMLElement>, virtualTextRef: React.RefObject<HTMLElement>) => {\n    if (!textRef || !virtualTextRef || !textRef.current || !virtualTextRef.current) {\n      return false;\n    }\n    const virtualTextWidth = virtualTextRef.current.getBoundingClientRect().width;\n    const textWidth = textRef.current.getBoundingClientRect().width;\n    if (virtualTextWidth > textWidth) {\n      return true;\n    }\n    return false;\n  };\n\n  const popoverContent = <Tooltip trackRef={textRef} value={item.text} />;\n\n  useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setShowPopover(false);\n      }\n    };\n    if (showPopover) {\n      document.addEventListener('keydown', onKeyDown);\n    }\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n    };\n  }, [showPopover]);\n\n  return (\n    <>\n      <Item\n        isLast={isLast}\n        {...itemAttributes}\n        onFocus={() => {\n          isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n        }}\n        onBlur={() => setShowPopover(false)}\n        onMouseEnter={() => {\n          isTruncated(textRef, virtualTextRef) && setShowPopover(true);\n        }}\n        onMouseLeave={() => setShowPopover(false)}\n        anchorAttributes={anchorAttributes}\n      >\n        <FunnelBreadcrumbItem ref={textRef} text={item.text} last={isLast} />\n        <span className={styles['virtual-item']} ref={virtualTextRef}>\n          {item.text}\n        </span>\n      </Item>\n      {showPopover && popoverContent}\n    </>\n  );\n};\n\ntype ItemProps = React.HTMLAttributes<HTMLElement> & {\n  anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n  isLast: boolean;\n};\nconst Item = ({ anchorAttributes, children, isLast, ...itemAttributes }: ItemProps) =>\n  isLast ? (\n    <span {...itemAttributes}>{children}</span>\n  ) : (\n    <a {...itemAttributes} {...anchorAttributes}>\n      {children}\n    </a>\n  );\n\nexport function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({\n  item,\n  onClick,\n  onFollow,\n  isDisplayed,\n  isLast = false,\n  isCompressed = false,\n}: BreadcrumbItemProps<T>) {\n  const preventDefault = (event: React.MouseEvent) => event.preventDefault();\n  const onClickHandler = (event: React.MouseEvent) => {\n    if (isPlainLeftClick(event)) {\n      fireCancelableEvent(onFollow, getEventDetail(item), event);\n    }\n    fireCancelableEvent(onClick, getEventDetail(item), event);\n  };\n\n  const itemAttributes: React.HTMLAttributes<HTMLElement> = {\n    className: clsx(styles.anchor, { [styles.compressed]: isCompressed }),\n  };\n  const anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement> = {\n    href: item.href || '#',\n    onClick: isLast ? preventDefault : onClickHandler,\n  };\n\n  return (\n    <div className={clsx(styles.breadcrumb, isLast && styles.last)}>\n      {isDisplayed && isCompressed ? (\n        <BreadcrumbItemWithPopover\n          item={item}\n          isLast={isLast}\n          anchorAttributes={anchorAttributes}\n          {...itemAttributes}\n        />\n      ) : (\n        <Item isLast={isLast} anchorAttributes={anchorAttributes} {...itemAttributes}>\n          <FunnelBreadcrumbItem text={item.text} last={isLast} />\n        </Item>\n      )}\n      {!isLast ? (\n        <span className={styles.icon}>\n          <InternalIcon name=\"angle-right\" />\n        </span>\n      ) : null}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/item.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, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport InternalIcon from '../../icon/internal';\nimport Tooltip from '../../internal/components/tooltip';\nimport { registerTooltip } from '../../internal/components/tooltip/registry';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport { BreadcrumbGroupProps, BreadcrumbItemProps } from '../interfaces';\nimport { getEventDetail } from '../utils';\nimport { FunnelBreadcrumbItem } from './funnel';\n\nimport styles from './styles.css.js';\n\ninterface BreadcrumbItemWithPopoverProps<T extends BreadcrumbGroupProps.Item> {\n  item: T;\n  isLast: boolean;\n  anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n}\n\nconst BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({\n  item,\n  isLast,\n  anchorAttributes,\n}: BreadcrumbItemWithPopoverProps<T>) => {\n  const [showPopover, setShowPopover] = useState(false);\n  const textRef = useRef<HTMLElement>(null);\n  const popoverContent = <Tooltip trackRef={textRef} value={item.text} size=\"medium\" />;\n\n  useEffect(() => {\n    if (showPopover) {\n      return registerTooltip(() => {\n        setShowPopover(false);\n      });\n    }\n  }, [showPopover]);\n\n  return (\n    <>\n      <Item\n        isLast={isLast}\n        onFocus={() => {\n          setShowPopover(true);\n        }}\n        onBlur={() => setShowPopover(false)}\n        onMouseEnter={() => {\n          setShowPopover(true);\n        }}\n        onMouseLeave={() => setShowPopover(false)}\n        anchorAttributes={anchorAttributes}\n        {...(isLast ? { tabIndex: 0 } : {})}\n      >\n        <FunnelBreadcrumbItem ref={textRef} text={item.text} last={isLast} />\n      </Item>\n      {showPopover && popoverContent}\n    </>\n  );\n};\n\ntype ItemProps = React.HTMLAttributes<HTMLElement> & {\n  anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;\n  isLast: boolean;\n};\nconst Item = ({ anchorAttributes, children, isLast, ...itemAttributes }: ItemProps) =>\n  isLast ? (\n    <span className={styles.anchor} {...itemAttributes}>\n      {children}\n    </span>\n  ) : (\n    <a className={styles.anchor} {...itemAttributes} {...anchorAttributes}>\n      {children}\n    </a>\n  );\n\nexport function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({\n  item,\n  onClick,\n  onFollow,\n  isLast = false,\n  isGhost = false,\n  isTruncated = false,\n}: BreadcrumbItemProps<T>) {\n  const preventDefault = (event: React.MouseEvent) => event.preventDefault();\n  const onClickHandler = (event: React.MouseEvent) => {\n    if (isPlainLeftClick(event)) {\n      fireCancelableEvent(onFollow, getEventDetail(item), event);\n    }\n    fireCancelableEvent(onClick, getEventDetail(item), event);\n  };\n\n  const anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement> = {\n    href: item.href || '#',\n    onClick: isLast ? preventDefault : onClickHandler,\n  };\n  if (isGhost) {\n    anchorAttributes.tabIndex = -1;\n  }\n\n  return (\n    <div className={clsx(!isGhost && styles.breadcrumb, isGhost && styles['ghost-breadcrumb'], isLast && styles.last)}>\n      {isTruncated && !isGhost ? (\n        <BreadcrumbItemWithPopover item={item} isLast={isLast} anchorAttributes={anchorAttributes} />\n      ) : (\n        <Item isLast={isLast} anchorAttributes={anchorAttributes}>\n          <FunnelBreadcrumbItem text={item.text} last={isLast} ghost={isGhost} />\n        </Item>\n      )}\n      {!isLast ? (\n        <span className={styles.icon}>\n          <InternalIcon name=\"angle-right\" />\n        </span>\n      ) : null}\n    </div>\n  );\n}\n"]}

package/lib/internal/template/breadcrumb-group/item/styles.css.js

@@ -1,14 +1,13 @@
 
     import './styles.scoped.css';
     export default {
-  "link": "awsui_link_1kosq_3tu5n_141",
-  "breadcrumb": "awsui_breadcrumb_1kosq_3tu5n_145",
-  "icon": "awsui_icon_1kosq_3tu5n_148",
-  "anchor": "awsui_anchor_1kosq_3tu5n_153",
-  "last": "awsui_last_1kosq_3tu5n_199",
-  "compressed": "awsui_compressed_1kosq_3tu5n_209",
-  "text": "awsui_text_1kosq_3tu5n_213",
-  "virtual-item": "awsui_virtual-item_1kosq_3tu5n_220",
-  "text-hidden": "awsui_text-hidden_1kosq_3tu5n_227"
+  "link": "awsui_link_1kosq_mcqkk_141",
+  "breadcrumb": "awsui_breadcrumb_1kosq_mcqkk_145",
+  "ghost-breadcrumb": "awsui_ghost-breadcrumb_1kosq_mcqkk_146",
+  "icon": "awsui_icon_1kosq_mcqkk_149",
+  "anchor": "awsui_anchor_1kosq_mcqkk_155",
+  "text": "awsui_text_1kosq_mcqkk_202",
+  "last": "awsui_last_1kosq_mcqkk_221",
+  "text-hidden": "awsui_text-hidden_1kosq_mcqkk_233"
 };
   

package/lib/internal/template/breadcrumb-group/item/styles.scoped.css

@@ -136,21 +136,28 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* Style used for links in slots/components that are text heavy, to help links stand out among 
+/* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_link_1kosq_3tu5n_141:not(#\9):after {
+.awsui_link_1kosq_mcqkk_141:not(#\9):after {
   display: none;
 }
 
-.awsui_breadcrumb_1kosq_3tu5n_145:not(#\9) {
+.awsui_breadcrumb_1kosq_mcqkk_145:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_mcqkk_146:not(#\9) {
   display: flex;
 }
-.awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_icon_1kosq_3tu5n_148:not(#\9) {
+.awsui_breadcrumb_1kosq_mcqkk_145 > .awsui_icon_1kosq_mcqkk_149:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_mcqkk_146 > .awsui_icon_1kosq_mcqkk_149:not(#\9) {
   margin-block: 0;
   margin-inline: var(--space-xs-xf5ch3, 8px);
   color: var(--color-text-breadcrumb-icon-egad48, #687078);
 }
-.awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9) {
+.awsui_breadcrumb_1kosq_mcqkk_145 > .awsui_anchor_1kosq_mcqkk_155:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_mcqkk_146 > .awsui_anchor_1kosq_mcqkk_155:not(#\9) {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-underline-offset: 0.25em;
+  text-decoration-thickness: 1px;
   color: var(--color-text-link-default-hop3gv, #0073bb);
   font-weight: inherit;
   letter-spacing: normal;
@@ -160,34 +167,44 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-property: color, text-decoration;
   transition-property: color, text-decoration, -webkit-text-decoration;
   transition-duration: var(--motion-duration-refresh-only-medium-i6gkfs, 0ms);
-  text-underline-offset: 0.25em;
-  text-decoration-thickness: 1px;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9) {
+  .awsui_breadcrumb_1kosq_mcqkk_145 > .awsui_anchor_1kosq_mcqkk_155:not(#\9),
+  .awsui_ghost-breadcrumb_1kosq_mcqkk_146 > .awsui_anchor_1kosq_mcqkk_155:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9), .awsui-mode-entering .awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9) {
+.awsui-motion-disabled .awsui_breadcrumb_1kosq_mcqkk_145 > .awsui_anchor_1kosq_mcqkk_155:not(#\9), .awsui-mode-entering .awsui_breadcrumb_1kosq_mcqkk_145 > .awsui_anchor_1kosq_mcqkk_155:not(#\9), .awsui-motion-disabled .awsui_ghost-breadcrumb_1kosq_mcqkk_146 > .awsui_anchor_1kosq_mcqkk_155:not(#\9), .awsui-mode-entering .awsui_ghost-breadcrumb_1kosq_mcqkk_146 > .awsui_anchor_1kosq_mcqkk_155:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9):hover {
+.awsui_breadcrumb_1kosq_mcqkk_145 > .awsui_anchor_1kosq_mcqkk_155:not(#\9):hover,
+.awsui_ghost-breadcrumb_1kosq_mcqkk_146 > .awsui_anchor_1kosq_mcqkk_155:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-link-hover-8s5z9d, #0a4a74);
 }
-.awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9):focus {
+.awsui_breadcrumb_1kosq_mcqkk_145 > .awsui_anchor_1kosq_mcqkk_155:not(#\9):focus,
+.awsui_ghost-breadcrumb_1kosq_mcqkk_146 > .awsui_anchor_1kosq_mcqkk_155:not(#\9):focus {
   outline: none;
 }
-.awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9):active {
+.awsui_breadcrumb_1kosq_mcqkk_145 > .awsui_anchor_1kosq_mcqkk_155:not(#\9):active,
+.awsui_ghost-breadcrumb_1kosq_mcqkk_146 > .awsui_anchor_1kosq_mcqkk_155:not(#\9):active {
   color: var(--color-text-link-hover-8s5z9d, #0a4a74);
 }
-.awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9):active, .awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9):focus, .awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9):hover {
+.awsui_breadcrumb_1kosq_mcqkk_145 > .awsui_anchor_1kosq_mcqkk_155:not(#\9):active, .awsui_breadcrumb_1kosq_mcqkk_145 > .awsui_anchor_1kosq_mcqkk_155:not(#\9):focus, .awsui_breadcrumb_1kosq_mcqkk_145 > .awsui_anchor_1kosq_mcqkk_155:not(#\9):hover, .awsui_ghost-breadcrumb_1kosq_mcqkk_146 > .awsui_anchor_1kosq_mcqkk_155:not(#\9):active, .awsui_ghost-breadcrumb_1kosq_mcqkk_146 > .awsui_anchor_1kosq_mcqkk_155:not(#\9):focus, .awsui_ghost-breadcrumb_1kosq_mcqkk_146 > .awsui_anchor_1kosq_mcqkk_155:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
-body[data-awsui-focus-visible=true] .awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_anchor_1kosq_3tu5n_153:not(#\9):focus {
+.awsui_breadcrumb_1kosq_mcqkk_145 > .awsui_anchor_1kosq_mcqkk_155 > .awsui_text_1kosq_mcqkk_202:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_mcqkk_146 > .awsui_anchor_1kosq_mcqkk_155 > .awsui_text_1kosq_mcqkk_202:not(#\9) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+body[data-awsui-focus-visible=true] .awsui_breadcrumb_1kosq_mcqkk_145 > .awsui_anchor_1kosq_mcqkk_155:not(#\9):focus,
+body[data-awsui-focus-visible=true] .awsui_ghost-breadcrumb_1kosq_mcqkk_146 > .awsui_anchor_1kosq_mcqkk_155:not(#\9):focus {
   outline: thin dotted;
   outline: var(--border-link-focus-ring-outline-gygm43, 5px auto Highlight);
   outline-offset: 2px;
@@ -198,34 +215,18 @@ body[data-awsui-focus-visible=true] .awsui_breadcrumb_1kosq_3tu5n_145 > .awsui_a
   border-end-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-efbp5h, 0px) var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_breadcrumb_1kosq_3tu5n_145.awsui_last_1kosq_3tu5n_199 > .awsui_icon_1kosq_3tu5n_148:not(#\9) {
+.awsui_breadcrumb_1kosq_mcqkk_145.awsui_last_1kosq_mcqkk_221 > .awsui_icon_1kosq_mcqkk_149:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_mcqkk_146.awsui_last_1kosq_mcqkk_221 > .awsui_icon_1kosq_mcqkk_149:not(#\9) {
   display: none;
 }
-.awsui_breadcrumb_1kosq_3tu5n_145.awsui_last_1kosq_3tu5n_199 > .awsui_anchor_1kosq_3tu5n_153:not(#\9) {
+.awsui_breadcrumb_1kosq_mcqkk_145.awsui_last_1kosq_mcqkk_221 > .awsui_anchor_1kosq_mcqkk_155:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_mcqkk_146.awsui_last_1kosq_mcqkk_221 > .awsui_anchor_1kosq_mcqkk_155:not(#\9) {
   color: var(--color-text-breadcrumb-current-pm5uhh, #687078);
   font-weight: 700;
   text-decoration: none;
   cursor: default;
 }
 
-.awsui_compressed_1kosq_3tu5n_209:not(#\9) {
-  min-inline-size: 0;
-  overflow: hidden;
-}
-.awsui_compressed_1kosq_3tu5n_209 > .awsui_text_1kosq_3tu5n_213:not(#\9) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-}
-
-.awsui_virtual-item_1kosq_3tu5n_220:not(#\9) {
-  position: absolute !important;
-  inset-block-start: -9999px !important;
-  inset-inline-start: -9999px !important;
-  visibility: hidden;
-}
-
-.awsui_text-hidden_1kosq_3tu5n_227:not(#\9) {
+.awsui_text-hidden_1kosq_mcqkk_233:not(#\9) {
   display: none;
 }

package/lib/internal/template/breadcrumb-group/item/styles.selectors.js

@@ -2,14 +2,13 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "link": "awsui_link_1kosq_3tu5n_141",
-  "breadcrumb": "awsui_breadcrumb_1kosq_3tu5n_145",
-  "icon": "awsui_icon_1kosq_3tu5n_148",
-  "anchor": "awsui_anchor_1kosq_3tu5n_153",
-  "last": "awsui_last_1kosq_3tu5n_199",
-  "compressed": "awsui_compressed_1kosq_3tu5n_209",
-  "text": "awsui_text_1kosq_3tu5n_213",
-  "virtual-item": "awsui_virtual-item_1kosq_3tu5n_220",
-  "text-hidden": "awsui_text-hidden_1kosq_3tu5n_227"
+  "link": "awsui_link_1kosq_mcqkk_141",
+  "breadcrumb": "awsui_breadcrumb_1kosq_mcqkk_145",
+  "ghost-breadcrumb": "awsui_ghost-breadcrumb_1kosq_mcqkk_146",
+  "icon": "awsui_icon_1kosq_mcqkk_149",
+  "anchor": "awsui_anchor_1kosq_mcqkk_155",
+  "text": "awsui_text_1kosq_mcqkk_202",
+  "last": "awsui_last_1kosq_mcqkk_221",
+  "text-hidden": "awsui_text-hidden_1kosq_mcqkk_233"
 };
   

package/lib/internal/template/breadcrumb-group/styles.css.js

@@ -1,12 +1,13 @@
 
     import './styles.scoped.css';
     export default {
-  "breadcrumb-group": "awsui_breadcrumb-group_d19fg_11fhg_141",
-  "item": "awsui_item_d19fg_11fhg_179",
-  "breadcrumb-group-list": "awsui_breadcrumb-group-list_d19fg_11fhg_214",
-  "ellipsis": "awsui_ellipsis_d19fg_11fhg_226",
-  "icon": "awsui_icon_d19fg_11fhg_236",
-  "mobile": "awsui_mobile_d19fg_11fhg_241",
-  "mobile-short": "awsui_mobile-short_d19fg_11fhg_254"
+  "breadcrumb-group": "awsui_breadcrumb-group_d19fg_6f9m9_141",
+  "breadcrumb-group-list": "awsui_breadcrumb-group-list_d19fg_6f9m9_179",
+  "ghost": "awsui_ghost_d19fg_6f9m9_190",
+  "item": "awsui_item_d19fg_6f9m9_195",
+  "ellipsis": "awsui_ellipsis_d19fg_6f9m9_196",
+  "hide": "awsui_hide_d19fg_6f9m9_203",
+  "visible": "awsui_visible_d19fg_6f9m9_209",
+  "icon": "awsui_icon_d19fg_6f9m9_213"
 };
   

package/lib/internal/template/breadcrumb-group/styles.scoped.css

@@ -136,9 +136,9 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/* Style used for links in slots/components that are text heavy, to help links stand out among 
+/* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_breadcrumb-group_d19fg_11fhg_141:not(#\9) {
+.awsui_breadcrumb-group_d19fg_6f9m9_141:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -177,43 +177,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: var(--space-xxs-9rrxti, 4px);
   padding-inline: 0;
 }
-.awsui_breadcrumb-group_d19fg_11fhg_141 > .awsui_item_d19fg_11fhg_179:not(#\9) {
-  border-collapse: separate;
-  border-spacing: 0;
-  box-sizing: border-box;
-  caption-side: top;
-  cursor: auto;
-  direction: inherit;
-  empty-cells: show;
-  font-family: serif;
-  font-size: medium;
-  font-style: normal;
-  font-variant: normal;
-  font-weight: 400;
-  font-stretch: normal;
-  line-height: normal;
-  -webkit-hyphens: none;
-          hyphens: none;
-  letter-spacing: normal;
-  list-style: disc outside none;
-  tab-size: 8;
-  text-align: start;
-  text-indent: 0;
-  text-shadow: none;
-  text-transform: none;
-  visibility: visible;
-  white-space: normal;
-  word-spacing: normal;
-  font-size: var(--font-size-body-m-pa3mqb, 14px);
-  line-height: var(--line-height-body-m-2zx78l, 22px);
-  color: var(--color-text-body-default-ffdwgg, #16191f);
-  font-weight: 400;
-  font-family: var(--font-family-base-0nmw8v, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
-  display: inline;
-}
-.awsui_breadcrumb-group_d19fg_11fhg_141 > .awsui_breadcrumb-group-list_d19fg_11fhg_214:not(#\9) {
+.awsui_breadcrumb-group_d19fg_6f9m9_141 > .awsui_breadcrumb-group-list_d19fg_6f9m9_179:not(#\9) {
   display: flex;
   align-items: center;
   padding-block: 0;
@@ -222,37 +186,33 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline: 0;
   list-style: none;
   inline-size: 100%;
+  flex-wrap: nowrap;
+}
+.awsui_breadcrumb-group_d19fg_6f9m9_141 > .awsui_breadcrumb-group-list_d19fg_6f9m9_179.awsui_ghost_d19fg_6f9m9_190:not(#\9) {
   flex-wrap: wrap;
+  position: absolute;
+  inset-inline-start: -9000px;
 }
-.awsui_breadcrumb-group_d19fg_11fhg_141 > .awsui_breadcrumb-group-list_d19fg_11fhg_214 > .awsui_item_d19fg_11fhg_179:not(#\9),
-.awsui_breadcrumb-group_d19fg_11fhg_141 > .awsui_breadcrumb-group-list_d19fg_11fhg_214 > .awsui_ellipsis_d19fg_11fhg_226:not(#\9) {
+.awsui_breadcrumb-group_d19fg_6f9m9_141 > .awsui_breadcrumb-group-list_d19fg_6f9m9_179 > .awsui_item_d19fg_6f9m9_195:not(#\9),
+.awsui_breadcrumb-group_d19fg_6f9m9_141 > .awsui_breadcrumb-group-list_d19fg_6f9m9_179 > .awsui_ellipsis_d19fg_6f9m9_196:not(#\9) {
   display: inline-block;
   padding-block: 0;
   padding-inline: 0;
   margin-block: 0;
   margin-inline: 0;
 }
-.awsui_breadcrumb-group_d19fg_11fhg_141 > .awsui_breadcrumb-group-list_d19fg_11fhg_214 > .awsui_ellipsis_d19fg_11fhg_226:not(#\9) {
+.awsui_breadcrumb-group_d19fg_6f9m9_141 > .awsui_breadcrumb-group-list_d19fg_6f9m9_179 > .awsui_item_d19fg_6f9m9_195.awsui_hide_d19fg_6f9m9_203:not(#\9) {
   display: none;
 }
-.awsui_breadcrumb-group_d19fg_11fhg_141 > .awsui_breadcrumb-group-list_d19fg_11fhg_214 > .awsui_ellipsis_d19fg_11fhg_226 > .awsui_icon_d19fg_11fhg_236:not(#\9) {
-  margin-block: 0;
-  margin-inline: 10px;
-  color: var(--color-text-breadcrumb-icon-egad48, #687078);
-}
-.awsui_breadcrumb-group_d19fg_11fhg_141.awsui_mobile_d19fg_11fhg_241 > .awsui_breadcrumb-group-list_d19fg_11fhg_214:not(#\9) {
-  flex-wrap: nowrap;
+.awsui_breadcrumb-group_d19fg_6f9m9_141 > .awsui_breadcrumb-group-list_d19fg_6f9m9_179 > .awsui_ellipsis_d19fg_6f9m9_196:not(#\9) {
+  display: none;
 }
-.awsui_breadcrumb-group_d19fg_11fhg_141.awsui_mobile_d19fg_11fhg_241 > .awsui_breadcrumb-group-list_d19fg_11fhg_214 > .awsui_ellipsis_d19fg_11fhg_226:not(#\9) {
+.awsui_breadcrumb-group_d19fg_6f9m9_141 > .awsui_breadcrumb-group-list_d19fg_6f9m9_179 > .awsui_ellipsis_d19fg_6f9m9_196.awsui_visible_d19fg_6f9m9_209:not(#\9) {
   display: flex;
   flex-shrink: 0;
 }
-.awsui_breadcrumb-group_d19fg_11fhg_141.awsui_mobile_d19fg_11fhg_241 > .awsui_breadcrumb-group-list_d19fg_11fhg_214 > .awsui_item_d19fg_11fhg_179:not(#\9) {
-  min-inline-size: 0;
-}
-.awsui_breadcrumb-group_d19fg_11fhg_141.awsui_mobile_d19fg_11fhg_241 > .awsui_breadcrumb-group-list_d19fg_11fhg_214 > .awsui_item_d19fg_11fhg_179:not(#\9):not(:first-child):not(:last-child) {
-  display: none;
-}
-.awsui_breadcrumb-group_d19fg_11fhg_141.awsui_mobile-short_d19fg_11fhg_254 > .awsui_breadcrumb-group-list_d19fg_11fhg_214 > .awsui_ellipsis_d19fg_11fhg_226:not(#\9) {
-  display: none;
+.awsui_breadcrumb-group_d19fg_6f9m9_141 > .awsui_breadcrumb-group-list_d19fg_6f9m9_179 > .awsui_ellipsis_d19fg_6f9m9_196 > .awsui_icon_d19fg_6f9m9_213:not(#\9) {
+  margin-block: 0;
+  margin-inline: 10px;
+  color: var(--color-text-breadcrumb-icon-egad48, #687078);
 }

package/lib/internal/template/breadcrumb-group/styles.selectors.js

@@ -2,12 +2,13 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "breadcrumb-group": "awsui_breadcrumb-group_d19fg_11fhg_141",
-  "item": "awsui_item_d19fg_11fhg_179",
-  "breadcrumb-group-list": "awsui_breadcrumb-group-list_d19fg_11fhg_214",
-  "ellipsis": "awsui_ellipsis_d19fg_11fhg_226",
-  "icon": "awsui_icon_d19fg_11fhg_236",
-  "mobile": "awsui_mobile_d19fg_11fhg_241",
-  "mobile-short": "awsui_mobile-short_d19fg_11fhg_254"
+  "breadcrumb-group": "awsui_breadcrumb-group_d19fg_6f9m9_141",
+  "breadcrumb-group-list": "awsui_breadcrumb-group-list_d19fg_6f9m9_179",
+  "ghost": "awsui_ghost_d19fg_6f9m9_190",
+  "item": "awsui_item_d19fg_6f9m9_195",
+  "ellipsis": "awsui_ellipsis_d19fg_6f9m9_196",
+  "hide": "awsui_hide_d19fg_6f9m9_203",
+  "visible": "awsui_visible_d19fg_6f9m9_209",
+  "icon": "awsui_icon_d19fg_6f9m9_213"
 };
   

package/lib/internal/template/breadcrumb-group/utils.d.ts

@@ -4,4 +4,9 @@ export declare const getEventDetail: <T extends BreadcrumbGroupProps.Item>(item:
     text: string;
     href: string;
 };
+export declare const getItemsDisplayProperties: (itemsWidths: Array<number>, navWidth: number | null) => {
+    shrinkFactors: number[];
+    minWidths: number[];
+    collapsed: number;
+};
 //# sourceMappingURL=utils.d.ts.map

package/lib/internal/template/breadcrumb-group/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpD,eAAO,MAAM,cAAc;;;;CAIzB,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/breadcrumb-group/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEpD,eAAO,MAAM,cAAc;;;;CAIzB,CAAC;AAKH,eAAO,MAAM,yBAAyB,gBAAiB,MAAM,MAAM,CAAC,YAAY,MAAM,GAAG,IAAI;;;;CAW5F,CAAC"}