@marioschmidt/design-system-components 1.2.3 → 1.3.1

package/dist/docs/ds-icon/readme.md

@@ -0,0 +1,19 @@
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property            | Attribute   | Description                                                                                                      | Type                  | Default          |
+| ------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------- | --------------------- | ---------------- |
+| `basePath`          | `base-path` | Base path for loading icon SVG files.                                                                            | `string`              | `'/icons'`       |
+| `color`             | `color`     | Color of the icon. Accepts any valid CSS color value. Icons use currentColor by default, inheriting from parent. | `string`              | `'currentColor'` |
+| `label`             | `label`     | Accessible label for screen readers. If provided, icon is treated as semantic (not decorative).                  | `string \| undefined` | `undefined`      |
+| `lazy`              | `lazy`      | Enable lazy loading with IntersectionObserver. Icon will only load when visible in viewport.                     | `boolean`             | `false`          |
+| `name` _(required)_ | `name`      | Name of the icon to display (without .svg extension). Must match a file in the icons directory.                  | `string`              | `undefined`      |
+| `size`              | `size`      | Size of the icon in pixels.                                                                                      | `number`              | `24`             |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/dist/esm/bds.js

@@ -1,5 +1,5 @@
-import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-s-li7f6Q.js';
-export { s as setNonce } from './index-s-li7f6Q.js';
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-DUrpTa_b.js';
+export { s as setNonce } from './index-DUrpTa_b.js';
 
 /*
  Stencil Client Patch Browser v4.41.0 | MIT Licensed | https://stenciljs.com
@@ -16,5 +16,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["ds-button_2",[[257,"ds-button",{"variant":[1],"disabled":[4]}],[257,"ds-card",{"surface":[1],"cardTitle":[1,"card-title"]}]]]], options);
+  return bootstrapLazy([["ds-button_3",[[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);
 });

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

@@ -0,0 +1,212 @@
+import { r as registerInstance, h, a as getElement } from './index-DUrpTa_b.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 DsButton = class {
+    constructor(hostRef) {
+        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
+         */
+        this.disabled = false;
+    }
+    render() {
+        return (h("button", { key: 'b2c29af56fa84e6274900496d1a57bf7be6070e0', 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" })));
+    }
+};
+DsButton.style = dsButtonCss();
+
+const dsCardCss = () => `:host{display:block}.ds-card{border-radius:var(--border-radius-lg, 8px);overflow:hidden;transition:box-shadow 0.2s ease}.ds-card--primary{background-color:var(--card-surface-bg-color, var(--surface-color-primary, #FFFFFF));box-shadow:var(--shadow-soft-md, 0 2px 8px rgba(0, 0, 0, 0.1))}.ds-card--secondary{background-color:var(--surface-color-secondary, #F8F9FA);box-shadow:var(--shadow-soft-sm, 0 1px 4px rgba(0, 0, 0, 0.08))}.ds-card__header{padding:var(--space-2-x, 16px) var(--space-2-x, 16px) 0}.ds-card__title{margin:0;font-family:var(--font-family-gotham-narrow, sans-serif);font-weight:var(--font-weight-bold, 700);font-size:var(--headline-3-font-size, 20px);line-height:var(--headline-3-line-height, 24px);color:var(--text-color-primary, #232629)}.ds-card__content{padding:var(--space-2-x, 16px)}.ds-card--primary:hover{box-shadow:var(--shadow-soft-lg, 0 4px 16px rgba(0, 0, 0, 0.12))}`;
+
+const DsCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Card surface variant: primary or secondary
+         */
+        this.surface = 'primary';
+    }
+    render() {
+        return (h("div", { key: '0709463754ee76974475f214840ade290ee7aa83', 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' }))));
+    }
+};
+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}`;
+
+/**
+ * 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) {
+        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'
+         */
+        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();
+    }
+    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);
+    }
+    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;
+            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;
+            }
+            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;
+        }
+        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}`);
+        }
+        return svgText;
+    }
+    render() {
+        const isDecorative = !this.label;
+        return (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 ? (h("span", { class: "ds-icon__svg", innerHTML: this.svgContent })) : this.hasError ? (h("span", { class: "ds-icon__error", title: `Icon "${this.name}" not found` }, h("svg", { viewBox: "0 0 24 24", fill: "currentColor" }, 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));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "name": [{
+                "onNameChange": 0
+            }],
+        "basePath": [{
+                "onBasePathChange": 0
+            }]
+    }; }
+};
+DsIcon.style = dsIconCss();
+
+export { DsButton as ds_button, DsCard as ds_card, DsIcon as ds_icon };