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

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @ganpatiinfo/gids-web-dom-reference
 
+## 2.0.8
+
+### Patch Changes
+
+- 2a43b1b: Added `InputTag` dom reference.
+  Added `TagGroup` dom reference
+- Updated dependencies [2a43b1b]
+- Updated dependencies [2a43b1b]
+- Updated dependencies [2a43b1b]
+  - @ganpatiinfo/gids-web-theme-interface@2.0.7
+  - @ganpatiinfo/gids-web-shared@2.0.8
+  - @ganpatiinfo/gids-core-shared@2.0.8
+
 ## 2.0.7
 
 ### Patch Changes

package/dist/components/GidsInputTag/GidsInputTag.d.ts

@@ -0,0 +1,7 @@
+import { type GidsInputTagCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { type DomNodeOrString } from '../../utils/domUtils.js';
+export interface GidsInputTagDomProps extends GidsInputTagCommonProps<DomNodeOrString> {
+    onClick?: (event: MouseEvent) => void;
+}
+export declare const GidsInputTagDom: ({ label, appearance, size, icon, dismissible, disabled, dismissButtonLabel, onClick, }: GidsInputTagDomProps) => HTMLSpanElement | HTMLButtonElement;
+//# sourceMappingURL=GidsInputTag.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GidsInputTag.d.ts","sourceRoot":"","sources":["../../../src/components/GidsInputTag/GidsInputTag.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,uBAAuB,EAE5B,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAMhF,MAAM,WAAW,oBAChB,SAAQ,uBAAuB,CAAC,eAAe,CAAC;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,eAAe,GAAI,wFAS7B,oBAAoB,KAAG,eAAe,GAAG,iBAoC3C,CAAC"}

package/dist/components/GidsInputTag/GidsInputTag.js

@@ -0,0 +1,38 @@
+import { GidsInputTagCommonUtils, } from '@ganpatiinfo/gids-core-shared';
+import { GidsInputTagWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { toggleAttribute } from '../../utils/domUtils.js';
+import { GidsInputTagButtonDom } from './_GidsInputTagButton/GidsInputTagButton.js';
+const { getDismissButtonLabel } = GidsInputTagCommonUtils;
+const { getGidsInputTagClassNames } = GidsInputTagWebUtils;
+export const GidsInputTagDom = ({ label, appearance, size, icon, dismissible, disabled, dismissButtonLabel, onClick, }) => {
+    const inputTag = dismissible
+        ? document.createElement('span')
+        : document.createElement('button');
+    inputTag.className = getGidsInputTagClassNames({
+        size,
+        appearance,
+        disabled,
+        dismissible,
+    });
+    if (icon !== undefined) {
+        inputTag.append(icon);
+    }
+    inputTag.append(label);
+    if (dismissible) {
+        inputTag.appendChild(GidsInputTagButtonDom({
+            appearance,
+            disabled,
+            size,
+            onClick,
+            label: getDismissButtonLabel(dismissButtonLabel),
+        }));
+    }
+    else {
+        toggleAttribute(inputTag, 'disabled', !!disabled);
+        if (onClick) {
+            inputTag.addEventListener('click', onClick);
+        }
+    }
+    return inputTag;
+};
+//# sourceMappingURL=GidsInputTag.js.map

package/dist/components/GidsInputTag/GidsInputTag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsInputTag.js","sourceRoot":"","sources":["../../../src/components/GidsInputTag/GidsInputTag.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,uBAAuB,GACvB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,eAAe,EAAwB,MAAM,yBAAyB,CAAC;AAChF,OAAO,EAAE,qBAAqB,EAAE,MAAM,6CAA6C,CAAC;AAEpF,MAAM,EAAE,qBAAqB,EAAE,GAAG,uBAAuB,CAAC;AAC1D,MAAM,EAAE,yBAAyB,EAAE,GAAG,oBAAoB,CAAC;AAO3D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC/B,KAAK,EACL,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,kBAAkB,EAClB,OAAO,GACe,EAAuC,EAAE;IAC/D,MAAM,QAAQ,GAAG,WAAW;QAC3B,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;QAChC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAEpC,QAAQ,CAAC,SAAS,GAAG,yBAAyB,CAAC;QAC9C,IAAI;QACJ,UAAU;QACV,QAAQ;QACR,WAAW;KACX,CAAC,CAAC;IAEH,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACxB,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC;IAED,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAEvB,IAAI,WAAW,EAAE,CAAC;QACjB,QAAQ,CAAC,WAAW,CACnB,qBAAqB,CAAC;YACrB,UAAU;YACV,QAAQ;YACR,IAAI;YACJ,OAAO;YACP,KAAK,EAAE,qBAAqB,CAAC,kBAAkB,CAAC;SAChD,CAAC,CACF,CAAC;IACH,CAAC;SAAM,CAAC;QACP,eAAe,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;QAClD,IAAI,OAAO,EAAE,CAAC;YACb,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC7C,CAAC;IACF,CAAC;IAED,OAAO,QAAQ,CAAC;AACjB,CAAC,CAAC"}

package/dist/components/GidsInputTag/_GidsInputTagButton/GidsInputTagButton.d.ts

@@ -0,0 +1,6 @@
+import { type GidsInputTagButtonCommonProps } from '@ganpatiinfo/gids-core-shared';
+export interface GidsInputTagButtonDomProps extends GidsInputTagButtonCommonProps {
+    onClick?: (event: MouseEvent) => void;
+}
+export declare const GidsInputTagButtonDom: ({ appearance, disabled, size, label, onClick, }: GidsInputTagButtonDomProps) => HTMLButtonElement;
+//# sourceMappingURL=GidsInputTagButton.d.ts.map

package/dist/components/GidsInputTag/_GidsInputTagButton/GidsInputTagButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsInputTagButton.d.ts","sourceRoot":"","sources":["../../../../src/components/GidsInputTag/_GidsInputTagButton/GidsInputTagButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,6BAA6B,EAAE,MAAM,+BAA+B,CAAC;AAOnF,MAAM,WAAW,0BAChB,SAAQ,6BAA6B;IACrC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,qBAAqB,GAAI,iDAMnC,0BAA0B,KAAG,iBAY/B,CAAC"}

package/dist/components/GidsInputTag/_GidsInputTagButton/GidsInputTagButton.js

@@ -0,0 +1,17 @@
+import { GidsInputTagButtonWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { toggleAttribute } from '../../../utils/domUtils.js';
+import { GidsIconDom } from '../../GidsIcon/GidsIcon.js';
+const { getGidsInputTagButtonClassNames } = GidsInputTagButtonWebUtils;
+export const GidsInputTagButtonDom = ({ appearance, disabled, size, label, onClick, }) => {
+    const tagButton = document.createElement('button');
+    tagButton.className = getGidsInputTagButtonClassNames({ size, appearance });
+    tagButton.setAttribute('aria-label', label ?? '');
+    toggleAttribute(tagButton, 'disabled', !!disabled);
+    const icon = GidsIconDom({ name: 'cross', alt: '' });
+    tagButton.appendChild(icon);
+    if (onClick) {
+        tagButton.addEventListener('click', onClick);
+    }
+    return tagButton;
+};
+//# sourceMappingURL=GidsInputTagButton.js.map

package/dist/components/GidsInputTag/_GidsInputTagButton/GidsInputTagButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsInputTagButton.js","sourceRoot":"","sources":["../../../../src/components/GidsInputTag/_GidsInputTagButton/GidsInputTagButton.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,EAAE,+BAA+B,EAAE,GAAG,0BAA0B,CAAC;AAOvE,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EACrC,UAAU,EACV,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,OAAO,GACqB,EAAqB,EAAE;IACnD,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACnD,SAAS,CAAC,SAAS,GAAG,+BAA+B,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;IAC5E,SAAS,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;IAClD,eAAe,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;IACnD,MAAM,IAAI,GAAG,WAAW,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC;IACrD,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,OAAO,EAAE,CAAC;QACb,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC9C,CAAC;IAED,OAAO,SAAS,CAAC;AAClB,CAAC,CAAC"}

package/dist/components/GidsTagGroup/GidsTagGroup.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"GidsTagGroup.d.ts","sourceRoot":"","sources":["../../../src/components/GidsTagGroup/GidsTagGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AAE7E,OAAO,EAAoB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI7E,MAAM,WAAW,oBAChB,SAAQ,uBAAuB,CAAC,WAAW,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,GAAI,6BAG7B,oBAAoB,KAAG,eAOzB,CAAC"}

package/dist/components/GidsTagGroup/GidsTagGroup.js

@@ -0,0 +1,10 @@
+import { GidsTagGroupWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren } from '../../utils/domUtils.js';
+const { getGidsTagGroupClassNames } = GidsTagGroupWebUtils;
+export const GidsTagGroupDom = ({ children, extraClasses, }) => {
+    const tagGroup = document.createElement('span');
+    tagGroup.className = getGidsTagGroupClassNames(extraClasses);
+    appendAsChildren(tagGroup, children);
+    return tagGroup;
+};
+//# sourceMappingURL=GidsTagGroup.js.map

package/dist/components/GidsTagGroup/GidsTagGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsTagGroup.js","sourceRoot":"","sources":["../../../src/components/GidsTagGroup/GidsTagGroup.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAoB,MAAM,yBAAyB,CAAC;AAE7E,MAAM,EAAE,yBAAyB,EAAE,GAAG,oBAAoB,CAAC;AAO3D,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC/B,QAAQ,EACR,YAAY,GACU,EAAmB,EAAE;IAC3C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAChD,QAAQ,CAAC,SAAS,GAAG,yBAAyB,CAAC,YAAY,CAAC,CAAC;IAE7D,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAErC,OAAO,QAAQ,CAAC;AACjB,CAAC,CAAC"}

package/dist/index.d.ts

@@ -23,6 +23,9 @@ export * from './components/GidsSwitchGroup/GidsSwitchGroup.js';
 export * from './components/GidsBadge/GidsBadge.js';
 export * from './components/GidsAvatar/GidsAvatar.js';
 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';
 /**
  * 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;AAEhE;;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;AAE1D;;GAEG;AACH,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -23,6 +23,9 @@ export * from './components/GidsSwitchGroup/GidsSwitchGroup.js';
 export * from './components/GidsBadge/GidsBadge.js';
 export * from './components/GidsAvatar/GidsAvatar.js';
 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';
 /**
  * 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;AAEhE;;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;AAE1D;;GAEG;AACH,cAAc,qBAAqB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ganpatiinfo/gids-web-dom-reference",
-	"version": "2.0.7",
+	"version": "2.0.8",
 	"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.7",
-		"@ganpatiinfo/gids-web-shared": "2.0.7"
+		"@ganpatiinfo/gids-core-shared": "2.0.8",
+		"@ganpatiinfo/gids-web-shared": "2.0.8"
 	},
 	"peerDependencies": {
-		"@ganpatiinfo/gids-web-theme-interface": "2.0.6",
+		"@ganpatiinfo/gids-web-theme-interface": "2.0.7",
 		"@jest/globals": "29.7.0",
 		"@types/jasmine": "5.1.7",
 		"expect": "29.7.0"

package/src/components/GidsInputTag/GidsInputTag.ts

@@ -0,0 +1,62 @@
+import {
+	type GidsInputTagCommonProps,
+	GidsInputTagCommonUtils,
+} from '@ganpatiinfo/gids-core-shared';
+import { GidsInputTagWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { toggleAttribute, type DomNodeOrString } from '../../utils/domUtils.js';
+import { GidsInputTagButtonDom } from './_GidsInputTagButton/GidsInputTagButton.js';
+
+const { getDismissButtonLabel } = GidsInputTagCommonUtils;
+const { getGidsInputTagClassNames } = GidsInputTagWebUtils;
+
+export interface GidsInputTagDomProps
+	extends GidsInputTagCommonProps<DomNodeOrString> {
+	onClick?: (event: MouseEvent) => void;
+}
+
+export const GidsInputTagDom = ({
+	label,
+	appearance,
+	size,
+	icon,
+	dismissible,
+	disabled,
+	dismissButtonLabel,
+	onClick,
+}: GidsInputTagDomProps): HTMLSpanElement | HTMLButtonElement => {
+	const inputTag = dismissible
+		? document.createElement('span')
+		: document.createElement('button');
+
+	inputTag.className = getGidsInputTagClassNames({
+		size,
+		appearance,
+		disabled,
+		dismissible,
+	});
+
+	if (icon !== undefined) {
+		inputTag.append(icon);
+	}
+
+	inputTag.append(label);
+
+	if (dismissible) {
+		inputTag.appendChild(
+			GidsInputTagButtonDom({
+				appearance,
+				disabled,
+				size,
+				onClick,
+				label: getDismissButtonLabel(dismissButtonLabel),
+			}),
+		);
+	} else {
+		toggleAttribute(inputTag, 'disabled', !!disabled);
+		if (onClick) {
+			inputTag.addEventListener('click', onClick);
+		}
+	}
+
+	return inputTag;
+};

package/src/components/GidsInputTag/_GidsInputTagButton/GidsInputTagButton.ts

@@ -0,0 +1,31 @@
+import { type GidsInputTagButtonCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { GidsInputTagButtonWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { toggleAttribute } from '../../../utils/domUtils.js';
+import { GidsIconDom } from '../../GidsIcon/GidsIcon.js';
+
+const { getGidsInputTagButtonClassNames } = GidsInputTagButtonWebUtils;
+
+export interface GidsInputTagButtonDomProps
+	extends GidsInputTagButtonCommonProps {
+	onClick?: (event: MouseEvent) => void;
+}
+
+export const GidsInputTagButtonDom = ({
+	appearance,
+	disabled,
+	size,
+	label,
+	onClick,
+}: GidsInputTagButtonDomProps): HTMLButtonElement => {
+	const tagButton = document.createElement('button');
+	tagButton.className = getGidsInputTagButtonClassNames({ size, appearance });
+	tagButton.setAttribute('aria-label', label ?? '');
+	toggleAttribute(tagButton, 'disabled', !!disabled);
+	const icon = GidsIconDom({ name: 'cross', alt: '' });
+	tagButton.appendChild(icon);
+	if (onClick) {
+		tagButton.addEventListener('click', onClick);
+	}
+
+	return tagButton;
+};

package/src/components/GidsTagGroup/GidsTagGroup.ts

@@ -0,0 +1,22 @@
+import { type GidsTagGroupCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { GidsTagGroupWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { appendAsChildren, type DomChildren } from '../../utils/domUtils.js';
+
+const { getGidsTagGroupClassNames } = GidsTagGroupWebUtils;
+
+export interface GidsTagGroupDomProps
+	extends GidsTagGroupCommonProps<DomChildren> {
+	extraClasses?: string;
+}
+
+export const GidsTagGroupDom = ({
+	children,
+	extraClasses,
+}: GidsTagGroupDomProps): HTMLSpanElement => {
+	const tagGroup = document.createElement('span');
+	tagGroup.className = getGidsTagGroupClassNames(extraClasses);
+
+	appendAsChildren(tagGroup, children);
+
+	return tagGroup;
+};

package/src/index.ts

@@ -23,6 +23,9 @@ export * from './components/GidsSwitchGroup/GidsSwitchGroup.js';
 export * from './components/GidsBadge/GidsBadge.js';
 export * from './components/GidsAvatar/GidsAvatar.js';
 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';
 
 /**
  * Utilities