@nldd/design-system 0.8.56 → 0.8.58

package/dist/components/navigation/tab-bar/tab-bar.styles.js

@@ -6,6 +6,10 @@ export const tabBarStyles = css `
 	/* # Host */
 
 	:host {
+		--_gap: var(--primitives-space-1);
+		--_z-index-selected: 1;
+		--_z-index-focus: 2;
+
 		${inheritedTextReset}
 		display: inline-block;
 		position: relative;
@@ -39,23 +43,39 @@ export const tabBarStyles = css `
 
 	.tab-bar__items {
 		display: flex;
+		position: relative;
 		border-radius: var(--semantics-controls-md-corner-radius);
 		background-color: var(--semantics-buttons-neutral-tinted-background-color);
 		flex-direction: row;
 		align-items: center;
 		justify-content: center;
+		gap: var(--_gap);
 	}
 
-	:host([variant="compact"]) .tab-bar__items {
+	:host([size="lg"]) .tab-bar__items {
 		border-radius: var(--semantics-controls-lg-corner-radius);
 	}
 
+	.tab-bar__items::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		border-radius: inherit;
+		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--semantics-buttons-neutral-tinted-highlight-border-color);
+		pointer-events: none;
+	}
+
 
 	/* # Focus */
 
+	::slotted(nldd-tab-bar-item[selected]) {
+		position: relative;
+		z-index: var(--_z-index-selected);
+	}
+
 	::slotted(nldd-tab-bar-item:focus-within) {
 		position: relative;
-		z-index: 1;
+		z-index: var(--_z-index-focus);
 	}
 `;
 export const tabBarItemStyles = css `
@@ -64,6 +84,10 @@ export const tabBarItemStyles = css `
 	/* # Host */
 
 	:host {
+		--_lg-item-padding: var(--primitives-space-8);
+		--_highlight-border-color: transparent;
+		--_z-index-content: 1;
+
 		${inheritedTextReset}
 		display: inline-block;
 		position: relative;
@@ -88,59 +112,82 @@ export const tabBarItemStyles = css `
 		padding: 0;
 		align-items: center;
 		justify-content: center;
-		color: var(--semantics-buttons-neutral-tinted-content-color);
-		font: var(--semantics-buttons-md-font);
+		color: var(--semantics-buttons-neutral-tinted-primary-content-color);
+		font: var(--semantics-buttons-md-primary-text-font);
 		text-decoration: none;
 		appearance: none;
 	}
 
-	:host([variant="icon-and-text"]) .tab-bar__item {
+	a.tab-bar__item {
+		cursor: var(--semantics-controls-link-cursor);
+	}
+
+	:host([variant="icon-and-text"]:not([size="lg"])) .tab-bar__item {
 		height: var(--semantics-controls-md-min-size);
 		padding: var(--primitives-space-8) var(--primitives-space-12);
 		gap: var(--semantics-buttons-md-gap);
 	}
 
-	:host([variant="text"]) .tab-bar__item {
+	:host([variant="text"]:not([size="lg"])) .tab-bar__item {
 		height: var(--semantics-controls-md-min-size);
 		padding: var(--primitives-space-8) var(--primitives-space-12);
 	}
 
-	:host([variant="icon"]) .tab-bar__item {
+	:host([variant="icon"]:not([size="lg"])) .tab-bar__item {
 		width: var(--semantics-controls-md-min-size);
 		height: var(--semantics-controls-md-min-size);
 		padding: 0;
 	}
 
-	:host([variant="compact"]) .tab-bar__item {
+	:host([variant="icon-and-text"][size="lg"]) .tab-bar__item {
 		height: var(--semantics-controls-lg-min-size);
-		padding: var(--primitives-space-8);
+		padding: var(--_lg-item-padding);
 		flex-direction: column;
 	}
 
+	:host([variant="text"][size="lg"]) .tab-bar__item {
+		min-height: var(--semantics-controls-lg-min-size);
+		padding: var(--semantics-controls-lg-block-padding) var(--primitives-space-16);
+		font: var(--semantics-buttons-lg-primary-text-font);
+	}
+
+	:host([variant="icon"][size="lg"]) .tab-bar__item {
+		width: var(--semantics-controls-lg-min-size);
+		height: var(--semantics-controls-lg-min-size);
+		padding: var(--_lg-item-padding);
+	}
+
 	@media (hover: hover) {
 		.tab-bar__item:hover {
 			background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
 		}
 
 		:host([selected]) .tab-bar__item:hover {
+			--_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
+
 			background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-background-color);
-			color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
+			color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-primary-content-color);
 		}
 	}
 
 	.tab-bar__item:active {
 		background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
+		color: var(--semantics-buttons-neutral-tinted-is-active-primary-content-color);
 	}
 
 	:host([selected]) .tab-bar__item {
+		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-highlight-border-color);
+
 		background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-primary-content-color);
+		box-shadow: inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
 	}
 
 	:host([selected]) .tab-bar__item:active {
+		--_highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
+
 		background-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-primary-content-color);
 	}
 
 	@media (forced-colors: active) {
@@ -155,13 +202,17 @@ export const tabBarItemStyles = css `
 		box-shadow: var(--semantics-focus-ring-box-shadow);
 	}
 
+	:host([selected]) .tab-bar__item:focus-visible {
+		box-shadow: var(--semantics-focus-ring-box-shadow), inset 0 0 0 var(--primitives-border-width-thin) var(--_highlight-border-color);
+	}
+
 
 	/* # Elements */
 
 	.tab-bar__item-icon {
 		display: flex;
 		position: relative;
-		z-index: 1;
+		z-index: var(--_z-index-content);
 		width: var(--semantics-buttons-md-icon-size);
 		height: var(--semantics-buttons-md-icon-size);
 		flex-shrink: 0;
@@ -169,16 +220,21 @@ export const tabBarItemStyles = css `
 		justify-content: center;
 	}
 
-	:host([variant="icon"]) .tab-bar__item-icon {
+	:host([variant="icon"]:not([size="lg"])) .tab-bar__item-icon {
 		width: var(--semantics-buttons-md-icon-only-icon-size);
 		height: var(--semantics-buttons-md-icon-only-icon-size);
 	}
 
-	:host([variant="compact"]) .tab-bar__item-icon {
+	:host([variant="icon-and-text"][size="lg"]) .tab-bar__item-icon {
 		width: var(--semantics-buttons-md-icon-only-icon-size);
 		height: var(--semantics-buttons-md-icon-only-icon-size);
 	}
 
+	:host([variant="icon"][size="lg"]) .tab-bar__item-icon {
+		width: var(--semantics-buttons-lg-icon-only-icon-size);
+		height: var(--semantics-buttons-lg-icon-only-icon-size);
+	}
+
 	:host([variant="text"]) .tab-bar__item-icon {
 		display: none;
 	}
@@ -191,10 +247,10 @@ export const tabBarItemStyles = css `
 
 	.tab-bar__item-text {
 		position: relative;
-		z-index: 1;
+		z-index: var(--_z-index-content);
 	}
 
-	:host([variant="compact"]) .tab-bar__item-text {
+	:host([variant="icon-and-text"][size="lg"]) .tab-bar__item-text {
 		font: var(--primitives-font-body-xxs-medium-flat);
 	}
 

package/dist/components/navigation/tab-bar/tab-bar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/tab-bar/tab-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;IAM3B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDrB,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;IAM/B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyIrB,CAAC"}
+{"version":3,"file":"tab-bar.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/tab-bar/tab-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;IAU3B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmErB,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;IAU/B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyKrB,CAAC"}

package/dist/components/navigation/tab-bar/tab-bar.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-bar.template.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tab-bar/tab-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,kCAAkC,CAAC;AAC1C,OAAO,4BAA4B,CAAC;AAGpC,wBAAgB,cAAc,CAAC,SAAS,EAAE,UAAU,GAAG,cAAc,CA0BpE;AAED,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,cAAc,GAAG,cAAc,CAkD5E"}
+{"version":3,"file":"tab-bar.template.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tab-bar/tab-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,kCAAkC,CAAC;AAC1C,OAAO,4BAA4B,CAAC;AAGpC,wBAAgB,cAAc,CAAC,SAAS,EAAE,UAAU,GAAG,cAAc,CA4BpE;AAED,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,cAAc,GAAG,cAAc,CAuD5E"}

package/dist/components/navigation/tab-bar/tab-bar.template.js

@@ -15,7 +15,9 @@ export function tabBarTemplate(component) {
 	`;
     if (isNavigation) {
         return html `
-			<nav class="tab-bar" aria-label=${label}>
+			<nav class="tab-bar"
+				aria-label=${label}
+			>
 				${itemsContainer}
 			</nav>
 		`;
@@ -33,11 +35,16 @@ export function tabBarItemTemplate(component) {
     const tabindex = component.selected || component._isFallbackFocusable ? '0' : '-1';
     const isIconVariant = component._effectiveVariant === 'icon';
     const iconLabel = isIconVariant ? component.text || nothing : nothing;
+    /* The icon and icon-and-text variants reserve an icon area; fill it with a
+     * placeholder whenever the consumer provided no icon. */
+    const showPlaceholder = isIconVariant || component._effectiveVariant === 'icon-and-text';
     const content = html `
-		<span class="tab-bar__item-icon" aria-hidden="true">
+		<span class="tab-bar__item-icon"
+			aria-hidden="true"
+		>
 			${component.icon
         ? html `<nldd-icon name=${component.icon}></nldd-icon>`
-        : html `<slot name="icon" @slotchange=${component._onIconSlotChange}>${isIconVariant ? html `<nldd-icon name="icon-placeholder"></nldd-icon>` : nothing}</slot>`}
+        : html `<slot name="icon" @slotchange=${component._onIconSlotChange}>${showPlaceholder ? html `<nldd-icon name="icon-placeholder"></nldd-icon>` : nothing}</slot>`}
 		</span>
 		<span class="tab-bar__item-text">
 			${component.text}

package/dist/components/navigation/tab-bar/tab-bar.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-bar.template.js","sourceRoot":"","sources":["../../../../src/components/navigation/tab-bar/tab-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAEpD,OAAO,kCAAkC,CAAC;AAC1C,OAAO,4BAA4B,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEjE,MAAM,UAAU,cAAc,CAAC,SAAqB;IACnD,MAAM,KAAK,GAAG,SAAS,CAAC,eAAe,IAAI,MAAM,CAAC;IAClD,MAAM,YAAY,GAAG,SAAS,CAAC,UAAU,CAAC;IAE1C,MAAM,cAAc,GAAG,IAAI,CAAA;;UAElB,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;gBAC5B,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;;uBAEvB,SAAS,CAAC,aAAa;;EAE5C,CAAC;IAEF,IAAI,YAAY,EAAE,CAAC;QAClB,OAAO,IAAI,CAAA;qCACwB,KAAK;MACpC,cAAc;;GAEjB,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;;KAEP,cAAc;;EAEjB,CAAC;AACH,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,SAAyB;IAC3D,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,MAAM,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjC,MAAM,YAAY,GAAG,SAAS,CAAC,WAAW,CAAC;IAC3C,MAAM,QAAQ,GAAG,SAAS,CAAC,QAAQ,IAAI,SAAS,CAAC,oBAAoB,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IACnF,MAAM,aAAa,GAAG,SAAS,CAAC,iBAAiB,KAAK,MAAM,CAAC;IAC7D,MAAM,SAAS,GAAG,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;IAEtE,MAAM,OAAO,GAAG,IAAI,CAAA;;KAEhB,SAAS,CAAC,IAAI;QACf,CAAC,CAAC,IAAI,CAAA,mBAAmB,SAAS,CAAC,IAAI,eAAe;QACtD,CAAC,CAAC,IAAI,CAAA,iCAAiC,SAAS,CAAC,iBAAiB,IAAI,aAAa,CAAC,CAAC,CAAC,IAAI,CAAA,iDAAiD,CAAC,CAAC,CAAC,OAAO,SAAS;;;KAG7J,SAAS,CAAC,IAAI;;EAEjB,CAAC;IAEF,IAAI,MAAsB,CAAC;IAE3B,IAAI,MAAM,EAAE,CAAC;QACZ,MAAM,GAAG,IAAI,CAAA;;WAEJ,QAAS;WACT,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;mBACtB,YAAY,IAAI,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;oBACpD,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO;iBACpE,SAAS;eACX,QAAQ;aACV,SAAS,CAAC,YAAY;MAC7B,OAAO;GACV,CAAC;IACH,CAAC;SAAM,CAAC;QACP,MAAM,GAAG,IAAI,CAAA;;;;oBAIK,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;iBACxC,SAAS;eACX,QAAQ;aACV,SAAS,CAAC,YAAY;MAC7B,OAAO;GACV,CAAC;IACH,CAAC;IAED,IAAI,aAAa,IAAI,SAAS,CAAC,IAAI,EAAE,CAAC;QACrC,OAAO,IAAI,CAAA,sBAAsB,SAAS,CAAC,IAAI,IAAI,MAAM,iBAAiB,CAAC;IAC5E,CAAC;IACD,OAAO,MAAM,CAAC;AACf,CAAC"}
+{"version":3,"file":"tab-bar.template.js","sourceRoot":"","sources":["../../../../src/components/navigation/tab-bar/tab-bar.template.ts"],"names":[],"mappings":"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"}

package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js

@@ -11,7 +11,7 @@ export const topNavigationBarStyles = css `
 	/* # Host */
 
 	:host {
-		--_logo-width: var(--primitives-space-40);
+		--_logo-width: var(--semantics-brand-ribbon-sm-width);
 		--_wordmark-content-color: light-dark(var(--primitives-color-reference-lintblauw), var(--primitives-color-neutral-1000));
 
 		${inheritedTextReset}
@@ -69,15 +69,15 @@ export const topNavigationBarStyles = css `
 		justify-content: center;
 
 		@container (max-width: ${smMax}) {
-			--_logo-width: var(--primitives-space-40);
+			--_logo-width: var(--semantics-brand-ribbon-sm-width);
 		}
 
 		@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
-			--_logo-width: var(--primitives-space-44);
+			--_logo-width: var(--semantics-brand-ribbon-md-width);
 		}
 
 		@container (min-width: ${lgMin}) {
-			--_logo-width: var(--primitives-space-48);
+			--_logo-width: var(--semantics-brand-ribbon-lg-width);
 		}
 	}
 

package/dist/components/navigation/top-title-bar/top-title-bar.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top-title-bar.template.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/top-title-bar/top-title-bar.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,gCAAgC,CAAC;AACxC,OAAO,0CAA0C,CAAC;AAElD,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,eAAe,wCAoD7D"}
+{"version":3,"file":"top-title-bar.template.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/top-title-bar/top-title-bar.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,gCAAgC,CAAC;AACxC,OAAO,0CAA0C,CAAC;AAElD,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,eAAe,wCAsD7D"}

package/dist/components/navigation/top-title-bar/top-title-bar.template.js

@@ -38,7 +38,9 @@ export function topTitleBarTemplate(component) {
 					` : nothing}
 				</div>
 			</div>
-			<div class="top-title-bar__end" ?hidden=${!component.dismissText && !component._hasToolbarItems}>
+			<div class="top-title-bar__end"
+				?hidden=${!component.dismissText && !component._hasToolbarItems}
+			>
 				<slot name="toolbar" @slotchange=${component._onToolbarSlotChange}></slot>
 				${component.dismissText ? html `
 					<div class="top-title-bar__dismiss-button">

package/dist/components/navigation/top-title-bar/top-title-bar.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-title-bar.template.js","sourceRoot":"","sources":["../../../../src/components/navigation/top-title-bar/top-title-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,0CAA0C,CAAC;AAElD,MAAM,UAAU,mBAAmB,CAAC,SAA0B;IAC7D,MAAM,QAAQ,GAAG,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC;IAEtC,OAAO,IAAI,CAAA;;;MAGN,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;eAMN,SAAS,CAAC,QAAQ;eAClB,SAAS,CAAC,QAAQ,IAAI,OAAO;;iBAE3B,SAAS,CAAC,WAAW;;;;;;;eAOvB,SAAS,CAAC,QAAQ;2BACN,SAAS,CAAC,QAAQ,IAAI,OAAO;eACzC,SAAS,CAAC,QAAQ,IAAI,OAAO;iBAC3B,SAAS,CAAC,WAAW;;;;;KAKjC,CAAC,CAAC,CAAC,OAAO;;wCAEyB,SAAS,CAAC,IAAI;OAC/C,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA;2CACK,SAAS,CAAC,cAAc;MAC7D,CAAC,CAAC,CAAC,OAAO;;;6CAG6B,CAAC,SAAS,CAAC,WAAW,IAAI,CAAC,SAAS,CAAC,gBAAgB;uCAC3D,SAAS,CAAC,oBAAoB;MAC/D,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA;;;;cAIpB,SAAS,CAAC,WAAW;gBACnB,SAAS,CAAC,cAAc;;;KAGnC,CAAC,CAAC,CAAC,OAAO;;;EAGb,CAAC;AACH,CAAC"}
+{"version":3,"file":"top-title-bar.template.js","sourceRoot":"","sources":["../../../../src/components/navigation/top-title-bar/top-title-bar.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAEpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,0CAA0C,CAAC;AAElD,MAAM,UAAU,mBAAmB,CAAC,SAA0B;IAC7D,MAAM,QAAQ,GAAG,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC;IAEtC,OAAO,IAAI,CAAA;;;MAGN,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;eAMN,SAAS,CAAC,QAAQ;eAClB,SAAS,CAAC,QAAQ,IAAI,OAAO;;iBAE3B,SAAS,CAAC,WAAW;;;;;;;eAOvB,SAAS,CAAC,QAAQ;2BACN,SAAS,CAAC,QAAQ,IAAI,OAAO;eACzC,SAAS,CAAC,QAAQ,IAAI,OAAO;iBAC3B,SAAS,CAAC,WAAW;;;;;KAKjC,CAAC,CAAC,CAAC,OAAO;;wCAEyB,SAAS,CAAC,IAAI;OAC/C,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAA;2CACK,SAAS,CAAC,cAAc;MAC7D,CAAC,CAAC,CAAC,OAAO;;;;cAIF,CAAC,SAAS,CAAC,WAAW,IAAI,CAAC,SAAS,CAAC,gBAAgB;;uCAE5B,SAAS,CAAC,oBAAoB;MAC/D,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA;;;;cAIpB,SAAS,CAAC,WAAW;gBACnB,SAAS,CAAC,cAAc;;;KAGnC,CAAC,CAAC,CAAC,OAAO;;;EAGb,CAAC;AACH,CAAC"}

package/dist/components/{prism-python-QiimuE8j.js → prism-python-BzzeiWRd.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs } from "./index-C3JellW2.js";
+import { g as getDefaultExportFromCjs } from "./index-C2jQOZa6.js";
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {
     const e = m[i];

package/dist/components/{prism-rust-D4vfxUpk.js → prism-rust-DzgIGUtE.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs } from "./index-C3JellW2.js";
+import { g as getDefaultExportFromCjs } from "./index-C2jQOZa6.js";
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {
     const e = m[i];

package/dist/components/{prism-typescript-Dy2F4cF2.js → prism-typescript-KyVBIohW.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs } from "./index-C3JellW2.js";
+import { g as getDefaultExportFromCjs } from "./index-C2jQOZa6.js";
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {
     const e = m[i];

package/dist/components/status-and-feedback/badge/badge.d.ts

@@ -16,7 +16,7 @@
  */
 import { LitElement } from 'lit';
 import './../../content/icon/icon.js';
-type Color = 'critical' | 'accent' | 'neutral' | 'warning' | 'success' | 'coolgray' | 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen';
+type Color = 'critical' | 'accent' | 'neutral' | 'warning' | 'success' | 'lintblauw' | 'donkerblauw' | 'hemelblauw' | 'lichtblauw' | 'paars' | 'violet' | 'robijnrood' | 'roze' | 'rood' | 'oranje' | 'donkergeel' | 'geel' | 'donkerbruin' | 'bruin' | 'donkergroen' | 'groen' | 'mosgroen' | 'mintgroen';
 type Size = 'sm' | 'md';
 declare const NLDDBadge_base: (abstract new (...args: any[]) => LitElement & {
     translations: Partial<{

package/dist/components/status-and-feedback/badge/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,OAAO,8BAA8B,CAAC;AAEtC,KAAK,KAAK,GACP,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GACzD,UAAU,GACV,WAAW,GAAG,aAAa,GAAG,YAAY,GAAG,YAAY,GACzD,OAAO,GAAG,QAAQ,GAClB,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GACzC,YAAY,GAAG,MAAM,GACrB,aAAa,GAAG,OAAO,GACvB,aAAa,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;AACtD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;;;;;;AAExB,qBACa,SAAU,SAAQ,cAAmD;IACjF,OAAgB,MAAM,0BAAe;IAGrC,KAAK,EAAE,KAAK,CAAc;IAG1B,IAAI,EAAE,IAAI,CAAQ;IAGlB,IAAI,SAAM;IAGV,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAGvC,GAAG,SAAM;IAGT,IAAI,SAAM;IAGV,eAAe,SAAM;IAErB,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,aAAa,IAAI,MAAM,CAM1B;IAED,IAAI,UAAU,IAAI,MAAM,CAIvB;IAEQ,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,OAAO,8BAA8B,CAAC;AAEtC,KAAK,KAAK,GACP,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GACzD,WAAW,GAAG,aAAa,GAAG,YAAY,GAAG,YAAY,GACzD,OAAO,GAAG,QAAQ,GAClB,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GACzC,YAAY,GAAG,MAAM,GACrB,aAAa,GAAG,OAAO,GACvB,aAAa,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,CAAC;AACtD,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;;;;;;AAExB,qBACa,SAAU,SAAQ,cAAmD;IACjF,OAAgB,MAAM,0BAAe;IAGrC,KAAK,EAAE,KAAK,CAAc;IAG1B,IAAI,EAAE,IAAI,CAAQ;IAGlB,IAAI,SAAM;IAGV,MAAM,EAAE,MAAM,GAAG,SAAS,CAAa;IAGvC,GAAG,SAAM;IAGT,IAAI,SAAM;IAGV,eAAe,SAAM;IAErB,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,aAAa,IAAI,MAAM,CAM1B;IAED,IAAI,UAAU,IAAI,MAAM,CAIvB;IAEQ,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

package/dist/components/status-and-feedback/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.ts"],"names":[],"mappings":"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"}

package/dist/components/status-and-feedback/badge/badge.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,yBAsPvB,CAAC"}
+{"version":3,"file":"badge.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,yBAgPvB,CAAC"}

package/dist/components/status-and-feedback/badge/badge.styles.js

@@ -6,13 +6,13 @@ export const badgeStyles = css `
 	/* # Host */
 
 	:host {
-		--_background-color: var(--components-badge-critical-background-color);
-		--_border-color: var(--components-badge-critical-border-color);
+		--_background-color: var(--semantics-categories-critical-filled-background-color);
+		--_border-color: var(--semantics-categories-critical-filled-highlight-border-color);
 		--_border-width: var(--components-badge-border-width);
 		--_height: var(--primitives-space-20);
 		--_inline-padding: var(--primitives-space-6);
 		--_gap: var(--primitives-space-3);
-		--_content-color: var(--components-badge-critical-content-color);
+		--_content-color: var(--semantics-categories-critical-filled-primary-content-color);
 		--_font: var(--primitives-font-body-xs-medium-flat);
 		--_dot-size: var(--primitives-space-10);
 		--_icon-size: var(--primitives-space-14);
@@ -35,144 +35,138 @@ export const badgeStyles = css `
 	/* ## Color */
 
 	:host([color="accent"]) {
-		--_background-color: var(--components-badge-accent-background-color);
-		--_border-color: var(--components-badge-accent-border-color);
-		--_content-color: var(--components-badge-accent-content-color);
+		--_background-color: var(--semantics-categories-accent-filled-background-color);
+		--_border-color: var(--semantics-categories-accent-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-accent-filled-primary-content-color);
 	}
 
 	:host([color="neutral"]) {
-		--_background-color: var(--components-badge-neutral-background-color);
-		--_border-color: var(--components-badge-neutral-border-color);
-		--_content-color: var(--components-badge-neutral-content-color);
+		--_background-color: var(--semantics-categories-neutral-filled-background-color);
+		--_border-color: var(--semantics-categories-neutral-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-neutral-filled-primary-content-color);
 	}
 
 	:host([color="warning"]) {
-		--_background-color: var(--components-badge-warning-background-color);
-		--_border-color: var(--components-badge-warning-border-color);
-		--_content-color: var(--components-badge-warning-content-color);
+		--_background-color: var(--semantics-categories-warning-filled-background-color);
+		--_border-color: var(--semantics-categories-warning-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-warning-filled-primary-content-color);
 	}
 
 	:host([color="success"]) {
-		--_background-color: var(--components-badge-success-background-color);
-		--_border-color: var(--components-badge-success-border-color);
-		--_content-color: var(--components-badge-success-content-color);
+		--_background-color: var(--semantics-categories-success-filled-background-color);
+		--_border-color: var(--semantics-categories-success-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-success-filled-primary-content-color);
 	}
 
 
 	/* ## Color — rijkskleuren */
 
-	:host([color="coolgray"]) {
-		--_background-color: var(--components-badge-coolgray-background-color);
-		--_border-color: var(--components-badge-coolgray-border-color);
-		--_content-color: var(--components-badge-coolgray-content-color);
-	}
-
 	:host([color="lintblauw"]) {
-		--_background-color: var(--components-badge-lintblauw-background-color);
-		--_border-color: var(--components-badge-lintblauw-border-color);
-		--_content-color: var(--components-badge-lintblauw-content-color);
+		--_background-color: var(--semantics-categories-lintblauw-filled-background-color);
+		--_border-color: var(--semantics-categories-lintblauw-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-lintblauw-filled-primary-content-color);
 	}
 
 	:host([color="donkerblauw"]) {
-		--_background-color: var(--components-badge-donkerblauw-background-color);
-		--_border-color: var(--components-badge-donkerblauw-border-color);
-		--_content-color: var(--components-badge-donkerblauw-content-color);
+		--_background-color: var(--semantics-categories-donkerblauw-filled-background-color);
+		--_border-color: var(--semantics-categories-donkerblauw-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-donkerblauw-filled-primary-content-color);
 	}
 
 	:host([color="hemelblauw"]) {
-		--_background-color: var(--components-badge-hemelblauw-background-color);
-		--_border-color: var(--components-badge-hemelblauw-border-color);
-		--_content-color: var(--components-badge-hemelblauw-content-color);
+		--_background-color: var(--semantics-categories-hemelblauw-filled-background-color);
+		--_border-color: var(--semantics-categories-hemelblauw-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-hemelblauw-filled-primary-content-color);
 	}
 
 	:host([color="lichtblauw"]) {
-		--_background-color: var(--components-badge-lichtblauw-background-color);
-		--_border-color: var(--components-badge-lichtblauw-border-color);
-		--_content-color: var(--components-badge-lichtblauw-content-color);
+		--_background-color: var(--semantics-categories-lichtblauw-filled-background-color);
+		--_border-color: var(--semantics-categories-lichtblauw-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-lichtblauw-filled-primary-content-color);
 	}
 
 	:host([color="paars"]) {
-		--_background-color: var(--components-badge-paars-background-color);
-		--_border-color: var(--components-badge-paars-border-color);
-		--_content-color: var(--components-badge-paars-content-color);
+		--_background-color: var(--semantics-categories-paars-filled-background-color);
+		--_border-color: var(--semantics-categories-paars-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-paars-filled-primary-content-color);
 	}
 
 	:host([color="violet"]) {
-		--_background-color: var(--components-badge-violet-background-color);
-		--_border-color: var(--components-badge-violet-border-color);
-		--_content-color: var(--components-badge-violet-content-color);
+		--_background-color: var(--semantics-categories-violet-filled-background-color);
+		--_border-color: var(--semantics-categories-violet-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-violet-filled-primary-content-color);
 	}
 
 	:host([color="robijnrood"]) {
-		--_background-color: var(--components-badge-robijnrood-background-color);
-		--_border-color: var(--components-badge-robijnrood-border-color);
-		--_content-color: var(--components-badge-robijnrood-content-color);
+		--_background-color: var(--semantics-categories-robijnrood-filled-background-color);
+		--_border-color: var(--semantics-categories-robijnrood-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-robijnrood-filled-primary-content-color);
 	}
 
 	:host([color="roze"]) {
-		--_background-color: var(--components-badge-roze-background-color);
-		--_border-color: var(--components-badge-roze-border-color);
-		--_content-color: var(--components-badge-roze-content-color);
+		--_background-color: var(--semantics-categories-roze-filled-background-color);
+		--_border-color: var(--semantics-categories-roze-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-roze-filled-primary-content-color);
 	}
 
 	:host([color="rood"]) {
-		--_background-color: var(--components-badge-rood-background-color);
-		--_border-color: var(--components-badge-rood-border-color);
-		--_content-color: var(--components-badge-rood-content-color);
+		--_background-color: var(--semantics-categories-rood-filled-background-color);
+		--_border-color: var(--semantics-categories-rood-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-rood-filled-primary-content-color);
 	}
 
 	:host([color="oranje"]) {
-		--_background-color: var(--components-badge-oranje-background-color);
-		--_border-color: var(--components-badge-oranje-border-color);
-		--_content-color: var(--components-badge-oranje-content-color);
+		--_background-color: var(--semantics-categories-oranje-filled-background-color);
+		--_border-color: var(--semantics-categories-oranje-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-oranje-filled-primary-content-color);
 	}
 
 	:host([color="donkergeel"]) {
-		--_background-color: var(--components-badge-donkergeel-background-color);
-		--_border-color: var(--components-badge-donkergeel-border-color);
-		--_content-color: var(--components-badge-donkergeel-content-color);
+		--_background-color: var(--semantics-categories-donkergeel-filled-background-color);
+		--_border-color: var(--semantics-categories-donkergeel-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-donkergeel-filled-primary-content-color);
 	}
 
 	:host([color="geel"]) {
-		--_background-color: var(--components-badge-geel-background-color);
-		--_border-color: var(--components-badge-geel-border-color);
-		--_content-color: var(--components-badge-geel-content-color);
+		--_background-color: var(--semantics-categories-geel-filled-background-color);
+		--_border-color: var(--semantics-categories-geel-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-geel-filled-primary-content-color);
 	}
 
 	:host([color="donkerbruin"]) {
-		--_background-color: var(--components-badge-donkerbruin-background-color);
-		--_border-color: var(--components-badge-donkerbruin-border-color);
-		--_content-color: var(--components-badge-donkerbruin-content-color);
+		--_background-color: var(--semantics-categories-donkerbruin-filled-background-color);
+		--_border-color: var(--semantics-categories-donkerbruin-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-donkerbruin-filled-primary-content-color);
 	}
 
 	:host([color="bruin"]) {
-		--_background-color: var(--components-badge-bruin-background-color);
-		--_border-color: var(--components-badge-bruin-border-color);
-		--_content-color: var(--components-badge-bruin-content-color);
+		--_background-color: var(--semantics-categories-bruin-filled-background-color);
+		--_border-color: var(--semantics-categories-bruin-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-bruin-filled-primary-content-color);
 	}
 
 	:host([color="donkergroen"]) {
-		--_background-color: var(--components-badge-donkergroen-background-color);
-		--_border-color: var(--components-badge-donkergroen-border-color);
-		--_content-color: var(--components-badge-donkergroen-content-color);
+		--_background-color: var(--semantics-categories-donkergroen-filled-background-color);
+		--_border-color: var(--semantics-categories-donkergroen-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-donkergroen-filled-primary-content-color);
 	}
 
 	:host([color="groen"]) {
-		--_background-color: var(--components-badge-groen-background-color);
-		--_border-color: var(--components-badge-groen-border-color);
-		--_content-color: var(--components-badge-groen-content-color);
+		--_background-color: var(--semantics-categories-groen-filled-background-color);
+		--_border-color: var(--semantics-categories-groen-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-groen-filled-primary-content-color);
 	}
 
 	:host([color="mosgroen"]) {
-		--_background-color: var(--components-badge-mosgroen-background-color);
-		--_border-color: var(--components-badge-mosgroen-border-color);
-		--_content-color: var(--components-badge-mosgroen-content-color);
+		--_background-color: var(--semantics-categories-mosgroen-filled-background-color);
+		--_border-color: var(--semantics-categories-mosgroen-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-mosgroen-filled-primary-content-color);
 	}
 
 	:host([color="mintgroen"]) {
-		--_background-color: var(--components-badge-mintgroen-background-color);
-		--_border-color: var(--components-badge-mintgroen-border-color);
-		--_content-color: var(--components-badge-mintgroen-content-color);
+		--_background-color: var(--semantics-categories-mintgroen-filled-background-color);
+		--_border-color: var(--semantics-categories-mintgroen-filled-highlight-border-color);
+		--_content-color: var(--semantics-categories-mintgroen-filled-primary-content-color);
 	}
 
 	:host([hidden]) {

package/dist/components/status-and-feedback/badge/badge.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;IAkB1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoOrB,CAAC"}
+{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAE7E,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;IAkB1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8NrB,CAAC"}

package/dist/components/status-and-feedback/banner/banner.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"banner.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/banner/banner.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,yBA8JxB,CAAC"}
+{"version":3,"file":"banner.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/banner/banner.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,yBAgJxB,CAAC"}