fix(pds-input): style native search clear button with custom icon (#665)

Author: pixelflips

libs/core/src/components/pds-input/pds-input.scss

@@ -327,3 +327,15 @@
   white-space: nowrap;
   width: 1px;
 }
+
+// Custom styling for the search clear (x) button
+.pds-input__field::-webkit-search-cancel-button {
+  appearance: none;
+  background-color: var(--pds-input-placeholder-color);
+  cursor: pointer;
+  height: var(--pine-dimension-sm);
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.646 3.646a.5.5 0 0 1 .708 0L8 7.293l3.646-3.647a.5.5 0 0 1 .708.708L8.707 8l3.647 3.646a.5.5 0 0 1-.708.708L8 8.707l-3.646 3.647a.5.5 0 0 1-.708-.708L7.293 8 3.646 4.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
+  mask-size: contain;
+  width: var(--pine-dimension-sm);
+}
+

libs/core/src/components/pds-input/stories/pds-input.stories.js

@@ -71,6 +71,14 @@ Email.args = {
   value: 'user123@test.com'
 };
 
+export const Search = BaseTemplate.bind({});
+Search.args = {
+  componentId: 'pds-input-search-example',
+  label: 'Search',
+  type: 'search',
+  placeholder: 'Search...',
+};
+
 export const Required = BaseTemplate.bind({});
 Required.args = {
   componentId: 'pds-input-required-example',

libs/react/src/components/react-component-lib/createComponent.tsx

@@ -26,7 +26,10 @@ export const createReactComponent = <
   defineCustomElement?: () => void
 ) => {
   if (defineCustomElement !== undefined) {
-    defineCustomElement();
+    // Guard against double-registration when CDN and @pine-ds/react are both loaded
+    if (typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+      defineCustomElement();
+    }
   }
 
   const displayName = dashToPascalCase(tagName);