feat(alertbanner): use width token for max-width instead of width (#2762)

The alert banner now occupies all available space until it reaches the
maximum allowed width. By default it will no longer cut off in viewports
smaller than the width token.

The token --spectrum-alert-banner-width was previously used as the
width, as it was shown in the design specs. Per a discussion with
design, this had been intended as a max-width, to prevent having alert
banners that are too wide and hard to read.

Author: jawinn

.changeset/brave-seas-retire.md

@@ -0,0 +1,7 @@
+---
+"@spectrum-css/alertbanner": minor
+---
+
+The alert banner component now occupies all available space until it reaches the maximum allowed width.
+The token previously used for the fixed width, `--spectrum-alert-banner-width`, is now used for the maximum width.
+This includes the additional of a new mod custom property: `--mod-alert-banner-max-inline-size`

components/alertbanner/index.css

@@ -13,7 +13,8 @@ governing permissions and limitations under the License.
 
 .spectrum-AlertBanner {
 	--spectrum-alert-banner-min-height: var(--spectrum-alert-banner-minimum-height);
-	--spectrum-alert-banner-size: var(--spectrum-alert-banner-width);
+	--spectrum-alert-banner-max-inline-size: var(--spectrum-alert-banner-width);
+	--spectrum-alert-banner-size: auto;
 	--spectrum-alert-banner-font-size: var(--spectrum-font-size-100);
 	--spectrum-alert-banner-icon-size: var(--spectrum-workflow-icon-size-100);
 
@@ -52,6 +53,7 @@ governing permissions and limitations under the License.
 	display: none;
 	justify-content: space-between;
 	inline-size: var(--mod-alert-banner-size, var(--spectrum-alert-banner-size));
+	max-inline-size: var(--mod-alert-banner-max-inline-size, var(--spectrum-alert-banner-max-inline-size));
 	min-block-size: var(--mod-alert-banner-min-height, var(--spectrum-alert-banner-min-height));
 	font-size: var(--mod-alert-banner-font-size, var(--spectrum-alert-banner-font-size));
 	color: var(--mod-alert-banner-font-color, var(--spectrum-alert-banner-font-color));

components/alertbanner/metadata/mods.md

@@ -9,6 +9,7 @@
 | `--mod-alert-banner-icon-size`                 |
 | `--mod-alert-banner-icon-to-text`              |
 | `--mod-alert-banner-informative-background`    |
+| `--mod-alert-banner-max-inline-size`           |
 | `--mod-alert-banner-min-height`                |
 | `--mod-alert-banner-negative-background`       |
 | `--mod-alert-banner-netural-background`        |