@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/unbundled/definition15.js

@@ -1,89 +1,44 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition.js";
+import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
-import { n as delegateAria } from "./delegates-aria.js";
-import { t as Linkable } from "./linkable.js";
+import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrailing } from "./affix.js";
 import { attr, html, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
-//#region src/lib/avatar/avatar.scss?inline
-var avatar_default = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary:var(--vvd-avatar-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-avatar-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-avatar-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-avatar-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-avatar-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-avatar-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-avatar-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-avatar-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-avatar-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-avatar-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-fierce:var(--vvd-avatar-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-avatar-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-avatar-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-avatar-accent-contrast,var(--vvd-color-neutral-800))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base{border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle;border:none;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.base.size-condensed{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.base.size-expanded{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8)) / 2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color:transparent}.base:not(.shape-pill){--_avatar-border-radius:8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius:4px}.base:not(.size-condensed,.size-expanded){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);line-height:1}.base:is(a,button):focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base.shape-pill{--_avatar-border-radius:50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){object-fit:cover;block-size:100%;inline-size:100%}";
-//#endregion
-//#region src/lib/avatar/avatar.ts
+//#region src/lib/badge/badge.ts
 /**
 * @public
-* @component avatar
-* @slot graphic - Assign nodes to the graphic slot to set a graphic media of any kind (e.g. image, illustration etc).
+* @component badge
 * @slot icon - The preferred way to add an icon to the component.
 */
-var Avatar = class extends Linkable(VividElement) {
-	constructor(..._args) {
-		super(..._args);
-		this.clickable = false;
-	}
-};
-__decorate([attr], Avatar.prototype, "connotation", void 0);
-__decorate([attr], Avatar.prototype, "shape", void 0);
-__decorate([attr], Avatar.prototype, "appearance", void 0);
-__decorate([attr], Avatar.prototype, "size", void 0);
-__decorate([attr], Avatar.prototype, "icon", void 0);
-__decorate([attr], Avatar.prototype, "initials", void 0);
-__decorate([attr({
-	mode: "boolean",
-	attribute: "clickable"
-})], Avatar.prototype, "clickable", void 0);
+var Badge = class extends AffixIconWithTrailing(VividElement) {};
+__decorate([attr], Badge.prototype, "connotation", void 0);
+__decorate([attr], Badge.prototype, "shape", void 0);
+__decorate([attr], Badge.prototype, "size", void 0);
+__decorate([attr], Badge.prototype, "appearance", void 0);
+__decorate([attr], Badge.prototype, "text", void 0);
 //#endregion
-//#region src/lib/avatar/avatar.template.ts
-var getClasses = ({ appearance, connotation, shape, size }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)]);
-/**
-* @deprecated To be fully replaced with icon slot
-* Avatar icon
-*/
-function renderIcon(iconTag) {
-	return html`
-		<${iconTag} name="${(x) => x.icon ? x.icon : "user-line"}"></${iconTag}>
-	`;
-}
-/**
-* Avatar initials
-*/
-function renderInitials() {
-	return html`
-		<span class="initials">${({ initials }) => initials.substring(0, 2)}</span>
-	`;
-}
-function renderAvatarBaseElement(x, content) {
-	if (x.href) return x._renderLinkElement(content, getClasses);
-	else if (x.clickable) return html`<button
-			type="button"
-			class="${getClasses}"
-			${delegateAria()}
-		>
-			${content}
-		</button>`;
-	else return html`<span class="${getClasses}">${content}</span>`;
-}
-var AvatarTemplate = (context) => {
-	const iconTag = context.tagFor(Icon);
-	return html`
-		${(x) => renderAvatarBaseElement(x, html`<slot name="graphic">
-					${when((x) => x.initials, renderInitials())}
-					${when((x) => !x.initials, html`<span class="icon"
-							><slot name="icon">${renderIcon(iconTag)}</slot></span
-						>`)}</slot
-				>`)}
-	`;
+//#region src/lib/badge/badge.scss?inline
+var badge_default = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary:var(--vvd-badge-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-badge-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-intermediate:var(--vvd-badge-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-soft:var(--vvd-badge-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-badge-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-pale:var(--vvd-badge-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-badge-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--vvd-badge-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-badge-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-badge-cta-firm-all,var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary:var(--vvd-badge-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-badge-success-primary-text,var(--vvd-color-canvas));--_connotation-color-intermediate:var(--vvd-badge-success-intermediate,var(--vvd-color-success-500));--_connotation-color-soft:var(--vvd-badge-success-soft,var(--vvd-color-success-100));--_connotation-color-contrast:var(--vvd-badge-success-contrast,var(--vvd-color-success-800));--_connotation-color-pale:var(--vvd-badge-success-pale,var(--vvd-color-success-300));--_connotation-color-fierce:var(--vvd-badge-success-fierce,var(--vvd-color-success-700));--_connotation-color-fierce-primary:var(--vvd-badge-success-fierce-primary,var(--vvd-color-success-700));--_connotation-color-firm:var(--vvd-badge-success-firm,var(--vvd-color-success-600));--_connotation-color-firm-all:var(--vvd-badge-success-firm-all,var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary:var(--vvd-badge-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-badge-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-intermediate:var(--vvd-badge-alert-intermediate,var(--vvd-color-alert-500));--_connotation-color-soft:var(--vvd-badge-alert-soft,var(--vvd-color-alert-100));--_connotation-color-contrast:var(--vvd-badge-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-pale:var(--vvd-badge-alert-pale,var(--vvd-color-alert-300));--_connotation-color-fierce:var(--vvd-badge-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-fierce-primary:var(--vvd-badge-alert-fierce-primary,var(--vvd-color-alert-700));--_connotation-color-firm:var(--vvd-badge-alert-firm,var(--vvd-color-alert-600));--_connotation-color-firm-all:var(--vvd-badge-alert-firm-all,var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary:var(--vvd-badge-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-badge-warning-primary-text,var(--vvd-color-canvas-text));--_connotation-color-intermediate:var(--vvd-badge-warning-intermediate,var(--vvd-color-warning-300));--_connotation-color-soft:var(--vvd-badge-warning-soft,var(--vvd-color-warning-100));--_connotation-color-contrast:var(--vvd-badge-warning-contrast,var(--vvd-color-warning-800));--_connotation-color-pale:var(--vvd-badge-warning-pale,var(--vvd-color-warning-300));--_connotation-color-fierce:var(--vvd-badge-warning-fierce,var(--vvd-color-warning-700));--_connotation-color-fierce-primary:var(--vvd-badge-warning-fierce-primary,var(--vvd-color-warning-300));--_connotation-color-firm:var(--vvd-badge-warning-firm,var(--vvd-color-warning-600));--_connotation-color-firm-all:var(--vvd-badge-warning-firm-all,var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary:var(--vvd-badge-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-badge-information-primary-text,var(--vvd-color-canvas));--_connotation-color-intermediate:var(--vvd-badge-information-intermediate,var(--vvd-color-information-500));--_connotation-color-soft:var(--vvd-badge-information-soft,var(--vvd-color-information-100));--_connotation-color-contrast:var(--vvd-badge-information-contrast,var(--vvd-color-information-800));--_connotation-color-pale:var(--vvd-badge-information-pale,var(--vvd-color-information-300));--_connotation-color-fierce:var(--vvd-badge-information-fierce,var(--vvd-color-information-700));--_connotation-color-fierce-primary:var(--vvd-badge-information-fierce-primary,var(--vvd-color-information-700));--_connotation-color-firm:var(--vvd-badge-information-firm,var(--vvd-color-information-600));--_connotation-color-firm-all:var(--vvd-badge-information-firm-all,var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary:var(--vvd-badge-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-badge-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-intermediate:var(--vvd-badge-announcement-intermediate,var(--vvd-color-announcement-500));--_connotation-color-soft:var(--vvd-badge-announcement-soft,var(--vvd-color-announcement-100));--_connotation-color-contrast:var(--vvd-badge-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-pale:var(--vvd-badge-announcement-pale,var(--vvd-color-announcement-300));--_connotation-color-fierce:var(--vvd-badge-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-fierce-primary:var(--vvd-badge-announcement-fierce-primary,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-badge-announcement-firm,var(--vvd-color-announcement-600));--_connotation-color-firm-all:var(--vvd-badge-announcement-firm-all,var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary:var(--vvd-badge-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-badge-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-intermediate:var(--vvd-badge-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-soft:var(--vvd-badge-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-badge-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-pale:var(--vvd-badge-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-badge-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--vvd-badge-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-firm:var(--vvd-badge-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-badge-accent-firm-all,var(--vvd-color-neutral-600))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in sRGB, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-condensed-bold);vertical-align:middle;justify-content:center;align-items:center;column-gap:8px;inline-size:100%;padding-inline:8px;display:inline-flex}.base:not(.size-expanded){--_badge-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size-expanded{--_badge-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;place-content:center;padding-inline:0}@supports (aspect-ratio:1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio:1){.base.icon-only{inline-size:var(--_badge-block-size)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.text{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--_badge-block-size) / 1.6667);flex-shrink:0;line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}";
+//#endregion
+//#region src/lib/badge/badge.template.ts
+var badgeTemplate = (context) => {
+	const affixIconTemplate = affixIconTemplateFactory(context);
+	return html` <span
+		class="${(x) => classNames("base", [`connotation-${x.connotation}`, Boolean(x.connotation)], [`appearance-${x.appearance}`, Boolean(x.appearance)], [`shape-${x.shape}`, Boolean(x.shape)], [`size-${x.size}`, Boolean(x.size)], ["icon-trailing", x.iconTrailing], ["icon-only", !x.text && (Boolean(x.icon) || Boolean(x.iconSlottedContent?.length))])}"
+	>
+		${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
+		${when((x) => x.text, (x) => html`<span class="text">${x.text}</span>`)}
+	</span>`;
 };
 //#endregion
-//#region src/lib/avatar/definition.ts
-/**
-* @internal
-*/
-var avatarDefinition = defineVividComponent("avatar", Avatar, AvatarTemplate, [iconDefinition], { styles: avatar_default });
+//#region src/lib/badge/definition.ts
+/** @internal */
+var badgeDefinition = defineVividComponent("badge", Badge, badgeTemplate, [iconDefinition], { styles: badge_default });
 /**
-* Registers the avatar elements with the design system.
+* Registers the badge elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerAvatar = createRegisterFunction(avatarDefinition);
+var registerBadge = createRegisterFunction(badgeDefinition);
 //#endregion
-export { registerAvatar as n, Avatar as r, avatarDefinition as t };
+export { registerBadge as n, Badge as r, badgeDefinition as t };

package/unbundled/definition16.cjs

@@ -3,61 +3,149 @@ const require_vivid_element = require("./vivid-element.cjs");
 const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_affix = require("./affix.cjs");
+const require_delegates_aria = require("./delegates-aria.cjs");
+const require_localized = require("./localized.cjs");
+const require_definition$1 = require("./definition6.cjs");
+const require_enums = require("./enums.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/badge/badge.ts
+//#region src/lib/banner/banner.scss?inline
+var banner_default = ":host{display:block}.control.connotation-success{--_connotation-color-primary:var(--vvd-banner-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-banner-success-primary-text,var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-banner-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-banner-alert-primary-text,var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-banner-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-banner-announcement-primary-text,var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-banner-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-banner-warning-primary-text,var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary:var(--vvd-banner-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-banner-information-primary-text,var(--vvd-color-canvas))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent;background-color:var(--_appearance-color-fill);max-height:160px;color:var(--_appearance-color-text);transition:max-height var(--transition-delay,.2s);overflow:hidden}@media (prefers-reduced-motion:reduce){.control{transition-duration:.01ms}}.control.removing{max-height:0}.header{box-sizing:border-box;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20));align-items:center;display:flex}.header .content{flex-grow:1;justify-content:center;align-items:center;column-gap:16px;inline-size:100%;padding:10px 16px;display:flex}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end:8px}";
+//#endregion
+//#region src/lib/banner/banner.ts
+var CONNOTATION_ICON_MAP = {
+	[require_enums.Connotation.Information]: "info-solid",
+	[require_enums.Connotation.Announcement]: "megaphone-solid",
+	[require_enums.Connotation.Success]: "check-circle-solid",
+	[require_enums.Connotation.Warning]: "warning-solid",
+	[require_enums.Connotation.Alert]: "error-solid"
+};
+var getConnotationIcon = (connotation = require_enums.Connotation.Information) => CONNOTATION_ICON_MAP[connotation];
 /**
 * @public
-* @component badge
+* @component banner
+* @slot action-items - Add action items to banner using this slot.
 * @slot icon - The preferred way to add an icon to the component.
+* @testSelector byText byText
+* @testAction dismiss clickButton #dismissButton
+* @testRef dismissButton shadowButton .dismiss-button
 */
-var Badge = class extends require_affix.AffixIconWithTrailing(require_vivid_element.VividElement) {};
-require_decorate.__decorate([_microsoft_fast_element.attr], Badge.prototype, "connotation", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Badge.prototype, "shape", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Badge.prototype, "size", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Badge.prototype, "appearance", void 0);
-require_decorate.__decorate([_microsoft_fast_element.attr], Badge.prototype, "text", void 0);
-//#endregion
-//#region src/lib/badge/badge.scss?inline
-var badge_default = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary:var(--vvd-badge-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-badge-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-intermediate:var(--vvd-badge-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-soft:var(--vvd-badge-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-badge-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-pale:var(--vvd-badge-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-badge-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--vvd-badge-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-badge-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-badge-cta-firm-all,var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary:var(--vvd-badge-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-badge-success-primary-text,var(--vvd-color-canvas));--_connotation-color-intermediate:var(--vvd-badge-success-intermediate,var(--vvd-color-success-500));--_connotation-color-soft:var(--vvd-badge-success-soft,var(--vvd-color-success-100));--_connotation-color-contrast:var(--vvd-badge-success-contrast,var(--vvd-color-success-800));--_connotation-color-pale:var(--vvd-badge-success-pale,var(--vvd-color-success-300));--_connotation-color-fierce:var(--vvd-badge-success-fierce,var(--vvd-color-success-700));--_connotation-color-fierce-primary:var(--vvd-badge-success-fierce-primary,var(--vvd-color-success-700));--_connotation-color-firm:var(--vvd-badge-success-firm,var(--vvd-color-success-600));--_connotation-color-firm-all:var(--vvd-badge-success-firm-all,var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary:var(--vvd-badge-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-badge-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-intermediate:var(--vvd-badge-alert-intermediate,var(--vvd-color-alert-500));--_connotation-color-soft:var(--vvd-badge-alert-soft,var(--vvd-color-alert-100));--_connotation-color-contrast:var(--vvd-badge-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-pale:var(--vvd-badge-alert-pale,var(--vvd-color-alert-300));--_connotation-color-fierce:var(--vvd-badge-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-fierce-primary:var(--vvd-badge-alert-fierce-primary,var(--vvd-color-alert-700));--_connotation-color-firm:var(--vvd-badge-alert-firm,var(--vvd-color-alert-600));--_connotation-color-firm-all:var(--vvd-badge-alert-firm-all,var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary:var(--vvd-badge-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-badge-warning-primary-text,var(--vvd-color-canvas-text));--_connotation-color-intermediate:var(--vvd-badge-warning-intermediate,var(--vvd-color-warning-300));--_connotation-color-soft:var(--vvd-badge-warning-soft,var(--vvd-color-warning-100));--_connotation-color-contrast:var(--vvd-badge-warning-contrast,var(--vvd-color-warning-800));--_connotation-color-pale:var(--vvd-badge-warning-pale,var(--vvd-color-warning-300));--_connotation-color-fierce:var(--vvd-badge-warning-fierce,var(--vvd-color-warning-700));--_connotation-color-fierce-primary:var(--vvd-badge-warning-fierce-primary,var(--vvd-color-warning-300));--_connotation-color-firm:var(--vvd-badge-warning-firm,var(--vvd-color-warning-600));--_connotation-color-firm-all:var(--vvd-badge-warning-firm-all,var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary:var(--vvd-badge-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-badge-information-primary-text,var(--vvd-color-canvas));--_connotation-color-intermediate:var(--vvd-badge-information-intermediate,var(--vvd-color-information-500));--_connotation-color-soft:var(--vvd-badge-information-soft,var(--vvd-color-information-100));--_connotation-color-contrast:var(--vvd-badge-information-contrast,var(--vvd-color-information-800));--_connotation-color-pale:var(--vvd-badge-information-pale,var(--vvd-color-information-300));--_connotation-color-fierce:var(--vvd-badge-information-fierce,var(--vvd-color-information-700));--_connotation-color-fierce-primary:var(--vvd-badge-information-fierce-primary,var(--vvd-color-information-700));--_connotation-color-firm:var(--vvd-badge-information-firm,var(--vvd-color-information-600));--_connotation-color-firm-all:var(--vvd-badge-information-firm-all,var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary:var(--vvd-badge-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-badge-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-intermediate:var(--vvd-badge-announcement-intermediate,var(--vvd-color-announcement-500));--_connotation-color-soft:var(--vvd-badge-announcement-soft,var(--vvd-color-announcement-100));--_connotation-color-contrast:var(--vvd-badge-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-pale:var(--vvd-badge-announcement-pale,var(--vvd-color-announcement-300));--_connotation-color-fierce:var(--vvd-badge-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-fierce-primary:var(--vvd-badge-announcement-fierce-primary,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-badge-announcement-firm,var(--vvd-color-announcement-600));--_connotation-color-firm-all:var(--vvd-badge-announcement-firm-all,var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary:var(--vvd-badge-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-badge-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-intermediate:var(--vvd-badge-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-soft:var(--vvd-badge-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-badge-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-pale:var(--vvd-badge-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-badge-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--vvd-badge-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-firm:var(--vvd-badge-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-badge-accent-firm-all,var(--vvd-color-neutral-600))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-condensed-bold);vertical-align:middle;justify-content:center;align-items:center;column-gap:8px;inline-size:100%;padding-inline:8px;display:inline-flex}.base:not(.size-expanded){--_badge-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size-expanded{--_badge-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;place-content:center;padding-inline:0}@supports (aspect-ratio:1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio:1){.base.icon-only{inline-size:var(--_badge-block-size)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.text{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--_badge-block-size) / 1.6667);flex-shrink:0;line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}";
+var Banner = class extends require_affix.AffixIcon(require_localized.Localized(require_delegates_aria.DelegatesAria(require_vivid_element.VividElement))) {
+	constructor(..._args) {
+		super(..._args);
+		this.dismissButtonAriaLabel = null;
+		this.removable = false;
+		this.#handleRemoveEnd = () => {
+			this.$emit("removed");
+			this.parentElement?.removeChild(this);
+		};
+		this.#closeOnKeyDown = (e) => {
+			if (e.key !== "Escape" || !this.removable) return;
+			this.remove();
+		};
+	}
+	get conditionedIcon() {
+		return this.icon ?? getConnotationIcon(this.connotation);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("keydown", this.#closeOnKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("keydown", this.#closeOnKeyDown);
+	}
+	remove() {
+		this.$emit("removing");
+		const banner = this.shadowRoot && this.shadowRoot.querySelector(".control");
+		banner?.classList.add("removing");
+		banner?.addEventListener("transitionend", this.#handleRemoveEnd);
+	}
+	#handleRemoveEnd;
+	#closeOnKeyDown;
+};
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "dismiss-aria-label" })], Banner.prototype, "dismissButtonAriaLabel", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Banner.prototype, "removable", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)()], Banner.prototype, "text", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)()], Banner.prototype, "connotation", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Banner.prototype, "actionItemsSlottedContent", void 0);
 //#endregion
-//#region src/lib/badge/badge.template.ts
-var getClasses = ({ iconSlottedContent, connotation, appearance, shape, size, iconTrailing, text, icon }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ["icon-trailing", iconTrailing], ["icon-only", !text && (Boolean(icon) || Boolean(iconSlottedContent?.length))]);
-var badgeTemplate = (context) => {
-	const affixIconTemplate = require_affix.affixIconTemplateFactory(context);
-	return _microsoft_fast_element.html` <span class="${getClasses}">
-		${(x) => affixIconTemplate(x.icon, require_affix.IconWrapper.Slot)}
-		${(0, _microsoft_fast_element.when)((x) => x.text, (x) => _microsoft_fast_element.html`<span class="text">${x.text}</span>`)}
-	</span>`;
+//#region src/lib/banner/banner.template.ts
+var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("control", [`connotation-${_.connotation}`, !!_.connotation]);
+function renderDismissButton(buttonTag) {
+	return _microsoft_fast_element.html`
+	  <${buttonTag}
+	  		aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.banner.dismissButtonLabel}"
+			part="${(x) => x.connotation === "warning" ? "" : "vvd-theme-alternate"}"
+			size="condensed"
+			class="dismiss-button"
+			icon="close-line"
+			@click="${(x) => x.remove()}">
+	  </${buttonTag}>`;
+}
+var renderIcon = (c, x) => {
+	const affixIconTemplate = require_affix.affixIconTemplateFactory(c);
+	const icon = x.conditionedIcon;
+	const announcement = !x.icon && x.connotation ? {
+		label: x.locale.connotationAnnoncement[`${x.connotation}Icon`],
+		announceOnUpdate: false
+	} : void 0;
+	return affixIconTemplate(icon, require_affix.IconWrapper.Slot, require_affix.IconAriaHidden.Hidden, announcement);
+};
+var BannerTemplate = (context) => {
+	const buttonTag = context.tagFor(require_definition$1.Button);
+	return _microsoft_fast_element.html`
+		<div class="${getClasses}">
+			<header class="header">
+				<div class="content">
+					${(x) => renderIcon(context, x)}
+					<div
+						class="banner-message"
+						${require_delegates_aria.delegateAria({
+		role: (x) => x.role ? x.role : "status",
+		ariaLive: (x) => x.ariaLive ? x.ariaLive : "polite"
+	})}
+					>
+						${(x) => x.text}
+					</div>
+					<slot
+						class="action-items"
+						${(0, _microsoft_fast_element.slotted)("actionItemsSlottedContent")}
+						name="action-items"
+					></slot>
+				</div>
+
+				${(0, _microsoft_fast_element.when)((x) => x.removable, renderDismissButton(buttonTag))}
+			</header>
+		</div>
+	`;
 };
 //#endregion
-//#region src/lib/badge/definition.ts
-/**
-* @internal
-*/
-var badgeDefinition = require_vivid_element.defineVividComponent("badge", Badge, badgeTemplate, [require_definition.iconDefinition], { styles: badge_default });
+//#region src/lib/banner/definition.ts
+/** @internal */
+var bannerDefinition = require_vivid_element.defineVividComponent("banner", Banner, BannerTemplate, [require_definition.iconDefinition, require_definition$1.buttonDefinition], { styles: banner_default });
 /**
-* Registers the badge elements with the design system.
+* Registers the banner elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerBadge = require_vivid_element.createRegisterFunction(badgeDefinition);
+var registerBanner = require_vivid_element.createRegisterFunction(bannerDefinition);
 //#endregion
-Object.defineProperty(exports, "Badge", {
+Object.defineProperty(exports, "Banner", {
 	enumerable: true,
 	get: function() {
-		return Badge;
+		return Banner;
 	}
 });
-Object.defineProperty(exports, "badgeDefinition", {
+Object.defineProperty(exports, "bannerDefinition", {
 	enumerable: true,
 	get: function() {
-		return badgeDefinition;
+		return bannerDefinition;
 	}
 });
-Object.defineProperty(exports, "registerBadge", {
+Object.defineProperty(exports, "registerBanner", {
 	enumerable: true,
 	get: function() {
-		return registerBadge;
+		return registerBanner;
 	}
 });

package/unbundled/definition16.js

@@ -1,45 +1,133 @@
 import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
-import { a as affixIconTemplateFactory, i as IconWrapper, n as AffixIconWithTrailing } from "./affix.js";
-import { attr, html, when } from "@microsoft/fast-element";
+import { a as affixIconTemplateFactory, i as IconWrapper, r as IconAriaHidden, t as AffixIcon } from "./affix.js";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
+import { t as Localized } from "./localized.js";
+import { i as Button, t as buttonDefinition } from "./definition6.js";
+import { r as Connotation } from "./enums.js";
+import { attr, html, observable, slotted, when } from "@microsoft/fast-element";
 import { classNames } from "@microsoft/fast-web-utilities";
-//#region src/lib/badge/badge.ts
+//#region src/lib/banner/banner.scss?inline
+var banner_default = ":host{display:block}.control.connotation-success{--_connotation-color-primary:var(--vvd-banner-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-banner-success-primary-text,var(--vvd-color-canvas))}.control.connotation-alert{--_connotation-color-primary:var(--vvd-banner-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-banner-alert-primary-text,var(--vvd-color-canvas))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-banner-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-banner-announcement-primary-text,var(--vvd-color-canvas))}.control.connotation-warning{--_connotation-color-primary:var(--vvd-banner-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-banner-warning-primary-text,var(--vvd-color-canvas-text))}.control:not(.connotation-success,.connotation-alert,.connotation-announcement,.connotation-warning){--_connotation-color-primary:var(--vvd-banner-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-banner-information-primary-text,var(--vvd-color-canvas))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent;background-color:var(--_appearance-color-fill);max-height:160px;color:var(--_appearance-color-text);transition:max-height var(--transition-delay,.2s);overflow:hidden}@media (prefers-reduced-motion:reduce){.control{transition-duration:.01ms}}.control.removing{max-height:0}.header{box-sizing:border-box;font:var(--vvd-typography-base-bold);inline-size:100%;min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20));align-items:center;display:flex}.header .content{flex-grow:1;justify-content:center;align-items:center;column-gap:16px;inline-size:100%;padding:10px 16px;display:flex}.header .content slot[name=icon]{flex-shrink:0;font-size:20px;line-height:1}.header .content .action-items{flex-shrink:0}.header .dismiss-button{flex-shrink:0;margin-inline-end:8px}";
+//#endregion
+//#region src/lib/banner/banner.ts
+var CONNOTATION_ICON_MAP = {
+	[Connotation.Information]: "info-solid",
+	[Connotation.Announcement]: "megaphone-solid",
+	[Connotation.Success]: "check-circle-solid",
+	[Connotation.Warning]: "warning-solid",
+	[Connotation.Alert]: "error-solid"
+};
+var getConnotationIcon = (connotation = Connotation.Information) => CONNOTATION_ICON_MAP[connotation];
 /**
 * @public
-* @component badge
+* @component banner
+* @slot action-items - Add action items to banner using this slot.
 * @slot icon - The preferred way to add an icon to the component.
+* @testSelector byText byText
+* @testAction dismiss clickButton #dismissButton
+* @testRef dismissButton shadowButton .dismiss-button
 */
-var Badge = class extends AffixIconWithTrailing(VividElement) {};
-__decorate([attr], Badge.prototype, "connotation", void 0);
-__decorate([attr], Badge.prototype, "shape", void 0);
-__decorate([attr], Badge.prototype, "size", void 0);
-__decorate([attr], Badge.prototype, "appearance", void 0);
-__decorate([attr], Badge.prototype, "text", void 0);
-//#endregion
-//#region src/lib/badge/badge.scss?inline
-var badge_default = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary:var(--vvd-badge-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-badge-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-intermediate:var(--vvd-badge-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-soft:var(--vvd-badge-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-badge-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-pale:var(--vvd-badge-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-badge-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-fierce-primary:var(--vvd-badge-cta-fierce-primary,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-badge-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-badge-cta-firm-all,var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary:var(--vvd-badge-success-primary,var(--vvd-color-success-500));--_connotation-color-primary-text:var(--vvd-badge-success-primary-text,var(--vvd-color-canvas));--_connotation-color-intermediate:var(--vvd-badge-success-intermediate,var(--vvd-color-success-500));--_connotation-color-soft:var(--vvd-badge-success-soft,var(--vvd-color-success-100));--_connotation-color-contrast:var(--vvd-badge-success-contrast,var(--vvd-color-success-800));--_connotation-color-pale:var(--vvd-badge-success-pale,var(--vvd-color-success-300));--_connotation-color-fierce:var(--vvd-badge-success-fierce,var(--vvd-color-success-700));--_connotation-color-fierce-primary:var(--vvd-badge-success-fierce-primary,var(--vvd-color-success-700));--_connotation-color-firm:var(--vvd-badge-success-firm,var(--vvd-color-success-600));--_connotation-color-firm-all:var(--vvd-badge-success-firm-all,var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary:var(--vvd-badge-alert-primary,var(--vvd-color-alert-500));--_connotation-color-primary-text:var(--vvd-badge-alert-primary-text,var(--vvd-color-canvas));--_connotation-color-intermediate:var(--vvd-badge-alert-intermediate,var(--vvd-color-alert-500));--_connotation-color-soft:var(--vvd-badge-alert-soft,var(--vvd-color-alert-100));--_connotation-color-contrast:var(--vvd-badge-alert-contrast,var(--vvd-color-alert-800));--_connotation-color-pale:var(--vvd-badge-alert-pale,var(--vvd-color-alert-300));--_connotation-color-fierce:var(--vvd-badge-alert-fierce,var(--vvd-color-alert-700));--_connotation-color-fierce-primary:var(--vvd-badge-alert-fierce-primary,var(--vvd-color-alert-700));--_connotation-color-firm:var(--vvd-badge-alert-firm,var(--vvd-color-alert-600));--_connotation-color-firm-all:var(--vvd-badge-alert-firm-all,var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary:var(--vvd-badge-warning-primary,var(--vvd-color-warning-300));--_connotation-color-primary-text:var(--vvd-badge-warning-primary-text,var(--vvd-color-canvas-text));--_connotation-color-intermediate:var(--vvd-badge-warning-intermediate,var(--vvd-color-warning-300));--_connotation-color-soft:var(--vvd-badge-warning-soft,var(--vvd-color-warning-100));--_connotation-color-contrast:var(--vvd-badge-warning-contrast,var(--vvd-color-warning-800));--_connotation-color-pale:var(--vvd-badge-warning-pale,var(--vvd-color-warning-300));--_connotation-color-fierce:var(--vvd-badge-warning-fierce,var(--vvd-color-warning-700));--_connotation-color-fierce-primary:var(--vvd-badge-warning-fierce-primary,var(--vvd-color-warning-300));--_connotation-color-firm:var(--vvd-badge-warning-firm,var(--vvd-color-warning-600));--_connotation-color-firm-all:var(--vvd-badge-warning-firm-all,var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary:var(--vvd-badge-information-primary,var(--vvd-color-information-500));--_connotation-color-primary-text:var(--vvd-badge-information-primary-text,var(--vvd-color-canvas));--_connotation-color-intermediate:var(--vvd-badge-information-intermediate,var(--vvd-color-information-500));--_connotation-color-soft:var(--vvd-badge-information-soft,var(--vvd-color-information-100));--_connotation-color-contrast:var(--vvd-badge-information-contrast,var(--vvd-color-information-800));--_connotation-color-pale:var(--vvd-badge-information-pale,var(--vvd-color-information-300));--_connotation-color-fierce:var(--vvd-badge-information-fierce,var(--vvd-color-information-700));--_connotation-color-fierce-primary:var(--vvd-badge-information-fierce-primary,var(--vvd-color-information-700));--_connotation-color-firm:var(--vvd-badge-information-firm,var(--vvd-color-information-600));--_connotation-color-firm-all:var(--vvd-badge-information-firm-all,var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary:var(--vvd-badge-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-badge-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-intermediate:var(--vvd-badge-announcement-intermediate,var(--vvd-color-announcement-500));--_connotation-color-soft:var(--vvd-badge-announcement-soft,var(--vvd-color-announcement-100));--_connotation-color-contrast:var(--vvd-badge-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-pale:var(--vvd-badge-announcement-pale,var(--vvd-color-announcement-300));--_connotation-color-fierce:var(--vvd-badge-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-fierce-primary:var(--vvd-badge-announcement-fierce-primary,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-badge-announcement-firm,var(--vvd-color-announcement-600));--_connotation-color-firm-all:var(--vvd-badge-announcement-firm-all,var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary:var(--vvd-badge-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-badge-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-intermediate:var(--vvd-badge-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-soft:var(--vvd-badge-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-badge-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-pale:var(--vvd-badge-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-badge-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-fierce-primary:var(--vvd-badge-accent-fierce-primary,var(--vvd-color-canvas-text));--_connotation-color-firm:var(--vvd-badge-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-badge-accent-firm-all,var(--vvd-color-neutral-600))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.appearance-subtle-light{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-condensed-bold);vertical-align:middle;justify-content:center;align-items:center;column-gap:8px;inline-size:100%;padding-inline:8px;display:inline-flex}.base:not(.size-expanded){--_badge-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.base.size-expanded{--_badge-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;place-content:center;padding-inline:0}@supports (aspect-ratio:1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio:1){.base.icon-only{inline-size:var(--_badge-block-size)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.text{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(var(--_badge-block-size) / 1.6667);flex-shrink:0;line-height:1}.icon-trailing slot[name=icon]{order:1;display:flex}";
+var Banner = class extends AffixIcon(Localized(DelegatesAria(VividElement))) {
+	constructor(..._args) {
+		super(..._args);
+		this.dismissButtonAriaLabel = null;
+		this.removable = false;
+		this.#handleRemoveEnd = () => {
+			this.$emit("removed");
+			this.parentElement?.removeChild(this);
+		};
+		this.#closeOnKeyDown = (e) => {
+			if (e.key !== "Escape" || !this.removable) return;
+			this.remove();
+		};
+	}
+	get conditionedIcon() {
+		return this.icon ?? getConnotationIcon(this.connotation);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("keydown", this.#closeOnKeyDown);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("keydown", this.#closeOnKeyDown);
+	}
+	remove() {
+		this.$emit("removing");
+		const banner = this.shadowRoot && this.shadowRoot.querySelector(".control");
+		banner?.classList.add("removing");
+		banner?.addEventListener("transitionend", this.#handleRemoveEnd);
+	}
+	#handleRemoveEnd;
+	#closeOnKeyDown;
+};
+__decorate([attr({ attribute: "dismiss-aria-label" })], Banner.prototype, "dismissButtonAriaLabel", void 0);
+__decorate([attr({ mode: "boolean" })], Banner.prototype, "removable", void 0);
+__decorate([attr()], Banner.prototype, "text", void 0);
+__decorate([attr()], Banner.prototype, "connotation", void 0);
+__decorate([observable], Banner.prototype, "actionItemsSlottedContent", void 0);
 //#endregion
-//#region src/lib/badge/badge.template.ts
-var getClasses = ({ iconSlottedContent, connotation, appearance, shape, size, iconTrailing, text, icon }) => classNames("base", [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`size-${size}`, Boolean(size)], ["icon-trailing", iconTrailing], ["icon-only", !text && (Boolean(icon) || Boolean(iconSlottedContent?.length))]);
-var badgeTemplate = (context) => {
-	const affixIconTemplate = affixIconTemplateFactory(context);
-	return html` <span class="${getClasses}">
-		${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-		${when((x) => x.text, (x) => html`<span class="text">${x.text}</span>`)}
-	</span>`;
+//#region src/lib/banner/banner.template.ts
+var getClasses = (_) => classNames("control", [`connotation-${_.connotation}`, !!_.connotation]);
+function renderDismissButton(buttonTag) {
+	return html`
+	  <${buttonTag}
+	  		aria-label="${(x) => x.dismissButtonAriaLabel || x.locale.banner.dismissButtonLabel}"
+			part="${(x) => x.connotation === "warning" ? "" : "vvd-theme-alternate"}"
+			size="condensed"
+			class="dismiss-button"
+			icon="close-line"
+			@click="${(x) => x.remove()}">
+	  </${buttonTag}>`;
+}
+var renderIcon = (c, x) => {
+	const affixIconTemplate = affixIconTemplateFactory(c);
+	const icon = x.conditionedIcon;
+	const announcement = !x.icon && x.connotation ? {
+		label: x.locale.connotationAnnoncement[`${x.connotation}Icon`],
+		announceOnUpdate: false
+	} : void 0;
+	return affixIconTemplate(icon, IconWrapper.Slot, IconAriaHidden.Hidden, announcement);
+};
+var BannerTemplate = (context) => {
+	const buttonTag = context.tagFor(Button);
+	return html`
+		<div class="${getClasses}">
+			<header class="header">
+				<div class="content">
+					${(x) => renderIcon(context, x)}
+					<div
+						class="banner-message"
+						${delegateAria({
+		role: (x) => x.role ? x.role : "status",
+		ariaLive: (x) => x.ariaLive ? x.ariaLive : "polite"
+	})}
+					>
+						${(x) => x.text}
+					</div>
+					<slot
+						class="action-items"
+						${slotted("actionItemsSlottedContent")}
+						name="action-items"
+					></slot>
+				</div>
+
+				${when((x) => x.removable, renderDismissButton(buttonTag))}
+			</header>
+		</div>
+	`;
 };
 //#endregion
-//#region src/lib/badge/definition.ts
-/**
-* @internal
-*/
-var badgeDefinition = defineVividComponent("badge", Badge, badgeTemplate, [iconDefinition], { styles: badge_default });
+//#region src/lib/banner/definition.ts
+/** @internal */
+var bannerDefinition = defineVividComponent("banner", Banner, BannerTemplate, [iconDefinition, buttonDefinition], { styles: banner_default });
 /**
-* Registers the badge elements with the design system.
+* Registers the banner elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerBadge = createRegisterFunction(badgeDefinition);
+var registerBanner = createRegisterFunction(bannerDefinition);
 //#endregion
-export { registerBadge as n, Badge as r, badgeDefinition as t };
+export { registerBanner as n, Banner as r, bannerDefinition as t };