@aws-amplify/ui 5.6.8 → 5.7.0

package/dist/styles.css

@@ -83,6 +83,28 @@
   --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium);
   --amplify-components-badge-large-padding-vertical: var(--amplify-space-small);
   --amplify-components-badge-large-padding-horizontal: var(--amplify-space-medium);
+  --amplify-components-breadcrumbs-flex-direction: row;
+  --amplify-components-breadcrumbs-flex-wrap: wrap;
+  --amplify-components-breadcrumbs-gap: 0;
+  --amplify-components-breadcrumbs-color: var(--amplify-colors-font-tertiary);
+  --amplify-components-breadcrumbs-item-flex-direction: row;
+  --amplify-components-breadcrumbs-item-color: inherit;
+  --amplify-components-breadcrumbs-item-font-size: inherit;
+  --amplify-components-breadcrumbs-item-align-items: center;
+  --amplify-components-breadcrumbs-item-line-height: 1;
+  --amplify-components-breadcrumbs-separator-color: inherit;
+  --amplify-components-breadcrumbs-separator-font-size: inherit;
+  --amplify-components-breadcrumbs-separator-padding-inline: var(--amplify-space-xxs);
+  --amplify-components-breadcrumbs-link-color: var(--amplify-components-link-color);
+  --amplify-components-breadcrumbs-link-font-size: inherit;
+  --amplify-components-breadcrumbs-link-font-weight: normal;
+  --amplify-components-breadcrumbs-link-text-decoration: none;
+  --amplify-components-breadcrumbs-link-padding-inline: var(--amplify-space-xs);
+  --amplify-components-breadcrumbs-link-padding-block: var(--amplify-space-xxs);
+  --amplify-components-breadcrumbs-link-current-color: inherit;
+  --amplify-components-breadcrumbs-link-current-font-size: inherit;
+  --amplify-components-breadcrumbs-link-current-font-weight: normal;
+  --amplify-components-breadcrumbs-link-current-text-decoration: none;
   --amplify-components-button-font-weight: var(--amplify-font-weights-bold);
   --amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration);
   --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
@@ -677,13 +699,17 @@
   --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
   --amplify-components-select-icon-wrapper-transform: translateY(-50%);
   --amplify-components-select-icon-wrapper-pointer-events: none;
+  --amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs);
+  --amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium);
   --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
   --amplify-components-select-option-color: var(--amplify-colors-font-primary);
   --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-select-white-space: nowrap;
   --amplify-components-select-min-width: 6.5rem;
   --amplify-components-select-small-min-width: 5.5rem;
+  --amplify-components-select-small-padding-inline-end: var(--amplify-space-xl);
   --amplify-components-select-large-min-width: 7.5rem;
+  --amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl);
   --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color);
   --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color);
   --amplify-components-selectfield-flex-direction: column;
@@ -2250,6 +2276,47 @@ strong.amplify-text {
   align-self: center;
 }
 
+.amplify-breadcrumbs__list {
+  display: flex;
+  flex-wrap: var(--amplify-components-breadcrumbs-flex-wrap);
+  flex-direction: var(--amplify-components-breadcrumbs-flex-direction);
+  gap: var(--amplify-components-breadcrumbs-gap);
+  color: var(--amplify-components-breadcrumbs-color);
+}
+
+.amplify-breadcrumbs__item {
+  display: inline-flex;
+  flex-direction: var(--amplify-components-breadcrumbs-item-flex-direction);
+  align-items: var(--amplify-components-breadcrumbs-item-align-items);
+  line-height: var(--amplify-components-breadcrumbs-item-line-height);
+  color: var(--amplify-components-breadcrumbs-item-color);
+  font-size: var(--amplify-components-breadcrumbs-item-font-size);
+}
+
+.amplify-breadcrumbs__separator {
+  color: var(--amplify-components-breadcrumbs-separator-color);
+  font-size: var(--amplify-components-breadcrumbs-separator-font-size);
+  padding-inline: var(--amplify-components-breadcrumbs-separator-padding-inline);
+}
+
+.amplify-breadcrumbs__link {
+  color: var(--amplify-components-breadcrumbs-link-color);
+  font-size: var(--amplify-components-breadcrumbs-link-font-size);
+  font-weight: var(--amplify-components-breadcrumbs-link-font-weight);
+  padding-inline: var(--amplify-components-breadcrumbs-link-padding-inline);
+  padding-block: var(--amplify-components-breadcrumbs-link-padding-block);
+  -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
+          text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
+}
+
+.amplify-breadcrumbs__link--current {
+  color: var(--amplify-components-breadcrumbs-link-current-color);
+  font-size: var(--amplify-components-breadcrumbs-link-current-font-size);
+  font-weight: var(--amplify-components-breadcrumbs-link-current-font-weight);
+  -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
+          text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
+}
+
 .amplify-card {
   background-color: var(--amplify-components-card-background-color);
   border-radius: var(--amplify-components-card-border-radius);
@@ -3689,6 +3756,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
   transform: var(--amplify-components-select-icon-wrapper-transform);
   pointer-events: var(--amplify-components-select-icon-wrapper-pointer-events);
 }
+.amplify-select__icon-wrapper--small {
+  right: var(--amplify-components-select-icon-wrapper-small-right);
+}
+.amplify-select__icon-wrapper--large {
+  right: var(--amplify-components-select-icon-wrapper-large-right);
+}
 
 .amplify-select {
   box-sizing: border-box;
@@ -3790,9 +3863,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 .amplify-select--small {
   min-width: var(--amplify-components-select-small-min-width);
+  -webkit-padding-end: var(--amplify-components-select-small-padding-inline-end);
+          padding-inline-end: var(--amplify-components-select-small-padding-inline-end);
 }
 .amplify-select--large {
   min-width: var(--amplify-components-select-large-min-width);
+  -webkit-padding-end: var(--amplify-components-select-large-padding-inline-end);
+          padding-inline-end: var(--amplify-components-select-large-padding-inline-end);
 }
 
 .amplify-selectfield {

package/dist/theme.css

@@ -80,6 +80,28 @@
 --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium);
 --amplify-components-badge-large-padding-vertical: var(--amplify-space-small);
 --amplify-components-badge-large-padding-horizontal: var(--amplify-space-medium);
+--amplify-components-breadcrumbs-flex-direction: row;
+--amplify-components-breadcrumbs-flex-wrap: wrap;
+--amplify-components-breadcrumbs-gap: 0;
+--amplify-components-breadcrumbs-color: var(--amplify-colors-font-tertiary);
+--amplify-components-breadcrumbs-item-flex-direction: row;
+--amplify-components-breadcrumbs-item-color: inherit;
+--amplify-components-breadcrumbs-item-font-size: inherit;
+--amplify-components-breadcrumbs-item-align-items: center;
+--amplify-components-breadcrumbs-item-line-height: 1;
+--amplify-components-breadcrumbs-separator-color: inherit;
+--amplify-components-breadcrumbs-separator-font-size: inherit;
+--amplify-components-breadcrumbs-separator-padding-inline: var(--amplify-space-xxs);
+--amplify-components-breadcrumbs-link-color: var(--amplify-components-link-color);
+--amplify-components-breadcrumbs-link-font-size: inherit;
+--amplify-components-breadcrumbs-link-font-weight: normal;
+--amplify-components-breadcrumbs-link-text-decoration: none;
+--amplify-components-breadcrumbs-link-padding-inline: var(--amplify-space-xs);
+--amplify-components-breadcrumbs-link-padding-block: var(--amplify-space-xxs);
+--amplify-components-breadcrumbs-link-current-color: inherit;
+--amplify-components-breadcrumbs-link-current-font-size: inherit;
+--amplify-components-breadcrumbs-link-current-font-weight: normal;
+--amplify-components-breadcrumbs-link-current-text-decoration: none;
 --amplify-components-button-font-weight: var(--amplify-font-weights-bold);
 --amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration);
 --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
@@ -674,13 +696,17 @@
 --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
 --amplify-components-select-icon-wrapper-transform: translateY(-50%);
 --amplify-components-select-icon-wrapper-pointer-events: none;
+--amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs);
+--amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium);
 --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
 --amplify-components-select-option-color: var(--amplify-colors-font-primary);
 --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled);
 --amplify-components-select-white-space: nowrap;
 --amplify-components-select-min-width: 6.5rem;
 --amplify-components-select-small-min-width: 5.5rem;
+--amplify-components-select-small-padding-inline-end: var(--amplify-space-xl);
 --amplify-components-select-large-min-width: 7.5rem;
+--amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl);
 --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color);
 --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color);
 --amplify-components-selectfield-flex-direction: column;

package/dist/types/theme/tokens/components/breadcrumbs.d.ts

@@ -0,0 +1,9 @@
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export type BreadcrumbsTokens<OutputType extends OutputVariantKey> = DesignTokenProperties<'gap' | 'flexDirection' | 'flexWrap' | 'color', OutputType> & {
+    item?: DesignTokenProperties<'color' | 'fontSize' | 'alignItems' | 'lineHeight' | 'flexDirection', OutputType>;
+    separator?: DesignTokenProperties<'color' | 'fontSize' | 'paddingInline', OutputType>;
+    link?: DesignTokenProperties<'color' | 'fontSize' | 'fontWeight' | 'paddingInline' | 'paddingBlock' | 'textDecoration', OutputType> & {
+        current?: DesignTokenProperties<'color' | 'fontSize' | 'fontWeight' | 'textDecoration', OutputType>;
+    };
+};
+export declare const breadcrumbs: Required<BreadcrumbsTokens<'default'>>;

package/dist/types/theme/tokens/components/index.d.ts

@@ -2,6 +2,7 @@ import { AlertTokens } from './alert';
 import { AutocompleteTokens } from './autocomplete';
 import { AuthenticatorTokens } from './authenticator';
 import { BadgeTokens } from './badge';
+import { BreadcrumbsTokens } from './breadcrumbs';
 import { ButtonTokens } from './button';
 import { CardTokens } from './card';
 import { CheckboxTokens } from './checkbox';
@@ -53,6 +54,7 @@ type BaseComponentTokens<Output extends OutputVariantKey> = {
     authenticator?: AuthenticatorTokens<Output>;
     autocomplete?: AutocompleteTokens<Output>;
     badge?: BadgeTokens<Output>;
+    breadcrumbs?: BreadcrumbsTokens<Output>;
     button?: ButtonTokens<Output>;
     card?: CardTokens<Output>;
     checkbox?: CheckboxTokens<Output>;

package/dist/types/theme/tokens/components/select.d.ts

@@ -1,8 +1,12 @@
 import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
-type SelectSizeTokens<Output> = DesignTokenProperties<'minWidth', Output>;
+type SelectSizeTokens<Output> = DesignTokenProperties<'minWidth' | 'paddingInlineEnd', Output>;
+type SelectIconWrapperTokens<Output> = DesignTokenProperties<'alignItems' | 'position' | 'top' | 'right' | 'transform' | 'pointerEvents', Output> & {
+    small?: DesignTokenProperties<'right', Output>;
+    large?: DesignTokenProperties<'right', Output>;
+};
 export type SelectTokens<Output extends OutputVariantKey> = DesignTokenProperties<'paddingInlineEnd' | 'whiteSpace' | 'minWidth', Output> & {
     wrapper?: DesignTokenProperties<'cursor' | 'display' | 'flex' | 'position', Output>;
-    iconWrapper?: DesignTokenProperties<'alignItems' | 'position' | 'top' | 'right' | 'transform' | 'pointerEvents', Output>;
+    iconWrapper?: SelectIconWrapperTokens<Output>;
     option?: DesignTokenProperties<'backgroundColor' | 'color', Output> & {
         _disabled?: DesignTokenProperties<'color', Output>;
     };

package/dist/types/theme/tokens/types/designToken.d.ts

@@ -80,6 +80,7 @@ export type StrokeLinecapValue = string;
 export type StrokeWidthValue = string;
 export type SpaceValue<Platform extends PlatformKey = unknown> = Platform extends 'react-native' ? string | number : string;
 export type TextAlignValue = string;
+export type TextDecorationValue = string;
 export type TimeValue<Platform extends PlatformKey = unknown, Output extends OutputVariantKey = unknown> = Output extends 'required' ? Platform extends 'react-native' ? number : string : string;
 export type TransformValue = string;
 export type TransitionDurationValue = string;
@@ -160,6 +161,7 @@ interface TokenStandardProperties {
     strokeLinecap: StrokeLinecapValue;
     strokeWidth: StrokeWidthValue;
     textAlign: TextAlignValue;
+    textDecoration: TextDecorationValue;
     top: SpaceValue;
     transform: TransformValue;
     transitionDuration: TransitionDurationValue;

package/dist/types/types/primitives/componentClassName.d.ts

@@ -13,6 +13,11 @@ export declare enum ComponentClassName {
     AutocompleteMenuOption = "amplify-autocomplete__menu__option",
     AutocompleteMenuOptions = "amplify-autocomplete__menu__options",
     Badge = "amplify-badge",
+    Breadcrumbs = "amplify-breadcrumbs",
+    BreadcrumbsList = "amplify-breadcrumbs__list",
+    BreadcrumbsItem = "amplify-breadcrumbs__item",
+    BreadcrumbsSeparator = "amplify-breadcrumbs__separator",
+    BreadcrumbsLink = "amplify-breadcrumbs__link",
     Button = "amplify-button",
     ButtonGroup = "amplify-buttongroup",
     ButtonLoaderWrapper = "amplify-button__loader-wrapper",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui",
-  "version": "5.6.8",
+  "version": "5.7.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -51,7 +51,7 @@
     "tslib": "2.4.1"
   },
   "peerDependencies": {
-    "aws-amplify": ">= 5.0.1",
+    "aws-amplify": "^5.0.1",
     "xstate": "^4.33.6"
   },
   "peerDependenciesMeta": {