@marioschmidt/design-system-components 1.3.1 → 1.3.2

package/dist/cjs/bds.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-yDPq0GyD.js');
+var index = require('./index-Bb064vv6.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
@@ -18,7 +18,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy([["ds-button_3.cjs",[[257,"ds-button",{"variant":[1],"disabled":[4]}],[257,"ds-card",{"surface":[1],"cardTitle":[1,"card-title"]}],[1,"ds-icon",{"name":[1],"size":[2],"color":[1],"basePath":[1,"base-path"],"lazy":[4],"label":[1],"svgContent":[32],"isLoading":[32],"hasError":[32]},null,{"name":[{"onNameChange":0}],"basePath":[{"onBasePathChange":0}]}]]]], options);
+  return index.bootstrapLazy([["ds-button_3.cjs",[[257,"ds-button",{"variant":[1],"disabled":[4],"icon":[1],"iconPosition":[1,"icon-position"]}],[257,"ds-card",{"surface":[1],"cardTitle":[1,"card-title"]}],[1,"ds-icon",{"name":[1],"basePath":[1,"base-path"],"svgContent":[32]},null,{"name":[{"onNameChange":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/ds-button_3.cjs.entry.js

@@ -1,29 +1,32 @@
 'use strict';
 
-var index = require('./index-yDPq0GyD.js');
+var index = require('./index-Bb064vv6.js');
 
-const dsButtonCss = () => `:host{display:inline-block}.ds-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:transparent;transition:background-color 0.2s ease,     border-color 0.2s ease,     color 0.2s ease;padding:var(--button-stack-space) var(--button-inline-space);min-height:var(--button-height-size);gap:var(--button-content-gap-space);border-radius:var(--button-border-radius);font-family:var(--button-label-font-family);font-weight:var(--font-weight-bold);font-size:var(--button-label-font-size);line-height:var(--button-label-line-height);letter-spacing:var(--letter-space-0-p-5);text-transform:uppercase}.ds-button__label{display:inline-flex;align-items:center;gap:inherit}::slotted(ds-icon){--icon-size:var(--icon-size, 24px);color:inherit;flex-shrink:0}.ds-button--primary-brand{background-color:var(--button-primary-brand-bg-color-idle);color:var(--button-primary-brand-label-color)}.ds-button--primary-brand:hover:not(:disabled){background-color:var(--button-primary-brand-bg-color-hover)}.ds-button--primary-brand:active:not(:disabled){background-color:var(--button-primary-brand-bg-color-active)}.ds-button--primary-neutral{background-color:var(--button-primary-neutral-bg-color-idle);color:var(--button-primary-neutral-label-color)}.ds-button--primary-neutral:hover:not(:disabled){background-color:var(--button-primary-neutral-bg-color-hover)}.ds-button--primary-neutral:active:not(:disabled){background-color:var(--button-primary-neutral-bg-color-active)}.ds-button--primary-success{background-color:var(--button-primary-success-bg-color-idle);color:var(--button-primary-success-label-color)}.ds-button--primary-success:hover:not(:disabled){background-color:var(--button-primary-success-bg-color-hover)}.ds-button--primary-success:active:not(:disabled){background-color:var(--button-primary-success-bg-color-active)}.ds-button--secondary{background-color:var(--button-secondary-bg-color-idle);color:var(--button-secondary-label-color)}.ds-button--secondary:hover:not(:disabled){background-color:var(--button-secondary-bg-color-hover)}.ds-button--secondary:active:not(:disabled){background-color:var(--button-secondary-bg-color-active)}.ds-button--tertiary-neutral{background-color:transparent;color:var(--button-tertiary-neutral-label-color);border:var(--button-border-width-size) solid var(--button-tertiary-neutral-border-color-idle)}.ds-button--tertiary-neutral:hover:not(:disabled){background-color:var(--button-tertiary-neutral-bg-color-hover);border-color:var(--button-tertiary-neutral-border-color-hover)}.ds-button--tertiary-neutral:active:not(:disabled){background-color:var(--button-tertiary-neutral-bg-color-active)}.ds-button--tertiary-success{background-color:transparent;color:var(--button-tertiary-success-label-color);border:var(--button-border-width-size) solid var(--button-tertiary-success-border-color)}.ds-button--tertiary-success:hover:not(:disabled){background-color:var(--button-tertiary-success-bg-color-hover)}.ds-button--ghost{background-color:transparent;color:var(--button-ghost-label-color)}.ds-button--ghost:hover:not(:disabled){background-color:var(--button-ghost-bg-color-hover)}.ds-button--ghost:active:not(:disabled){background-color:var(--button-ghost-bg-color-active)}.ds-button--disabled,.ds-button:disabled{cursor:not-allowed;background-color:var(--button-disabled-bg-color);color:var(--button-disabled-label-color);border-color:var(--button-disabled-border-color)}.ds-button--disabled:hover,.ds-button--disabled:active,.ds-button:disabled:hover,.ds-button:disabled:active{background-color:var(--button-disabled-bg-color);color:var(--button-disabled-label-color);border-color:var(--button-disabled-border-color)}.ds-button:focus-visible{outline:2px solid var(--core-color-primary);outline-offset:2px}`;
+const dsButtonCss = () => `:host{display:inline-block}.ds-button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:transparent;transition:background-color 0.2s ease,     border-color 0.2s ease,     color 0.2s ease;padding:var(--button-stack-space) var(--button-inline-space);min-height:var(--button-height-size);gap:var(--button-content-gap-space);border-radius:var(--button-border-radius);font-family:var(--button-label-font-family);font-weight:var(--font-weight-bold);font-size:var(--button-label-font-size);line-height:var(--button-label-line-height);letter-spacing:var(--letter-space-0-p-5);text-transform:uppercase}.ds-button__label{display:inline-flex;align-items:center;gap:inherit}ds-icon{--icon-size:var(--icon-size);flex-shrink:0}.ds-button--primary-brand{background-color:var(--button-primary-brand-bg-color-idle);color:var(--button-primary-brand-label-color)}.ds-button--primary-brand:hover:not(:disabled){background-color:var(--button-primary-brand-bg-color-hover)}.ds-button--primary-brand:active:not(:disabled){background-color:var(--button-primary-brand-bg-color-active)}.ds-button--primary-neutral{background-color:var(--button-primary-neutral-bg-color-idle);color:var(--button-primary-neutral-label-color)}.ds-button--primary-neutral:hover:not(:disabled){background-color:var(--button-primary-neutral-bg-color-hover)}.ds-button--primary-neutral:active:not(:disabled){background-color:var(--button-primary-neutral-bg-color-active)}.ds-button--primary-success{background-color:var(--button-primary-success-bg-color-idle);color:var(--button-primary-success-label-color)}.ds-button--primary-success:hover:not(:disabled){background-color:var(--button-primary-success-bg-color-hover)}.ds-button--primary-success:active:not(:disabled){background-color:var(--button-primary-success-bg-color-active)}.ds-button--secondary{background-color:var(--button-secondary-bg-color-idle);color:var(--button-secondary-label-color)}.ds-button--secondary:hover:not(:disabled){background-color:var(--button-secondary-bg-color-hover)}.ds-button--secondary:active:not(:disabled){background-color:var(--button-secondary-bg-color-active)}.ds-button--tertiary-neutral{background-color:transparent;color:var(--button-tertiary-neutral-label-color);border:var(--button-border-width-size) solid var(--button-tertiary-neutral-border-color-idle)}.ds-button--tertiary-neutral:hover:not(:disabled){background-color:var(--button-tertiary-neutral-bg-color-hover);border-color:var(--button-tertiary-neutral-border-color-hover)}.ds-button--tertiary-neutral:active:not(:disabled){background-color:var(--button-tertiary-neutral-bg-color-active)}.ds-button--tertiary-success{background-color:transparent;color:var(--button-tertiary-success-label-color);border:var(--button-border-width-size) solid var(--button-tertiary-success-border-color)}.ds-button--tertiary-success:hover:not(:disabled){background-color:var(--button-tertiary-success-bg-color-hover)}.ds-button--ghost{background-color:transparent;color:var(--button-ghost-label-color)}.ds-button--ghost:hover:not(:disabled){background-color:var(--button-ghost-bg-color-hover)}.ds-button--ghost:active:not(:disabled){background-color:var(--button-ghost-bg-color-active)}.ds-button--disabled,.ds-button:disabled{cursor:not-allowed;background-color:var(--button-disabled-bg-color);color:var(--button-disabled-label-color);border-color:var(--button-disabled-border-color)}.ds-button--disabled:hover,.ds-button--disabled:active,.ds-button:disabled:hover,.ds-button:disabled:active{background-color:var(--button-disabled-bg-color);color:var(--button-disabled-label-color);border-color:var(--button-disabled-border-color)}.ds-button:focus-visible{outline:2px solid var(--core-color-primary);outline-offset:2px}`;
 
 const DsButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         /**
          * Button variant determining visual style.
-         * @default 'primary-brand'
          */
         this.variant = 'primary-brand';
         /**
-         * Disables the button interaction and applies disabled styling.
-         * @default false
+         * Disables the button.
          */
         this.disabled = false;
+        /**
+         * Icon position: 'start' or 'end'.
+         */
+        this.iconPosition = 'start';
     }
     render() {
-        return (index.h("button", { key: 'b2c29af56fa84e6274900496d1a57bf7be6070e0', class: {
+        const iconEl = this.icon ? index.h("ds-icon", { name: this.icon }) : null;
+        return (index.h("button", { key: '000508b5713956932132412d59f9ba1b9baa96c7', class: {
                 'ds-button': true,
                 [`ds-button--${this.variant}`]: true,
                 'ds-button--disabled': this.disabled,
-            }, disabled: this.disabled }, index.h("slot", { key: 'c87fb66dffa329b2911752390d69d808aea83ead', name: "icon-start" }), index.h("span", { key: '3049998d0fca7eef41dc5bbc51ab14d396855840', class: "ds-button__label" }, index.h("slot", { key: '540e93a8de6f0be305963e7b05b90dcbacda6f37' })), index.h("slot", { key: 'f48be5683052a40bb97436f20b219a42fb09319a', name: "icon-end" })));
+            }, disabled: this.disabled }, this.iconPosition === 'start' && iconEl, index.h("span", { key: '1cf189f05c1f2cdb82f54f6f2283eaa9c6e38381', class: "ds-button__label" }, index.h("slot", { key: '89eadaa81aaa4e458e46b29e02291ad45c027101' })), this.iconPosition === 'end' && iconEl));
     }
 };
 DsButton.style = dsButtonCss();
@@ -39,173 +42,58 @@ const DsCard = class {
         this.surface = 'primary';
     }
     render() {
-        return (index.h("div", { key: '0709463754ee76974475f214840ade290ee7aa83', class: {
+        return (index.h("div", { key: '545dfb7389201a046b465e96723fdc8ad5cd1160', class: {
                 'ds-card': true,
                 [`ds-card--${this.surface}`]: true,
-            } }, this.cardTitle && (index.h("div", { key: 'e161468e870e419852e6ef9f92ab9fc24ac60635', class: "ds-card__header" }, index.h("h3", { key: '8cccde3f7e5ea185ef24d90312439d2e49621504', class: "ds-card__title" }, this.cardTitle))), index.h("div", { key: '47457839b1fa00f261c1fbfb8842904fb9bf8245', class: "ds-card__content" }, index.h("slot", { key: '009a1b1e7411daec2c67fd084d654de71875222e' }))));
+            } }, this.cardTitle && (index.h("div", { key: '63523222100e039098a941c2125df63a7bc8a0ee', class: "ds-card__header" }, index.h("h3", { key: '7e60906b0aeb4d8d20fc09a85d06f4d0bd4a95ae', class: "ds-card__title" }, this.cardTitle))), index.h("div", { key: '544d6b4e6ac95745261ee73c81f2d01c2806afd3', class: "ds-card__content" }, index.h("slot", { key: '9102bcc585687daf5d954059a138ad7bac27b640' }))));
     }
 };
 DsCard.style = dsCardCss();
 
-const dsIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center}.ds-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-size, 24px);height:var(--icon-size, 24px);color:var(--icon-color, currentColor);flex-shrink:0}.ds-icon__svg{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ds-icon__svg svg{width:100%;height:100%;fill:currentColor}.ds-icon--loading{opacity:0.5}.ds-icon--error{opacity:0.3}.ds-icon__error{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.ds-icon__error svg{width:100%;height:100%;fill:currentColor}`;
+const dsIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-size);height:var(--icon-size);color:inherit}.ds-icon{display:flex;width:100%;height:100%}.ds-icon svg{width:100%;height:100%;fill:currentColor}`;
 
-/**
- * Icon cache shared between all ds-icon instances.
- * Prevents duplicate fetch requests for the same icon.
- */
 const iconCache = new Map();
-const pendingRequests = new Map();
 const DsIcon = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         /**
-         * Size of the icon in pixels.
-         * @default 24
-         */
-        this.size = 24;
-        /**
-         * Color of the icon. Accepts any valid CSS color value.
-         * Icons use currentColor by default, inheriting from parent.
-         * @default 'currentColor'
-         */
-        this.color = 'currentColor';
-        /**
-         * Base path for loading icon SVG files.
-         * @default '/icons'
+         * Base path for icon SVG files.
          */
         this.basePath = '/icons';
-        /**
-         * Enable lazy loading with IntersectionObserver.
-         * Icon will only load when visible in viewport.
-         * @default false
-         */
-        this.lazy = false;
-        /**
-         * Internal state for the loaded SVG content.
-         */
         this.svgContent = '';
-        /**
-         * Internal state for loading status.
-         */
-        this.isLoading = false;
-        /**
-         * Internal state for error status.
-         */
-        this.hasError = false;
-        this.isVisible = false;
     }
     connectedCallback() {
-        if (this.lazy) {
-            this.setupIntersectionObserver();
-        }
-        else {
-            this.loadIcon();
-        }
-    }
-    disconnectedCallback() {
-        this.observer?.disconnect();
+        this.loadIcon();
     }
     onNameChange() {
-        if (!this.lazy || this.isVisible) {
-            this.loadIcon();
-        }
-    }
-    onBasePathChange() {
-        if (!this.lazy || this.isVisible) {
-            this.loadIcon();
-        }
-    }
-    setupIntersectionObserver() {
-        if (typeof IntersectionObserver === 'undefined') {
-            // Fallback for browsers without IntersectionObserver
-            this.loadIcon();
-            return;
-        }
-        this.observer = new IntersectionObserver((entries) => {
-            entries.forEach((entry) => {
-                if (entry.isIntersecting) {
-                    this.isVisible = true;
-                    this.loadIcon();
-                    this.observer?.disconnect();
-                }
-            });
-        }, {
-            rootMargin: '50px', // Load slightly before entering viewport
-        });
-        this.observer.observe(this.el);
+        this.loadIcon();
     }
     async loadIcon() {
-        if (!this.name) {
-            this.hasError = true;
-            return;
-        }
-        const iconUrl = `${this.basePath}/${this.name}.svg`;
-        // Check cache first
-        if (iconCache.has(iconUrl)) {
-            this.svgContent = iconCache.get(iconUrl);
-            this.hasError = false;
+        if (!this.name)
             return;
-        }
-        // Check for pending request (prevent duplicate fetches)
-        if (pendingRequests.has(iconUrl)) {
-            try {
-                this.svgContent = await pendingRequests.get(iconUrl);
-                this.hasError = false;
-            }
-            catch {
-                this.hasError = true;
-            }
+        const url = `${this.basePath}/${this.name}.svg`;
+        if (iconCache.has(url)) {
+            this.svgContent = iconCache.get(url);
             return;
         }
-        this.isLoading = true;
-        this.hasError = false;
-        // Create fetch promise and store it
-        const fetchPromise = this.fetchIcon(iconUrl);
-        pendingRequests.set(iconUrl, fetchPromise);
         try {
-            this.svgContent = await fetchPromise;
-            iconCache.set(iconUrl, this.svgContent);
-            this.hasError = false;
+            const response = await fetch(url);
+            if (response.ok) {
+                const svg = await response.text();
+                iconCache.set(url, svg);
+                this.svgContent = svg;
+            }
         }
         catch {
-            this.hasError = true;
-            this.svgContent = '';
-        }
-        finally {
-            this.isLoading = false;
-            pendingRequests.delete(iconUrl);
-        }
-    }
-    async fetchIcon(url) {
-        const response = await fetch(url);
-        if (!response.ok) {
-            throw new Error(`Failed to load icon: ${url}`);
-        }
-        const svgText = await response.text();
-        // Basic security check - ensure it's valid SVG
-        if (!svgText.includes('<svg')) {
-            throw new Error(`Invalid SVG content: ${url}`);
+            // Silent fail
         }
-        return svgText;
     }
     render() {
-        const isDecorative = !this.label;
-        return (index.h("span", { key: 'f3c397e6532cf9022416cf53458dd6d0b128a3ed', class: {
-                'ds-icon': true,
-                'ds-icon--loading': this.isLoading,
-                'ds-icon--error': this.hasError,
-            }, style: {
-                '--icon-size': `${this.size}px`,
-                '--icon-color': this.color,
-            }, role: isDecorative ? 'presentation' : 'img', "aria-hidden": isDecorative ? 'true' : undefined, "aria-label": this.label }, this.svgContent ? (index.h("span", { class: "ds-icon__svg", innerHTML: this.svgContent })) : this.hasError ? (index.h("span", { class: "ds-icon__error", title: `Icon "${this.name}" not found` }, index.h("svg", { viewBox: "0 0 24 24", fill: "currentColor" }, index.h("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })))) : null));
+        return (index.h("span", { key: 'f3549bfd71c52f0bf0b23c346fa5a665119c4033', class: "ds-icon", innerHTML: this.svgContent }));
     }
-    get el() { return index.getElement(this); }
     static get watchers() { return {
         "name": [{
                 "onNameChange": 0
-            }],
-        "basePath": [{
-                "onBasePathChange": 0
             }]
     }; }
 };

package/dist/cjs/{index-yDPq0GyD.js → index-Bb064vv6.js}

@@ -255,10 +255,6 @@ var require_brace_expansion = __commonJS({
     }
   }
 });
-
-// src/utils/constants.ts
-var SVG_NS = "http://www.w3.org/2000/svg";
-var HTML_NS = "http://www.w3.org/1999/xhtml";
 var reWireGetterSetter = (instance, hostRef) => {
   var _a;
   const cmpMeta = hostRef.$cmpMeta$;
@@ -2126,9 +2122,6 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
         return propValue === "false" ? false : propValue === "" || !!propValue;
       }
     }
-    if (propType & 2 /* Number */) {
-      return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
-    }
     if (propType & 1 /* String */) {
       return String(propValue);
     }
@@ -2136,10 +2129,6 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   }
   return propValue;
 };
-var getElement = (ref) => {
-  var _a;
-  return (_a = getHostRef(ref)) == null ? void 0 : _a.$hostElement$ ;
-};
 var emitEvent = (elm, name, opts) => {
   const ev = plt.ce(name, opts);
   elm.dispatchEvent(ev);
@@ -2159,30 +2148,9 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
       classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
     }
-  } else if (memberName === "style") {
-    {
-      for (const prop in oldValue) {
-        if (!newValue || newValue[prop] == null) {
-          if (prop.includes("-")) {
-            elm.style.removeProperty(prop);
-          } else {
-            elm.style[prop] = "";
-          }
-        }
-      }
-    }
-    for (const prop in newValue) {
-      if (!oldValue || newValue[prop] !== oldValue[prop]) {
-        if (prop.includes("-")) {
-          elm.style.setProperty(prop, newValue[prop]);
-        } else {
-          elm.style[prop] = newValue[prop];
-        }
-      }
-    }
   } else if (memberName === "key") ; else {
     const isComplex = isComplexType(newValue);
-    if ((isProp || isComplex && newValue !== null) && !isSvg) {
+    if ((isProp || isComplex && newValue !== null) && true) {
       try {
         if (!elm.tagName.includes("-")) {
           const n = newValue == null ? "" : newValue;
@@ -2274,21 +2242,14 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
   if (newVNode2.$text$ !== null) {
     elm = newVNode2.$elm$ = win.document.createTextNode(newVNode2.$text$);
   } else {
-    if (!isSvgMode) {
-      isSvgMode = newVNode2.$tag$ === "svg";
-    }
     if (!win.document) {
       throw new Error(
         "You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component."
       );
     }
-    elm = newVNode2.$elm$ = win.document.createElementNS(
-      isSvgMode ? SVG_NS : HTML_NS,
+    elm = newVNode2.$elm$ = win.document.createElement(
       newVNode2.$tag$
-    ) ;
-    if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
-      isSvgMode = false;
-    }
+    );
     {
       updateElement(null, newVNode2, isSvgMode);
     }
@@ -2301,13 +2262,6 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
         }
       }
     }
-    {
-      if (newVNode2.$tag$ === "svg") {
-        isSvgMode = false;
-      } else if (elm.tagName === "foreignObject") {
-        isSvgMode = true;
-      }
-    }
   }
   elm["s-hn"] = hostTagName;
   return elm;
@@ -2465,9 +2419,6 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
   const tag = newVNode2.$tag$;
   const text = newVNode2.$text$;
   if (text === null) {
-    {
-      isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
-    }
     {
       if (tag === "slot" && !useNativeShadowDom) {
         if (oldVNode.$name$ !== newVNode2.$name$) {
@@ -2490,9 +2441,6 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
     ) {
       removeVnodes(oldChildren, 0, oldChildren.length - 1);
     } else ;
-    if (isSvgMode && tag === "svg") {
-      isSvgMode = false;
-    }
   } else if (oldVNode.$text$ !== text) {
     elm.data = text;
   }
@@ -3187,7 +3135,6 @@ function transformTag(tag) {
 }
 
 exports.bootstrapLazy = bootstrapLazy;
-exports.getElement = getElement;
 exports.globalScripts = globalScripts;
 exports.h = h;
 exports.promiseResolve = promiseResolve;

package/dist/cjs/loader.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-yDPq0GyD.js');
+var index = require('./index-Bb064vv6.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await index.globalScripts();
-  return index.bootstrapLazy([["ds-button_3.cjs",[[257,"ds-button",{"variant":[1],"disabled":[4]}],[257,"ds-card",{"surface":[1],"cardTitle":[1,"card-title"]}],[1,"ds-icon",{"name":[1],"size":[2],"color":[1],"basePath":[1,"base-path"],"lazy":[4],"label":[1],"svgContent":[32],"isLoading":[32],"hasError":[32]},null,{"name":[{"onNameChange":0}],"basePath":[{"onBasePathChange":0}]}]]]], options);
+  return index.bootstrapLazy([["ds-button_3.cjs",[[257,"ds-button",{"variant":[1],"disabled":[4],"icon":[1],"iconPosition":[1,"icon-position"]}],[257,"ds-card",{"surface":[1],"cardTitle":[1,"card-title"]}],[1,"ds-icon",{"name":[1],"basePath":[1,"base-path"],"svgContent":[32]},null,{"name":[{"onNameChange":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/ds-button/ds-button.css

@@ -50,14 +50,11 @@
 }
 
 /* =============================================================================
-   ICON SLOTS
-   Styling for slotted icons (icon-start and icon-end)
-   Icons use --icon-size token (24px) and inherit label color from button
+   ICON STYLING
    ============================================================================= */
 
-::slotted(ds-icon) {
-  --icon-size: var(--icon-size, 24px);
-  color: inherit;
+ds-icon {
+  --icon-size: var(--icon-size);
   flex-shrink: 0;
 }
 

package/dist/collection/ds-button/ds-button.js

@@ -3,21 +3,24 @@ export class DsButton {
     constructor() {
         /**
          * Button variant determining visual style.
-         * @default 'primary-brand'
          */
         this.variant = 'primary-brand';
         /**
-         * Disables the button interaction and applies disabled styling.
-         * @default false
+         * Disables the button.
          */
         this.disabled = false;
+        /**
+         * Icon position: 'start' or 'end'.
+         */
+        this.iconPosition = 'start';
     }
     render() {
-        return (h("button", { key: 'b2c29af56fa84e6274900496d1a57bf7be6070e0', class: {
+        const iconEl = this.icon ? h("ds-icon", { name: this.icon }) : null;
+        return (h("button", { key: '000508b5713956932132412d59f9ba1b9baa96c7', class: {
                 'ds-button': true,
                 [`ds-button--${this.variant}`]: true,
                 'ds-button--disabled': this.disabled,
-            }, disabled: this.disabled }, h("slot", { key: 'c87fb66dffa329b2911752390d69d808aea83ead', name: "icon-start" }), h("span", { key: '3049998d0fca7eef41dc5bbc51ab14d396855840', class: "ds-button__label" }, h("slot", { key: '540e93a8de6f0be305963e7b05b90dcbacda6f37' })), h("slot", { key: 'f48be5683052a40bb97436f20b219a42fb09319a', name: "icon-end" })));
+            }, disabled: this.disabled }, this.iconPosition === 'start' && iconEl, h("span", { key: '1cf189f05c1f2cdb82f54f6f2283eaa9c6e38381', class: "ds-button__label" }, h("slot", { key: '89eadaa81aaa4e458e46b29e02291ad45c027101' })), this.iconPosition === 'end' && iconEl));
     }
     static get is() { return "ds-button"; }
     static get encapsulation() { return "shadow"; }
@@ -50,10 +53,7 @@ export class DsButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "'primary-brand'"
-                        }],
+                    "tags": [],
                     "text": "Button variant determining visual style."
                 },
                 "getter": false,
@@ -73,17 +73,53 @@ export class DsButton {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "false"
-                        }],
-                    "text": "Disables the button interaction and applies disabled styling."
+                    "tags": [],
+                    "text": "Disables the button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "disabled",
                 "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name to display (optional)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "iconPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'start' | 'end'",
+                    "resolved": "\"end\" | \"start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon position: 'start' or 'end'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-position",
+                "defaultValue": "'start'"
             }
         };
     }

package/dist/collection/ds-card/ds-card.js

@@ -7,10 +7,10 @@ export class DsCard {
         this.surface = 'primary';
     }
     render() {
-        return (h("div", { key: '0709463754ee76974475f214840ade290ee7aa83', class: {
+        return (h("div", { key: '545dfb7389201a046b465e96723fdc8ad5cd1160', class: {
                 'ds-card': true,
                 [`ds-card--${this.surface}`]: true,
-            } }, this.cardTitle && (h("div", { key: 'e161468e870e419852e6ef9f92ab9fc24ac60635', class: "ds-card__header" }, h("h3", { key: '8cccde3f7e5ea185ef24d90312439d2e49621504', class: "ds-card__title" }, this.cardTitle))), h("div", { key: '47457839b1fa00f261c1fbfb8842904fb9bf8245', class: "ds-card__content" }, h("slot", { key: '009a1b1e7411daec2c67fd084d654de71875222e' }))));
+            } }, this.cardTitle && (h("div", { key: '63523222100e039098a941c2125df63a7bc8a0ee', class: "ds-card__header" }, h("h3", { key: '7e60906b0aeb4d8d20fc09a85d06f4d0bd4a95ae', class: "ds-card__title" }, this.cardTitle))), h("div", { key: '544d6b4e6ac95745261ee73c81f2d01c2806afd3', class: "ds-card__content" }, h("slot", { key: '9102bcc585687daf5d954059a138ad7bac27b640' }))));
     }
     static get is() { return "ds-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/ds-icon/ds-icon.css

@@ -1,74 +1,19 @@
-/* =============================================================================
-   DS-ICON Component Styles
-
-   Token-based styling for the icon component.
-   Icons inherit color from parent by default (currentColor).
-   ============================================================================= */
-
 :host {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  color: inherit;
 }
 
-/* =============================================================================
-   BASE STYLES
-   ============================================================================= */
-
 .ds-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--icon-size, 24px);
-  height: var(--icon-size, 24px);
-  color: var(--icon-color, currentColor);
-  flex-shrink: 0;
-}
-
-/* =============================================================================
-   SVG CONTAINER
-   ============================================================================= */
-
-.ds-icon__svg {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-/* Target the SVG element inside the container */
-.ds-icon__svg svg {
-  width: 100%;
-  height: 100%;
-  fill: currentColor;
-}
-
-/* =============================================================================
-   LOADING STATE
-   ============================================================================= */
-
-.ds-icon--loading {
-  opacity: 0.5;
-}
-
-/* =============================================================================
-   ERROR STATE
-   ============================================================================= */
-
-.ds-icon--error {
-  opacity: 0.3;
-}
-
-.ds-icon__error {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   width: 100%;
   height: 100%;
 }
 
-.ds-icon__error svg {
+.ds-icon svg {
   width: 100%;
   height: 100%;
   fill: currentColor;