snice 2.5.4 → 3.2.0

package/dist/components/image/snice-image.js

@@ -0,0 +1,201 @@
+import { __esDecorate, __runInitializers } from 'tslib';
+import { element, property, styles, render, css, html } from 'snice';
+
+var cssContent = ":host{display:inline-block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint;content-visibility:auto}.image-container{display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.image{display:block;max-width:100%;height:auto;opacity:0;transition:opacity var(--snice-transition-slow, 400ms) ease-in-out}.image--loaded{opacity:1}.image-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:block;filter:blur(20px);transform:scale(1.1);opacity:1;transition:opacity var(--snice-transition-slow, 400ms) ease-in-out}.image-placeholder--hidden{opacity:0;pointer-events:none}.image--small{width:var(--snice-spacing-3xl,3rem);height:var(--snice-spacing-3xl,3rem)}.image--medium{width:var(--snice-spacing-5xl,6rem);height:var(--snice-spacing-5xl,6rem)}.image--large{width:var(--snice-spacing-6xl,12rem);height:var(--snice-spacing-6xl,12rem)}.image--rounded{border-radius:var(--snice-border-radius-md,.375rem)}.image--square{border-radius:0}.image--circle{border-radius:50%}.image--cover{object-fit:cover}.image--contain{object-fit:contain}.image--fill{object-fit:fill}.image--none{object-fit:none}.image--scale-down{object-fit:scale-down}.image--placeholder{background:linear-gradient(135deg,var(--snice-color-background-secondary,rgb(243 244 246)) 0,var(--snice-color-border,rgb(229 231 235)) 100%);border:1px solid var(--snice-color-border,rgb(226 226 226));position:relative;display:flex;align-items:center;justify-content:center;opacity:1!important}.image--placeholder::after{content:'📷';font-size:var(--snice-font-size-lg, 1.5rem);opacity:.5}:host([loading]) .image{opacity:.6;animation:1.5s ease-in-out infinite image-pulse}@keyframes image-pulse{0%,100%{opacity:.6}50%{opacity:.3}}@media (prefers-reduced-motion:reduce){:host([loading]) .image{animation:none}}";
+
+let SniceImage = (() => {
+    let _classDecorators = [element('snice-image')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _src_decorators;
+    let _src_initializers = [];
+    let _src_extraInitializers = [];
+    let _alt_decorators;
+    let _alt_initializers = [];
+    let _alt_extraInitializers = [];
+    let _fallback_decorators;
+    let _fallback_initializers = [];
+    let _fallback_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _srcset_decorators;
+    let _srcset_initializers = [];
+    let _srcset_extraInitializers = [];
+    let _sizes_decorators;
+    let _sizes_initializers = [];
+    let _sizes_extraInitializers = [];
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _lazy_decorators;
+    let _lazy_initializers = [];
+    let _lazy_extraInitializers = [];
+    let _fit_decorators;
+    let _fit_initializers = [];
+    let _fit_extraInitializers = [];
+    let _width_decorators;
+    let _width_initializers = [];
+    let _width_extraInitializers = [];
+    let _height_decorators;
+    let _height_initializers = [];
+    let _height_extraInitializers = [];
+    let _imageError_decorators;
+    let _imageError_initializers = [];
+    let _imageError_extraInitializers = [];
+    let _imageLoaded_decorators;
+    let _imageLoaded_initializers = [];
+    let _imageLoaded_extraInitializers = [];
+    let _componentStyles_decorators;
+    let _renderContent_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _src_decorators = [property({})];
+            _alt_decorators = [property({})];
+            _fallback_decorators = [property({})];
+            _placeholder_decorators = [property({})];
+            _srcset_decorators = [property({})];
+            _sizes_decorators = [property({})];
+            _variant_decorators = [property({})];
+            _size_decorators = [property({})];
+            _lazy_decorators = [property({ type: Boolean })];
+            _fit_decorators = [property({})];
+            _width_decorators = [property({})];
+            _height_decorators = [property({})];
+            _imageError_decorators = [property({ type: Boolean, attribute: false })];
+            _imageLoaded_decorators = [property({ type: Boolean, attribute: false })];
+            _componentStyles_decorators = [styles()];
+            _renderContent_decorators = [render()];
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _src_decorators, { kind: "field", name: "src", static: false, private: false, access: { has: obj => "src" in obj, get: obj => obj.src, set: (obj, value) => { obj.src = value; } }, metadata: _metadata }, _src_initializers, _src_extraInitializers);
+            __esDecorate(null, null, _alt_decorators, { kind: "field", name: "alt", static: false, private: false, access: { has: obj => "alt" in obj, get: obj => obj.alt, set: (obj, value) => { obj.alt = value; } }, metadata: _metadata }, _alt_initializers, _alt_extraInitializers);
+            __esDecorate(null, null, _fallback_decorators, { kind: "field", name: "fallback", static: false, private: false, access: { has: obj => "fallback" in obj, get: obj => obj.fallback, set: (obj, value) => { obj.fallback = value; } }, metadata: _metadata }, _fallback_initializers, _fallback_extraInitializers);
+            __esDecorate(null, null, _placeholder_decorators, { kind: "field", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
+            __esDecorate(null, null, _srcset_decorators, { kind: "field", name: "srcset", static: false, private: false, access: { has: obj => "srcset" in obj, get: obj => obj.srcset, set: (obj, value) => { obj.srcset = value; } }, metadata: _metadata }, _srcset_initializers, _srcset_extraInitializers);
+            __esDecorate(null, null, _sizes_decorators, { kind: "field", name: "sizes", static: false, private: false, access: { has: obj => "sizes" in obj, get: obj => obj.sizes, set: (obj, value) => { obj.sizes = value; } }, metadata: _metadata }, _sizes_initializers, _sizes_extraInitializers);
+            __esDecorate(null, null, _variant_decorators, { kind: "field", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
+            __esDecorate(null, null, _size_decorators, { kind: "field", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(null, null, _lazy_decorators, { kind: "field", name: "lazy", static: false, private: false, access: { has: obj => "lazy" in obj, get: obj => obj.lazy, set: (obj, value) => { obj.lazy = value; } }, metadata: _metadata }, _lazy_initializers, _lazy_extraInitializers);
+            __esDecorate(null, null, _fit_decorators, { kind: "field", name: "fit", static: false, private: false, access: { has: obj => "fit" in obj, get: obj => obj.fit, set: (obj, value) => { obj.fit = value; } }, metadata: _metadata }, _fit_initializers, _fit_extraInitializers);
+            __esDecorate(null, null, _width_decorators, { kind: "field", name: "width", static: false, private: false, access: { has: obj => "width" in obj, get: obj => obj.width, set: (obj, value) => { obj.width = value; } }, metadata: _metadata }, _width_initializers, _width_extraInitializers);
+            __esDecorate(null, null, _height_decorators, { kind: "field", name: "height", static: false, private: false, access: { has: obj => "height" in obj, get: obj => obj.height, set: (obj, value) => { obj.height = value; } }, metadata: _metadata }, _height_initializers, _height_extraInitializers);
+            __esDecorate(null, null, _imageError_decorators, { kind: "field", name: "imageError", static: false, private: false, access: { has: obj => "imageError" in obj, get: obj => obj.imageError, set: (obj, value) => { obj.imageError = value; } }, metadata: _metadata }, _imageError_initializers, _imageError_extraInitializers);
+            __esDecorate(null, null, _imageLoaded_decorators, { kind: "field", name: "imageLoaded", static: false, private: false, access: { has: obj => "imageLoaded" in obj, get: obj => obj.imageLoaded, set: (obj, value) => { obj.imageLoaded = value; } }, metadata: _metadata }, _imageLoaded_initializers, _imageLoaded_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        componentStyles() {
+            return css `${cssContent}`;
+        }
+        renderContent() {
+            const imageSrc = this.imageError && this.fallback ? this.fallback : this.src;
+            const imageAlt = this.alt || 'Image';
+            const loadingAttr = this.lazy ? 'lazy' : 'eager';
+            const imageClasses = [
+                'image',
+                `image--${this.variant}`,
+                `image--${this.size}`,
+                `image--${this.fit}`,
+                this.imageLoaded ? 'image--loaded' : ''
+            ].filter(Boolean).join(' ');
+            const placeholderClasses = [
+                'image-placeholder',
+                `image--${this.variant}`,
+                `image--${this.size}`,
+                `image--${this.fit}`,
+                this.imageLoaded ? 'image-placeholder--hidden' : ''
+            ].filter(Boolean).join(' ');
+            const containerClasses = [
+                'image-container',
+                `image-container--${this.size}`
+            ].join(' ');
+            const inlineStyles = this.getInlineStyles();
+            if (!this.src) {
+                return html `
+        <div class="${containerClasses}" part="container">
+          <div class="${imageClasses} image--placeholder" part="placeholder" style="${inlineStyles}"></div>
+        </div>
+      `;
+            }
+            const hasPlaceholder = this.placeholder && !this.imageLoaded;
+            return html `
+      <div class="${containerClasses}" part="container">
+        <if ${hasPlaceholder}>
+          <img
+            src="${this.placeholder}"
+            alt=""
+            aria-hidden="true"
+            class="${placeholderClasses}"
+            part="placeholder"
+            style="${inlineStyles}"
+          />
+        </if>
+        <img
+          src="${imageSrc}"
+          srcset="${this.srcset || ''}"
+          sizes="${this.sizes || ''}"
+          alt="${imageAlt}"
+          loading="${loadingAttr}"
+          class="${imageClasses}"
+          part="image"
+          style="${inlineStyles}"
+          @error="${() => this.handleImageError()}"
+          @load="${() => this.handleImageLoad()}"
+        />
+      </div>
+    `;
+        }
+        getInlineStyles() {
+            const styles = [];
+            if (this.width) {
+                styles.push(`width: ${this.width}`);
+            }
+            if (this.height) {
+                styles.push(`height: ${this.height}`);
+            }
+            return styles.join('; ');
+        }
+        handleImageError() {
+            if (!this.imageError) {
+                this.imageError = true;
+            }
+        }
+        handleImageLoad() {
+            this.imageError = false;
+            this.imageLoaded = true;
+        }
+        constructor() {
+            super(...arguments);
+            this.src = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _src_initializers, ''));
+            this.alt = (__runInitializers(this, _src_extraInitializers), __runInitializers(this, _alt_initializers, ''));
+            this.fallback = (__runInitializers(this, _alt_extraInitializers), __runInitializers(this, _fallback_initializers, ''));
+            this.placeholder = (__runInitializers(this, _fallback_extraInitializers), __runInitializers(this, _placeholder_initializers, ''));
+            this.srcset = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _srcset_initializers, ''));
+            this.sizes = (__runInitializers(this, _srcset_extraInitializers), __runInitializers(this, _sizes_initializers, ''));
+            this.variant = (__runInitializers(this, _sizes_extraInitializers), __runInitializers(this, _variant_initializers, 'rounded'));
+            this.size = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _size_initializers, 'medium'));
+            this.lazy = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _lazy_initializers, true));
+            this.fit = (__runInitializers(this, _lazy_extraInitializers), __runInitializers(this, _fit_initializers, 'cover'));
+            this.width = (__runInitializers(this, _fit_extraInitializers), __runInitializers(this, _width_initializers, ''));
+            this.height = (__runInitializers(this, _width_extraInitializers), __runInitializers(this, _height_initializers, ''));
+            this.imageError = (__runInitializers(this, _height_extraInitializers), __runInitializers(this, _imageError_initializers, false));
+            this.imageLoaded = (__runInitializers(this, _imageError_extraInitializers), __runInitializers(this, _imageLoaded_initializers, false));
+            __runInitializers(this, _imageLoaded_extraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceImage };
+//# sourceMappingURL=snice-image.js.map

package/dist/components/image/snice-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snice-image.js","sources":["../../../components/image/snice-image.css?inline","../../../../components/image/snice-image.ts"],"sourcesContent":["export default \":host{display:inline-block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint;content-visibility:auto}.image-container{display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.image{display:block;max-width:100%;height:auto;opacity:0;transition:opacity var(--snice-transition-slow, 400ms) ease-in-out}.image--loaded{opacity:1}.image-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:block;filter:blur(20px);transform:scale(1.1);opacity:1;transition:opacity var(--snice-transition-slow, 400ms) ease-in-out}.image-placeholder--hidden{opacity:0;pointer-events:none}.image--small{width:var(--snice-spacing-3xl,3rem);height:var(--snice-spacing-3xl,3rem)}.image--medium{width:var(--snice-spacing-5xl,6rem);height:var(--snice-spacing-5xl,6rem)}.image--large{width:var(--snice-spacing-6xl,12rem);height:var(--snice-spacing-6xl,12rem)}.image--rounded{border-radius:var(--snice-border-radius-md,.375rem)}.image--square{border-radius:0}.image--circle{border-radius:50%}.image--cover{object-fit:cover}.image--contain{object-fit:contain}.image--fill{object-fit:fill}.image--none{object-fit:none}.image--scale-down{object-fit:scale-down}.image--placeholder{background:linear-gradient(135deg,var(--snice-color-background-secondary,rgb(243 244 246)) 0,var(--snice-color-border,rgb(229 231 235)) 100%);border:1px solid var(--snice-color-border,rgb(226 226 226));position:relative;display:flex;align-items:center;justify-content:center;opacity:1!important}.image--placeholder::after{content:'📷';font-size:var(--snice-font-size-lg, 1.5rem);opacity:.5}:host([loading]) .image{opacity:.6;animation:1.5s ease-in-out infinite image-pulse}@keyframes image-pulse{0%,100%{opacity:.6}50%{opacity:.3}}@media (prefers-reduced-motion:reduce){:host([loading]) .image{animation:none}}\";",null],"names":[],"mappings":"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"}

package/dist/components/image/snice-image.types.d.ts

@@ -0,0 +1,17 @@
+export type ImageVariant = 'rounded' | 'square' | 'circle';
+export type ImageSize = 'small' | 'medium' | 'large';
+export type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+export interface SniceImageElement extends HTMLElement {
+    src: string;
+    alt: string;
+    fallback: string;
+    placeholder: string;
+    srcset: string;
+    sizes: string;
+    variant: ImageVariant;
+    size: ImageSize;
+    lazy: boolean;
+    fit: ImageFit;
+    width: string;
+    height: string;
+}

package/dist/components/input/snice-input.d.ts

@@ -1,5 +1,7 @@
 import type { InputType, InputSize, InputVariant, SniceInputElement } from './snice-input.types';
 export declare class SniceInput extends HTMLElement implements SniceInputElement {
+    internals: ElementInternals;
+    constructor();
     type: InputType;
     size: InputSize;
     variant: InputVariant;
@@ -28,15 +30,15 @@ export declare class SniceInput extends HTMLElement implements SniceInputElement
     clearButton?: HTMLButtonElement;
     passwordToggle?: HTMLButtonElement;
     private showPassword;
-    html(): string;
-    css(): string;
+    renderContent(): import("snice").TemplateResult;
+    componentStyles(): import("snice").CSSResult;
     init(): void;
     handleInput(e: Event): void;
     handleChange(e: Event): void;
-    handleFocus(): void;
-    handleBlur(): void;
-    handleClear(): void;
-    handlePasswordToggle(): void;
+    handleFocus(e: Event): void;
+    handleBlur(e: Event): void;
+    handleClear(e: Event): void;
+    handlePasswordToggle(e: Event): void;
     handleValueChange(): void;
     handleInvalidChange(): void;
     handleDisabledChange(): void;