@ganpatiinfo/gids-web-dom-reference 0.0.6 → 2.0.1

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# @ganpatiinfo/gids-web-dom-reference
+
+## 2.0.1
+
+### Patch Changes
+
+- 4ffaa50: 1st automated publishing of package
+- Updated dependencies [4ffaa50]
+- Updated dependencies [4ffaa50]
+- Updated dependencies [4ffaa50]
+- Updated dependencies [4ffaa50]
+- Updated dependencies [4ffaa50]
+  - @ganpatiinfo/gids-core-shared@2.0.1
+  - @ganpatiinfo/gids-web-shared@2.0.1
+  - @ganpatiinfo/gids-web-theme-interface@2.0.1

package/dist/components/GidsButton/GidsButton.d.ts

@@ -0,0 +1,9 @@
+import { PermittedGidsButtonElements, type GidsButtonWebProps } from '@ganpatiinfo/gids-web-shared';
+import { type DomChildren } from '../../utils/domUtils';
+export interface GidsButtonDomProps<ButtonElement extends PermittedGidsButtonElements> extends GidsButtonWebProps<DomChildren, DomChildren, ButtonElement> {
+    type?: 'button' | 'submit' | 'reset';
+    href?: string;
+    onClick?: (this: HTMLButtonElement, event: Event) => void;
+}
+export declare const GidsButtonDom: <ButtonElement extends PermittedGidsButtonElements = "button">({ as, appearance, size, disabled, destructive, loading, width, children, leadingIcon, trailingIcon, type, href, onClick, }: GidsButtonDomProps<ButtonElement>) => ButtonElement extends "button" ? HTMLButtonElement : HTMLAnchorElement;
+//# sourceMappingURL=GidsButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GidsButton.d.ts","sourceRoot":"","sources":["../../../src/components/GidsButton/GidsButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAGN,2BAA2B,EAC3B,KAAK,kBAAkB,EACvB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAoB,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAI1E,MAAM,WAAW,kBAAkB,CAClC,aAAa,SAAS,2BAA2B,CAChD,SAAQ,kBAAkB,CAAC,WAAW,EAAE,WAAW,EAAE,aAAa,CAAC;IACpE,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC1D;AAED,eAAO,MAAM,aAAa,GACzB,aAAa,SAAS,2BAA2B,GAAG,QAAQ,EAC3D,4HAcC,kBAAkB,CAAC,aAAa,CAAC,KAAG,aAAa,SAAS,QAAQ,GAClE,iBAAiB,GACjB,iBAmDF,CAAC"}

package/dist/components/GidsButton/GidsButton.js

@@ -0,0 +1,39 @@
+import { GidsButtonWebUtils, nonEmpty, } from '@ganpatiinfo/gids-web-shared';
+import { GidsSpinnerControlDom } from '../_GidsSpinnerControl/GidsSpinnerControl';
+import { appendAsChildren } from '../../utils/domUtils';
+const { getGidsButtonClassNames } = GidsButtonWebUtils;
+export const GidsButtonDom = ({ as, appearance, size, disabled, destructive, loading, width, children, leadingIcon, trailingIcon, type, href, onClick, }) => {
+    const button = document.createElement(as || 'button');
+    button.className = getGidsButtonClassNames({ appearance, size, width, destructive, loading }, !children && nonEmpty(leadingIcon) && !nonEmpty(trailingIcon));
+    if (as !== 'a') {
+        button.setAttribute('type', type ?? 'button');
+        if (disabled) {
+            button.setAttribute('disabled', '');
+        }
+        else {
+            button.removeAttribute('disabled');
+        }
+    }
+    if (as === 'a') {
+        if (href) {
+            button.setAttribute('href', href);
+        }
+    }
+    const content = document.createElement('span');
+    content.classList.add('gids-button__content');
+    appendAsChildren(content, leadingIcon);
+    appendAsChildren(content, children);
+    button.appendChild(content);
+    appendAsChildren(button, trailingIcon);
+    if (loading) {
+        button.appendChild(GidsSpinnerControlDom({
+            size: size === 'lg' || size === undefined ? 'md' : size,
+            indeterminate: true
+        }));
+    }
+    if (onClick && !loading) {
+        button.addEventListener('click', onClick);
+    }
+    return button;
+};
+//# sourceMappingURL=GidsButton.js.map

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

@@ -0,0 +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,2CAA2C,CAAC;AAClF,OAAO,EAAE,gBAAgB,EAAoB,MAAM,sBAAsB,CAAC;AAE1E,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"}

package/dist/components/GidsIcon/GidsIcon.d.ts

@@ -0,0 +1,7 @@
+import { type IconName, type IconAppearance } from '@ganpatiinfo/gids-web-theme-interface';
+import { type GidsIconWebProps } from '@ganpatiinfo/gids-web-shared';
+export interface GidsIconDomProps extends GidsIconWebProps<IconName, IconAppearance> {
+    className?: string;
+}
+export declare const GidsIconDom: ({ size, name, appearance, alt, titleId, className, }: GidsIconDomProps) => SVGSVGElement;
+//# sourceMappingURL=GidsIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GidsIcon.d.ts","sourceRoot":"","sources":["../../../src/components/GidsIcon/GidsIcon.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,QAAQ,EACb,KAAK,cAAc,EAEnB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EAIN,KAAK,gBAAgB,EACrB,MAAM,8BAA8B,CAAC;AAItC,MAAM,WAAW,gBAChB,SAAQ,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,WAAW,GAAI,sDAOzB,gBAAgB,KAAG,aA2BrB,CAAC"}

package/dist/components/GidsIcon/GidsIcon.js

@@ -0,0 +1,27 @@
+import { getIconGlyphUrl, } from '@ganpatiinfo/gids-web-theme-interface';
+import { generateId, getGidsAssetFilePath, GidsIconWebUtils, } from '@ganpatiinfo/gids-web-shared';
+const { getGidsIconClassNames } = GidsIconWebUtils;
+export const GidsIconDom = ({ size, name, appearance, alt, titleId, className, }) => {
+    const svgNamespace = 'http://www.w3.org/2000/svg';
+    const icon = document.createElementNS(svgNamespace, 'svg');
+    icon.setAttribute('class', getGidsIconClassNames({ size }, className));
+    icon.setAttribute('width', '16');
+    icon.setAttribute('height', '16');
+    icon.setAttribute('role', 'img');
+    if (alt === '') {
+        icon.setAttribute('aria-hidden', 'true');
+    }
+    else {
+        const title = document.createElementNS(svgNamespace, 'title');
+        title.textContent = alt || name;
+        const titleElementId = generateId(titleId);
+        title.setAttribute('id', titleElementId);
+        icon.insertBefore(title, icon.firstChild);
+        icon.setAttribute('aria-labelledby', titleElementId);
+    }
+    const use = document.createElementNS(svgNamespace, 'use');
+    use.setAttribute('href', getIconGlyphUrl(name, appearance, getGidsAssetFilePath));
+    icon.appendChild(use);
+    return icon;
+};
+//# sourceMappingURL=GidsIcon.js.map

package/dist/components/GidsIcon/GidsIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsIcon.js","sourceRoot":"","sources":["../../../src/components/GidsIcon/GidsIcon.ts"],"names":[],"mappings":"AAAA,OAAO,EAGN,eAAe,GACf,MAAM,uCAAuC,CAAC;AAC/C,OAAO,EACN,UAAU,EACV,oBAAoB,EACpB,gBAAgB,GAEhB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,EAAE,qBAAqB,EAAE,GAAG,gBAAgB,CAAC;AAOnD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC3B,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,GAAG,EACH,OAAO,EACP,SAAS,GACS,EAAiB,EAAE;IACrC,MAAM,YAAY,GAAG,4BAA4B,CAAC;IAClD,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IAC3D,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,qBAAqB,CAAC,EAAE,IAAI,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC;IACvE,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACjC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;IAClC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAEjC,IAAI,GAAG,KAAK,EAAE,EAAE,CAAC;QAChB,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC1C,CAAC;SAAM,CAAC;QACP,MAAM,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;QAC9D,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI,IAAI,CAAC;QAChC,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;QAC3C,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;QACzC,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAC1C,IAAI,CAAC,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC;IACtD,CAAC;IAED,MAAM,GAAG,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IAC1D,GAAG,CAAC,YAAY,CACf,MAAM,EACN,eAAe,CAAC,IAAI,EAAE,UAAU,EAAE,oBAAoB,CAAC,CACvD,CAAC;IACF,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAEtB,OAAO,IAAI,CAAC;AACb,CAAC,CAAC"}

package/dist/components/GidsSpinner/GidsSpinner.d.ts

@@ -0,0 +1,7 @@
+import { type GidsSpinnerCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { type ClassValue } from '@ganpatiinfo/gids-web-shared';
+export interface GidsSpinnerDomProps extends GidsSpinnerCommonProps {
+    className?: ClassValue;
+}
+export declare const GidsSpinnerDom: ({ label, supportingText, size, indeterminate, value, max, className, }: GidsSpinnerDomProps) => HTMLSpanElement;
+//# sourceMappingURL=GidsSpinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GidsSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/GidsSpinner/GidsSpinner.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,sBAAsB,EAE3B,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACN,KAAK,UAAU,EAEf,MAAM,8BAA8B,CAAC;AAMtC,MAAM,WAAW,mBAAoB,SAAQ,sBAAsB;IAClE,SAAS,CAAC,EAAE,UAAU,CAAC;CACvB;AAED,eAAO,MAAM,cAAc,GAAI,wEAQ5B,mBAAmB,KAAG,eAkCxB,CAAC"}

package/dist/components/GidsSpinner/GidsSpinner.js

@@ -0,0 +1,33 @@
+import { GidsSpinnerCommonUtils, } from '@ganpatiinfo/gids-core-shared';
+import { GidsSpinnerWebUtils, } from '@ganpatiinfo/gids-web-shared';
+import { GidsSpinnerControlDom } from '../_GidsSpinnerControl/GidsSpinnerControl';
+const { getGidsSpinnerClassNames } = GidsSpinnerWebUtils;
+const { getElementVisibility } = GidsSpinnerCommonUtils;
+export const GidsSpinnerDom = ({ label, supportingText, size, indeterminate, value, max, className, }) => {
+    const spinner = document.createElement('span');
+    const { hasLabel, hasSupportingText } = getElementVisibility({
+        label,
+        supportingText,
+    });
+    spinner.className = getGidsSpinnerClassNames({ size }, className);
+    spinner.appendChild(GidsSpinnerControlDom({
+        size,
+        indeterminate,
+        value,
+        max,
+    }));
+    if (hasLabel) {
+        const spinnerLabel = document.createElement('span');
+        spinnerLabel.className = 'gids-spinner__label';
+        spinnerLabel.textContent = label || '';
+        spinner.appendChild(spinnerLabel);
+    }
+    if (hasSupportingText) {
+        const spinnerSupportingText = document.createElement('span');
+        spinnerSupportingText.className = 'gids-spinner__supporting-text';
+        spinnerSupportingText.textContent = supportingText || '';
+        spinner.appendChild(spinnerSupportingText);
+    }
+    return spinner;
+};
+//# sourceMappingURL=GidsSpinner.js.map

package/dist/components/GidsSpinner/GidsSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsSpinner.js","sourceRoot":"","sources":["../../../src/components/GidsSpinner/GidsSpinner.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,sBAAsB,GACtB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAEN,mBAAmB,GACnB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAElF,MAAM,EAAE,wBAAwB,EAAE,GAAG,mBAAmB,CAAC;AACzD,MAAM,EAAE,oBAAoB,EAAE,GAAG,sBAAsB,CAAC;AAMxD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC9B,KAAK,EACL,cAAc,EACd,IAAI,EACJ,aAAa,EACb,KAAK,EACL,GAAG,EACH,SAAS,GACY,EAAmB,EAAE;IAC1C,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAE/C,MAAM,EAAE,QAAQ,EAAE,iBAAiB,EAAE,GAAG,oBAAoB,CAAC;QAC5D,KAAK;QACL,cAAc;KACd,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,GAAG,wBAAwB,CAAC,EAAE,IAAI,EAAE,EAAE,SAAS,CAAC,CAAC;IAElE,OAAO,CAAC,WAAW,CAClB,qBAAqB,CAAC;QACrB,IAAI;QACJ,aAAa;QACb,KAAK;QACL,GAAG;KACH,CAAC,CACF,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACd,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACpD,YAAY,CAAC,SAAS,GAAG,qBAAqB,CAAC;QAC/C,YAAY,CAAC,WAAW,GAAG,KAAK,IAAI,EAAE,CAAC;QACvC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IACnC,CAAC;IAED,IAAI,iBAAiB,EAAE,CAAC;QACvB,MAAM,qBAAqB,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC7D,qBAAqB,CAAC,SAAS,GAAG,+BAA+B,CAAC;QAClE,qBAAqB,CAAC,WAAW,GAAG,cAAc,IAAI,EAAE,CAAC;QACzD,OAAO,CAAC,WAAW,CAAC,qBAAqB,CAAC,CAAC;IAC5C,CAAC;IAED,OAAO,OAAO,CAAC;AAChB,CAAC,CAAC"}

package/dist/components/GidsToggleButton/GidsToggleButton.d.ts

@@ -0,0 +1,13 @@
+import { type GidsToggleButtonWebProps } from '@ganpatiinfo/gids-web-shared';
+import { type DomChildren } from '../../utils/domUtils';
+export interface GidsToggleButtonDomProps extends GidsToggleButtonWebProps<DomChildren> {
+    onClick?: (this: HTMLElement, ev: MouseEvent) => void;
+    onSelect?: (this: HTMLElement, ev: CustomEvent<boolean>) => void;
+}
+declare global {
+    interface HTMLElementEventMap {
+        select: CustomEvent<boolean>;
+    }
+}
+export declare const GidsToggleButtonDom: ({ appearance, size, width, defaultSelected, disabled, selected, children, onClick, onSelect, }: GidsToggleButtonDomProps) => HTMLElement;
+//# sourceMappingURL=GidsToggleButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GidsToggleButton.d.ts","sourceRoot":"","sources":["../../../src/components/GidsToggleButton/GidsToggleButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAC7E,OAAO,EAGN,KAAK,WAAW,EAChB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,WAAW,wBAChB,SAAQ,wBAAwB,CAAC,WAAW,CAAC;IAC7C,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,UAAU,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,EAAE,WAAW,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC;CACjE;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,mBAAmB;QAC5B,MAAM,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;KAC7B;CACD;AAED,eAAO,MAAM,mBAAmB,GAAI,gGAUjC,wBAAwB,gBA4B1B,CAAC"}

package/dist/components/GidsToggleButton/GidsToggleButton.js

@@ -0,0 +1,26 @@
+import { appendAsChildren, toggleAttribute, } from '../../utils/domUtils';
+export const GidsToggleButtonDom = ({ appearance, size, width, defaultSelected, disabled, selected, children, onClick, onSelect, }) => {
+    const toggleButton = document.createElement('gids-toggle-button');
+    if (appearance !== undefined) {
+        toggleButton.setAttribute('appearance', appearance);
+    }
+    if (size !== undefined) {
+        toggleButton.setAttribute('size', size);
+    }
+    if (width !== undefined) {
+        toggleButton.setAttribute('width', width);
+    }
+    toggleAttribute(toggleButton, 'disabled', !!disabled);
+    toggleAttribute(toggleButton, 'default-selected', !!defaultSelected);
+    // @ts-expect-error
+    toggleButton.selected = selected;
+    appendAsChildren(toggleButton, children);
+    if (onClick) {
+        toggleButton.addEventListener('click', onClick);
+    }
+    if (onSelect) {
+        toggleButton.addEventListener('select', onSelect);
+    }
+    return toggleButton;
+};
+//# sourceMappingURL=GidsToggleButton.js.map

package/dist/components/GidsToggleButton/GidsToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsToggleButton.js","sourceRoot":"","sources":["../../../src/components/GidsToggleButton/GidsToggleButton.ts"],"names":[],"mappings":"AACA,OAAO,EACN,gBAAgB,EAChB,eAAe,GAEf,MAAM,sBAAsB,CAAC;AAc9B,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EACnC,UAAU,EACV,IAAI,EACJ,KAAK,EACL,eAAe,EACf,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,GACkB,EAAE,EAAE;IAC9B,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAClE,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;QAC9B,YAAY,CAAC,YAAY,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IACrD,CAAC;IACD,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;QACxB,YAAY,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACzC,CAAC;IACD,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACzB,YAAY,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAC3C,CAAC;IACD,eAAe,CAAC,YAAY,EAAE,UAAU,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;IACtD,eAAe,CAAC,YAAY,EAAE,kBAAkB,EAAE,CAAC,CAAC,eAAe,CAAC,CAAC;IAErE,mBAAmB;IACnB,YAAY,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAEjC,gBAAgB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAEzC,IAAI,OAAO,EAAE,CAAC;QACb,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACjD,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACd,YAAY,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IACnD,CAAC;IAED,OAAO,YAAY,CAAC;AACrB,CAAC,CAAC"}

package/dist/components/_GidsSpinnerControl/GidsSpinnerControl.d.ts

@@ -0,0 +1,7 @@
+import { type GidsSpinnerControlCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { type ClassValue } from '@ganpatiinfo/gids-web-shared';
+export interface GidsSpinnerControlDomProps extends GidsSpinnerControlCommonProps {
+    className?: ClassValue;
+}
+export declare const GidsSpinnerControlDom: ({ size, indeterminate, value, max, className, }: GidsSpinnerControlDomProps) => SVGSVGElement;
+//# sourceMappingURL=GidsSpinnerControl.d.ts.map

package/dist/components/_GidsSpinnerControl/GidsSpinnerControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsSpinnerControl.d.ts","sourceRoot":"","sources":["../../../src/components/_GidsSpinnerControl/GidsSpinnerControl.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,KAAK,6BAA6B,EAElC,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACN,KAAK,UAAU,EAEf,MAAM,8BAA8B,CAAC;AAMtC,MAAM,WAAW,0BAChB,SAAQ,6BAA6B;IACrC,SAAS,CAAC,EAAE,UAAU,CAAC;CACvB;AAED,eAAO,MAAM,qBAAqB,GAAI,iDAMnC,0BAA0B,KAAG,aAmC/B,CAAC"}

package/dist/components/_GidsSpinnerControl/GidsSpinnerControl.js

@@ -0,0 +1,31 @@
+import { GidsSpinnerControlCommonUtils, } from '@ganpatiinfo/gids-core-shared';
+import { GidsSpinnerControlWebUtils, } from '@ganpatiinfo/gids-web-shared';
+const { getGidsSpinnerControlClassNames } = GidsSpinnerControlWebUtils;
+const { calculateStrokeDasharray, thickness, radius, centerPosition, viewBox } = GidsSpinnerControlCommonUtils;
+export const GidsSpinnerControlDom = ({ size, indeterminate, value, max, className, }) => {
+    const svgNamespace = 'http://www.w3.org/2000/svg';
+    const spinnerControlWrapper = document.createElementNS(svgNamespace, 'svg');
+    spinnerControlWrapper.setAttribute('class', getGidsSpinnerControlClassNames({ size, indeterminate, value }, className));
+    spinnerControlWrapper.setAttribute('viewBox', viewBox);
+    const track = document.createElementNS(svgNamespace, 'circle');
+    track.classList.add('gids-spinner-control__track');
+    track.setAttribute('cx', centerPosition.toString());
+    track.setAttribute('cy', centerPosition.toString());
+    track.setAttribute('r', radius.toString());
+    track.setAttribute('stroke-width', thickness.toString());
+    const shape = document.createElementNS(svgNamespace, 'circle');
+    shape.classList.add('gids-spinner-control__progress');
+    shape.setAttribute('cx', centerPosition.toString());
+    shape.setAttribute('cy', centerPosition.toString());
+    shape.setAttribute('r', radius.toString());
+    shape.setAttribute('stroke-width', thickness.toString());
+    if (!indeterminate) {
+        const dashArray = calculateStrokeDasharray(value, max ? max : 0);
+        shape.style.strokeDasharray = dashArray;
+        shape.style.strokeDashoffset = '0';
+    }
+    spinnerControlWrapper.appendChild(track);
+    spinnerControlWrapper.appendChild(shape);
+    return spinnerControlWrapper;
+};
+//# sourceMappingURL=GidsSpinnerControl.js.map

package/dist/components/_GidsSpinnerControl/GidsSpinnerControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GidsSpinnerControl.js","sourceRoot":"","sources":["../../../src/components/_GidsSpinnerControl/GidsSpinnerControl.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,6BAA6B,GAC7B,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAEN,0BAA0B,GAC1B,MAAM,8BAA8B,CAAC;AAEtC,MAAM,EAAE,+BAA+B,EAAE,GAAG,0BAA0B,CAAC;AACvE,MAAM,EAAE,wBAAwB,EAAE,SAAS,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,GAC7E,6BAA6B,CAAC;AAO/B,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EACrC,IAAI,EACJ,aAAa,EACb,KAAK,EACL,GAAG,EACH,SAAS,GACmB,EAAiB,EAAE;IAC/C,MAAM,YAAY,GAAG,4BAA4B,CAAC;IAClD,MAAM,qBAAqB,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IAE5E,qBAAqB,CAAC,YAAY,CACjC,OAAO,EACP,+BAA+B,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,SAAS,CAAC,CAC1E,CAAC;IACF,qBAAqB,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAEvD,MAAM,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAC/D,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAC;IACnD,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC;IACpD,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC;IACpD,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC3C,KAAK,CAAC,YAAY,CAAC,cAAc,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;IAEzD,MAAM,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IAC/D,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,gCAAgC,CAAC,CAAC;IACtD,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC;IACpD,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC;IACpD,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC3C,KAAK,CAAC,YAAY,CAAC,cAAc,EAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;IAEzD,IAAI,CAAC,aAAa,EAAE,CAAC;QACpB,MAAM,SAAS,GAAG,wBAAwB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAEjE,KAAK,CAAC,KAAK,CAAC,eAAe,GAAG,SAAS,CAAC;QACxC,KAAK,CAAC,KAAK,CAAC,gBAAgB,GAAG,GAAG,CAAC;IACpC,CAAC;IAED,qBAAqB,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACzC,qBAAqB,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAEzC,OAAO,qBAAqB,CAAC;AAC9B,CAAC,CAAC"}

package/dist/index.d.ts

@@ -3,6 +3,11 @@
  */
 export * from './components/GidsDivider/GidsDivider';
 export * from './components/GidsDisplayTag/GidsDisplayTag';
+export * from './components/_GidsSpinnerControl/GidsSpinnerControl';
+export * from './components/GidsSpinner/GidsSpinner';
+export * from './components/GidsIcon/GidsIcon';
+export * from './components/GidsButton/GidsButton';
+export * from './components/GidsToggleButton/GidsToggleButton';
 /**
  * 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,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAE3D;;GAEG;AACH,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,qDAAqD,CAAC;AACpE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAE/D;;GAEG;AACH,cAAc,kBAAkB,CAAC"}

package/dist/index.js

@@ -3,6 +3,11 @@
  */
 export * from './components/GidsDivider/GidsDivider';
 export * from './components/GidsDisplayTag/GidsDisplayTag';
+export * from './components/_GidsSpinnerControl/GidsSpinnerControl';
+export * from './components/GidsSpinner/GidsSpinner';
+export * from './components/GidsIcon/GidsIcon';
+export * from './components/GidsButton/GidsButton';
+export * from './components/GidsToggleButton/GidsToggleButton';
 /**
  * Utilities
  */

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAE3D;;GAEG;AACH,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,qDAAqD,CAAC;AACpE,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAE/D;;GAEG;AACH,cAAc,kBAAkB,CAAC"}

package/package.json

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

package/src/components/GidsButton/GidsButton.ts

@@ -0,0 +1,89 @@
+import {
+	GidsButtonWebUtils,
+	nonEmpty,
+	PermittedGidsButtonElements,
+	type GidsButtonWebProps,
+} from '@ganpatiinfo/gids-web-shared';
+import { GidsSpinnerControlDom } from '../_GidsSpinnerControl/GidsSpinnerControl';
+import { appendAsChildren, type DomChildren } from '../../utils/domUtils';
+
+const { getGidsButtonClassNames } = GidsButtonWebUtils;
+
+export interface GidsButtonDomProps<
+	ButtonElement extends PermittedGidsButtonElements,
+> extends GidsButtonWebProps<DomChildren, DomChildren, ButtonElement> {
+	type?: 'button' | 'submit' | 'reset';
+	href?: string;
+	onClick?: (this: HTMLButtonElement, event: Event) => void;
+}
+
+export const GidsButtonDom = <
+	ButtonElement extends PermittedGidsButtonElements = 'button',
+>({
+	as,
+	appearance,
+	size,
+	disabled,
+	destructive,
+	loading,
+	width,
+	children,
+	leadingIcon,
+	trailingIcon,
+	type,
+	href,
+	onClick,
+}: GidsButtonDomProps<ButtonElement>): ButtonElement extends 'button'
+	? HTMLButtonElement
+	: HTMLAnchorElement => {
+	const button = document.createElement(
+		as || 'button',
+	) as ButtonElement extends 'button' ? HTMLButtonElement : HTMLAnchorElement;
+
+	button.className = getGidsButtonClassNames(
+		{ appearance, size, width, destructive, loading },
+		!children && nonEmpty(leadingIcon) && !nonEmpty(trailingIcon),
+	);
+
+	if (as !== 'a') {
+		button.setAttribute('type', type ?? 'button');
+
+		if (disabled) {
+			button.setAttribute('disabled', '');
+		} else {
+			button.removeAttribute('disabled');
+		}
+	}
+
+	if (as === 'a') {
+		if (href) {
+			button.setAttribute('href', href);
+		}
+	}
+
+	const content = document.createElement('span');
+	content.classList.add('gids-button__content');
+
+	appendAsChildren(content, leadingIcon);
+
+	appendAsChildren(content, children);
+
+	button.appendChild(content);
+
+	appendAsChildren(button, trailingIcon);
+
+	if (loading) {
+		button.appendChild(
+			GidsSpinnerControlDom({
+				size: size === 'lg' || size === undefined ? 'md' : size,
+                indeterminate: true
+			}),
+		);
+	}
+
+    if (onClick && !loading) {
+        button.addEventListener('click', onClick)
+    }
+
+	return button;
+};

package/src/components/GidsIcon/GidsIcon.ts

@@ -0,0 +1,54 @@
+import {
+	type IconName,
+	type IconAppearance,
+	getIconGlyphUrl,
+} from '@ganpatiinfo/gids-web-theme-interface';
+import {
+	generateId,
+	getGidsAssetFilePath,
+	GidsIconWebUtils,
+	type GidsIconWebProps,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsIconClassNames } = GidsIconWebUtils;
+
+export interface GidsIconDomProps
+	extends GidsIconWebProps<IconName, IconAppearance> {
+	className?: string;
+}
+
+export const GidsIconDom = ({
+	size,
+	name,
+	appearance,
+	alt,
+	titleId,
+	className,
+}: GidsIconDomProps): SVGSVGElement => {
+	const svgNamespace = 'http://www.w3.org/2000/svg';
+	const icon = document.createElementNS(svgNamespace, 'svg');
+	icon.setAttribute('class', getGidsIconClassNames({ size }, className));
+	icon.setAttribute('width', '16');
+	icon.setAttribute('height', '16');
+	icon.setAttribute('role', 'img');
+
+	if (alt === '') {
+		icon.setAttribute('aria-hidden', 'true');
+	} else {
+		const title = document.createElementNS(svgNamespace, 'title');
+		title.textContent = alt || name;
+		const titleElementId = generateId(titleId);
+		title.setAttribute('id', titleElementId);
+		icon.insertBefore(title, icon.firstChild);
+		icon.setAttribute('aria-labelledby', titleElementId);
+	}
+
+	const use = document.createElementNS(svgNamespace, 'use');
+	use.setAttribute(
+		'href',
+		getIconGlyphUrl(name, appearance, getGidsAssetFilePath),
+	);
+	icon.appendChild(use);
+
+	return icon;
+};

package/src/components/GidsSpinner/GidsSpinner.ts

@@ -0,0 +1,60 @@
+import {
+	type GidsSpinnerCommonProps,
+	GidsSpinnerCommonUtils,
+} from '@ganpatiinfo/gids-core-shared';
+import {
+	type ClassValue,
+	GidsSpinnerWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { GidsSpinnerControlDom } from '../_GidsSpinnerControl/GidsSpinnerControl';
+
+const { getGidsSpinnerClassNames } = GidsSpinnerWebUtils;
+const { getElementVisibility } = GidsSpinnerCommonUtils;
+
+export interface GidsSpinnerDomProps extends GidsSpinnerCommonProps {
+	className?: ClassValue;
+}
+
+export const GidsSpinnerDom = ({
+	label,
+	supportingText,
+	size,
+	indeterminate,
+	value,
+	max,
+	className,
+}: GidsSpinnerDomProps): HTMLSpanElement => {
+	const spinner = document.createElement('span');
+
+	const { hasLabel, hasSupportingText } = getElementVisibility({
+		label,
+		supportingText,
+	});
+
+	spinner.className = getGidsSpinnerClassNames({ size }, className);
+
+	spinner.appendChild(
+		GidsSpinnerControlDom({
+			size,
+			indeterminate,
+			value,
+			max,
+		}),
+	);
+
+	if (hasLabel) {
+		const spinnerLabel = document.createElement('span');
+		spinnerLabel.className = 'gids-spinner__label';
+		spinnerLabel.textContent = label || '';
+		spinner.appendChild(spinnerLabel);
+	}
+
+	if (hasSupportingText) {
+		const spinnerSupportingText = document.createElement('span');
+		spinnerSupportingText.className = 'gids-spinner__supporting-text';
+		spinnerSupportingText.textContent = supportingText || '';
+		spinner.appendChild(spinnerSupportingText);
+	}
+
+	return spinner;
+};

package/src/components/GidsToggleButton/GidsToggleButton.ts

@@ -0,0 +1,58 @@
+import { type GidsToggleButtonWebProps } from '@ganpatiinfo/gids-web-shared';
+import {
+	appendAsChildren,
+	toggleAttribute,
+	type DomChildren,
+} from '../../utils/domUtils';
+
+export interface GidsToggleButtonDomProps
+	extends GidsToggleButtonWebProps<DomChildren> {
+	onClick?: (this: HTMLElement, ev: MouseEvent) => void;
+	onSelect?: (this: HTMLElement, ev: CustomEvent<boolean>) => void;
+}
+
+declare global {
+	interface HTMLElementEventMap {
+		select: CustomEvent<boolean>;
+	}
+}
+
+export const GidsToggleButtonDom = ({
+	appearance,
+	size,
+	width,
+	defaultSelected,
+	disabled,
+	selected,
+	children,
+	onClick,
+	onSelect,
+}: GidsToggleButtonDomProps) => {
+	const toggleButton = document.createElement('gids-toggle-button');
+	if (appearance !== undefined) {
+		toggleButton.setAttribute('appearance', appearance);
+	}
+	if (size !== undefined) {
+		toggleButton.setAttribute('size', size);
+	}
+	if (width !== undefined) {
+		toggleButton.setAttribute('width', width);
+	}
+	toggleAttribute(toggleButton, 'disabled', !!disabled);
+	toggleAttribute(toggleButton, 'default-selected', !!defaultSelected);
+
+	// @ts-expect-error
+	toggleButton.selected = selected;
+
+	appendAsChildren(toggleButton, children);
+
+	if (onClick) {
+		toggleButton.addEventListener('click', onClick);
+	}
+
+	if (onSelect) {
+		toggleButton.addEventListener('select', onSelect);
+	}
+
+	return toggleButton;
+};

package/src/components/_GidsSpinnerControl/GidsSpinnerControl.ts

@@ -0,0 +1,60 @@
+import {
+	type GidsSpinnerControlCommonProps,
+	GidsSpinnerControlCommonUtils,
+} from '@ganpatiinfo/gids-core-shared';
+import {
+	type ClassValue,
+	GidsSpinnerControlWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+
+const { getGidsSpinnerControlClassNames } = GidsSpinnerControlWebUtils;
+const { calculateStrokeDasharray, thickness, radius, centerPosition, viewBox } =
+	GidsSpinnerControlCommonUtils;
+
+export interface GidsSpinnerControlDomProps
+	extends GidsSpinnerControlCommonProps {
+	className?: ClassValue;
+}
+
+export const GidsSpinnerControlDom = ({
+	size,
+	indeterminate,
+	value,
+	max,
+	className,
+}: GidsSpinnerControlDomProps): SVGSVGElement => {
+	const svgNamespace = 'http://www.w3.org/2000/svg';
+	const spinnerControlWrapper = document.createElementNS(svgNamespace, 'svg');
+
+	spinnerControlWrapper.setAttribute(
+		'class',
+		getGidsSpinnerControlClassNames({ size, indeterminate, value }, className),
+	);
+	spinnerControlWrapper.setAttribute('viewBox', viewBox);
+
+	const track = document.createElementNS(svgNamespace, 'circle');
+	track.classList.add('gids-spinner-control__track');
+	track.setAttribute('cx', centerPosition.toString());
+	track.setAttribute('cy', centerPosition.toString());
+	track.setAttribute('r', radius.toString());
+	track.setAttribute('stroke-width', thickness.toString());
+
+	const shape = document.createElementNS(svgNamespace, 'circle');
+	shape.classList.add('gids-spinner-control__progress');
+	shape.setAttribute('cx', centerPosition.toString());
+	shape.setAttribute('cy', centerPosition.toString());
+	shape.setAttribute('r', radius.toString());
+	shape.setAttribute('stroke-width', thickness.toString());
+
+	if (!indeterminate) {
+		const dashArray = calculateStrokeDasharray(value, max ? max : 0);
+
+		shape.style.strokeDasharray = dashArray;
+		shape.style.strokeDashoffset = '0';
+	}
+
+	spinnerControlWrapper.appendChild(track);
+	spinnerControlWrapper.appendChild(shape);
+
+	return spinnerControlWrapper;
+};

package/src/index.ts

@@ -3,6 +3,11 @@
  */
 export * from './components/GidsDivider/GidsDivider';
 export * from './components/GidsDisplayTag/GidsDisplayTag';
+export * from './components/_GidsSpinnerControl/GidsSpinnerControl';
+export * from './components/GidsSpinner/GidsSpinner';
+export * from './components/GidsIcon/GidsIcon';
+export * from './components/GidsButton/GidsButton';
+export * from './components/GidsToggleButton/GidsToggleButton';
 
 /**
  * Utilities