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

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @ganpatiinfo/gids-web-dom-reference
 
+## 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/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":"AACA,OAAO,EACN,UAAU,EACV,0BAA0B,GAC1B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAmB,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,gDAAgD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAG/E,MAAM,EAAE,+BAA+B,EAAE,GAAG,0BAA0B,CAAC;AASvE,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EACrC,QAAQ,EACR,WAAW,EACX,eAAe,EACf,uBAAuB,EACvB,4BAA4B,EAC5B,OAAO,EACP,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,aAAa,GACe,EAAqB,EAAE;IACnD,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACxD,cAAc,CAAC,SAAS,GAAG,+BAA+B,CAAC;QAC1D,OAAO;QACP,eAAe;QACf,QAAQ;KACR,CAAC,CAAC;IAEH,cAAc,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC9C,IAAI,QAAQ,EAAE,CAAC;QACd,cAAc,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;IAC7C,CAAC;SAAM,CAAC;QACP,cAAc,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;IAC5C,CAAC;IAED,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACrD,cAAc,CAAC,SAAS,GAAG,uCAAuC,CAAC;IAEnE,IACC,WAAW;QACX,OAAO,WAAW,KAAK,QAAQ;QAC/B,WAAW,KAAK,EAAE;QAClB,WAAW,KAAK,QAAQ,EACvB,CAAC;QACF,MAAM,aAAa,GAAG,WAAW,CAAC;YACjC,IAAI,EAAE,IAAI;YACV,UAAU,EAAE,SAAS;YACrB,IAAI,EAAE,WAAuB;YAC7B,GAAG,EAAE,EAAE;YACP,SAAS,EAAE,QAAQ;gBAClB,CAAC,CAAC,wEAAwE;gBAC1E,CAAC,CAAC,oCAAoC;SACvC,CAAC,CAAC;QACH,gBAAgB,CAAC,cAAc,EAAE,aAAa,CAAC,CAAC;IACjD,CAAC;IAED,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACnD,YAAY,CAAC,SAAS,GAAG,QAAQ;QAChC,CAAC,CAAC,kEAAkE;QACpE,CAAC,CAAC,6BAA6B,CAAC;IACjC,gBAAgB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IACzC,cAAc,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAEzC,IAAI,eAAe,KAAK,UAAU,EAAE,CAAC;QACpC,MAAM,QAAQ,GAAG,sBAAsB,CAAC;YACvC,OAAO,EAAE,OAAO;YAChB,aAAa,EAAE,4BAA4B;YAC3C,QAAQ,EAAE,uBAAuB,IAAI,QAAQ;YAC7C,OAAO,EAAE,UAAU,EAAE;YACrB,QAAQ,EAAE,gBAAgB;SAC1B,CAAC,CAAC;QACH,cAAc,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC;IAED,IAAI,eAAe,KAAK,OAAO,EAAE,CAAC;QACjC,MAAM,KAAK,GAAG,mBAAmB,CAAC;YACjC,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,UAAU,EAAE;YACrB,QAAQ,EAAE,uBAAuB,IAAI,QAAQ;YAC7C,QAAQ,EAAE,aAAa;SACvB,CAAC,CAAC;QACH,cAAc,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAED,IAAI,eAAe,KAAK,YAAY,EAAE,CAAC;QACtC,MAAM,YAAY,GAAG,WAAW,CAAC;YAChC,IAAI,EAAE,IAAI;YACV,UAAU,EAAE,SAAS;YACrB,IAAI,EAAE,eAAe;YACrB,GAAG,EAAE,EAAE;YACP,SAAS,EAAE,QAAQ;gBAClB,CAAC,CAAC,yEAAyE;gBAC3E,CAAC,CAAC,qCAAqC;SACxC,CAAC,CAAC;QACH,cAAc,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAC1C,CAAC;IAED,cAAc,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAE3C,IACC,OAAO;QACP,eAAe,KAAK,UAAU;QAC9B,eAAe,KAAK,OAAO,EAC1B,CAAC;QACF,cAAc,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACnD,CAAC;IAED,OAAO,cAAc,CAAC;AACvB,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,10 @@ 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';
 /**
  * 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;AAEtE;;GAEG;AACH,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -26,6 +26,10 @@ 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';
 /**
  * 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;AAEtE;;GAEG;AACH,cAAc,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ganpatiinfo/gids-web-dom-reference",
-	"version": "2.0.8",
+	"version": "2.0.9",
 	"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.0.9",
+		"@ganpatiinfo/gids-web-shared": "2.0.9"
 	},
 	"peerDependencies": {
 		"@ganpatiinfo/gids-web-theme-interface": "2.0.7",

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/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,10 @@ 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';
 
 /**
  * Utilities