@sebgroup/green-core-ng 3.0.0 → 3.1.0

package/generated/index.d.ts

@@ -4,24 +4,24 @@
  */
 export * from './alert';
 export * from './badge';
-export * from './button';
-export * from './breadcrumbs';
 export * from './blur';
 export * from './calendar';
+export * from './button';
+export * from './breadcrumbs';
 export * from './card';
-export * from './checkbox';
 export * from './card-linked';
+export * from './checkbox';
 export * from './coachmark';
 export * from './context-menu';
-export * from './details';
 export * from './datepicker';
+export * from './details';
 export * from './dialog';
 export * from './div';
 export * from './divider';
 export * from './dropdown';
 export * from './fab';
-export * from './flex';
 export * from './filter-chips';
+export * from './flex';
 export * from './form-summary';
 export * from './grid';
 export * from './grouped-list';
@@ -53,9 +53,9 @@ export * from './filter-chip';
 export * from './formatted-account';
 export * from './formatted-date';
 export * from './formatted-number';
+export * from './sensitive-account';
 export * from './radio-group';
 export * from './segment';
-export * from './sensitive-account';
 export * from './sensitive-date';
 export * from './sensitive-number';
 export * from './icon-ai';

package/generated/input/input.component.d.ts

@@ -127,6 +127,15 @@ export declare class GdsInputComponent extends GdsFormControlBase {
     name?: GdsInput['name'];
     /** If the input is Disabled */
     disabled?: GdsInput['disabled'];
+    /** Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.
+  
+  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and
+  run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM
+  is projected.
+  
+  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the
+  element needs to be measured synchronously after being added to the DOM. */
+    syncFirstRender?: GdsInput['syncFirstRender'];
     /** Fired when the clear button is clicked. */
     gdsInputCleared: EventEmitter<CustomEvent<any>>;
     get element(): GdsInput;
@@ -134,7 +143,7 @@ export declare class GdsInputComponent extends GdsFormControlBase {
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GdsInputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GdsInputComponent, "gds-input", never, { "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "inlineSize": { "alias": "inlineSize"; "required": false; }; "minInlineSize": { "alias": "minInlineSize"; "required": false; }; "maxInlineSize": { "alias": "maxInlineSize"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "marginInline": { "alias": "marginInline"; "required": false; }; "marginBlock": { "alias": "marginBlock"; "required": false; }; "alignSelf": { "alias": "alignSelf"; "required": false; }; "justifySelf": { "alias": "justifySelf"; "required": false; }; "placeSelf": { "alias": "placeSelf"; "required": false; }; "gridColumn": { "alias": "gridColumn"; "required": false; }; "gridRow": { "alias": "gridRow"; "required": false; }; "gridArea": { "alias": "gridArea"; "required": false; }; "flex": { "alias": "flex"; "required": false; }; "order": { "alias": "order"; "required": false; }; "supportingText": { "alias": "supportingText"; "required": false; }; "showExtendedSupportingText": { "alias": "showExtendedSupportingText"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "size": { "alias": "size"; "required": false; }; "plain": { "alias": "plain"; "required": false; }; "type": { "alias": "type"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "autocapitalize": { "alias": "autocapitalize"; "required": false; }; "autocorrect": { "alias": "autocorrect"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "enterkeyhint": { "alias": "enterkeyhint"; "required": false; }; "spellcheck": { "alias": "spellcheck"; "required": false; }; "inputmode": { "alias": "inputmode"; "required": false; }; "charCounterCallback": { "alias": "charCounterCallback"; "required": false; }; "selectionStart": { "alias": "selectionStart"; "required": false; }; "selectionEnd": { "alias": "selectionEnd"; "required": false; }; "selectionDirection": { "alias": "selectionDirection"; "required": false; }; "value": { "alias": "value"; "required": false; }; "validator": { "alias": "validator"; "required": false; }; "required": { "alias": "required"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "gdsInputCleared": "gdsInputCleared"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GdsInputComponent, "gds-input", never, { "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "inlineSize": { "alias": "inlineSize"; "required": false; }; "minInlineSize": { "alias": "minInlineSize"; "required": false; }; "maxInlineSize": { "alias": "maxInlineSize"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "marginInline": { "alias": "marginInline"; "required": false; }; "marginBlock": { "alias": "marginBlock"; "required": false; }; "alignSelf": { "alias": "alignSelf"; "required": false; }; "justifySelf": { "alias": "justifySelf"; "required": false; }; "placeSelf": { "alias": "placeSelf"; "required": false; }; "gridColumn": { "alias": "gridColumn"; "required": false; }; "gridRow": { "alias": "gridRow"; "required": false; }; "gridArea": { "alias": "gridArea"; "required": false; }; "flex": { "alias": "flex"; "required": false; }; "order": { "alias": "order"; "required": false; }; "supportingText": { "alias": "supportingText"; "required": false; }; "showExtendedSupportingText": { "alias": "showExtendedSupportingText"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "size": { "alias": "size"; "required": false; }; "plain": { "alias": "plain"; "required": false; }; "type": { "alias": "type"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "autocapitalize": { "alias": "autocapitalize"; "required": false; }; "autocorrect": { "alias": "autocorrect"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "enterkeyhint": { "alias": "enterkeyhint"; "required": false; }; "spellcheck": { "alias": "spellcheck"; "required": false; }; "inputmode": { "alias": "inputmode"; "required": false; }; "charCounterCallback": { "alias": "charCounterCallback"; "required": false; }; "selectionStart": { "alias": "selectionStart"; "required": false; }; "selectionEnd": { "alias": "selectionEnd"; "required": false; }; "selectionDirection": { "alias": "selectionDirection"; "required": false; }; "value": { "alias": "value"; "required": false; }; "validator": { "alias": "validator"; "required": false; }; "required": { "alias": "required"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "syncFirstRender": { "alias": "syncFirstRender"; "required": false; }; }, { "gdsInputCleared": "gdsInputCleared"; }, never, ["*"], true, never>;
     static ngAcceptInputType_showExtendedSupportingText: unknown;
     static ngAcceptInputType_clearable: unknown;
     static ngAcceptInputType_plain: unknown;
@@ -143,4 +152,5 @@ export declare class GdsInputComponent extends GdsFormControlBase {
     static ngAcceptInputType_spellcheck: unknown;
     static ngAcceptInputType_required: unknown;
     static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_syncFirstRender: unknown;
 }

package/generated/link/link.component.d.ts

@@ -96,6 +96,15 @@ export declare class GdsLinkComponent implements OnInit, OnChanges, AfterViewIni
     /** Specifies a space-separated list of URLs to which, when the link is followed,
   POST requests with the body ping will be sent by the browser. */
     ping?: GdsLink['ping'];
+    /** Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.
+  
+  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and
+  run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM
+  is projected.
+  
+  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the
+  element needs to be measured synchronously after being added to the DOM. */
+    syncFirstRender?: GdsLink['syncFirstRender'];
     /** Fired when the link is clicked. */
     click: EventEmitter<MouseEvent>;
     /**
@@ -117,5 +126,6 @@ export declare class GdsLinkComponent implements OnInit, OnChanges, AfterViewIni
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GdsLinkComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GdsLinkComponent, "gds-link", never, { "label": { "alias": "label"; "required": false; }; "textDecoration": { "alias": "textDecoration"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "marginInline": { "alias": "marginInline"; "required": false; }; "marginBlock": { "alias": "marginBlock"; "required": false; }; "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "inlineSize": { "alias": "inlineSize"; "required": false; }; "minInlineSize": { "alias": "minInlineSize"; "required": false; }; "maxInlineSize": { "alias": "maxInlineSize"; "required": false; }; "alignSelf": { "alias": "alignSelf"; "required": false; }; "justifySelf": { "alias": "justifySelf"; "required": false; }; "placeSelf": { "alias": "placeSelf"; "required": false; }; "gridColumn": { "alias": "gridColumn"; "required": false; }; "gridRow": { "alias": "gridRow"; "required": false; }; "gridArea": { "alias": "gridArea"; "required": false; }; "flex": { "alias": "flex"; "required": false; }; "order": { "alias": "order"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "rel": { "alias": "rel"; "required": false; }; "download": { "alias": "download"; "required": false; }; "ping": { "alias": "ping"; "required": false; }; }, { "click": "click"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GdsLinkComponent, "gds-link", never, { "label": { "alias": "label"; "required": false; }; "textDecoration": { "alias": "textDecoration"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "marginInline": { "alias": "marginInline"; "required": false; }; "marginBlock": { "alias": "marginBlock"; "required": false; }; "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "inlineSize": { "alias": "inlineSize"; "required": false; }; "minInlineSize": { "alias": "minInlineSize"; "required": false; }; "maxInlineSize": { "alias": "maxInlineSize"; "required": false; }; "alignSelf": { "alias": "alignSelf"; "required": false; }; "justifySelf": { "alias": "justifySelf"; "required": false; }; "placeSelf": { "alias": "placeSelf"; "required": false; }; "gridColumn": { "alias": "gridColumn"; "required": false; }; "gridRow": { "alias": "gridRow"; "required": false; }; "gridArea": { "alias": "gridArea"; "required": false; }; "flex": { "alias": "flex"; "required": false; }; "order": { "alias": "order"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "rel": { "alias": "rel"; "required": false; }; "download": { "alias": "download"; "required": false; }; "ping": { "alias": "ping"; "required": false; }; "syncFirstRender": { "alias": "syncFirstRender"; "required": false; }; }, { "click": "click"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_syncFirstRender: unknown;
 }

package/generated/list-item/list-item.component.d.ts

@@ -1,17 +1,29 @@
-import { OnInit } from '@angular/core';
+import { OnInit, OnChanges, AfterViewInit, SimpleChanges } from '@angular/core';
 import { GdsListItem } from '@sebgroup/green-core/components/grouped-list/list-item.component.js';
 import * as i0 from "@angular/core";
 /**
  * Angular wrapper for the gds-list-item web component
  *
  */
-export declare class GdsListItemComponent implements OnInit {
+export declare class GdsListItemComponent implements OnInit, OnChanges, AfterViewInit {
     private elementRef;
     private zone;
     private cdr;
     get element(): GdsListItem;
     constructor();
+    /** Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.
+  
+  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and
+  run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM
+  is projected.
+  
+  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the
+  element needs to be measured synchronously after being added to the DOM. */
+    syncFirstRender?: GdsListItem['syncFirstRender'];
     ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GdsListItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GdsListItemComponent, "gds-list-item", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GdsListItemComponent, "gds-list-item", never, { "syncFirstRender": { "alias": "syncFirstRender"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_syncFirstRender: unknown;
 }

package/generated/mask/mask.component.d.ts

@@ -239,9 +239,19 @@ export declare class GdsMaskComponent implements OnInit, OnChanges, AfterViewIni
     /** Style Expression Property that controls the `pointer-events` property.
   Supports all valid CSS `pointer-events` values. */
     pointerEvents?: GdsMask['pointer-events'];
+    /** Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.
+  
+  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and
+  run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM
+  is projected.
+  
+  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the
+  element needs to be measured synchronously after being added to the DOM. */
+    syncFirstRender?: GdsMask['syncFirstRender'];
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GdsMaskComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GdsMaskComponent, "gds-mask", never, { "background": { "alias": "background"; "required": false; }; "maskImage": { "alias": "maskImage"; "required": false; }; "maskSize": { "alias": "maskSize"; "required": false; }; "maskRepeat": { "alias": "maskRepeat"; "required": false; }; "maskPosition": { "alias": "maskPosition"; "required": false; }; "backdropFilter": { "alias": "backdropFilter"; "required": false; }; "position": { "alias": "position"; "required": false; }; "display": { "alias": "display"; "required": false; }; "inset": { "alias": "inset"; "required": false; }; "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "inlineSize": { "alias": "inlineSize"; "required": false; }; "minInlineSize": { "alias": "minInlineSize"; "required": false; }; "maxInlineSize": { "alias": "maxInlineSize"; "required": false; }; "height": { "alias": "height"; "required": false; }; "minHeight": { "alias": "minHeight"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "blockSize": { "alias": "blockSize"; "required": false; }; "minBlockSize": { "alias": "minBlockSize"; "required": false; }; "maxBlockSize": { "alias": "maxBlockSize"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "marginInline": { "alias": "marginInline"; "required": false; }; "marginBlock": { "alias": "marginBlock"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "paddingInline": { "alias": "paddingInline"; "required": false; }; "paddingBlock": { "alias": "paddingBlock"; "required": false; }; "alignSelf": { "alias": "alignSelf"; "required": false; }; "justifySelf": { "alias": "justifySelf"; "required": false; }; "placeSelf": { "alias": "placeSelf"; "required": false; }; "gridColumn": { "alias": "gridColumn"; "required": false; }; "gridRow": { "alias": "gridRow"; "required": false; }; "gridArea": { "alias": "gridArea"; "required": false; }; "flex": { "alias": "flex"; "required": false; }; "order": { "alias": "order"; "required": false; }; "transform": { "alias": "transform"; "required": false; }; "level": { "alias": "level"; "required": false; }; "color": { "alias": "color"; "required": false; }; "border": { "alias": "border"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; "borderWidth": { "alias": "borderWidth"; "required": false; }; "borderStyle": { "alias": "borderStyle"; "required": false; }; "borderRadius": { "alias": "borderRadius"; "required": false; }; "boxShadow": { "alias": "boxShadow"; "required": false; }; "opacity": { "alias": "opacity"; "required": false; }; "overflow": { "alias": "overflow"; "required": false; }; "boxSizing": { "alias": "boxSizing"; "required": false; }; "zIndex": { "alias": "zIndex"; "required": false; }; "font": { "alias": "font"; "required": false; }; "fontWeight": { "alias": "fontWeight"; "required": false; }; "textAlign": { "alias": "textAlign"; "required": false; }; "textWrap": { "alias": "textWrap"; "required": false; }; "overflowWrap": { "alias": "overflowWrap"; "required": false; }; "whiteSpace": { "alias": "whiteSpace"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "alignItems": { "alias": "alignItems"; "required": false; }; "alignContent": { "alias": "alignContent"; "required": false; }; "justifyContent": { "alias": "justifyContent"; "required": false; }; "justifyItems": { "alias": "justifyItems"; "required": false; }; "flexDirection": { "alias": "flexDirection"; "required": false; }; "flexWrap": { "alias": "flexWrap"; "required": false; }; "placeItems": { "alias": "placeItems"; "required": false; }; "placeContent": { "alias": "placeContent"; "required": false; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; }; "cursor": { "alias": "cursor"; "required": false; }; "pointerEvents": { "alias": "pointerEvents"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GdsMaskComponent, "gds-mask", never, { "background": { "alias": "background"; "required": false; }; "maskImage": { "alias": "maskImage"; "required": false; }; "maskSize": { "alias": "maskSize"; "required": false; }; "maskRepeat": { "alias": "maskRepeat"; "required": false; }; "maskPosition": { "alias": "maskPosition"; "required": false; }; "backdropFilter": { "alias": "backdropFilter"; "required": false; }; "position": { "alias": "position"; "required": false; }; "display": { "alias": "display"; "required": false; }; "inset": { "alias": "inset"; "required": false; }; "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "inlineSize": { "alias": "inlineSize"; "required": false; }; "minInlineSize": { "alias": "minInlineSize"; "required": false; }; "maxInlineSize": { "alias": "maxInlineSize"; "required": false; }; "height": { "alias": "height"; "required": false; }; "minHeight": { "alias": "minHeight"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "blockSize": { "alias": "blockSize"; "required": false; }; "minBlockSize": { "alias": "minBlockSize"; "required": false; }; "maxBlockSize": { "alias": "maxBlockSize"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "marginInline": { "alias": "marginInline"; "required": false; }; "marginBlock": { "alias": "marginBlock"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "paddingInline": { "alias": "paddingInline"; "required": false; }; "paddingBlock": { "alias": "paddingBlock"; "required": false; }; "alignSelf": { "alias": "alignSelf"; "required": false; }; "justifySelf": { "alias": "justifySelf"; "required": false; }; "placeSelf": { "alias": "placeSelf"; "required": false; }; "gridColumn": { "alias": "gridColumn"; "required": false; }; "gridRow": { "alias": "gridRow"; "required": false; }; "gridArea": { "alias": "gridArea"; "required": false; }; "flex": { "alias": "flex"; "required": false; }; "order": { "alias": "order"; "required": false; }; "transform": { "alias": "transform"; "required": false; }; "level": { "alias": "level"; "required": false; }; "color": { "alias": "color"; "required": false; }; "border": { "alias": "border"; "required": false; }; "borderColor": { "alias": "borderColor"; "required": false; }; "borderWidth": { "alias": "borderWidth"; "required": false; }; "borderStyle": { "alias": "borderStyle"; "required": false; }; "borderRadius": { "alias": "borderRadius"; "required": false; }; "boxShadow": { "alias": "boxShadow"; "required": false; }; "opacity": { "alias": "opacity"; "required": false; }; "overflow": { "alias": "overflow"; "required": false; }; "boxSizing": { "alias": "boxSizing"; "required": false; }; "zIndex": { "alias": "zIndex"; "required": false; }; "font": { "alias": "font"; "required": false; }; "fontWeight": { "alias": "fontWeight"; "required": false; }; "textAlign": { "alias": "textAlign"; "required": false; }; "textWrap": { "alias": "textWrap"; "required": false; }; "overflowWrap": { "alias": "overflowWrap"; "required": false; }; "whiteSpace": { "alias": "whiteSpace"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "alignItems": { "alias": "alignItems"; "required": false; }; "alignContent": { "alias": "alignContent"; "required": false; }; "justifyContent": { "alias": "justifyContent"; "required": false; }; "justifyItems": { "alias": "justifyItems"; "required": false; }; "flexDirection": { "alias": "flexDirection"; "required": false; }; "flexWrap": { "alias": "flexWrap"; "required": false; }; "placeItems": { "alias": "placeItems"; "required": false; }; "placeContent": { "alias": "placeContent"; "required": false; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; }; "cursor": { "alias": "cursor"; "required": false; }; "pointerEvents": { "alias": "pointerEvents"; "required": false; }; "syncFirstRender": { "alias": "syncFirstRender"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_syncFirstRender: unknown;
 }

package/generated/menu-button/menu-button.component.d.ts

@@ -76,6 +76,15 @@ export declare class GdsMenuButtonComponent implements OnInit, OnChanges, AfterV
     /** Style Expression Property that controls the `order` property.
   Supports all valid CSS `order` values. */
     order?: GdsMenuButton['order'];
+    /** Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.
+  
+  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and
+  run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM
+  is projected.
+  
+  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the
+  element needs to be measured synchronously after being added to the DOM. */
+    syncFirstRender?: GdsMenuButton['syncFirstRender'];
     /** Fired when the button is clicked. */
     click: EventEmitter<MouseEvent>;
     /**
@@ -102,8 +111,9 @@ export declare class GdsMenuButtonComponent implements OnInit, OnChanges, AfterV
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GdsMenuButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GdsMenuButtonComponent, "gds-menu-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "rel": { "alias": "rel"; "required": false; }; "download": { "alias": "download"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "inlineSize": { "alias": "inlineSize"; "required": false; }; "minInlineSize": { "alias": "minInlineSize"; "required": false; }; "maxInlineSize": { "alias": "maxInlineSize"; "required": false; }; "alignSelf": { "alias": "alignSelf"; "required": false; }; "justifySelf": { "alias": "justifySelf"; "required": false; }; "placeSelf": { "alias": "placeSelf"; "required": false; }; "gridColumn": { "alias": "gridColumn"; "required": false; }; "gridRow": { "alias": "gridRow"; "required": false; }; "gridArea": { "alias": "gridArea"; "required": false; }; "flex": { "alias": "flex"; "required": false; }; "order": { "alias": "order"; "required": false; }; }, { "click": "click"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GdsMenuButtonComponent, "gds-menu-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "rel": { "alias": "rel"; "required": false; }; "download": { "alias": "download"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "inlineSize": { "alias": "inlineSize"; "required": false; }; "minInlineSize": { "alias": "minInlineSize"; "required": false; }; "maxInlineSize": { "alias": "maxInlineSize"; "required": false; }; "alignSelf": { "alias": "alignSelf"; "required": false; }; "justifySelf": { "alias": "justifySelf"; "required": false; }; "placeSelf": { "alias": "placeSelf"; "required": false; }; "gridColumn": { "alias": "gridColumn"; "required": false; }; "gridRow": { "alias": "gridRow"; "required": false; }; "gridArea": { "alias": "gridArea"; "required": false; }; "flex": { "alias": "flex"; "required": false; }; "order": { "alias": "order"; "required": false; }; "syncFirstRender": { "alias": "syncFirstRender"; "required": false; }; }, { "click": "click"; }, never, ["*"], true, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_compact: unknown;
     static ngAcceptInputType_selected: unknown;
+    static ngAcceptInputType_syncFirstRender: unknown;
 }

package/generated/menu-heading/menu-heading.component.d.ts

@@ -1,17 +1,29 @@
-import { OnInit } from '@angular/core';
+import { OnInit, OnChanges, AfterViewInit, SimpleChanges } from '@angular/core';
 import { GdsMenuHeading } from '@sebgroup/green-core/components/context-menu/context-menu.component.js';
 import * as i0 from "@angular/core";
 /**
  * Angular wrapper for the gds-menu-heading web component
  *
  */
-export declare class GdsMenuHeadingComponent implements OnInit {
+export declare class GdsMenuHeadingComponent implements OnInit, OnChanges, AfterViewInit {
     private elementRef;
     private zone;
     private cdr;
     get element(): GdsMenuHeading;
     constructor();
+    /** Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.
+  
+  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and
+  run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM
+  is projected.
+  
+  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the
+  element needs to be measured synchronously after being added to the DOM. */
+    syncFirstRender?: GdsMenuHeading['syncFirstRender'];
     ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GdsMenuHeadingComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GdsMenuHeadingComponent, "gds-menu-heading", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GdsMenuHeadingComponent, "gds-menu-heading", never, { "syncFirstRender": { "alias": "syncFirstRender"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_syncFirstRender: unknown;
 }

package/generated/menu-item/menu-item.component.d.ts

@@ -1,17 +1,29 @@
-import { OnInit } from '@angular/core';
+import { OnInit, OnChanges, AfterViewInit, SimpleChanges } from '@angular/core';
 import { GdsMenuItem } from '@sebgroup/green-core/components/context-menu/context-menu.component.js';
 import * as i0 from "@angular/core";
 /**
  * Angular wrapper for the gds-menu-item web component
  *
  */
-export declare class GdsMenuItemComponent implements OnInit {
+export declare class GdsMenuItemComponent implements OnInit, OnChanges, AfterViewInit {
     private elementRef;
     private zone;
     private cdr;
     get element(): GdsMenuItem;
     constructor();
+    /** Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.
+  
+  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and
+  run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM
+  is projected.
+  
+  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the
+  element needs to be measured synchronously after being added to the DOM. */
+    syncFirstRender?: GdsMenuItem['syncFirstRender'];
     ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GdsMenuItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GdsMenuItemComponent, "gds-menu-item", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GdsMenuItemComponent, "gds-menu-item", never, { "syncFirstRender": { "alias": "syncFirstRender"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_syncFirstRender: unknown;
 }

package/generated/option/option.component.d.ts

@@ -23,14 +23,24 @@ export declare class GdsOptionComponent implements OnInit, OnChanges, AfterViewI
   
   In a multiple select listbox, placeholder options will not be rendered in the list. */
     isPlaceholder?: GdsOption['isPlaceholder'];
+    /** Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.
+  
+  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and
+  run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM
+  is projected.
+  
+  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the
+  element needs to be measured synchronously after being added to the DOM. */
+    syncFirstRender?: GdsOption['syncFirstRender'];
     /** Fired when the option is selected. */
     gdsSelect: EventEmitter<CustomEvent<any>>;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GdsOptionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GdsOptionComponent, "gds-option", never, { "value": { "alias": "value"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "isPlaceholder": { "alias": "isPlaceholder"; "required": false; }; }, { "gdsSelect": "gdsSelect"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GdsOptionComponent, "gds-option", never, { "value": { "alias": "value"; "required": false; }; "hidden": { "alias": "hidden"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "isPlaceholder": { "alias": "isPlaceholder"; "required": false; }; "syncFirstRender": { "alias": "syncFirstRender"; "required": false; }; }, { "gdsSelect": "gdsSelect"; }, never, ["*"], true, never>;
     static ngAcceptInputType_hidden: unknown;
     static ngAcceptInputType_selected: unknown;
     static ngAcceptInputType_isPlaceholder: unknown;
+    static ngAcceptInputType_syncFirstRender: unknown;
 }

package/generated/pagination/pagination.component.d.ts

@@ -81,6 +81,15 @@ export declare class GdsPaginationComponent implements OnInit, OnChanges, AfterV
     /** Style Expression Property that controls the `order` property.
   Supports all valid CSS `order` values. */
     order?: GdsPagination['order'];
+    /** Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.
+  
+  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and
+  run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM
+  is projected.
+  
+  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the
+  element needs to be measured synchronously after being added to the DOM. */
+    syncFirstRender?: GdsPagination['syncFirstRender'];
     /** Fired when the active page changes. */
     gdsPageChange: EventEmitter<CustomEvent<any>>;
     /** Fired when the rows per page value changes. */
@@ -89,7 +98,8 @@ export declare class GdsPaginationComponent implements OnInit, OnChanges, AfterV
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GdsPaginationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GdsPaginationComponent, "gds-pagination", never, { "page": { "alias": "page"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "total": { "alias": "total"; "required": false; }; "options": { "alias": "options"; "required": false; }; "jump": { "alias": "jump"; "required": false; }; "hideOptions": { "alias": "hideOptions"; "required": false; }; "density": { "alias": "density"; "required": false; }; "label": { "alias": "label"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "marginInline": { "alias": "marginInline"; "required": false; }; "marginBlock": { "alias": "marginBlock"; "required": false; }; "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "inlineSize": { "alias": "inlineSize"; "required": false; }; "minInlineSize": { "alias": "minInlineSize"; "required": false; }; "maxInlineSize": { "alias": "maxInlineSize"; "required": false; }; "alignSelf": { "alias": "alignSelf"; "required": false; }; "justifySelf": { "alias": "justifySelf"; "required": false; }; "placeSelf": { "alias": "placeSelf"; "required": false; }; "gridColumn": { "alias": "gridColumn"; "required": false; }; "gridRow": { "alias": "gridRow"; "required": false; }; "gridArea": { "alias": "gridArea"; "required": false; }; "flex": { "alias": "flex"; "required": false; }; "order": { "alias": "order"; "required": false; }; }, { "gdsPageChange": "gdsPageChange"; "gdsRowsChange": "gdsRowsChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GdsPaginationComponent, "gds-pagination", never, { "page": { "alias": "page"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "total": { "alias": "total"; "required": false; }; "options": { "alias": "options"; "required": false; }; "jump": { "alias": "jump"; "required": false; }; "hideOptions": { "alias": "hideOptions"; "required": false; }; "density": { "alias": "density"; "required": false; }; "label": { "alias": "label"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "marginInline": { "alias": "marginInline"; "required": false; }; "marginBlock": { "alias": "marginBlock"; "required": false; }; "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "inlineSize": { "alias": "inlineSize"; "required": false; }; "minInlineSize": { "alias": "minInlineSize"; "required": false; }; "maxInlineSize": { "alias": "maxInlineSize"; "required": false; }; "alignSelf": { "alias": "alignSelf"; "required": false; }; "justifySelf": { "alias": "justifySelf"; "required": false; }; "placeSelf": { "alias": "placeSelf"; "required": false; }; "gridColumn": { "alias": "gridColumn"; "required": false; }; "gridRow": { "alias": "gridRow"; "required": false; }; "gridArea": { "alias": "gridArea"; "required": false; }; "flex": { "alias": "flex"; "required": false; }; "order": { "alias": "order"; "required": false; }; "syncFirstRender": { "alias": "syncFirstRender"; "required": false; }; }, { "gdsPageChange": "gdsPageChange"; "gdsRowsChange": "gdsRowsChange"; }, never, ["*"], true, never>;
     static ngAcceptInputType_jump: unknown;
     static ngAcceptInputType_hideOptions: unknown;
+    static ngAcceptInputType_syncFirstRender: unknown;
 }

package/generated/popover/popover.component.d.ts

@@ -68,16 +68,26 @@ export declare class GdsPopoverComponent implements OnInit, OnChanges, AfterView
   
   Defaults to `[offset(8), flip()]` */
     floatingUIMiddleware?: GdsPopover['floatingUIMiddleware'];
+    /** Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.
+  
+  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and
+  run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM
+  is projected.
+  
+  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the
+  element needs to be measured synchronously after being added to the DOM. */
+    syncFirstRender?: GdsPopover['syncFirstRender'];
     /** Fired when the popover is opened or closed. Can be cancelled to prevent the popover from opening or closing. The `detail` object contains the `open` boolean to indicate the result of the state change, and the `reason` string which can be one of `show`, `close`, or `cancel`. */
     gdsUiState: EventEmitter<CustomEvent<any>>;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GdsPopoverComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GdsPopoverComponent, "gds-popover", never, { "open": { "alias": "open"; "required": false; }; "popupRole": { "alias": "popupRole"; "required": false; }; "triggerRef": { "alias": "triggerRef"; "required": false; }; "anchorRef": { "alias": "anchorRef"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "disableMobileStyles": { "alias": "disableMobileStyles"; "required": false; }; "disableScrollClose": { "alias": "disableScrollClose"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "calcMinWidth": { "alias": "calcMinWidth"; "required": false; }; "calcMaxWidth": { "alias": "calcMaxWidth"; "required": false; }; "calcMinHeight": { "alias": "calcMinHeight"; "required": false; }; "calcMaxHeight": { "alias": "calcMaxHeight"; "required": false; }; "nonmodal": { "alias": "nonmodal"; "required": false; }; "backdrop": { "alias": "backdrop"; "required": false; }; "floatingUIMiddleware": { "alias": "floatingUIMiddleware"; "required": false; }; }, { "gdsUiState": "gdsUiState"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GdsPopoverComponent, "gds-popover", never, { "open": { "alias": "open"; "required": false; }; "popupRole": { "alias": "popupRole"; "required": false; }; "triggerRef": { "alias": "triggerRef"; "required": false; }; "anchorRef": { "alias": "anchorRef"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "disableMobileStyles": { "alias": "disableMobileStyles"; "required": false; }; "disableScrollClose": { "alias": "disableScrollClose"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "calcMinWidth": { "alias": "calcMinWidth"; "required": false; }; "calcMaxWidth": { "alias": "calcMaxWidth"; "required": false; }; "calcMinHeight": { "alias": "calcMinHeight"; "required": false; }; "calcMaxHeight": { "alias": "calcMaxHeight"; "required": false; }; "nonmodal": { "alias": "nonmodal"; "required": false; }; "backdrop": { "alias": "backdrop"; "required": false; }; "floatingUIMiddleware": { "alias": "floatingUIMiddleware"; "required": false; }; "syncFirstRender": { "alias": "syncFirstRender"; "required": false; }; }, { "gdsUiState": "gdsUiState"; }, never, ["*"], true, never>;
     static ngAcceptInputType_open: unknown;
     static ngAcceptInputType_disableMobileStyles: unknown;
     static ngAcceptInputType_disableScrollClose: unknown;
     static ngAcceptInputType_autofocus: unknown;
     static ngAcceptInputType_nonmodal: unknown;
+    static ngAcceptInputType_syncFirstRender: unknown;
 }

package/generated/radio/radio.component.d.ts

@@ -29,14 +29,24 @@ export declare class GdsRadioComponent implements OnInit, OnChanges, AfterViewIn
   This text is not visually rendered, but will be announced by
   screen readers when the radio button is in an invalid state. */
     errorMessage?: GdsRadio['errorMessage'];
+    /** Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.
+  
+  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and
+  run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM
+  is projected.
+  
+  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the
+  element needs to be measured synchronously after being added to the DOM. */
+    syncFirstRender?: GdsRadio['syncFirstRender'];
     /** Dispatched when the radio button is checked. */
     input: EventEmitter<InputEvent>;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GdsRadioComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GdsRadioComponent, "gds-radio", never, { "label": { "alias": "label"; "required": false; }; "supportingText": { "alias": "supportingText"; "required": false; }; "value": { "alias": "value"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; }, { "input": "input"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GdsRadioComponent, "gds-radio", never, { "label": { "alias": "label"; "required": false; }; "supportingText": { "alias": "supportingText"; "required": false; }; "value": { "alias": "value"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "syncFirstRender": { "alias": "syncFirstRender"; "required": false; }; }, { "input": "input"; }, never, ["*"], true, never>;
     static ngAcceptInputType_checked: unknown;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_invalid: unknown;
+    static ngAcceptInputType_syncFirstRender: unknown;
 }

package/generated/radio-group/radio-group.component.d.ts

@@ -84,6 +84,15 @@ export declare class GdsRadioGroupComponent extends GdsFormControlBase {
     name?: GdsRadioGroup['name'];
     /** If the input is Disabled */
     disabled?: GdsRadioGroup['disabled'];
+    /** Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.
+  
+  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and
+  run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM
+  is projected.
+  
+  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the
+  element needs to be measured synchronously after being added to the DOM. */
+    syncFirstRender?: GdsRadioGroup['syncFirstRender'];
     /** Fired when a radio button selection changes */
     change: EventEmitter<Event>;
     /** Fired when a radio button selection changes */
@@ -93,8 +102,9 @@ export declare class GdsRadioGroupComponent extends GdsFormControlBase {
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GdsRadioGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GdsRadioGroupComponent, "gds-radio-group", never, { "alignSelf": { "alias": "alignSelf"; "required": false; }; "justifySelf": { "alias": "justifySelf"; "required": false; }; "placeSelf": { "alias": "placeSelf"; "required": false; }; "gridColumn": { "alias": "gridColumn"; "required": false; }; "gridRow": { "alias": "gridRow"; "required": false; }; "gridArea": { "alias": "gridArea"; "required": false; }; "flex": { "alias": "flex"; "required": false; }; "order": { "alias": "order"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "marginInline": { "alias": "marginInline"; "required": false; }; "marginBlock": { "alias": "marginBlock"; "required": false; }; "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "inlineSize": { "alias": "inlineSize"; "required": false; }; "minInlineSize": { "alias": "minInlineSize"; "required": false; }; "maxInlineSize": { "alias": "maxInlineSize"; "required": false; }; "size": { "alias": "size"; "required": false; }; "flexDirection": { "alias": "flexDirection"; "required": false; }; "supportingText": { "alias": "supportingText"; "required": false; }; "showExtendedSupportingText": { "alias": "showExtendedSupportingText"; "required": false; }; "validator": { "alias": "validator"; "required": false; }; "required": { "alias": "required"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "label": { "alias": "label"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; "input": "input"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GdsRadioGroupComponent, "gds-radio-group", never, { "alignSelf": { "alias": "alignSelf"; "required": false; }; "justifySelf": { "alias": "justifySelf"; "required": false; }; "placeSelf": { "alias": "placeSelf"; "required": false; }; "gridColumn": { "alias": "gridColumn"; "required": false; }; "gridRow": { "alias": "gridRow"; "required": false; }; "gridArea": { "alias": "gridArea"; "required": false; }; "flex": { "alias": "flex"; "required": false; }; "order": { "alias": "order"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "marginInline": { "alias": "marginInline"; "required": false; }; "marginBlock": { "alias": "marginBlock"; "required": false; }; "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "inlineSize": { "alias": "inlineSize"; "required": false; }; "minInlineSize": { "alias": "minInlineSize"; "required": false; }; "maxInlineSize": { "alias": "maxInlineSize"; "required": false; }; "size": { "alias": "size"; "required": false; }; "flexDirection": { "alias": "flexDirection"; "required": false; }; "supportingText": { "alias": "supportingText"; "required": false; }; "showExtendedSupportingText": { "alias": "showExtendedSupportingText"; "required": false; }; "validator": { "alias": "validator"; "required": false; }; "required": { "alias": "required"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "label": { "alias": "label"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "syncFirstRender": { "alias": "syncFirstRender"; "required": false; }; }, { "change": "change"; "input": "input"; }, never, ["*"], true, never>;
     static ngAcceptInputType_showExtendedSupportingText: unknown;
     static ngAcceptInputType_required: unknown;
     static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_syncFirstRender: unknown;
 }

package/generated/rich-text/rich-text.component.d.ts

@@ -61,9 +61,19 @@ export declare class GdsRichTextComponent implements OnInit, OnChanges, AfterVie
     /** Style Expression Property that controls the `margin-block` property.
   Only accepts space tokens. */
     marginBlock?: GdsRichText['margin-block'];
+    /** Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.
+  
+  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and
+  run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM
+  is projected.
+  
+  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the
+  element needs to be measured synchronously after being added to the DOM. */
+    syncFirstRender?: GdsRichText['syncFirstRender'];
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GdsRichTextComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GdsRichTextComponent, "gds-rich-text", never, { "captureMode": { "alias": "captureMode"; "required": false; }; "innerHTML": { "alias": "innerHTML"; "required": false; }; "alignSelf": { "alias": "alignSelf"; "required": false; }; "justifySelf": { "alias": "justifySelf"; "required": false; }; "placeSelf": { "alias": "placeSelf"; "required": false; }; "gridColumn": { "alias": "gridColumn"; "required": false; }; "gridRow": { "alias": "gridRow"; "required": false; }; "gridArea": { "alias": "gridArea"; "required": false; }; "flex": { "alias": "flex"; "required": false; }; "order": { "alias": "order"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "marginInline": { "alias": "marginInline"; "required": false; }; "marginBlock": { "alias": "marginBlock"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GdsRichTextComponent, "gds-rich-text", never, { "captureMode": { "alias": "captureMode"; "required": false; }; "innerHTML": { "alias": "innerHTML"; "required": false; }; "alignSelf": { "alias": "alignSelf"; "required": false; }; "justifySelf": { "alias": "justifySelf"; "required": false; }; "placeSelf": { "alias": "placeSelf"; "required": false; }; "gridColumn": { "alias": "gridColumn"; "required": false; }; "gridRow": { "alias": "gridRow"; "required": false; }; "gridArea": { "alias": "gridArea"; "required": false; }; "flex": { "alias": "flex"; "required": false; }; "order": { "alias": "order"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "marginInline": { "alias": "marginInline"; "required": false; }; "marginBlock": { "alias": "marginBlock"; "required": false; }; "syncFirstRender": { "alias": "syncFirstRender"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_syncFirstRender: unknown;
 }

package/generated/segment/segment.component.d.ts

@@ -36,12 +36,22 @@ export declare class GdsSegmentComponent implements OnInit, OnChanges, AfterView
     /** Style Expression Property that controls the `max-inline-size` property.
   Supports space tokens and all valid CSS `max-inline-size` values. */
     maxInlineSize?: GdsSegment['max-inline-size'];
+    /** Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.
+  
+  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and
+  run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM
+  is projected.
+  
+  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the
+  element needs to be measured synchronously after being added to the DOM. */
+    syncFirstRender?: GdsSegment['syncFirstRender'];
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GdsSegmentComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GdsSegmentComponent, "gds-segment", never, { "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "_isVisible": { "alias": "_isVisible"; "required": false; }; "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "inlineSize": { "alias": "inlineSize"; "required": false; }; "minInlineSize": { "alias": "minInlineSize"; "required": false; }; "maxInlineSize": { "alias": "maxInlineSize"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GdsSegmentComponent, "gds-segment", never, { "selected": { "alias": "selected"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "_isVisible": { "alias": "_isVisible"; "required": false; }; "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "inlineSize": { "alias": "inlineSize"; "required": false; }; "minInlineSize": { "alias": "minInlineSize"; "required": false; }; "maxInlineSize": { "alias": "maxInlineSize"; "required": false; }; "syncFirstRender": { "alias": "syncFirstRender"; "required": false; }; }, {}, never, ["*"], true, never>;
     static ngAcceptInputType_selected: unknown;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType__isVisible: unknown;
+    static ngAcceptInputType_syncFirstRender: unknown;
 }

package/generated/segmented-control/segmented-control.component.d.ts

@@ -69,11 +69,21 @@ export declare class GdsSegmentedControlComponent implements OnInit, OnChanges,
     /** Style Expression Property that controls the `margin-block` property.
   Only accepts space tokens. */
     marginBlock?: GdsSegmentedControl['margin-block'];
+    /** Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.
+  
+  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and
+  run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM
+  is projected.
+  
+  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the
+  element needs to be measured synchronously after being added to the DOM. */
+    syncFirstRender?: GdsSegmentedControl['syncFirstRender'];
     /** Fires when the selected segment is changed */
     change: EventEmitter<Event>;
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<GdsSegmentedControlComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GdsSegmentedControlComponent, "gds-segmented-control", never, { "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; "intersectionObserver": { "alias": "intersectionObserver"; "required": false; }; "alignSelf": { "alias": "alignSelf"; "required": false; }; "justifySelf": { "alias": "justifySelf"; "required": false; }; "placeSelf": { "alias": "placeSelf"; "required": false; }; "gridColumn": { "alias": "gridColumn"; "required": false; }; "gridRow": { "alias": "gridRow"; "required": false; }; "gridArea": { "alias": "gridArea"; "required": false; }; "flex": { "alias": "flex"; "required": false; }; "order": { "alias": "order"; "required": false; }; "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "inlineSize": { "alias": "inlineSize"; "required": false; }; "minInlineSize": { "alias": "minInlineSize"; "required": false; }; "maxInlineSize": { "alias": "maxInlineSize"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "marginInline": { "alias": "marginInline"; "required": false; }; "marginBlock": { "alias": "marginBlock"; "required": false; }; }, { "change": "change"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GdsSegmentedControlComponent, "gds-segmented-control", never, { "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; "intersectionObserver": { "alias": "intersectionObserver"; "required": false; }; "alignSelf": { "alias": "alignSelf"; "required": false; }; "justifySelf": { "alias": "justifySelf"; "required": false; }; "placeSelf": { "alias": "placeSelf"; "required": false; }; "gridColumn": { "alias": "gridColumn"; "required": false; }; "gridRow": { "alias": "gridRow"; "required": false; }; "gridArea": { "alias": "gridArea"; "required": false; }; "flex": { "alias": "flex"; "required": false; }; "order": { "alias": "order"; "required": false; }; "width": { "alias": "width"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; "inlineSize": { "alias": "inlineSize"; "required": false; }; "minInlineSize": { "alias": "minInlineSize"; "required": false; }; "maxInlineSize": { "alias": "maxInlineSize"; "required": false; }; "margin": { "alias": "margin"; "required": false; }; "marginInline": { "alias": "marginInline"; "required": false; }; "marginBlock": { "alias": "marginBlock"; "required": false; }; "syncFirstRender": { "alias": "syncFirstRender"; "required": false; }; }, { "change": "change"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_syncFirstRender: unknown;
 }