@aws-amplify/ui 6.15.4 → 6.15.5

package/dist/styles.layer.css

@@ -1513,11 +1513,11 @@
   --amplify-colors-black: hsl(0, 0%, 0%);
   --amplify-colors-white: hsl(0, 0%, 100%);
   --amplify-colors-transparent: transparent;
-  --amplify-fonts-default-variable: "InterVariable", "Inter var", "Inter", -apple-system, BlinkMacSystemFont,
-          "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans",
+  --amplify-fonts-default-variable: 'InterVariable', 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont,
+          'Helvetica Neue', 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans',
           sans-serif;
-  --amplify-fonts-default-static: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
-          "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif;
+  --amplify-fonts-default-static: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+          'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
   --amplify-font-sizes-xxxs: 0.375rem;
   --amplify-font-sizes-xxs: 0.5rem;
   --amplify-font-sizes-xs: 0.75rem;
@@ -2068,9 +2068,6 @@ strong.amplify-text {
   border-width: var(--amplify-components-button-menu-border-width);
   background-color: var(--amplify-components-button-menu-background-color);
   justify-content: var(--amplify-components-button-menu-justify-content);
-  --amplify-internal-button-disabled-color: var(
-    --amplify-components-button-menu-disabled-color
-  );
 }
 .amplify-button--menu:hover {
   color: var(--amplify-components-button-menu-hover-color);
@@ -2085,6 +2082,11 @@ strong.amplify-text {
   color: var(--amplify-components-button-menu-active-color);
   background-color: var(--amplify-components-button-menu-active-background-color);
 }
+.amplify-button--menu {
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-menu-disabled-color
+  );
+}
 .amplify-button--primary {
   --amplify-internal-button-border-width: var(
     --amplify-components-button-primary-border-width
@@ -2098,24 +2100,6 @@ strong.amplify-text {
   --amplify-internal-button-color: var(
     --amplify-components-button-primary-color
   );
-  --amplify-internal-button-disabled-border-color: var(
-    --amplify-components-button-primary-disabled-border-color
-  );
-  --amplify-internal-button-disabled-background-color: var(
-    --amplify-components-button-primary-disabled-background-color
-  );
-  --amplify-internal-button-disabled-color: var(
-    --amplify-components-button-primary-disabled-color
-  );
-  --amplify-internal-button-loading-background-color: var(
-    --amplify-components-button-primary-loading-background-color
-  );
-  --amplify-internal-button-loading-border-color: var(
-    --amplify-components-button-primary-loading-border-color
-  );
-  --amplify-internal-button-loading-color: var(
-    --amplify-components-button-primary-loading-color
-  );
 }
 .amplify-button--primary:hover {
   --amplify-internal-button-background-color: var(
@@ -2388,6 +2372,26 @@ strong.amplify-text {
     --amplify-components-button-primary-overlay-active-color
   );
 }
+.amplify-button--primary {
+  --amplify-internal-button-disabled-border-color: var(
+    --amplify-components-button-primary-disabled-border-color
+  );
+  --amplify-internal-button-disabled-background-color: var(
+    --amplify-components-button-primary-disabled-background-color
+  );
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-primary-disabled-color
+  );
+  --amplify-internal-button-loading-background-color: var(
+    --amplify-components-button-primary-loading-background-color
+  );
+  --amplify-internal-button-loading-border-color: var(
+    --amplify-components-button-primary-loading-border-color
+  );
+  --amplify-internal-button-loading-color: var(
+    --amplify-components-button-primary-loading-color
+  );
+}
 .amplify-button--link {
   --amplify-internal-button-border-width: var(
     --amplify-components-button-link-border-width
@@ -2401,24 +2405,6 @@ strong.amplify-text {
   --amplify-internal-button-color: var(
     --amplify-components-button-link-color
   );
-  --amplify-internal-button-disabled-border-color: var(
-    --amplify-components-button-link-disabled-border-color
-  );
-  --amplify-internal-button-disabled-background-color: var(
-    --amplify-components-button-link-disabled-background-color
-  );
-  --amplify-internal-button-disabled-color: var(
-    --amplify-components-button-link-disabled-color
-  );
-  --amplify-internal-button-loading-background-color: var(
-    --amplify-components-button-link-loading-background-color
-  );
-  --amplify-internal-button-loading-border-color: var(
-    --amplify-components-button-link-loading-border-color
-  );
-  --amplify-internal-button-loading-color: var(
-    --amplify-components-button-link-loading-color
-  );
 }
 .amplify-button--link:hover {
   --amplify-internal-button-background-color: var(
@@ -2691,30 +2677,32 @@ strong.amplify-text {
     --amplify-components-button-link-overlay-active-color
   );
 }
-.amplify-button--destructive {
-  border-width: var(--amplify-components-button-destructive-border-width);
-  background-color: var(--amplify-components-button-destructive-background-color);
-  border-color: var(--amplify-components-button-destructive-border-color);
-  color: var(--amplify-components-button-destructive-color);
+.amplify-button--link {
   --amplify-internal-button-disabled-border-color: var(
-    --amplify-components-button-destructive-disabled-border-color
+    --amplify-components-button-link-disabled-border-color
   );
   --amplify-internal-button-disabled-background-color: var(
-    --amplify-components-button-destructive-disabled-background-color
+    --amplify-components-button-link-disabled-background-color
   );
   --amplify-internal-button-disabled-color: var(
-    --amplify-components-button-destructive-disabled-color
+    --amplify-components-button-link-disabled-color
   );
   --amplify-internal-button-loading-background-color: var(
-    --amplify-components-button-destructive-loading-background-color
+    --amplify-components-button-link-loading-background-color
   );
   --amplify-internal-button-loading-border-color: var(
-    --amplify-components-button-destructive-loading-border-color
+    --amplify-components-button-link-loading-border-color
   );
   --amplify-internal-button-loading-color: var(
-    --amplify-components-button-destructive-loading-color
+    --amplify-components-button-link-loading-color
   );
 }
+.amplify-button--destructive {
+  border-width: var(--amplify-components-button-destructive-border-width);
+  background-color: var(--amplify-components-button-destructive-background-color);
+  border-color: var(--amplify-components-button-destructive-border-color);
+  color: var(--amplify-components-button-destructive-color);
+}
 .amplify-button--destructive:hover {
   background-color: var(--amplify-components-button-destructive-hover-background-color);
   border-color: var(--amplify-components-button-destructive-hover-border-color);
@@ -2731,6 +2719,26 @@ strong.amplify-text {
   border-color: var(--amplify-components-button-destructive-active-border-color);
   color: var(--amplify-components-button-destructive-active-color);
 }
+.amplify-button--destructive {
+  --amplify-internal-button-disabled-border-color: var(
+    --amplify-components-button-destructive-disabled-border-color
+  );
+  --amplify-internal-button-disabled-background-color: var(
+    --amplify-components-button-destructive-disabled-background-color
+  );
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-destructive-disabled-color
+  );
+  --amplify-internal-button-loading-background-color: var(
+    --amplify-components-button-destructive-loading-background-color
+  );
+  --amplify-internal-button-loading-border-color: var(
+    --amplify-components-button-destructive-loading-border-color
+  );
+  --amplify-internal-button-loading-color: var(
+    --amplify-components-button-destructive-loading-color
+  );
+}
 .amplify-button--warning {
   background-color: var(--amplify-components-button-warning-background-color);
   border-color: var(--amplify-components-button-warning-border-color);
@@ -2990,22 +2998,6 @@ strong.amplify-text {
   outline-style: var(--amplify-components-fieldcontrol-outline-style);
   outline-width: var(--amplify-components-fieldcontrol-outline-width);
   outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
-  -webkit-user-select: text;
-     -moz-user-select: text;
-          user-select: text;
-  display: inline-block;
-  --amplify-components-fieldcontrol-color: var(
-    --amplify-components-input-color
-  );
-  --amplify-components-fieldcontrol-border-color: var(
-    --amplify-components-input-border-color
-  );
-  --amplify-components-fieldcontrol-font-size: var(
-    --amplify-components-input-font-size
-  );
-  --amplify-components-fieldcontrol-focus-border-color: var(
-    --amplify-components-input-focus-border-color
-  );
 }
 .amplify-input:focus {
   border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -3055,6 +3047,24 @@ strong.amplify-text {
   border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
   background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
 }
+.amplify-input {
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
+  display: inline-block;
+  --amplify-components-fieldcontrol-color: var(
+    --amplify-components-input-color
+  );
+  --amplify-components-fieldcontrol-border-color: var(
+    --amplify-components-input-border-color
+  );
+  --amplify-components-fieldcontrol-font-size: var(
+    --amplify-components-input-font-size
+  );
+  --amplify-components-fieldcontrol-focus-border-color: var(
+    --amplify-components-input-focus-border-color
+  );
+}
 
 .amplify-textarea {
   box-sizing: border-box;
@@ -3075,11 +3085,6 @@ strong.amplify-text {
   outline-style: var(--amplify-components-fieldcontrol-outline-style);
   outline-width: var(--amplify-components-fieldcontrol-outline-width);
   outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
-  -webkit-user-select: text;
-     -moz-user-select: text;
-          user-select: text;
-  white-space: pre-wrap;
-  max-height: 100%;
 }
 .amplify-textarea:focus {
   border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -3129,6 +3134,13 @@ strong.amplify-text {
   border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
   background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
 }
+.amplify-textarea {
+  -webkit-user-select: text;
+     -moz-user-select: text;
+          user-select: text;
+  white-space: pre-wrap;
+  max-height: 100%;
+}
 
 .amplify-image {
   height: var(--amplify-components-image-height);
@@ -3186,8 +3198,6 @@ strong.amplify-text {
   animation-timing-function: linear;
   animation-iteration-count: infinite;
   animation-duration: var(--amplify-components-loader-animation-duration);
-  stroke: var(--amplify-components-loader-stroke-filled);
-  stroke-linecap: var(--amplify-components-loader-stroke-linecap);
 }
 @media (prefers-reduced-motion) {
   .amplify-loader circle:last-of-type {
@@ -3196,6 +3206,10 @@ strong.amplify-text {
     stroke-dashoffset: 50%;
   }
 }
+.amplify-loader circle:last-of-type {
+  stroke: var(--amplify-components-loader-stroke-filled);
+  stroke-linecap: var(--amplify-components-loader-stroke-linecap);
+}
 .amplify-loader line:last-of-type {
   stroke: var(--amplify-components-loader-linear-stroke-filled);
   stroke-dasharray: 50% 200%;
@@ -3898,6 +3912,9 @@ strong.amplify-text {
   border-color: var(--amplify-internal-checkbox_button-focused-before-border-color);
   box-shadow: var(--amplify-internal-checkbox_button-focused-before-box-shadow);
 }
+.amplify-checkbox__button--error::before {
+  border-color: var(--amplify-components-checkbox-button-error-border-color);
+}
 .amplify-checkbox__button--error {
   --amplify-internal-checkbox_button-focused-before-border-color: var(
     --amplify-components-checkbox-button-error-focus-border-color
@@ -3906,9 +3923,6 @@ strong.amplify-text {
     --amplify-components-checkbox-button-error-focus-box-shadow
   );
 }
-.amplify-checkbox__button--error::before {
-  border-color: var(--amplify-components-checkbox-button-error-border-color);
-}
 .amplify-checkbox__button--disabled::before {
   border-color: var(--amplify-components-checkbox-button-disabled-border-color);
 }
@@ -4167,7 +4181,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
   flex-direction: var(--amplify-components-fieldset-flex-direction);
   gap: var(--amplify-components-fieldset-gap);
   /* Sizes */
-  /* Variations */
 }
 .amplify-fieldset--small {
   gap: var(--amplify-components-fieldset-small-gap);
@@ -4175,6 +4188,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-fieldset--large {
   gap: var(--amplify-components-fieldset-large-gap);
 }
+.amplify-fieldset {
+  /* Variations */
+}
 .amplify-fieldset--outlined {
   border: var(--amplify-components-fieldset-outlined-border-width) var(--amplify-components-fieldset-outlined-border-style) var(--amplify-components-fieldset-outlined-border-color);
   padding: var(--amplify-components-fieldset-outlined-padding);
@@ -5281,11 +5297,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
   outline-style: var(--amplify-components-fieldcontrol-outline-style);
   outline-width: var(--amplify-components-fieldcontrol-outline-width);
   outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
-  background-color: var(--amplify-components-select-background-color);
-  color: var(--amplify-components-select-color);
-  min-width: var(--amplify-components-select-min-width);
-  padding-inline-end: var(--amplify-components-select-padding-inline-end);
-  white-space: var(--amplify-components-select-white-space);
 }
 .amplify-select:focus {
   border-color: var(--amplify-components-fieldcontrol-focus-border-color);
@@ -5335,6 +5346,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
   border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
   background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
 }
+.amplify-select {
+  background-color: var(--amplify-components-select-background-color);
+  color: var(--amplify-components-select-color);
+  min-width: var(--amplify-components-select-min-width);
+  padding-inline-end: var(--amplify-components-select-padding-inline-end);
+  white-space: var(--amplify-components-select-white-space);
+}
 .amplify-select option {
   background-color: var(--amplify-components-select-option-background-color);
   color: var(--amplify-components-select-option-color);
@@ -5596,14 +5614,14 @@ html[dir=rtl] .amplify-field-group__inner-start {
   border-inline-start: none;
 }
 
-.amplify-stepperfield__input {
-  -moz-appearance: textfield;
-  text-align: var(--amplify-components-stepperfield-input-text-align);
-}
 .amplify-stepperfield__input::-webkit-outer-spin-button, .amplify-stepperfield__input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+.amplify-stepperfield__input {
+  -moz-appearance: textfield;
+  text-align: var(--amplify-components-stepperfield-input-text-align);
+}
 .amplify-stepperfield__input:not(:focus, [aria-invalid=true]) {
   border-inline-start: none;
   border-inline-end: none;
@@ -5716,9 +5734,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
       --amplify-components-table-header-border-width
     )
     0px var(--amplify-components-table-header-border-width) 0px;
-  /**
-   * Data attribute stylings
-   */
 }
 .amplify-table--small {
   --amplify-internal-table-caption-font-size: var(
@@ -5832,6 +5847,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-table__td:last-child {
   border-right-width: var(--amplify-components-table-data-border-width);
 }
+.amplify-table {
+  /**
+   * Data attribute stylings
+   */
+}
 .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
   background-color: var(--amplify-components-table-row-hover-background-color);
 }
@@ -5973,6 +5993,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
   --amplify-internal-togglebutton-focus-color: var(
     --amplify-components-togglebutton-focus-color
   );
+}
+.amplify-togglebutton:focus {
+  background-color: var(--amplify-internal-togglebutton-focus-background-color);
+  border-color: var(--amplify-internal-togglebutton-focus-border-color);
+  color: var(--amplify-internal-togglebutton-focus-color);
+}
+.amplify-togglebutton {
   --amplify-internal-togglebutton-hover-background-color: var(
     --amplify-components-togglebutton-hover-background-color
   );
@@ -5982,9 +6009,21 @@ html[dir=rtl] .amplify-field-group__inner-start {
   --amplify-internal-togglebutton-hover-color: var(
     --amplify-internal-togglebutton-color
   );
+}
+.amplify-togglebutton:hover {
+  background-color: var(--amplify-internal-togglebutton-hover-background-color);
+  border-color: var(--amplify-internal-togglebutton-hover-border-color);
+  color: var(--amplify-internal-togglebutton-hover-color);
+}
+.amplify-togglebutton {
   --amplify-internal-togglebutton-active-background-color: var(
     --amplify-components-togglebutton-active-background-color
   );
+}
+.amplify-togglebutton:active {
+  background-color: var(--amplify-internal-togglebutton-active-background-color);
+}
+.amplify-togglebutton {
   --amplify-internal-togglebutton-disabled-background-color: var(
     --amplify-components-togglebutton-disabled-background-color
   );
@@ -5995,19 +6034,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
     --amplify-components-togglebutton-disabled-color
   );
 }
-.amplify-togglebutton:focus {
-  background-color: var(--amplify-internal-togglebutton-focus-background-color);
-  border-color: var(--amplify-internal-togglebutton-focus-border-color);
-  color: var(--amplify-internal-togglebutton-focus-color);
-}
-.amplify-togglebutton:hover {
-  background-color: var(--amplify-internal-togglebutton-hover-background-color);
-  border-color: var(--amplify-internal-togglebutton-hover-border-color);
-  color: var(--amplify-internal-togglebutton-hover-color);
-}
-.amplify-togglebutton:active {
-  background-color: var(--amplify-internal-togglebutton-active-background-color);
-}
 .amplify-togglebutton:disabled {
   background-color: var(--amplify-internal-togglebutton-disabled-background-color);
   border-color: var(--amplify-internal-togglebutton-disabled-border-color);
@@ -6077,6 +6103,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
   --amplify-internal-togglebutton-focus-color: var(
     --amplify-internal-togglebutton-primary-focus-color
   );
+}
+.amplify-togglebutton--primary:focus {
+  box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
+}
+.amplify-togglebutton--primary {
   --amplify-internal-togglebutton-primary-hover-background-color: var(
     --amplify-components-togglebutton-primary-hover-background-color
   );
@@ -6114,9 +6145,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
     --amplify-internal-togglebutton-primary-disabled-color
   );
 }
-.amplify-togglebutton--primary:focus {
-  box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
-}
 .amplify-togglebutton--pressed {
   --amplify-internal-togglebutton-primary-background-color: var(
     --amplify-components-togglebutton-primary-pressed-background-color
@@ -6145,6 +6173,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
   --amplify-internal-togglebutton-primary-hover-color: var(
     --amplify-components-togglebutton-primary-pressed-hover-color
   );
+}
+.amplify-togglebutton--pressed:hover {
+  --amplify-internal-togglebutton-primary-focus-box-shadow: var(
+    --amplify-components-togglebutton-primary-pressed-hover-box-shadow
+  );
+}
+.amplify-togglebutton--pressed {
   --amplify-internal-togglebutton-primary-disabled-background-color: var(
     --amplify-components-togglebutton-primary-pressed-background-color
   );
@@ -6155,11 +6190,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
     --amplify-components-togglebutton-primary-pressed-color
   );
 }
-.amplify-togglebutton--pressed:hover {
-  --amplify-internal-togglebutton-primary-focus-box-shadow: var(
-    --amplify-components-togglebutton-primary-pressed-hover-box-shadow
-  );
-}
 .amplify-togglebutton--link {
   --amplify-internal-togglebutton-link-background-color: var(
     --amplify-components-togglebutton-link-background-color

package/dist/types/i18n/sentencePunctuation.d.ts

@@ -0,0 +1,32 @@
+/**
+ * #6966 — script-aware punctuation for the Authenticator delivery message.
+ *
+ * The delivery message is assembled from translated fragments joined by
+ * punctuation. Hardcoding an ASCII period is wrong for locales whose sentence
+ * terminator differs: Japanese/Chinese use the ideographic full stop `。` and
+ * Thai writes no sentence terminator at all. The terminator and the
+ * inter-sentence spacer are therefore derived from the script of the
+ * surrounding translated copy, keeping punctuation locale-correct without
+ * adding a translation key, interpolation, or any public API.
+ *
+ * Script detection is MAJORITY-based rather than "contains any": a sentence is
+ * treated as CJK or Thai only when most of its non-whitespace characters belong
+ * to that script. "Contains any" mis-classifies copy such as a Latin sentence
+ * that includes a single CJK proper noun, or a Korean (Hangul) phrase that
+ * happens to contain a stray CJK codepoint.
+ */
+/**
+ * Appends the script-appropriate sentence terminator to `sentence` unless it is
+ * already terminated. CJK copy receives the ideographic full stop `。`, Thai
+ * copy is left untouched, and every other script receives an ASCII period.
+ *
+ * @internal Not exported from the `@aws-amplify/ui` public entry point.
+ */
+export declare const terminateSentence: (sentence: string) => string;
+/**
+ * Returns the separator to place between two joined sentences. CJK scripts do
+ * not separate sentences with a space; every other script does.
+ *
+ * @internal Not exported from the `@aws-amplify/ui` public entry point.
+ */
+export declare const getSentenceSpacer: (sentence: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui",
-  "version": "6.15.4",
+  "version": "6.15.5",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -64,7 +64,7 @@
     "@types/webpack-env": "^1.16.2",
     "autoprefixer": "^10.3.1",
     "glob": "^10.5.0",
-    "postcss": "^8.4.31",
+    "postcss": "^8.5.10",
     "sass": "^1.35.2",
     "style-dictionary": "3.9.1",
     "ts-node": "^10.9.1"