@nldd/design-system 0.8.68 → 0.8.69

package/dist/components/lists-and-tables/list-item/list-item.styles.js

@@ -129,7 +129,8 @@ export const listItemStyles = css `
 
 	:host([selected]) {
 		--_background-color: var(--components-list-item-is-selected-background-color);
-		--context-cell-content-color: var(--components-list-item-is-selected-content-color);
+		--context-content-color: var(--components-list-item-is-selected-content-color);
+		--context-content-secondary-color: var(--components-list-item-is-selected-content-color);
 	}
 
 	/* hover only on hover-capable devices: avoids touch-scroll flashing the
@@ -137,17 +138,20 @@ export const listItemStyles = css `
 	@media (hover: hover) {
 		.list-item__action:hover {
 			--_background-color: var(--components-list-item-is-hovered-background-color);
-			--context-cell-content-color: var(--components-list-item-is-hovered-content-color);
+			--context-content-color: var(--components-list-item-is-hovered-content-color);
+			--context-content-secondary-color: var(--components-list-item-is-hovered-content-color);
 		}
 
 		:host([selected]) .list-item__action:hover {
 			--_background-color: var(--components-list-item-is-selected-background-color);
-			--context-cell-content-color: var(--components-list-item-is-selected-content-color);
+			--context-content-color: var(--components-list-item-is-selected-content-color);
+			--context-content-secondary-color: var(--components-list-item-is-selected-content-color);
 		}
 
 		:host([selected]) .list-item__action:focus:hover {
 			--_background-color: var(--components-list-item-is-highlighted-background-color);
-			--context-cell-content-color: var(--components-list-item-is-highlighted-content-color);
+			--context-content-color: var(--components-list-item-is-highlighted-content-color);
+			--context-content-secondary-color: var(--components-list-item-is-highlighted-content-color);
 		}
 	}
 
@@ -157,12 +161,14 @@ export const listItemStyles = css `
 	   into a scroll clears the press (pointercancel) instead of flashing it. */
 	.list-item__action.is-pressed {
 		--_background-color: var(--components-list-item-is-hovered-background-color);
-		--context-cell-content-color: var(--components-list-item-is-hovered-content-color);
+		--context-content-color: var(--components-list-item-is-hovered-content-color);
+		--context-content-secondary-color: var(--components-list-item-is-hovered-content-color);
 	}
 
 	:host([selected]) .list-item__action {
 		--_background-color: var(--components-list-item-is-selected-background-color);
-		--context-cell-content-color: var(--components-list-item-is-selected-content-color);
+		--context-content-color: var(--components-list-item-is-selected-content-color);
+		--context-content-secondary-color: var(--components-list-item-is-selected-content-color);
 	}
 
 	/* Highlight accent — the strongest fill. Shown for a selected item that is
@@ -175,7 +181,8 @@ export const listItemStyles = css `
 	.list-item.is-highlighted,
 	:host([selected]) .list-item.is-highlighted .list-item__action {
 		--_background-color: var(--components-list-item-is-highlighted-background-color);
-		--context-cell-content-color: var(--components-list-item-is-highlighted-content-color);
+		--context-content-color: var(--components-list-item-is-highlighted-content-color);
+		--context-content-secondary-color: var(--components-list-item-is-highlighted-content-color);
 	}
 
 

package/dist/components/lists-and-tables/list-item/list-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.styles.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item/list-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmShC,CAAC"}
+{"version":3,"file":"list-item.styles.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/list-item/list-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ShC,CAAC"}

package/dist/components/lists-and-tables/table/table.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/table/table.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,yBAmFvB,CAAC;AAEF,eAAO,MAAM,cAAc,yBA0C1B,CAAC"}
+{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/table/table.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,yBAmFvB,CAAC;AAEF,eAAO,MAAM,cAAc,yBA2C1B,CAAC"}

package/dist/components/lists-and-tables/table/table.styles.js

@@ -112,7 +112,8 @@ export const tableRowStyles = css `
 	   the table) plus the selected content color, from the shared table tokens. */
 	:host([selected]) {
 		background-color: var(--semantics-tables-row-is-selected-background-color);
-		--context-cell-content-color: var(--semantics-tables-row-is-selected-content-color);
+		--context-content-color: var(--semantics-tables-row-is-selected-content-color);
+		--context-content-secondary-color: var(--semantics-tables-row-is-selected-content-color);
 	}
 
 	/* The box's border ring is the table's outer frame, so the last row drops its

package/dist/components/lists-and-tables/table/table.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.styles.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;IAc1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqErB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;IAQ7B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCrB,CAAC"}
+{"version":3,"file":"table.styles.js","sourceRoot":"","sources":["../../../../src/components/lists-and-tables/table/table.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;IAc1B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqErB,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;IAQ7B,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCrB,CAAC"}

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

@@ -175,7 +175,7 @@ export const documentTabBarStyles = css `
 	.document-tab-bar__drag-clone .document-tab-bar__item-text {
 		overflow: hidden;
 		font: var(--components-document-tab-bar-tab-title-font);
-		color: var(--semantics-buttons-neutral-tinted-primary-content-color);
+		color: var(--semantics-buttons-neutral-tinted-content-color);
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
@@ -186,7 +186,7 @@ export const documentTabBarStyles = css `
 
 	.document-tab-bar__drag-clone.is-selected .document-tab-bar__item-text,
 	.document-tab-bar__drag-clone.is-selected .document-tab-bar__item-supporting-text {
-		color: var(--semantics-buttons-neutral-tinted-is-selected-primary-content-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
 	}
 
 	.document-tab-bar__drag-clone .document-tab-bar__item-supporting-text {
@@ -227,7 +227,7 @@ export const documentTabBarItemStyles = css `
 		--_is-selected-is-hovered-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-highlight-border-color);
 		--_is-selected-is-active-highlight-border-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-highlight-border-color);
 
-		--_secondary-content-color: var(--semantics-buttons-neutral-tinted-secondary-content-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-tinted-content-secondary-color);
 
 		${inheritedTextReset}
 		container-type: inline-size;
@@ -281,33 +281,33 @@ export const documentTabBarItemStyles = css `
 		.document-tab-bar__item-tab:hover {
 			background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
 			--_highlight-border-color: var(--_is-hovered-highlight-border-color);
-			--_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-secondary-content-color);
+			--_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-secondary-color);
 		}
 	}
 
 	.document-tab-bar__item-tab:active {
 		background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
 		--_highlight-border-color: var(--_is-active-highlight-border-color);
-		--_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-active-secondary-content-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-secondary-color);
 	}
 
 	:host([selected]) .document-tab-bar__item-tab {
 		background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
 		--_highlight-border-color: var(--_is-selected-highlight-border-color);
-		--_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-selected-secondary-content-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-selected-content-secondary-color);
 	}
 
 	@media (hover: hover) {
 		:host([selected]) .document-tab-bar__item-tab:hover {
 			background-color: var(--semantics-buttons-neutral-tinted-is-selected-background-color);
 			--_highlight-border-color: var(--_is-selected-is-hovered-highlight-border-color);
-			--_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-secondary-content-color);
+			--_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-secondary-color);
 		}
 	}
 
 	:host([selected]) .document-tab-bar__item-tab:active {
 		--_highlight-border-color: var(--_is-selected-is-active-highlight-border-color);
-		--_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-secondary-content-color);
+		--_secondary-content-color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-secondary-color);
 	}
 
 	/* ## Focus */
@@ -344,26 +344,26 @@ export const documentTabBarItemStyles = css `
 		overflow: hidden;
 		padding-inline-end: var(--primitives-space-6);
 		font: var(--components-document-tab-bar-tab-title-font);
-		color: var(--semantics-buttons-neutral-tinted-primary-content-color);
+		color: var(--semantics-buttons-neutral-tinted-content-color);
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 
 	:host([selected]) .document-tab-bar__item-text {
-		color: var(--semantics-buttons-neutral-tinted-is-selected-primary-content-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
 	}
 
 	.document-tab-bar__item-short-text {
 		overflow: hidden;
 		padding-inline-end: var(--primitives-space-6);
 		font: var(--components-document-tab-bar-tab-title-font);
-		color: var(--semantics-buttons-neutral-tinted-primary-content-color);
+		color: var(--semantics-buttons-neutral-tinted-content-color);
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
 
 	:host([selected]) .document-tab-bar__item-short-text {
-		color: var(--semantics-buttons-neutral-tinted-is-selected-primary-content-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
 	}
 
 
@@ -404,7 +404,7 @@ export const documentTabBarItemStyles = css `
 		padding: var(--primitives-space-4);
 		align-items: center;
 		justify-content: center;
-		color: var(--semantics-buttons-neutral-tinted-primary-content-color);
+		color: var(--semantics-buttons-neutral-tinted-content-color);
 		transform: translateY(-50%);
 		appearance: none;
 	}
@@ -420,7 +420,7 @@ export const documentTabBarItemStyles = css `
 	}
 
 	:host([selected]) .document-tab-bar__item-dismiss-button {
-		color: var(--semantics-buttons-neutral-tinted-is-selected-primary-content-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
 	}
 
 	@media (hover: hover) {

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

@@ -105,25 +105,25 @@ export const paginationStyles = css `
 		.pagination__page-button.is-current: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-primary-content-color);
+			color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
 		}
 	}
 
 	.pagination__page-button:active:not(.is-current) {
 		background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
-		color: var(--semantics-buttons-neutral-tinted-is-active-primary-content-color);
+		color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
 	}
 
 	.pagination__page-button.is-current {
 		--_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-primary-content-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
 	}
 
 	.pagination__page-button.is-current: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-primary-content-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
 	}
 
 	@media (forced-colors: active) {
@@ -190,9 +190,9 @@ export const paginationStyles = css `
 		--_background-color: transparent;
 		--_content-color: inherit;
 		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
-		--_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-primary-content-color);
+		--_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-hovered-content-color);
 		--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-active-background-color);
-		--_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-active-primary-content-color);
+		--_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-active-content-color);
 
 		display: inline-flex;
 		position: relative;
@@ -220,11 +220,11 @@ export const paginationStyles = css `
 
 	:host([select-expanded]) .pagination__select-wrapper {
 		--_background-color: var(--semantics-buttons-neutral-tinted-is-expanded-background-color);
-		--_content-color: var(--semantics-buttons-neutral-tinted-is-expanded-primary-content-color);
+		--_content-color: var(--semantics-buttons-neutral-tinted-is-expanded-content-color);
 		--_is-hovered-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-background-color);
-		--_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-primary-content-color);
+		--_is-hovered-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-hovered-content-color);
 		--_is-active-background-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-background-color);
-		--_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-primary-content-color);
+		--_is-active-content-color: var(--semantics-buttons-neutral-tinted-is-expanded-is-active-content-color);
 	}
 
 	@media (prefers-reduced-motion: reduce) {

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

@@ -171,7 +171,7 @@ export const tabBarItemStyles = css `
 		gap: var(--_gap);
 		align-items: center;
 		justify-content: center;
-		color: var(--semantics-buttons-neutral-tinted-primary-content-color);
+		color: var(--semantics-buttons-neutral-tinted-content-color);
 		font: var(--_font);
 		text-decoration: none;
 		appearance: none;
@@ -192,20 +192,20 @@ export const tabBarItemStyles = css `
 	@media (hover: hover) {
 		.tab-bar__item:hover {
 			background-color: var(--semantics-buttons-neutral-tinted-is-hovered-background-color);
-			color: var(--semantics-buttons-neutral-tinted-is-hovered-primary-content-color);
+			color: var(--semantics-buttons-neutral-tinted-is-hovered-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-primary-content-color);
+		color: var(--semantics-buttons-neutral-tinted-is-active-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-primary-content-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-content-color);
 	}
 
 	@media (hover: hover) {
@@ -213,7 +213,7 @@ export const tabBarItemStyles = css `
 			--_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-primary-content-color);
+			color: var(--semantics-buttons-neutral-tinted-is-selected-is-hovered-content-color);
 		}
 	}
 
@@ -221,7 +221,7 @@ export const tabBarItemStyles = css `
 		--_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-primary-content-color);
+		color: var(--semantics-buttons-neutral-tinted-is-selected-is-active-content-color);
 	}
 
 	@media (forced-colors: active) {

package/dist/components/status-and-feedback/activity-indicator/activity-indicator.d.ts

@@ -7,11 +7,23 @@
  * `timing="instant"` to skip the delay (the fade-in still plays) — this is
  * what embedding components such as `nldd-button` use for their loading state.
  *
- * The default indicator is a simple icon-sized circle drawn in `currentColor`,
- * with an optional label below (hidden unless `show-text` is set). Drop a
+ * The default indicator is a simple icon-sized circle that follows the shared
+ * `--context-content-color` channel (set by list-item / table / menu on their
+ * content), falling back to `currentColor` wherever that channel is unset
+ * (buttons, rich-text, standalone) — so a spinner inside a cell tracks the
+ * row's state-aware content colour, while embedders relying on currentColor are
+ * unaffected. An optional label sits below (hidden unless `show-text` is set).
+ * Drop a
  * `<nldd-progress-circle>`, `<nldd-progress-bar>` or any element in the
  * `indicator` slot to override it.
  *
+ * Icon alignment: the visible ring already sits at 5/6 of its box (the SVG's
+ * r=9 plus a 2-unit stroke in a 24 view-box, the same optical inset a filled
+ * icon glyph has), so a standalone spinner lines up with an icon or an
+ * `icon-aligned` `nldd-avatar` on the same grid — no extra option needed
+ * (unlike `nldd-avatar`, which fills edge-to-edge and opts in via
+ * `icon-aligned`).
+ *
  * Overlay mode: put content in the default slot and the indicator wraps it — it
  * becomes a `position: relative` container, renders the spinner over a dimming
  * backdrop (opt out with `no-backdrop`), and makes the content `inert` so its

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

@@ -1 +1 @@
-{"version":3,"file":"activity-indicator.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/activity-indicator/activity-indicator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,8BAA8B,CAAC;AAMtF,MAAM,MAAM,qBAAqB,GAChC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnF,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,SAAS,CAAC;AAE5D,qBACa,qBAAsB,SAAQ,UAAU;IACpD,OAAgB,MAAM,0BAA2B;IAGjD,IAAI,EAAE,qBAAqB,CAAQ;IAEnC;uEACmE;IAEnE,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAEV;qDACiD;IAEjD,MAAM,EAAE,uBAAuB,CAAa;IAE5C;mEAC+D;IAE/D,QAAQ,UAAS;IAEjB;;;;gBAIY;IAEZ,UAAU,UAAS;IAGnB,YAAY,EAAE,OAAO,CAAC,iCAAiC,CAAC,CAAM;IAG9D,QAAQ,UAAS;IAEjB;;mDAE+C;IAE/C,WAAW,UAAS;IAEpB,OAAO,CAAC,aAAa,CAAC,CAAgC;IAEtD;;uDAEmD;IACnD,oBAAoB,GAAI,GAAG,KAAK,KAAG,IAAI,CAGrC;IAEK,EAAE,CAAC,GAAG,EAAE,MAAM,iCAAiC,GAAG,MAAM;IAI/D,+CAA+C;IAC/C,IAAW,eAAe,IAAI,MAAM,CAEnC;IAEQ,iBAAiB,IAAI,IAAI;IASzB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAkB/C,oBAAoB,IAAI,IAAI;IAKrC,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,cAAc;IAOtB;;;iEAG6D;IAC7D,OAAO,CAAC,SAAS;IAQR,OAAO,IAAI,IAAI;IAQf,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,qBAAqB,CAAC;KACjD;CACD"}
+{"version":3,"file":"activity-indicator.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/activity-indicator/activity-indicator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAMjC,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,8BAA8B,CAAC;AAMtF,MAAM,MAAM,qBAAqB,GAChC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnF,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,SAAS,CAAC;AAE5D,qBACa,qBAAsB,SAAQ,UAAU;IACpD,OAAgB,MAAM,0BAA2B;IAGjD,IAAI,EAAE,qBAAqB,CAAQ;IAEnC;uEACmE;IAEnE,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAEV;qDACiD;IAEjD,MAAM,EAAE,uBAAuB,CAAa;IAE5C;mEAC+D;IAE/D,QAAQ,UAAS;IAEjB;;;;gBAIY;IAEZ,UAAU,UAAS;IAGnB,YAAY,EAAE,OAAO,CAAC,iCAAiC,CAAC,CAAM;IAG9D,QAAQ,UAAS;IAEjB;;mDAE+C;IAE/C,WAAW,UAAS;IAEpB,OAAO,CAAC,aAAa,CAAC,CAAgC;IAEtD;;uDAEmD;IACnD,oBAAoB,GAAI,GAAG,KAAK,KAAG,IAAI,CAGrC;IAEK,EAAE,CAAC,GAAG,EAAE,MAAM,iCAAiC,GAAG,MAAM;IAI/D,+CAA+C;IAC/C,IAAW,eAAe,IAAI,MAAM,CAEnC;IAEQ,iBAAiB,IAAI,IAAI;IASzB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAkB/C,oBAAoB,IAAI,IAAI;IAKrC,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,cAAc;IAOtB;;;iEAG6D;IAC7D,OAAO,CAAC,SAAS;IAQR,OAAO,IAAI,IAAI;IAQf,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,yBAAyB,EAAE,qBAAqB,CAAC;KACjD;CACD"}

package/dist/components/status-and-feedback/activity-indicator/activity-indicator.js

@@ -13,11 +13,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
  * `timing="instant"` to skip the delay (the fade-in still plays) — this is
  * what embedding components such as `nldd-button` use for their loading state.
  *
- * The default indicator is a simple icon-sized circle drawn in `currentColor`,
- * with an optional label below (hidden unless `show-text` is set). Drop a
+ * The default indicator is a simple icon-sized circle that follows the shared
+ * `--context-content-color` channel (set by list-item / table / menu on their
+ * content), falling back to `currentColor` wherever that channel is unset
+ * (buttons, rich-text, standalone) — so a spinner inside a cell tracks the
+ * row's state-aware content colour, while embedders relying on currentColor are
+ * unaffected. An optional label sits below (hidden unless `show-text` is set).
+ * Drop a
  * `<nldd-progress-circle>`, `<nldd-progress-bar>` or any element in the
  * `indicator` slot to override it.
  *
+ * Icon alignment: the visible ring already sits at 5/6 of its box (the SVG's
+ * r=9 plus a 2-unit stroke in a 24 view-box, the same optical inset a filled
+ * icon glyph has), so a standalone spinner lines up with an icon or an
+ * `icon-aligned` `nldd-avatar` on the same grid — no extra option needed
+ * (unlike `nldd-avatar`, which fills edge-to-edge and opts in via
+ * `icon-aligned`).
+ *
  * Overlay mode: put content in the default slot and the indicator wraps it — it
  * becomes a `position: relative` container, renders the spinner over a dimming
  * backdrop (opt out with `no-backdrop`), and makes the content `inert` so its

package/dist/components/status-and-feedback/activity-indicator/activity-indicator.js.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"activity-indicator.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/activity-indicator/activity-indicator.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,uBAAuB,yBA8OnC,CAAC"}
+{"version":3,"file":"activity-indicator.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/activity-indicator/activity-indicator.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,uBAAuB,yBA+OnC,CAAC"}

package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.js

@@ -10,6 +10,7 @@ export const activityIndicatorStyles = css `
 
 	:host {
 		--_circle-size: var(--primitives-space-32);
+		--_color: var(--context-content-color, currentColor);
 		--_track-opacity: 0.25;
 		--_stroke-width: 2;
 		--_rotation-duration: 0.8s;
@@ -179,7 +180,7 @@ export const activityIndicatorStyles = css `
 
 	.activity-indicator__track {
 		opacity: var(--_track-opacity);
-		stroke: currentColor;
+		stroke: var(--_color);
 		stroke-width: var(--_stroke-width);
 	}
 
@@ -188,7 +189,7 @@ export const activityIndicatorStyles = css `
 	   element visibly wobbles when it sits at a sub-pixel position (next to a
 	   label, or overlaid on a button). Mirrors nldd-progress-circle. */
 	.activity-indicator__indicator {
-		stroke: currentColor;
+		stroke: var(--_color);
 		stroke-width: var(--_stroke-width);
 		stroke-linecap: round;
 		stroke-dasharray: 25 100;

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

@@ -1 +1 @@
-{"version":3,"file":"activity-indicator.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/activity-indicator/activity-indicator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;IAwBtC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsNrB,CAAC"}
+{"version":3,"file":"activity-indicator.styles.js","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/activity-indicator/activity-indicator.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAE5E,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;IAyBtC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsNrB,CAAC"}

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

@@ -15,7 +15,7 @@ export const badgeStyles = css `
 		--_height: var(--primitives-space-20);
 		--_inline-padding: var(--primitives-space-6);
 		--_gap: var(--primitives-space-3);
-		--_content-color: var(--semantics-categories-critical-filled-primary-content-color);
+		--_content-color: var(--semantics-categories-critical-filled-content-color);
 		--_font: var(--primitives-font-body-xs-medium-flat);
 		--_dot-size: var(--primitives-space-10);
 		--_icon-size: var(--primitives-space-14);
@@ -40,25 +40,25 @@ export const badgeStyles = css `
 	:host([color="accent"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-accent-filled-content-color);
 	}
 
 	:host([color="neutral"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-neutral-filled-content-color);
 	}
 
 	:host([color="warning"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-warning-filled-content-color);
 	}
 
 	:host([color="success"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-success-filled-content-color);
 	}
 
 
@@ -67,109 +67,109 @@ export const badgeStyles = css `
 	:host([color="lintblauw"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-lintblauw-filled-content-color);
 	}
 
 	:host([color="donkerblauw"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-donkerblauw-filled-content-color);
 	}
 
 	:host([color="hemelblauw"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-hemelblauw-filled-content-color);
 	}
 
 	:host([color="lichtblauw"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-lichtblauw-filled-content-color);
 	}
 
 	:host([color="paars"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-paars-filled-content-color);
 	}
 
 	:host([color="violet"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-violet-filled-content-color);
 	}
 
 	:host([color="robijnrood"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-robijnrood-filled-content-color);
 	}
 
 	:host([color="roze"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-roze-filled-content-color);
 	}
 
 	:host([color="rood"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-rood-filled-content-color);
 	}
 
 	:host([color="oranje"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-oranje-filled-content-color);
 	}
 
 	:host([color="donkergeel"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-donkergeel-filled-content-color);
 	}
 
 	:host([color="geel"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-geel-filled-content-color);
 	}
 
 	:host([color="donkerbruin"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-donkerbruin-filled-content-color);
 	}
 
 	:host([color="bruin"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-bruin-filled-content-color);
 	}
 
 	:host([color="donkergroen"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-donkergroen-filled-content-color);
 	}
 
 	:host([color="groen"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-groen-filled-content-color);
 	}
 
 	:host([color="mosgroen"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-mosgroen-filled-content-color);
 	}
 
 	:host([color="mintgroen"]) {
 		--_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);
+		--_content-color: var(--semantics-categories-mintgroen-filled-content-color);
 	}
 
 	:host([hidden]) {

package/dist/components/status-and-feedback/inline-dialog/inline-dialog.d.ts

@@ -6,7 +6,7 @@
  *
  * @element nldd-inline-dialog
  *
- * @attr {'alert'|'success'} variant - Semantic variant; 'alert' or 'success' forces a matching icon and color
+ * @attr {'alert'|'success'|'loading'} variant - Semantic variant. 'alert' / 'success' force a matching icon and color; 'loading' shows an nldd-activity-indicator (a role="status" spinner announcing "Laden") in place of the icon — for an empty state that is still loading.
  * @attr {'md'|'lg'} size          - Typography size: 'md' (default) keeps body-md text + body-sm supporting; 'lg' bumps both up a step.
  * @attr {string}  icon            - Name of the nldd-icon icon above the text; absent when not set. Ignored when variant is set.
  * @attr {string}  icon-color      - 'secondary' | 'accent' | 'critical' | 'warning' | 'success'. Overrides the default and variant icon color.
@@ -20,7 +20,8 @@
 import { LitElement } from 'lit';
 import '../../content/icon/icon.js';
 import '../../actions/button-group/button-group.js';
-export type InlineDialogVariant = 'alert' | 'success';
+import '../activity-indicator/activity-indicator.js';
+export type InlineDialogVariant = 'alert' | 'success' | 'loading';
 export type InlineDialogSize = 'md' | 'lg';
 export type InlineDialogIconColor = 'secondary' | 'accent' | 'critical' | 'warning' | 'success';
 export declare class NLDDInlineDialog extends LitElement {

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

@@ -1 +1 @@
-{"version":3,"file":"inline-dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,4CAA4C,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,CAAC;AACtD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAEhG,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAsB;IAG5C,OAAO,EAAE,mBAAmB,GAAG,EAAE,CAAM;IAGvC,IAAI,EAAE,gBAAgB,CAAQ;IAG9B,IAAI,SAAM;IAGV,SAAS,EAAE,qBAAqB,GAAG,EAAE,CAAM;IAG3C,IAAI,SAAM;IAGV,cAAc,SAAM;IAGpB,YAAY,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAQ;IAGlD,WAAW,UAAS;IAGpB,WAAW,UAAS;IAEpB,IAAI,iBAAiB,IAAI,MAAM,CAK9B;IAEQ,YAAY;IAgCZ,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}
+{"version":3,"file":"inline-dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/status-and-feedback/inline-dialog/inline-dialog.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,4CAA4C,CAAC;AACpD,OAAO,6CAA6C,CAAC;AAErD,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AAClE,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;AAEhG,qBACa,gBAAiB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAsB;IAG5C,OAAO,EAAE,mBAAmB,GAAG,EAAE,CAAM;IAGvC,IAAI,EAAE,gBAAgB,CAAQ;IAG9B,IAAI,SAAM;IAGV,SAAS,EAAE,qBAAqB,GAAG,EAAE,CAAM;IAG3C,IAAI,SAAM;IAGV,cAAc,SAAM;IAGpB,YAAY,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAQ;IAGlD,WAAW,UAAS;IAGpB,WAAW,UAAS;IAEpB,IAAI,iBAAiB,IAAI,MAAM,CAK9B;IAEQ,YAAY;IAgCZ,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,oBAAoB,EAAE,gBAAgB,CAAC;KACvC;CACD"}