@nldd/design-system 0.8.43 → 0.8.44

package/dist/components/navigation/pagination/pagination.styles.js

@@ -5,8 +5,6 @@ export const paginationStyles = css `
 	/* # Host */
 
 	:host {
-		--_pagination-page-button-indicator-inset: var(--primitives-space-4);
-
 		display: block;
 		container-type: inline-size;
 		isolation: isolate;
@@ -32,106 +30,76 @@ export const paginationStyles = css `
 
 	.pagination {
 		display: inline-flex;
-		align-items: center;
-		background-color: var(--semantics-buttons-neutral-tinted-background-color);
 		border-radius: var(--semantics-controls-md-corner-radius);
+		background-color: var(--semantics-buttons-neutral-tinted-background-color);
+		align-items: center;
+	}
+
+	.pagination__previous-button:focus-within,
+	.pagination__next-button:focus-within {
+		position: relative;
+		z-index: 1;
 	}
 
 
 	/* # Page button */
 
 	.pagination__page-button {
-		appearance: none;
+		box-sizing: border-box;
+		display: inline-flex;
+		position: relative;
+		margin: 0;
 		border: none;
+		border-radius: var(--semantics-controls-md-corner-radius);
 		background: transparent;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		height: var(--semantics-controls-md-min-size);
 		min-width: var(--semantics-controls-md-min-size);
+		height: var(--semantics-controls-md-min-size);
 		padding-block: var(--primitives-space-8);
 		padding-inline: var(--primitives-space-12);
-		font: var(--semantics-buttons-md-font);
+		align-items: center;
+		justify-content: center;
 		color: inherit;
-		box-sizing: border-box;
-		position: relative;
-		margin: 0;
+		font: var(--semantics-buttons-md-font);
+		appearance: none;
 	}
 
 	a.pagination__page-button {
 		text-decoration: none;
 	}
 
-	.pagination__page-button:focus-visible {
-		z-index: 1;
-	}
-
-	@media (hover: hover) {
-		.pagination__page-button:hover {
-			z-index: 1;
-		}
-	}
-
-	.pagination__page-button:focus-visible {
-		outline: none;
-	}
-
-	.pagination__page-button.is-current {
-		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
-	}
-
-
-	/* ## Page button indicator */
-
-	.pagination__page-button::before {
-		content: '';
-		position: absolute;
-		inset: var(--_pagination-page-button-indicator-inset);
-		border-radius: calc(var(--semantics-controls-md-corner-radius) - var(--_pagination-page-button-indicator-inset) / 2);
-		background-color: transparent;
-		pointer-events: none;
-	}
-
 	@media (hover: hover) {
-		.pagination__page-button:hover:not(.is-current)::before {
+		.pagination__page-button:hover:not(.is-current) {
 			background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
 		}
 	}
 
-	.pagination__page-button.is-current::before {
+	.pagination__page-button.is-current {
 		background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
 	}
 
-	.pagination__page-button:focus-visible::before {
+	.pagination__page-button:focus-visible {
+		z-index: 1;
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
 		box-shadow: var(--semantics-focus-ring-box-shadow);
 	}
 
 
-	/* ## Page button text */
-
-	.pagination__page-button-text {
-		position: relative;
-		z-index: 1;
-		pointer-events: none;
-	}
-
-
 	/* # Ellipsis */
 
 	.pagination__ellipsis {
+		box-sizing: border-box;
 		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		height: var(--semantics-controls-md-min-size);
+		pointer-events: none;
 		min-width: var(--semantics-controls-md-min-size);
+		height: var(--semantics-controls-md-min-size);
 		padding-block: var(--primitives-space-8);
 		padding-inline: var(--primitives-space-12);
-		font: var(--semantics-buttons-md-font);
+		align-items: center;
+		justify-content: center;
 		color: inherit;
-		box-sizing: border-box;
-		pointer-events: none;
+		font: var(--semantics-buttons-md-font);
 	}
 
 
@@ -139,48 +107,53 @@ export const paginationStyles = css `
 
 	.pagination__divider {
 		display: flex;
+		height: var(--semantics-controls-md-min-size);
 		align-items: center;
 		justify-content: center;
-		height: var(--semantics-controls-md-min-size);
 		flex-shrink: 0;
 	}
 
 	.pagination__divider-line {
+		background-color: var(--semantics-buttons-neutral-tinted-divider-color);
 		width: var(--semantics-dividers-thickness);
 		height: var(--semantics-buttons-md-divider-length);
-		background-color: var(--semantics-buttons-neutral-tinted-divider-color);
 	}
 
 
 	/* # Select (compact fallback) */
 
 	.pagination__select-wrapper {
-		position: relative;
 		display: inline-flex;
+		position: relative;
 		align-items: center;
 	}
 
 	.pagination__select {
-		appearance: none;
+		box-sizing: border-box;
+		position: relative;
+		z-index: 1;
+		margin: 0;
 		border: none;
 		background: transparent;
 		height: var(--semantics-controls-md-min-size);
 		padding-block: var(--primitives-space-8);
 		padding-inline-start: var(--primitives-space-12);
 		padding-inline-end: calc(var(--primitives-space-24) + var(--primitives-space-4));
-		font: var(--semantics-buttons-md-font);
 		color: inherit;
-		box-sizing: border-box;
-		margin: 0;
-		position: relative;
-		z-index: 1;
+		font: var(--semantics-buttons-md-font);
+		appearance: none;
 	}
 
-	.pagination__select:focus-visible {
+	.pagination__select:focus {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
-		box-shadow: var(--semantics-focus-ring-box-shadow);
 		border-radius: calc(var(--semantics-controls-md-corner-radius) - var(--primitives-space-4) / 2);
+		box-shadow: var(--semantics-focus-ring-box-shadow);
+	}
+
+	:host([is-pointer-focus]) .pagination__select:focus {
+		outline: none;
+		box-shadow: none;
 	}
 
 	.pagination__select-picker-icon {
@@ -221,14 +194,11 @@ export const paginationStyles = css `
 		}
 
 		.pagination__page-button.is-current {
-			color: HighlightText;
-		}
-
-		.pagination__page-button.is-current::before {
 			background-color: Highlight;
+			color: HighlightText;
 		}
 
-		.pagination__page-button:focus-visible::before {
+		.pagination__page-button:focus-visible {
 			outline: 2px solid CanvasText;
 		}
 	}

package/dist/components/navigation/pagination/pagination.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyOlC,CAAC"}
+{"version":3,"file":"pagination.styles.js","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2MlC,CAAC"}

package/dist/components/navigation/pagination/pagination.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.template.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/pagination.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,0CAA0C,CAAC;AAClD,OAAO,4BAA4B,CAAC;AAEpC,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,cAAc,GAAG,cAAc,CA2F5E"}
+{"version":3,"file":"pagination.template.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/pagination/pagination.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,cAAc,EAAE,MAAM,KAAK,CAAC;AACpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,0CAA0C,CAAC;AAClD,OAAO,4BAA4B,CAAC;AAEpC,wBAAgB,kBAAkB,CAAC,SAAS,EAAE,cAAc,GAAG,cAAc,CAkG5E"}

package/dist/components/navigation/pagination/pagination.template.js

@@ -41,15 +41,17 @@ export function paginationTemplate(component) {
 		<nav class="pagination"
 			aria-label=${t('components.pagination.accessibility-label')}
 		>
-			<nldd-icon-button
-				icon="chevron-left-small"
-				text=${t('components.pagination.previous-action')}
-				variant="neutral-tinted"
-				?disabled=${isDisabled || atFirst}
-				href=${hasHref && !isDisabled && !atFirst ? component._hrefForPage(component.current - 1) : nothing}
-				@click=${(e) => { if (hasHref)
+			<div class="pagination__previous-button">
+				<nldd-icon-button
+					icon="chevron-left-small"
+					text=${t('components.pagination.previous-action')}
+					variant="neutral-tinted"
+					?disabled=${isDisabled || atFirst}
+					href=${hasHref && !isDisabled && !atFirst ? component._hrefForPage(component.current - 1) : nothing}
+					@click=${(e) => { if (hasHref)
         e.preventDefault(); component._goToPage(component.current - 1); }}
-			></nldd-icon-button>
+				></nldd-icon-button>
+			</div>
 			<div class="pagination__divider" aria-hidden="true">
 				<div class="pagination__divider-line"></div>
 			</div>
@@ -64,6 +66,9 @@ export function paginationTemplate(component) {
 						aria-label=${t('components.pagination.go-to-page-label')}
 						?disabled=${isDisabled}
 						@change=${(e) => component._goToPage(Number(e.target.value))}
+						@focus=${component._handleSelectFocus}
+						@blur=${component._handleSelectBlur}
+						@keydown=${component._handleSelectKeydown}
 					>
 						${Array.from({ length: component.total }, (_, i) => i + 1).map((page) => html `
 							<option value=${page} ?selected=${page === component.current}>${page} / ${component.total}</option>
@@ -77,15 +82,17 @@ export function paginationTemplate(component) {
 			<div class="pagination__divider" aria-hidden="true">
 				<div class="pagination__divider-line"></div>
 			</div>
-			<nldd-icon-button
-				icon="chevron-right-small"
-				text=${t('components.pagination.next-action')}
-				variant="neutral-tinted"
-				?disabled=${isDisabled || atLast}
-				href=${hasHref && !isDisabled && !atLast ? component._hrefForPage(component.current + 1) : nothing}
-				@click=${(e) => { if (hasHref)
+			<div class="pagination__next-button">
+				<nldd-icon-button
+					icon="chevron-right-small"
+					text=${t('components.pagination.next-action')}
+					variant="neutral-tinted"
+					?disabled=${isDisabled || atLast}
+					href=${hasHref && !isDisabled && !atLast ? component._hrefForPage(component.current + 1) : nothing}
+					@click=${(e) => { if (hasHref)
         e.preventDefault(); component._goToPage(component.current + 1); }}
-			></nldd-icon-button>
+				></nldd-icon-button>
+			</div>
 		</nav>
 	`;
 }

package/dist/components/navigation/pagination/pagination.template.js.map

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

package/dist/components/navigation/skip-link/skip-link.styles.js

@@ -25,14 +25,14 @@ export const skipLinkStyles = css `
 		position: absolute;
 		top: 0;
 		left: 0;
-		z-index: var(--_z-index);
 		display: flex;
-		justify-content: center;
-		background-color: var(--semantics-surfaces-background-color);
+		z-index: var(--_z-index);
+		opacity: 0;
 		box-shadow: var(--_box-shadow);
 		border-radius: var(--semantics-controls-md-corner-radius);
-		opacity: 0;
+		background-color: var(--semantics-surfaces-background-color);
 		pointer-events: none;
+		justify-content: center;
 	}
 
 	.skip-link:has(:focus-visible) {
@@ -45,17 +45,17 @@ export const skipLinkStyles = css `
 
 	.skip-link__control {
 		display: inline-flex;
-		align-items: center;
-		min-height: var(--semantics-controls-md-min-size);
-		appearance: none;
 		border: none;
+		border-radius: var(--semantics-controls-sm-corner-radius);
 		background: none;
+		min-height: var(--semantics-controls-md-min-size);
+		padding: var(--primitives-space-4) var(--primitives-space-16);
+		align-items: center;
 		color: var(--semantics-links-color);
 		font: var(--primitives-font-body-md-bold-flat);
 		text-decoration: underline;
 		white-space: nowrap;
-		border-radius: var(--semantics-controls-sm-corner-radius);
-		padding: var(--primitives-space-4) var(--primitives-space-16);
+		appearance: none;
 	}
 
 	.skip-link__control:focus-visible {

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

@@ -1 +1 @@
-{"version":3,"file":"tab-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tab-bar/tab-bar.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,yBA2DxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,yBA2L5B,CAAC"}
+{"version":3,"file":"tab-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tab-bar/tab-bar.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,yBAwDxB,CAAC;AAEF,eAAO,MAAM,gBAAgB,yBAuK5B,CAAC"}

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

@@ -7,8 +7,6 @@ export const tabBarStyles = css `
 	/* # Host */
 
 	:host {
-		--_tab-bar-item-indicator-inset: var(--primitives-space-4);
-
 		display: inline-block;
 		position: relative;
 		isolation: isolate;
@@ -40,12 +38,11 @@ export const tabBarStyles = css `
 
 	.tab-bar__items {
 		display: flex;
+		border-radius: var(--semantics-controls-md-corner-radius);
+		background-color: var(--semantics-buttons-neutral-tinted-background-color);
 		flex-direction: row;
 		justify-content: center;
 		align-items: center;
-		background-color: var(--semantics-buttons-neutral-tinted-background-color);
-		border-radius: var(--semantics-controls-md-corner-radius);
-		padding: 0 var(--primitives-space-2);
 	}
 
 	:host([compact]) .tab-bar__items {
@@ -80,97 +77,77 @@ export const tabBarItemStyles = css `
 	/* # Item */
 
 	.tab-bar__item {
-		appearance: none;
-		border: none;
-		margin: 0;
-		padding: 0;
-		background: none;
-		text-decoration: none;
 		box-sizing: border-box;
 		display: flex;
 		position: relative;
+		margin: 0;
+		border: none;
+		border-radius: var(--semantics-controls-md-corner-radius);
+		background: none;
+		padding: 0;
 		justify-content: center;
 		align-items: center;
-		font: var(--semantics-buttons-md-font);
 		color: var(--semantics-buttons-neutral-tinted-content-color);
+		font: var(--semantics-buttons-md-font);
+		text-decoration: none;
+		appearance: none;
 	}
 
 	:host([variant='icon-and-text']) .tab-bar__item {
-		gap: var(--semantics-buttons-md-gap);
-		padding: var(--primitives-space-8) var(--primitives-space-12);
 		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 {
-		padding: var(--primitives-space-8) var(--primitives-space-12);
 		height: var(--semantics-controls-md-min-size);
+		padding: var(--primitives-space-8) var(--primitives-space-12);
 	}
 
 	:host([variant='icon']) .tab-bar__item {
-		padding: 0;
+		width: var(--semantics-controls-md-min-size);
 		height: var(--semantics-controls-md-min-size);
-		width: calc(var(--semantics-controls-md-min-size) - var(--_tab-bar-item-indicator-inset));
+		padding: 0;
 	}
 
 	:host([variant='compact']) .tab-bar__item {
-		flex-direction: column;
-		padding: var(--primitives-space-8);
 		height: var(--semantics-controls-lg-min-size);
+		padding: var(--primitives-space-8);
+		flex-direction: column;
 	}
 
 	:host([responsive]) .tab-bar__item {
 		@media (max-width: ${smMax}) {
+			height: var(--semantics-controls-lg-min-size);
+			padding: var(--primitives-space-8);
 			flex-direction: column;
 			gap: 0;
-			padding: var(--primitives-space-8);
-			height: var(--semantics-controls-lg-min-size);
 		}
 
 		@container layout-container (max-width: ${smMax}) {
+			height: var(--semantics-controls-lg-min-size);
+			padding: var(--primitives-space-8);
 			flex-direction: column;
 			gap: 0;
-			padding: var(--primitives-space-8);
-			height: var(--semantics-controls-lg-min-size);
 		}
 	}
 
-	:host([selected]) .tab-bar__item {
-		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
-	}
-
-	.tab-bar__item:focus-visible {
-		outline: none;
-	}
-
-
-	/* # Indicator */
-
-	.tab-bar__item::before {
-		content: '';
-		position: absolute;
-		inset-block: var(--_tab-bar-item-indicator-inset);
-		inset-inline: calc(var(--_tab-bar-item-indicator-inset) / 2);
-		border-radius: calc(var(--semantics-controls-md-corner-radius) - (var(--_tab-bar-item-indicator-inset) / 2));
-		background-color: transparent;
-		z-index: 0;
-		pointer-events: none;
-	}
-
 	@media (hover: hover) {
-		.tab-bar__item:hover::before {
+		.tab-bar__item:hover {
 			background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
 		}
 	}
 
-	:host([selected]) .tab-bar__item::before {
+	:host([selected]) .tab-bar__item {
 		background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
 
 		@media (forced-colors: active) {
 			background-color: Highlight;
 		}
 	}
 
-	.tab-bar__item:focus-visible::before {
+	.tab-bar__item:focus-visible {
 		outline: var(--semantics-focus-ring-outline);
 		outline-offset: var(--semantics-focus-ring-outline-offset);
 		box-shadow: var(--semantics-focus-ring-box-shadow);
@@ -181,13 +158,13 @@ export const tabBarItemStyles = css `
 
 	.tab-bar__item-icon {
 		display: flex;
-		align-items: center;
-		justify-content: center;
 		position: relative;
 		z-index: 1;
-		flex-shrink: 0;
 		width: var(--semantics-buttons-md-icon-size);
 		height: var(--semantics-buttons-md-icon-size);
+		justify-content: center;
+		align-items: center;
+		flex-shrink: 0;
 	}
 
 	:host([variant='icon']) .tab-bar__item-icon {

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,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2D9B,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA0DZ,KAAK;;;;;;;4CAOgB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA2E1B,KAAK;;;;;4CAKgB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAiC1B,KAAK;;;;4CAIgB,KAAK;;;;;CAKhD,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,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAEpE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwD9B,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA2DZ,KAAK;;;;;;;4CAOgB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAsD1B,KAAK;;;;;4CAKgB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAiC1B,KAAK;;;;4CAIgB,KAAK;;;;;CAKhD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"top-navigation-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/top-navigation-bar/top-navigation-bar.styles.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,sBAAsB,yBA6TlC,CAAC"}
+{"version":3,"file":"top-navigation-bar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/top-navigation-bar/top-navigation-bar.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,sBAAsB,yBA+SlC,CAAC"}