@pure-ds/core 0.5.33 → 0.5.35

package/dist/types/public/assets/pds/components/pds-icon.d.ts

@@ -10,6 +10,7 @@
  * @attr {string} sprite - Override sprite sheet path
  * @attr {number} rotate - Rotation angle in degrees
  * @attr {boolean} no-sprite - Force fallback icon rendering
+ * @attr {boolean} morph - Morph the icon when the icon name changes
  *
  * @example
  * <pds-icon icon="house"></pds-icon>
@@ -51,6 +52,16 @@ export class SvgIcon extends HTMLElement {
     static fetchExternalIcon(iconName: string): Promise<boolean>;
     static ensureInlineSprite(spriteURL: any): Promise<any>;
     static notifyInstances(): void;
+    _currentIcon: any;
+    _pendingIcon: any;
+    _morphing: boolean;
+    _morphTimer: any;
+    _templateReady: boolean;
+    _stackEl: Element;
+    _svgOldEl: Element;
+    _svgNewEl: Element;
+    _iconOldGroupEl: Element;
+    _iconNewGroupEl: Element;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;

package/dist/types/public/assets/pds/components/pds-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pds-icon.d.ts","sourceRoot":"","sources":["../../../../../../public/assets/pds/components/pds-icon.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH;IACE,oCAAyE;IAGzE;;;;;;;;;;MAkBE;IAEF,qCAAkC;IAClC,oCAAiC;IAGjC,wCAAqC;IAErC,2CAAwC;IAExC,2BAA6B;IAE7B,4CAA8B;IAO9B,oDA2CC;IAmMD;;;;OAIG;IACH,mCAmBC;IAED;;;;OAIG;IACH,mCAHW,MAAM,GACJ,OAAO,CAAC,OAAO,CAAC,CA6E5B;IAED,wDA8EC;IACD,+BAMC;IA7XD,0BAGC;IAED,6BAEC;IAED,wEAIC;IAED,eA6JC;IAMD;;;;;OAKG;IACH,0BAFa,OAAO,CAInB;;CAoMF"}
+{"version":3,"file":"pds-icon.d.ts","sourceRoot":"","sources":["../../../../../../public/assets/pds/components/pds-icon.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH;IACE,oCAAkF;IAGlF;;;;;;;;;;MAkBE;IAEF,qCAAkC;IAClC,oCAAiC;IAGjC,wCAAqC;IAErC,2CAAwC;IAExC,2BAA6B;IAE7B,4CAA8B;IAO9B,oDA2CC;IAqdD;;;;OAIG;IACH,mCAmBC;IAED;;;;OAIG;IACH,mCAHW,MAAM,GACJ,OAAO,CAAC,OAAO,CAAC,CA6E5B;IAED,wDA8EC;IACD,+BAMC;IAjpBC,kBAAwB;IACxB,kBAAwB;IACxB,mBAAsB;IACtB,iBAAuB;IACvB,wBAA2B;IAC3B,kBAAoB;IACpB,mBAAqB;IACrB,mBAAqB;IACrB,yBAA2B;IAC3B,yBAA2B;IAG7B,0BAGC;IAED,6BAGC;IAED,wEAmBC;IAED,eAiQC;IA0JD;;;;;OAKG;IACH,0BAFa,OAAO,CAInB;;CAoMF"}

package/dist/types/public/assets/pds/components/pds-omnibox.d.ts

@@ -2,6 +2,7 @@ export class PdsOmnibox extends HTMLElement {
     static formAssociated: boolean;
     static get observedAttributes(): string[];
     connectedCallback(): void;
+    disconnectedCallback(): void;
     attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
     set settings(value: any);
     get settings(): any;
@@ -17,6 +18,8 @@ export class PdsOmnibox extends HTMLElement {
     get required(): boolean;
     set autocomplete(value: string);
     get autocomplete(): string;
+    set icon(value: string);
+    get icon(): string;
     formAssociatedCallback(): void;
     formDisabledCallback(disabled: any): void;
     formResetCallback(): void;

package/dist/types/public/assets/pds/components/pds-omnibox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pds-omnibox.d.ts","sourceRoot":"","sources":["../../../../../../public/assets/pds/components/pds-omnibox.js"],"names":[],"mappings":"AAkBA;IACC,+BAA6B;IAE7B,0CAEC;IAgBD,0BAIC;IAED,wEAGC;IAMD,yBAGC;IAPD,oBAEC;IAWD,wBAGC;IAPD,mBAEC;IAWD,+BAGC;IAPD,0BAEC;IAWD,sBAIC;IARD,iBAEC;IAYD,6BAGC;IAPD,wBAEC;IAWD,6BAGC;IAPD,wBAEC;IAWD,gCAGC;IAPD,2BAEC;IAOD,+BAA2B;IAE3B,0CAGC;IAED,0BAEC;IAED,2CAEC;IAED,qBAEC;IAED,sBAEC;;CAkSD"}
+{"version":3,"file":"pds-omnibox.d.ts","sourceRoot":"","sources":["../../../../../../public/assets/pds/components/pds-omnibox.js"],"names":[],"mappings":"AAmBA;IACC,+BAA6B;IAE7B,0CAEC;IAuBD,0BAUC;IAED,6BAOC;IAED,wEAGC;IAMD,yBAEC;IAND,oBAEC;IAUD,wBAGC;IAPD,mBAEC;IAWD,+BAGC;IAPD,0BAEC;IAWD,sBAIC;IARD,iBAEC;IAYD,6BAGC;IAPD,wBAEC;IAWD,6BAGC;IAPD,wBAEC;IAWD,gCAGC;IAPD,2BAEC;IAWD,wBAGC;IAPD,mBAEC;IAOD,+BAA2B;IAE3B,0CAGC;IAED,0BAEC;IAED,2CAEC;IAED,qBAEC;IAED,sBAEC;;CAqcD"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pure-ds/core",
   "shortname": "pds",
-  "version": "0.5.33",
+  "version": "0.5.35",
   "description": "Pure Design System - Why develop a Design System when you can generate one?",
   "repository": {
     "type": "git",

package/packages/pds-cli/bin/pds-bootstrap.js

@@ -104,12 +104,11 @@ async function copyTemplateDirectory(sourceDir, targetDir, options) {
   }
 }
 
-async function copyBootstrapTemplate({ version, generatedAt, isModule }) {
+async function copyBootstrapTemplate({ version, generatedAt }) {
   await copyTemplateDirectory(templateRoot, projectRoot, { version, generatedAt });
 
-  const esbuildTemplate = isModule ? 'esbuild-dev.mjs' : 'esbuild-dev.cjs';
-  const esbuildSource = path.join(templateRoot, esbuildTemplate);
-  const esbuildTarget = path.join(projectRoot, 'esbuild-dev.js');
+  const esbuildSource = path.join(templateRoot, 'esbuild-dev.cjs');
+  const esbuildTarget = path.join(projectRoot, 'esbuild-dev.cjs');
   await copyFileIfMissing(esbuildSource, esbuildTarget);
 }
 
@@ -118,7 +117,13 @@ async function ensurePackageScripts(pkg, pkgPath) {
   let changed = false;
 
   if (!pkg.scripts.dev) {
-    pkg.scripts.dev = 'node esbuild-dev.js';
+    if (existsSync(path.join(projectRoot, 'esbuild-dev.cjs'))) {
+      pkg.scripts.dev = 'node esbuild-dev.cjs';
+    } else if (existsSync(path.join(projectRoot, 'esbuild-dev.js'))) {
+      pkg.scripts.dev = 'node esbuild-dev.js';
+    } else {
+      pkg.scripts.dev = 'node esbuild-dev.cjs';
+    }
     changed = true;
   }
 
@@ -262,7 +267,6 @@ async function main() {
   log('\n⚡ PDS Bootstrap\n');
 
   const { pkgPath, pkg } = await readPackageJson();
-  const isModule = pkg.type === 'module';
 
   await ensurePackageScripts(pkg, pkgPath);
   await ensureEsbuildDependency(pkg, pkgPath);
@@ -270,7 +274,7 @@ async function main() {
   const version = await getPdsCoreVersion();
   const generatedAt = new Date().toLocaleString();
 
-  await copyBootstrapTemplate({ version, generatedAt, isModule });
+  await copyBootstrapTemplate({ version, generatedAt });
 
   await ensurePdsAssets();
 

package/public/assets/pds/components/pds-icon.js

@@ -10,6 +10,7 @@
  * @attr {string} sprite - Override sprite sheet path
  * @attr {number} rotate - Rotation angle in degrees
  * @attr {boolean} no-sprite - Force fallback icon rendering
+ * @attr {boolean} morph - Morph the icon when the icon name changes
  * 
  * @example
  * <pds-icon icon="house"></pds-icon>
@@ -19,7 +20,7 @@
  */
 
 export class SvgIcon extends HTMLElement {
-  static observedAttributes = ['icon', 'size', 'color', 'label', 'rotate'];
+  static observedAttributes = ['icon', 'size', 'color', 'label', 'rotate', 'morph'];
   
   // Inline fallback icons for critical UI elements (when sprite fails to load)
   static #fallbackIcons = {
@@ -107,6 +108,16 @@ export class SvgIcon extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
+    this._currentIcon = null;
+    this._pendingIcon = null;
+    this._morphing = false;
+    this._morphTimer = null;
+    this._templateReady = false;
+    this._stackEl = null;
+    this._svgOldEl = null;
+    this._svgNewEl = null;
+    this._iconOldGroupEl = null;
+    this._iconNewGroupEl = null;
   }
   
   connectedCallback() {
@@ -116,16 +127,33 @@ export class SvgIcon extends HTMLElement {
 
   disconnectedCallback() {
     SvgIcon.instances.delete(this);
+    this.#clearMorphTimers();
   }
   
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue !== newValue) {
+      if (name === 'icon') {
+        if (this.hasAttribute('morph')) {
+          this.#startMorph(newValue, oldValue);
+          return;
+        }
+        this._currentIcon = newValue;
+        this._pendingIcon = null;
+        this._morphing = false;
+        this.#clearMorphTimers();
+        this.render();
+        return;
+      }
+      if (name === 'morph') {
+        this.#clearMorphTimers();
+      }
       this.render();
     }
   }
   
   render() {
-    const icon = this.getAttribute('icon') || 'missing';
+    const attrIcon = this.getAttribute('icon') || 'missing';
+    const icon = this._morphing ? (this._currentIcon || attrIcon) : attrIcon;
     const sizeAttr = this.getAttribute('size') || '24';
     const color = this.getAttribute('color') || 'currentColor';
     const label = this.getAttribute('label');
@@ -235,52 +263,299 @@ export class SvgIcon extends HTMLElement {
     const transform = rotate !== '0' ? `rotate(${rotate} 128 128)` : '';
     const defaultViewBox = '0 0 256 256';
     
-    // Determine viewBox: external icons may have different viewBox (often 24x24)
-    let viewBox = defaultViewBox;
-    let preserveAspectRatioAttr = '';
-    
-    if (useExternalIcon && externalIconData) {
-      viewBox = externalIconData.viewBox || '0 0 24 24';
-      if (externalIconData.preserveAspectRatio) {
-        preserveAspectRatioAttr = ` preserveAspectRatio="${externalIconData.preserveAspectRatio}"`;
+    const resolveIconData = (iconName) => {
+      let effectiveHrefLocal = spriteHref ? `${spriteHref}#${iconName}` : `#${iconName}`;
+      let inlineSymbolContentLocal = null;
+      let inlineSymbolViewBoxLocal = null;
+      let inlineSymbolPreserveAspectRatioLocal = null;
+      let useExternalIconLocal = false;
+      let externalIconDataLocal = null;
+      let useFallbackLocal = this.hasAttribute('no-sprite') || !this.spriteAvailable();
+      let spriteIconNotFoundLocal = false;
+      let spriteStillLoadingLocal = false;
+
+      if (!useFallbackLocal && typeof window !== 'undefined' && spriteHref) {
+        try {
+          const spriteURL = new URL(spriteHref, window.location.href);
+          const spriteKey = spriteURL.href;
+          const inlineSpriteData = SvgIcon.inlineSprites.get(spriteKey);
+
+          if (inlineSpriteData && inlineSpriteData.loaded) {
+            const symbolData = inlineSpriteData.symbols.get(iconName);
+            if (symbolData) {
+              inlineSymbolContentLocal = symbolData.content;
+              inlineSymbolViewBoxLocal = symbolData.viewBox;
+              inlineSymbolPreserveAspectRatioLocal = symbolData.preserveAspectRatio;
+            } else {
+              spriteIconNotFoundLocal = true;
+            }
+          } else if (inlineSpriteData && inlineSpriteData.error) {
+            spriteIconNotFoundLocal = true;
+          } else {
+            SvgIcon.ensureInlineSprite(spriteKey);
+            spriteStillLoadingLocal = true;
+            useFallbackLocal = true;
+          }
+        } catch (e) {
+          // Ignore URL errors and fall back to default behaviour
+        }
+      }
+
+      const hasFallbackLocal = SvgIcon.#fallbackIcons.hasOwnProperty(iconName);
+      if (spriteIconNotFoundLocal && !hasFallbackLocal && !spriteStillLoadingLocal) {
+        const cached = SvgIcon.externalIconCache.get(iconName);
+        if (cached) {
+          if (cached.loaded && cached.content) {
+            useExternalIconLocal = true;
+            externalIconDataLocal = cached;
+          } else if (cached.error) {
+            useFallbackLocal = true;
+          }
+        } else {
+          SvgIcon.fetchExternalIcon(iconName);
+          useFallbackLocal = true;
+        }
       }
-    } else if (inlineSymbolViewBox) {
-      viewBox = inlineSymbolViewBox;
-      if (inlineSymbolPreserveAspectRatio) {
-        preserveAspectRatioAttr = ` preserveAspectRatio="${inlineSymbolPreserveAspectRatio}"`;
+
+      if (spriteIconNotFoundLocal && !useExternalIconLocal) {
+        useFallbackLocal = true;
       }
-    }
 
-    const hasInlineSymbol = inlineSymbolContent !== null;
+      let viewBoxLocal = defaultViewBox;
+      let preserveAspectRatioLocal = '';
+
+      if (useExternalIconLocal && externalIconDataLocal) {
+        viewBoxLocal = externalIconDataLocal.viewBox || '0 0 24 24';
+        if (externalIconDataLocal.preserveAspectRatio) {
+          preserveAspectRatioLocal = externalIconDataLocal.preserveAspectRatio;
+        }
+      } else if (inlineSymbolViewBoxLocal) {
+        viewBoxLocal = inlineSymbolViewBoxLocal;
+        if (inlineSymbolPreserveAspectRatioLocal) {
+          preserveAspectRatioLocal = inlineSymbolPreserveAspectRatioLocal;
+        }
+      }
+
+      const hasInlineSymbolLocal = inlineSymbolContentLocal !== null;
+
+      let symbolMarkupLocal;
+      if (useExternalIconLocal && externalIconDataLocal?.content) {
+        symbolMarkupLocal = externalIconDataLocal.content;
+      } else if (useFallbackLocal) {
+        symbolMarkupLocal = this.#getFallbackIcon(iconName);
+      } else if (hasInlineSymbolLocal) {
+        symbolMarkupLocal = inlineSymbolContentLocal;
+      } else {
+        symbolMarkupLocal = `<use href="${effectiveHrefLocal}"></use>`;
+      }
+
+      return {
+        symbolMarkup: symbolMarkupLocal,
+        viewBox: viewBoxLocal,
+        preserveAspectRatio: preserveAspectRatioLocal,
+      };
+    };
+
+    const currentData = resolveIconData(icon);
+    const nextIcon = this._morphing ? (this._pendingIcon || attrIcon) : attrIcon;
+    const nextData = resolveIconData(nextIcon);
     
-    // Determine symbol markup based on priority: external > inline sprite > use href > fallback
-    let symbolMarkup;
-    if (useExternalIcon && externalIconData?.content) {
-      symbolMarkup = externalIconData.content;
-    } else if (useFallback) {
-      symbolMarkup = this.#getFallbackIcon(icon);
-    } else if (hasInlineSymbol) {
-      symbolMarkup = inlineSymbolContent;
+    const morphClass = this._morphing ? 'morphing' : '';
+
+    this.#ensureTemplate();
+
+    if (!this._stackEl || !this._svgOldEl || !this._svgNewEl || !this._iconOldGroupEl || !this._iconNewGroupEl) {
+      return;
+    }
+
+    this._stackEl.setAttribute('class', `icon-stack${morphClass ? ` ${morphClass}` : ''}`);
+    this._stackEl.style.width = `${size}px`;
+    this._stackEl.style.height = `${size}px`;
+
+    this._svgOldEl.setAttribute('width', size);
+    this._svgOldEl.setAttribute('height', size);
+    this._svgOldEl.setAttribute('fill', color);
+    this._svgOldEl.setAttribute('viewBox', currentData.viewBox);
+    if (currentData.preserveAspectRatio) {
+      this._svgOldEl.setAttribute('preserveAspectRatio', currentData.preserveAspectRatio);
     } else {
-      symbolMarkup = `<use href="${effectiveHref}"></use>`;
+      this._svgOldEl.removeAttribute('preserveAspectRatio');
     }
-    
+
+    this._svgNewEl.setAttribute('width', size);
+    this._svgNewEl.setAttribute('height', size);
+    this._svgNewEl.setAttribute('fill', color);
+    this._svgNewEl.setAttribute('viewBox', nextData.viewBox);
+    if (nextData.preserveAspectRatio) {
+      this._svgNewEl.setAttribute('preserveAspectRatio', nextData.preserveAspectRatio);
+    } else {
+      this._svgNewEl.removeAttribute('preserveAspectRatio');
+    }
+
+    if (label) {
+      this._svgNewEl.setAttribute('role', 'img');
+      this._svgNewEl.setAttribute('aria-label', label);
+      this._svgNewEl.setAttribute('aria-hidden', 'false');
+    } else {
+      this._svgNewEl.setAttribute('aria-hidden', 'true');
+      this._svgNewEl.removeAttribute('role');
+      this._svgNewEl.removeAttribute('aria-label');
+    }
+
+    this._svgOldEl.setAttribute('aria-hidden', 'true');
+
+    this._iconOldGroupEl.setAttribute('transform', transform);
+    this._iconOldGroupEl.innerHTML = currentData.symbolMarkup;
+    this._iconNewGroupEl.setAttribute('transform', transform);
+    this._iconNewGroupEl.innerHTML = nextData.symbolMarkup;
+  }
+
+  #ensureTemplate() {
+    if (this._templateReady) {
+      return;
+    }
+
     this.shadowRoot.innerHTML = `
-      <svg
-        width="${size}"
-        height="${size}"
-        fill="${color}"
-        aria-hidden="${!label}"
-        ${label ? `role="img" aria-label="${label}"` : ''}
-        style="display: inline-block; vertical-align: middle; flex-shrink: 0;"
-        viewBox="${viewBox}"
-        ${preserveAspectRatioAttr}
-      >
-        <g transform="${transform}">
-          ${symbolMarkup}
-        </g>
-      </svg>
+      <style>
+        :host {
+          --pds-icon-morph-duration: 300ms;
+          --pds-icon-morph-half-duration: calc(var(--pds-icon-morph-duration) / 2);
+          --pds-icon-morph-rotate: 12deg;
+          --pds-icon-morph-blur: 10px;
+        }
+
+        .icon-stack {
+          display: inline-block;
+          position: relative;
+          line-height: 0;
+        }
+
+        .icon-stack svg.pds-icon {
+          position: absolute;
+          inset: 0;
+          display: block;
+          width: 100%;
+          height: 100%;
+          will-change: transform, opacity, filter;
+          transform-origin: 50% 50%;
+        }
+
+        .icon-stack .layer-old {
+          opacity: 0;
+        }
+
+        .icon-stack .layer-new {
+          opacity: 1;
+        }
+
+        .icon-stack.morphing .layer-old {
+          opacity: 1;
+          animation: pds-icon-morph-out var(--pds-icon-morph-duration) ease-in-out;
+        }
+
+        .icon-stack.morphing .layer-new {
+          opacity: 0;
+          animation: pds-icon-morph-in var(--pds-icon-morph-duration) ease-in-out;
+        }
+
+        @keyframes pds-icon-morph-out {
+          0% { opacity: 1; filter: blur(0); transform: rotate(0deg); }
+          100% { opacity: 0; filter: blur(var(--pds-icon-morph-blur)); transform: rotate(var(--pds-icon-morph-rotate)); }
+        }
+
+        @keyframes pds-icon-morph-in {
+          0% { opacity: 0; filter: blur(var(--pds-icon-morph-blur)); transform: rotate(calc(var(--pds-icon-morph-rotate) * -1)); }
+          100% { opacity: 1; filter: blur(0); transform: rotate(0deg); }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .icon-stack.morphing .layer-old,
+          .icon-stack.morphing .layer-new {
+            animation: none;
+          }
+        }
+      </style>
+      <span class="icon-stack">
+        <svg class="pds-icon layer-old" aria-hidden="true">
+          <g id="icon-group-old"></g>
+        </svg>
+        <svg class="pds-icon layer-new" aria-hidden="true">
+          <g id="icon-group-new"></g>
+        </svg>
+      </span>
     `;
+
+    this._stackEl = this.shadowRoot.querySelector('.icon-stack');
+    this._svgOldEl = this.shadowRoot.querySelector('svg.layer-old');
+    this._svgNewEl = this.shadowRoot.querySelector('svg.layer-new');
+    this._iconOldGroupEl = this.shadowRoot.querySelector('#icon-group-old');
+    this._iconNewGroupEl = this.shadowRoot.querySelector('#icon-group-new');
+    this._templateReady = true;
+  }
+
+  #clearMorphTimers() {
+    if (this._morphTimer) {
+      clearTimeout(this._morphTimer);
+      this._morphTimer = null;
+    }
+  }
+
+  #startMorph(newIcon, oldIcon) {
+    if (!oldIcon) {
+      this._currentIcon = newIcon;
+      this._pendingIcon = null;
+      this._morphing = false;
+      this.render();
+      return;
+    }
+
+    this.#clearMorphTimers();
+
+    this._currentIcon = oldIcon;
+    this._pendingIcon = newIcon;
+    this._morphing = false;
+    this.render();
+
+    requestAnimationFrame(() => {
+      if (!this.isConnected) {
+        return;
+      }
+
+      this._morphing = true;
+      this.render();
+
+      const totalDuration = this.#getMorphDurationMs();
+      const halfDuration = totalDuration / 2;
+
+      this._morphTimer = setTimeout(() => {
+        this._currentIcon = this._pendingIcon || newIcon;
+        this._pendingIcon = null;
+        this.render();
+        this._morphTimer = setTimeout(() => {
+          this._morphing = false;
+          this.render();
+        }, halfDuration);
+      }, halfDuration);
+    });
+  }
+
+  #getMorphDurationMs() {
+    try {
+      const value = getComputedStyle(this).getPropertyValue('--pds-icon-morph-duration').trim();
+      if (value) {
+        if (value.endsWith('ms')) {
+          const ms = Number.parseFloat(value);
+          return Number.isFinite(ms) ? ms : 200;
+        }
+        if (value.endsWith('s')) {
+          const seconds = Number.parseFloat(value);
+          return Number.isFinite(seconds) ? seconds * 1000 : 200;
+        }
+      }
+    } catch (error) {
+      // ignore and fall back
+    }
+    return 200;
   }
   
   #getFallbackIcon(name) {

package/public/assets/pds/components/pds-omnibox.js

@@ -15,19 +15,27 @@
  */
 const LAYERS = ["tokens", "primitives", "components", "utilities"];
 const DEFAULT_PLACEHOLDER = "Search...";
+const DEFAULT_ICON = "magnifying-glass";
 
 export class PdsOmnibox extends HTMLElement {
 	static formAssociated = true;
 
 	static get observedAttributes() {
-		return ["name", "placeholder", "value", "disabled", "required", "autocomplete"];
+		return ["name", "placeholder", "value", "disabled", "required", "autocomplete", "icon"];
 	}
 
 	#root;
 	#internals;
 	#input;
+	#icon;
 	#settings;
 	#defaultValue = "";
+	#autoCompleteResizeHandler;
+	#autoCompleteScrollHandler;
+	#autoCompleteViewportHandler;
+	#lengthProbe;
+	#suggestionsUpdatedHandler;
+	#suggestionsObserver;
 
 	constructor() {
 		super();
@@ -41,6 +49,21 @@ export class PdsOmnibox extends HTMLElement {
 		this.#defaultValue = this.getAttribute("value") || "";
 		this.#syncAttributes();
 		this.#updateFormValue(this.#input.value || "");
+		if (!this.#suggestionsUpdatedHandler) {
+			this.#suggestionsUpdatedHandler = (event) => {
+				this.#handleSuggestionsUpdated(event);
+			};
+			this.addEventListener("suggestions-updated", this.#suggestionsUpdatedHandler);
+		}
+	}
+
+	disconnectedCallback() {
+		this.#teardownAutoCompleteSizing();
+		this.#teardownSuggestionsObserver();
+		if (this.#suggestionsUpdatedHandler) {
+			this.removeEventListener("suggestions-updated", this.#suggestionsUpdatedHandler);
+			this.#suggestionsUpdatedHandler = null;
+		}
 	}
 
 	attributeChangedCallback(name, oldValue, newValue) {
@@ -54,7 +77,6 @@ export class PdsOmnibox extends HTMLElement {
 
 	set settings(value) {
 		this.#settings = value;
-    console.log('settings set', this.#settings);
 	}
 
 	get name() {
@@ -112,6 +134,15 @@ export class PdsOmnibox extends HTMLElement {
 		else this.setAttribute("autocomplete", value);
 	}
 
+	get icon() {
+		return this.getAttribute("icon") || DEFAULT_ICON;
+	}
+
+	set icon(value) {
+		if (value == null || value === "") this.removeAttribute("icon");
+		else this.setAttribute("icon", value);
+	}
+
 	formAssociatedCallback() {}
 
 	formDisabledCallback(disabled) {
@@ -138,14 +169,20 @@ export class PdsOmnibox extends HTMLElement {
 	#renderStructure() {
 		this.#root.innerHTML = `
 			<div class="ac-container input-icon">
-				<pds-icon icon="magnifying-glass"></pds-icon>
+				<pds-icon morph icon="${DEFAULT_ICON}"></pds-icon>
 				<input class="ac-input" type="search" placeholder="${DEFAULT_PLACEHOLDER}" autocomplete="off" />
 			</div>
 		`;
 
+		this.#lengthProbe = document.createElement("div");
+		this.#lengthProbe.style.cssText = "position:absolute; visibility:hidden; width:0; height:0; pointer-events:none;";
+		this.#root.appendChild(this.#lengthProbe);
+
 		this.#input = this.#root.querySelector("input");
+		this.#icon = this.#root.querySelector("pds-icon");
 		this.#input.addEventListener("input", () => {
 			this.#updateFormValue(this.#input.value);
+			this.#updateSuggestionMaxHeight();
 			this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
 		});
 		this.#input.addEventListener("change", () => {
@@ -154,6 +191,15 @@ export class PdsOmnibox extends HTMLElement {
 		this.#input.addEventListener("focus", (e) => {
 			this.#handleAutoComplete(e);
 		});
+		this.#input.addEventListener("show-results", (event) => {
+			this.dispatchEvent(
+				new CustomEvent("suggestions-updated", {
+					detail: { results: event?.detail?.results ?? [] },
+					bubbles: true,
+					composed: true,
+				})
+			);
+		});
 	}
 
 	async #adoptStyles() {
@@ -171,7 +217,9 @@ export class PdsOmnibox extends HTMLElement {
 					--ac-margin: var(--spacing-0);
 					--icon-size: var(--spacing-6);
 					--ac-itm-height-default: 5rem;
-          --ac-max-height-default: 300px;
+					--ac-max-height-default: 300px;
+					--ac-viewport-gap: var(--spacing-4);
+					--ac-suggest-offset: var(--spacing-1);
 				}
 
 				.ac-container {
@@ -184,10 +232,14 @@ export class PdsOmnibox extends HTMLElement {
 
 					.ac-suggestion {
 						background-color: var(--color-surface-base);
-						max-height: var(--ac-max-height, var(--ac-max-height-default));
+						max-height: min(
+							var(--ac-max-height, var(--ac-max-height-default)),
+							calc(100dvh - var(--ac-viewport-gap))
+						);
 						position: absolute;
 						z-index: var(--z-dropdown);
 						left: 0;
+						top: calc(100% + var(--ac-suggest-offset));
 						padding: var(--ac-margin);
 						border-radius: 0 0 var(--ac-rad) var(--ac-rad);
 						box-shadow: var(--ac-box-shadow);
@@ -310,6 +362,11 @@ export class PdsOmnibox extends HTMLElement {
 							border-top-right-radius: 0;
 						}
 
+						.ac-suggestion {
+							top: auto;
+							bottom: calc(100% + var(--ac-suggest-offset));
+						}
+
 						.ac-itm:last-child {
 							border-bottom-left-radius: 0;
 							border-bottom-right-radius: 0;
@@ -359,6 +416,7 @@ export class PdsOmnibox extends HTMLElement {
 
 		this.#input.placeholder = this.placeholder;
 		this.#input.autocomplete = this.autocomplete;
+		if (this.#icon) this.#icon.setAttribute("icon", this.icon);
 
 		if (this.hasAttribute("value")) {
 			const v = this.getAttribute("value") || "";
@@ -416,13 +474,149 @@ export class PdsOmnibox extends HTMLElement {
       // }
 			//AutoComplete.connect(ev, settings, this.#root);
 
-      this.#input._autoComplete = new AutoComplete(this.#input.parentNode, this.#input, settings);
-      setTimeout(() => {
-          this.#input._autoComplete.focusHandler(e);
-        }, 100);
+			this.#input._autoComplete = new AutoComplete(this.#input.parentNode, this.#input, settings);
+			this.#wrapAutoCompleteResultsHandler(this.#input._autoComplete);
+			setTimeout(() => {
+				this.#input._autoComplete.focusHandler(e);
+				this.#setupAutoCompleteSizing();
+				this.#updateSuggestionMaxHeight();
+				this.#setupSuggestionsObserver();
+			}, 100);
 
 		}
 	}
+
+	#wrapAutoCompleteResultsHandler(autoComplete) {
+		if (!autoComplete || autoComplete.__pdsSuggestionsWrapped) return;
+		autoComplete.__pdsSuggestionsWrapped = true;
+		const originalResultsHandler = autoComplete.resultsHandler?.bind(autoComplete);
+		if (!originalResultsHandler) return;
+
+		autoComplete.resultsHandler = (results, options) => {
+			this.dispatchEvent(
+				new CustomEvent("suggestions-updated", {
+					detail: { results },
+					bubbles: true,
+					composed: true,
+				})
+			);
+			return originalResultsHandler(results, options);
+		};
+	}
+
+	#setupAutoCompleteSizing() {
+		if (this.#autoCompleteResizeHandler) return;
+		this.#autoCompleteResizeHandler = () => this.#updateSuggestionMaxHeight();
+		this.#autoCompleteScrollHandler = () => this.#updateSuggestionMaxHeight();
+		this.#autoCompleteViewportHandler = () => this.#updateSuggestionMaxHeight();
+
+		window.addEventListener("resize", this.#autoCompleteResizeHandler);
+		window.addEventListener("scroll", this.#autoCompleteScrollHandler, true);
+		if (window.visualViewport) {
+			window.visualViewport.addEventListener("resize", this.#autoCompleteViewportHandler);
+			window.visualViewport.addEventListener("scroll", this.#autoCompleteViewportHandler);
+		}
+	}
+
+	#setupSuggestionsObserver() {
+		if (this.#suggestionsObserver) return;
+		const container = this.#input?.parentElement;
+		const root = container?.shadowRoot ?? container;
+		const suggestion = root?.querySelector?.(".ac-suggestion");
+		if (!suggestion) return;
+		this.#suggestionsObserver = new MutationObserver(() => {
+			if (!suggestion.classList.contains("ac-active")) {
+				this.#resetIconToDefault();
+			}
+		});
+		this.#suggestionsObserver.observe(suggestion, {
+			attributes: true,
+			attributeFilter: ["class"],
+		});
+	}
+
+	#teardownSuggestionsObserver() {
+		if (!this.#suggestionsObserver) return;
+		this.#suggestionsObserver.disconnect();
+		this.#suggestionsObserver = null;
+	}
+
+	#teardownAutoCompleteSizing() {
+		if (!this.#autoCompleteResizeHandler) return;
+		window.removeEventListener("resize", this.#autoCompleteResizeHandler);
+		window.removeEventListener("scroll", this.#autoCompleteScrollHandler, true);
+		if (window.visualViewport) {
+			window.visualViewport.removeEventListener("resize", this.#autoCompleteViewportHandler);
+			window.visualViewport.removeEventListener("scroll", this.#autoCompleteViewportHandler);
+		}
+		this.#autoCompleteResizeHandler = null;
+		this.#autoCompleteScrollHandler = null;
+		this.#autoCompleteViewportHandler = null;
+	}
+
+	#updateSuggestionMaxHeight() {
+		if (!this.#input) return;
+		const container = this.#input.parentElement;
+		if (!container) return;
+
+		const rect = container.getBoundingClientRect();
+		const viewportHeight = window.visualViewport?.height || window.innerHeight;
+		const gap = this.#readSpacingToken(container, "--ac-viewport-gap") || 0;
+		const direction = container.getAttribute("data-direction") || "down";
+
+		const available = direction === "up"
+			? rect.top - gap
+			: viewportHeight - rect.bottom - gap;
+
+		const maxHeight = Math.max(0, Math.floor(available));
+		container.style.setProperty("--ac-max-height", `${maxHeight}px`);
+	}
+
+	#readSpacingToken(element, tokenName) {
+		const value = getComputedStyle(element).getPropertyValue(tokenName).trim();
+		if (!value) return 0;
+		if (!this.#lengthProbe) return 0;
+		this.#lengthProbe.style.height = value;
+		const resolved = getComputedStyle(this.#lengthProbe).height;
+		const parsed = Number.parseFloat(resolved);
+		return Number.isFinite(parsed) ? parsed : 0;
+	}
+
+	#handleSuggestionsUpdated(event) {
+		
+		const results = event?.detail?.results;
+		if (!Array.isArray(results) || !this.settings?.categories) return;
+		if (!results.length) {
+			this.#icon?.setAttribute("icon", this.icon);
+			return;
+		}
+
+		const categories = this.settings.categories;
+		const firstResult = results[0];
+		const categoryConfig = categories[firstResult?.category] || {};
+		const useIconForInput = categoryConfig?.useIconForInput ?? this.settings?.useIconForInput;
+
+		if (typeof useIconForInput === "string") {
+			this.#icon?.setAttribute("icon", useIconForInput);
+			return;
+		}
+
+		if (useIconForInput === true) {
+			const icon =
+				firstResult?.icon ||
+				firstResult?.element?.querySelector?.("pds-icon, svg-icon")?.getAttribute?.("icon");
+			if (icon) {
+				this.#icon?.setAttribute("icon", icon);
+				return;
+			}
+		}
+
+		this.#resetIconToDefault();
+	}
+
+	#resetIconToDefault() {
+		this.#icon?.setAttribute("icon", this.icon);
+	}
 }
 
 if (!customElements.get("pds-omnibox")) {