@ganpatiinfo/gids-web-dom-reference 2.0.8 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @ganpatiinfo/gids-web-dom-reference
 
+## 2.1.0
+
+### Minor Changes
+
+- Added layout components
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - @ganpatiinfo/gids-core-shared@2.1.0
+  - @ganpatiinfo/gids-web-shared@2.1.0
+
+## 2.0.9
+
+### Patch Changes
+
+- Added `ButtonDock`, `ButtonGroup`, `SectionNotice` and `CompoundButton`
+- Updated dependencies
+- Updated dependencies
+  - @ganpatiinfo/gids-core-shared@2.0.9
+  - @ganpatiinfo/gids-web-shared@2.0.9
+
 ## 2.0.8
 
 ### Patch Changes

package/dist/components/GidsBox/GidsBox.d.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, type GidsBoxWebProps, PermittedGidsBoxElements } from '@ganpatiinfo/gids-web-shared';
+export type GidsBoxDomProps<ComponentType extends PermittedGidsBoxElements> = GidsBoxWebProps<Element, ComponentType> & {
+    className?: ClassValue;
+};
+export declare const GidsBoxDom: <ComponentType extends PermittedGidsBoxElements = "div">({ children, component, className, }: GidsBoxDomProps<ComponentType>) => HTMLElement;
+//# sourceMappingURL=GidsBox.d.ts.map

package/dist/components/GidsBox/GidsBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsBox.d.ts","sourceRoot":"","sources":["../../../src/components/GidsBox/GidsBox.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,UAAU,EACf,KAAK,eAAe,EAEpB,wBAAwB,EACxB,MAAM,8BAA8B,CAAC;AAKtC,MAAM,MAAM,eAAe,CAAC,aAAa,SAAS,wBAAwB,IACzE,eAAe,CAAC,OAAO,EAAE,aAAa,CAAC,GAAG;IACzC,SAAS,CAAC,EAAE,UAAU,CAAC;CACvB,CAAC;AAEH,eAAO,MAAM,UAAU,GACtB,aAAa,SAAS,wBAAwB,GAAG,KAAK,EACrD,qCAIC,eAAe,CAAC,aAAa,CAAC,KAAG,WAYnC,CAAC"}

package/dist/components/GidsBox/GidsBox.js

@@ -0,0 +1,14 @@
+import { GidsBoxWebUtils, } from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren } from '../../utils/domUtils.js';
+const { getGidsBoxClassNames } = GidsBoxWebUtils;
+export const GidsBoxDom = ({ children, component, className, }) => {
+    const box = document.createElement(
+    //@ts-expect-error: ex
+    component && component !== '' ? component : 'div');
+    box.className = getGidsBoxClassNames(className);
+    if (children) {
+        appendAsChildren(box, children);
+    }
+    return box;
+};
+//# sourceMappingURL=GidsBox.js.map

package/dist/components/GidsBox/GidsBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsBox.js","sourceRoot":"","sources":["../../../src/components/GidsBox/GidsBox.ts"],"names":[],"mappings":"AAAA,OAAO,EAGN,eAAe,GAEf,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,EAAE,oBAAoB,EAAE,GAAG,eAAe,CAAC;AAOjD,MAAM,CAAC,MAAM,UAAU,GAAG,CAExB,EACD,QAAQ,EACR,SAAS,EACT,SAAS,GACuB,EAAe,EAAE;IACjD,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa;IACjC,sBAAsB;IACtB,SAAS,IAAI,SAAS,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAClC,CAAC;IACjB,GAAG,CAAC,SAAS,GAAG,oBAAoB,CAAC,SAAS,CAAC,CAAC;IAEhD,IAAI,QAAQ,EAAE,CAAC;QACd,gBAAgB,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IACjC,CAAC;IAED,OAAO,GAAG,CAAC;AACZ,CAAC,CAAC"}

package/dist/components/GidsBreadcrumb/GidsBreadcrumb.d.ts

@@ -0,0 +1,8 @@
+import { type ClassValue } from '@ganpatiinfo/gids-web-shared';
+import { type DomChildren } from '../../utils/domUtils.js';
+import { type GidsBreadcrumbCommonProps } from '@ganpatiinfo/gids-core-shared';
+export interface GidsBreadcrumbDomProps extends GidsBreadcrumbCommonProps<DomChildren> {
+    extraClasses?: ClassValue;
+}
+export declare const GidsBreadcrumbDom: ({ children, extraClasses, }: GidsBreadcrumbDomProps) => HTMLElement;
+//# sourceMappingURL=GidsBreadcrumb.d.ts.map

package/dist/components/GidsBreadcrumb/GidsBreadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsBreadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/GidsBreadcrumb/GidsBreadcrumb.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,UAAU,EAEf,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAoB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,+BAA+B,CAAC;AAI/E,MAAM,WAAW,sBAChB,SAAQ,yBAAyB,CAAC,WAAW,CAAC;IAC9C,YAAY,CAAC,EAAE,UAAU,CAAC;CAC1B;AAED,eAAO,MAAM,iBAAiB,GAAI,6BAG/B,sBAAsB,KAAG,WAa3B,CAAC"}

package/dist/components/GidsBreadcrumb/GidsBreadcrumb.js

@@ -0,0 +1,15 @@
+import { GidsBreadcrumbWebUtils, } from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren } from '../../utils/domUtils.js';
+const { getGidsBreadcrumbClassNames } = GidsBreadcrumbWebUtils;
+export const GidsBreadcrumbDom = ({ children, extraClasses, }) => {
+    const breadcrumb = document.createElement('nav');
+    breadcrumb.className = getGidsBreadcrumbClassNames(extraClasses);
+    breadcrumb.setAttribute('aria-label', 'Breadcrumb');
+    if (children) {
+        const orderedList = document.createElement('ol');
+        appendAsChildren(orderedList, children);
+        breadcrumb.appendChild(orderedList);
+    }
+    return breadcrumb;
+};
+//# sourceMappingURL=GidsBreadcrumb.js.map

package/dist/components/GidsBreadcrumb/GidsBreadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsBreadcrumb.js","sourceRoot":"","sources":["../../../src/components/GidsBreadcrumb/GidsBreadcrumb.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,sBAAsB,GACtB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAoB,MAAM,yBAAyB,CAAC;AAG7E,MAAM,EAAE,2BAA2B,EAAE,GAAG,sBAAsB,CAAC;AAO/D,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EACjC,QAAQ,EACR,YAAY,GACY,EAAe,EAAE;IACzC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjD,UAAU,CAAC,SAAS,GAAG,2BAA2B,CAAC,YAAY,CAAC,CAAC;IAEjE,UAAU,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;IAEpD,IAAI,QAAQ,EAAE,CAAC;QACd,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QACjD,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QACxC,UAAU,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IACrC,CAAC;IAED,OAAO,UAAU,CAAC;AACnB,CAAC,CAAC"}

package/dist/components/GidsBreadcrumbItem/GidsBreadcrumbItem.d.ts

@@ -0,0 +1,10 @@
+import { type GidsBreadcrumbItemCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { type ClassValue } from '@ganpatiinfo/gids-web-shared';
+import { type DomNodeOrString } from '../../utils/domUtils.js';
+export interface GidsBreadcrumbItemDomProps extends GidsBreadcrumbItemCommonProps<DomNodeOrString, DomNodeOrString, DomNodeOrString> {
+    className?: ClassValue;
+    href?: DomNodeOrString;
+    onClick?: (this: HTMLAnchorElement, event: Event) => void;
+}
+export declare const GidsBreadcrumbItemDom: ({ children, selected, leadingIcon, href, onClick, className, separator, isSeparatorVisible, renderingSystem, currentIndex, totalLength, }: GidsBreadcrumbItemDomProps) => HTMLLIElement;
+//# sourceMappingURL=GidsBreadcrumbItem.d.ts.map

package/dist/components/GidsBreadcrumbItem/GidsBreadcrumbItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsBreadcrumbItem.d.ts","sourceRoot":"","sources":["../../../src/components/GidsBreadcrumbItem/GidsBreadcrumbItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,+BAA+B,CAAC;AACnF,OAAO,EACN,KAAK,UAAU,EAEf,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAEN,KAAK,eAAe,EACpB,MAAM,yBAAyB,CAAC;AAMjC,MAAM,WAAW,0BAChB,SAAQ,6BAA6B,CACpC,eAAe,EACf,eAAe,EACf,eAAe,CACf;IACD,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC1D;AAED,eAAO,MAAM,qBAAqB,GAAI,2IAYnC,0BAA0B,KAAG,aAwD/B,CAAC"}

package/dist/components/GidsBreadcrumbItem/GidsBreadcrumbItem.js

@@ -0,0 +1,45 @@
+import { GidsBreadcrumbItemWebUtils, } from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, } from '../../utils/domUtils.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+const { getGidsBreadcrumbItemClassNames } = GidsBreadcrumbItemWebUtils;
+export const GidsBreadcrumbItemDom = ({ children, selected, leadingIcon, href, onClick, className, separator, isSeparatorVisible = true, renderingSystem = 'non-array', currentIndex = 0, totalLength = 0, }) => {
+    const breadcrumbItem = document.createElement('li');
+    breadcrumbItem.className = getGidsBreadcrumbItemClassNames({ selected }, className);
+    const breadcrumbAnchorItem = document.createElement('a');
+    breadcrumbAnchorItem.className = `gids-breadcrumb-item__anchor-label`;
+    if (href) {
+        breadcrumbAnchorItem.setAttribute('href', href);
+    }
+    if (leadingIcon && leadingIcon !== '' && leadingIcon !== '(none)') {
+        breadcrumbAnchorItem.appendChild(GidsIconDom({
+            name: leadingIcon,
+            appearance: 'regular',
+            alt: '',
+            size: 'md',
+            className: 'gids-breadcrumb-item__leading-icon',
+        }));
+    }
+    if (children) {
+        appendAsChildren(breadcrumbAnchorItem, children);
+    }
+    breadcrumbItem.appendChild(breadcrumbAnchorItem);
+    if (isSeparatorVisible) {
+        if ((renderingSystem === 'array' && currentIndex < totalLength - 1) ||
+            renderingSystem === 'non-array') {
+            breadcrumbItem.appendChild(GidsIconDom({
+                name: separator && separator !== '' && separator !== '(none)'
+                    ? separator
+                    : 'chevron-right',
+                appearance: 'filled',
+                alt: '',
+                size: 'md',
+                className: 'gids-breadcrumb-item__separator-icon',
+            }));
+        }
+    }
+    if (onClick) {
+        breadcrumbItem.addEventListener('click', onClick);
+    }
+    return breadcrumbItem;
+};
+//# sourceMappingURL=GidsBreadcrumbItem.js.map

package/dist/components/GidsBreadcrumbItem/GidsBreadcrumbItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsBreadcrumbItem.js","sourceRoot":"","sources":["../../../src/components/GidsBreadcrumbItem/GidsBreadcrumbItem.ts"],"names":[],"mappings":"AACA,OAAO,EAEN,0BAA0B,GAC1B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EACN,gBAAgB,GAEhB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGtD,MAAM,EAAE,+BAA+B,EAAE,GAAG,0BAA0B,CAAC;AAavE,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EACrC,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,SAAS,EACT,SAAS,EACT,kBAAkB,GAAG,IAAI,EACzB,eAAe,GAAG,WAAW,EAC7B,YAAY,GAAG,CAAC,EAChB,WAAW,GAAG,CAAC,GACa,EAAiB,EAAE;IAC/C,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IACpD,cAAc,CAAC,SAAS,GAAG,+BAA+B,CACzD,EAAE,QAAQ,EAAE,EACZ,SAAS,CACT,CAAC;IACF,MAAM,oBAAoB,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzD,oBAAoB,CAAC,SAAS,GAAG,oCAAoC,CAAC;IAEtE,IAAI,IAAI,EAAE,CAAC;QACV,oBAAoB,CAAC,YAAY,CAAC,MAAM,EAAE,IAAc,CAAC,CAAC;IAC3D,CAAC;IAED,IAAI,WAAW,IAAI,WAAW,KAAK,EAAE,IAAI,WAAW,KAAK,QAAQ,EAAE,CAAC;QACnE,oBAAoB,CAAC,WAAW,CAC/B,WAAW,CAAC;YACX,IAAI,EAAE,WAAuB;YAC7B,UAAU,EAAE,SAAS;YACrB,GAAG,EAAE,EAAE;YACP,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,oCAAoC;SAC/C,CAAC,CACF,CAAC;IACH,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACd,gBAAgB,CAAC,oBAAoB,EAAE,QAAQ,CAAC,CAAC;IAClD,CAAC;IAED,cAAc,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAC;IAEjD,IAAI,kBAAkB,EAAE,CAAC;QACxB,IACC,CAAC,eAAe,KAAK,OAAO,IAAI,YAAY,GAAG,WAAW,GAAG,CAAC,CAAC;YAC/D,eAAe,KAAK,WAAW,EAC9B,CAAC;YACF,cAAc,CAAC,WAAW,CACzB,WAAW,CAAC;gBACX,IAAI,EACH,SAAS,IAAI,SAAS,KAAK,EAAE,IAAI,SAAS,KAAK,QAAQ;oBACtD,CAAC,CAAE,SAAsB;oBACzB,CAAC,CAAC,eAAe;gBACnB,UAAU,EAAE,QAAQ;gBACpB,GAAG,EAAE,EAAE;gBACP,IAAI,EAAE,IAAI;gBACV,SAAS,EAAE,sCAAsC;aACjD,CAAC,CACF,CAAC;QACH,CAAC;IACF,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACb,cAAc,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACnD,CAAC;IAED,OAAO,cAAc,CAAC;AACvB,CAAC,CAAC"}

package/dist/components/GidsButton/GidsButton.js

@@ -28,7 +28,7 @@ export const GidsButtonDom = ({ as, appearance, size, disabled, destructive, loa
     if (loading) {
         button.appendChild(GidsSpinnerControlDom({
             size: size === 'lg' || size === undefined ? 'md' : size,
-            indeterminate: true
+            indeterminate: true,
         }));
     }
     if (onClick && !loading) {

package/dist/components/GidsButton/GidsButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"GidsButton.js","sourceRoot":"","sources":["../../../src/components/GidsButton/GidsButton.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,kBAAkB,EAClB,QAAQ,GAGR,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAC;AACrF,OAAO,EAAE,gBAAgB,EAAoB,MAAM,yBAAyB,CAAC;AAE7E,MAAM,EAAE,uBAAuB,EAAE,GAAG,kBAAkB,CAAC;AAUvD,MAAM,CAAC,MAAM,aAAa,GAAG,CAE3B,EACD,EAAE,EACF,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,OAAO,GAC4B,EAEf,EAAE;IACtB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CACpC,EAAE,IAAI,QAAQ,CAC4D,CAAC;IAE5E,MAAM,CAAC,SAAS,GAAG,uBAAuB,CACzC,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,EACjD,CAAC,QAAQ,IAAI,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,CAC7D,CAAC;IAEF,IAAI,EAAE,KAAK,GAAG,EAAE,CAAC;QAChB,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,IAAI,QAAQ,CAAC,CAAC;QAE9C,IAAI,QAAQ,EAAE,CAAC;YACd,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACP,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QACpC,CAAC;IACF,CAAC;IAED,IAAI,EAAE,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,IAAI,EAAE,CAAC;YACV,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QACnC,CAAC;IACF,CAAC;IAED,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;IAE9C,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IAEvC,gBAAgB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IAEpC,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAE5B,gBAAgB,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IAEvC,IAAI,OAAO,EAAE,CAAC;QACb,MAAM,CAAC,WAAW,CACjB,qBAAqB,CAAC;YACrB,IAAI,EAAE,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;YAC3C,aAAa,EAAE,IAAI;SAC/B,CAAC,CACF,CAAC;IACH,CAAC;IAEE,IAAI,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;QACtB,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;IAC7C,CAAC;IAEJ,OAAO,MAAM,CAAC;AACf,CAAC,CAAC"}
+{"version":3,"file":"GidsButton.js","sourceRoot":"","sources":["../../../src/components/GidsButton/GidsButton.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,kBAAkB,EAClB,QAAQ,GAGR,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAC;AACrF,OAAO,EAAE,gBAAgB,EAAoB,MAAM,yBAAyB,CAAC;AAE7E,MAAM,EAAE,uBAAuB,EAAE,GAAG,kBAAkB,CAAC;AAUvD,MAAM,CAAC,MAAM,aAAa,GAAG,CAE3B,EACD,EAAE,EACF,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,WAAW,EACX,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,OAAO,GAC4B,EAEf,EAAE;IACtB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CACpC,EAAE,IAAI,QAAQ,CAC4D,CAAC;IAE5E,MAAM,CAAC,SAAS,GAAG,uBAAuB,CACzC,EAAE,UAAU,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,EACjD,CAAC,QAAQ,IAAI,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,CAC7D,CAAC;IAEF,IAAI,EAAE,KAAK,GAAG,EAAE,CAAC;QAChB,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,IAAI,QAAQ,CAAC,CAAC;QAE9C,IAAI,QAAQ,EAAE,CAAC;YACd,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACP,MAAM,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QACpC,CAAC;IACF,CAAC;IAED,IAAI,EAAE,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,IAAI,EAAE,CAAC;YACV,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QACnC,CAAC;IACF,CAAC;IAED,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;IAE9C,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IAEvC,gBAAgB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IAEpC,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAE5B,gBAAgB,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IAEvC,IAAI,OAAO,EAAE,CAAC;QACb,MAAM,CAAC,WAAW,CACjB,qBAAqB,CAAC;YACrB,IAAI,EAAE,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;YACvD,aAAa,EAAE,IAAI;SACnB,CAAC,CACF,CAAC;IACH,CAAC;IAED,IAAI,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;QACzB,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,MAAM,CAAC;AACf,CAAC,CAAC"}

package/dist/components/GidsButtonDock/GidsButtonDock.d.ts

@@ -0,0 +1,7 @@
+import { type GidsButtonDockCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { type DomChildren } from '../../utils/domUtils.js';
+export interface GidsButtonDockDomProps extends GidsButtonDockCommonProps<DomChildren> {
+    extraClasses?: string;
+}
+export declare const GidsButtonDockDom: ({ primaryChildren, secondaryChildren, extraClasses, }: GidsButtonDockDomProps) => HTMLDivElement;
+//# sourceMappingURL=GidsButtonDock.d.ts.map

package/dist/components/GidsButtonDock/GidsButtonDock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsButtonDock.d.ts","sourceRoot":"","sources":["../../../src/components/GidsButtonDock/GidsButtonDock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,yBAAyB,EAAE,MAAM,+BAA+B,CAAC;AAE/E,OAAO,EAAoB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI7E,MAAM,WAAW,sBAChB,SAAQ,yBAAyB,CAAC,WAAW,CAAC;IAC9C,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,iBAAiB,GAAI,uDAI/B,sBAAsB,KAAG,cAiB3B,CAAC"}

package/dist/components/GidsButtonDock/GidsButtonDock.js

@@ -0,0 +1,17 @@
+import { GidsButtonDockWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren } from '../../utils/domUtils.js';
+const { getGidsButtonDockClassNames } = GidsButtonDockWebUtils;
+export const GidsButtonDockDom = ({ primaryChildren, secondaryChildren, extraClasses, }) => {
+    const buttonDock = document.createElement('div');
+    buttonDock.className = getGidsButtonDockClassNames(extraClasses);
+    const primaryArea = document.createElement('div');
+    primaryArea.classList.add('gids-button-dock__primary-area');
+    const secondaryArea = document.createElement('div');
+    secondaryArea.classList.add('gids-button-dock__secondary-area');
+    appendAsChildren(primaryArea, primaryChildren);
+    appendAsChildren(secondaryArea, secondaryChildren);
+    appendAsChildren(buttonDock, secondaryArea);
+    appendAsChildren(buttonDock, primaryArea);
+    return buttonDock;
+};
+//# sourceMappingURL=GidsButtonDock.js.map

package/dist/components/GidsButtonDock/GidsButtonDock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsButtonDock.js","sourceRoot":"","sources":["../../../src/components/GidsButtonDock/GidsButtonDock.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAoB,MAAM,yBAAyB,CAAC;AAE7E,MAAM,EAAE,2BAA2B,EAAE,GAAG,sBAAsB,CAAC;AAO/D,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EACjC,eAAe,EACf,iBAAiB,EACjB,YAAY,GACY,EAAkB,EAAE;IAC5C,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjD,UAAU,CAAC,SAAS,GAAG,2BAA2B,CAAC,YAAY,CAAC,CAAC;IAEjE,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAClD,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,gCAAgC,CAAC,CAAC;IAE5D,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACpD,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,kCAAkC,CAAC,CAAC;IAEhE,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IAC/C,gBAAgB,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC;IAEnD,gBAAgB,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;IAC5C,gBAAgB,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;IAE1C,OAAO,UAAU,CAAC;AACnB,CAAC,CAAC"}

package/dist/components/GidsButtonGroup/GidsButtonGroup.d.ts

@@ -0,0 +1,7 @@
+import { GidsButtonGroupCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { DomChildren } from '../../utils/domUtils.js';
+export interface GidsButtonGroupDomProps extends GidsButtonGroupCommonProps<DomChildren> {
+    extraClasses?: string;
+}
+export declare const GidsButtonGroupDom: ({ layout, children, extraClasses, }: GidsButtonGroupDomProps) => HTMLSpanElement;
+//# sourceMappingURL=GidsButtonGroup.d.ts.map

package/dist/components/GidsButtonGroup/GidsButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsButtonGroup.d.ts","sourceRoot":"","sources":["../../../src/components/GidsButtonGroup/GidsButtonGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAE3E,OAAO,EAAoB,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAIxE,MAAM,WAAW,uBAChB,SAAQ,0BAA0B,CAAC,WAAW,CAAC;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,kBAAkB,GAAI,qCAIhC,uBAAuB,KAAG,eAU5B,CAAC"}

package/dist/components/GidsButtonGroup/GidsButtonGroup.js

@@ -0,0 +1,10 @@
+import { GidsButtonGroupWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren } from '../../utils/domUtils.js';
+const { getGidsButtonGroupClassNames } = GidsButtonGroupWebUtils;
+export const GidsButtonGroupDom = ({ layout, children, extraClasses, }) => {
+    const buttonGroup = document.createElement('span');
+    buttonGroup.className = getGidsButtonGroupClassNames({ layout }, extraClasses);
+    appendAsChildren(buttonGroup, children);
+    return buttonGroup;
+};
+//# sourceMappingURL=GidsButtonGroup.js.map

package/dist/components/GidsButtonGroup/GidsButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsButtonGroup.js","sourceRoot":"","sources":["../../../src/components/GidsButtonGroup/GidsButtonGroup.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,gBAAgB,EAAe,MAAM,yBAAyB,CAAC;AAExE,MAAM,EAAE,4BAA4B,EAAE,GAAG,uBAAuB,CAAC;AAOjE,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAClC,MAAM,EACN,QAAQ,EACR,YAAY,GACa,EAAmB,EAAE;IAC9C,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACnD,WAAW,CAAC,SAAS,GAAG,4BAA4B,CACnD,EAAE,MAAM,EAAE,EACV,YAAY,CACZ,CAAC;IAEF,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IAExC,OAAO,WAAW,CAAC;AACpB,CAAC,CAAC"}

package/dist/components/GidsCompoundButton/GidsCompoundButton.d.ts

@@ -0,0 +1,9 @@
+import { type GidsCompoundButtonCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { DomNodeOrString } from '../../utils/domUtils.js';
+export interface GidsCompoundButtonDomProps extends GidsCompoundButtonCommonProps<DomNodeOrString, DomNodeOrString> {
+    onClick?: (this: HTMLButtonElement, event: Event) => void;
+    onChangeCheckbox?: (event: Event) => void;
+    onChangeRadio?: (event: Event) => void;
+}
+export declare const GidsCompoundButtonDom: ({ children, leadingIcon, trailingContent, trailingContentDisabled, trailingContentIndeterminate, checked, disabled, onClick, onChangeCheckbox, onChangeRadio, }: GidsCompoundButtonDomProps) => HTMLButtonElement;
+//# sourceMappingURL=GidsCompoundButton.d.ts.map

package/dist/components/GidsCompoundButton/GidsCompoundButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsCompoundButton.d.ts","sourceRoot":"","sources":["../../../src/components/GidsCompoundButton/GidsCompoundButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,+BAA+B,CAAC;AAKnF,OAAO,EAAoB,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAQ5E,MAAM,WAAW,0BAChB,SAAQ,6BAA6B,CAAC,eAAe,EAAE,eAAe,CAAC;IACvE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC1D,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,qBAAqB,GAAI,iKAWnC,0BAA0B,KAAG,iBAwF/B,CAAC"}

package/dist/components/GidsCompoundButton/GidsCompoundButton.js

@@ -0,0 +1,83 @@
+import { generateId, GidsCompoundButtonWebUtils, } from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren } from '../../utils/domUtils.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+import { GidsCheckboxControlDom } from '../_GidsCheckboxControl/GidsCheckboxControl.js';
+import { GidsRadioControlDom } from '../_GidsRadioControl/GidsRadioControl.js';
+const { getGidsCompoundButtonClassNames } = GidsCompoundButtonWebUtils;
+export const GidsCompoundButtonDom = ({ children, leadingIcon, trailingContent, trailingContentDisabled, trailingContentIndeterminate, checked, disabled, onClick, onChangeCheckbox, onChangeRadio, }) => {
+    const compoundButton = document.createElement('button');
+    compoundButton.className = getGidsCompoundButtonClassNames({
+        checked,
+        trailingContent,
+        disabled,
+    });
+    compoundButton.setAttribute('type', 'button');
+    if (disabled) {
+        compoundButton.setAttribute('disabled', '');
+    }
+    else {
+        compoundButton.removeAttribute('disabled');
+    }
+    const innerContainer = document.createElement('div');
+    innerContainer.className = 'gids-compound-button__inner-container';
+    if (leadingIcon &&
+        typeof leadingIcon === 'string' &&
+        leadingIcon !== '' &&
+        leadingIcon !== '(none)') {
+        const leadingIconEl = GidsIconDom({
+            size: 'md',
+            appearance: 'regular',
+            name: leadingIcon,
+            alt: '',
+            className: disabled
+                ? `gids-compound-button__leading-icon gids-compound-button__icon-disabled`
+                : `gids-compound-button__leading-icon`,
+        });
+        appendAsChildren(innerContainer, leadingIconEl);
+    }
+    const labelElement = document.createElement('div');
+    labelElement.className = disabled
+        ? 'gids-compound-button__label gids-compound-button__label-disabled'
+        : 'gids-compound-button__label';
+    appendAsChildren(labelElement, children);
+    innerContainer.appendChild(labelElement);
+    if (trailingContent === 'checkbox') {
+        const checkbox = GidsCheckboxControlDom({
+            checked: checked,
+            indeterminate: trailingContentIndeterminate,
+            disabled: trailingContentDisabled || disabled,
+            inputId: generateId(),
+            onChange: onChangeCheckbox,
+        });
+        innerContainer.appendChild(checkbox);
+    }
+    if (trailingContent === 'radio') {
+        const radio = GidsRadioControlDom({
+            checked: checked,
+            inputId: generateId(),
+            disabled: trailingContentDisabled || disabled,
+            onChange: onChangeRadio,
+        });
+        innerContainer.appendChild(radio);
+    }
+    if (trailingContent === 'disclosure') {
+        const trailingIcon = GidsIconDom({
+            size: 'md',
+            appearance: 'regular',
+            name: 'chevron-right',
+            alt: '',
+            className: disabled
+                ? `gids-compound-button__trailing-icon gids-compound-button__icon-disabled`
+                : `gids-compound-button__trailing-icon`,
+        });
+        innerContainer.appendChild(trailingIcon);
+    }
+    compoundButton.appendChild(innerContainer);
+    if (onClick &&
+        trailingContent !== 'checkbox' &&
+        trailingContent !== 'radio') {
+        compoundButton.addEventListener('click', onClick);
+    }
+    return compoundButton;
+};
+//# sourceMappingURL=GidsCompoundButton.js.map

package/dist/components/GidsCompoundButton/GidsCompoundButton.js.map

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

package/dist/components/GidsContainer/GidsContainer.d.ts

@@ -0,0 +1,7 @@
+import { type ClassValue, type GidsContainerWebProps } from '@ganpatiinfo/gids-web-shared';
+import { type DomChildren } from '../../utils/domUtils.js';
+export interface GidsContainerDomProps extends GidsContainerWebProps<DomChildren> {
+    className?: ClassValue;
+}
+export declare const GidsContainerDom: ({ children, fixed, maxWidth, className, }: GidsContainerDomProps) => HTMLDivElement;
+//# sourceMappingURL=GidsContainer.d.ts.map

package/dist/components/GidsContainer/GidsContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsContainer.d.ts","sourceRoot":"","sources":["../../../src/components/GidsContainer/GidsContainer.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,UAAU,EACf,KAAK,qBAAqB,EAE1B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAoB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI7E,MAAM,WAAW,qBAChB,SAAQ,qBAAqB,CAAC,WAAW,CAAC;IAC1C,SAAS,CAAC,EAAE,UAAU,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,GAAI,2CAK9B,qBAAqB,KAAG,cAY1B,CAAC"}

package/dist/components/GidsContainer/GidsContainer.js

@@ -0,0 +1,12 @@
+import { GidsContainerWebUtils, } from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren } from '../../utils/domUtils.js';
+const { getGidsContainerClassNames } = GidsContainerWebUtils;
+export const GidsContainerDom = ({ children, fixed = false, maxWidth = 'lg', className, }) => {
+    const container = document.createElement('div');
+    container.className = getGidsContainerClassNames({ fixed, maxWidth }, className);
+    if (children) {
+        appendAsChildren(container, children);
+    }
+    return container;
+};
+//# sourceMappingURL=GidsContainer.js.map

package/dist/components/GidsContainer/GidsContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsContainer.js","sourceRoot":"","sources":["../../../src/components/GidsContainer/GidsContainer.ts"],"names":[],"mappings":"AAAA,OAAO,EAGN,qBAAqB,GACrB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAoB,MAAM,yBAAyB,CAAC;AAE7E,MAAM,EAAE,0BAA0B,EAAE,GAAG,qBAAqB,CAAC;AAO7D,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAChC,QAAQ,EACR,KAAK,GAAG,KAAK,EACb,QAAQ,GAAG,IAAI,EACf,SAAS,GACc,EAAkB,EAAE;IAC3C,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAChD,SAAS,CAAC,SAAS,GAAG,0BAA0B,CAC/C,EAAE,KAAK,EAAE,QAAQ,EAAE,EACnB,SAAS,CACT,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACd,gBAAgB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IACvC,CAAC;IAED,OAAO,SAAS,CAAC;AAClB,CAAC,CAAC"}

package/dist/components/GidsSectionNotice/GidsSectionNotice.d.ts

@@ -0,0 +1,7 @@
+import { type GidsSectionNoticeCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { type DomChildren, type DomNodeOrString } from '../../utils/domUtils.js';
+export interface GidsSectionNoticeDomProps extends GidsSectionNoticeCommonProps<DomNodeOrString, DomChildren> {
+    onClickDismiss?: (event: MouseEvent) => void;
+}
+export declare const GidsSectionNoticeDom: ({ appearance, title, supportingText, children, dismissible, onClickDismiss, }: GidsSectionNoticeDomProps) => HTMLDivElement;
+//# sourceMappingURL=GidsSectionNotice.d.ts.map

package/dist/components/GidsSectionNotice/GidsSectionNotice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsSectionNotice.d.ts","sourceRoot":"","sources":["../../../src/components/GidsSectionNotice/GidsSectionNotice.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,4BAA4B,EACjC,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAEN,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,MAAM,yBAAyB,CAAC;AASjC,MAAM,WAAW,yBAChB,SAAQ,4BAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;IAClE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,oBAAoB,GAAI,+EAOlC,yBAAyB,KAAG,cA0E9B,CAAC"}

package/dist/components/GidsSectionNotice/GidsSectionNotice.js

@@ -0,0 +1,70 @@
+import { GidsSectionNoticeCommonUtils, } from '@ganpatiinfo/gids-core-shared';
+import { GidsSectionNoticeWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, } from '../../utils/domUtils.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+import { GidsButtonDom } from '../GidsButton/GidsButton.js';
+import { GidsButtonGroupDom } from '../GidsButtonGroup/GidsButtonGroup.js';
+const { getGidsSectionNoticeClassNames } = GidsSectionNoticeWebUtils;
+const { getSectionNoticeIconName } = GidsSectionNoticeCommonUtils;
+export const GidsSectionNoticeDom = ({ appearance = 'information', title, supportingText, children, dismissible = true, onClickDismiss, }) => {
+    const sectionNotice = document.createElement('div');
+    sectionNotice.className = getGidsSectionNoticeClassNames({ appearance });
+    const innerContainer = document.createElement('div');
+    innerContainer.className = 'gids-section-notice__inner-container';
+    const leadingIconContainer = document.createElement('div');
+    leadingIconContainer.className =
+        'gids-section-notice__leading-icon-container';
+    const leadingIconName = getSectionNoticeIconName({ appearance });
+    const leadingIcon = GidsIconDom({
+        size: 'md',
+        appearance: 'filled',
+        name: leadingIconName,
+        alt: '',
+        className: `gids-section-notice__${appearance}-icon`,
+    });
+    leadingIconContainer.appendChild(leadingIcon);
+    innerContainer.appendChild(leadingIconContainer);
+    const contentContainer = document.createElement('div');
+    contentContainer.className = 'gids-section-notice__content-container';
+    const titleElement = document.createElement('div');
+    titleElement.className = 'gids-section-notice__title';
+    appendAsChildren(titleElement, title);
+    contentContainer.appendChild(titleElement);
+    if (supportingText) {
+        const supportingTextElement = document.createElement('div');
+        supportingTextElement.className = 'gids-section-notice__supporting-text';
+        appendAsChildren(supportingTextElement, supportingText);
+        contentContainer.appendChild(supportingTextElement);
+    }
+    if (children) {
+        contentContainer.appendChild(GidsButtonGroupDom({
+            layout: 'wrap',
+            children: children,
+        }));
+    }
+    innerContainer.appendChild(contentContainer);
+    if (dismissible && onClickDismiss) {
+        const leadingIcon = GidsIconDom({
+            size: 'sm',
+            appearance: 'filled',
+            name: 'cross',
+            alt: '',
+        });
+        const crossButton = GidsButtonDom({
+            as: 'button',
+            type: 'button',
+            appearance: 'subtle',
+            size: 'sm',
+            width: 'intrinsic',
+            leadingIcon: leadingIcon,
+        });
+        crossButton.addEventListener('click', onClickDismiss);
+        const crossBtnContainer = document.createElement('div');
+        crossBtnContainer.className = 'gids-section-notice__cross-button-container';
+        crossBtnContainer.appendChild(crossButton);
+        innerContainer.appendChild(crossBtnContainer);
+    }
+    sectionNotice.appendChild(innerContainer);
+    return sectionNotice;
+};
+//# sourceMappingURL=GidsSectionNotice.js.map

package/dist/components/GidsSectionNotice/GidsSectionNotice.js.map

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

package/dist/index.d.ts

@@ -26,6 +26,14 @@ export * from './components/GidsAvatarGroup/GidsAvatarGroup.js';
 export * from './components/GidsTagGroup/GidsTagGroup.js';
 export * from './components/GidsInputTag/_GidsInputTagButton/GidsInputTagButton.js';
 export * from './components/GidsInputTag/GidsInputTag.js';
+export * from './components/GidsButtonGroup/GidsButtonGroup.js';
+export * from './components/GidsButtonDock/GidsButtonDock.js';
+export * from './components/GidsSectionNotice/GidsSectionNotice.js';
+export * from './components/GidsCompoundButton/GidsCompoundButton.js';
+export * from './components/GidsBox/GidsBox.js';
+export * from './components/GidsContainer/GidsContainer.js';
+export * from './components/GidsBreadcrumbItem/GidsBreadcrumbItem.js';
+export * from './components/GidsBreadcrumb/GidsBreadcrumb.js';
 /**
  * Utilities
  */

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,mCAAmC,CAAC;AAClD,cAAc,uDAAuD,CAAC;AACtE,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wDAAwD,CAAC;AACvE,cAAc,yCAAyC,CAAC;AACxD,cAAc,mDAAmD,CAAC;AAClE,cAAc,0DAA0D,CAAC;AACzE,cAAc,oDAAoD,CAAC;AACnE,cAAc,sDAAsD,CAAC;AACrE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qDAAqD,CAAC;AACpE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,iDAAiD,CAAC;AAChE,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,iDAAiD,CAAC;AAChE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qEAAqE,CAAC;AACpF,cAAc,2CAA2C,CAAC;AAE1D;;GAEG;AACH,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,mCAAmC,CAAC;AAClD,cAAc,uDAAuD,CAAC;AACtE,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wDAAwD,CAAC;AACvE,cAAc,yCAAyC,CAAC;AACxD,cAAc,mDAAmD,CAAC;AAClE,cAAc,0DAA0D,CAAC;AACzE,cAAc,oDAAoD,CAAC;AACnE,cAAc,sDAAsD,CAAC;AACrE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qDAAqD,CAAC;AACpE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,iDAAiD,CAAC;AAChE,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,iDAAiD,CAAC;AAChE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qEAAqE,CAAC;AACpF,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iDAAiD,CAAC;AAChE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,uDAAuD,CAAC;AACtE,cAAc,iCAAiC,CAAC;AAChD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uDAAuD,CAAC;AACtE,cAAc,+CAA+C,CAAC;AAE9D;;GAEG;AACH,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -26,6 +26,14 @@ export * from './components/GidsAvatarGroup/GidsAvatarGroup.js';
 export * from './components/GidsTagGroup/GidsTagGroup.js';
 export * from './components/GidsInputTag/_GidsInputTagButton/GidsInputTagButton.js';
 export * from './components/GidsInputTag/GidsInputTag.js';
+export * from './components/GidsButtonGroup/GidsButtonGroup.js';
+export * from './components/GidsButtonDock/GidsButtonDock.js';
+export * from './components/GidsSectionNotice/GidsSectionNotice.js';
+export * from './components/GidsCompoundButton/GidsCompoundButton.js';
+export * from './components/GidsBox/GidsBox.js';
+export * from './components/GidsContainer/GidsContainer.js';
+export * from './components/GidsBreadcrumbItem/GidsBreadcrumbItem.js';
+export * from './components/GidsBreadcrumb/GidsBreadcrumb.js';
 /**
  * Utilities
  */

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,mCAAmC,CAAC;AAClD,cAAc,uDAAuD,CAAC;AACtE,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wDAAwD,CAAC;AACvE,cAAc,yCAAyC,CAAC;AACxD,cAAc,mDAAmD,CAAC;AAClE,cAAc,0DAA0D,CAAC;AACzE,cAAc,oDAAoD,CAAC;AACnE,cAAc,sDAAsD,CAAC;AACrE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qDAAqD,CAAC;AACpE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,iDAAiD,CAAC;AAChE,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,iDAAiD,CAAC;AAChE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qEAAqE,CAAC;AACpF,cAAc,2CAA2C,CAAC;AAE1D;;GAEG;AACH,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,mCAAmC,CAAC;AAClD,cAAc,uDAAuD,CAAC;AACtE,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wDAAwD,CAAC;AACvE,cAAc,yCAAyC,CAAC;AACxD,cAAc,mDAAmD,CAAC;AAClE,cAAc,0DAA0D,CAAC;AACzE,cAAc,oDAAoD,CAAC;AACnE,cAAc,sDAAsD,CAAC;AACrE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qDAAqD,CAAC;AACpE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,iDAAiD,CAAC;AAChE,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,iDAAiD,CAAC;AAChE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qEAAqE,CAAC;AACpF,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iDAAiD,CAAC;AAChE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,uDAAuD,CAAC;AACtE,cAAc,iCAAiC,CAAC;AAChD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uDAAuD,CAAC;AACtE,cAAc,+CAA+C,CAAC;AAE9D;;GAEG;AACH,cAAc,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ganpatiinfo/gids-web-dom-reference",
-	"version": "2.0.8",
+	"version": "2.1.0",
 	"private": false,
 	"description": "DOM for components reference implementations",
 	"homepage": "https://ganpatiinfosystem.vercel.app/",
@@ -24,8 +24,8 @@
 		"directory": "packages/private/web-dom-reference"
 	},
 	"dependencies": {
-		"@ganpatiinfo/gids-core-shared": "2.0.8",
-		"@ganpatiinfo/gids-web-shared": "2.0.8"
+		"@ganpatiinfo/gids-core-shared": "2.1.0",
+		"@ganpatiinfo/gids-web-shared": "2.1.0"
 	},
 	"peerDependencies": {
 		"@ganpatiinfo/gids-web-theme-interface": "2.0.7",

package/src/components/GidsBox/GidsBox.ts

@@ -0,0 +1,34 @@
+import {
+	type ClassValue,
+	type GidsBoxWebProps,
+	GidsBoxWebUtils,
+	PermittedGidsBoxElements,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren } from '../../utils/domUtils.js';
+
+const { getGidsBoxClassNames } = GidsBoxWebUtils;
+
+export type GidsBoxDomProps<ComponentType extends PermittedGidsBoxElements> =
+	GidsBoxWebProps<Element, ComponentType> & {
+		className?: ClassValue;
+	};
+
+export const GidsBoxDom = <
+	ComponentType extends PermittedGidsBoxElements = 'div',
+>({
+	children,
+	component,
+	className,
+}: GidsBoxDomProps<ComponentType>): HTMLElement => {
+	const box = document.createElement(
+		//@ts-expect-error: ex
+		component && component !== '' ? component : 'div',
+	) as HTMLElement;
+	box.className = getGidsBoxClassNames(className);
+
+	if (children) {
+		appendAsChildren(box, children);
+	}
+
+	return box;
+};

package/src/components/GidsBreadcrumb/GidsBreadcrumb.ts

@@ -0,0 +1,31 @@
+import {
+	type ClassValue,
+	GidsBreadcrumbWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, type DomChildren } from '../../utils/domUtils.js';
+import { type GidsBreadcrumbCommonProps } from '@ganpatiinfo/gids-core-shared';
+
+const { getGidsBreadcrumbClassNames } = GidsBreadcrumbWebUtils;
+
+export interface GidsBreadcrumbDomProps
+	extends GidsBreadcrumbCommonProps<DomChildren> {
+	extraClasses?: ClassValue;
+}
+
+export const GidsBreadcrumbDom = ({
+	children,
+	extraClasses,
+}: GidsBreadcrumbDomProps): HTMLElement => {
+	const breadcrumb = document.createElement('nav');
+	breadcrumb.className = getGidsBreadcrumbClassNames(extraClasses);
+
+	breadcrumb.setAttribute('aria-label', 'Breadcrumb');
+
+	if (children) {
+		const orderedList = document.createElement('ol');
+		appendAsChildren(orderedList, children);
+		breadcrumb.appendChild(orderedList);
+	}
+
+	return breadcrumb;
+};

package/src/components/GidsBreadcrumbItem/GidsBreadcrumbItem.ts

@@ -0,0 +1,94 @@
+import { type GidsBreadcrumbItemCommonProps } from '@ganpatiinfo/gids-core-shared';
+import {
+	type ClassValue,
+	GidsBreadcrumbItemWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import {
+	appendAsChildren,
+	type DomNodeOrString,
+} from '../../utils/domUtils.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+import { IconName } from '@ganpatiinfo/gids-web-theme-interface';
+
+const { getGidsBreadcrumbItemClassNames } = GidsBreadcrumbItemWebUtils;
+
+export interface GidsBreadcrumbItemDomProps
+	extends GidsBreadcrumbItemCommonProps<
+		DomNodeOrString,
+		DomNodeOrString,
+		DomNodeOrString
+	> {
+	className?: ClassValue;
+	href?: DomNodeOrString;
+	onClick?: (this: HTMLAnchorElement, event: Event) => void;
+}
+
+export const GidsBreadcrumbItemDom = ({
+	children,
+	selected,
+	leadingIcon,
+	href,
+	onClick,
+	className,
+	separator,
+	isSeparatorVisible = true,
+	renderingSystem = 'non-array',
+	currentIndex = 0,
+	totalLength = 0,
+}: GidsBreadcrumbItemDomProps): HTMLLIElement => {
+	const breadcrumbItem = document.createElement('li');
+	breadcrumbItem.className = getGidsBreadcrumbItemClassNames(
+		{ selected },
+		className,
+	);
+	const breadcrumbAnchorItem = document.createElement('a');
+	breadcrumbAnchorItem.className = `gids-breadcrumb-item__anchor-label`;
+
+	if (href) {
+		breadcrumbAnchorItem.setAttribute('href', href as string);
+	}
+
+	if (leadingIcon && leadingIcon !== '' && leadingIcon !== '(none)') {
+		breadcrumbAnchorItem.appendChild(
+			GidsIconDom({
+				name: leadingIcon as IconName,
+				appearance: 'regular',
+				alt: '',
+				size: 'md',
+				className: 'gids-breadcrumb-item__leading-icon',
+			}),
+		);
+	}
+
+	if (children) {
+		appendAsChildren(breadcrumbAnchorItem, children);
+	}
+
+	breadcrumbItem.appendChild(breadcrumbAnchorItem);
+
+	if (isSeparatorVisible) {
+		if (
+			(renderingSystem === 'array' && currentIndex < totalLength - 1) ||
+			renderingSystem === 'non-array'
+		) {
+			breadcrumbItem.appendChild(
+				GidsIconDom({
+					name:
+						separator && separator !== '' && separator !== '(none)'
+							? (separator as IconName)
+							: 'chevron-right',
+					appearance: 'filled',
+					alt: '',
+					size: 'md',
+					className: 'gids-breadcrumb-item__separator-icon',
+				}),
+			);
+		}
+	}
+
+	if (onClick) {
+		breadcrumbItem.addEventListener('click', onClick);
+	}
+
+	return breadcrumbItem;
+};

package/src/components/GidsButton/GidsButton.ts

@@ -76,14 +76,14 @@ export const GidsButtonDom = <
 		button.appendChild(
 			GidsSpinnerControlDom({
 				size: size === 'lg' || size === undefined ? 'md' : size,
-                indeterminate: true
+				indeterminate: true,
 			}),
 		);
 	}
 
-    if (onClick && !loading) {
-        button.addEventListener('click', onClick)
-    }
+	if (onClick && !loading) {
+		button.addEventListener('click', onClick);
+	}
 
 	return button;
 };

package/src/components/GidsButtonDock/GidsButtonDock.ts

@@ -0,0 +1,33 @@
+import { type GidsButtonDockCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { GidsButtonDockWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, type DomChildren } from '../../utils/domUtils.js';
+
+const { getGidsButtonDockClassNames } = GidsButtonDockWebUtils;
+
+export interface GidsButtonDockDomProps
+	extends GidsButtonDockCommonProps<DomChildren> {
+	extraClasses?: string;
+}
+
+export const GidsButtonDockDom = ({
+	primaryChildren,
+	secondaryChildren,
+	extraClasses,
+}: GidsButtonDockDomProps): HTMLDivElement => {
+	const buttonDock = document.createElement('div');
+	buttonDock.className = getGidsButtonDockClassNames(extraClasses);
+
+	const primaryArea = document.createElement('div');
+	primaryArea.classList.add('gids-button-dock__primary-area');
+
+	const secondaryArea = document.createElement('div');
+	secondaryArea.classList.add('gids-button-dock__secondary-area');
+
+	appendAsChildren(primaryArea, primaryChildren);
+	appendAsChildren(secondaryArea, secondaryChildren);
+
+	appendAsChildren(buttonDock, secondaryArea);
+	appendAsChildren(buttonDock, primaryArea);
+
+	return buttonDock;
+};

package/src/components/GidsButtonGroup/GidsButtonGroup.ts

@@ -0,0 +1,26 @@
+import { GidsButtonGroupCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { GidsButtonGroupWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
+
+const { getGidsButtonGroupClassNames } = GidsButtonGroupWebUtils;
+
+export interface GidsButtonGroupDomProps
+	extends GidsButtonGroupCommonProps<DomChildren> {
+	extraClasses?: string;
+}
+
+export const GidsButtonGroupDom = ({
+	layout,
+	children,
+	extraClasses,
+}: GidsButtonGroupDomProps): HTMLSpanElement => {
+	const buttonGroup = document.createElement('span');
+	buttonGroup.className = getGidsButtonGroupClassNames(
+		{ layout },
+		extraClasses,
+	);
+
+	appendAsChildren(buttonGroup, children);
+
+	return buttonGroup;
+};

package/src/components/GidsCompoundButton/GidsCompoundButton.ts

@@ -0,0 +1,120 @@
+import { type GidsCompoundButtonCommonProps } from '@ganpatiinfo/gids-core-shared';
+import {
+	generateId,
+	GidsCompoundButtonWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomNodeOrString } from '../../utils/domUtils.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+import { GidsCheckboxControlDom } from '../_GidsCheckboxControl/GidsCheckboxControl.js';
+import { GidsRadioControlDom } from '../_GidsRadioControl/GidsRadioControl.js';
+import { IconName } from '@ganpatiinfo/gids-web-theme-interface';
+
+const { getGidsCompoundButtonClassNames } = GidsCompoundButtonWebUtils;
+
+export interface GidsCompoundButtonDomProps
+	extends GidsCompoundButtonCommonProps<DomNodeOrString, DomNodeOrString> {
+	onClick?: (this: HTMLButtonElement, event: Event) => void;
+	onChangeCheckbox?: (event: Event) => void;
+	onChangeRadio?: (event: Event) => void;
+}
+
+export const GidsCompoundButtonDom = ({
+	children,
+	leadingIcon,
+	trailingContent,
+	trailingContentDisabled,
+	trailingContentIndeterminate,
+	checked,
+	disabled,
+	onClick,
+	onChangeCheckbox,
+	onChangeRadio,
+}: GidsCompoundButtonDomProps): HTMLButtonElement => {
+	const compoundButton = document.createElement('button');
+	compoundButton.className = getGidsCompoundButtonClassNames({
+		checked,
+		trailingContent,
+		disabled,
+	});
+
+	compoundButton.setAttribute('type', 'button');
+	if (disabled) {
+		compoundButton.setAttribute('disabled', '');
+	} else {
+		compoundButton.removeAttribute('disabled');
+	}
+
+	const innerContainer = document.createElement('div');
+	innerContainer.className = 'gids-compound-button__inner-container';
+
+	if (
+		leadingIcon &&
+		typeof leadingIcon === 'string' &&
+		leadingIcon !== '' &&
+		leadingIcon !== '(none)'
+	) {
+		const leadingIconEl = GidsIconDom({
+			size: 'md',
+			appearance: 'regular',
+			name: leadingIcon as IconName,
+			alt: '',
+			className: disabled
+				? `gids-compound-button__leading-icon gids-compound-button__icon-disabled`
+				: `gids-compound-button__leading-icon`,
+		});
+		appendAsChildren(innerContainer, leadingIconEl);
+	}
+
+	const labelElement = document.createElement('div');
+	labelElement.className = disabled
+		? 'gids-compound-button__label gids-compound-button__label-disabled'
+		: 'gids-compound-button__label';
+	appendAsChildren(labelElement, children);
+	innerContainer.appendChild(labelElement);
+
+	if (trailingContent === 'checkbox') {
+		const checkbox = GidsCheckboxControlDom({
+			checked: checked,
+			indeterminate: trailingContentIndeterminate,
+			disabled: trailingContentDisabled || disabled,
+			inputId: generateId(),
+			onChange: onChangeCheckbox,
+		});
+		innerContainer.appendChild(checkbox);
+	}
+
+	if (trailingContent === 'radio') {
+		const radio = GidsRadioControlDom({
+			checked: checked,
+			inputId: generateId(),
+			disabled: trailingContentDisabled || disabled,
+			onChange: onChangeRadio,
+		});
+		innerContainer.appendChild(radio);
+	}
+
+	if (trailingContent === 'disclosure') {
+		const trailingIcon = GidsIconDom({
+			size: 'md',
+			appearance: 'regular',
+			name: 'chevron-right',
+			alt: '',
+			className: disabled
+				? `gids-compound-button__trailing-icon gids-compound-button__icon-disabled`
+				: `gids-compound-button__trailing-icon`,
+		});
+		innerContainer.appendChild(trailingIcon);
+	}
+
+	compoundButton.appendChild(innerContainer);
+
+	if (
+		onClick &&
+		trailingContent !== 'checkbox' &&
+		trailingContent !== 'radio'
+	) {
+		compoundButton.addEventListener('click', onClick);
+	}
+
+	return compoundButton;
+};

package/src/components/GidsContainer/GidsContainer.ts

@@ -0,0 +1,32 @@
+import {
+	type ClassValue,
+	type GidsContainerWebProps,
+	GidsContainerWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, type DomChildren } from '../../utils/domUtils.js';
+
+const { getGidsContainerClassNames } = GidsContainerWebUtils;
+
+export interface GidsContainerDomProps
+	extends GidsContainerWebProps<DomChildren> {
+	className?: ClassValue;
+}
+
+export const GidsContainerDom = ({
+	children,
+	fixed = false,
+	maxWidth = 'lg',
+	className,
+}: GidsContainerDomProps): HTMLDivElement => {
+	const container = document.createElement('div');
+	container.className = getGidsContainerClassNames(
+		{ fixed, maxWidth },
+		className,
+	);
+
+	if (children) {
+		appendAsChildren(container, children);
+	}
+
+	return container;
+};

package/src/components/GidsSectionNotice/GidsSectionNotice.ts

@@ -0,0 +1,105 @@
+import {
+	GidsSectionNoticeCommonUtils,
+	type GidsSectionNoticeCommonProps,
+} from '@ganpatiinfo/gids-core-shared';
+import { GidsSectionNoticeWebUtils } from '@ganpatiinfo/gids-web-shared';
+import {
+	appendAsChildren,
+	type DomChildren,
+	type DomNodeOrString,
+} from '../../utils/domUtils.js';
+import { type IconName } from '@ganpatiinfo/gids-web-theme-interface';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+import { GidsButtonDom } from '../GidsButton/GidsButton.js';
+import { GidsButtonGroupDom } from '../GidsButtonGroup/GidsButtonGroup.js';
+
+const { getGidsSectionNoticeClassNames } = GidsSectionNoticeWebUtils;
+const { getSectionNoticeIconName } = GidsSectionNoticeCommonUtils;
+
+export interface GidsSectionNoticeDomProps
+	extends GidsSectionNoticeCommonProps<DomNodeOrString, DomChildren> {
+	onClickDismiss?: (event: MouseEvent) => void;
+}
+
+export const GidsSectionNoticeDom = ({
+	appearance = 'information',
+	title,
+	supportingText,
+	children,
+	dismissible = true,
+	onClickDismiss,
+}: GidsSectionNoticeDomProps): HTMLDivElement => {
+	const sectionNotice = document.createElement('div');
+	sectionNotice.className = getGidsSectionNoticeClassNames({ appearance });
+
+	const innerContainer = document.createElement('div');
+	innerContainer.className = 'gids-section-notice__inner-container';
+
+	const leadingIconContainer = document.createElement('div');
+	leadingIconContainer.className =
+		'gids-section-notice__leading-icon-container';
+
+	const leadingIconName = getSectionNoticeIconName({ appearance }) as IconName;
+
+	const leadingIcon = GidsIconDom({
+		size: 'md',
+		appearance: 'filled',
+		name: leadingIconName,
+		alt: '',
+		className: `gids-section-notice__${appearance}-icon`,
+	});
+	leadingIconContainer.appendChild(leadingIcon);
+	innerContainer.appendChild(leadingIconContainer);
+
+	const contentContainer = document.createElement('div');
+	contentContainer.className = 'gids-section-notice__content-container';
+
+	const titleElement = document.createElement('div');
+	titleElement.className = 'gids-section-notice__title';
+	appendAsChildren(titleElement, title);
+	contentContainer.appendChild(titleElement);
+
+	if (supportingText) {
+		const supportingTextElement = document.createElement('div');
+		supportingTextElement.className = 'gids-section-notice__supporting-text';
+		appendAsChildren(supportingTextElement, supportingText);
+		contentContainer.appendChild(supportingTextElement);
+	}
+
+	if (children) {
+		contentContainer.appendChild(
+			GidsButtonGroupDom({
+				layout: 'wrap',
+				children: children,
+			}),
+		);
+	}
+
+	innerContainer.appendChild(contentContainer);
+
+	if (dismissible && onClickDismiss) {
+		const leadingIcon = GidsIconDom({
+			size: 'sm',
+			appearance: 'filled',
+			name: 'cross',
+			alt: '',
+		});
+		const crossButton = GidsButtonDom({
+			as: 'button',
+			type: 'button',
+			appearance: 'subtle',
+			size: 'sm',
+			width: 'intrinsic',
+			leadingIcon: leadingIcon,
+		});
+		crossButton.addEventListener('click', onClickDismiss);
+		const crossBtnContainer = document.createElement('div');
+		crossBtnContainer.className = 'gids-section-notice__cross-button-container';
+		crossBtnContainer.appendChild(crossButton);
+		innerContainer.appendChild(crossBtnContainer);
+	}
+
+	sectionNotice.appendChild(innerContainer);
+
+	return sectionNotice;
+};

package/src/index.ts

@@ -26,6 +26,14 @@ export * from './components/GidsAvatarGroup/GidsAvatarGroup.js';
 export * from './components/GidsTagGroup/GidsTagGroup.js';
 export * from './components/GidsInputTag/_GidsInputTagButton/GidsInputTagButton.js';
 export * from './components/GidsInputTag/GidsInputTag.js';
+export * from './components/GidsButtonGroup/GidsButtonGroup.js';
+export * from './components/GidsButtonDock/GidsButtonDock.js';
+export * from './components/GidsSectionNotice/GidsSectionNotice.js';
+export * from './components/GidsCompoundButton/GidsCompoundButton.js';
+export * from './components/GidsBox/GidsBox.js';
+export * from './components/GidsContainer/GidsContainer.js';
+export * from './components/GidsBreadcrumbItem/GidsBreadcrumbItem.js';
+export * from './components/GidsBreadcrumb/GidsBreadcrumb.js';
 
 /**
  * Utilities