@marioschmidt/design-system-components 1.2.3 → 1.3.1

package/dist/esm/loader.js

@@ -1,10 +1,10 @@
-import { g as globalScripts, b as bootstrapLazy } from './index-s-li7f6Q.js';
-export { s as setNonce } from './index-s-li7f6Q.js';
+import { g as globalScripts, b as bootstrapLazy } from './index-DUrpTa_b.js';
+export { s as setNonce } from './index-DUrpTa_b.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   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);
 };
 
 export { defineCustomElements };

package/dist/types/components.d.ts

@@ -31,6 +31,37 @@ export namespace Components {
          */
         "surface": 'primary' | 'secondary';
     }
+    interface DsIcon {
+        /**
+          * Base path for loading icon SVG files.
+          * @default '/icons'
+         */
+        "basePath": string;
+        /**
+          * Color of the icon. Accepts any valid CSS color value. Icons use currentColor by default, inheriting from parent.
+          * @default 'currentColor'
+         */
+        "color": string;
+        /**
+          * Accessible label for screen readers. If provided, icon is treated as semantic (not decorative).
+         */
+        "label"?: string;
+        /**
+          * Enable lazy loading with IntersectionObserver. Icon will only load when visible in viewport.
+          * @default false
+         */
+        "lazy": boolean;
+        /**
+          * Name of the icon to display (without .svg extension). Must match a file in the icons directory.
+          * @example "add", "arrow-left", "close"
+         */
+        "name": string;
+        /**
+          * Size of the icon in pixels.
+          * @default 24
+         */
+        "size": number;
+    }
 }
 declare global {
     interface HTMLDsButtonElement extends Components.DsButton, HTMLStencilElement {
@@ -45,9 +76,16 @@ declare global {
         prototype: HTMLDsCardElement;
         new (): HTMLDsCardElement;
     };
+    interface HTMLDsIconElement extends Components.DsIcon, HTMLStencilElement {
+    }
+    var HTMLDsIconElement: {
+        prototype: HTMLDsIconElement;
+        new (): HTMLDsIconElement;
+    };
     interface HTMLElementTagNameMap {
         "ds-button": HTMLDsButtonElement;
         "ds-card": HTMLDsCardElement;
+        "ds-icon": HTMLDsIconElement;
     }
 }
 declare namespace LocalJSX {
@@ -74,9 +112,41 @@ declare namespace LocalJSX {
          */
         "surface"?: 'primary' | 'secondary';
     }
+    interface DsIcon {
+        /**
+          * Base path for loading icon SVG files.
+          * @default '/icons'
+         */
+        "basePath"?: string;
+        /**
+          * Color of the icon. Accepts any valid CSS color value. Icons use currentColor by default, inheriting from parent.
+          * @default 'currentColor'
+         */
+        "color"?: string;
+        /**
+          * Accessible label for screen readers. If provided, icon is treated as semantic (not decorative).
+         */
+        "label"?: string;
+        /**
+          * Enable lazy loading with IntersectionObserver. Icon will only load when visible in viewport.
+          * @default false
+         */
+        "lazy"?: boolean;
+        /**
+          * Name of the icon to display (without .svg extension). Must match a file in the icons directory.
+          * @example "add", "arrow-left", "close"
+         */
+        "name": string;
+        /**
+          * Size of the icon in pixels.
+          * @default 24
+         */
+        "size"?: number;
+    }
     interface IntrinsicElements {
         "ds-button": DsButton;
         "ds-card": DsCard;
+        "ds-icon": DsIcon;
     }
 }
 export { LocalJSX as JSX };
@@ -85,6 +155,7 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "ds-button": LocalJSX.DsButton & JSXBase.HTMLAttributes<HTMLDsButtonElement>;
             "ds-card": LocalJSX.DsCard & JSXBase.HTMLAttributes<HTMLDsCardElement>;
+            "ds-icon": LocalJSX.DsIcon & JSXBase.HTMLAttributes<HTMLDsIconElement>;
         }
     }
 }

package/dist/types/ds-icon/ds-icon.d.ts

@@ -0,0 +1,58 @@
+export declare class DsIcon {
+    el: HTMLElement;
+    /**
+     * Name of the icon to display (without .svg extension).
+     * Must match a file in the icons directory.
+     * @example "add", "arrow-left", "close"
+     */
+    name: string;
+    /**
+     * Size of the icon in pixels.
+     * @default 24
+     */
+    size: number;
+    /**
+     * Color of the icon. Accepts any valid CSS color value.
+     * Icons use currentColor by default, inheriting from parent.
+     * @default 'currentColor'
+     */
+    color: string;
+    /**
+     * Base path for loading icon SVG files.
+     * @default '/icons'
+     */
+    basePath: string;
+    /**
+     * Enable lazy loading with IntersectionObserver.
+     * Icon will only load when visible in viewport.
+     * @default false
+     */
+    lazy: boolean;
+    /**
+     * Accessible label for screen readers.
+     * If provided, icon is treated as semantic (not decorative).
+     */
+    label?: string;
+    /**
+     * Internal state for the loaded SVG content.
+     */
+    svgContent: string;
+    /**
+     * Internal state for loading status.
+     */
+    isLoading: boolean;
+    /**
+     * Internal state for error status.
+     */
+    hasError: boolean;
+    private observer?;
+    private isVisible;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    onNameChange(): void;
+    onBasePathChange(): void;
+    private setupIntersectionObserver;
+    private loadIcon;
+    private fetchIcon;
+    render(): any;
+}