@nuralyui/skeleton 0.0.1

package/skeleton.component.js

@@ -0,0 +1,387 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { styles } from './skeleton.style.js';
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+/**
+ * # Skeleton Component
+ *
+ * Provides a placeholder while content is loading, or to visualize content that doesn't exist yet.
+ * Improves perceived performance and user experience during data fetching.
+ *
+ * ## Features
+ * - Multiple skeleton elements (Avatar, Title, Paragraph, Button, Input, Image)
+ * - Active animation effect
+ * - Customizable shapes (circle, square, round)
+ * - Configurable sizes (small, default, large)
+ * - Loading state management
+ * - Theme-aware styling
+ * - Flexible configuration options
+ *
+ * ## Usage
+ * ```html
+ * <!-- Basic skeleton -->
+ * <nr-skeleton></nr-skeleton>
+ *
+ * <!-- With active animation -->
+ * <nr-skeleton active></nr-skeleton>
+ *
+ * <!-- Complex skeleton with avatar -->
+ * <nr-skeleton avatar active></nr-skeleton>
+ *
+ * <!-- Loading state with content -->
+ * <nr-skeleton loading>
+ *   <div slot="content">
+ *     <h3>Article Title</h3>
+ *     <p>Article content goes here...</p>
+ *   </div>
+ * </nr-skeleton>
+ *
+ * <!-- Skeleton button -->
+ * <nr-skeleton element="button" active></nr-skeleton>
+ *
+ * <!-- Skeleton input -->
+ * <nr-skeleton element="input" block></nr-skeleton>
+ * ```
+ *
+ * @element nr-skeleton
+ *
+ * @slot content - Content to show when loading is false
+ *
+ * @cssproperty --nuraly-skeleton-background - Background color of skeleton elements
+ * @cssproperty --nuraly-skeleton-gradient-from - Start color of active animation gradient
+ * @cssproperty --nuraly-skeleton-gradient-to - End color of active animation gradient
+ * @cssproperty --nuraly-skeleton-icon-color - Color of image placeholder icon
+ */
+let NrSkeletonElement = class NrSkeletonElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Show animation effect
+         */
+        this.active = false;
+        /**
+         * Show avatar placeholder
+         */
+        this.avatar = false;
+        /**
+         * Avatar configuration
+         */
+        this.avatarConfig = {};
+        /**
+         * Display the skeleton when true
+         */
+        this.loading = true;
+        /**
+         * Show paragraph placeholder
+         */
+        this.paragraph = true;
+        /**
+         * Paragraph configuration
+         */
+        this.paragraphConfig = {};
+        /**
+         * Show paragraph and title radius when true
+         */
+        this.round = false;
+        /**
+         * Show title placeholder
+         */
+        this.showTitle = true;
+        /**
+         * Title configuration
+         */
+        this.titleConfig = {};
+        /**
+         * Button configuration
+         */
+        this.buttonConfig = {};
+        /**
+         * Input configuration
+         */
+        this.inputConfig = {};
+        /**
+         * Image configuration
+         */
+        this.imageConfig = {};
+        /**
+         * Block style for button/input
+         */
+        this.block = false;
+        /**
+         * Shape for standalone elements
+         */
+        this.shape = "default" /* SkeletonShape.Default */;
+        /**
+         * Size for standalone elements
+         */
+        this.size = "default" /* SkeletonSize.Default */;
+    }
+    /**
+     * Render avatar skeleton
+     */
+    renderAvatar() {
+        const config = typeof this.avatar === 'object' ? this.avatar : this.avatarConfig;
+        const shape = config.shape || "circle" /* SkeletonShape.Circle */;
+        const size = config.size || "default" /* SkeletonSize.Default */;
+        const sizeClass = typeof size === 'number' ? '' : size;
+        const customSize = typeof size === 'number' ? { width: `${size}px`, height: `${size}px` } : {};
+        return html `
+      <div
+        class=${classMap({
+            'skeleton-avatar': true,
+            [`skeleton-avatar--${shape}`]: true,
+            [`skeleton-avatar--${sizeClass}`]: !!sizeClass,
+        })}
+        style=${styleMap(customSize)}></div>
+    `;
+    }
+    /**
+     * Render title skeleton
+     */
+    renderTitle() {
+        const config = typeof this.showTitle === 'object' ? this.showTitle : this.titleConfig;
+        const width = config.width;
+        const customWidth = width ? { width: typeof width === 'number' ? `${width}px` : width } : { width: '38%' };
+        return html `
+      <div
+        class=${classMap({
+            'skeleton-title': true,
+            'skeleton-title--round': this.round,
+        })}
+        style=${styleMap(customWidth)}></div>
+    `;
+    }
+    /**
+     * Render paragraph skeleton
+     */
+    renderParagraph() {
+        const config = typeof this.paragraph === 'object' ? this.paragraph : this.paragraphConfig;
+        const rows = config.rows || 3;
+        const widthConfig = config.width;
+        const getLineWidth = (index) => {
+            if (Array.isArray(widthConfig)) {
+                const width = widthConfig[index];
+                return width ? { width: typeof width === 'number' ? `${width}px` : width } : {};
+            }
+            // Last line uses custom width or 61%
+            if (index === rows - 1) {
+                if (widthConfig) {
+                    return { width: typeof widthConfig === 'number' ? `${widthConfig}px` : widthConfig };
+                }
+                return { width: '61%' };
+            }
+            return {};
+        };
+        return html `
+      <div class="skeleton-paragraph">
+        ${Array.from({ length: rows }, (_, i) => html `
+          <div
+            class=${classMap({
+            'skeleton-paragraph-line': true,
+            'skeleton-paragraph-line--round': this.round,
+        })}
+            style=${styleMap(getLineWidth(i))}></div>
+        `)}
+      </div>
+    `;
+    }
+    /**
+     * Render button skeleton
+     */
+    renderButton() {
+        const config = this.buttonConfig;
+        const buttonShape = config.shape || this.shape;
+        const buttonSize = config.size || this.size;
+        const buttonBlock = config.block !== undefined ? config.block : this.block;
+        return html `
+      <div
+        class=${classMap({
+            'skeleton-button': true,
+            [`skeleton-button--${buttonShape}`]: true,
+            [`skeleton-button--${buttonSize}`]: true,
+            'skeleton-button--block': buttonBlock,
+        })}></div>
+    `;
+    }
+    /**
+     * Render input skeleton
+     */
+    renderInput() {
+        const config = this.inputConfig;
+        const inputSize = config.size || this.size;
+        const inputBlock = config.block !== undefined ? config.block : this.block;
+        return html `
+      <div
+        class=${classMap({
+            'skeleton-input': true,
+            [`skeleton-input--${inputSize}`]: true,
+            'skeleton-input--block': inputBlock,
+        })}></div>
+    `;
+    }
+    /**
+     * Render image skeleton
+     */
+    renderImage() {
+        return html `
+      <div class="skeleton-image">
+        <svg
+          class="skeleton-image-icon"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+          width="48"
+          height="48">
+          <path
+            d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zM338 304c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm513.9 437.1c-2.1 2.1-4.5 3.8-7 5.1-5.2 2.7-11.1 4.1-17.1 4.1H196.2c-6 0-11.9-1.4-17.1-4.1-2.5-1.3-4.9-3-7-5.1-4.4-4.4-7.1-10.5-7.1-17.1 0-3.7.8-7.4 2.5-10.8 1.6-3.4 4.1-6.4 7.1-8.8l112.3-97.5c8.8-7.6 22.1-7.6 30.9 0l148.5 129 203.9-177c8.8-7.6 22.1-7.6 30.9 0l179.8 156.1c3 2.6 5.5 5.7 7.1 9.3 1.7 3.7 2.5 7.6 2.5 11.6-.1 6.6-2.8 12.7-7.2 17.1z"
+            fill="currentColor" />
+        </svg>
+      </div>
+    `;
+    }
+    /**
+     * Render standalone element
+     */
+    renderStandaloneElement() {
+        switch (this.element) {
+            case "button" /* SkeletonElementType.Button */:
+                return this.renderButton();
+            case "input" /* SkeletonElementType.Input */:
+                return this.renderInput();
+            case "image" /* SkeletonElementType.Image */:
+                return this.renderImage();
+            case "avatar" /* SkeletonElementType.Avatar */:
+                return this.renderAvatar();
+            default:
+                return html ``;
+        }
+    }
+    /**
+     * Render full skeleton
+     */
+    renderSkeleton() {
+        // If element type is specified, render standalone element
+        if (this.element) {
+            return html `
+        <div
+          class=${classMap({
+                'skeleton': true,
+                'skeleton--active': this.active || (this.element === "avatar" /* SkeletonElementType.Avatar */ && !!this.avatarConfig.active),
+            })}>
+          ${this.renderStandaloneElement()}
+        </div>
+      `;
+        }
+        // Render full skeleton layout
+        return html `
+      <div
+        class=${classMap({
+            'skeleton': true,
+            'skeleton--active': this.active,
+        })}>
+        ${this.avatar || this.showTitle || this.paragraph
+            ? html `
+              ${this.avatar
+                ? html `
+                    <div class="skeleton-header">
+                      ${this.renderAvatar()}
+                      ${this.showTitle || this.paragraph
+                    ? html `
+                            <div class="skeleton-content">
+                              ${this.showTitle ? this.renderTitle() : ''}
+                              ${this.paragraph ? this.renderParagraph() : ''}
+                            </div>
+                          `
+                    : ''}
+                    </div>
+                  `
+                : html `
+                    <div class="skeleton-content">
+                      ${this.showTitle ? this.renderTitle() : ''}
+                      ${this.paragraph ? this.renderParagraph() : ''}
+                    </div>
+                  `}
+            `
+            : ''}
+      </div>
+    `;
+    }
+    render() {
+        // If loading is false, show slotted content
+        if (!this.loading) {
+            return html `
+        <div class="skeleton-wrapper">
+          <slot name="content"><slot></slot></slot>
+        </div>
+      `;
+        }
+        // Show skeleton
+        return this.renderSkeleton();
+    }
+};
+NrSkeletonElement.styles = styles;
+__decorate([
+    property({ type: Boolean })
+], NrSkeletonElement.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrSkeletonElement.prototype, "avatar", void 0);
+__decorate([
+    property({ type: Object, attribute: 'avatar-config' })
+], NrSkeletonElement.prototype, "avatarConfig", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrSkeletonElement.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrSkeletonElement.prototype, "paragraph", void 0);
+__decorate([
+    property({ type: Object, attribute: 'paragraph-config' })
+], NrSkeletonElement.prototype, "paragraphConfig", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrSkeletonElement.prototype, "round", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-title' })
+], NrSkeletonElement.prototype, "showTitle", void 0);
+__decorate([
+    property({ type: Object, attribute: 'title-config' })
+], NrSkeletonElement.prototype, "titleConfig", void 0);
+__decorate([
+    property({ type: String })
+], NrSkeletonElement.prototype, "element", void 0);
+__decorate([
+    property({ type: Object, attribute: 'button-config' })
+], NrSkeletonElement.prototype, "buttonConfig", void 0);
+__decorate([
+    property({ type: Object, attribute: 'input-config' })
+], NrSkeletonElement.prototype, "inputConfig", void 0);
+__decorate([
+    property({ type: Object, attribute: 'image-config' })
+], NrSkeletonElement.prototype, "imageConfig", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrSkeletonElement.prototype, "block", void 0);
+__decorate([
+    property({ type: String })
+], NrSkeletonElement.prototype, "shape", void 0);
+__decorate([
+    property({ type: String })
+], NrSkeletonElement.prototype, "size", void 0);
+NrSkeletonElement = __decorate([
+    customElement('nr-skeleton')
+], NrSkeletonElement);
+export { NrSkeletonElement };
+//# sourceMappingURL=skeleton.component.js.map

package/skeleton.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.component.js","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { styles } from './skeleton.style.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport {\n    SkeletonShape,\n    SkeletonSize,\n    SkeletonElementType,\n    SkeletonAvatarConfig,\n    SkeletonTitleConfig,\n    SkeletonParagraphConfig,\n    SkeletonButtonConfig,\n    SkeletonInputConfig,\n    SkeletonImageConfig,\n} from './skeleton.types.js';\n\n/**\n * # Skeleton Component\n *\n * Provides a placeholder while content is loading, or to visualize content that doesn't exist yet.\n * Improves perceived performance and user experience during data fetching.\n *\n * ## Features\n * - Multiple skeleton elements (Avatar, Title, Paragraph, Button, Input, Image)\n * - Active animation effect\n * - Customizable shapes (circle, square, round)\n * - Configurable sizes (small, default, large)\n * - Loading state management\n * - Theme-aware styling\n * - Flexible configuration options\n *\n * ## Usage\n * ```html\n * <!-- Basic skeleton -->\n * <nr-skeleton></nr-skeleton>\n *\n * <!-- With active animation -->\n * <nr-skeleton active></nr-skeleton>\n *\n * <!-- Complex skeleton with avatar -->\n * <nr-skeleton avatar active></nr-skeleton>\n *\n * <!-- Loading state with content -->\n * <nr-skeleton loading>\n *   <div slot=\"content\">\n *     <h3>Article Title</h3>\n *     <p>Article content goes here...</p>\n *   </div>\n * </nr-skeleton>\n *\n * <!-- Skeleton button -->\n * <nr-skeleton element=\"button\" active></nr-skeleton>\n *\n * <!-- Skeleton input -->\n * <nr-skeleton element=\"input\" block></nr-skeleton>\n * ```\n *\n * @element nr-skeleton\n *\n * @slot content - Content to show when loading is false\n *\n * @cssproperty --nuraly-skeleton-background - Background color of skeleton elements\n * @cssproperty --nuraly-skeleton-gradient-from - Start color of active animation gradient\n * @cssproperty --nuraly-skeleton-gradient-to - End color of active animation gradient\n * @cssproperty --nuraly-skeleton-icon-color - Color of image placeholder icon\n */\n@customElement('nr-skeleton')\nexport class NrSkeletonElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  /**\n   * Show animation effect\n   */\n  @property({ type: Boolean }) active = false;\n\n  /**\n   * Show avatar placeholder\n   */\n  @property({ type: Boolean }) avatar = false;\n\n  /**\n   * Avatar configuration\n   */\n  @property({ type: Object, attribute: 'avatar-config' }) avatarConfig: SkeletonAvatarConfig = {};\n\n  /**\n   * Display the skeleton when true\n   */\n  @property({ type: Boolean }) loading = true;\n\n  /**\n   * Show paragraph placeholder\n   */\n  @property({ type: Boolean }) paragraph = true;\n\n  /**\n   * Paragraph configuration\n   */\n  @property({ type: Object, attribute: 'paragraph-config' }) paragraphConfig: SkeletonParagraphConfig = {};\n\n  /**\n   * Show paragraph and title radius when true\n   */\n  @property({ type: Boolean }) round = false;\n\n  /**\n   * Show title placeholder\n   */\n  @property({ type: Boolean, attribute: 'show-title' }) showTitle = true;\n\n  /**\n   * Title configuration\n   */\n  @property({ type: Object, attribute: 'title-config' }) titleConfig: SkeletonTitleConfig = {};\n\n  /**\n   * Element type for standalone skeleton elements\n   */\n  @property({ type: String }) element?: SkeletonElementType;\n\n  /**\n   * Button configuration\n   */\n  @property({ type: Object, attribute: 'button-config' }) buttonConfig: SkeletonButtonConfig = {};\n\n  /**\n   * Input configuration\n   */\n  @property({ type: Object, attribute: 'input-config' }) inputConfig: SkeletonInputConfig = {};\n\n  /**\n   * Image configuration\n   */\n  @property({ type: Object, attribute: 'image-config' }) imageConfig: SkeletonImageConfig = {};\n\n  /**\n   * Block style for button/input\n   */\n  @property({ type: Boolean }) block = false;\n\n  /**\n   * Shape for standalone elements\n   */\n  @property({ type: String }) shape: SkeletonShape = SkeletonShape.Default;\n\n  /**\n   * Size for standalone elements\n   */\n  @property({ type: String }) size: SkeletonSize = SkeletonSize.Default;\n\n  /**\n   * Render avatar skeleton\n   */\n  private renderAvatar() {\n    const config = typeof this.avatar === 'object' ? this.avatar : this.avatarConfig;\n    const shape = config.shape || SkeletonShape.Circle;\n    const size = config.size || SkeletonSize.Default;\n    \n    const sizeClass = typeof size === 'number' ? '' : size;\n    const customSize = typeof size === 'number' ? { width: `${size}px`, height: `${size}px` } : {};\n\n    return html`\n      <div\n        class=${classMap({\n          'skeleton-avatar': true,\n          [`skeleton-avatar--${shape}`]: true,\n          [`skeleton-avatar--${sizeClass}`]: !!sizeClass,\n        })}\n        style=${styleMap(customSize)}></div>\n    `;\n  }\n\n  /**\n   * Render title skeleton\n   */\n  private renderTitle() {\n    const config = typeof this.showTitle === 'object' ? this.showTitle as any : this.titleConfig;\n    const width = config.width;\n    const customWidth = width ? { width: typeof width === 'number' ? `${width}px` : width } : { width: '38%' };\n\n    return html`\n      <div\n        class=${classMap({\n          'skeleton-title': true,\n          'skeleton-title--round': this.round,\n        })}\n        style=${styleMap(customWidth)}></div>\n    `;\n  }\n\n  /**\n   * Render paragraph skeleton\n   */\n  private renderParagraph() {\n    const config = typeof this.paragraph === 'object' ? this.paragraph : this.paragraphConfig;\n    const rows = config.rows || 3;\n    const widthConfig = config.width;\n\n    const getLineWidth = (index: number): Record<string, string> => {\n      if (Array.isArray(widthConfig)) {\n        const width = widthConfig[index];\n        return width ? { width: typeof width === 'number' ? `${width}px` : width } : {};\n      }\n      \n      // Last line uses custom width or 61%\n      if (index === rows - 1) {\n        if (widthConfig) {\n          return { width: typeof widthConfig === 'number' ? `${widthConfig}px` : widthConfig };\n        }\n        return { width: '61%' };\n      }\n      \n      return {};\n    };\n\n    return html`\n      <div class=\"skeleton-paragraph\">\n        ${Array.from({ length: rows }, (_, i) => html`\n          <div\n            class=${classMap({\n              'skeleton-paragraph-line': true,\n              'skeleton-paragraph-line--round': this.round,\n            })}\n            style=${styleMap(getLineWidth(i))}></div>\n        `)}\n      </div>\n    `;\n  }\n\n  /**\n   * Render button skeleton\n   */\n  private renderButton() {\n    const config = this.buttonConfig;\n    const buttonShape = config.shape || this.shape;\n    const buttonSize = config.size || this.size;\n    const buttonBlock = config.block !== undefined ? config.block : this.block;\n\n    return html`\n      <div\n        class=${classMap({\n          'skeleton-button': true,\n          [`skeleton-button--${buttonShape}`]: true,\n          [`skeleton-button--${buttonSize}`]: true,\n          'skeleton-button--block': buttonBlock,\n        })}></div>\n    `;\n  }\n\n  /**\n   * Render input skeleton\n   */\n  private renderInput() {\n    const config = this.inputConfig;\n    const inputSize = config.size || this.size;\n    const inputBlock = config.block !== undefined ? config.block : this.block;\n\n    return html`\n      <div\n        class=${classMap({\n          'skeleton-input': true,\n          [`skeleton-input--${inputSize}`]: true,\n          'skeleton-input--block': inputBlock,\n        })}></div>\n    `;\n  }\n\n  /**\n   * Render image skeleton\n   */\n  private renderImage() {\n    return html`\n      <div class=\"skeleton-image\">\n        <svg\n          class=\"skeleton-image-icon\"\n          viewBox=\"0 0 1024 1024\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"48\"\n          height=\"48\">\n          <path\n            d=\"M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zM338 304c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm513.9 437.1c-2.1 2.1-4.5 3.8-7 5.1-5.2 2.7-11.1 4.1-17.1 4.1H196.2c-6 0-11.9-1.4-17.1-4.1-2.5-1.3-4.9-3-7-5.1-4.4-4.4-7.1-10.5-7.1-17.1 0-3.7.8-7.4 2.5-10.8 1.6-3.4 4.1-6.4 7.1-8.8l112.3-97.5c8.8-7.6 22.1-7.6 30.9 0l148.5 129 203.9-177c8.8-7.6 22.1-7.6 30.9 0l179.8 156.1c3 2.6 5.5 5.7 7.1 9.3 1.7 3.7 2.5 7.6 2.5 11.6-.1 6.6-2.8 12.7-7.2 17.1z\"\n            fill=\"currentColor\" />\n        </svg>\n      </div>\n    `;\n  }\n\n  /**\n   * Render standalone element\n   */\n  private renderStandaloneElement() {\n    switch (this.element) {\n      case SkeletonElementType.Button:\n        return this.renderButton();\n      case SkeletonElementType.Input:\n        return this.renderInput();\n      case SkeletonElementType.Image:\n        return this.renderImage();\n      case SkeletonElementType.Avatar:\n        return this.renderAvatar();\n      default:\n        return html``;\n    }\n  }\n\n  /**\n   * Render full skeleton\n   */\n  private renderSkeleton() {\n    // If element type is specified, render standalone element\n    if (this.element) {\n      return html`\n        <div\n          class=${classMap({\n            'skeleton': true,\n            'skeleton--active': this.active || (this.element === SkeletonElementType.Avatar && !!this.avatarConfig.active),\n          })}>\n          ${this.renderStandaloneElement()}\n        </div>\n      `;\n    }\n\n    // Render full skeleton layout\n    return html`\n      <div\n        class=${classMap({\n          'skeleton': true,\n          'skeleton--active': this.active,\n        })}>\n        ${this.avatar || this.showTitle || this.paragraph\n          ? html`\n              ${this.avatar\n                ? html`\n                    <div class=\"skeleton-header\">\n                      ${this.renderAvatar()}\n                      ${this.showTitle || this.paragraph\n                        ? html`\n                            <div class=\"skeleton-content\">\n                              ${this.showTitle ? this.renderTitle() : ''}\n                              ${this.paragraph ? this.renderParagraph() : ''}\n                            </div>\n                          `\n                        : ''}\n                    </div>\n                  `\n                : html`\n                    <div class=\"skeleton-content\">\n                      ${this.showTitle ? this.renderTitle() : ''}\n                      ${this.paragraph ? this.renderParagraph() : ''}\n                    </div>\n                  `}\n            `\n          : ''}\n      </div>\n    `;\n  }\n\n  override render() {\n    // If loading is false, show slotted content\n    if (!this.loading) {\n      return html`\n        <div class=\"skeleton-wrapper\">\n          <slot name=\"content\"><slot></slot></slot>\n        </div>\n      `;\n    }\n\n    // Show skeleton\n    return this.renderSkeleton();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-skeleton': NrSkeletonElement;\n  }\n}\n"]}

package/skeleton.style.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=skeleton.style.d.ts.map

package/skeleton.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.style.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA6NlB,CAAC"}

package/skeleton.style.js

@@ -0,0 +1,224 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+
+  .skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .skeleton-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .skeleton-content {
+    flex: 1;
+  }
+
+  /* Avatar */
+  .skeleton-avatar {
+    flex-shrink: 0;
+    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    border-radius: 4px;
+  }
+
+  .skeleton-avatar--circle {
+    border-radius: 50%;
+  }
+
+  .skeleton-avatar--square {
+    border-radius: 4px;
+  }
+
+  .skeleton-avatar--small {
+    width: 32px;
+    height: 32px;
+  }
+
+  .skeleton-avatar--default {
+    width: 40px;
+    height: 40px;
+  }
+
+  .skeleton-avatar--large {
+    width: 48px;
+    height: 48px;
+  }
+
+  /* Title */
+  .skeleton-title {
+    height: 16px;
+    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    border-radius: 4px;
+    margin-bottom: 12px;
+  }
+
+  .skeleton-title--round {
+    border-radius: 8px;
+  }
+
+  /* Paragraph */
+  .skeleton-paragraph {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .skeleton-paragraph-line {
+    height: 16px;
+    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    border-radius: 4px;
+  }
+
+  .skeleton-paragraph-line--round {
+    border-radius: 8px;
+  }
+
+  /* Button */
+  .skeleton-button {
+    display: inline-block;
+    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    border-radius: 4px;
+  }
+
+  .skeleton-button--block {
+    display: block;
+    width: 100%;
+  }
+
+  .skeleton-button--circle {
+    border-radius: 50%;
+  }
+
+  .skeleton-button--round {
+    border-radius: 16px;
+  }
+
+  .skeleton-button--square {
+    border-radius: 4px;
+  }
+
+  .skeleton-button--small {
+    width: 64px;
+    height: 24px;
+  }
+
+  .skeleton-button--default {
+    width: 80px;
+    height: 32px;
+  }
+
+  .skeleton-button--large {
+    width: 96px;
+    height: 40px;
+  }
+
+  /* Input */
+  .skeleton-input {
+    display: block;
+    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    border-radius: 4px;
+  }
+
+  .skeleton-input--small {
+    height: 24px;
+  }
+
+  .skeleton-input--default {
+    height: 32px;
+  }
+
+  .skeleton-input--large {
+    height: 40px;
+  }
+
+  .skeleton-input--block {
+    width: 100%;
+  }
+
+  /* Image */
+  .skeleton-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    border-radius: 4px;
+    width: 100%;
+    height: 200px;
+  }
+
+  .skeleton-image-icon {
+    font-size: 48px;
+    color: var(--nuraly-skeleton-icon-color, rgba(0, 0, 0, 0.15));
+  }
+
+  /* Active animation */
+  @keyframes skeleton-loading {
+    0% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0 50%;
+    }
+  }
+
+  .skeleton--active .skeleton-avatar,
+  .skeleton--active .skeleton-title,
+  .skeleton--active .skeleton-paragraph-line,
+  .skeleton--active .skeleton-button,
+  .skeleton--active .skeleton-input,
+  .skeleton--active .skeleton-image {
+    background: linear-gradient(
+      90deg,
+      var(--nuraly-skeleton-gradient-from, rgba(0, 0, 0, 0.06)) 25%,
+      var(--nuraly-skeleton-gradient-to, rgba(0, 0, 0, 0.15)) 37%,
+      var(--nuraly-skeleton-gradient-from, rgba(0, 0, 0, 0.06)) 63%
+    );
+    background-size: 400% 100%;
+    animation: skeleton-loading 1.4s ease infinite;
+  }
+
+  /* Dark theme support */
+  :host([theme='carbon-dark']) .skeleton-avatar,
+  :host([theme='carbon-dark']) .skeleton-title,
+  :host([theme='carbon-dark']) .skeleton-paragraph-line,
+  :host([theme='carbon-dark']) .skeleton-button,
+  :host([theme='carbon-dark']) .skeleton-input,
+  :host([theme='carbon-dark']) .skeleton-image {
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  :host([theme='carbon-dark']) .skeleton-image-icon {
+    color: rgba(255, 255, 255, 0.15);
+  }
+
+  :host([theme='carbon-dark']) .skeleton--active .skeleton-avatar,
+  :host([theme='carbon-dark']) .skeleton--active .skeleton-title,
+  :host([theme='carbon-dark']) .skeleton--active .skeleton-paragraph-line,
+  :host([theme='carbon-dark']) .skeleton--active .skeleton-button,
+  :host([theme='carbon-dark']) .skeleton--active .skeleton-input,
+  :host([theme='carbon-dark']) .skeleton--active .skeleton-image {
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.08) 25%,
+      rgba(255, 255, 255, 0.15) 37%,
+      rgba(255, 255, 255, 0.08) 63%
+    );
+    background-size: 400% 100%;
+  }
+
+  /* Content wrapper for loading state */
+  .skeleton-wrapper {
+    display: block;
+  }
+
+  .skeleton-wrapper--hidden {
+    display: none;
+  }
+`;
+//# sourceMappingURL=skeleton.style.js.map

package/skeleton.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.style.js","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6NxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n  }\n\n  .skeleton {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n  }\n\n  .skeleton-header {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n  }\n\n  .skeleton-content {\n    flex: 1;\n  }\n\n  /* Avatar */\n  .skeleton-avatar {\n    flex-shrink: 0;\n    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));\n    border-radius: 4px;\n  }\n\n  .skeleton-avatar--circle {\n    border-radius: 50%;\n  }\n\n  .skeleton-avatar--square {\n    border-radius: 4px;\n  }\n\n  .skeleton-avatar--small {\n    width: 32px;\n    height: 32px;\n  }\n\n  .skeleton-avatar--default {\n    width: 40px;\n    height: 40px;\n  }\n\n  .skeleton-avatar--large {\n    width: 48px;\n    height: 48px;\n  }\n\n  /* Title */\n  .skeleton-title {\n    height: 16px;\n    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));\n    border-radius: 4px;\n    margin-bottom: 12px;\n  }\n\n  .skeleton-title--round {\n    border-radius: 8px;\n  }\n\n  /* Paragraph */\n  .skeleton-paragraph {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  .skeleton-paragraph-line {\n    height: 16px;\n    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));\n    border-radius: 4px;\n  }\n\n  .skeleton-paragraph-line--round {\n    border-radius: 8px;\n  }\n\n  /* Button */\n  .skeleton-button {\n    display: inline-block;\n    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));\n    border-radius: 4px;\n  }\n\n  .skeleton-button--block {\n    display: block;\n    width: 100%;\n  }\n\n  .skeleton-button--circle {\n    border-radius: 50%;\n  }\n\n  .skeleton-button--round {\n    border-radius: 16px;\n  }\n\n  .skeleton-button--square {\n    border-radius: 4px;\n  }\n\n  .skeleton-button--small {\n    width: 64px;\n    height: 24px;\n  }\n\n  .skeleton-button--default {\n    width: 80px;\n    height: 32px;\n  }\n\n  .skeleton-button--large {\n    width: 96px;\n    height: 40px;\n  }\n\n  /* Input */\n  .skeleton-input {\n    display: block;\n    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));\n    border-radius: 4px;\n  }\n\n  .skeleton-input--small {\n    height: 24px;\n  }\n\n  .skeleton-input--default {\n    height: 32px;\n  }\n\n  .skeleton-input--large {\n    height: 40px;\n  }\n\n  .skeleton-input--block {\n    width: 100%;\n  }\n\n  /* Image */\n  .skeleton-image {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));\n    border-radius: 4px;\n    width: 100%;\n    height: 200px;\n  }\n\n  .skeleton-image-icon {\n    font-size: 48px;\n    color: var(--nuraly-skeleton-icon-color, rgba(0, 0, 0, 0.15));\n  }\n\n  /* Active animation */\n  @keyframes skeleton-loading {\n    0% {\n      background-position: 100% 50%;\n    }\n    100% {\n      background-position: 0 50%;\n    }\n  }\n\n  .skeleton--active .skeleton-avatar,\n  .skeleton--active .skeleton-title,\n  .skeleton--active .skeleton-paragraph-line,\n  .skeleton--active .skeleton-button,\n  .skeleton--active .skeleton-input,\n  .skeleton--active .skeleton-image {\n    background: linear-gradient(\n      90deg,\n      var(--nuraly-skeleton-gradient-from, rgba(0, 0, 0, 0.06)) 25%,\n      var(--nuraly-skeleton-gradient-to, rgba(0, 0, 0, 0.15)) 37%,\n      var(--nuraly-skeleton-gradient-from, rgba(0, 0, 0, 0.06)) 63%\n    );\n    background-size: 400% 100%;\n    animation: skeleton-loading 1.4s ease infinite;\n  }\n\n  /* Dark theme support */\n  :host([theme='carbon-dark']) .skeleton-avatar,\n  :host([theme='carbon-dark']) .skeleton-title,\n  :host([theme='carbon-dark']) .skeleton-paragraph-line,\n  :host([theme='carbon-dark']) .skeleton-button,\n  :host([theme='carbon-dark']) .skeleton-input,\n  :host([theme='carbon-dark']) .skeleton-image {\n    background: rgba(255, 255, 255, 0.08);\n  }\n\n  :host([theme='carbon-dark']) .skeleton-image-icon {\n    color: rgba(255, 255, 255, 0.15);\n  }\n\n  :host([theme='carbon-dark']) .skeleton--active .skeleton-avatar,\n  :host([theme='carbon-dark']) .skeleton--active .skeleton-title,\n  :host([theme='carbon-dark']) .skeleton--active .skeleton-paragraph-line,\n  :host([theme='carbon-dark']) .skeleton--active .skeleton-button,\n  :host([theme='carbon-dark']) .skeleton--active .skeleton-input,\n  :host([theme='carbon-dark']) .skeleton--active .skeleton-image {\n    background: linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0.08) 25%,\n      rgba(255, 255, 255, 0.15) 37%,\n      rgba(255, 255, 255, 0.08) 63%\n    );\n    background-size: 400% 100%;\n  }\n\n  /* Content wrapper for loading state */\n  .skeleton-wrapper {\n    display: block;\n  }\n\n  .skeleton-wrapper--hidden {\n    display: none;\n  }\n`;\n"]}