snice 4.20.1 → 4.22.0

package/dist/cdn/list/snice-list.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.20.0
+ * snice v4.21.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.
@@ -64,7 +64,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
   };
 
-  var cssContent$2 = ":host{display:block;--skeleton-bg:var(--snice-color-background-tertiary, rgb(241 241 241));--skeleton-highlight:var(--snice-color-background-secondary, rgb(250 250 250));--skeleton-duration:1.5s}.skeleton-container{display:flex;flex-direction:column;gap:var(--skeleton-spacing,var(--snice-spacing-xs,.5rem));width:100%}.skeleton{background:var(--skeleton-bg);overflow:hidden;position:relative}.skeleton-screen-reader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skeleton--text{height:1em;border-radius:var(--snice-border-radius-md,.25rem);width:var(--skeleton-width,100%)}.skeleton--circular{width:var(--skeleton-width,2.5rem);height:var(--skeleton-height,2.5rem);border-radius:50%}.skeleton--rectangular{width:var(--skeleton-width,100%);height:var(--skeleton-height,6.25rem);border-radius:0}.skeleton--rounded{width:var(--skeleton-width,100%);height:var(--skeleton-height,6.25rem);border-radius:var(--snice-border-radius-lg,.5rem)}.skeleton--pulse{animation:skeleton-pulse var(--skeleton-duration) ease-in-out infinite}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:.5}}.skeleton--wave::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,var(--skeleton-highlight),transparent);transform:translateX(-100%);animation:skeleton-wave var(--skeleton-duration) linear infinite}@keyframes skeleton-wave{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}:host([variant=text]) .skeleton:first-child{width:100%}:host([variant=text]) .skeleton:nth-child(2){width:90%}:host([variant=text]) .skeleton:nth-child(3){width:95%}:host([variant=text]) .skeleton:nth-child(4){width:85%}:host([variant=text]) .skeleton:nth-child(5){width:92%}:host([variant=text]) .skeleton:last-child:not(:only-child){width:60%}";
+  var cssContent$3 = ":host{display:block;--skeleton-bg:var(--snice-color-background-tertiary, rgb(241 241 241));--skeleton-highlight:var(--snice-color-background-secondary, rgb(250 250 250));--skeleton-duration:1.5s}.skeleton-container{display:flex;flex-direction:column;gap:var(--skeleton-spacing,var(--snice-spacing-xs,.5rem));width:100%}.skeleton{background:var(--skeleton-bg);overflow:hidden;position:relative}.skeleton-screen-reader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skeleton--text{height:1em;border-radius:var(--snice-border-radius-md,.25rem);width:var(--skeleton-width,100%)}.skeleton--circular{width:var(--skeleton-width,2.5rem);height:var(--skeleton-height,2.5rem);border-radius:50%}.skeleton--rectangular{width:var(--skeleton-width,100%);height:var(--skeleton-height,6.25rem);border-radius:0}.skeleton--rounded{width:var(--skeleton-width,100%);height:var(--skeleton-height,6.25rem);border-radius:var(--snice-border-radius-lg,.5rem)}.skeleton--pulse{animation:skeleton-pulse var(--skeleton-duration) ease-in-out infinite}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:.5}}.skeleton--wave::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,var(--skeleton-highlight),transparent);transform:translateX(-100%);animation:skeleton-wave var(--skeleton-duration) linear infinite}@keyframes skeleton-wave{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}:host([variant=text]) .skeleton:first-child{width:100%}:host([variant=text]) .skeleton:nth-child(2){width:90%}:host([variant=text]) .skeleton:nth-child(3){width:95%}:host([variant=text]) .skeleton:nth-child(4){width:85%}:host([variant=text]) .skeleton:nth-child(5){width:92%}:host([variant=text]) .skeleton:last-child:not(:only-child){width:60%}";
 
   (() => {
       let _classDecorators = [snice.element('snice-skeleton')];
@@ -136,7 +136,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
     `;
           }
           styles() {
-              return snice.css `${cssContent$2}`;
+              return snice.css `${cssContent$3}`;
           }
           getInlineStyles() {
               const styles = [];
@@ -194,7 +194,175 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       return _classThis;
   })();
 
-  var cssContent$1 = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif)}.list{background:var(--snice-color-background-element,rgb(252 251 249));color:var(--snice-color-text,rgb(23 23 23))}:host([dividers]) ::slotted(snice-list-item){border-bottom:1px solid var(--snice-color-border,rgb(229 231 235))}:host([dividers]) ::slotted(snice-list-item:last-of-type){border-bottom:none}.list__search{display:flex;padding:var(--snice-spacing-md,1rem);border-bottom:1px solid var(--snice-color-border,rgb(229 231 235))}.list__search-input{flex:1;min-width:0;box-sizing:border-box;padding:var(--snice-spacing-sm,.75rem);border:1px solid var(--snice-color-border,rgb(209 213 219));border-radius:var(--snice-border-radius-sm,.25rem);font-size:var(--snice-font-size-md, 1rem);font-family:inherit;background:var(--snice-color-background-input,rgb(248 247 245));color:var(--snice-color-text,rgb(23 23 23));transition:border-color var(--snice-transition-fast, 150ms) ease}.list__search-input:focus{outline:0;border-color:var(--snice-color-primary,rgb(37 99 235));box-shadow:0 0 0 var(--snice-focus-ring-width,2px) var(--snice-focus-ring-color)}.list__loading{padding:var(--snice-spacing-md,1rem);text-align:center}.list__spinner{color:var(--snice-color-text-secondary,rgb(82 82 82));font-size:var(--snice-font-size-sm, .875rem)}.list__sentinel{height:1px;pointer-events:none}.list__no-results{padding:var(--snice-spacing-2xl,3rem) var(--snice-spacing-xl,2rem);text-align:center;color:var(--snice-color-text-secondary,rgb(82 82 82))}.list__no-results-icon{font-size:var(--snice-font-size-3xl, 1.875rem);margin-bottom:var(--snice-spacing-sm,.75rem)}.list__no-results-title{font-weight:var(--snice-font-weight-medium,500);font-size:var(--snice-font-size-md, 1rem);color:var(--snice-color-text,rgb(23 23 23));margin-bottom:var(--snice-spacing-xs,.5rem)}.list__no-results-message{font-size:var(--snice-font-size-sm, .875rem)}";
+  /**
+   * Detects icon type and returns appropriate template
+   *
+   * Scheme overrides:
+   * - img://path -> forces <img> element
+   * - text://content -> forces text content
+   *
+   * Auto-detection (when no scheme):
+   * - URLs (http://, https://, /, ./, ../, data:) -> <img>
+   * - Image extensions (svg, png, jpg, jpeg, jfif, pjp, gif, webp, avif, jxl,
+   *   ico, cur, bmp, tif, tiff, heic, heif, apng) -> <img>
+   * - Everything else -> span with text (emoji, font ligatures)
+   *
+   * Examples:
+   * - "/path/icon.svg" -> <img>
+   * - "icon.png" -> <img>
+   * - "img://filename" -> <img> (forced)
+   * - "home" -> <span> text (Material Symbols ligature)
+   * - "🏠" -> <span> text (emoji)
+   * - "text:///not/a/path" -> <span> text (forced)
+   */
+  function renderIcon(icon, className = 'icon') {
+      if (!icon)
+          return snice.html ``;
+      // Check for scheme overrides first
+      if (icon.startsWith('img://')) {
+          const src = icon.slice(6);
+          return snice.html `<img class="${className}" src="${src}" alt="" part="icon" />`;
+      }
+      if (icon.startsWith('text://')) {
+          const content = icon.slice(7);
+          return snice.html `<span class="${className}" part="icon">${content}</span>`;
+      }
+      // Auto-detect: Check if it's a URL pattern
+      if (/^(https?:\/\/|\/|\.\/|\.\.\/|data:)/.test(icon)) {
+          return snice.html `<img class="${className}" src="${icon}" alt="" part="icon" />`;
+      }
+      // Auto-detect: Check if it's a file with image extension
+      // Must have at least one char before the dot, and no unsupported protocol prefix
+      // Covers: SVG, PNG, JPEG variants, GIF, WebP, AVIF, JPEG XL, ICO, BMP, TIFF, HEIC/HEIF, APNG
+      if (/^[^:]*\w\.(svg|png|jpe?g|jfif|pjp|gif|webp|avif|jxl|ico|cur|bmp|tiff?|heic|heif|apng)$/i.test(icon)) {
+          return snice.html `<img class="${className}" src="${icon}" alt="" part="icon" />`;
+      }
+      // Default: text content (emoji, font icon ligature names)
+      // All content is escaped - no HTML injection possible
+      return snice.html `<span class="${className}" part="icon">${icon}</span>`;
+  }
+
+  var cssContent$2 = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);contain:layout style paint}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--snice-spacing-2xl,3rem) var(--snice-spacing-xl,2rem);color:var(--snice-color-text-secondary,rgb(82 82 82))}.empty-state--small{padding:var(--snice-spacing-xl,2rem) var(--snice-spacing-lg,1.5rem)}.empty-state--medium{padding:var(--snice-spacing-2xl,3rem) var(--snice-spacing-xl,2rem)}.empty-state--large{padding:var(--snice-spacing-3xl,4rem) var(--snice-spacing-2xl,2.5rem)}.empty-state__icon-wrapper{display:flex;align-items:center;justify-content:center;margin-bottom:var(--snice-spacing-lg,1.5rem)}.empty-state__icon{font-size:var(--snice-font-size-4xl, 4rem);opacity:.5;line-height:1}.empty-state__icon-wrapper ::slotted(*){display:flex;align-items:center;justify-content:center;font-size:var(--snice-font-size-4xl, 4rem);opacity:.5;line-height:1}.empty-state__icon-wrapper ::slotted(svg){width:var(--snice-font-size-4xl,4rem);height:var(--snice-font-size-4xl,4rem)}.empty-state__icon-wrapper ::slotted(img){width:var(--snice-font-size-4xl,4rem);height:var(--snice-font-size-4xl,4rem);object-fit:contain}.empty-state--small .empty-state__icon-wrapper{margin-bottom:var(--snice-spacing-md,1rem)}.empty-state--small .empty-state__icon{font-size:var(--snice-font-size-3xl, 3rem)}.empty-state--small .empty-state__icon-wrapper ::slotted(*){font-size:var(--snice-font-size-3xl, 3rem)}.empty-state--small .empty-state__icon-wrapper ::slotted(img),.empty-state--small .empty-state__icon-wrapper ::slotted(svg){width:var(--snice-font-size-3xl,3rem);height:var(--snice-font-size-3xl,3rem)}.empty-state--large .empty-state__icon-wrapper{margin-bottom:var(--snice-spacing-xl,2rem)}.empty-state--large .empty-state__icon{font-size:var(--snice-font-size-5xl, 5rem)}.empty-state--large .empty-state__icon-wrapper ::slotted(*){font-size:var(--snice-font-size-5xl, 5rem)}.empty-state--large .empty-state__icon-wrapper ::slotted(img),.empty-state--large .empty-state__icon-wrapper ::slotted(svg){width:var(--snice-font-size-5xl,5rem);height:var(--snice-font-size-5xl,5rem)}.empty-state__title{font-size:var(--snice-font-size-xl, 1.25rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--snice-color-text,rgb(23 23 23));margin:0 0 var(--snice-spacing-xs,.5rem) 0}.empty-state--small .empty-state__title{font-size:var(--snice-font-size-lg, 1.125rem);margin-bottom:var(--snice-spacing-2xs,.375rem)}.empty-state--large .empty-state__title{font-size:var(--snice-font-size-2xl, 1.5rem);margin-bottom:var(--snice-spacing-sm,.75rem)}.empty-state__description{font-size:var(--snice-font-size-sm, .875rem);color:var(--snice-color-text-secondary,rgb(82 82 82));margin:0 0 var(--snice-spacing-lg,1.5rem) 0;max-width:32rem;line-height:var(--snice-line-height-normal, 1.5)}.empty-state--small .empty-state__description{font-size:var(--snice-font-size-xs, .8125rem);margin-bottom:var(--snice-spacing-md,1rem)}.empty-state--large .empty-state__description{font-size:var(--snice-font-size-md, 1rem);margin-bottom:var(--snice-spacing-xl,2rem)}.empty-state__action{display:inline-flex;align-items:center;justify-content:center;padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-medium,500);color:var(--snice-color-text-inverse,rgb(250 250 250));background:var(--snice-color-primary,rgb(37 99 235));border:none;border-radius:var(--snice-border-radius-md,.375rem);text-decoration:none;cursor:pointer;transition:background var(--snice-transition-fast, 150ms)}.empty-state__action:hover{background:var(--snice-color-primary-dark,rgb(29 78 216))}.empty-state--small .empty-state__action{padding:var(--snice-spacing-2xs,.375rem) var(--snice-spacing-sm,.75rem);font-size:var(--snice-font-size-xs, .8125rem)}.empty-state--large .empty-state__action{padding:var(--snice-spacing-sm,.625rem) var(--snice-spacing-lg,1.25rem);font-size:var(--snice-font-size-md, 1rem)}::slotted(*){margin-top:var(--snice-spacing-md,1rem)}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-empty-state')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _size_decorators;
+      let _size_initializers = [];
+      let _size_extraInitializers = [];
+      let _icon_decorators;
+      let _icon_initializers = [];
+      let _icon_extraInitializers = [];
+      let _title_decorators;
+      let _title_initializers = [];
+      let _title_extraInitializers = [];
+      let _description_decorators;
+      let _description_initializers = [];
+      let _description_extraInitializers = [];
+      let _actionText_decorators;
+      let _actionText_initializers = [];
+      let _actionText_extraInitializers = [];
+      let _actionHref_decorators;
+      let _actionHref_initializers = [];
+      let _actionHref_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _dispatchActionEvent_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _size_decorators = [snice.property({})];
+              _icon_decorators = [snice.property({})];
+              _title_decorators = [snice.property({})];
+              _description_decorators = [snice.property({})];
+              _actionText_decorators = [snice.property({ attribute: 'action-text', })];
+              _actionHref_decorators = [snice.property({ attribute: 'action-href', })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _dispatchActionEvent_decorators = [snice.dispatch('empty-state-action', { bubbles: true, composed: true })];
+              __esDecorate(this, null, _render_decorators, { kind: "method", name: "render", static: false, private: false, access: { has: obj => "render" in obj, get: obj => obj.render }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _dispatchActionEvent_decorators, { kind: "method", name: "dispatchActionEvent", static: false, private: false, access: { has: obj => "dispatchActionEvent" in obj, get: obj => obj.dispatchActionEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __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, _icon_decorators, { kind: "field", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
+              __esDecorate(null, null, _title_decorators, { kind: "field", name: "title", static: false, private: false, access: { has: obj => "title" in obj, get: obj => obj.title, set: (obj, value) => { obj.title = value; } }, metadata: _metadata }, _title_initializers, _title_extraInitializers);
+              __esDecorate(null, null, _description_decorators, { kind: "field", name: "description", static: false, private: false, access: { has: obj => "description" in obj, get: obj => obj.description, set: (obj, value) => { obj.description = value; } }, metadata: _metadata }, _description_initializers, _description_extraInitializers);
+              __esDecorate(null, null, _actionText_decorators, { kind: "field", name: "actionText", static: false, private: false, access: { has: obj => "actionText" in obj, get: obj => obj.actionText, set: (obj, value) => { obj.actionText = value; } }, metadata: _metadata }, _actionText_initializers, _actionText_extraInitializers);
+              __esDecorate(null, null, _actionHref_decorators, { kind: "field", name: "actionHref", static: false, private: false, access: { has: obj => "actionHref" in obj, get: obj => obj.actionHref, set: (obj, value) => { obj.actionHref = value; } }, metadata: _metadata }, _actionHref_initializers, _actionHref_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);
+          }
+          render() {
+              const emptyStateClasses = ['empty-state', `empty-state--${this.size}`].filter(Boolean).join(' ');
+              return snice.html /*html*/ `
+      <div class="${emptyStateClasses}" part="container">
+        <div class="empty-state__icon-wrapper" part="icon">
+          <slot name="icon">
+            ${renderIcon(this.icon, 'empty-state__icon')}
+          </slot>
+        </div>
+        <h3 class="empty-state__title" part="title">${this.title}</h3>
+        <if ${this.description}>
+          <p class="empty-state__description" part="description">${this.description}</p>
+        </if>
+        <if ${this.actionText}>
+          <case ${this.actionHref ? 'link' : 'button'}>
+            <when value="link">
+              <a
+                href="${this.actionHref}"
+                class="empty-state__action"
+                part="action"
+                @click=${this.handleActionClick}
+              >${this.actionText}</a>
+            </when>
+            <when value="button">
+              <button
+                class="empty-state__action"
+                part="action"
+                type="button"
+                @click=${this.handleActionClick}
+              >${this.actionText}</button>
+            </when>
+          </case>
+        </if>
+        <slot></slot>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$2}`;
+          }
+          handleActionClick(e) {
+              if (!this.actionHref) {
+                  e.preventDefault();
+              }
+              this.dispatchActionEvent();
+          }
+          dispatchActionEvent() {
+              return { emptyState: this };
+          }
+          constructor() {
+              super(...arguments);
+              this.size = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _size_initializers, 'medium'));
+              this.icon = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _icon_initializers, '📭'));
+              this.title = (__runInitializers(this, _icon_extraInitializers), __runInitializers(this, _title_initializers, 'No data'));
+              this.description = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _description_initializers, ''));
+              this.actionText = (__runInitializers(this, _description_extraInitializers), __runInitializers(this, _actionText_initializers, ''));
+              this.actionHref = (__runInitializers(this, _actionText_extraInitializers), __runInitializers(this, _actionHref_initializers, ''));
+              __runInitializers(this, _actionHref_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$1 = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif)}.list{background:var(--snice-color-background-element,rgb(252 251 249));color:var(--snice-color-text,rgb(23 23 23))}:host([dividers]) ::slotted(snice-list-item){border-bottom:1px solid var(--snice-color-border,rgb(229 231 235))}:host([dividers]) ::slotted(snice-list-item:last-of-type){border-bottom:none}.list__search{display:flex;padding:var(--snice-spacing-md,1rem);border-bottom:1px solid var(--snice-color-border,rgb(229 231 235))}.list__search-input{flex:1;min-width:0;box-sizing:border-box;padding:var(--snice-spacing-sm,.75rem);border:1px solid var(--snice-color-border,rgb(209 213 219));border-radius:var(--snice-border-radius-sm,.25rem);font-size:var(--snice-font-size-md, 1rem);font-family:inherit;background:var(--snice-color-background-input,rgb(248 247 245));color:var(--snice-color-text,rgb(23 23 23));transition:border-color var(--snice-transition-fast, 150ms) ease}.list__search-input:focus{outline:0;border-color:var(--snice-color-primary,rgb(37 99 235));box-shadow:0 0 0 var(--snice-focus-ring-width,2px) var(--snice-focus-ring-color)}.list__loading{padding:var(--snice-spacing-md,1rem);text-align:center}.list__spinner{color:var(--snice-color-text-secondary,rgb(82 82 82));font-size:var(--snice-font-size-sm, .875rem)}.list__sentinel{height:1px;pointer-events:none}";
 
   (() => {
       let _classDecorators = [snice.element('snice-list')];
@@ -438,10 +606,13 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
         </if>
         <if ${this.noResults}>
           <slot name="no-results">
-            <div class="list__no-results" part="no-results">
-              <div class="list__no-results-icon">🔍</div>
-              <div class="list__no-results-title">No results found</div>
-              <div class="list__no-results-message">Try searching for something else</div>
+            <div style="padding: 2rem;">
+              <snice-empty-state 
+                icon="🔍" 
+                title="No results found" 
+                description="Try searching for something else"
+                size="medium">
+              </snice-empty-state>
             </div>
           </slot>
         </if>