@ganpatiinfo/gids-web-dom-reference 2.0.5 → 2.0.7

package/dist/components/_GidsSwitchControl/GidsSwitchControl.js

@@ -1,6 +1,6 @@
 import { GidsSwitchControlWebUtils, } from '@ganpatiinfo/gids-web-shared';
-import { applyStatefulInputProps, toggleAttribute } from '../../utils/domUtils';
-import { GidsIconDom } from '../GidsIcon/GidsIcon';
+import { applyStatefulInputProps, toggleAttribute } from '../../utils/domUtils.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
 const { getGidsSwitchControlClassNames } = GidsSwitchControlWebUtils;
 export const GidsSwitchControlDom = ({ checked, defaultChecked, disabled, inputId, name, value, onChange, className, }) => {
     const switchControlWrapper = document.createElement('span');

package/dist/components/_GidsSwitchControl/GidsSwitchControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"GidsSwitchControl.js","sourceRoot":"","sources":["../../../src/components/_GidsSwitchControl/GidsSwitchControl.ts"],"names":[],"mappings":"AAAA,OAAO,EAGN,yBAAyB,GACzB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,EAAE,8BAA8B,EAAE,GAAG,yBAAyB,CAAC;AAOrE,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACpC,OAAO,EACP,cAAc,EACd,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,GACkB,EAAmB,EAAE;IAChD,MAAM,oBAAoB,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5D,oBAAoB,CAAC,SAAS,GAAG,8BAA8B,CAAC,SAAS,CAAC,CAAC;IAE3E,MAAM,kBAAkB,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3D,kBAAkB,CAAC,SAAS,GAAG,4BAA4B,CAAC;IAC5D,kBAAkB,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACpD,kBAAkB,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAElD,eAAe,CAAC,kBAAkB,EAAE,UAAU,EAAE,QAAQ,IAAI,KAAK,CAAC,CAAC;IAEnE,uBAAuB,CAAC,kBAAkB,EAAE;QAC3C,OAAO;QACP,cAAc;QACd,KAAK;KACL,CAAC,CAAC;IAEH,IAAI,OAAO,EAAE,CAAC;QACb,kBAAkB,CAAC,EAAE,GAAG,OAAO,CAAC;IACjC,CAAC;IACD,IAAI,IAAI,EAAE,CAAC;QACV,kBAAkB,CAAC,IAAI,GAAG,IAAI,CAAC;IAChC,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACd,kBAAkB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACzD,CAAC;IAED,oBAAoB,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;IAErD,oBAAoB,CAAC,WAAW,CAC/B,WAAW,CAAC;QACX,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,WAAW;QACjB,GAAG,EAAE,EAAE;QACP,SAAS,EAAE,4BAA4B;KACvC,CAAC,CACF,CAAC;IAEF,oBAAoB,CAAC,WAAW,CAC/B,WAAW,CAAC;QACX,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,EAAE;QACP,SAAS,EAAE,4BAA4B;KACvC,CAAC,CACF,CAAC;IAEF,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC9C,MAAM,CAAC,SAAS,GAAG,6BAA6B,CAAC;IACjD,oBAAoB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAEzC,OAAO,oBAAoB,CAAC;AAC7B,CAAC,CAAC"}
+{"version":3,"file":"GidsSwitchControl.js","sourceRoot":"","sources":["../../../src/components/_GidsSwitchControl/GidsSwitchControl.ts"],"names":[],"mappings":"AAAA,OAAO,EAGN,yBAAyB,GACzB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,uBAAuB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACnF,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,EAAE,8BAA8B,EAAE,GAAG,yBAAyB,CAAC;AAOrE,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACpC,OAAO,EACP,cAAc,EACd,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,GACkB,EAAmB,EAAE;IAChD,MAAM,oBAAoB,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5D,oBAAoB,CAAC,SAAS,GAAG,8BAA8B,CAAC,SAAS,CAAC,CAAC;IAE3E,MAAM,kBAAkB,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3D,kBAAkB,CAAC,SAAS,GAAG,4BAA4B,CAAC;IAC5D,kBAAkB,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACpD,kBAAkB,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAElD,eAAe,CAAC,kBAAkB,EAAE,UAAU,EAAE,QAAQ,IAAI,KAAK,CAAC,CAAC;IAEnE,uBAAuB,CAAC,kBAAkB,EAAE;QAC3C,OAAO;QACP,cAAc;QACd,KAAK;KACL,CAAC,CAAC;IAEH,IAAI,OAAO,EAAE,CAAC;QACb,kBAAkB,CAAC,EAAE,GAAG,OAAO,CAAC;IACjC,CAAC;IACD,IAAI,IAAI,EAAE,CAAC;QACV,kBAAkB,CAAC,IAAI,GAAG,IAAI,CAAC;IAChC,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACd,kBAAkB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACzD,CAAC;IAED,oBAAoB,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;IAErD,oBAAoB,CAAC,WAAW,CAC/B,WAAW,CAAC;QACX,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,WAAW;QACjB,GAAG,EAAE,EAAE;QACP,SAAS,EAAE,4BAA4B;KACvC,CAAC,CACF,CAAC;IAEF,oBAAoB,CAAC,WAAW,CAC/B,WAAW,CAAC;QACX,IAAI,EAAE,IAAI;QACV,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,EAAE;QACP,SAAS,EAAE,4BAA4B;KACvC,CAAC,CACF,CAAC;IAEF,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC9C,MAAM,CAAC,SAAS,GAAG,6BAA6B,CAAC;IACjD,oBAAoB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAEzC,OAAO,oBAAoB,CAAC;AAC7B,CAAC,CAAC"}

package/dist/index.d.ts

@@ -1,27 +1,30 @@
 /**
  * Referenced to DOM components
  */
-export * from './components/GidsButton/GidsButton';
-export * from './components/GidsDivider/GidsDivider';
-export * from './components/GidsDisplayTag/GidsDisplayTag';
-export * from './components/GidsIcon/GidsIcon';
-export * from './components/GidsLabel/GidsLabelInfo/GidsLabelInfo';
-export * from './components/GidsLabel/GidsLabel';
-export * from './components/GidsLink/GidsLink';
-export * from './components/_GidsSpinnerControl/GidsSpinnerControl';
-export * from './components/GidsSpinner/GidsSpinner';
-export * from './components/GidsToggleButton/GidsToggleButton';
-export * from './components/_GidsCheckboxControl/GidsCheckboxControl';
-export * from './components/_GidsRadioControl/GidsRadioControl';
-export * from './components/_GidsSwitchControl/GidsSwitchControl';
-export * from './components/GidsCheckbox/GidsCheckbox';
-export * from './components/GidsRadio/GidsRadio';
-export * from './components/GidsSwitch/GidsSwitch';
-export * from './components/GidsCheckboxGroup/GidsCheckboxGroup';
-export * from './components/GidsRadioGroup/GidsRadioGroup';
-export * from './components/GidsSwitchGroup/GidsSwitchGroup';
+export * from './components/GidsButton/GidsButton.js';
+export * from './components/GidsDivider/GidsDivider.js';
+export * from './components/GidsDisplayTag/GidsDisplayTag.js';
+export * from './components/GidsIcon/GidsIcon.js';
+export * from './components/GidsLabel/GidsLabelInfo/GidsLabelInfo.js';
+export * from './components/GidsLabel/GidsLabel.js';
+export * from './components/GidsLink/GidsLink.js';
+export * from './components/_GidsSpinnerControl/GidsSpinnerControl.js';
+export * from './components/GidsSpinner/GidsSpinner.js';
+export * from './components/GidsToggleButton/GidsToggleButton.js';
+export * from './components/_GidsCheckboxControl/GidsCheckboxControl.js';
+export * from './components/_GidsRadioControl/GidsRadioControl.js';
+export * from './components/_GidsSwitchControl/GidsSwitchControl.js';
+export * from './components/GidsCheckbox/GidsCheckbox.js';
+export * from './components/GidsRadio/GidsRadio.js';
+export * from './components/GidsSwitch/GidsSwitch.js';
+export * from './components/GidsCheckboxGroup/GidsCheckboxGroup.js';
+export * from './components/GidsRadioGroup/GidsRadioGroup.js';
+export * from './components/GidsSwitchGroup/GidsSwitchGroup.js';
+export * from './components/GidsBadge/GidsBadge.js';
+export * from './components/GidsAvatar/GidsAvatar.js';
+export * from './components/GidsAvatarGroup/GidsAvatarGroup.js';
 /**
  * Utilities
  */
-export * from './utils/domUtils';
+export * from './utils/domUtils.js';
 //# sourceMappingURL=index.d.ts.map

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,oCAAoC,CAAC;AACnD,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oDAAoD,CAAC;AACnE,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qDAAqD,CAAC;AACpE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,uDAAuD,CAAC;AACtE,cAAc,iDAAiD,CAAC;AAChE,cAAc,mDAAmD,CAAC;AAClE,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,kDAAkD,CAAC;AACjE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,8CAA8C,CAAC;AAE7D;;GAEG;AACH,cAAc,kBAAkB,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;AAEhE;;GAEG;AACH,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -1,27 +1,30 @@
 /**
  * Referenced to DOM components
  */
-export * from './components/GidsButton/GidsButton';
-export * from './components/GidsDivider/GidsDivider';
-export * from './components/GidsDisplayTag/GidsDisplayTag';
-export * from './components/GidsIcon/GidsIcon';
-export * from './components/GidsLabel/GidsLabelInfo/GidsLabelInfo';
-export * from './components/GidsLabel/GidsLabel';
-export * from './components/GidsLink/GidsLink';
-export * from './components/_GidsSpinnerControl/GidsSpinnerControl';
-export * from './components/GidsSpinner/GidsSpinner';
-export * from './components/GidsToggleButton/GidsToggleButton';
-export * from './components/_GidsCheckboxControl/GidsCheckboxControl';
-export * from './components/_GidsRadioControl/GidsRadioControl';
-export * from './components/_GidsSwitchControl/GidsSwitchControl';
-export * from './components/GidsCheckbox/GidsCheckbox';
-export * from './components/GidsRadio/GidsRadio';
-export * from './components/GidsSwitch/GidsSwitch';
-export * from './components/GidsCheckboxGroup/GidsCheckboxGroup';
-export * from './components/GidsRadioGroup/GidsRadioGroup';
-export * from './components/GidsSwitchGroup/GidsSwitchGroup';
+export * from './components/GidsButton/GidsButton.js';
+export * from './components/GidsDivider/GidsDivider.js';
+export * from './components/GidsDisplayTag/GidsDisplayTag.js';
+export * from './components/GidsIcon/GidsIcon.js';
+export * from './components/GidsLabel/GidsLabelInfo/GidsLabelInfo.js';
+export * from './components/GidsLabel/GidsLabel.js';
+export * from './components/GidsLink/GidsLink.js';
+export * from './components/_GidsSpinnerControl/GidsSpinnerControl.js';
+export * from './components/GidsSpinner/GidsSpinner.js';
+export * from './components/GidsToggleButton/GidsToggleButton.js';
+export * from './components/_GidsCheckboxControl/GidsCheckboxControl.js';
+export * from './components/_GidsRadioControl/GidsRadioControl.js';
+export * from './components/_GidsSwitchControl/GidsSwitchControl.js';
+export * from './components/GidsCheckbox/GidsCheckbox.js';
+export * from './components/GidsRadio/GidsRadio.js';
+export * from './components/GidsSwitch/GidsSwitch.js';
+export * from './components/GidsCheckboxGroup/GidsCheckboxGroup.js';
+export * from './components/GidsRadioGroup/GidsRadioGroup.js';
+export * from './components/GidsSwitchGroup/GidsSwitchGroup.js';
+export * from './components/GidsBadge/GidsBadge.js';
+export * from './components/GidsAvatar/GidsAvatar.js';
+export * from './components/GidsAvatarGroup/GidsAvatarGroup.js';
 /**
  * Utilities
  */
-export * from './utils/domUtils';
+export * from './utils/domUtils.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,oCAAoC,CAAC;AACnD,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oDAAoD,CAAC;AACnE,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,qDAAqD,CAAC;AACpE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,uDAAuD,CAAC;AACtE,cAAc,iDAAiD,CAAC;AAChE,cAAc,mDAAmD,CAAC;AAClE,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,oCAAoC,CAAC;AACnD,cAAc,kDAAkD,CAAC;AACjE,cAAc,4CAA4C,CAAC;AAC3D,cAAc,8CAA8C,CAAC;AAE7D;;GAEG;AACH,cAAc,kBAAkB,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;AAEhE;;GAEG;AACH,cAAc,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ganpatiinfo/gids-web-dom-reference",
-	"version": "2.0.5",
+	"version": "2.0.7",
 	"private": false,
 	"description": "DOM for components reference implementations",
 	"homepage": "https://ganpatiinfosystem.vercel.app/",
@@ -24,11 +24,11 @@
 		"directory": "packages/private/web-dom-reference"
 	},
 	"dependencies": {
-		"@ganpatiinfo/gids-core-shared": "2.0.5",
-		"@ganpatiinfo/gids-web-shared": "2.0.5"
+		"@ganpatiinfo/gids-core-shared": "2.0.7",
+		"@ganpatiinfo/gids-web-shared": "2.0.7"
 	},
 	"peerDependencies": {
-		"@ganpatiinfo/gids-web-theme-interface": "2.0.5",
+		"@ganpatiinfo/gids-web-theme-interface": "2.0.6",
 		"@jest/globals": "29.7.0",
 		"@types/jasmine": "5.1.7",
 		"expect": "29.7.0"

package/src/components/GidsAvatar/GidsAvatar.ts

@@ -0,0 +1,66 @@
+import { GidsAvatarCommonUtils } from '@ganpatiinfo/gids-core-shared';
+import {
+	type GidsAvatarWebProps,
+	GidsAvatarWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { type DomNodeOrString } from '../../utils/domUtils.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+
+const { shouldTextBeHiddenFromAt } = GidsAvatarCommonUtils;
+const { getGidsAvatarClassNames } = GidsAvatarWebUtils;
+
+export type GidsAvatarDomProps = GidsAvatarWebProps<DomNodeOrString> & {
+	extraClasses?: string;
+};
+
+export const GidsAvatarDom = ({
+	appearance,
+	color,
+	size,
+	badge,
+	text,
+	imageSrc,
+	alt,
+	iconTitleId,
+	extraClasses,
+}: GidsAvatarDomProps): HTMLElement => {
+	const avatarElement = document.createElement('span');
+	avatarElement.className = getGidsAvatarClassNames(
+		{ color, size },
+		extraClasses,
+	);
+
+	if (appearance === 'image') {
+		const image = document.createElement('img');
+		image.src = imageSrc!;
+		image.setAttribute('alt', alt ?? text ?? '');
+		image.width = 100;
+		image.height = 100;
+
+		avatarElement.append(image);
+	} else if (appearance === 'icon') {
+		const icon = GidsIconDom({
+			name: 'user',
+			alt: alt ?? text,
+			titleId: iconTitleId,
+		});
+		avatarElement.append(icon);
+	} else {
+		const displayText = document.createElement('span');
+		if (shouldTextBeHiddenFromAt({ text, alt })) {
+			displayText.setAttribute('aria-hidden', 'true');
+		} else {
+			displayText.setAttribute('role', 'img');
+			displayText.setAttribute('aria-label', alt ?? text!);
+		}
+
+		displayText.append(text!);
+		avatarElement.append(displayText);
+	}
+
+	if (badge) {
+		avatarElement.append(badge);
+	}
+
+	return avatarElement;
+};

package/src/components/GidsAvatarGroup/GidsAvatarGroup.ts

@@ -0,0 +1,27 @@
+import { type GidsAvatarGroupCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { GidsAvatarGroupWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, type DomChildren } from '../../utils/domUtils.js';
+
+const { getGidsAvatarGroupClassNames } = GidsAvatarGroupWebUtils;
+
+export type GidsAvatarGroupDomProps =
+	GidsAvatarGroupCommonProps<DomChildren> & {
+		extraClasses?: string;
+	};
+
+export const GidsAvatarGroupDom = ({
+	appearance,
+	layout,
+	children,
+	extraClasses,
+}: GidsAvatarGroupDomProps): HTMLSpanElement => {
+	const avatarGroup = document.createElement('span');
+	avatarGroup.className = getGidsAvatarGroupClassNames(
+		{ appearance, layout },
+		extraClasses,
+	);
+
+	appendAsChildren(avatarGroup, children);
+
+	return avatarGroup;
+};

package/src/components/GidsBadge/GidsBadge.ts

@@ -0,0 +1,53 @@
+import {
+	type GidsBadgeCommonProps,
+	GidsBadgeCommonUtils,
+} from '@ganpatiinfo/gids-core-shared';
+import { GidsBadgeWebUtils, nonEmpty } from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
+
+const { getDisplayContent, shouldIncludeA11yText } = GidsBadgeCommonUtils;
+const { getGidsBadgeClassNames } = GidsBadgeWebUtils;
+
+export interface GidsBadgeDomProps extends GidsBadgeCommonProps<DomChildren> {}
+
+export const GidsBadgeDom = ({
+	appearance,
+	count,
+	accessibleText,
+	type,
+	outline,
+}: GidsBadgeDomProps): HTMLSpanElement => {
+	const badge = document.createElement('span');
+	badge.className = getGidsBadgeClassNames({ appearance, type, outline });
+
+	const includeA11yText = shouldIncludeA11yText(
+		type,
+		count,
+		nonEmpty(accessibleText),
+	);
+
+	if (includeA11yText) {
+		const a11yText = document.createElement('span');
+		a11yText.className = 'gids-visually-hidden';
+		appendAsChildren(
+			a11yText,
+			accessibleText ?? (count !== undefined ? count.toString() : count),
+		);
+		badge.appendChild(a11yText);
+	}
+
+	if (type === 'notification') {
+		const displayedContent = getDisplayContent(count, accessibleText);
+		if (includeA11yText) {
+			const displayedContentSpan = document.createElement('span');
+			displayedContentSpan.setAttribute('aria-hidden', 'true');
+
+			appendAsChildren(displayedContentSpan, displayedContent);
+			badge.appendChild(displayedContentSpan);
+		} else {
+			appendAsChildren(badge, displayedContent);
+		}
+	}
+
+	return badge;
+};

package/src/components/GidsButton/GidsButton.ts

@@ -4,8 +4,8 @@ import {
 	PermittedGidsButtonElements,
 	type GidsButtonWebProps,
 } from '@ganpatiinfo/gids-web-shared';
-import { GidsSpinnerControlDom } from '../_GidsSpinnerControl/GidsSpinnerControl';
-import { appendAsChildren, type DomChildren } from '../../utils/domUtils';
+import { GidsSpinnerControlDom } from '../_GidsSpinnerControl/GidsSpinnerControl.js';
+import { appendAsChildren, type DomChildren } from '../../utils/domUtils.js';
 
 const { getGidsButtonClassNames } = GidsButtonWebUtils;
 

package/src/components/GidsCheckbox/GidsCheckbox.ts

@@ -4,8 +4,8 @@ import {
 	type GidsCheckboxWebProps,
 	GidsCheckboxWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
-import { GidsCheckboxControlDom } from '../_GidsCheckboxControl/GidsCheckboxControl';
-import { GidsLabelDom } from '../GidsLabel/GidsLabel';
+import { GidsCheckboxControlDom } from '../_GidsCheckboxControl/GidsCheckboxControl.js';
+import { GidsLabelDom } from '../GidsLabel/GidsLabel.js';
 
 const { getGidsCheckboxClassNames } = GidsCheckboxWebUtils;
 

package/src/components/GidsCheckboxGroup/GidsCheckboxGroup.ts

@@ -1,6 +1,6 @@
 import { type GidsCheckboxGroupCommonProps } from '@ganpatiinfo/gids-core-shared';
 import { GidsCheckboxGroupWebUtils } from '@ganpatiinfo/gids-web-shared';
-import { appendAsChildren, type DomChildren } from '../../utils/domUtils';
+import { appendAsChildren, type DomChildren } from '../../utils/domUtils.js';
 
 const { getGidsCheckboxGroupClassNames } = GidsCheckboxGroupWebUtils;
 

package/src/components/GidsDisplayTag/GidsDisplayTag.ts

@@ -1,6 +1,6 @@
 import { type GidsDisplayTagCommonProps } from '@ganpatiinfo/gids-core-shared';
 import { GidsDisplayTagWebUtils } from '@ganpatiinfo/gids-web-shared';
-import { type DomNodeOrString } from '../../utils/domUtils';
+import { type DomNodeOrString } from '../../utils/domUtils.js';
 
 const { getGidsDisplaTagClassNames } = GidsDisplayTagWebUtils;
 

package/src/components/GidsLabel/GidsLabel.ts

@@ -6,7 +6,7 @@ import {
 	appendAsChildren,
 	type DomChildren,
 	type DomNodeOrString,
-} from '../../utils/domUtils';
+} from '../../utils/domUtils.js';
 import { GidsLabelCommonUtils } from '@ganpatiinfo/gids-core-shared';
 
 const { getIndicatorText } = GidsLabelCommonUtils;

package/src/components/GidsLabel/GidsLabelInfo/GidsLabelInfo.ts

@@ -1,9 +1,9 @@
 import { type GidsLabelInfoCommonProps } from '@ganpatiinfo/gids-core-shared';
 import { type ClassValue } from '@ganpatiinfo/gids-web-shared';
 import { GidsLabelInfoWebUtils } from '@ganpatiinfo/gids-web-shared';
-import { toggleAttribute } from '../../../utils/domUtils';
+import { toggleAttribute } from '../../../utils/domUtils.js';
 import { GidsLabelInfoCommonUtils } from '@ganpatiinfo/gids-core-shared';
-import { GidsIconDom } from '../../GidsIcon/GidsIcon';
+import { GidsIconDom } from '../../GidsIcon/GidsIcon.js';
 
 const { getGidsLabelInfoClassNames } = GidsLabelInfoWebUtils;
 const { getLabelInfoAltText } = GidsLabelInfoCommonUtils;

package/src/components/GidsLink/GidsLink.ts

@@ -1,5 +1,5 @@
 import { type GidsLinkCommonProps } from '@ganpatiinfo/gids-core-shared';
-import { appendAsChildren, type DomChildren } from '../../utils/domUtils';
+import { appendAsChildren, type DomChildren } from '../../utils/domUtils.js';
 import {
 	type ClassValue,
 	GidsLinkWebUtils,

package/src/components/GidsRadio/GidsRadio.ts

@@ -4,9 +4,9 @@ import {
 	type GidsRadioWebProps,
 	GidsRadioWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
-import { GidsRadioControlDom } from '../_GidsRadioControl/GidsRadioControl';
-import { GidsLabelDom } from '../GidsLabel/GidsLabel';
-import { type DomChildren, type DomNodeOrString } from '../../utils/domUtils';
+import { GidsRadioControlDom } from '../_GidsRadioControl/GidsRadioControl.js';
+import { GidsLabelDom } from '../GidsLabel/GidsLabel.js';
+import { type DomChildren, type DomNodeOrString } from '../../utils/domUtils.js';
 
 const { getGidsRadioClassNames } = GidsRadioWebUtils;
 

package/src/components/GidsRadioGroup/GidsRadioGroup.ts

@@ -1,5 +1,5 @@
 import { type GidsRadioGroupCommonProps } from '@ganpatiinfo/gids-core-shared';
-import { appendAsChildren, type DomChildren } from '../../utils/domUtils';
+import { appendAsChildren, type DomChildren } from '../../utils/domUtils.js';
 
 export type GidsRadioGroupDomProps = GidsRadioGroupCommonProps<DomChildren>;
 

package/src/components/GidsSpinner/GidsSpinner.ts

@@ -6,7 +6,7 @@ import {
 	type ClassValue,
 	GidsSpinnerWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
-import { GidsSpinnerControlDom } from '../_GidsSpinnerControl/GidsSpinnerControl';
+import { GidsSpinnerControlDom } from '../_GidsSpinnerControl/GidsSpinnerControl.js';
 
 const { getGidsSpinnerClassNames } = GidsSpinnerWebUtils;
 const { getElementVisibility } = GidsSpinnerCommonUtils;

package/src/components/GidsSwitch/GidsSwitch.ts

@@ -4,9 +4,9 @@ import {
     type GidsSwitchWebProps,
     GidsSwitchWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
-import { GidsSwitchControlDom } from '../_GidsSwitchControl/GidsSwitchControl';
-import { GidsLabelDom } from '../GidsLabel/GidsLabel';
-import { type DomChildren, type DomNodeOrString } from '../../utils/domUtils';
+import { GidsSwitchControlDom } from '../_GidsSwitchControl/GidsSwitchControl.js';
+import { GidsLabelDom } from '../GidsLabel/GidsLabel.js';
+import { type DomChildren, type DomNodeOrString } from '../../utils/domUtils.js';
 
 const { getGidsSwitchClassNames } = GidsSwitchWebUtils;
 

package/src/components/GidsSwitchGroup/GidsSwitchGroup.ts

@@ -1,5 +1,5 @@
 import { type GidsSwitchGroupCommonProps } from '@ganpatiinfo/gids-core-shared';
-import { appendAsChildren, type DomChildren } from '../../utils/domUtils';
+import { appendAsChildren, type DomChildren } from '../../utils/domUtils.js';
 
 export type GidsSwitchGroupDomProps = GidsSwitchGroupCommonProps<DomChildren>;
 

package/src/components/GidsToggleButton/GidsToggleButton.ts

@@ -3,7 +3,7 @@ import {
 	appendAsChildren,
 	toggleAttribute,
 	type DomChildren,
-} from '../../utils/domUtils';
+} from '../../utils/domUtils.js';
 
 export interface GidsToggleButtonDomProps
 	extends GidsToggleButtonWebProps<DomChildren> {
@@ -41,7 +41,7 @@ export const GidsToggleButtonDom = ({
 	toggleAttribute(toggleButton, 'disabled', !!disabled);
 	toggleAttribute(toggleButton, 'default-selected', !!defaultSelected);
 
-	// @ts-expect-error
+	// @ts-expect-error: Expected
 	toggleButton.selected = selected;
 
 	appendAsChildren(toggleButton, children);

package/src/components/_GidsCheckboxControl/GidsCheckboxControl.ts

@@ -3,8 +3,8 @@ import {
 	type GidsCheckboxControlWebProps,
 	GidsCheckboxControlWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
-import { applyStatefulInputProps, toggleAttribute } from '../../utils/domUtils';
-import { GidsIconDom } from '../GidsIcon/GidsIcon';
+import { applyStatefulInputProps, toggleAttribute } from '../../utils/domUtils.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
 
 const { getGidsCheckboxControlClassNames } = GidsCheckboxControlWebUtils;
 

package/src/components/_GidsRadioControl/GidsRadioControl.ts

@@ -3,7 +3,7 @@ import {
 	type GidsRadioControlWebProps,
 	GidsRadioControlWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
-import { applyStatefulInputProps, toggleAttribute } from '../../utils/domUtils';
+import { applyStatefulInputProps, toggleAttribute } from '../../utils/domUtils.js';
 
 const { getGidsRadioControlClassNames } = GidsRadioControlWebUtils;
 

package/src/components/_GidsSwitchControl/GidsSwitchControl.ts

@@ -3,8 +3,8 @@ import {
 	type GidsSwitchControlWebProps,
 	GidsSwitchControlWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
-import { applyStatefulInputProps, toggleAttribute } from '../../utils/domUtils';
-import { GidsIconDom } from '../GidsIcon/GidsIcon';
+import { applyStatefulInputProps, toggleAttribute } from '../../utils/domUtils.js';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
 
 const { getGidsSwitchControlClassNames } = GidsSwitchControlWebUtils;
 

package/src/index.ts

@@ -1,27 +1,30 @@
 /**
  * Referenced to DOM components
  */
-export * from './components/GidsButton/GidsButton';
-export * from './components/GidsDivider/GidsDivider';
-export * from './components/GidsDisplayTag/GidsDisplayTag';
-export * from './components/GidsIcon/GidsIcon';
-export * from './components/GidsLabel/GidsLabelInfo/GidsLabelInfo';
-export * from './components/GidsLabel/GidsLabel';
-export * from './components/GidsLink/GidsLink';
-export * from './components/_GidsSpinnerControl/GidsSpinnerControl';
-export * from './components/GidsSpinner/GidsSpinner';
-export * from './components/GidsToggleButton/GidsToggleButton';
-export * from './components/_GidsCheckboxControl/GidsCheckboxControl';
-export * from './components/_GidsRadioControl/GidsRadioControl';
-export * from './components/_GidsSwitchControl/GidsSwitchControl';
-export * from './components/GidsCheckbox/GidsCheckbox';
-export * from './components/GidsRadio/GidsRadio';
-export * from './components/GidsSwitch/GidsSwitch';
-export * from './components/GidsCheckboxGroup/GidsCheckboxGroup';
-export * from './components/GidsRadioGroup/GidsRadioGroup';
-export * from './components/GidsSwitchGroup/GidsSwitchGroup';
+export * from './components/GidsButton/GidsButton.js';
+export * from './components/GidsDivider/GidsDivider.js';
+export * from './components/GidsDisplayTag/GidsDisplayTag.js';
+export * from './components/GidsIcon/GidsIcon.js';
+export * from './components/GidsLabel/GidsLabelInfo/GidsLabelInfo.js';
+export * from './components/GidsLabel/GidsLabel.js';
+export * from './components/GidsLink/GidsLink.js';
+export * from './components/_GidsSpinnerControl/GidsSpinnerControl.js';
+export * from './components/GidsSpinner/GidsSpinner.js';
+export * from './components/GidsToggleButton/GidsToggleButton.js';
+export * from './components/_GidsCheckboxControl/GidsCheckboxControl.js';
+export * from './components/_GidsRadioControl/GidsRadioControl.js';
+export * from './components/_GidsSwitchControl/GidsSwitchControl.js';
+export * from './components/GidsCheckbox/GidsCheckbox.js';
+export * from './components/GidsRadio/GidsRadio.js';
+export * from './components/GidsSwitch/GidsSwitch.js';
+export * from './components/GidsCheckboxGroup/GidsCheckboxGroup.js';
+export * from './components/GidsRadioGroup/GidsRadioGroup.js';
+export * from './components/GidsSwitchGroup/GidsSwitchGroup.js';
+export * from './components/GidsBadge/GidsBadge.js';
+export * from './components/GidsAvatar/GidsAvatar.js';
+export * from './components/GidsAvatarGroup/GidsAvatarGroup.js';
 
 /**
  * Utilities
  */
-export * from './utils/domUtils';
+export * from './utils/domUtils.js';