snice 2.5.4 → 3.2.0

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

@@ -1,7 +1,7 @@
-import { __runInitializers, __esDecorate } from 'tslib';
-import { element, property, query, on, dispatch, ready, watch } from 'snice';
+import { __esDecorate, __runInitializers } from 'tslib';
+import { element, property, query, render, styles, watch, html, css } from 'snice';
 
-var css = ":host {\n  display: block;\n  --breadcrumb-font-size: 0.875rem; /* 14px */\n  --breadcrumb-spacing: 0.5rem; /* 8px */\n  --breadcrumb-color: rgb(var(--snice-color-gray-600, 82 82 82));\n  --breadcrumb-hover-color: rgb(var(--snice-color-blue-600, 37 99 235));\n  --breadcrumb-active-color: rgb(var(--snice-color-gray-900, 23 23 23));\n  --breadcrumb-separator-color: rgb(var(--snice-color-gray-400, 163 163 163));\n}\n\n.breadcrumb {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  font-size: var(--breadcrumb-font-size);\n  line-height: 1.5;\n}\n\n.breadcrumb-item {\n  display: flex;\n  align-items: center;\n  color: var(--breadcrumb-color);\n}\n\n.breadcrumb-link {\n  color: inherit;\n  text-decoration: none;\n  transition: color 0.2s ease;\n  cursor: pointer;\n  outline: none;\n  border-radius: 2px;\n  padding: 0.125rem 0.25rem; /* 2px 4px */\n  margin: -0.125rem -0.25rem; /* -2px -4px */\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem; /* 6px */\n}\n\n.breadcrumb-link:hover {\n  color: var(--breadcrumb-hover-color);\n  text-decoration: underline;\n}\n\n.breadcrumb-link:focus-visible {\n  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);\n}\n\n.breadcrumb-text {\n  padding: 2px 4px;\n  margin: -2px -4px;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem; /* 6px */\n}\n\n.breadcrumb-icon {\n  display: inline-flex;\n  align-items: center;\n  font-size: 1.1em;\n}\n\n.breadcrumb-icon-image {\n  width: 1.2em;\n  height: 1.2em;\n  object-fit: contain;\n  vertical-align: middle;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n.breadcrumb-item--active {\n  color: var(--breadcrumb-active-color);\n  font-weight: 500;\n}\n\n.breadcrumb-item--active .breadcrumb-link {\n  cursor: default;\n  pointer-events: none;\n}\n\n.breadcrumb-separator {\n  margin: 0 var(--breadcrumb-spacing);\n  color: var(--breadcrumb-separator-color);\n  user-select: none;\n}\n\n.breadcrumb-ellipsis {\n  display: flex;\n  align-items: center;\n  padding: 2px 4px;\n  margin: -2px -4px;\n  cursor: pointer;\n  color: var(--breadcrumb-color);\n  border-radius: 2px;\n  transition: background 0.2s ease;\n}\n\n.breadcrumb-ellipsis:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.breadcrumb-ellipsis:focus-visible {\n  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);\n  outline: none;\n}\n\n/* Sizes */\n:host([size=\"small\"]) {\n  --breadcrumb-font-size: 12px;\n  --breadcrumb-spacing: 6px;\n}\n\n:host([size=\"large\"]) {\n  --breadcrumb-font-size: 16px;\n  --breadcrumb-spacing: 10px;\n}\n\n/* Collapsed state */\n.breadcrumb--collapsed .breadcrumb-item--hidden {\n  display: none;\n}\n\n/* Mobile responsive */\n@media (max-width: 640px) {\n  .breadcrumb {\n    font-size: calc(var(--breadcrumb-font-size) * 0.9);\n  }\n}";
+var cssContent = ":host{display:block;--breadcrumb-font-size:0.875rem;--breadcrumb-spacing:0.5rem;--breadcrumb-color:rgb(var(--snice-color-gray-600, 82 82 82));--breadcrumb-hover-color:rgb(var(--snice-color-blue-600, 37 99 235));--breadcrumb-active-color:rgb(var(--snice-color-gray-900, 23 23 23));--breadcrumb-separator-color:rgb(var(--snice-color-gray-400, 163 163 163))}case,default,if,when{display:contents}.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:var(--breadcrumb-font-size);line-height:1.5}.breadcrumb-item{display:flex;align-items:center;color:var(--breadcrumb-color)}.breadcrumb-link{color:inherit;text-decoration:none;transition:color .2s;cursor:pointer;outline:0;border-radius:2px;padding:.125rem .25rem;margin:-.125rem -.25rem;display:inline-flex;align-items:center;gap:.375rem}.breadcrumb-link:hover{color:var(--breadcrumb-hover-color);text-decoration:underline}.breadcrumb-link:focus-visible{box-shadow:0 0 0 2px rgba(59,130,246,.4)}.breadcrumb-text{padding:2px 4px;margin:-2px -4px;display:inline-flex;align-items:center;gap:.375rem}.breadcrumb-icon{display:inline-flex;align-items:center;font-size:1.1em}.breadcrumb-icon-image{width:1.2em;height:1.2em;object-fit:contain;vertical-align:middle}[hidden]{display:none!important}.breadcrumb-item--active{color:var(--breadcrumb-active-color);font-weight:500}.breadcrumb-item--active .breadcrumb-link{cursor:default;pointer-events:none}.breadcrumb-separator{margin:0 var(--breadcrumb-spacing);color:var(--breadcrumb-separator-color);user-select:none}.breadcrumb-ellipsis{display:flex;align-items:center;padding:2px 4px;margin:-2px -4px;cursor:pointer;color:var(--breadcrumb-color);border-radius:2px;transition:background .2s}.breadcrumb-ellipsis:hover{background:rgba(0,0,0,.05)}.breadcrumb-ellipsis:focus-visible{box-shadow:0 0 0 2px rgba(59,130,246,.4);outline:0}:host([size=small]){--breadcrumb-font-size:12px;--breadcrumb-spacing:6px}:host([size=large]){--breadcrumb-font-size:16px;--breadcrumb-spacing:10px}.breadcrumb--collapsed .breadcrumb-item--hidden{display:none}@media (max-width:640px){.breadcrumb{font-size:calc(var(--breadcrumb-font-size) * .9)}}";
 
 let SniceBreadcrumbs = (() => {
     let _classDecorators = [element('snice-breadcrumbs')];
@@ -25,85 +25,85 @@ let SniceBreadcrumbs = (() => {
     let _breadcrumbElement_decorators;
     let _breadcrumbElement_initializers = [];
     let _breadcrumbElement_extraInitializers = [];
-    let _handleEllipsisClick_decorators;
-    let _handleLinkClick_decorators;
-    let _init_decorators;
+    let _collapsed_decorators;
+    let _collapsed_initializers = [];
+    let _collapsed_extraInitializers = [];
+    let _renderTrigger_decorators;
+    let _renderTrigger_initializers = [];
+    let _renderTrigger_extraInitializers = [];
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
     let _updateBreadcrumb_decorators;
     (class extends _classSuper {
         static { _classThis = this; }
-        constructor() {
-            super(...arguments);
-            this.items = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _items_initializers, []));
-            this.separator = (__runInitializers(this, _items_extraInitializers), __runInitializers(this, _separator_initializers, '/'));
-            this.size = (__runInitializers(this, _separator_extraInitializers), __runInitializers(this, _size_initializers, 'medium'));
-            this.maxItems = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _maxItems_initializers, 0));
-            this.breadcrumbElement = (__runInitializers(this, _maxItems_extraInitializers), __runInitializers(this, _breadcrumbElement_initializers, void 0));
-            this.collapsed = (__runInitializers(this, _breadcrumbElement_extraInitializers), true);
-            this.slotItems = [];
-        }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _items_decorators = [property({ type: Array })];
             _separator_decorators = [property({})];
             _size_decorators = [property({})];
-            _maxItems_decorators = [property({ type: Number, })];
+            _maxItems_decorators = [property({ type: Number, attribute: 'max-items' })];
             _breadcrumbElement_decorators = [query('.breadcrumb')];
-            _handleEllipsisClick_decorators = [on('click', '.breadcrumb-ellipsis')];
-            _handleLinkClick_decorators = [on('click', '.breadcrumb-link'), dispatch('breadcrumb-click')];
-            _init_decorators = [ready()];
+            _collapsed_decorators = [property({ type: Boolean })];
+            _renderTrigger_decorators = [property({ type: Number, attribute: false })];
+            _renderContent_decorators = [render()];
+            _componentStyles_decorators = [styles()];
             _updateBreadcrumb_decorators = [watch('items', 'separator', 'maxItems')];
-            __esDecorate(this, null, _handleEllipsisClick_decorators, { kind: "method", name: "handleEllipsisClick", static: false, private: false, access: { has: obj => "handleEllipsisClick" in obj, get: obj => obj.handleEllipsisClick }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleLinkClick_decorators, { kind: "method", name: "handleLinkClick", static: false, private: false, access: { has: obj => "handleLinkClick" in obj, get: obj => obj.handleLinkClick }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, 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(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, _updateBreadcrumb_decorators, { kind: "method", name: "updateBreadcrumb", static: false, private: false, access: { has: obj => "updateBreadcrumb" in obj, get: obj => obj.updateBreadcrumb }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, null, _items_decorators, { kind: "field", name: "items", static: false, private: false, access: { has: obj => "items" in obj, get: obj => obj.items, set: (obj, value) => { obj.items = value; } }, metadata: _metadata }, _items_initializers, _items_extraInitializers);
             __esDecorate(null, null, _separator_decorators, { kind: "field", name: "separator", static: false, private: false, access: { has: obj => "separator" in obj, get: obj => obj.separator, set: (obj, value) => { obj.separator = value; } }, metadata: _metadata }, _separator_initializers, _separator_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, _maxItems_decorators, { kind: "field", name: "maxItems", static: false, private: false, access: { has: obj => "maxItems" in obj, get: obj => obj.maxItems, set: (obj, value) => { obj.maxItems = value; } }, metadata: _metadata }, _maxItems_initializers, _maxItems_extraInitializers);
             __esDecorate(null, null, _breadcrumbElement_decorators, { kind: "field", name: "breadcrumbElement", static: false, private: false, access: { has: obj => "breadcrumbElement" in obj, get: obj => obj.breadcrumbElement, set: (obj, value) => { obj.breadcrumbElement = value; } }, metadata: _metadata }, _breadcrumbElement_initializers, _breadcrumbElement_extraInitializers);
+            __esDecorate(null, null, _collapsed_decorators, { kind: "field", name: "collapsed", static: false, private: false, access: { has: obj => "collapsed" in obj, get: obj => obj.collapsed, set: (obj, value) => { obj.collapsed = value; } }, metadata: _metadata }, _collapsed_initializers, _collapsed_extraInitializers);
+            __esDecorate(null, null, _renderTrigger_decorators, { kind: "field", name: "renderTrigger", static: false, private: false, access: { has: obj => "renderTrigger" in obj, get: obj => obj.renderTrigger, set: (obj, value) => { obj.renderTrigger = value; } }, metadata: _metadata }, _renderTrigger_initializers, _renderTrigger_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);
         }
-        html() {
+        renderContent() {
             const allItems = this.getAllItems();
             const visibleItems = this.getVisibleItems(allItems);
             const hasCollapsed = this.maxItems > 0 && allItems.length > this.maxItems && this.collapsed;
-            return /*html*/ `
-      <slot style="display: none"></slot>
-      <nav aria-label="Breadcrumb">
-        <ol class="breadcrumb ${hasCollapsed ? 'breadcrumb--collapsed' : ''}">
+            const breadcrumbClass = `breadcrumb${hasCollapsed ? ' breadcrumb--collapsed' : ''}`;
+            return html `
+      <slot style="display: none" @slotchange="${() => this.handleSlotChange()}"></slot>
+      <nav aria-label="Breadcrumb" @click="${(e) => this.handleClick(e)}">
+        <ol class="${breadcrumbClass}">
           ${visibleItems.map((item, index) => {
                 const isLast = index === visibleItems.length - 1;
                 const isActive = item.active || isLast;
                 const isHidden = hasCollapsed && index > 0 && index < visibleItems.length - 2;
-                return /*html*/ `
-              <li class="breadcrumb-item ${isActive ? 'breadcrumb-item--active' : ''} ${isHidden ? 'breadcrumb-item--hidden' : ''}">
-                ${item.href && !isActive ? /*html*/ `
-                  <a href="${item.href}" 
+                const itemClass = `breadcrumb-item${isActive ? ' breadcrumb-item--active' : ''}${isHidden ? ' breadcrumb-item--hidden' : ''}`;
+                return html `
+              <li class="${itemClass}">
+                <if ${item.href && !isActive}>
+                  <a href="${item.href}"
                      class="breadcrumb-link"
                      aria-current="${isActive ? 'page' : ''}"
                      tabindex="0">
                     ${this.renderIcon(item)}
                     ${item.label}
                   </a>
-                ` : /*html*/ `
-                  <span class="breadcrumb-text" 
+                </if>
+                <if ${!item.href || isActive}>
+                  <span class="breadcrumb-text"
                         aria-current="${isActive ? 'page' : ''}">
                     ${this.renderIcon(item)}
                     ${item.label}
                   </span>
-                `}
-                ${!isLast ? /*html*/ `
+                </if>
+                <if ${!isLast}>
                   <span class="breadcrumb-separator" aria-hidden="true">
                     ${this.separator}
                   </span>
-                ` : ''}
+                </if>
               </li>
-              ${hasCollapsed && index === 0 && allItems.length > this.maxItems ? /*html*/ `
+              <if ${hasCollapsed && index === 0 && allItems.length > this.maxItems}>
                 <li class="breadcrumb-item">
-                  <button class="breadcrumb-ellipsis" 
+                  <button class="breadcrumb-ellipsis"
                           aria-label="Show all breadcrumbs"
                           tabindex="0">
                     •••
@@ -112,15 +112,15 @@ let SniceBreadcrumbs = (() => {
                     ${this.separator}
                   </span>
                 </li>
-              ` : ''}
+              </if>
             `;
-            }).join('')}
+            })}
         </ol>
       </nav>
     `;
         }
-        css() {
-            return css;
+        componentStyles() {
+            return css `${cssContent}`;
         }
         getAllItems() {
             // Prefer slot items if available, otherwise use items property
@@ -135,23 +135,32 @@ let SniceBreadcrumbs = (() => {
             const lastItems = allItems.slice(-(this.maxItems - 1));
             return [firstItem, ...lastItems];
         }
-        handleEllipsisClick() {
-            this.collapsed = false;
-            this.render();
-        }
-        handleLinkClick(event) {
+        handleClick(event) {
             const target = event.target;
-            const label = target.textContent?.trim() || '';
-            const href = target.getAttribute('href') || '';
-            // Find the item index
-            const allItems = this.getAllItems();
-            const index = allItems.findIndex(item => item.label === label);
-            return {
-                item: allItems[index],
-                index,
-                href,
-                label
-            };
+            // Handle ellipsis click
+            if (target.matches('.breadcrumb-ellipsis')) {
+                this.collapsed = false;
+                return;
+            }
+            // Handle breadcrumb link click
+            if (target.matches('.breadcrumb-link')) {
+                const link = target;
+                const label = link.textContent?.trim() || '';
+                const href = link.getAttribute('href') || '';
+                // Find the item index
+                const allItems = this.getAllItems();
+                const index = allItems.findIndex(item => item.label === label);
+                this.dispatchEvent(new CustomEvent('breadcrumb-click', {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        item: allItems[index],
+                        index,
+                        href,
+                        label
+                    }
+                }));
+            }
         }
         handleSlotChange() {
             const slot = this.shadowRoot?.querySelector('slot');
@@ -165,46 +174,36 @@ let SniceBreadcrumbs = (() => {
                 iconImage: crumb.iconImage || undefined,
                 active: crumb.active || false
             }));
-            this.render();
-        }
-        init() {
-            // Setup slot change handling
-            const slot = this.shadowRoot?.querySelector('slot');
-            if (slot) {
-                slot.addEventListener('slotchange', () => this.handleSlotChange());
-                // Initial check for slotted content
-                this.handleSlotChange();
-            }
+            // Trigger re-render to display slot items by updating a property
+            this.renderTrigger++;
         }
         updateBreadcrumb() {
             this.collapsed = true;
-            // Only render if not using slot items, otherwise slot change will handle it
-            if (!this.slotItems || this.slotItems.length === 0) {
-                this.render();
-            }
         }
         setItems(items) {
             this.items = items;
         }
         renderIcon(item) {
-            return /*html*/ `
-      <img class="breadcrumb-icon-image" src="${item.iconImage || ''}" alt="" ${item.iconImage ? '' : 'hidden'}>
-      <span class="breadcrumb-icon" ${item.icon ? '' : 'hidden'}>${item.icon || ''}</span>
+            return html `
+      <if ${item.iconImage}>
+        <img class="breadcrumb-icon-image" src="${item.iconImage}" alt="">
+      </if>
+      <if ${item.icon}>
+        <span class="breadcrumb-icon">${item.icon}</span>
+      </if>
     `;
         }
-        render() {
-            const shadow = this.shadowRoot;
-            if (shadow) {
-                shadow.innerHTML = '';
-                if (this.css) {
-                    const style = document.createElement('style');
-                    style.textContent = this.css();
-                    shadow.appendChild(style);
-                }
-                const template = document.createElement('template');
-                template.innerHTML = this.html();
-                shadow.appendChild(template.content.cloneNode(true));
-            }
+        constructor() {
+            super(...arguments);
+            this.items = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _items_initializers, []));
+            this.separator = (__runInitializers(this, _items_extraInitializers), __runInitializers(this, _separator_initializers, '/'));
+            this.size = (__runInitializers(this, _separator_extraInitializers), __runInitializers(this, _size_initializers, 'medium'));
+            this.maxItems = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _maxItems_initializers, 0));
+            this.breadcrumbElement = (__runInitializers(this, _maxItems_extraInitializers), __runInitializers(this, _breadcrumbElement_initializers, void 0));
+            this.collapsed = (__runInitializers(this, _breadcrumbElement_extraInitializers), __runInitializers(this, _collapsed_initializers, true));
+            this.slotItems = (__runInitializers(this, _collapsed_extraInitializers), []);
+            this.renderTrigger = __runInitializers(this, _renderTrigger_initializers, 0);
+            __runInitializers(this, _renderTrigger_extraInitializers);
         }
     });
     return _classThis;

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

@@ -1 +1 @@
-{"version":3,"file":"snice-breadcrumbs.js","sources":["../../../components/breadcrumbs/snice-breadcrumbs.css?inline","../../../../components/breadcrumbs/snice-breadcrumbs.ts"],"sourcesContent":["export default \":host {\\n  display: block;\\n  --breadcrumb-font-size: 0.875rem; /* 14px */\\n  --breadcrumb-spacing: 0.5rem; /* 8px */\\n  --breadcrumb-color: rgb(var(--snice-color-gray-600, 82 82 82));\\n  --breadcrumb-hover-color: rgb(var(--snice-color-blue-600, 37 99 235));\\n  --breadcrumb-active-color: rgb(var(--snice-color-gray-900, 23 23 23));\\n  --breadcrumb-separator-color: rgb(var(--snice-color-gray-400, 163 163 163));\\n}\\n\\n.breadcrumb {\\n  display: flex;\\n  align-items: center;\\n  flex-wrap: wrap;\\n  list-style: none;\\n  margin: 0;\\n  padding: 0;\\n  font-size: var(--breadcrumb-font-size);\\n  line-height: 1.5;\\n}\\n\\n.breadcrumb-item {\\n  display: flex;\\n  align-items: center;\\n  color: var(--breadcrumb-color);\\n}\\n\\n.breadcrumb-link {\\n  color: inherit;\\n  text-decoration: none;\\n  transition: color 0.2s ease;\\n  cursor: pointer;\\n  outline: none;\\n  border-radius: 2px;\\n  padding: 0.125rem 0.25rem; /* 2px 4px */\\n  margin: -0.125rem -0.25rem; /* -2px -4px */\\n  display: inline-flex;\\n  align-items: center;\\n  gap: 0.375rem; /* 6px */\\n}\\n\\n.breadcrumb-link:hover {\\n  color: var(--breadcrumb-hover-color);\\n  text-decoration: underline;\\n}\\n\\n.breadcrumb-link:focus-visible {\\n  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);\\n}\\n\\n.breadcrumb-text {\\n  padding: 2px 4px;\\n  margin: -2px -4px;\\n  display: inline-flex;\\n  align-items: center;\\n  gap: 0.375rem; /* 6px */\\n}\\n\\n.breadcrumb-icon {\\n  display: inline-flex;\\n  align-items: center;\\n  font-size: 1.1em;\\n}\\n\\n.breadcrumb-icon-image {\\n  width: 1.2em;\\n  height: 1.2em;\\n  object-fit: contain;\\n  vertical-align: middle;\\n}\\n\\n[hidden] {\\n  display: none !important;\\n}\\n\\n.breadcrumb-item--active {\\n  color: var(--breadcrumb-active-color);\\n  font-weight: 500;\\n}\\n\\n.breadcrumb-item--active .breadcrumb-link {\\n  cursor: default;\\n  pointer-events: none;\\n}\\n\\n.breadcrumb-separator {\\n  margin: 0 var(--breadcrumb-spacing);\\n  color: var(--breadcrumb-separator-color);\\n  user-select: none;\\n}\\n\\n.breadcrumb-ellipsis {\\n  display: flex;\\n  align-items: center;\\n  padding: 2px 4px;\\n  margin: -2px -4px;\\n  cursor: pointer;\\n  color: var(--breadcrumb-color);\\n  border-radius: 2px;\\n  transition: background 0.2s ease;\\n}\\n\\n.breadcrumb-ellipsis:hover {\\n  background: rgba(0, 0, 0, 0.05);\\n}\\n\\n.breadcrumb-ellipsis:focus-visible {\\n  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);\\n  outline: none;\\n}\\n\\n/* Sizes */\\n:host([size=\\\"small\\\"]) {\\n  --breadcrumb-font-size: 12px;\\n  --breadcrumb-spacing: 6px;\\n}\\n\\n:host([size=\\\"large\\\"]) {\\n  --breadcrumb-font-size: 16px;\\n  --breadcrumb-spacing: 10px;\\n}\\n\\n/* Collapsed state */\\n.breadcrumb--collapsed .breadcrumb-item--hidden {\\n  display: none;\\n}\\n\\n/* Mobile responsive */\\n@media (max-width: 640px) {\\n  .breadcrumb {\\n    font-size: calc(var(--breadcrumb-font-size) * 0.9);\\n  }\\n}\";",null],"names":[],"mappings":";;;AAAA,UAAe,mwFAAmwF;;ICMrwF,gBAAgB,GAAA,CAAA,MAAA;4BAD5B,OAAO,CAAC,mBAAmB,CAAC,CAAA;;;;sBACS,WAAW;;;;;;;;;;;;;;;;;;;;;AAAnB,KAAA,cAAQ,WAAW,CAAA;;;;AAE/C,YAAA,IAAA,CAAA,KAAK,IAFM,iBAAA,CAAA,IAAA,EAAA,0BAAA,CAAgB,EAAA,iBAAA,CAAA,IAAA,EAAA,mBAAA,EAED,EAAE,CAAA,CAAA;YAG5B,IAAA,CAAA,SAAS,IAAA,iBAAA,CAAA,IAAA,EAAA,wBAAA,CAAA,EAAA,iBAAA,CAAA,IAAA,EAAA,uBAAA,EAAwB,GAAG,CAAA,CAAA;YAGpC,IAAA,CAAA,IAAI,IAAA,iBAAA,CAAA,IAAA,EAAA,4BAAA,CAAA,EAAA,iBAAA,CAAA,IAAA,EAAA,kBAAA,EAAmB,QAAQ,CAAA,CAAA;YAG/B,IAAA,CAAA,QAAQ,IAAA,iBAAA,CAAA,IAAA,EAAA,uBAAA,CAAA,EAAA,iBAAA,CAAA,IAAA,EAAA,sBAAA,EAAG,CAAC,CAAA,CAAA;AAGZ,YAAA,IAAA,CAAA,iBAAiB,IAAA,iBAAA,CAAA,IAAA,EAAA,2BAAA,CAAA,EAAA,iBAAA,CAAA,IAAA,EAAA,+BAAA,EAAA,MAAA,CAAA,CAAA;YAET,IAAA,CAAA,SAAS,IAAA,iBAAA,CAAA,IAAA,EAAA,oCAAA,CAAA,EAAG,IAAI,CAAA;YAChB,IAAA,CAAA,SAAS,GAAqB,EAAE;QAuK1C;;;AAvLG,YAAA,iBAAA,GAAA,CAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAA;qCAGzB,QAAQ,CAAC,EAAI,CAAC,CAAA;gCAGd,QAAQ,CAAC,EAAI,CAAC,CAAA;AAGd,YAAA,oBAAA,GAAA,CAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,GAAI,CAAC,CAAA;6CAG5B,KAAK,CAAC,aAAa,CAAC,CAAA;AAkFpB,YAAA,+BAAA,GAAA,CAAA,EAAE,CAAC,OAAO,EAAE,sBAAsB,CAAC,CAAA;2CAMnC,EAAE,CAAC,OAAO,EAAE,kBAAkB,CAAC,EAC/B,QAAQ,CAAC,kBAAkB,CAAC,CAAA;AAqC5B,YAAA,gBAAA,GAAA,CAAA,KAAK,EAAE,CAAA;AAWP,YAAA,4BAAA,GAAA,CAAA,KAAK,CAAC,OAAO,EAAE,WAAW,EAAE,UAAU,CAAC,CAAA;AAtDxC,YAAA,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,+BAAA,EAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,GAAA,IAAA,qBAAA,IAAA,GAAA,EAAA,GAAA,EAAA,GAAA,IAAA,GAAA,CAAA,mBAAmB,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,0BAAA,CAAA;AAOnB,YAAA,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,2BAAA,EAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,GAAA,IAAA,iBAAA,IAAA,GAAA,EAAA,GAAA,EAAA,GAAA,IAAA,GAAA,CAAA,eAAe,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,0BAAA,CAAA;AAqCf,YAAA,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,gBAAA,EAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,GAAA,IAAA,MAAA,IAAA,GAAA,EAAA,GAAA,EAAA,GAAA,IAAA,GAAA,CAAA,IAAI,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,0BAAA,CAAA;AAWJ,YAAA,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,4BAAA,EAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,GAAA,IAAA,kBAAA,IAAA,GAAA,EAAA,GAAA,EAAA,GAAA,IAAA,GAAA,CAAA,gBAAgB,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,0BAAA,CAAA;YArJhB,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,OAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,GAAA,IAAA,OAAA,IAAA,GAAA,EAAA,GAAA,EAAA,GAAA,IAAA,GAAA,CAAA,KAAK,EAAA,GAAA,EAAA,CAAA,GAAA,EAAA,KAAA,KAAA,EAAA,GAAA,CAAL,KAAK,GAAA,KAAA,CAAA,CAAA,CAAA,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,mBAAA,EAAA,wBAAA,CAAA;YAGL,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,qBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,WAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,GAAA,IAAA,WAAA,IAAA,GAAA,EAAA,GAAA,EAAA,GAAA,IAAA,GAAA,CAAA,SAAS,EAAA,GAAA,EAAA,CAAA,GAAA,EAAA,KAAA,KAAA,EAAA,GAAA,CAAT,SAAS,GAAA,KAAA,CAAA,CAAA,CAAA,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,uBAAA,EAAA,4BAAA,CAAA;YAGT,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,gBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,GAAA,IAAA,MAAA,IAAA,GAAA,EAAA,GAAA,EAAA,GAAA,IAAA,GAAA,CAAA,IAAI,EAAA,GAAA,EAAA,CAAA,GAAA,EAAA,KAAA,KAAA,EAAA,GAAA,CAAJ,IAAI,GAAA,KAAA,CAAA,CAAA,CAAA,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,kBAAA,EAAA,uBAAA,CAAA;YAGJ,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,oBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,UAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,GAAA,IAAA,UAAA,IAAA,GAAA,EAAA,GAAA,EAAA,GAAA,IAAA,GAAA,CAAA,QAAQ,EAAA,GAAA,EAAA,CAAA,GAAA,EAAA,KAAA,KAAA,EAAA,GAAA,CAAR,QAAQ,GAAA,KAAA,CAAA,CAAA,CAAA,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,sBAAA,EAAA,2BAAA,CAAA;YAGR,YAAA,CAAA,IAAA,EAAA,IAAA,EAAA,6BAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,MAAA,EAAA,EAAA,GAAA,EAAA,GAAA,IAAA,mBAAA,IAAA,GAAA,EAAA,GAAA,EAAA,GAAA,IAAA,GAAA,CAAA,iBAAiB,EAAA,GAAA,EAAA,CAAA,GAAA,EAAA,KAAA,KAAA,EAAA,GAAA,CAAjB,iBAAiB,GAAA,KAAA,CAAA,CAAA,CAAA,EAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,+BAAA,EAAA,oCAAA,CAAA;YAdnB,YAAA,CAAA,IAAA,EAAA,gBAAA,GAAA,EAAA,KAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,EAAA,IAAA,EAAA,OAAA,EAAA,IAAA,EAAA,UAAA,CAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,uBAAA,CAAA;;;YAAa,iBAAA,CAAA,UAAA,EAAA,uBAAA,CAAA;;QAmBX,IAAI,GAAA;AACF,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE;YACnC,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC;AACnD,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS;AAE3F,YAAA,gBAAe;;;AAGa,8BAAA,EAAA,YAAY,GAAG,uBAAuB,GAAG,EAAE,CAAA;YAC/D,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;gBACjC,MAAM,MAAM,GAAG,KAAK,KAAK,YAAY,CAAC,MAAM,GAAG,CAAC;AAChD,gBAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,IAAI,MAAM;AACtC,gBAAA,MAAM,QAAQ,GAAG,YAAY,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC;AAE7E,gBAAA,gBAAe;AACgB,yCAAA,EAAA,QAAQ,GAAG,yBAAyB,GAAG,EAAE,CAAA,CAAA,EAAI,QAAQ,GAAG,yBAAyB,GAAG,EAAE,CAAA;kBAC/G,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,YAAW;AACtB,2BAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;AAED,mCAAA,EAAA,QAAQ,GAAG,MAAM,GAAG,EAAE,CAAA;;AAErC,oBAAA,EAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACrB,oBAAA,EAAA,IAAI,CAAC,KAAK;;iBAEf,YAAW;;AAEY,sCAAA,EAAA,QAAQ,GAAG,MAAM,GAAG,EAAE,CAAA;AACxC,oBAAA,EAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AACrB,oBAAA,EAAA,IAAI,CAAC,KAAK;;AAEf,gBAAA,CAAA;AACC,gBAAA,EAAA,CAAC,MAAM,YAAW;;AAEd,oBAAA,EAAA,IAAI,CAAC,SAAS;;iBAEnB,GAAG,EAAE;;AAEN,cAAA,EAAA,YAAY,IAAI,KAAK,KAAK,CAAC,IAAI,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,YAAW;;;;;;;;AAQnE,oBAAA,EAAA,IAAI,CAAC,SAAS;;;eAGrB,GAAG,EAAE;aACP;AACH,YAAA,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;;;KAGhB;QACH;QAEA,GAAG,GAAA;AACD,YAAA,OAAO,GAAG;QACZ;QAEQ,WAAW,GAAA;;AAEjB,YAAA,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK;QAChE;AAEQ,QAAA,eAAe,CAAC,QAA0B,EAAA;AAChD,YAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,QAAQ,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AAC7E,gBAAA,OAAO,QAAQ;YACjB;;AAGA,YAAA,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC;AAC7B,YAAA,MAAM,SAAS,GAAG,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;AACtD,YAAA,OAAO,CAAC,SAAS,EAAE,GAAG,SAAS,CAAC;QAClC;QAGA,mBAAmB,GAAA;AACjB,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK;YACtB,IAAI,CAAC,MAAM,EAAE;QACf;AAIA,QAAA,eAAe,CAAC,KAAiB,EAAA;AAC/B,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA2B;YAChD,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE;YAC9C,MAAM,IAAI,GAAG,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE;;AAG9C,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE;AACnC,YAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;YAE9D,OAAO;AACL,gBAAA,IAAI,EAAE,QAAQ,CAAC,KAAK,CAAC;gBACrB,KAAK;gBACL,IAAI;gBACJ;aACD;QACH;QAEQ,gBAAgB,GAAA;YACtB,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC;AACnD,YAAA,IAAI,CAAC,IAAI;gBAAE;YAEX,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAC3C,EAAE,IAAI,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,aAAa,CAC1B;YAExB,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,KAAK;AACpC,gBAAA,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE;AACrD,gBAAA,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,SAAS;AAC7B,gBAAA,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,SAAS;AAC7B,gBAAA,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,SAAS;AACvC,gBAAA,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI;AACzB,aAAA,CAAC,CAAC;YAEH,IAAI,CAAC,MAAM,EAAE;QACf;QAGA,IAAI,GAAA;;YAEF,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC;YACnD,IAAI,IAAI,EAAE;AACR,gBAAA,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;;gBAElE,IAAI,CAAC,gBAAgB,EAAE;YACzB;QACF;QAGA,gBAAgB,GAAA;AACd,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;AAErB,YAAA,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;gBAClD,IAAI,CAAC,MAAM,EAAE;YACf;QACF;AAEA,QAAA,QAAQ,CAAC,KAAuB,EAAA;AAC9B,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;QACpB;AAEQ,QAAA,UAAU,CAAC,IAAoB,EAAA;AACrC,YAAA,gBAAe;AAC6B,8CAAA,EAAA,IAAI,CAAC,SAAS,IAAI,EAAE,YAAY,IAAI,CAAC,SAAS,GAAG,EAAE,GAAG,QAAQ,CAAA;AACxE,oCAAA,EAAA,IAAI,CAAC,IAAI,GAAG,EAAE,GAAG,QAAQ,CAAA,CAAA,EAAI,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;KAC7E;QACH;QAEQ,MAAM,GAAA;AACZ,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU;YAC9B,IAAI,MAAM,EAAE;AACV,gBAAA,MAAM,CAAC,SAAS,GAAG,EAAE;AACrB,gBAAA,IAAI,IAAI,CAAC,GAAG,EAAE;oBACZ,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,oBAAA,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,EAAE;AAC9B,oBAAA,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC;gBAC3B;gBACA,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC;AACnD,gBAAA,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE;AAChC,gBAAA,MAAM,CAAC,WAAW,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YACtD;QACF;;;;;;;"}
+{"version":3,"file":"snice-breadcrumbs.js","sources":["../../../components/breadcrumbs/snice-breadcrumbs.css?inline","../../../../components/breadcrumbs/snice-breadcrumbs.ts"],"sourcesContent":["export default \":host{display:block;--breadcrumb-font-size:0.875rem;--breadcrumb-spacing:0.5rem;--breadcrumb-color:rgb(var(--snice-color-gray-600, 82 82 82));--breadcrumb-hover-color:rgb(var(--snice-color-blue-600, 37 99 235));--breadcrumb-active-color:rgb(var(--snice-color-gray-900, 23 23 23));--breadcrumb-separator-color:rgb(var(--snice-color-gray-400, 163 163 163))}case,default,if,when{display:contents}.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:var(--breadcrumb-font-size);line-height:1.5}.breadcrumb-item{display:flex;align-items:center;color:var(--breadcrumb-color)}.breadcrumb-link{color:inherit;text-decoration:none;transition:color .2s;cursor:pointer;outline:0;border-radius:2px;padding:.125rem .25rem;margin:-.125rem -.25rem;display:inline-flex;align-items:center;gap:.375rem}.breadcrumb-link:hover{color:var(--breadcrumb-hover-color);text-decoration:underline}.breadcrumb-link:focus-visible{box-shadow:0 0 0 2px rgba(59,130,246,.4)}.breadcrumb-text{padding:2px 4px;margin:-2px -4px;display:inline-flex;align-items:center;gap:.375rem}.breadcrumb-icon{display:inline-flex;align-items:center;font-size:1.1em}.breadcrumb-icon-image{width:1.2em;height:1.2em;object-fit:contain;vertical-align:middle}[hidden]{display:none!important}.breadcrumb-item--active{color:var(--breadcrumb-active-color);font-weight:500}.breadcrumb-item--active .breadcrumb-link{cursor:default;pointer-events:none}.breadcrumb-separator{margin:0 var(--breadcrumb-spacing);color:var(--breadcrumb-separator-color);user-select:none}.breadcrumb-ellipsis{display:flex;align-items:center;padding:2px 4px;margin:-2px -4px;cursor:pointer;color:var(--breadcrumb-color);border-radius:2px;transition:background .2s}.breadcrumb-ellipsis:hover{background:rgba(0,0,0,.05)}.breadcrumb-ellipsis:focus-visible{box-shadow:0 0 0 2px rgba(59,130,246,.4);outline:0}:host([size=small]){--breadcrumb-font-size:12px;--breadcrumb-spacing:6px}:host([size=large]){--breadcrumb-font-size:16px;--breadcrumb-spacing:10px}.breadcrumb--collapsed .breadcrumb-item--hidden{display:none}@media (max-width:640px){.breadcrumb{font-size:calc(var(--breadcrumb-font-size) * .9)}}\";",null],"names":["cssTag"],"mappings":"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"}

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

@@ -16,16 +16,12 @@ export declare class SniceButton extends HTMLElement implements SniceButtonEleme
     spinner?: HTMLElement;
     label?: HTMLElement;
     iconElement?: HTMLImageElement;
-    html(): string;
-    css(): string;
-    updateButtonClasses(): void;
-    updateDisabledState(): void;
+    renderContent(): import("snice").TemplateResult;
+    private handleInternalClick;
+    componentStyles(): import("snice").CSSResult;
     setLoading(loading: boolean): void;
     setDisabled(disabled: boolean): void;
     setVariant(variant: typeof this.variant): void;
-    handleClick(event: MouseEvent): {
-        originalEvent: MouseEvent;
-    } | undefined;
     focus(options?: FocusOptions): void;
     blur(): void;
     click(): void;

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

@@ -1,7 +1,7 @@
 import { __esDecorate, __runInitializers } from 'tslib';
-import { element, property, query, watch, on, dispatch } from 'snice';
+import { element, property, query, render, styles, html, css } from 'snice';
 
-var css = ":host {\n  display: inline-block;\n  position: relative;\n  width: auto;\n  cursor: pointer;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  border: 1px solid;\n  font-family: var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);\n  font-weight: var(--snice-font-weight-medium, 500);\n  text-decoration: none;\n  user-select: none;\n  white-space: nowrap;\n  vertical-align: middle;\n  padding: 0;\n  transition: \n    color var(--snice-transition-fast, 150ms) ease,\n    background-color var(--snice-transition-fast, 150ms) ease,\n    border-color var(--snice-transition-fast, 150ms) ease,\n    box-shadow var(--snice-transition-fast, 150ms) ease;\n  cursor: inherit;\n  position: relative;\n}\n\n.button:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 var(--snice-focus-ring-width, 2px) var(--snice-focus-ring-color, rgb(59 130 246 / 0.5));\n}\n\n.button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Sizes */\n.button--small {\n  font-size: var(--snice-font-size-sm, 0.875rem);\n  height: 1.875rem; /* 30px */\n  padding: 0 var(--snice-spacing-sm, 0.75rem);\n  border-radius: var(--snice-border-radius-md, 0.25rem);\n}\n\n.button--medium {\n  font-size: var(--snice-font-size-md, 1rem);\n  height: 2.5rem; /* 40px */\n  padding: 0 var(--snice-spacing-md, 1rem);\n  border-radius: var(--snice-border-radius-md, 0.25rem);\n}\n\n.button--large {\n  font-size: var(--snice-font-size-lg, 1.125rem);\n  height: 3.125rem; /* 50px */\n  padding: 0 var(--snice-spacing-lg, 1.5rem);\n  border-radius: var(--snice-border-radius-md, 0.25rem);\n}\n\n/* Variants - Default */\n.button--default {\n  background-color: var(--snice-color-background, rgb(255 255 255));\n  color: var(--snice-color-text, rgb(23 23 23));\n  border-color: var(--snice-color-border, rgb(226 226 226));\n}\n\n.button--default:hover:not(.button--disabled) {\n  background-color: var(--snice-color-background-secondary, rgb(250 250 250));\n  border-color: var(--snice-color-border-hover, rgb(204 204 204));\n}\n\n.button--default:active:not(.button--disabled) {\n  background-color: var(--snice-color-background-tertiary, rgb(241 241 241));\n}\n\n/* Variants - Primary */\n.button--primary {\n  background-color: var(--snice-color-primary, rgb(37 99 235));\n  color: var(--snice-color-text-inverse, rgb(250 250 250));\n  border-color: var(--snice-color-primary, rgb(37 99 235));\n}\n\n.button--primary:hover:not(.button--disabled) {\n  background-color: var(--snice-color-primary-hover, rgb(29 78 216));\n  border-color: var(--snice-color-primary-hover, rgb(29 78 216));\n}\n\n.button--primary:active:not(.button--disabled) {\n  background-color: var(--snice-color-primary-hover, rgb(29 78 216));\n}\n\n/* Variants - Success */\n.button--success {\n  background-color: var(--snice-color-success, rgb(22 163 74));\n  color: var(--snice-color-text-inverse, rgb(250 250 250));\n  border-color: var(--snice-color-success, rgb(22 163 74));\n}\n\n.button--success:hover:not(.button--disabled) {\n  background-color: var(--snice-color-success-hover, rgb(21 128 61));\n  border-color: var(--snice-color-success-hover, rgb(21 128 61));\n}\n\n/* Variants - Warning */\n.button--warning {\n  background-color: var(--snice-color-warning, rgb(202 138 4));\n  color: var(--snice-color-text-inverse, rgb(250 250 250));\n  border-color: var(--snice-color-warning, rgb(202 138 4));\n}\n\n.button--warning:hover:not(.button--disabled) {\n  background-color: var(--snice-color-warning-hover, rgb(161 98 7));\n  border-color: var(--snice-color-warning-hover, rgb(161 98 7));\n}\n\n/* Variants - Danger */\n.button--danger {\n  background-color: var(--snice-color-danger, rgb(220 38 38));\n  color: var(--snice-color-text-inverse, rgb(250 250 250));\n  border-color: var(--snice-color-danger, rgb(220 38 38));\n}\n\n.button--danger:hover:not(.button--disabled) {\n  background-color: var(--snice-color-danger-hover, rgb(185 28 28));\n  border-color: var(--snice-color-danger-hover, rgb(185 28 28));\n}\n\n/* Variants - Text */\n.button--text {\n  background-color: transparent;\n  color: var(--snice-color-primary, rgb(37 99 235));\n  border-color: transparent;\n}\n\n.button--text:hover:not(.button--disabled) {\n  background-color: rgb(59 130 246 / 0.1);\n  color: var(--snice-color-primary-hover, rgb(29 78 216));\n}\n\n/* Outline modifier */\n.button--outline.button--default {\n  background-color: transparent;\n  color: var(--snice-color-text, rgb(23 23 23));\n}\n\n.button--outline.button--primary {\n  background-color: transparent;\n  color: var(--snice-color-primary, rgb(37 99 235));\n}\n\n.button--outline.button--success {\n  background-color: transparent;\n  color: var(--snice-color-success, rgb(22 163 74));\n}\n\n.button--outline.button--warning {\n  background-color: transparent;\n  color: var(--snice-color-warning, rgb(202 138 4));\n}\n\n.button--outline.button--danger {\n  background-color: transparent;\n  color: var(--snice-color-danger, rgb(220 38 38));\n}\n\n.button--outline:hover:not(.button--disabled) {\n  background-color: rgb(115 115 115 / 0.1);\n}\n\n/* Shape modifiers */\n.button--pill {\n  border-radius: var(--snice-border-radius-pill, 9999px);\n}\n\n.button--circle {\n  border-radius: var(--snice-border-radius-circle, 50%);\n  width: var(--size);\n  padding: 0;\n}\n\n.button--small.button--circle { --size: 1.875rem; /* 30px */ }\n.button--medium.button--circle { --size: 2.5rem; /* 40px */ }\n.button--large.button--circle { --size: 3.125rem; /* 50px */ }\n\n/* Loading state */\n.button--loading {\n  position: relative;\n  cursor: wait;\n}\n\n.button--loading .label {\n  visibility: hidden;\n}\n\n.spinner {\n  display: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 1em;\n  height: 1em;\n}\n\n.button--loading .spinner {\n  display: block;\n}\n\n.spinner::after {\n  content: '';\n  display: block;\n  width: 100%;\n  height: 100%;\n  border: 2px solid currentColor;\n  border-right-color: transparent;\n  border-radius: 50%;\n  animation: spin 0.6s linear infinite;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}";
+var cssContent = ":host{display:inline-block;position:relative;width:auto;cursor:pointer}:host([disabled]){cursor:not-allowed}.button{display:inline-flex;align-items:center;justify-content:center;width:100%;border:1px solid;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);font-weight:var(--snice-font-weight-medium,500);text-decoration:none;user-select:none;white-space:nowrap;vertical-align:middle;padding:0;transition:color var(--snice-transition-fast, 150ms) ease,background-color var(--snice-transition-fast, 150ms) ease,border-color var(--snice-transition-fast, 150ms) ease,box-shadow var(--snice-transition-fast, 150ms) ease;cursor:inherit;position:relative}.button:active{transition:color 50ms,background-color 50ms,border-color 50ms,box-shadow 50ms}.button:focus-visible{outline:0;box-shadow:0 0 0 var(--snice-focus-ring-width,2px) var(--snice-focus-ring-color,rgb(59 130 246 / .5))}.button--disabled{opacity:.5;cursor:not-allowed}.button--small{font-size:var(--snice-font-size-sm, .875rem);height:1.875rem;padding:0 var(--snice-spacing-sm,.75rem);border-radius:var(--snice-border-radius-md,.25rem)}.button--medium{font-size:var(--snice-font-size-md, 1rem);height:2.5rem;padding:0 var(--snice-spacing-md,1rem);border-radius:var(--snice-border-radius-md,.25rem)}.button--large{font-size:var(--snice-font-size-lg, 1.125rem);height:3.125rem;padding:0 var(--snice-spacing-lg,1.5rem);border-radius:var(--snice-border-radius-md,.25rem)}.button--default{background-color:var(--snice-color-background,rgb(255 255 255));color:var(--snice-color-text,rgb(23 23 23));border-color:var(--snice-color-border,rgb(226 226 226))}.button--default:hover:not(.button--disabled){background-color:var(--snice-color-background-secondary,rgb(250 250 250));border-color:var(--snice-color-border-hover,rgb(204 204 204))}.button--default:active:not(.button--disabled){background-color:var(--snice-color-background-tertiary,rgb(248 248 248));border-color:var(--snice-color-border-hover,rgb(204 204 204))}.button--primary{background-color:var(--snice-color-primary,rgb(37 99 235));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-primary,rgb(37 99 235))}.button--primary:hover:not(.button--disabled){background-color:var(--snice-color-primary-hover,rgb(29 78 216));border-color:var(--snice-color-primary-hover,rgb(29 78 216))}.button--primary:active:not(.button--disabled){background-color:var(--snice-color-primary-active,rgb(27 76 214));border-color:var(--snice-color-primary-active,rgb(27 76 214))}.button--success{background-color:var(--snice-color-success,rgb(22 163 74));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-success,rgb(22 163 74))}.button--success:hover:not(.button--disabled){background-color:var(--snice-color-success-hover,rgb(21 128 61));border-color:var(--snice-color-success-hover,rgb(21 128 61))}.button--success:active:not(.button--disabled){background-color:var(--snice-color-success-active,rgb(19 126 59));border-color:var(--snice-color-success-active,rgb(19 126 59))}.button--warning{background-color:var(--snice-color-warning,rgb(202 138 4));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-warning,rgb(202 138 4))}.button--warning:hover:not(.button--disabled){background-color:var(--snice-color-warning-hover,rgb(161 98 7));border-color:var(--snice-color-warning-hover,rgb(161 98 7))}.button--warning:active:not(.button--disabled){background-color:var(--snice-color-warning-active,rgb(159 96 5));border-color:var(--snice-color-warning-active,rgb(159 96 5))}.button--danger{background-color:var(--snice-color-danger,rgb(220 38 38));color:var(--snice-color-text-inverse,rgb(250 250 250));border-color:var(--snice-color-danger,rgb(220 38 38))}.button--danger:hover:not(.button--disabled){background-color:var(--snice-color-danger-hover,rgb(185 28 28));border-color:var(--snice-color-danger-hover,rgb(185 28 28))}.button--danger:active:not(.button--disabled){background-color:var(--snice-color-danger-active,rgb(183 26 26));border-color:var(--snice-color-danger-active,rgb(183 26 26))}.button--text{background-color:transparent;color:var(--snice-color-primary,rgb(37 99 235));border-color:transparent}.button--text:hover:not(.button--disabled){background-color:rgb(59 130 246 / .1);color:var(--snice-color-primary-hover,rgb(29 78 216))}.button--text:active:not(.button--disabled){background-color:rgb(59 130 246 / .11)}.button--outline.button--default{background-color:transparent;color:var(--snice-color-text,rgb(23 23 23))}.button--outline.button--primary{background-color:transparent;color:var(--snice-color-primary,rgb(37 99 235))}.button--outline.button--success{background-color:transparent;color:var(--snice-color-success,rgb(22 163 74))}.button--outline.button--warning{background-color:transparent;color:var(--snice-color-warning,rgb(202 138 4))}.button--outline.button--danger{background-color:transparent;color:var(--snice-color-danger,rgb(220 38 38))}.button--outline:hover:not(.button--disabled){background-color:rgb(115 115 115 / .1)}.button--outline:active:not(.button--disabled){background-color:rgb(115 115 115 / .11)}.button--pill{border-radius:var(--snice-border-radius-pill,9999px)}.button--circle{border-radius:var(--snice-border-radius-circle,50%);width:var(--size);padding:0}.button--small.button--circle{--size:1.875rem}.button--medium.button--circle{--size:2.5rem}.button--large.button--circle{--size:3.125rem}.button--loading{position:relative;cursor:wait}.button--loading .label{visibility:hidden}.spinner{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1em;height:1em}.button--loading .spinner{display:block}.spinner::after{content:'';display:block;width:100%;height:100%;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}";
 
 let SniceButton = (() => {
     let _classDecorators = [element('snice-button')];
@@ -58,9 +58,8 @@ let SniceButton = (() => {
     let _iconElement_decorators;
     let _iconElement_initializers = [];
     let _iconElement_extraInitializers = [];
-    let _updateButtonClasses_decorators;
-    let _updateDisabledState_decorators;
-    let _handleClick_decorators;
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
     (class extends _classSuper {
         static { _classThis = this; }
         static {
@@ -81,12 +80,10 @@ let SniceButton = (() => {
             _spinner_decorators = [query('.spinner')];
             _label_decorators = [query('.label')];
             _iconElement_decorators = [query('.icon')];
-            _updateButtonClasses_decorators = [watch('*')];
-            _updateDisabledState_decorators = [watch('disabled')];
-            _handleClick_decorators = [on('click'), dispatch('@snice/click')];
-            __esDecorate(this, null, _updateButtonClasses_decorators, { kind: "method", name: "updateButtonClasses", static: false, private: false, access: { has: obj => "updateButtonClasses" in obj, get: obj => obj.updateButtonClasses }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _updateDisabledState_decorators, { kind: "method", name: "updateDisabledState", static: false, private: false, access: { has: obj => "updateDisabledState" in obj, get: obj => obj.updateDisabledState }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleClick_decorators, { kind: "method", name: "handleClick", static: false, private: false, access: { has: obj => "handleClick" in obj, get: obj => obj.handleClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            _renderContent_decorators = [render()];
+            _componentStyles_decorators = [styles()];
+            __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(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(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, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
@@ -108,7 +105,7 @@ let SniceButton = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        html() {
+        renderContent() {
             const classes = [
                 'button',
                 `button--${this.variant || 'default'}`,
@@ -121,58 +118,22 @@ let SniceButton = (() => {
                 this.icon ? `button--has-icon` : '',
                 this.icon ? `button--icon-${this.iconPlacement}` : ''
             ].filter(Boolean).join(' ');
-            const iconElement = this.icon ? /*html*/ `
-      <img class="icon" src="${this.icon}" alt="" part="icon" />
-    ` : '';
-            return /*html*/ `
-      <button class="${classes}" type="button" ${this.disabled ? 'disabled' : ''} part="base">
+            return html /*html*/ `
+      <button class="${classes}" type="button" ?disabled="${this.disabled}" part="base" @click="${(e) => this.handleInternalClick(e)}">
         <span class="spinner" part="spinner"></span>
-        ${this.iconPlacement === 'start' ? iconElement : ''}
+        <if ${this.icon && this.iconPlacement === 'start'}>
+          <img class="icon" src="${this.icon}" alt="" part="icon" />
+        </if>
         <span class="label" part="label">
           <slot></slot>
         </span>
-        ${this.iconPlacement === 'end' ? iconElement : ''}
+        <if ${this.icon && this.iconPlacement === 'end'}>
+          <img class="icon" src="${this.icon}" alt="" part="icon" />
+        </if>
       </button>
     `;
         }
-        css() {
-            return css;
-        }
-        updateButtonClasses() {
-            if (!this.button)
-                return;
-            // Rebuild all classes based on current state
-            const classes = [
-                'button',
-                `button--${this.variant}`,
-                `button--${this.size}`,
-                this.outline ? 'button--outline' : '',
-                this.pill ? 'button--pill' : '',
-                this.circle ? 'button--circle' : '',
-                this.loading ? 'button--loading' : '',
-                this.disabled ? 'button--disabled' : '',
-                this.icon ? `button--has-icon` : '',
-                this.icon ? `button--icon-${this.iconPlacement}` : ''
-            ].filter(Boolean);
-            // Set the className directly to avoid class manipulation issues
-            this.button.className = classes.join(' ');
-        }
-        updateDisabledState() {
-            if (this.button) {
-                this.button.disabled = this.disabled;
-            }
-        }
-        // Keep these methods for backwards compatibility if needed
-        setLoading(loading) {
-            this.loading = loading;
-        }
-        setDisabled(disabled) {
-            this.disabled = disabled;
-        }
-        setVariant(variant) {
-            this.variant = variant;
-        }
-        handleClick(event) {
+        handleInternalClick(event) {
             if (this.disabled || this.loading) {
                 event.preventDefault();
                 event.stopPropagation();
@@ -193,7 +154,25 @@ let SniceButton = (() => {
                     window.location.href = this.href;
                 }
             }
-            return { originalEvent: event };
+            // Dispatch the custom event
+            this.dispatchEvent(new CustomEvent('@snice/click', {
+                bubbles: true,
+                composed: true,
+                detail: { originalEvent: event }
+            }));
+        }
+        componentStyles() {
+            return css /*css*/ `${cssContent}`;
+        }
+        // Keep these methods for backwards compatibility if needed
+        setLoading(loading) {
+            this.loading = loading;
+        }
+        setDisabled(disabled) {
+            this.disabled = disabled;
+        }
+        setVariant(variant) {
+            this.variant = variant;
         }
         focus(options) {
             this.button?.focus(options);