@sebgroup/green-core-ng 3.17.0 → 3.17.1

package/fesm2022/sebgroup-green-core-ng.mjs

@@ -5,11 +5,11 @@ import { GdsAlert } from '@sebgroup/green-core/components/alert/alert.component.
 import { GdsAvatar } from '@sebgroup/green-core/components/avatar/avatar.component.js';
 import { GdsBadge } from '@sebgroup/green-core/components/badge/badge.component.js';
 import { GdsBlur } from '@sebgroup/green-core/components/blur/blur.component.js';
-import { GdsBreadcrumbs } from '@sebgroup/green-core/components/breadcrumbs/breadcrumbs.component.js';
 import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { LocationStrategy, DOCUMENT, CommonModule } from '@angular/common';
 import { Router, RouterLink, RouterLinkActive, NavigationEnd } from '@angular/router';
 import { GdsButton } from '@sebgroup/green-core/components/button/button.component.js';
+import { GdsBreadcrumbs } from '@sebgroup/green-core/components/breadcrumbs/breadcrumbs.component.js';
 import { GdsCalendar } from '@sebgroup/green-core/components/calendar/calendar.component.js';
 import { GdsCard } from '@sebgroup/green-core/components/card/card.component.js';
 import { GdsCardLinked } from '@sebgroup/green-core/components/card-linked/card-linked.component.js';
@@ -17,9 +17,9 @@ import { GdsCheckbox } from '@sebgroup/green-core/components/checkbox/checkbox.c
 import { GdsCoachmark } from '@sebgroup/green-core/components/coachmark/coachmark.component.js';
 import { GdsContextMenu, GdsMenuItem, GdsMenuHeading } from '@sebgroup/green-core/components/context-menu/context-menu.component.js';
 import { GdsDatepicker } from '@sebgroup/green-core/components/datepicker/datepicker.component.js';
+import { GdsDiv } from '@sebgroup/green-core/components/div/div.component.js';
 import { GdsDetails } from '@sebgroup/green-core/components/details/details.component.js';
 import { GdsDialog } from '@sebgroup/green-core/components/dialog/dialog.component.js';
-import { GdsDiv } from '@sebgroup/green-core/components/div/div.component.js';
 import { GdsDivider } from '@sebgroup/green-core/components/divider/divider.component.js';
 import { GdsDropdown, GdsOption } from '@sebgroup/green-core/components/dropdown/dropdown.component.js';
 import { GdsFab } from '@sebgroup/green-core/components/fab/fab.component.js';
@@ -798,101 +798,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Auto-generated from Custom Elements Manifest
  */
 
-/**
- * Angular wrapper for the gds-breadcrumbs web component
- *
- */
-let GdsBreadcrumbsComponent = class GdsBreadcrumbsComponent {
-    get element() {
-        return this.elementRef.nativeElement;
-    }
-    constructor() {
-        this.elementRef = inject((ElementRef));
-        this.zone = inject(NgZone);
-        this.cdr = inject(ChangeDetectorRef);
-        this.cdr.detach();
-    }
-    ngOnInit() {
-        // Define the custom element
-        try {
-            GdsBreadcrumbs.define();
-        }
-        catch (e) {
-            // Component may not be available in this version of green-core
-            console.warn('Failed to define gds-breadcrumbs:', e);
-        }
-    }
-    ngOnChanges(changes) {
-        // Implementation added by @ProxyInputs decorator
-    }
-    ngAfterViewInit() {
-        // Implementation added by @ProxyInputs decorator
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GdsBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.9", type: GdsBreadcrumbsComponent, isStandalone: true, selector: "gds-breadcrumbs", inputs: { size: "size", label: "label", alignSelf: "alignSelf", justifySelf: "justifySelf", placeSelf: "placeSelf", gridColumn: "gridColumn", gridRow: "gridRow", gridArea: "gridArea", flex: "flex", order: "order", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", inlineSize: "inlineSize", minInlineSize: "minInlineSize", maxInlineSize: "maxInlineSize", margin: "margin", marginInline: "marginInline", marginBlock: "marginBlock", syncFirstRender: ["syncFirstRender", "syncFirstRender", booleanAttribute] }, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-};
-GdsBreadcrumbsComponent = __decorate([
-    ProxyInputs(['size', 'label', 'align-self', 'justify-self', 'place-self', 'grid-column', 'grid-row', 'grid-area', 'flex', 'order', 'width', 'min-width', 'max-width', 'inline-size', 'min-inline-size', 'max-inline-size', 'margin', 'margin-inline', 'margin-block', 'syncFirstRender']),
-    __metadata("design:paramtypes", [])
-], GdsBreadcrumbsComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GdsBreadcrumbsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'gds-breadcrumbs',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `<ng-content></ng-content>`
-                }]
-        }], ctorParameters: () => [], propDecorators: { size: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], alignSelf: [{
-                type: Input
-            }], justifySelf: [{
-                type: Input
-            }], placeSelf: [{
-                type: Input
-            }], gridColumn: [{
-                type: Input
-            }], gridRow: [{
-                type: Input
-            }], gridArea: [{
-                type: Input
-            }], flex: [{
-                type: Input
-            }], order: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], minWidth: [{
-                type: Input
-            }], maxWidth: [{
-                type: Input
-            }], inlineSize: [{
-                type: Input
-            }], minInlineSize: [{
-                type: Input
-            }], maxInlineSize: [{
-                type: Input
-            }], margin: [{
-                type: Input
-            }], marginInline: [{
-                type: Input
-            }], marginBlock: [{
-                type: Input
-            }], syncFirstRender: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
-
-/**
- * GdsBreadcrumbsComponent - Angular wrapper for gds-breadcrumbs
- *
- *
- * Auto-generated from Custom Elements Manifest
- */
-
 /**
  * Base class for Angular wrapper components that wrap Green Core form controls.
  *
@@ -1210,6 +1115,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Auto-generated from Custom Elements Manifest
  */
 
+/**
+ * Angular wrapper for the gds-breadcrumbs web component
+ *
+ */
+let GdsBreadcrumbsComponent = class GdsBreadcrumbsComponent {
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    constructor() {
+        this.elementRef = inject((ElementRef));
+        this.zone = inject(NgZone);
+        this.cdr = inject(ChangeDetectorRef);
+        this.cdr.detach();
+    }
+    ngOnInit() {
+        // Define the custom element
+        try {
+            GdsBreadcrumbs.define();
+        }
+        catch (e) {
+            // Component may not be available in this version of green-core
+            console.warn('Failed to define gds-breadcrumbs:', e);
+        }
+    }
+    ngOnChanges(changes) {
+        // Implementation added by @ProxyInputs decorator
+    }
+    ngAfterViewInit() {
+        // Implementation added by @ProxyInputs decorator
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GdsBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.9", type: GdsBreadcrumbsComponent, isStandalone: true, selector: "gds-breadcrumbs", inputs: { size: "size", label: "label", alignSelf: "alignSelf", justifySelf: "justifySelf", placeSelf: "placeSelf", gridColumn: "gridColumn", gridRow: "gridRow", gridArea: "gridArea", flex: "flex", order: "order", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", inlineSize: "inlineSize", minInlineSize: "minInlineSize", maxInlineSize: "maxInlineSize", margin: "margin", marginInline: "marginInline", marginBlock: "marginBlock", syncFirstRender: ["syncFirstRender", "syncFirstRender", booleanAttribute] }, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+};
+GdsBreadcrumbsComponent = __decorate([
+    ProxyInputs(['size', 'label', 'align-self', 'justify-self', 'place-self', 'grid-column', 'grid-row', 'grid-area', 'flex', 'order', 'width', 'min-width', 'max-width', 'inline-size', 'min-inline-size', 'max-inline-size', 'margin', 'margin-inline', 'margin-block', 'syncFirstRender']),
+    __metadata("design:paramtypes", [])
+], GdsBreadcrumbsComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GdsBreadcrumbsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gds-breadcrumbs',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `<ng-content></ng-content>`
+                }]
+        }], ctorParameters: () => [], propDecorators: { size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], alignSelf: [{
+                type: Input
+            }], justifySelf: [{
+                type: Input
+            }], placeSelf: [{
+                type: Input
+            }], gridColumn: [{
+                type: Input
+            }], gridRow: [{
+                type: Input
+            }], gridArea: [{
+                type: Input
+            }], flex: [{
+                type: Input
+            }], order: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], minWidth: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], inlineSize: [{
+                type: Input
+            }], minInlineSize: [{
+                type: Input
+            }], maxInlineSize: [{
+                type: Input
+            }], margin: [{
+                type: Input
+            }], marginInline: [{
+                type: Input
+            }], marginBlock: [{
+                type: Input
+            }], syncFirstRender: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+/**
+ * GdsBreadcrumbsComponent - Angular wrapper for gds-breadcrumbs
+ *
+ *
+ * Auto-generated from Custom Elements Manifest
+ */
+
 /**
  * Angular wrapper for the gds-calendar web component
  *
@@ -2300,10 +2300,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  */
 
 /**
- * Angular wrapper for the gds-details web component
- * Details component that provides collapsible content sections.
+ * Angular wrapper for the gds-div web component
+ *
  */
-let GdsDetailsComponent = class GdsDetailsComponent {
+let GdsDivComponent = class GdsDivComponent {
     get element() {
         return this.elementRef.nativeElement;
     }
@@ -2311,23 +2311,17 @@ let GdsDetailsComponent = class GdsDetailsComponent {
         this.elementRef = inject((ElementRef));
         this.zone = inject(NgZone);
         this.cdr = inject(ChangeDetectorRef);
-        /** Fired when details opens or closes */
-        this.gdsUiState = new EventEmitter();
         this.cdr.detach();
     }
     ngOnInit() {
         // Define the custom element
         try {
-            GdsDetails.define();
+            GdsDiv.define();
         }
         catch (e) {
             // Component may not be available in this version of green-core
-            console.warn('Failed to define gds-details:', e);
+            console.warn('Failed to define gds-div:', e);
         }
-        // Set up event listeners
-        this.elementRef.nativeElement.addEventListener('gds-ui-state', (event) => {
-            this.gdsUiState.emit(event);
-        });
     }
     ngOnChanges(changes) {
         // Implementation added by @ProxyInputs decorator
@@ -2335,152 +2329,84 @@ let GdsDetailsComponent = class GdsDetailsComponent {
     ngAfterViewInit() {
         // Implementation added by @ProxyInputs decorator
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GdsDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.9", type: GdsDetailsComponent, isStandalone: true, selector: "gds-details", inputs: { summary: "summary", name: "name", open: ["open", "open", booleanAttribute], size: "size", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", inlineSize: "inlineSize", minInlineSize: "minInlineSize", maxInlineSize: "maxInlineSize", margin: "margin", marginInline: "marginInline", marginBlock: "marginBlock", alignSelf: "alignSelf", justifySelf: "justifySelf", placeSelf: "placeSelf", gridColumn: "gridColumn", gridRow: "gridRow", gridArea: "gridArea", flex: "flex", order: "order", syncFirstRender: ["syncFirstRender", "syncFirstRender", booleanAttribute] }, outputs: { gdsUiState: "gdsUiState" }, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GdsDivComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.9", type: GdsDivComponent, isStandalone: true, selector: "gds-div", inputs: { display: "display", level: "level", color: "color", background: "background", border: "border", borderColor: "borderColor", borderWidth: "borderWidth", borderStyle: "borderStyle", borderRadius: "borderRadius", boxShadow: "boxShadow", opacity: "opacity", overflow: "overflow", boxSizing: "boxSizing", zIndex: "zIndex", font: "font", fontWeight: "fontWeight", textAlign: "textAlign", textWrap: "textWrap", overflowWrap: "overflowWrap", whiteSpace: "whiteSpace", gap: "gap", alignItems: "alignItems", alignContent: "alignContent", justifyContent: "justifyContent", justifyItems: "justifyItems", flexDirection: "flexDirection", flexWrap: "flexWrap", placeItems: "placeItems", placeContent: "placeContent", aspectRatio: "aspectRatio", cursor: "cursor", pointerEvents: "pointerEvents", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", inlineSize: "inlineSize", minInlineSize: "minInlineSize", maxInlineSize: "maxInlineSize", height: "height", minHeight: "minHeight", maxHeight: "maxHeight", blockSize: "blockSize", minBlockSize: "minBlockSize", maxBlockSize: "maxBlockSize", margin: "margin", marginInline: "marginInline", marginBlock: "marginBlock", padding: "padding", paddingInline: "paddingInline", paddingBlock: "paddingBlock", alignSelf: "alignSelf", justifySelf: "justifySelf", placeSelf: "placeSelf", gridColumn: "gridColumn", gridRow: "gridRow", gridArea: "gridArea", flex: "flex", order: "order", position: "position", transform: "transform", inset: "inset", syncFirstRender: ["syncFirstRender", "syncFirstRender", booleanAttribute] }, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
-GdsDetailsComponent = __decorate([
-    ProxyInputs(['summary', 'name', 'open', 'size', 'width', 'min-width', 'max-width', 'inline-size', 'min-inline-size', 'max-inline-size', 'margin', 'margin-inline', 'margin-block', 'align-self', 'justify-self', 'place-self', 'grid-column', 'grid-row', 'grid-area', 'flex', 'order', 'syncFirstRender']),
+GdsDivComponent = __decorate([
+    ProxyInputs(['display', 'level', 'color', 'background', 'border', 'border-color', 'border-width', 'border-style', 'border-radius', 'box-shadow', 'opacity', 'overflow', 'box-sizing', 'z-index', 'font', 'font-weight', 'text-align', 'text-wrap', 'overflow-wrap', 'white-space', 'gap', 'align-items', 'align-content', 'justify-content', 'justify-items', 'flex-direction', 'flex-wrap', 'place-items', 'place-content', 'aspect-ratio', 'cursor', 'pointer-events', 'width', 'min-width', 'max-width', 'inline-size', 'min-inline-size', 'max-inline-size', 'height', 'min-height', 'max-height', 'block-size', 'min-block-size', 'max-block-size', 'margin', 'margin-inline', 'margin-block', 'padding', 'padding-inline', 'padding-block', 'align-self', 'justify-self', 'place-self', 'grid-column', 'grid-row', 'grid-area', 'flex', 'order', 'position', 'transform', 'inset', 'syncFirstRender']),
     __metadata("design:paramtypes", [])
-], GdsDetailsComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GdsDetailsComponent, decorators: [{
+], GdsDivComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GdsDivComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'gds-details',
+                    selector: 'gds-div',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `<ng-content></ng-content>`
                 }]
-        }], ctorParameters: () => [], propDecorators: { summary: [{
+        }], ctorParameters: () => [], propDecorators: { display: [{
                 type: Input
-            }], name: [{
+            }], level: [{
                 type: Input
-            }], open: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], size: [{
+            }], color: [{
                 type: Input
-            }], width: [{
+            }], background: [{
                 type: Input
-            }], minWidth: [{
+            }], border: [{
                 type: Input
-            }], maxWidth: [{
+            }], borderColor: [{
                 type: Input
-            }], inlineSize: [{
+            }], borderWidth: [{
                 type: Input
-            }], minInlineSize: [{
+            }], borderStyle: [{
                 type: Input
-            }], maxInlineSize: [{
+            }], borderRadius: [{
                 type: Input
-            }], margin: [{
+            }], boxShadow: [{
                 type: Input
-            }], marginInline: [{
+            }], opacity: [{
                 type: Input
-            }], marginBlock: [{
+            }], overflow: [{
                 type: Input
-            }], alignSelf: [{
+            }], boxSizing: [{
                 type: Input
-            }], justifySelf: [{
+            }], zIndex: [{
                 type: Input
-            }], placeSelf: [{
+            }], font: [{
                 type: Input
-            }], gridColumn: [{
+            }], fontWeight: [{
                 type: Input
-            }], gridRow: [{
+            }], textAlign: [{
                 type: Input
-            }], gridArea: [{
+            }], textWrap: [{
                 type: Input
-            }], flex: [{
+            }], overflowWrap: [{
                 type: Input
-            }], order: [{
+            }], whiteSpace: [{
                 type: Input
-            }], syncFirstRender: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], gdsUiState: [{
-                type: Output
-            }] } });
-
-/**
- * GdsDetailsComponent - Angular wrapper for gds-details
- * Details component that provides collapsible content sections.
- *
- * Auto-generated from Custom Elements Manifest
- */
-
-/**
- * Angular wrapper for the gds-dialog web component
- *
- */
-let GdsDialogComponent = class GdsDialogComponent {
-    get element() {
-        return this.elementRef.nativeElement;
-    }
-    constructor() {
-        this.elementRef = inject((ElementRef));
-        this.zone = inject(NgZone);
-        this.cdr = inject(ChangeDetectorRef);
-        /** Fired when the dialog is opened or closed. Can be cancelled to prevent the dialog from closing. */
-        this.gdsUiState = new EventEmitter();
-        /** Fired when the dialog is closed */
-        this.gdsClose = new EventEmitter();
-        /** Fired when the dialog is opened */
-        this.gdsShow = new EventEmitter();
-        this.cdr.detach();
-    }
-    ngOnInit() {
-        // Define the custom element
-        try {
-            GdsDialog.define();
-        }
-        catch (e) {
-            // Component may not be available in this version of green-core
-            console.warn('Failed to define gds-dialog:', e);
-        }
-        // Set up event listeners
-        this.elementRef.nativeElement.addEventListener('gds-ui-state', (event) => {
-            this.gdsUiState.emit(event);
-        });
-        this.elementRef.nativeElement.addEventListener('gds-close', (event) => {
-            this.gdsClose.emit(event);
-        });
-        this.elementRef.nativeElement.addEventListener('gds-show', (event) => {
-            this.gdsShow.emit(event);
-        });
-    }
-    ngOnChanges(changes) {
-        // Implementation added by @ProxyInputs decorator
-    }
-    ngAfterViewInit() {
-        // Implementation added by @ProxyInputs decorator
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GdsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.9", type: GdsDialogComponent, isStandalone: true, selector: "gds-dialog", inputs: { open: ["open", "open", booleanAttribute], heading: "heading", variant: "variant", placement: "placement", scrollable: ["scrollable", "scrollable", booleanAttribute], closedby: "closedby", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", inlineSize: "inlineSize", minInlineSize: "minInlineSize", maxInlineSize: "maxInlineSize", height: "height", minHeight: "minHeight", maxHeight: "maxHeight", blockSize: "blockSize", minBlockSize: "minBlockSize", maxBlockSize: "maxBlockSize", padding: "padding", paddingInline: "paddingInline", paddingBlock: "paddingBlock", syncFirstRender: ["syncFirstRender", "syncFirstRender", booleanAttribute] }, outputs: { gdsUiState: "gdsUiState", gdsClose: "gdsClose", gdsShow: "gdsShow" }, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-};
-GdsDialogComponent = __decorate([
-    ProxyInputs(['open', 'heading', 'variant', 'placement', 'scrollable', 'closedby', 'width', 'min-width', 'max-width', 'inline-size', 'min-inline-size', 'max-inline-size', 'height', 'min-height', 'max-height', 'block-size', 'min-block-size', 'max-block-size', 'padding', 'padding-inline', 'padding-block', 'syncFirstRender']),
-    __metadata("design:paramtypes", [])
-], GdsDialogComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GdsDialogComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'gds-dialog',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `<ng-content></ng-content>`
-                }]
-        }], ctorParameters: () => [], propDecorators: { open: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], heading: [{
+            }], gap: [{
                 type: Input
-            }], variant: [{
+            }], alignItems: [{
                 type: Input
-            }], placement: [{
+            }], alignContent: [{
                 type: Input
-            }], scrollable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], closedby: [{
+            }], justifyContent: [{
+                type: Input
+            }], justifyItems: [{
+                type: Input
+            }], flexDirection: [{
+                type: Input
+            }], flexWrap: [{
+                type: Input
+            }], placeItems: [{
+                type: Input
+            }], placeContent: [{
+                type: Input
+            }], aspectRatio: [{
+                type: Input
+            }], cursor: [{
+                type: Input
+            }], pointerEvents: [{
                 type: Input
             }], width: [{
                 type: Input
@@ -2506,35 +2432,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], maxBlockSize: [{
                 type: Input
+            }], margin: [{
+                type: Input
+            }], marginInline: [{
+                type: Input
+            }], marginBlock: [{
+                type: Input
             }], padding: [{
                 type: Input
             }], paddingInline: [{
                 type: Input
             }], paddingBlock: [{
                 type: Input
+            }], alignSelf: [{
+                type: Input
+            }], justifySelf: [{
+                type: Input
+            }], placeSelf: [{
+                type: Input
+            }], gridColumn: [{
+                type: Input
+            }], gridRow: [{
+                type: Input
+            }], gridArea: [{
+                type: Input
+            }], flex: [{
+                type: Input
+            }], order: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }], transform: [{
+                type: Input
+            }], inset: [{
+                type: Input
             }], syncFirstRender: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], gdsUiState: [{
-                type: Output
-            }], gdsClose: [{
-                type: Output
-            }], gdsShow: [{
-                type: Output
             }] } });
 
 /**
- * GdsDialogComponent - Angular wrapper for gds-dialog
+ * GdsDivComponent - Angular wrapper for gds-div
  *
  *
  * Auto-generated from Custom Elements Manifest
  */
 
 /**
- * Angular wrapper for the gds-div web component
- *
+ * Angular wrapper for the gds-details web component
+ * Details component that provides collapsible content sections.
  */
-let GdsDivComponent = class GdsDivComponent {
+let GdsDetailsComponent = class GdsDetailsComponent {
     get element() {
         return this.elementRef.nativeElement;
     }
@@ -2542,17 +2490,23 @@ let GdsDivComponent = class GdsDivComponent {
         this.elementRef = inject((ElementRef));
         this.zone = inject(NgZone);
         this.cdr = inject(ChangeDetectorRef);
+        /** Fired when details opens or closes */
+        this.gdsUiState = new EventEmitter();
         this.cdr.detach();
     }
     ngOnInit() {
         // Define the custom element
         try {
-            GdsDiv.define();
+            GdsDetails.define();
         }
         catch (e) {
             // Component may not be available in this version of green-core
-            console.warn('Failed to define gds-div:', e);
+            console.warn('Failed to define gds-details:', e);
         }
+        // Set up event listeners
+        this.elementRef.nativeElement.addEventListener('gds-ui-state', (event) => {
+            this.gdsUiState.emit(event);
+        });
     }
     ngOnChanges(changes) {
         // Implementation added by @ProxyInputs decorator
@@ -2560,84 +2514,152 @@ let GdsDivComponent = class GdsDivComponent {
     ngAfterViewInit() {
         // Implementation added by @ProxyInputs decorator
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GdsDivComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.9", type: GdsDivComponent, isStandalone: true, selector: "gds-div", inputs: { display: "display", level: "level", color: "color", background: "background", border: "border", borderColor: "borderColor", borderWidth: "borderWidth", borderStyle: "borderStyle", borderRadius: "borderRadius", boxShadow: "boxShadow", opacity: "opacity", overflow: "overflow", boxSizing: "boxSizing", zIndex: "zIndex", font: "font", fontWeight: "fontWeight", textAlign: "textAlign", textWrap: "textWrap", overflowWrap: "overflowWrap", whiteSpace: "whiteSpace", gap: "gap", alignItems: "alignItems", alignContent: "alignContent", justifyContent: "justifyContent", justifyItems: "justifyItems", flexDirection: "flexDirection", flexWrap: "flexWrap", placeItems: "placeItems", placeContent: "placeContent", aspectRatio: "aspectRatio", cursor: "cursor", pointerEvents: "pointerEvents", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", inlineSize: "inlineSize", minInlineSize: "minInlineSize", maxInlineSize: "maxInlineSize", height: "height", minHeight: "minHeight", maxHeight: "maxHeight", blockSize: "blockSize", minBlockSize: "minBlockSize", maxBlockSize: "maxBlockSize", margin: "margin", marginInline: "marginInline", marginBlock: "marginBlock", padding: "padding", paddingInline: "paddingInline", paddingBlock: "paddingBlock", alignSelf: "alignSelf", justifySelf: "justifySelf", placeSelf: "placeSelf", gridColumn: "gridColumn", gridRow: "gridRow", gridArea: "gridArea", flex: "flex", order: "order", position: "position", transform: "transform", inset: "inset", syncFirstRender: ["syncFirstRender", "syncFirstRender", booleanAttribute] }, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GdsDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.9", type: GdsDetailsComponent, isStandalone: true, selector: "gds-details", inputs: { summary: "summary", name: "name", open: ["open", "open", booleanAttribute], size: "size", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", inlineSize: "inlineSize", minInlineSize: "minInlineSize", maxInlineSize: "maxInlineSize", margin: "margin", marginInline: "marginInline", marginBlock: "marginBlock", alignSelf: "alignSelf", justifySelf: "justifySelf", placeSelf: "placeSelf", gridColumn: "gridColumn", gridRow: "gridRow", gridArea: "gridArea", flex: "flex", order: "order", syncFirstRender: ["syncFirstRender", "syncFirstRender", booleanAttribute] }, outputs: { gdsUiState: "gdsUiState" }, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
-GdsDivComponent = __decorate([
-    ProxyInputs(['display', 'level', 'color', 'background', 'border', 'border-color', 'border-width', 'border-style', 'border-radius', 'box-shadow', 'opacity', 'overflow', 'box-sizing', 'z-index', 'font', 'font-weight', 'text-align', 'text-wrap', 'overflow-wrap', 'white-space', 'gap', 'align-items', 'align-content', 'justify-content', 'justify-items', 'flex-direction', 'flex-wrap', 'place-items', 'place-content', 'aspect-ratio', 'cursor', 'pointer-events', 'width', 'min-width', 'max-width', 'inline-size', 'min-inline-size', 'max-inline-size', 'height', 'min-height', 'max-height', 'block-size', 'min-block-size', 'max-block-size', 'margin', 'margin-inline', 'margin-block', 'padding', 'padding-inline', 'padding-block', 'align-self', 'justify-self', 'place-self', 'grid-column', 'grid-row', 'grid-area', 'flex', 'order', 'position', 'transform', 'inset', 'syncFirstRender']),
+GdsDetailsComponent = __decorate([
+    ProxyInputs(['summary', 'name', 'open', 'size', 'width', 'min-width', 'max-width', 'inline-size', 'min-inline-size', 'max-inline-size', 'margin', 'margin-inline', 'margin-block', 'align-self', 'justify-self', 'place-self', 'grid-column', 'grid-row', 'grid-area', 'flex', 'order', 'syncFirstRender']),
     __metadata("design:paramtypes", [])
-], GdsDivComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GdsDivComponent, decorators: [{
+], GdsDetailsComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GdsDetailsComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'gds-div',
+                    selector: 'gds-details',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `<ng-content></ng-content>`
                 }]
-        }], ctorParameters: () => [], propDecorators: { display: [{
-                type: Input
-            }], level: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], background: [{
-                type: Input
-            }], border: [{
-                type: Input
-            }], borderColor: [{
-                type: Input
-            }], borderWidth: [{
-                type: Input
-            }], borderStyle: [{
-                type: Input
-            }], borderRadius: [{
+        }], ctorParameters: () => [], propDecorators: { summary: [{
                 type: Input
-            }], boxShadow: [{
+            }], name: [{
                 type: Input
-            }], opacity: [{
+            }], open: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], size: [{
                 type: Input
-            }], overflow: [{
+            }], width: [{
                 type: Input
-            }], boxSizing: [{
+            }], minWidth: [{
                 type: Input
-            }], zIndex: [{
+            }], maxWidth: [{
                 type: Input
-            }], font: [{
+            }], inlineSize: [{
                 type: Input
-            }], fontWeight: [{
+            }], minInlineSize: [{
                 type: Input
-            }], textAlign: [{
+            }], maxInlineSize: [{
                 type: Input
-            }], textWrap: [{
+            }], margin: [{
                 type: Input
-            }], overflowWrap: [{
+            }], marginInline: [{
                 type: Input
-            }], whiteSpace: [{
+            }], marginBlock: [{
                 type: Input
-            }], gap: [{
+            }], alignSelf: [{
                 type: Input
-            }], alignItems: [{
+            }], justifySelf: [{
                 type: Input
-            }], alignContent: [{
+            }], placeSelf: [{
                 type: Input
-            }], justifyContent: [{
+            }], gridColumn: [{
                 type: Input
-            }], justifyItems: [{
+            }], gridRow: [{
                 type: Input
-            }], flexDirection: [{
+            }], gridArea: [{
                 type: Input
-            }], flexWrap: [{
+            }], flex: [{
                 type: Input
-            }], placeItems: [{
+            }], order: [{
                 type: Input
-            }], placeContent: [{
+            }], syncFirstRender: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], gdsUiState: [{
+                type: Output
+            }] } });
+
+/**
+ * GdsDetailsComponent - Angular wrapper for gds-details
+ * Details component that provides collapsible content sections.
+ *
+ * Auto-generated from Custom Elements Manifest
+ */
+
+/**
+ * Angular wrapper for the gds-dialog web component
+ *
+ */
+let GdsDialogComponent = class GdsDialogComponent {
+    get element() {
+        return this.elementRef.nativeElement;
+    }
+    constructor() {
+        this.elementRef = inject((ElementRef));
+        this.zone = inject(NgZone);
+        this.cdr = inject(ChangeDetectorRef);
+        /** Fired when the dialog is opened or closed. Can be cancelled to prevent the dialog from closing. */
+        this.gdsUiState = new EventEmitter();
+        /** Fired when the dialog is closed */
+        this.gdsClose = new EventEmitter();
+        /** Fired when the dialog is opened */
+        this.gdsShow = new EventEmitter();
+        this.cdr.detach();
+    }
+    ngOnInit() {
+        // Define the custom element
+        try {
+            GdsDialog.define();
+        }
+        catch (e) {
+            // Component may not be available in this version of green-core
+            console.warn('Failed to define gds-dialog:', e);
+        }
+        // Set up event listeners
+        this.elementRef.nativeElement.addEventListener('gds-ui-state', (event) => {
+            this.gdsUiState.emit(event);
+        });
+        this.elementRef.nativeElement.addEventListener('gds-close', (event) => {
+            this.gdsClose.emit(event);
+        });
+        this.elementRef.nativeElement.addEventListener('gds-show', (event) => {
+            this.gdsShow.emit(event);
+        });
+    }
+    ngOnChanges(changes) {
+        // Implementation added by @ProxyInputs decorator
+    }
+    ngAfterViewInit() {
+        // Implementation added by @ProxyInputs decorator
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GdsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.9", type: GdsDialogComponent, isStandalone: true, selector: "gds-dialog", inputs: { open: ["open", "open", booleanAttribute], heading: "heading", variant: "variant", placement: "placement", scrollable: ["scrollable", "scrollable", booleanAttribute], closedby: "closedby", width: "width", minWidth: "minWidth", maxWidth: "maxWidth", inlineSize: "inlineSize", minInlineSize: "minInlineSize", maxInlineSize: "maxInlineSize", height: "height", minHeight: "minHeight", maxHeight: "maxHeight", blockSize: "blockSize", minBlockSize: "minBlockSize", maxBlockSize: "maxBlockSize", padding: "padding", paddingInline: "paddingInline", paddingBlock: "paddingBlock", syncFirstRender: ["syncFirstRender", "syncFirstRender", booleanAttribute] }, outputs: { gdsUiState: "gdsUiState", gdsClose: "gdsClose", gdsShow: "gdsShow" }, usesOnChanges: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+};
+GdsDialogComponent = __decorate([
+    ProxyInputs(['open', 'heading', 'variant', 'placement', 'scrollable', 'closedby', 'width', 'min-width', 'max-width', 'inline-size', 'min-inline-size', 'max-inline-size', 'height', 'min-height', 'max-height', 'block-size', 'min-block-size', 'max-block-size', 'padding', 'padding-inline', 'padding-block', 'syncFirstRender']),
+    __metadata("design:paramtypes", [])
+], GdsDialogComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GdsDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'gds-dialog',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `<ng-content></ng-content>`
+                }]
+        }], ctorParameters: () => [], propDecorators: { open: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], heading: [{
                 type: Input
-            }], aspectRatio: [{
+            }], variant: [{
                 type: Input
-            }], cursor: [{
+            }], placement: [{
                 type: Input
-            }], pointerEvents: [{
+            }], scrollable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], closedby: [{
                 type: Input
             }], width: [{
                 type: Input
@@ -2663,47 +2685,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }], maxBlockSize: [{
                 type: Input
-            }], margin: [{
-                type: Input
-            }], marginInline: [{
-                type: Input
-            }], marginBlock: [{
-                type: Input
             }], padding: [{
                 type: Input
             }], paddingInline: [{
                 type: Input
             }], paddingBlock: [{
                 type: Input
-            }], alignSelf: [{
-                type: Input
-            }], justifySelf: [{
-                type: Input
-            }], placeSelf: [{
-                type: Input
-            }], gridColumn: [{
-                type: Input
-            }], gridRow: [{
-                type: Input
-            }], gridArea: [{
-                type: Input
-            }], flex: [{
-                type: Input
-            }], order: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }], transform: [{
-                type: Input
-            }], inset: [{
-                type: Input
             }], syncFirstRender: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], gdsUiState: [{
+                type: Output
+            }], gdsClose: [{
+                type: Output
+            }], gdsShow: [{
+                type: Output
             }] } });
 
 /**
- * GdsDivComponent - Angular wrapper for gds-div
+ * GdsDialogComponent - Angular wrapper for gds-dialog
  *
  *
  * Auto-generated from Custom Elements Manifest
@@ -37996,8 +37996,8 @@ class GreenCoreNgModule {
             GdsAvatarComponent,
             GdsBadgeComponent,
             GdsBlurComponent,
-            GdsBreadcrumbsComponent,
             GdsButtonComponent,
+            GdsBreadcrumbsComponent,
             GdsCalendarComponent,
             GdsCardComponent,
             GdsCardLinkedComponent,
@@ -38005,9 +38005,9 @@ class GreenCoreNgModule {
             GdsCoachmarkComponent,
             GdsContextMenuComponent,
             GdsDatepickerComponent,
+            GdsDivComponent,
             GdsDetailsComponent,
             GdsDialogComponent,
-            GdsDivComponent,
             GdsDividerComponent,
             GdsDropdownComponent,
             GdsFabComponent,
@@ -38373,8 +38373,8 @@ class GreenCoreNgModule {
             GdsAvatarComponent,
             GdsBadgeComponent,
             GdsBlurComponent,
-            GdsBreadcrumbsComponent,
             GdsButtonComponent,
+            GdsBreadcrumbsComponent,
             GdsCalendarComponent,
             GdsCardComponent,
             GdsCardLinkedComponent,
@@ -38382,9 +38382,9 @@ class GreenCoreNgModule {
             GdsCoachmarkComponent,
             GdsContextMenuComponent,
             GdsDatepickerComponent,
+            GdsDivComponent,
             GdsDetailsComponent,
             GdsDialogComponent,
-            GdsDivComponent,
             GdsDividerComponent,
             GdsDropdownComponent,
             GdsFabComponent,
@@ -38757,8 +38757,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         GdsAvatarComponent,
                         GdsBadgeComponent,
                         GdsBlurComponent,
-                        GdsBreadcrumbsComponent,
                         GdsButtonComponent,
+                        GdsBreadcrumbsComponent,
                         GdsCalendarComponent,
                         GdsCardComponent,
                         GdsCardLinkedComponent,
@@ -38766,9 +38766,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         GdsCoachmarkComponent,
                         GdsContextMenuComponent,
                         GdsDatepickerComponent,
+                        GdsDivComponent,
                         GdsDetailsComponent,
                         GdsDialogComponent,
-                        GdsDivComponent,
                         GdsDividerComponent,
                         GdsDropdownComponent,
                         GdsFabComponent,
@@ -39137,8 +39137,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         GdsAvatarComponent,
                         GdsBadgeComponent,
                         GdsBlurComponent,
-                        GdsBreadcrumbsComponent,
                         GdsButtonComponent,
+                        GdsBreadcrumbsComponent,
                         GdsCalendarComponent,
                         GdsCardComponent,
                         GdsCardLinkedComponent,
@@ -39146,9 +39146,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         GdsCoachmarkComponent,
                         GdsContextMenuComponent,
                         GdsDatepickerComponent,
+                        GdsDivComponent,
                         GdsDetailsComponent,
                         GdsDialogComponent,
-                        GdsDivComponent,
                         GdsDividerComponent,
                         GdsDropdownComponent,
                         GdsFabComponent,