@ganpatiinfo/gids-web-dom-reference 3.1.0 → 4.0.0

package/dist/index.js

@@ -40,6 +40,25 @@ export * from './components/_GidsPaginationItem/GidsPaginationItem.js';
 export * from './components/GidsPagination/GidsPagination.js';
 export * from './components/GidsSegmentedTabItem/GidsSegmentedTabItem.js';
 export * from './components/GidsSegmentedControl/GidsSegmentedControl.js';
+export * from './components/GidsLogo/GidsLogo.js';
+export * from './components/GidsDismissButton/GidsDismissButton.js';
+export * from './components/GidsInput/GidsInput.js';
+export * from './components/GidsField/GidsField.js';
+export * from './components/GidsTextField/GidsTextField.js';
+export * from './components/GidsSearchBar/GidsSearchBar.js';
+export * from './components/GidsTopNavigation/GidsTopNavigation.js';
+export * from './components/GidsStrengthMeter/GidsStrengthMeter.js';
+export * from './components/_GidsRequirementsMeterLabel/GidsRequirementsMeterLabel.js';
+export * from './components/GidsRequirementsMeter/GidsRequirementsMeter.js';
+export * from './components/GidsStepper/GidsStepper.js';
+export * from './components/GidsStatusTag/GidsStatusTag.js';
+export * from './components/GidsHeading/GidsHeading.js';
+export * from './components/GidsPasswordField/GidsPasswordField.js';
+export * from './components/_GidsSnackbarContainer/GidsSnackbarContainer.js';
+export * from './components/GidsOverlayProvider/GidsOverlayProvider.js';
+export * from './components/GidsSnackbar/GidsSnackbar.js';
+export * from './components/_GidsNotificationContainer/GidsNotificationContainer.js';
+export * from './components/GidsNotification/GidsNotification.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;AAC1D,cAAc,iDAAiD,CAAC;AAChE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,uDAAuD,CAAC;AACtE,cAAc,iCAAiC,CAAC;AAChD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uDAAuD,CAAC;AACtE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,wDAAwD,CAAC;AACvE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,2DAA2D,CAAC;AAE1E;;GAEG;AACH,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,uCAAuC,CAAC;AACtD,cAAc,yCAAyC,CAAC;AACxD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,mCAAmC,CAAC;AAClD,cAAc,uDAAuD,CAAC;AACtE,cAAc,qCAAqC,CAAC;AACpD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wDAAwD,CAAC;AACvE,cAAc,yCAAyC,CAAC;AACxD,cAAc,mDAAmD,CAAC;AAClE,cAAc,0DAA0D,CAAC;AACzE,cAAc,oDAAoD,CAAC;AACnE,cAAc,sDAAsD,CAAC;AACrE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,qDAAqD,CAAC;AACpE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,iDAAiD,CAAC;AAChE,cAAc,qCAAqC,CAAC;AACpD,cAAc,uCAAuC,CAAC;AACtD,cAAc,iDAAiD,CAAC;AAChE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,qEAAqE,CAAC;AACpF,cAAc,2CAA2C,CAAC;AAC1D,cAAc,iDAAiD,CAAC;AAChE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qDAAqD,CAAC;AACpE,cAAc,uDAAuD,CAAC;AACtE,cAAc,iCAAiC,CAAC;AAChD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uDAAuD,CAAC;AACtE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,mCAAmC,CAAC;AAClD,cAAc,wDAAwD,CAAC;AACvE,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2DAA2D,CAAC;AAC1E,cAAc,2DAA2D,CAAC;AAC1E,cAAc,mCAAmC,CAAC;AAClD,cAAc,qDAAqD,CAAC;AACpE,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,qDAAqD,CAAC;AACpE,cAAc,qDAAqD,CAAC;AACpE,cAAc,wEAAwE,CAAC;AACvF,cAAc,6DAA6D,CAAC;AAC5E,cAAc,yCAAyC,CAAC;AACxD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,yCAAyC,CAAC;AACxD,cAAc,qDAAqD,CAAC;AACpE,cAAc,8DAA8D,CAAC;AAC7E,cAAc,yDAAyD,CAAC;AACxE,cAAc,2CAA2C,CAAC;AAC1D,cAAc,sEAAsE,CAAC;AACrF,cAAc,mDAAmD,CAAC;AAElE;;GAEG;AACH,cAAc,qBAAqB,CAAC"}

package/dist/utils/domUtils.d.ts

@@ -9,4 +9,6 @@ export declare const applyStatefulInputProps: (inputElement: HTMLInputElement, {
     checked?: boolean;
     defaultChecked?: boolean;
 }) => void;
+export declare const htmlToDomChildren: (html: DomChildren | undefined) => DomChildren | undefined;
+export declare const assignToSlot: (parent: Element, slotName: string, element?: Element) => void;
 //# sourceMappingURL=domUtils.d.ts.map

package/dist/utils/domUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"domUtils.d.ts","sourceRoot":"","sources":["../../src/utils/domUtils.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,MAAM,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,eAAe,EAAE,CAAC;AAE9D,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,eAAe,GAAG,eAAe,EACzE,aAAa,CAAC,GAAG,CAAC,EAAE,GAAG,SAAS,KAC9B,CAAC,EAKH,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC5B,QAAQ,OAAO,EACf,UAAU,WAAW,GAAG,SAAS,KAC/B,IAIF,CAAC;AAEF,eAAO,MAAM,eAAe,GAC3B,SAAS,OAAO,EAChB,eAAe,MAAM,EACrB,QAAQ,OAAO,KACb,OAYF,CAAC;AAEF,eAAO,MAAM,uBAAuB,GACnC,cAAc,gBAAgB,EAC9B,mDAKG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB,KACC,IAaF,CAAC"}
+{"version":3,"file":"domUtils.d.ts","sourceRoot":"","sources":["../../src/utils/domUtils.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,MAAM,CAAC;AAE5C,MAAM,MAAM,WAAW,GAAG,eAAe,GAAG,eAAe,EAAE,CAAC;AAE9D,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,eAAe,GAAG,eAAe,EACxE,aAAa,CAAC,GAAG,CAAC,EAAE,GAAG,SAAS,KAC/B,CAAC,EAKH,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAC3B,QAAQ,OAAO,EACf,UAAU,WAAW,GAAG,SAAS,KAChC,IAIF,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,SAAS,OAAO,EAChB,eAAe,MAAM,EACrB,QAAQ,OAAO,KACd,OAYF,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAClC,cAAc,gBAAgB,EAC9B,mDAKG;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,KACA,IAaF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,MAAM,WAAW,GAAG,SAAS,KAC5B,WAAW,GAAG,SAYhB,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,QAAQ,OAAO,EACf,UAAU,MAAM,EAChB,UAAU,OAAO,KAChB,IAKF,CAAC"}

package/dist/utils/domUtils.js

@@ -38,4 +38,21 @@ export const applyStatefulInputProps = (inputElement, { value, defaultValue, che
         inputElement.defaultChecked = defaultChecked;
     }
 };
+export const htmlToDomChildren = (html) => {
+    if (Array.isArray(html)) {
+        return html.flatMap(htmlToDomChildren).filter((x) => x !== undefined);
+    }
+    if (typeof html === 'string') {
+        const template = document.createElement('template');
+        template.innerHTML = html;
+        return Array.from(template.content.childNodes);
+    }
+    return html;
+};
+export const assignToSlot = (parent, slotName, element) => {
+    if (element) {
+        element.slot = slotName;
+        parent.appendChild(element);
+    }
+};
 //# sourceMappingURL=domUtils.js.map

package/dist/utils/domUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"domUtils.js","sourceRoot":"","sources":["../../src/utils/domUtils.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,cAAc,GAAG,CAC7B,WAAgC,EAC1B,EAAE;IACR,IAAI,WAAW,KAAK,SAAS,EAAE,CAAC;QAC/B,OAAO,EAAE,CAAC;IACX,CAAC;IACD,OAAO,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;AACjE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC/B,MAAe,EACf,QAAiC,EAC1B,EAAE;IACT,cAAc,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;QAC1C,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAC9B,OAAgB,EAChB,aAAqB,EACrB,KAAe,EACL,EAAE;IACZ,IAAI,OAAO,OAAO,CAAC,eAAe,KAAK,UAAU,EAAE,CAAC;QACnD,OAAO,OAAO,CAAC,eAAe,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IACtD,CAAC;SAAM,CAAC;QACP,IAAI,OAAO,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACnD,OAAO,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;YACvC,OAAO,KAAK,CAAC;QACd,CAAC;aAAM,CAAC;YACP,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;YACxC,OAAO,IAAI,CAAC;QACb,CAAC;IACF,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACtC,YAA8B,EAC9B,EACC,KAAK,EACL,YAAY,EACZ,OAAO,EACP,cAAc,GAMd,EACM,EAAE;IACT,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACzB,YAAY,CAAC,KAAK,GAAG,KAAK,CAAC;IAC5B,CAAC;IACD,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;QAChC,YAAY,CAAC,YAAY,GAAG,YAAY,CAAC;IAC1C,CAAC;IACD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC3B,YAAY,CAAC,OAAO,GAAG,OAAO,CAAC;IAChC,CAAC;IACD,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;QAClC,YAAY,CAAC,cAAc,GAAG,cAAc,CAAC;IAC9C,CAAC;AACF,CAAC,CAAC"}
+{"version":3,"file":"domUtils.js","sourceRoot":"","sources":["../../src/utils/domUtils.ts"],"names":[],"mappings":"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"}

package/package.json

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

package/src/components/GidsDismissButton/GidsDismissButton.ts

@@ -0,0 +1,45 @@
+import { type GidsDismissButtonCommonProps } from '@ganpatiinfo/gids-core-shared';
+import {
+  type ClassValue,
+  GidsDismissButtonWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import { GidsIconDom } from '../GidsIcon/GidsIcon.js';
+import { toggleAttribute } from '../../utils/domUtils.js';
+
+const { getGidsDismissButtonClassNames } = GidsDismissButtonWebUtils;
+
+export interface GidsDismissButtonDomProps extends GidsDismissButtonCommonProps {
+  onPressDismiss?: (this: HTMLButtonElement, event: Event) => void;
+  extraClasses?: ClassValue;
+}
+
+export const GidsDismissButtonDom = ({
+  appearance = 'subtle',
+  size = 'md',
+  disabled = false,
+  extraClasses,
+  onPressDismiss,
+  label,
+}: GidsDismissButtonDomProps): HTMLButtonElement => {
+  const buttonElement = document.createElement('button');
+  buttonElement.className = getGidsDismissButtonClassNames(
+    { appearance, size },
+    extraClasses,
+  );
+  buttonElement.type = 'button';
+  buttonElement.setAttribute('aria-label', label);
+  toggleAttribute(buttonElement, 'disabled', disabled);
+
+  buttonElement.append(
+    GidsIconDom({
+      name: 'cross',
+      appearance: 'regular',
+    }),
+  );
+
+  if (onPressDismiss) {
+    buttonElement.addEventListener('click', onPressDismiss);
+  }
+
+  return buttonElement;
+};

package/src/components/GidsField/GidsField.ts

@@ -0,0 +1,55 @@
+import { type GidsFieldWebProps } from '@ganpatiinfo/gids-web-shared';
+import {
+  appendAsChildren,
+  toggleAttribute,
+  type DomChildren,
+} from '../../utils/domUtils.js';
+
+export interface GidsFieldDomProps extends GidsFieldWebProps<
+  DomChildren,
+  DomChildren
+> {
+  extraClasses?: string;
+}
+
+export const GidsFieldDom = ({
+  children,
+  count,
+  disabled,
+  label,
+  helperText,
+  statusText,
+  status,
+  extraClasses,
+}: GidsFieldDomProps): HTMLElement => {
+  const field = document.createElement('gids-field');
+
+  if (count !== undefined) {
+    field.setAttribute('count', count);
+  } else {
+    field.removeAttribute('count');
+  }
+
+  if (helperText !== undefined) {
+    field.setAttribute('helper-text', helperText);
+  }
+
+  if (statusText !== undefined) {
+    field.setAttribute('status-text', statusText);
+  }
+
+  if (status !== undefined) {
+    field.setAttribute('status', status);
+  }
+
+  toggleAttribute(field, 'disabled', disabled);
+
+  appendAsChildren(field, label);
+  appendAsChildren(field, children);
+
+  if (extraClasses) {
+    field.className = extraClasses;
+  }
+
+  return field;
+};

package/src/components/GidsHeading/GidsHeading.ts

@@ -0,0 +1,72 @@
+import { GidsHeadingCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { GidsHeadingWebUtils } from '@ganpatiinfo/gids-web-shared';
+import {
+  appendAsChildren,
+  DomChildren,
+  DomNodeOrString,
+} from '../../utils/domUtils.js';
+import { GidsButtonGroupDom } from '../GidsButtonGroup/GidsButtonGroup.js';
+
+const { getGidsHeadingClassNames } = GidsHeadingWebUtils;
+
+export interface GidsHeadingDomProps extends GidsHeadingCommonProps<
+  DomChildren,
+  DomNodeOrString
+> {
+  extraClasses?: string;
+}
+
+export const GidsHeadingDom = (props: GidsHeadingDomProps): HTMLDivElement => {
+  const {
+    heading,
+    supportingText,
+    level = 'section',
+    children,
+    extraClasses,
+  } = props;
+
+  const headingContainer = document.createElement('div');
+  headingContainer.className = getGidsHeadingClassNames(extraClasses);
+
+  const contentContainer = document.createElement('div');
+  contentContainer.className = 'gids-heading__content-container';
+  if (heading) {
+    if (typeof heading === 'string') {
+      const headingEl = document.createElement('span');
+      headingEl.className =
+        level === 'section'
+          ? 'gids-heading__heading-text-section'
+          : 'gids-heading__heading-text-group';
+      headingEl.textContent = heading;
+
+      appendAsChildren(contentContainer, headingEl);
+    } else {
+      contentContainer.append(heading);
+    }
+  }
+
+  if (supportingText) {
+    if (typeof supportingText === 'string') {
+      const supportingTextEl = document.createElement('span');
+      supportingTextEl.className =
+        level === 'section'
+          ? 'gids-heading__supporting-text-section'
+          : 'gids-heading__supporting-text-group';
+      supportingTextEl.textContent = supportingText;
+
+      appendAsChildren(contentContainer, supportingTextEl);
+    } else {
+      contentContainer.append(supportingText);
+    }
+  }
+
+  headingContainer.appendChild(contentContainer);
+
+  if (children) {
+    headingContainer.append(
+      GidsButtonGroupDom({ children: children, layout: 'wrap' }),
+    );
+  }
+
+  return headingContainer;
+};

package/src/components/GidsInput/GidsInput.ts

@@ -0,0 +1,64 @@
+import { type GidsInputWebProps } from '@ganpatiinfo/gids-web-shared';
+import { assignToSlot } from '../../utils/domUtils.js';
+
+export interface HtmlInputAttributes {
+  id?: string;
+  placeholder?: string;
+  pattern?: string;
+  autocompleted?: string;
+  type?: string;
+  maxlength?: number;
+}
+
+export interface GidsInputDomProps extends GidsInputWebProps<
+  Element,
+  HtmlInputAttributes
+> {
+  onChange?: (this: HTMLInputElement, event: Event) => void;
+  onInput?: (this: HTMLInputElement, event: Event) => void;
+  onFocus?: (this: HTMLInputElement, event: Event) => void;
+  onBlur?: (this: HTMLInputElement, event: Event) => void;
+  extraClasses?: string;
+}
+
+export const GidsInputDom = ({
+  leadingIcon,
+  leadingAccessory,
+  trailingAccessory,
+  trailingIcon,
+  onChange,
+  onInput,
+  onFocus,
+  onBlur,
+  extraClasses,
+  ...rest
+}: GidsInputDomProps): HTMLElement => {
+  const input = document.createElement('gids-input');
+
+  Object.assign(input, rest);
+
+  // Elements Slot
+  assignToSlot(input, 'leadingIcon', leadingIcon);
+  assignToSlot(input, 'leadingAccessory', leadingAccessory);
+  assignToSlot(input, 'trailingAccessory', trailingAccessory);
+  assignToSlot(input, 'trailingIcon', trailingIcon);
+
+  // Event Listeners
+  if (onChange) {
+    input.addEventListener('change', onChange);
+  }
+  if (onInput) {
+    input.addEventListener('input', onInput);
+  }
+  if (onFocus) {
+    input.addEventListener('focus', onFocus);
+  }
+  if (onBlur) {
+    input.addEventListener('blur', onBlur);
+  }
+  if (extraClasses) {
+    input.className = extraClasses;
+  }
+
+  return input;
+};

package/src/components/GidsLink/GidsLink.ts

@@ -1,37 +1,37 @@
 import { type GidsLinkCommonProps } from '@ganpatiinfo/gids-core-shared';
 import { appendAsChildren, type DomChildren } from '../../utils/domUtils.js';
 import {
-	type ClassValue,
-	GidsLinkWebUtils,
+  type ClassValue,
+  GidsLinkWebUtils,
 } from '@ganpatiinfo/gids-web-shared';
 
 const { getGidsLinkClassNames } = GidsLinkWebUtils;
 
 export interface GidsLinkDomProps extends GidsLinkCommonProps<DomChildren> {
-	extraClasses?: ClassValue;
-	href?: string;
-	onClick?: (this: HTMLInputElement, event: Event) => void;
+  extraClasses?: ClassValue;
+  href?: string;
+  onClick?: (this: HTMLInputElement, event: Event) => void;
 }
 
 export const GidsLinkDom = ({
-	children,
-	size,
-	extraClasses,
-	href,
-	onClick,
+  children,
+  size,
+  extraClasses,
+  href,
+  onClick,
 }: GidsLinkDomProps): HTMLAnchorElement => {
-	const linkElement = document.createElement('a');
-	linkElement.className = getGidsLinkClassNames({ size }, extraClasses);
+  const linkElement = document.createElement('a');
+  linkElement.className = getGidsLinkClassNames({ size }, extraClasses);
 
-	appendAsChildren(linkElement, children);
+  appendAsChildren(linkElement, children);
 
-	if (href) {
-		linkElement.setAttribute('href', href);
-	}
+  if (href) {
+    linkElement.setAttribute('href', href);
+  }
 
-	if (onClick) {
-		linkElement.addEventListener('click', onClick);
-	}
+  if (onClick) {
+    linkElement.addEventListener('click', onClick);
+  }
 
-	return linkElement;
+  return linkElement;
 };

package/src/components/GidsLogo/GidsLogo.ts

@@ -0,0 +1,60 @@
+import {
+  type ClassValue,
+  type GidsLogoWebProps,
+  GidsLogoWebUtils,
+} from '@ganpatiinfo/gids-web-shared';
+import clsx from 'clsx';
+
+const { getGidsLogoClassNames } = GidsLogoWebUtils;
+
+export interface GidsLogoDomProps
+  extends
+    GidsLogoWebProps<string, string>,
+    Omit<Partial<HTMLAnchorElement>, 'href' | 'class'> {
+  extraClasses?: ClassValue;
+  imgClasses?: ClassValue;
+  imgProps?: Omit<
+    Partial<HTMLImageElement>,
+    'src' | 'alt' | 'class' | 'height'
+  >;
+}
+
+export const GidsLogoDom = ({
+  src,
+  href,
+  alt,
+  clickable,
+  extraClasses,
+  imgClasses,
+  imgProps,
+  imgHeight = '100',
+  ...restProps
+}: GidsLogoDomProps): HTMLAnchorElement => {
+  const linkElement = document.createElement('a');
+  linkElement.className = getGidsLogoClassNames(extraClasses);
+  if (restProps) {
+    Object.assign(linkElement, restProps);
+  }
+
+  if (clickable && href && href !== '') {
+    linkElement.setAttribute('href', href);
+  }
+
+  if (src && src !== '') {
+    const imgElement = document.createElement('img');
+    imgElement.className = clsx(
+      `gids-logo__img gids-logo__img-height-${imgHeight}`,
+      imgClasses,
+    );
+    imgElement.setAttribute('src', src);
+    imgElement.setAttribute('alt', alt ? alt : 'logo');
+
+    if (imgProps) {
+      Object.assign(imgElement, imgProps);
+    }
+
+    linkElement.appendChild(imgElement);
+  }
+
+  return linkElement;
+};

package/src/components/GidsNotification/GidsNotification.ts

@@ -0,0 +1,48 @@
+import { type GidsNotificationWebProps } from '@ganpatiinfo/gids-web-shared';
+
+export type GidsNotificationDomProps = GidsNotificationWebProps;
+
+export const GidsNotificationDom = ({
+  notificationTitle,
+  message,
+  pronunciation,
+  appearance = 'default',
+  show,
+  onQueueNotification,
+  buttonLabel,
+  onButtonClick,
+  position = 'bottom-center',
+  timerInMs,
+}: GidsNotificationDomProps): HTMLElement => {
+  const notification = document.createElement('gids-notification');
+
+  if (notificationTitle) {
+    notification.setAttribute('notification-title', notificationTitle);
+  }
+  if (message) {
+    notification.setAttribute('message', message);
+  }
+  if (pronunciation) {
+    notification.setAttribute('pronunciation', pronunciation);
+  }
+  if (appearance) {
+    notification.setAttribute('appearance', appearance);
+  }
+  notification.setAttribute('position', position);
+  notification.setAttribute('timer-in-ms', timerInMs ? `${timerInMs}` : '0');
+
+  notification.toggleAttribute('show', show ? show : false);
+
+  if (onQueueNotification) {
+    notification.addEventListener('queueNotification', onQueueNotification);
+  }
+  if (buttonLabel) {
+    notification.setAttribute('button-label', buttonLabel);
+  }
+  if (onButtonClick) {
+    // @ts-expect-error Expected
+    notification.onButtonClick = onButtonClick;
+  }
+
+  return notification;
+};

package/src/components/GidsOverlayProvider/GidsOverlayProvider.ts

@@ -0,0 +1,16 @@
+import { GidsOverlayProviderCommonProps } from '@ganpatiinfo/gids-core-shared';
+import { appendAsChildren, DomChildren } from '../../utils/domUtils.js';
+
+export interface GidsOverlayProviderDomProps extends GidsOverlayProviderCommonProps<DomChildren> {
+  extraClasses?: string;
+}
+
+export const GidsOverlayProviderDom = ({
+  children,
+}: GidsOverlayProviderDomProps): HTMLElement => {
+  const overlayProvider = document.createElement('gids-overlay-provider');
+
+  appendAsChildren(overlayProvider, children);
+
+  return overlayProvider;
+};

package/src/components/GidsPasswordField/GidsPasswordField.ts

@@ -0,0 +1,77 @@
+import { type GidsPasswordFieldWebProps } from '@ganpatiinfo/gids-web-shared';
+import { assignToSlot } from '../../utils/domUtils.js';
+import { type HtmlInputAttributes } from '../GidsInput/GidsInput.js';
+
+export interface GidsPasswordFieldDomProps extends GidsPasswordFieldWebProps<
+  Element,
+  HtmlInputAttributes
+> {
+  info?: Element;
+  className?: string;
+  onGidsPasswordFieldClear?: (event: CustomEvent<void>) => void;
+  onGidsPasswordFieldRevealPassword?: (
+    event: CustomEvent<{ passwordRevealed: boolean }>,
+  ) => void;
+  onChange?: (event: Event) => void;
+  onInput?: (event: InputEvent) => void;
+  onFocus?: (event: FocusEvent) => void;
+  onBlur?: (event: FocusEvent) => void;
+}
+
+export const GidsPasswordFieldDom = (
+  props: GidsPasswordFieldDomProps,
+): HTMLElement => {
+  const {
+    info,
+    leadingIcon,
+    onGidsPasswordFieldClear,
+    onGidsPasswordFieldRevealPassword,
+    onChange,
+    onInput,
+    onFocus,
+    onBlur,
+    ...restProps
+  } = props;
+
+  const passwordFieldComponent = document.createElement('gids-password-field');
+  Object.assign(passwordFieldComponent, restProps);
+  passwordFieldComponent.setAttribute('type', 'password');
+
+  assignToSlot(passwordFieldComponent, 'info', info);
+  assignToSlot(passwordFieldComponent, 'leadingIcon', leadingIcon);
+
+  if (onChange) {
+    passwordFieldComponent.addEventListener('change', onChange);
+  }
+  if (onInput) {
+    passwordFieldComponent.addEventListener(
+      'input',
+      onInput as (e: Event) => void,
+    );
+  }
+  if (onFocus) {
+    passwordFieldComponent.addEventListener('focus', onFocus);
+  }
+  if (onBlur) {
+    passwordFieldComponent.addEventListener('blur', onBlur);
+  }
+  if (onGidsPasswordFieldClear) {
+    // @ts-expect-error This is a custom event so ts complaining
+    passwordFieldComponent.addEventListener(
+      'gidsPasswordFieldClear',
+      onGidsPasswordFieldClear,
+    );
+  }
+  if (onGidsPasswordFieldRevealPassword) {
+    // @ts-expect-error This is a custom event so ts complaining
+    passwordFieldComponent.addEventListener(
+      'gidsPasswordFieldRevealPassword',
+      (event: CustomEvent) => {
+        // Stencil data is always nested inside 'detail'
+        onGidsPasswordFieldRevealPassword(event.detail);
+      },
+    );
+  }
+
+  return passwordFieldComponent;
+};

package/src/components/GidsRequirementsMeter/GidsRequirementsMeter.ts

@@ -0,0 +1,71 @@
+import {
+  type GidsRequirementsMeterCommonProps,
+  GidsRequirementsMeterCommonUtils,
+  GidsRequirementsProps,
+} from '@ganpatiinfo/gids-core-shared';
+import { GidsRequirementsMeterWebUtils } from '@ganpatiinfo/gids-web-shared';
+import { GidsRequirementsMeterLabelDom } from '../_GidsRequirementsMeterLabel/GidsRequirementsMeterLabel.js';
+import { minLengthRuleCanBeApplied } from '@ganpatiinfo/gids-core-shared/dist/components/GidsRequirementsMeter/GidsRequirementsMeterCommonUtils.js';
+
+const { getGidsRequirementsMeterClassNames } = GidsRequirementsMeterWebUtils;
+const { checkRequirementRuleSatisfied } = GidsRequirementsMeterCommonUtils;
+
+export interface GidsRequirementsMeterDomProps extends GidsRequirementsMeterCommonProps {
+  extraClasses?: string;
+}
+
+export const GidsRequirementsMeterDom = (
+  props: GidsRequirementsMeterDomProps,
+): HTMLDivElement => {
+  const { text, textMinLength, requirements = [], extraClasses } = props;
+
+  const requirementsMeter = document.createElement('div');
+  requirementsMeter.className =
+    getGidsRequirementsMeterClassNames(extraClasses);
+
+  const renderRequirements = (
+    isSatisfied: boolean,
+    requirement: GidsRequirementsProps,
+  ) => {
+    if (isSatisfied) {
+      requirementsMeter.append(
+        GidsRequirementsMeterLabelDom({
+          label: requirement.requirementText,
+          status: 'success',
+        }),
+      );
+    } else {
+      requirementsMeter.append(
+        GidsRequirementsMeterLabelDom({
+          label: requirement.requirementText,
+          status: 'error',
+        }),
+      );
+    }
+  };
+
+  requirements.map((requirement) => {
+    if (requirement?.requirementText && requirement?.requirementRule) {
+      const isSatisfied = checkRequirementRuleSatisfied({
+        rule: requirement.requirementRule,
+        textMinLength,
+        text,
+      });
+
+      if (requirement.requirementRule == 'include-min-length') {
+        if (
+          minLengthRuleCanBeApplied({
+            requirementRule: requirement.requirementRule,
+            textMinLength,
+          })
+        ) {
+          renderRequirements(isSatisfied, requirement);
+        }
+      } else {
+        renderRequirements(isSatisfied, requirement);
+      }
+    }
+  });
+
+  return requirementsMeter;
+};