snice 4.14.0 → 4.16.0

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

@@ -1,5 +1,5 @@
 /*!
- * snice v4.13.0
+ * snice v4.15.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.
@@ -112,7 +112,7 @@ var SniceTable = (function (exports, snice) {
       return snice.html `<span class="${className}" part="icon">${icon}</span>`;
   }
 
-  var cssContent$2 = ":host{display:inline-block;width:100%;max-width:100%;box-sizing:border-box;font-family:var(--snice-font-family);color-scheme:light dark}.input-wrapper{position:relative;width:100%;max-width:100%;box-sizing:border-box}.input-container{position:relative;display:flex;align-items:center;width:100%;max-width:100%;box-sizing:border-box;transition:all var(--snice-transition-fast) ease}.input{flex:1;min-width:0;box-sizing:border-box;font-family:inherit;font-size:var(--snice-font-size-md);background:var(--snice-color-background-input,rgb(248 247 245));color:var(--snice-color-text);border:1px solid var(--snice-color-border);border-radius:var(--snice-border-radius-md);box-shadow:var(--snice-shadow-inset-sm);transition:all var(--snice-transition-fast) ease;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.input:focus{border-color:var(--snice-color-primary);box-shadow:0 0 0 var(--snice-focus-ring-width) var(--snice-focus-ring-color),var(--snice-shadow-sm)}.input:disabled{background:var(--snice-color-background-secondary);color:var(--snice-color-text-secondary);cursor:not-allowed;opacity:.6}.input::placeholder{color:var(--snice-color-text-secondary);opacity:.7}.input--small{padding:.375rem .625rem;font-size:var(--snice-font-size-sm)}.input--medium{padding:.5rem .75rem;font-size:var(--snice-font-size-md)}.input--large{padding:.625rem .875rem;font-size:var(--snice-font-size-lg)}.input--outlined{background:var(--snice-color-background-input,rgb(248 247 245));border:1px solid var(--snice-color-border)}.input--filled{background:var(--snice-color-background-secondary);border:1px solid transparent;border-bottom-color:var(--snice-color-border);border-radius:var(--snice-border-radius-md) var(--snice-border-radius-md) 0 0}.input--filled:focus{background:var(--snice-color-background-hover);border-bottom-color:var(--snice-color-primary)}.input--underlined{background:0 0;border:none;border-bottom:1px solid var(--snice-color-border);border-radius:0;padding-left:0;padding-right:0}.input--underlined:focus{border-bottom-color:var(--snice-color-primary);box-shadow:none}.input--invalid{border-color:var(--snice-color-danger)}.input--invalid:focus{border-color:var(--snice-color-danger);box-shadow:0 0 0 var(--snice-focus-ring-width) var(--snice-color-danger-alpha,hsl(var(--snice-color-red-500) / .4)),var(--snice-shadow-sm)}.input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7}.input::-webkit-calendar-picker-indicator:hover{opacity:1}.input--with-prefix-icon{padding-left:2.25rem}.input--clearable,.input--with-suffix-icon{padding-right:2.25rem}.input--with-suffix-icon.input--clearable{padding-right:3.75rem}.label{display:block;margin-bottom:.375rem;font-size:var(--snice-font-size-sm);font-weight:500;color:var(--snice-color-text)}.label--required::after{content:' *';color:var(--snice-color-danger)}.error-text,.helper-text{display:block;margin-top:.25rem;font-size:var(--snice-font-size-xs);min-height:1.125rem}.helper-text{color:var(--snice-color-text-secondary)}.error-text{color:var(--snice-color-danger)}.icon-slot{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--snice-color-text-secondary);pointer-events:none;opacity:.7}.icon-slot:empty{display:none}.icon-slot--prefix{left:.625rem}.icon-slot--suffix{right:.625rem}.icon{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--snice-color-text-secondary);pointer-events:none}.icon-slot ::slotted(*){display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:1.25rem;line-height:1}.icon-slot ::slotted(svg){width:1.25rem;height:1.25rem}.icon-slot ::slotted(img){width:1.25rem;height:1.25rem;object-fit:contain}.clear-button{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:.25rem;background:0 0;border:none;border-radius:var(--snice-border-radius-sm);color:var(--snice-color-text-secondary);cursor:pointer;transition:all var(--snice-transition-fast) ease;opacity:0;visibility:hidden}.clear-button:hover{background:var(--snice-color-background-hover);color:var(--snice-color-text)}.input-container:hover .clear-button--visible,.input:focus~.clear-button--visible{opacity:1;visibility:visible}.clear-button--with-suffix{right:2rem}.password-toggle{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:.25rem;background:0 0;border:none;border-radius:var(--snice-border-radius-sm);color:var(--snice-color-text-secondary);cursor:pointer;transition:all var(--snice-transition-fast) ease}.password-toggle:hover{background:var(--snice-color-background-hover);color:var(--snice-color-text)}.input[type=number]::-webkit-inner-spin-button,.input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input[type=number]{-moz-appearance:textfield}.input[type=search]::-webkit-search-cancel-button,.input[type=search]::-webkit-search-decoration,.input[type=search]::-webkit-search-results-button,.input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.input-container:focus-within{z-index:1}.input--loading{cursor:wait}.spinner{position:absolute;right:.75rem;width:1em;height:1em;pointer-events:none}.input--with-suffix-icon .spinner{right:2.5rem}.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)}}";
+  var cssContent$e = ":host{display:inline-block;width:100%;max-width:100%;box-sizing:border-box;font-family:var(--snice-font-family);color-scheme:light dark}.input-wrapper{position:relative;width:100%;max-width:100%;height:100%;box-sizing:border-box}:host([align]) .input-wrapper{display:flex;flex-direction:column}:host([align=top]) .input-wrapper{justify-content:flex-start}:host([align=center]) .input-wrapper{justify-content:center}:host([align=bottom]) .input-wrapper{justify-content:flex-end}.input-container{position:relative;display:flex;align-items:center;width:100%;max-width:100%;box-sizing:border-box;transition:all var(--snice-transition-fast) ease}:host([stretch]) .input-wrapper{display:flex;flex-direction:column}:host([stretch]) .input-container{flex:1}:host([stretch]) .input{height:100%}.input{flex:1;min-width:0;box-sizing:border-box;font-family:inherit;font-size:var(--snice-font-size-md);background:var(--snice-color-background-input,rgb(248 247 245));color:var(--snice-color-text);border:1px solid var(--snice-color-border);border-radius:var(--snice-border-radius-md);box-shadow:var(--snice-shadow-inset-sm);transition:all var(--snice-transition-fast) ease;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.input:focus{border-color:var(--snice-color-primary);box-shadow:0 0 0 var(--snice-focus-ring-width) var(--snice-focus-ring-color),var(--snice-shadow-sm)}.input:disabled{background:var(--snice-color-background-secondary);color:var(--snice-color-text-secondary);cursor:not-allowed;opacity:.6}.input::placeholder{color:var(--snice-color-text-secondary);opacity:.7}.input--small{padding:.375rem .625rem;font-size:var(--snice-font-size-sm)}.input--medium{padding:.5rem .75rem;font-size:var(--snice-font-size-md)}.input--large{padding:.625rem .875rem;font-size:var(--snice-font-size-lg)}.input--outlined{background:var(--snice-color-background-input,rgb(248 247 245));border:1px solid var(--snice-color-border)}.input--filled{background:var(--snice-color-background-secondary);border:1px solid transparent;border-bottom-color:var(--snice-color-border);border-radius:var(--snice-border-radius-md) var(--snice-border-radius-md) 0 0}.input--filled:focus{background:var(--snice-color-background-hover);border-bottom-color:var(--snice-color-primary)}.input--underlined{background:0 0;border:none;border-bottom:1px solid var(--snice-color-border);border-radius:0;padding-left:0;padding-right:0}.input--underlined:focus{border-bottom-color:var(--snice-color-primary);box-shadow:none}.input--invalid{border-color:var(--snice-color-danger)}.input--invalid:focus{border-color:var(--snice-color-danger);box-shadow:0 0 0 var(--snice-focus-ring-width) var(--snice-color-danger-alpha,hsl(var(--snice-color-red-500) / .4)),var(--snice-shadow-sm)}.input::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7}.input::-webkit-calendar-picker-indicator:hover{opacity:1}.input--with-prefix-icon{padding-left:2.25rem}.input--clearable,.input--with-suffix-icon{padding-right:2.25rem}.input--with-suffix-icon.input--clearable{padding-right:3.75rem}.label{display:block;margin-bottom:.375rem;font-size:var(--snice-font-size-sm);font-weight:500;color:var(--snice-color-text);text-align:left}:host([label-align=center]) .label{text-align:center}:host([label-align=right]) .label{text-align:right}.label--required::after{content:' *';color:var(--snice-color-danger)}.error-text,.helper-text{display:block;margin-top:.25rem;font-size:var(--snice-font-size-xs);min-height:1.125rem}.helper-text{color:var(--snice-color-text-secondary)}.error-text{color:var(--snice-color-danger)}.icon-slot{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--snice-color-text-secondary);pointer-events:none;opacity:.7}.icon-slot:empty{display:none}.icon-slot--prefix{left:.625rem}.icon-slot--suffix{right:.625rem}.icon{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--snice-color-text-secondary);pointer-events:none}.icon-slot ::slotted(*){display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;font-size:1.25rem;line-height:1}.icon-slot ::slotted(svg){width:1.25rem;height:1.25rem}.icon-slot ::slotted(img){width:1.25rem;height:1.25rem;object-fit:contain}.clear-button{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:.25rem;background:0 0;border:none;border-radius:var(--snice-border-radius-sm);color:var(--snice-color-text-secondary);cursor:pointer;transition:all var(--snice-transition-fast) ease;opacity:0;visibility:hidden}.clear-button:hover{background:var(--snice-color-background-hover);color:var(--snice-color-text)}.input-container:hover .clear-button--visible,.input:focus~.clear-button--visible{opacity:1;visibility:visible}.clear-button--with-suffix{right:2rem}.password-toggle{position:absolute;right:.5rem;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:.25rem;background:0 0;border:none;border-radius:var(--snice-border-radius-sm);color:var(--snice-color-text-secondary);cursor:pointer;transition:all var(--snice-transition-fast) ease}.password-toggle:hover{background:var(--snice-color-background-hover);color:var(--snice-color-text)}.input[type=number]::-webkit-inner-spin-button,.input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input[type=number]{-moz-appearance:textfield}.input[type=search]::-webkit-search-cancel-button,.input[type=search]::-webkit-search-decoration,.input[type=search]::-webkit-search-results-button,.input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}.input-container:focus-within{z-index:1}.input--loading{cursor:wait}.spinner{position:absolute;right:.75rem;width:1em;height:1em;pointer-events:none}.input--with-suffix-icon .spinner{right:2.5rem}.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 _classDecorators = [snice.element('snice-input', { formAssociated: true })];
@@ -190,6 +190,15 @@ var SniceTable = (function (exports, snice) {
       let _name_decorators;
       let _name_initializers = [];
       let _name_extraInitializers = [];
+      let _align_decorators;
+      let _align_initializers = [];
+      let _align_extraInitializers = [];
+      let _labelAlign_decorators;
+      let _labelAlign_initializers = [];
+      let _labelAlign_extraInitializers = [];
+      let _stretch_decorators;
+      let _stretch_initializers = [];
+      let _stretch_extraInitializers = [];
       let _prefixIcon_decorators;
       let _prefixIcon_initializers = [];
       let _prefixIcon_extraInitializers = [];
@@ -254,6 +263,9 @@ var SniceTable = (function (exports, snice) {
               _minlength_decorators = [snice.property({ type: Number, })];
               _autocomplete_decorators = [snice.property({})];
               _name_decorators = [snice.property({})];
+              _align_decorators = [snice.property({})];
+              _labelAlign_decorators = [snice.property({ attribute: 'label-align', })];
+              _stretch_decorators = [snice.property({ type: Boolean, })];
               _prefixIcon_decorators = [snice.property({ attribute: 'prefix-icon', })];
               _suffixIcon_decorators = [snice.property({ attribute: 'suffix-icon', })];
               _input_decorators = [snice.query('.input')];
@@ -326,6 +338,9 @@ var SniceTable = (function (exports, snice) {
               __esDecorate(null, null, _minlength_decorators, { kind: "field", name: "minlength", static: false, private: false, access: { has: obj => "minlength" in obj, get: obj => obj.minlength, set: (obj, value) => { obj.minlength = value; } }, metadata: _metadata }, _minlength_initializers, _minlength_extraInitializers);
               __esDecorate(null, null, _autocomplete_decorators, { kind: "field", name: "autocomplete", static: false, private: false, access: { has: obj => "autocomplete" in obj, get: obj => obj.autocomplete, set: (obj, value) => { obj.autocomplete = value; } }, metadata: _metadata }, _autocomplete_initializers, _autocomplete_extraInitializers);
               __esDecorate(null, null, _name_decorators, { kind: "field", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+              __esDecorate(null, null, _align_decorators, { kind: "field", name: "align", static: false, private: false, access: { has: obj => "align" in obj, get: obj => obj.align, set: (obj, value) => { obj.align = value; } }, metadata: _metadata }, _align_initializers, _align_extraInitializers);
+              __esDecorate(null, null, _labelAlign_decorators, { kind: "field", name: "labelAlign", static: false, private: false, access: { has: obj => "labelAlign" in obj, get: obj => obj.labelAlign, set: (obj, value) => { obj.labelAlign = value; } }, metadata: _metadata }, _labelAlign_initializers, _labelAlign_extraInitializers);
+              __esDecorate(null, null, _stretch_decorators, { kind: "field", name: "stretch", static: false, private: false, access: { has: obj => "stretch" in obj, get: obj => obj.stretch, set: (obj, value) => { obj.stretch = value; } }, metadata: _metadata }, _stretch_initializers, _stretch_extraInitializers);
               __esDecorate(null, null, _prefixIcon_decorators, { kind: "field", name: "prefixIcon", static: false, private: false, access: { has: obj => "prefixIcon" in obj, get: obj => obj.prefixIcon, set: (obj, value) => { obj.prefixIcon = value; } }, metadata: _metadata }, _prefixIcon_initializers, _prefixIcon_extraInitializers);
               __esDecorate(null, null, _suffixIcon_decorators, { kind: "field", name: "suffixIcon", static: false, private: false, access: { has: obj => "suffixIcon" in obj, get: obj => obj.suffixIcon, set: (obj, value) => { obj.suffixIcon = value; } }, metadata: _metadata }, _suffixIcon_initializers, _suffixIcon_extraInitializers);
               __esDecorate(null, null, _input_decorators, { kind: "field", name: "input", static: false, private: false, access: { has: obj => "input" in obj, get: obj => obj.input, set: (obj, value) => { obj.input = value; } }, metadata: _metadata }, _input_initializers, _input_extraInitializers);
@@ -362,7 +377,10 @@ var SniceTable = (function (exports, snice) {
               this.minlength = (__runInitializers(this, _maxlength_extraInitializers), __runInitializers(this, _minlength_initializers, -1));
               this.autocomplete = (__runInitializers(this, _minlength_extraInitializers), __runInitializers(this, _autocomplete_initializers, ''));
               this.name = (__runInitializers(this, _autocomplete_extraInitializers), __runInitializers(this, _name_initializers, ''));
-              this.prefixIcon = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _prefixIcon_initializers, ''));
+              this.align = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _align_initializers, ''));
+              this.labelAlign = (__runInitializers(this, _align_extraInitializers), __runInitializers(this, _labelAlign_initializers, 'left'));
+              this.stretch = (__runInitializers(this, _labelAlign_extraInitializers), __runInitializers(this, _stretch_initializers, false));
+              this.prefixIcon = (__runInitializers(this, _stretch_extraInitializers), __runInitializers(this, _prefixIcon_initializers, ''));
               this.suffixIcon = (__runInitializers(this, _prefixIcon_extraInitializers), __runInitializers(this, _suffixIcon_initializers, ''));
               this.input = (__runInitializers(this, _suffixIcon_extraInitializers), __runInitializers(this, _input_initializers, void 0));
               this.clearButton = (__runInitializers(this, _input_extraInitializers), __runInitializers(this, _clearButton_initializers, void 0));
@@ -486,7 +504,7 @@ var SniceTable = (function (exports, snice) {
     `;
           }
           styles() {
-              return snice.css /*css*/ `${cssContent$2}`;
+              return snice.css /*css*/ `${cssContent$e}`;
           }
           init() {
               // Set initial form value
@@ -816,10 +834,10 @@ var SniceTable = (function (exports, snice) {
       return _classThis;
   })();
 
-  var cssContent$1 = ":host{display:inline-block;font-family:var(--snice-font-family);position:relative;width:100%;max-width:18.75rem}[hidden]{display:none!important}img[src=\"\"]{display:none}.select-wrapper{position:relative;width:100%}.select-label{display:block;margin-bottom:.25rem;color:var(--snice-color-text);font-weight:500}.select-label--small{font-size:var(--snice-font-size-sm)}.select-label--medium{font-size:var(--snice-font-size-md)}.select-label--large{font-size:var(--snice-font-size-lg)}.select-label--required::after{content:' *';color:var(--snice-color-danger)}.select-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--snice-color-background-input);border:1px solid var(--snice-color-border);border-radius:var(--snice-border-radius-md);cursor:pointer;transition:all var(--snice-transition-fast) ease;position:relative;text-align:left;font-family:inherit;color:var(--snice-color-text)}.select-trigger--small{padding:.375rem 2rem .375rem .625rem;font-size:var(--snice-font-size-sm);min-height:2rem}.select-trigger--medium{padding:.5rem 2.25rem .5rem .75rem;font-size:var(--snice-font-size-md);min-height:var(--snice-select-min-height,2.5rem)}.select-trigger--large{padding:.625rem 2.5rem .625rem .875rem;font-size:var(--snice-font-size-lg);min-height:3rem}.select-trigger:hover:not(.select-trigger--disabled){border-color:var(--snice-color-border-hover)}.select-trigger:focus-visible{outline:2px solid var(--snice-color-primary);outline-offset:2px;border-color:var(--snice-color-primary)}.select-trigger--open{border-color:var(--snice-color-primary)}.select-trigger--disabled{background:var(--snice-color-background-secondary);cursor:not-allowed;opacity:.6}.select-trigger--readonly{background:var(--snice-color-background-secondary);cursor:default}.select-trigger--invalid{border-color:var(--snice-color-danger)}.select-placeholder{color:var(--snice-color-text-secondary)}.select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-value--single{display:flex;align-items:center;gap:.5rem}.select-value-icon{width:1rem;height:1rem;object-fit:contain;flex-shrink:0}.select-value--multiple{display:flex;gap:.25rem;flex-wrap:wrap}.select-tag{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .375rem;background:var(--snice-color-primary-light);color:var(--snice-color-primary);border-radius:var(--snice-border-radius-sm);font-size:var(--snice-font-size-xs)}.select-tag-icon{width:.75rem;height:.75rem;object-fit:contain;flex-shrink:0}.select-tag-remove{cursor:pointer;padding:0;background:0 0;border:none;color:inherit;font-size:.75rem;line-height:1}.select-tag-remove:hover{opacity:.7}.select-icons{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.25rem;pointer-events:none;z-index:1}.select-clear{padding:2px;background:0 0;border:none;cursor:pointer;color:var(--snice-color-text-secondary);display:flex;align-items:center;justify-content:center;border-radius:var(--snice-border-radius-sm);pointer-events:auto}.select-clear:hover{background:var(--snice-color-background-secondary);color:var(--snice-color-text)}.select-arrow{transition:transform var(--snice-transition-fast) ease;color:var(--snice-color-text-secondary);pointer-events:none}.select-arrow--open{transform:rotate(180deg)}.select-dropdown{position:absolute;top:100%;margin-top:4px;left:0;right:0;background:var(--snice-color-background-element);border:1px solid var(--snice-color-border);border-radius:var(--snice-border-radius-md);box-shadow:var(--snice-shadow-lg);z-index:1000;opacity:0;transform:translateY(-8px) scaleY(.95);transform-origin:top;pointer-events:none;transition:opacity var(--snice-transition-fast) ease,transform var(--snice-transition-fast) ease;display:flex;flex-direction:column;overflow:hidden}.select-dropdown--open{opacity:1;transform:translateY(0) scaleY(1);pointer-events:auto}.select-search{padding:8px;border-bottom:1px solid var(--snice-color-border);flex-shrink:0}.select-search-input{width:100%;padding:6px 10px;background:var(--snice-color-background-input);border:1px solid var(--snice-color-border);border-radius:var(--snice-border-radius-sm);font-size:var(--snice-font-size-sm);font-family:inherit;color:var(--snice-color-text);box-sizing:border-box}.select-search-input:focus{outline:0;border-color:var(--snice-color-primary)}.select-options{max-height:200px;overflow-y:auto;overflow-x:hidden;padding:4px;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--snice-color-border) var(--snice-color-background-secondary)}.select-options::-webkit-scrollbar-track{background:var(--snice-color-background-secondary);margin:4px 0}.select-options::-webkit-scrollbar-thumb{background:var(--snice-color-border);border:2px solid var(--snice-color-background)}.select-option{padding:8px 12px;cursor:pointer;border-radius:var(--snice-border-radius-sm);transition:background var(--snice-transition-fast) ease;display:flex;align-items:center;gap:8px}.select-option:hover:not(.select-option--disabled){background:var(--snice-color-background-secondary)}.select-option--selected{background:var(--snice-color-primary-light);color:var(--snice-color-primary);font-weight:500}.select-option--focused{background:var(--snice-color-background-secondary);outline:2px solid var(--snice-color-primary);outline-offset:-2px}.select-option--disabled{opacity:.5;cursor:not-allowed}.select-option-icon{width:16px;height:16px;object-fit:contain;flex-shrink:0}.select-option-check{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.select-option-label{flex:1}.select-no-options{padding:16px;text-align:center;color:var(--snice-color-text-secondary);font-size:var(--snice-font-size-sm)}.select-native{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.select-options::-webkit-scrollbar{width:6px}.select-options::-webkit-scrollbar-track{background:var(--snice-color-background-secondary);border-radius:3px}.select-options::-webkit-scrollbar-thumb{background:var(--snice-color-border);border-radius:3px}.select-options::-webkit-scrollbar-thumb:hover{background:var(--snice-color-border-hover)}.select-trigger--loading{cursor:wait;opacity:.7}.select-spinner{display:inline-block;width:14px;height:14px;margin-right:4px}.select-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)}}";
+  var cssContent$d = ":host{display:inline-block;font-family:var(--snice-font-family);position:relative;width:100%;max-width:18.75rem}[hidden]{display:none!important}img[src=\"\"]{display:none}.select-wrapper{position:relative;width:100%}.select-label{display:block;margin-bottom:.25rem;color:var(--snice-color-text);font-weight:500}.select-label--small{font-size:var(--snice-font-size-sm)}.select-label--medium{font-size:var(--snice-font-size-md)}.select-label--large{font-size:var(--snice-font-size-lg)}.select-label--required::after{content:' *';color:var(--snice-color-danger)}.select-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--snice-color-background-input);border:1px solid var(--snice-color-border);border-radius:var(--snice-border-radius-md);cursor:pointer;transition:all var(--snice-transition-fast) ease;position:relative;text-align:left;font-family:inherit;color:var(--snice-color-text)}.select-trigger--small{padding:.375rem 2rem .375rem .625rem;font-size:var(--snice-font-size-sm);min-height:2rem}.select-trigger--medium{padding:.5rem 2.25rem .5rem .75rem;font-size:var(--snice-font-size-md);min-height:var(--snice-select-min-height,2.5rem)}.select-trigger--large{padding:.625rem 2.5rem .625rem .875rem;font-size:var(--snice-font-size-lg);min-height:3rem}.select-trigger:hover:not(.select-trigger--disabled){border-color:var(--snice-color-border-hover)}.select-trigger:focus-visible{outline:2px solid var(--snice-color-primary);outline-offset:2px;border-color:var(--snice-color-primary)}.select-trigger--open{border-color:var(--snice-color-primary)}.select-trigger--disabled{background:var(--snice-color-background-secondary);cursor:not-allowed;opacity:.6}.select-trigger--readonly{background:var(--snice-color-background-secondary);cursor:default}.select-trigger--invalid{border-color:var(--snice-color-danger)}.select-placeholder{color:var(--snice-color-text-secondary)}.select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-value--single{display:flex;align-items:center;gap:.5rem}.select-value-icon{width:1rem;height:1rem;object-fit:contain;flex-shrink:0}.select-value--multiple{display:flex;gap:.25rem;flex-wrap:wrap}.select-tag{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .375rem;background:var(--snice-color-primary-light);color:var(--snice-color-primary);border-radius:var(--snice-border-radius-sm);font-size:var(--snice-font-size-xs)}.select-tag-icon{width:.75rem;height:.75rem;object-fit:contain;flex-shrink:0}.select-tag-remove{cursor:pointer;padding:0;background:0 0;border:none;color:inherit;font-size:.75rem;line-height:1}.select-tag-remove:hover{opacity:.7}.select-icons{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.25rem;pointer-events:none;z-index:1}.select-clear{padding:2px;background:0 0;border:none;cursor:pointer;color:var(--snice-color-text-secondary);display:flex;align-items:center;justify-content:center;border-radius:var(--snice-border-radius-sm);pointer-events:auto}.select-clear:hover{background:var(--snice-color-background-secondary);color:var(--snice-color-text)}.select-arrow{transition:transform var(--snice-transition-fast) ease;color:var(--snice-color-text-secondary);pointer-events:none}.select-arrow--open{transform:rotate(180deg)}.select-dropdown{position:absolute;top:100%;margin-top:4px;left:0;right:0;background:var(--snice-color-background-element);border:1px solid var(--snice-color-border);border-radius:var(--snice-border-radius-md);box-shadow:var(--snice-shadow-lg);z-index:1000;opacity:0;transform:translateY(-8px) scaleY(.95);transform-origin:top;pointer-events:none;transition:opacity var(--snice-transition-fast) ease,transform var(--snice-transition-fast) ease;display:flex;flex-direction:column;overflow:hidden}.select-dropdown--open{opacity:1;transform:translateY(0) scaleY(1);pointer-events:auto}.select-search{padding:8px;border-bottom:1px solid var(--snice-color-border);flex-shrink:0}.select-search-input{width:100%;padding:6px 10px;background:var(--snice-color-background-input);border:1px solid var(--snice-color-border);border-radius:var(--snice-border-radius-sm);font-size:var(--snice-font-size-sm);font-family:inherit;color:var(--snice-color-text);box-sizing:border-box}.select-search-input:focus{outline:0;border-color:var(--snice-color-primary)}.select-options{max-height:200px;overflow-y:auto;overflow-x:hidden;padding:4px;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--snice-color-border) var(--snice-color-background-secondary)}.select-options::-webkit-scrollbar-track{background:var(--snice-color-background-secondary);margin:4px 0}.select-options::-webkit-scrollbar-thumb{background:var(--snice-color-border);border:2px solid var(--snice-color-background)}.select-option{padding:8px 12px;cursor:pointer;border-radius:var(--snice-border-radius-sm);transition:background var(--snice-transition-fast) ease;display:flex;align-items:center;gap:8px}.select-option:hover:not(.select-option--disabled){background:var(--snice-color-background-secondary)}.select-option--selected{background:var(--snice-color-primary-light);color:var(--snice-color-primary);font-weight:500}.select-option--focused{background:var(--snice-color-background-secondary);outline:2px solid var(--snice-color-primary);outline-offset:-2px}.select-option--disabled{opacity:.5;cursor:not-allowed}.select-option-icon{width:16px;height:16px;object-fit:contain;flex-shrink:0}.select-option-check{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.select-option-label{flex:1}.select-no-options{padding:16px;text-align:center;color:var(--snice-color-text-secondary);font-size:var(--snice-font-size-sm)}.select-native{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.select-options::-webkit-scrollbar{width:6px}.select-options::-webkit-scrollbar-track{background:var(--snice-color-background-secondary);border-radius:3px}.select-options::-webkit-scrollbar-thumb{background:var(--snice-color-border);border-radius:3px}.select-options::-webkit-scrollbar-thumb:hover{background:var(--snice-color-border-hover)}.select-trigger--loading{cursor:wait;opacity:.7}.select-spinner{display:inline-block;width:14px;height:14px;margin-right:4px}.select-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 _classDecorators = [snice.element('snice-select')];
+      let _classDecorators = [snice.element('snice-select', { formAssociated: true })];
       let _classDescriptor;
       let _classExtraInitializers = [];
       let _classThis;
@@ -888,9 +906,6 @@ var SniceTable = (function (exports, snice) {
       let _optionsList_decorators;
       let _optionsList_initializers = [];
       let _optionsList_extraInitializers = [];
-      let _nativeSelect_decorators;
-      let _nativeSelect_initializers = [];
-      let _nativeSelect_extraInitializers = [];
       let _clearButton_decorators;
       let _clearButton_initializers = [];
       let _clearButton_extraInitializers = [];
@@ -911,46 +926,11 @@ var SniceTable = (function (exports, snice) {
       let _handleDisabledChange_decorators;
       let _handleLoadingChange_decorators;
       let _handleOpenChange_decorators;
-      let _handleNativeSelectAttributeChange_decorators;
       let _dispatchChangeEvent_decorators;
       let _dispatchOpenEvent_decorators;
       let _dispatchCloseEvent_decorators;
       (class extends _classSuper {
           static { _classThis = this; }
-          constructor() {
-              super(...arguments);
-              this.disabled = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _disabled_initializers, false));
-              this.required = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _required_initializers, false));
-              this.invalid = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _invalid_initializers, false));
-              this.readonly = (__runInitializers(this, _invalid_extraInitializers), __runInitializers(this, _readonly_initializers, false));
-              this.loading = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _loading_initializers, false));
-              this.multiple = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _multiple_initializers, false));
-              this.searchable = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _searchable_initializers, false));
-              this.clearable = (__runInitializers(this, _searchable_extraInitializers), __runInitializers(this, _clearable_initializers, false));
-              this.open = (__runInitializers(this, _clearable_extraInitializers), __runInitializers(this, _open_initializers, false));
-              this.size = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _size_initializers, 'medium'));
-              this.name = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _name_initializers, ''));
-              this.value = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _value_initializers, ''));
-              this.label = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _label_initializers, ''));
-              this.placeholder = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _placeholder_initializers, 'Select an option'));
-              this.maxHeight = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _maxHeight_initializers, '200px'));
-              // Options will be read from child snice-option elements
-              this.options = (__runInitializers(this, _maxHeight_extraInitializers), []);
-              this.trigger = __runInitializers(this, _trigger_initializers, void 0);
-              this.dropdown = (__runInitializers(this, _trigger_extraInitializers), __runInitializers(this, _dropdown_initializers, void 0));
-              this.valueDisplay = (__runInitializers(this, _dropdown_extraInitializers), __runInitializers(this, _valueDisplay_initializers, void 0));
-              this.labelElement = (__runInitializers(this, _valueDisplay_extraInitializers), __runInitializers(this, _labelElement_initializers, void 0));
-              this.searchInput = (__runInitializers(this, _labelElement_extraInitializers), __runInitializers(this, _searchInput_initializers, void 0));
-              this.optionsList = (__runInitializers(this, _searchInput_extraInitializers), __runInitializers(this, _optionsList_initializers, void 0));
-              this.nativeSelect = (__runInitializers(this, _optionsList_extraInitializers), __runInitializers(this, _nativeSelect_initializers, void 0));
-              this.clearButton = (__runInitializers(this, _nativeSelect_extraInitializers), __runInitializers(this, _clearButton_initializers, void 0));
-              this.arrow = (__runInitializers(this, _clearButton_extraInitializers), __runInitializers(this, _arrow_initializers, void 0));
-              this.searchContainer = (__runInitializers(this, _arrow_extraInitializers), __runInitializers(this, _searchContainer_initializers, void 0));
-              this.optionElements = (__runInitializers(this, _searchContainer_extraInitializers), __runInitializers(this, _optionElements_initializers, void 0));
-              this.filteredOptions = (__runInitializers(this, _optionElements_extraInitializers), []);
-              this.selectedValues = new Set();
-              this.focusedIndex = -1;
-          }
           static {
               const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
               _disabled_decorators = [snice.property({ type: Boolean, })];
@@ -974,7 +954,6 @@ var SniceTable = (function (exports, snice) {
               _labelElement_decorators = [snice.query('.select-label')];
               _searchInput_decorators = [snice.query('.select-search-input')];
               _optionsList_decorators = [snice.query('.select-options')];
-              _nativeSelect_decorators = [snice.query('.select-native')];
               _clearButton_decorators = [snice.query('.select-clear')];
               _arrow_decorators = [snice.query('.select-arrow')];
               _searchContainer_decorators = [snice.query('.select-search')];
@@ -987,7 +966,6 @@ var SniceTable = (function (exports, snice) {
               _handleDisabledChange_decorators = [snice.watch('disabled')];
               _handleLoadingChange_decorators = [snice.watch('loading')];
               _handleOpenChange_decorators = [snice.watch('open')];
-              _handleNativeSelectAttributeChange_decorators = [snice.watch('multiple', 'name')];
               _dispatchChangeEvent_decorators = [snice.dispatch('select-change', { bubbles: true, composed: true })];
               _dispatchOpenEvent_decorators = [snice.dispatch('select-open', { bubbles: true, composed: true })];
               _dispatchCloseEvent_decorators = [snice.dispatch('select-close', { bubbles: true, composed: true })];
@@ -999,7 +977,6 @@ var SniceTable = (function (exports, snice) {
               __esDecorate(this, null, _handleDisabledChange_decorators, { kind: "method", name: "handleDisabledChange", static: false, private: false, access: { has: obj => "handleDisabledChange" in obj, get: obj => obj.handleDisabledChange }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _handleLoadingChange_decorators, { kind: "method", name: "handleLoadingChange", static: false, private: false, access: { has: obj => "handleLoadingChange" in obj, get: obj => obj.handleLoadingChange }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _handleOpenChange_decorators, { kind: "method", name: "handleOpenChange", static: false, private: false, access: { has: obj => "handleOpenChange" in obj, get: obj => obj.handleOpenChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-              __esDecorate(this, null, _handleNativeSelectAttributeChange_decorators, { kind: "method", name: "handleNativeSelectAttributeChange", static: false, private: false, access: { has: obj => "handleNativeSelectAttributeChange" in obj, get: obj => obj.handleNativeSelectAttributeChange }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _dispatchChangeEvent_decorators, { kind: "method", name: "dispatchChangeEvent", static: false, private: false, access: { has: obj => "dispatchChangeEvent" in obj, get: obj => obj.dispatchChangeEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _dispatchOpenEvent_decorators, { kind: "method", name: "dispatchOpenEvent", static: false, private: false, access: { has: obj => "dispatchOpenEvent" in obj, get: obj => obj.dispatchOpenEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _dispatchCloseEvent_decorators, { kind: "method", name: "dispatchCloseEvent", static: false, private: false, access: { has: obj => "dispatchCloseEvent" in obj, get: obj => obj.dispatchCloseEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -1024,7 +1001,6 @@ var SniceTable = (function (exports, snice) {
               __esDecorate(null, null, _labelElement_decorators, { kind: "field", name: "labelElement", static: false, private: false, access: { has: obj => "labelElement" in obj, get: obj => obj.labelElement, set: (obj, value) => { obj.labelElement = value; } }, metadata: _metadata }, _labelElement_initializers, _labelElement_extraInitializers);
               __esDecorate(null, null, _searchInput_decorators, { kind: "field", name: "searchInput", static: false, private: false, access: { has: obj => "searchInput" in obj, get: obj => obj.searchInput, set: (obj, value) => { obj.searchInput = value; } }, metadata: _metadata }, _searchInput_initializers, _searchInput_extraInitializers);
               __esDecorate(null, null, _optionsList_decorators, { kind: "field", name: "optionsList", static: false, private: false, access: { has: obj => "optionsList" in obj, get: obj => obj.optionsList, set: (obj, value) => { obj.optionsList = value; } }, metadata: _metadata }, _optionsList_initializers, _optionsList_extraInitializers);
-              __esDecorate(null, null, _nativeSelect_decorators, { kind: "field", name: "nativeSelect", static: false, private: false, access: { has: obj => "nativeSelect" in obj, get: obj => obj.nativeSelect, set: (obj, value) => { obj.nativeSelect = value; } }, metadata: _metadata }, _nativeSelect_initializers, _nativeSelect_extraInitializers);
               __esDecorate(null, null, _clearButton_decorators, { kind: "field", name: "clearButton", static: false, private: false, access: { has: obj => "clearButton" in obj, get: obj => obj.clearButton, set: (obj, value) => { obj.clearButton = value; } }, metadata: _metadata }, _clearButton_initializers, _clearButton_extraInitializers);
               __esDecorate(null, null, _arrow_decorators, { kind: "field", name: "arrow", static: false, private: false, access: { has: obj => "arrow" in obj, get: obj => obj.arrow, set: (obj, value) => { obj.arrow = value; } }, metadata: _metadata }, _arrow_initializers, _arrow_extraInitializers);
               __esDecorate(null, null, _searchContainer_decorators, { kind: "field", name: "searchContainer", static: false, private: false, access: { has: obj => "searchContainer" in obj, get: obj => obj.searchContainer, set: (obj, value) => { obj.searchContainer = value; } }, metadata: _metadata }, _searchContainer_initializers, _searchContainer_extraInitializers);
@@ -1034,6 +1010,43 @@ var SniceTable = (function (exports, snice) {
               if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
               __runInitializers(_classThis, _classExtraInitializers);
           }
+          constructor() {
+              super();
+              this.internals = __runInitializers(this, _instanceExtraInitializers);
+              this.disabled = __runInitializers(this, _disabled_initializers, false);
+              this.required = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _required_initializers, false));
+              this.invalid = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _invalid_initializers, false));
+              this.readonly = (__runInitializers(this, _invalid_extraInitializers), __runInitializers(this, _readonly_initializers, false));
+              this.loading = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _loading_initializers, false));
+              this.multiple = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _multiple_initializers, false));
+              this.searchable = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _searchable_initializers, false));
+              this.clearable = (__runInitializers(this, _searchable_extraInitializers), __runInitializers(this, _clearable_initializers, false));
+              this.open = (__runInitializers(this, _clearable_extraInitializers), __runInitializers(this, _open_initializers, false));
+              this.size = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _size_initializers, 'medium'));
+              this.name = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _name_initializers, ''));
+              this.value = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _value_initializers, ''));
+              this.label = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _label_initializers, ''));
+              this.placeholder = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _placeholder_initializers, 'Select an option'));
+              this.maxHeight = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _maxHeight_initializers, '200px'));
+              // Options will be read from child snice-option elements
+              this.options = (__runInitializers(this, _maxHeight_extraInitializers), []);
+              this.trigger = __runInitializers(this, _trigger_initializers, void 0);
+              this.dropdown = (__runInitializers(this, _trigger_extraInitializers), __runInitializers(this, _dropdown_initializers, void 0));
+              this.valueDisplay = (__runInitializers(this, _dropdown_extraInitializers), __runInitializers(this, _valueDisplay_initializers, void 0));
+              this.labelElement = (__runInitializers(this, _valueDisplay_extraInitializers), __runInitializers(this, _labelElement_initializers, void 0));
+              this.searchInput = (__runInitializers(this, _labelElement_extraInitializers), __runInitializers(this, _searchInput_initializers, void 0));
+              this.optionsList = (__runInitializers(this, _searchInput_extraInitializers), __runInitializers(this, _optionsList_initializers, void 0));
+              this.clearButton = (__runInitializers(this, _optionsList_extraInitializers), __runInitializers(this, _clearButton_initializers, void 0));
+              this.arrow = (__runInitializers(this, _clearButton_extraInitializers), __runInitializers(this, _arrow_initializers, void 0));
+              this.searchContainer = (__runInitializers(this, _arrow_extraInitializers), __runInitializers(this, _searchContainer_initializers, void 0));
+              this.optionElements = (__runInitializers(this, _searchContainer_extraInitializers), __runInitializers(this, _optionElements_initializers, void 0));
+              this.filteredOptions = (__runInitializers(this, _optionElements_extraInitializers), []);
+              this.selectedValues = new Set();
+              this.focusedIndex = -1;
+              if (typeof this.attachInternals == 'function') {
+                  this.internals = this.attachInternals();
+              }
+          }
           render() {
               const labelClasses = `select-label select-label--${this.size} ${this.required ? 'select-label--required' : ''}`;
               const triggerClasses = `select-trigger select-trigger--${this.size} ${this.loading ? 'select-trigger--loading' : ''}`;
@@ -1099,14 +1112,6 @@ var SniceTable = (function (exports, snice) {
           </div>
         </div>
 
-        <!-- Hidden native select for form submission -->
-        <select
-          class="select-native"
-          name="${this.name || ''}"
-          tabindex="-1"
-          aria-hidden="true">
-          <!-- Options will be added in @ready() -->
-        </select>
       </div>
     `;
           }
@@ -1145,7 +1150,7 @@ var SniceTable = (function (exports, snice) {
               }).join('');
           }
           styles() {
-              return snice.css `${cssContent$1}`;
+              return snice.css `${cssContent$d}`;
           }
           init() {
               // Read options from child snice-option elements
@@ -1156,16 +1161,18 @@ var SniceTable = (function (exports, snice) {
               }
               // Initialize filtered options
               this.filteredOptions = [...this.options];
+              // Set initial form value
+              if (this.internals) {
+                  this.internals.setFormValue(this.value);
+              }
               // Wait for @query decorators to populate shadow DOM elements
               requestAnimationFrame(() => {
                   requestAnimationFrame(() => {
                       // Set initial imperative state
                       this.updateTriggerState();
                       this.updateDropdownState();
-                      this.updateNativeSelectAttributes();
                       // Now that we have options, update everything
                       this.updateDropdownContent();
-                      this.updateNativeSelect();
                       this.updateValueDisplay();
                       this.updateClearButton();
                   });
@@ -1255,7 +1262,6 @@ var SniceTable = (function (exports, snice) {
               if (relevant) {
                   this.readOptionsFromChildren();
                   this.filteredOptions = [...this.options];
-                  this.updateNativeSelect();
                   this.updateValueDisplay();
                   this.updateClearButton();
                   this.updateDropdownContent();
@@ -1379,7 +1385,6 @@ var SniceTable = (function (exports, snice) {
                   if (value && this.multiple) {
                       this.selectedValues.delete(value);
                       this.value = Array.from(this.selectedValues).join(',');
-                      this.updateNativeSelect();
                       this.updateValueDisplay();
                       this.updateClearButton();
                       this.dispatchChangeEvent();
@@ -1425,7 +1430,6 @@ var SniceTable = (function (exports, snice) {
                   this.value = option.value;
                   this.closeDropdown();
               }
-              this.updateNativeSelect();
               this.updateValueDisplay();
               this.updateClearButton();
               this.dispatchChangeEvent(option);
@@ -1434,13 +1438,14 @@ var SniceTable = (function (exports, snice) {
               if (this.multiple) {
                   this.selectedValues = new Set(this.value ? this.value.split(',').map(v => v.trim()) : []);
               }
-              this.updateNativeSelect();
               this.updateValueDisplay();
               this.updateClearButton();
+              if (this.internals) {
+                  this.internals.setFormValue(this.value);
+              }
           }
           handleDisabledChange() {
               this.updateTriggerState();
-              this.updateNativeSelectAttributes();
               this.updateClearButton();
               // Side effect: close dropdown when disabled
               if (this.disabled && this.open) {
@@ -1449,7 +1454,6 @@ var SniceTable = (function (exports, snice) {
           }
           handleLoadingChange() {
               this.updateTriggerState();
-              this.updateNativeSelectAttributes();
               this.updateClearButton();
               // Side effect: close dropdown when loading
               if (this.loading && this.open) {
@@ -1473,9 +1477,6 @@ var SniceTable = (function (exports, snice) {
                   }
               }
           }
-          handleNativeSelectAttributeChange() {
-              this.updateNativeSelectAttributes();
-          }
           updateValueDisplay() {
               if (!this.valueDisplay)
                   return;
@@ -1518,21 +1519,6 @@ var SniceTable = (function (exports, snice) {
                   return;
               this.optionsList.innerHTML = this.renderOptions();
           }
-          updateNativeSelect() {
-              if (!this.nativeSelect)
-                  return;
-              // Clear and rebuild options
-              this.nativeSelect.innerHTML = '';
-              this.options.forEach(opt => {
-                  const option = document.createElement('option');
-                  option.value = opt.value;
-                  option.textContent = opt.label;
-                  option.selected = this.multiple ?
-                      this.selectedValues.has(opt.value) :
-                      opt.value === this.value;
-                  this.nativeSelect.appendChild(option);
-              });
-          }
           dispatchChangeEvent(option) {
               return {
                   value: this.multiple ? Array.from(this.selectedValues) : this.value,
@@ -1564,7 +1550,6 @@ var SniceTable = (function (exports, snice) {
               else {
                   this.value = '';
               }
-              this.updateNativeSelect();
               this.updateValueDisplay();
               this.updateClearButton();
               this.dispatchChangeEvent();
@@ -1614,24 +1599,11 @@ var SniceTable = (function (exports, snice) {
                   this.arrow.classList.toggle('select-arrow--open', this.open);
               }
           }
-          updateNativeSelectAttributes() {
-              if (!this.nativeSelect)
-                  return;
-              this.nativeSelect.disabled = this.disabled || this.loading;
-              this.nativeSelect.required = this.required;
-              this.nativeSelect.multiple = this.multiple;
-              if (this.name) {
-                  this.nativeSelect.name = this.name;
-              }
-              else {
-                  this.nativeSelect.removeAttribute('name');
-              }
-          }
       });
       return _classThis;
   })();
 
-  var cssContent = ":host{display:flex;align-items:center;padding:0 var(--snice-table-cell-padding,var(--snice-spacing-md,.75rem));min-height:2.5rem;height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem;color:var(--snice-color-text)}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem;word-wrap:break-word}:host([align=left]){text-align:left}:host([align=center]){text-align:center}:host([align=right]){text-align:right}:host([type=accounting]),:host([type=currency]),:host([type=fraction]),:host([type=number]),:host([type=percent]),:host([type=scientific]){font-variant-numeric:tabular-nums;text-align:right}:host([type=date]){font-variant-numeric:tabular-nums}:host([type=boolean]){text-align:center;font-size:1rem}:host([type=rating]){text-align:center}:host([type=sparkline]){text-align:center}.cell-content--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell-content--text[data-multiline=true]{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}.cell-content--date,.cell-content--number{font-feature-settings:'tnum'}:host([type=boolean]) .cell-content{display:inline-flex;align-items:center;justify-content:center}:host([type=rating]) .cell-content{display:inline-flex;align-items:center;justify-content:center;gap:.125rem}.cell-content--progress{width:100%;min-width:4rem}.cell-content--sparkline{display:flex;align-items:center;justify-content:center;min-width:3rem}:host(.positive){color:var(--snice-color-success)}:host(.negative){color:var(--snice-color-danger)}:host(.warning){color:var(--snice-color-warning);background-color:hsl(var(--snice-color-yellow-100))}:host(.danger){color:var(--snice-color-danger);background-color:hsl(var(--snice-color-red-100))}:host(.success){color:var(--snice-color-success);background-color:hsl(var(--snice-color-green-100))}:host(.info){color:var(--snice-color-primary);background-color:hsl(var(--snice-color-blue-100))}:host(.date--today){font-weight:var(--snice-font-weight-semibold);color:var(--snice-color-primary)}:host(.date--past){color:var(--snice-color-text-secondary)}:host(.date--future){color:var(--snice-color-success)}:host(.number--negative.number--negative-red){color:var(--snice-color-danger)}:host(.number--positive.number--highlighted){color:var(--snice-color-success);font-weight:var(--snice-font-weight-semibold)}:host(.number--zero){color:var(--snice-color-text-secondary)}:host([truncate]) .cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([wrap]) .cell-content{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host(:not([value])) .cell-content,:host([value=\"\"]) .cell-content{color:var(--snice-color-text-secondary)}:host(.loading){position:relative;overflow:hidden}:host(.loading) .cell-content{opacity:.6}:host(.loading)::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,hsl(0 0% 100% / .6),transparent);animation:1.5s infinite cell-shimmer}@keyframes cell-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}:host(:focus-within){outline:2px solid var(--snice-color-primary);outline-offset:-2px}.cell-content button,.cell-content input,.cell-content select{font-size:inherit;line-height:inherit}.cell-content a{color:var(--snice-color-primary);text-decoration:none}.cell-content a:hover{text-decoration:underline}@media (max-width:768px){:host{font-size:.75rem;line-height:1rem}:host([type=boolean]){font-size:.875rem}}@media (prefers-reduced-motion:reduce){:host(.loading)::after{animation:none}}@media (prefers-contrast:high){:host(.positive){background-color:hsl(var(--snice-color-green-100))}:host(.negative){background-color:hsl(var(--snice-color-red-100))}.cell-content a{text-decoration:underline}}@media print{:host{font-size:.75rem}:host(.loading)::after{display:none}.cell-content a{text-decoration:underline}}";
+  var cssContent$c = ":host{display:flex;align-items:center;padding:0 var(--snice-table-cell-padding,var(--snice-spacing-md,.75rem));min-height:2.5rem;height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem;color:var(--snice-color-text)}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem;word-wrap:break-word}:host([align=left]){text-align:left}:host([align=center]){text-align:center}:host([align=right]){text-align:right}:host([type=accounting]),:host([type=currency]),:host([type=fraction]),:host([type=number]),:host([type=percent]),:host([type=scientific]){font-variant-numeric:tabular-nums;text-align:right}:host([type=date]){font-variant-numeric:tabular-nums}:host([type=boolean]){text-align:center;font-size:1rem}:host([type=rating]){text-align:center}:host([type=sparkline]){text-align:center}.cell-content--text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cell-content--text[data-multiline=true]{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}.cell-content--date,.cell-content--number{font-feature-settings:'tnum'}:host([type=boolean]) .cell-content{display:inline-flex;align-items:center;justify-content:center}:host([type=rating]) .cell-content{display:inline-flex;align-items:center;justify-content:center;gap:.125rem}.cell-content--progress{width:100%;min-width:4rem}.cell-content--sparkline{display:flex;align-items:center;justify-content:center;min-width:3rem}:host(.positive){color:var(--snice-color-success)}:host(.negative){color:var(--snice-color-danger)}:host(.warning){color:var(--snice-color-warning);background-color:hsl(var(--snice-color-yellow-100))}:host(.danger){color:var(--snice-color-danger);background-color:hsl(var(--snice-color-red-100))}:host(.success){color:var(--snice-color-success);background-color:hsl(var(--snice-color-green-100))}:host(.info){color:var(--snice-color-primary);background-color:hsl(var(--snice-color-blue-100))}:host(.date--today){font-weight:var(--snice-font-weight-semibold);color:var(--snice-color-primary)}:host(.date--past){color:var(--snice-color-text-secondary)}:host(.date--future){color:var(--snice-color-success)}:host(.number--negative.number--negative-red){color:var(--snice-color-danger)}:host(.number--positive.number--highlighted){color:var(--snice-color-success);font-weight:var(--snice-font-weight-semibold)}:host(.number--zero){color:var(--snice-color-text-secondary)}:host([truncate]) .cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([wrap]) .cell-content{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}:host(:not([value])) .cell-content,:host([value=\"\"]) .cell-content{color:var(--snice-color-text-secondary)}:host(.loading){position:relative;overflow:hidden}:host(.loading) .cell-content{opacity:.6}:host(.loading)::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,hsl(0 0% 100% / .6),transparent);animation:1.5s infinite cell-shimmer}@keyframes cell-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}:host(:focus-within){outline:2px solid var(--snice-color-primary);outline-offset:-2px}.cell-content button,.cell-content input,.cell-content select{font-size:inherit;line-height:inherit}.cell-content a{color:var(--snice-color-primary);text-decoration:none}.cell-content a:hover{text-decoration:underline}@media (max-width:768px){:host{font-size:.75rem;line-height:1rem}:host([type=boolean]){font-size:.875rem}}@media (prefers-reduced-motion:reduce){:host(.loading)::after{animation:none}}@media (prefers-contrast:high){:host(.positive){background-color:hsl(var(--snice-color-green-100))}:host(.negative){background-color:hsl(var(--snice-color-red-100))}.cell-content a{text-decoration:underline}}@media print{:host{font-size:.75rem}:host(.loading)::after{display:none}.cell-content a{text-decoration:underline}}";
 
   (() => {
       let _classDecorators = [snice.element('snice-cell')];
@@ -1702,7 +1674,7 @@ var SniceTable = (function (exports, snice) {
     `;
           }
           styles() {
-              return snice.css /*css*/ `${cssContent}`;
+              return snice.css /*css*/ `${cssContent$c}`;
           }
           init() {
               this.applyAlignment();
@@ -2177,7 +2149,7 @@ var SniceTable = (function (exports, snice) {
     `;
           }
           styles() {
-              return snice.css /*css*/ `${cssContent}`;
+              return snice.css /*css*/ `${cssContent$c}`;
           }
           init() {
               this.applyAlignment();
@@ -2358,7 +2330,7 @@ var SniceTable = (function (exports, snice) {
     `;
           }
           styles() {
-              return snice.css /*css*/ `${cssContent}`;
+              return snice.css /*css*/ `${cssContent$c}`;
           }
           init() {
               this.applyAlignment();
@@ -2568,7 +2540,7 @@ var SniceTable = (function (exports, snice) {
     `;
           }
           styles() {
-              return snice.css /*css*/ `${cssContent}`;
+              return snice.css /*css*/ `${cssContent$c}`;
           }
           init() {
               this.applyAlignment();
@@ -2820,7 +2792,7 @@ var SniceTable = (function (exports, snice) {
     `;
           }
           styles() {
-              return snice.css /*css*/ `${cssContent}`;
+              return snice.css /*css*/ `${cssContent$c}`;
           }
           init() {
               this.applyAlignment();
@@ -3041,7 +3013,7 @@ var SniceTable = (function (exports, snice) {
     `;
           }
           styles() {
-              return snice.css /*css*/ `${cssContent}`;
+              return snice.css /*css*/ `${cssContent$c}`;
           }
           init() {
               this.applyAlignment();
@@ -3267,7 +3239,7 @@ var SniceTable = (function (exports, snice) {
     `;
           }
           styles() {
-              return snice.css /*css*/ `${cssContent}`;
+              return snice.css /*css*/ `${cssContent$c}`;
           }
           init() {
               this.applyAlignment();
@@ -3388,7 +3360,7 @@ var SniceTable = (function (exports, snice) {
     `;
           }
           styles() {
-              return snice.css /*css*/ `${cssContent}`;
+              return snice.css /*css*/ `${cssContent$c}`;
           }
           init() {
               this.applyAlignment();
@@ -3518,7 +3490,7 @@ var SniceTable = (function (exports, snice) {
     `;
           }
           styles() {
-              return snice.css /*css*/ `${cssContent}`;
+              return snice.css /*css*/ `${cssContent$c}`;
           }
           init() {
               this.applyAlignment();
@@ -3696,7 +3668,7 @@ var SniceTable = (function (exports, snice) {
     `;
           }
           styles() {
-              return snice.css /*css*/ `${cssContent}`;
+              return snice.css /*css*/ `${cssContent$c}`;
           }
           init() {
               this.applyAlignment();
@@ -3888,6 +3860,2799 @@ var SniceTable = (function (exports, snice) {
       return _classThis;
   })();
 
+  (() => {
+      let _classDecorators = [snice.element('snice-column')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _key_decorators;
+      let _key_initializers = [];
+      let _key_extraInitializers = [];
+      let _label_decorators;
+      let _label_initializers = [];
+      let _label_extraInitializers = [];
+      let _type_decorators;
+      let _type_initializers = [];
+      let _type_extraInitializers = [];
+      let _align_decorators;
+      let _align_initializers = [];
+      let _align_extraInitializers = [];
+      let _width_decorators;
+      let _width_initializers = [];
+      let _width_extraInitializers = [];
+      let _sortable_decorators;
+      let _sortable_initializers = [];
+      let _sortable_extraInitializers = [];
+      let _filterable_decorators;
+      let _filterable_initializers = [];
+      let _filterable_extraInitializers = [];
+      let _wrap_decorators;
+      let _wrap_initializers = [];
+      let _wrap_extraInitializers = [];
+      let _ellipsis_decorators;
+      let _ellipsis_initializers = [];
+      let _ellipsis_extraInitializers = [];
+      let _tooltip_decorators;
+      let _tooltip_initializers = [];
+      let _tooltip_extraInitializers = [];
+      let _decimals_decorators;
+      let _decimals_initializers = [];
+      let _decimals_extraInitializers = [];
+      let _thousandsSeparator_decorators;
+      let _thousandsSeparator_initializers = [];
+      let _thousandsSeparator_extraInitializers = [];
+      let _numberPrefix_decorators;
+      let _numberPrefix_initializers = [];
+      let _numberPrefix_extraInitializers = [];
+      let _numberSuffix_decorators;
+      let _numberSuffix_initializers = [];
+      let _numberSuffix_extraInitializers = [];
+      let _negativeStyle_decorators;
+      let _negativeStyle_initializers = [];
+      let _negativeStyle_extraInitializers = [];
+      let _dateFormat_decorators;
+      let _dateFormat_initializers = [];
+      let _dateFormat_extraInitializers = [];
+      let _customDateFormat_decorators;
+      let _customDateFormat_initializers = [];
+      let _customDateFormat_extraInitializers = [];
+      let _dateLocale_decorators;
+      let _dateLocale_initializers = [];
+      let _dateLocale_extraInitializers = [];
+      let _trueValue_decorators;
+      let _trueValue_initializers = [];
+      let _trueValue_extraInitializers = [];
+      let _falseValue_decorators;
+      let _falseValue_initializers = [];
+      let _falseValue_extraInitializers = [];
+      let _useSymbols_decorators;
+      let _useSymbols_initializers = [];
+      let _useSymbols_extraInitializers = [];
+      let _trueSymbol_decorators;
+      let _trueSymbol_initializers = [];
+      let _trueSymbol_extraInitializers = [];
+      let _falseSymbol_decorators;
+      let _falseSymbol_initializers = [];
+      let _falseSymbol_extraInitializers = [];
+      let _ratingMax_decorators;
+      let _ratingMax_initializers = [];
+      let _ratingMax_extraInitializers = [];
+      let _ratingSymbol_decorators;
+      let _ratingSymbol_initializers = [];
+      let _ratingSymbol_extraInitializers = [];
+      let _ratingEmptySymbol_decorators;
+      let _ratingEmptySymbol_initializers = [];
+      let _ratingEmptySymbol_extraInitializers = [];
+      let _ratingColor_decorators;
+      let _ratingColor_initializers = [];
+      let _ratingColor_extraInitializers = [];
+      let _progressMax_decorators;
+      let _progressMax_initializers = [];
+      let _progressMax_extraInitializers = [];
+      let _showPercentage_decorators;
+      let _showPercentage_initializers = [];
+      let _showPercentage_extraInitializers = [];
+      let _progressColor_decorators;
+      let _progressColor_initializers = [];
+      let _progressColor_extraInitializers = [];
+      let _progressBgColor_decorators;
+      let _progressBgColor_initializers = [];
+      let _progressBgColor_extraInitializers = [];
+      let _progressHeight_decorators;
+      let _progressHeight_initializers = [];
+      let _progressHeight_extraInitializers = [];
+      let _sparklineType_decorators;
+      let _sparklineType_initializers = [];
+      let _sparklineType_extraInitializers = [];
+      let _sparklineColor_decorators;
+      let _sparklineColor_initializers = [];
+      let _sparklineColor_extraInitializers = [];
+      let _sparklineWidth_decorators;
+      let _sparklineWidth_initializers = [];
+      let _sparklineWidth_extraInitializers = [];
+      let _sparklineHeight_decorators;
+      let _sparklineHeight_initializers = [];
+      let _sparklineHeight_extraInitializers = [];
+      let _cellBgColor_decorators;
+      let _cellBgColor_initializers = [];
+      let _cellBgColor_extraInitializers = [];
+      let _cellColor_decorators;
+      let _cellColor_initializers = [];
+      let _cellColor_extraInitializers = [];
+      let _cellFontWeight_decorators;
+      let _cellFontWeight_initializers = [];
+      let _cellFontWeight_extraInitializers = [];
+      let _cellFontStyle_decorators;
+      let _cellFontStyle_initializers = [];
+      let _cellFontStyle_extraInitializers = [];
+      let _cellFontSize_decorators;
+      let _cellFontSize_initializers = [];
+      let _cellFontSize_extraInitializers = [];
+      let _cellTextDecoration_decorators;
+      let _cellTextDecoration_initializers = [];
+      let _cellTextDecoration_extraInitializers = [];
+      let _render_decorators;
+      let _handleBasicPropsChange_decorators;
+      let _handleNumberFormatChange_decorators;
+      let _handleDateFormatChange_decorators;
+      let _handleBooleanFormatChange_decorators;
+      let _handleRatingFormatChange_decorators;
+      let _handleProgressFormatChange_decorators;
+      let _handleSparklineFormatChange_decorators;
+      let _handleStyleChange_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          constructor() {
+              super(...arguments);
+              this.key = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _key_initializers, ''));
+              this.label = (__runInitializers(this, _key_extraInitializers), __runInitializers(this, _label_initializers, ''));
+              this.type = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _type_initializers, 'text'));
+              this.align = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _align_initializers, 'left'));
+              this.width = (__runInitializers(this, _align_extraInitializers), __runInitializers(this, _width_initializers, ''));
+              this.sortable = (__runInitializers(this, _width_extraInitializers), __runInitializers(this, _sortable_initializers, true));
+              this.filterable = (__runInitializers(this, _sortable_extraInitializers), __runInitializers(this, _filterable_initializers, true));
+              this.wrap = (__runInitializers(this, _filterable_extraInitializers), __runInitializers(this, _wrap_initializers, false));
+              this.ellipsis = (__runInitializers(this, _wrap_extraInitializers), __runInitializers(this, _ellipsis_initializers, true));
+              this.tooltip = (__runInitializers(this, _ellipsis_extraInitializers), __runInitializers(this, _tooltip_initializers, false));
+              // Number formatting properties
+              this.decimals = (__runInitializers(this, _tooltip_extraInitializers), __runInitializers(this, _decimals_initializers, void 0));
+              this.thousandsSeparator = (__runInitializers(this, _decimals_extraInitializers), __runInitializers(this, _thousandsSeparator_initializers, void 0));
+              this.numberPrefix = (__runInitializers(this, _thousandsSeparator_extraInitializers), __runInitializers(this, _numberPrefix_initializers, void 0));
+              this.numberSuffix = (__runInitializers(this, _numberPrefix_extraInitializers), __runInitializers(this, _numberSuffix_initializers, void 0));
+              this.negativeStyle = (__runInitializers(this, _numberSuffix_extraInitializers), __runInitializers(this, _negativeStyle_initializers, void 0));
+              // Date formatting properties
+              this.dateFormat = (__runInitializers(this, _negativeStyle_extraInitializers), __runInitializers(this, _dateFormat_initializers, void 0));
+              this.customDateFormat = (__runInitializers(this, _dateFormat_extraInitializers), __runInitializers(this, _customDateFormat_initializers, void 0));
+              this.dateLocale = (__runInitializers(this, _customDateFormat_extraInitializers), __runInitializers(this, _dateLocale_initializers, void 0));
+              // Boolean formatting properties
+              this.trueValue = (__runInitializers(this, _dateLocale_extraInitializers), __runInitializers(this, _trueValue_initializers, void 0));
+              this.falseValue = (__runInitializers(this, _trueValue_extraInitializers), __runInitializers(this, _falseValue_initializers, void 0));
+              this.useSymbols = (__runInitializers(this, _falseValue_extraInitializers), __runInitializers(this, _useSymbols_initializers, void 0));
+              this.trueSymbol = (__runInitializers(this, _useSymbols_extraInitializers), __runInitializers(this, _trueSymbol_initializers, void 0));
+              this.falseSymbol = (__runInitializers(this, _trueSymbol_extraInitializers), __runInitializers(this, _falseSymbol_initializers, void 0));
+              // Rating formatting properties
+              this.ratingMax = (__runInitializers(this, _falseSymbol_extraInitializers), __runInitializers(this, _ratingMax_initializers, void 0));
+              this.ratingSymbol = (__runInitializers(this, _ratingMax_extraInitializers), __runInitializers(this, _ratingSymbol_initializers, void 0));
+              this.ratingEmptySymbol = (__runInitializers(this, _ratingSymbol_extraInitializers), __runInitializers(this, _ratingEmptySymbol_initializers, void 0));
+              this.ratingColor = (__runInitializers(this, _ratingEmptySymbol_extraInitializers), __runInitializers(this, _ratingColor_initializers, void 0));
+              // Progress formatting properties
+              this.progressMax = (__runInitializers(this, _ratingColor_extraInitializers), __runInitializers(this, _progressMax_initializers, void 0));
+              this.showPercentage = (__runInitializers(this, _progressMax_extraInitializers), __runInitializers(this, _showPercentage_initializers, void 0));
+              this.progressColor = (__runInitializers(this, _showPercentage_extraInitializers), __runInitializers(this, _progressColor_initializers, void 0));
+              this.progressBgColor = (__runInitializers(this, _progressColor_extraInitializers), __runInitializers(this, _progressBgColor_initializers, void 0));
+              this.progressHeight = (__runInitializers(this, _progressBgColor_extraInitializers), __runInitializers(this, _progressHeight_initializers, void 0));
+              // Sparkline formatting properties
+              this.sparklineType = (__runInitializers(this, _progressHeight_extraInitializers), __runInitializers(this, _sparklineType_initializers, void 0));
+              this.sparklineColor = (__runInitializers(this, _sparklineType_extraInitializers), __runInitializers(this, _sparklineColor_initializers, void 0));
+              this.sparklineWidth = (__runInitializers(this, _sparklineColor_extraInitializers), __runInitializers(this, _sparklineWidth_initializers, void 0));
+              this.sparklineHeight = (__runInitializers(this, _sparklineWidth_extraInitializers), __runInitializers(this, _sparklineHeight_initializers, void 0));
+              // Style properties
+              this.cellBgColor = (__runInitializers(this, _sparklineHeight_extraInitializers), __runInitializers(this, _cellBgColor_initializers, void 0));
+              this.cellColor = (__runInitializers(this, _cellBgColor_extraInitializers), __runInitializers(this, _cellColor_initializers, void 0));
+              this.cellFontWeight = (__runInitializers(this, _cellColor_extraInitializers), __runInitializers(this, _cellFontWeight_initializers, void 0));
+              this.cellFontStyle = (__runInitializers(this, _cellFontWeight_extraInitializers), __runInitializers(this, _cellFontStyle_initializers, void 0));
+              this.cellFontSize = (__runInitializers(this, _cellFontStyle_extraInitializers), __runInitializers(this, _cellFontSize_initializers, void 0));
+              this.cellTextDecoration = (__runInitializers(this, _cellFontSize_extraInitializers), __runInitializers(this, _cellTextDecoration_initializers, void 0));
+              this.formatter = __runInitializers(this, _cellTextDecoration_extraInitializers);
+              this.conditionalFormats = [];
+          }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _key_decorators = [snice.property({})];
+              _label_decorators = [snice.property({})];
+              _type_decorators = [snice.property({})];
+              _align_decorators = [snice.property({})];
+              _width_decorators = [snice.property({})];
+              _sortable_decorators = [snice.property({ type: Boolean, })];
+              _filterable_decorators = [snice.property({ type: Boolean, })];
+              _wrap_decorators = [snice.property({ type: Boolean, })];
+              _ellipsis_decorators = [snice.property({ type: Boolean, })];
+              _tooltip_decorators = [snice.property({ type: Boolean, })];
+              _decimals_decorators = [snice.property({ type: Number, attribute: 'decimals' })];
+              _thousandsSeparator_decorators = [snice.property({ type: Boolean, attribute: 'thousands-separator' })];
+              _numberPrefix_decorators = [snice.property({ attribute: 'number-prefix' })];
+              _numberSuffix_decorators = [snice.property({ attribute: 'number-suffix' })];
+              _negativeStyle_decorators = [snice.property({ attribute: 'negative-style' })];
+              _dateFormat_decorators = [snice.property({ attribute: 'date-format' })];
+              _customDateFormat_decorators = [snice.property({ attribute: 'custom-date-format' })];
+              _dateLocale_decorators = [snice.property({ attribute: 'date-locale' })];
+              _trueValue_decorators = [snice.property({ attribute: 'true-value' })];
+              _falseValue_decorators = [snice.property({ attribute: 'false-value' })];
+              _useSymbols_decorators = [snice.property({ type: Boolean, attribute: 'use-symbols' })];
+              _trueSymbol_decorators = [snice.property({ attribute: 'true-symbol' })];
+              _falseSymbol_decorators = [snice.property({ attribute: 'false-symbol' })];
+              _ratingMax_decorators = [snice.property({ type: Number, attribute: 'rating-max' })];
+              _ratingSymbol_decorators = [snice.property({ attribute: 'rating-symbol' })];
+              _ratingEmptySymbol_decorators = [snice.property({ attribute: 'rating-empty-symbol' })];
+              _ratingColor_decorators = [snice.property({ attribute: 'rating-color' })];
+              _progressMax_decorators = [snice.property({ type: Number, attribute: 'progress-max' })];
+              _showPercentage_decorators = [snice.property({ type: Boolean, attribute: 'show-percentage' })];
+              _progressColor_decorators = [snice.property({ attribute: 'progress-color' })];
+              _progressBgColor_decorators = [snice.property({ attribute: 'progress-bg-color' })];
+              _progressHeight_decorators = [snice.property({ attribute: 'progress-height' })];
+              _sparklineType_decorators = [snice.property({ attribute: 'sparkline-type' })];
+              _sparklineColor_decorators = [snice.property({ attribute: 'sparkline-color' })];
+              _sparklineWidth_decorators = [snice.property({ type: Number, attribute: 'sparkline-width' })];
+              _sparklineHeight_decorators = [snice.property({ type: Number, attribute: 'sparkline-height' })];
+              _cellBgColor_decorators = [snice.property({ attribute: 'cell-bg-color' })];
+              _cellColor_decorators = [snice.property({ attribute: 'cell-color' })];
+              _cellFontWeight_decorators = [snice.property({ attribute: 'cell-font-weight' })];
+              _cellFontStyle_decorators = [snice.property({ attribute: 'cell-font-style' })];
+              _cellFontSize_decorators = [snice.property({ attribute: 'cell-font-size' })];
+              _cellTextDecoration_decorators = [snice.property({ attribute: 'cell-text-decoration' })];
+              _render_decorators = [snice.render()];
+              _handleBasicPropsChange_decorators = [snice.watch('key', 'label', 'type', 'align', 'width', 'sortable', 'filterable', 'wrap', 'ellipsis', 'tooltip')];
+              _handleNumberFormatChange_decorators = [snice.watch('decimals', 'thousandsSeparator', 'numberPrefix', 'numberSuffix', 'negativeStyle')];
+              _handleDateFormatChange_decorators = [snice.watch('dateFormat', 'customDateFormat', 'dateLocale')];
+              _handleBooleanFormatChange_decorators = [snice.watch('trueValue', 'falseValue', 'useSymbols', 'trueSymbol', 'falseSymbol')];
+              _handleRatingFormatChange_decorators = [snice.watch('ratingMax', 'ratingSymbol', 'ratingEmptySymbol', 'ratingColor')];
+              _handleProgressFormatChange_decorators = [snice.watch('progressMax', 'showPercentage', 'progressColor', 'progressBgColor', 'progressHeight')];
+              _handleSparklineFormatChange_decorators = [snice.watch('sparklineType', 'sparklineColor', 'sparklineWidth', 'sparklineHeight')];
+              _handleStyleChange_decorators = [snice.watch('cellBgColor', 'cellColor', 'cellFontWeight', 'cellFontStyle', 'cellFontSize', 'cellTextDecoration')];
+              __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, _handleBasicPropsChange_decorators, { kind: "method", name: "handleBasicPropsChange", static: false, private: false, access: { has: obj => "handleBasicPropsChange" in obj, get: obj => obj.handleBasicPropsChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleNumberFormatChange_decorators, { kind: "method", name: "handleNumberFormatChange", static: false, private: false, access: { has: obj => "handleNumberFormatChange" in obj, get: obj => obj.handleNumberFormatChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleDateFormatChange_decorators, { kind: "method", name: "handleDateFormatChange", static: false, private: false, access: { has: obj => "handleDateFormatChange" in obj, get: obj => obj.handleDateFormatChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleBooleanFormatChange_decorators, { kind: "method", name: "handleBooleanFormatChange", static: false, private: false, access: { has: obj => "handleBooleanFormatChange" in obj, get: obj => obj.handleBooleanFormatChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleRatingFormatChange_decorators, { kind: "method", name: "handleRatingFormatChange", static: false, private: false, access: { has: obj => "handleRatingFormatChange" in obj, get: obj => obj.handleRatingFormatChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleProgressFormatChange_decorators, { kind: "method", name: "handleProgressFormatChange", static: false, private: false, access: { has: obj => "handleProgressFormatChange" in obj, get: obj => obj.handleProgressFormatChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleSparklineFormatChange_decorators, { kind: "method", name: "handleSparklineFormatChange", static: false, private: false, access: { has: obj => "handleSparklineFormatChange" in obj, get: obj => obj.handleSparklineFormatChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleStyleChange_decorators, { kind: "method", name: "handleStyleChange", static: false, private: false, access: { has: obj => "handleStyleChange" in obj, get: obj => obj.handleStyleChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _key_decorators, { kind: "field", name: "key", static: false, private: false, access: { has: obj => "key" in obj, get: obj => obj.key, set: (obj, value) => { obj.key = value; } }, metadata: _metadata }, _key_initializers, _key_extraInitializers);
+              __esDecorate(null, null, _label_decorators, { kind: "field", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+              __esDecorate(null, null, _type_decorators, { kind: "field", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
+              __esDecorate(null, null, _align_decorators, { kind: "field", name: "align", static: false, private: false, access: { has: obj => "align" in obj, get: obj => obj.align, set: (obj, value) => { obj.align = value; } }, metadata: _metadata }, _align_initializers, _align_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, _sortable_decorators, { kind: "field", name: "sortable", static: false, private: false, access: { has: obj => "sortable" in obj, get: obj => obj.sortable, set: (obj, value) => { obj.sortable = value; } }, metadata: _metadata }, _sortable_initializers, _sortable_extraInitializers);
+              __esDecorate(null, null, _filterable_decorators, { kind: "field", name: "filterable", static: false, private: false, access: { has: obj => "filterable" in obj, get: obj => obj.filterable, set: (obj, value) => { obj.filterable = value; } }, metadata: _metadata }, _filterable_initializers, _filterable_extraInitializers);
+              __esDecorate(null, null, _wrap_decorators, { kind: "field", name: "wrap", static: false, private: false, access: { has: obj => "wrap" in obj, get: obj => obj.wrap, set: (obj, value) => { obj.wrap = value; } }, metadata: _metadata }, _wrap_initializers, _wrap_extraInitializers);
+              __esDecorate(null, null, _ellipsis_decorators, { kind: "field", name: "ellipsis", static: false, private: false, access: { has: obj => "ellipsis" in obj, get: obj => obj.ellipsis, set: (obj, value) => { obj.ellipsis = value; } }, metadata: _metadata }, _ellipsis_initializers, _ellipsis_extraInitializers);
+              __esDecorate(null, null, _tooltip_decorators, { kind: "field", name: "tooltip", static: false, private: false, access: { has: obj => "tooltip" in obj, get: obj => obj.tooltip, set: (obj, value) => { obj.tooltip = value; } }, metadata: _metadata }, _tooltip_initializers, _tooltip_extraInitializers);
+              __esDecorate(null, null, _decimals_decorators, { kind: "field", name: "decimals", static: false, private: false, access: { has: obj => "decimals" in obj, get: obj => obj.decimals, set: (obj, value) => { obj.decimals = value; } }, metadata: _metadata }, _decimals_initializers, _decimals_extraInitializers);
+              __esDecorate(null, null, _thousandsSeparator_decorators, { kind: "field", name: "thousandsSeparator", static: false, private: false, access: { has: obj => "thousandsSeparator" in obj, get: obj => obj.thousandsSeparator, set: (obj, value) => { obj.thousandsSeparator = value; } }, metadata: _metadata }, _thousandsSeparator_initializers, _thousandsSeparator_extraInitializers);
+              __esDecorate(null, null, _numberPrefix_decorators, { kind: "field", name: "numberPrefix", static: false, private: false, access: { has: obj => "numberPrefix" in obj, get: obj => obj.numberPrefix, set: (obj, value) => { obj.numberPrefix = value; } }, metadata: _metadata }, _numberPrefix_initializers, _numberPrefix_extraInitializers);
+              __esDecorate(null, null, _numberSuffix_decorators, { kind: "field", name: "numberSuffix", static: false, private: false, access: { has: obj => "numberSuffix" in obj, get: obj => obj.numberSuffix, set: (obj, value) => { obj.numberSuffix = value; } }, metadata: _metadata }, _numberSuffix_initializers, _numberSuffix_extraInitializers);
+              __esDecorate(null, null, _negativeStyle_decorators, { kind: "field", name: "negativeStyle", static: false, private: false, access: { has: obj => "negativeStyle" in obj, get: obj => obj.negativeStyle, set: (obj, value) => { obj.negativeStyle = value; } }, metadata: _metadata }, _negativeStyle_initializers, _negativeStyle_extraInitializers);
+              __esDecorate(null, null, _dateFormat_decorators, { kind: "field", name: "dateFormat", static: false, private: false, access: { has: obj => "dateFormat" in obj, get: obj => obj.dateFormat, set: (obj, value) => { obj.dateFormat = value; } }, metadata: _metadata }, _dateFormat_initializers, _dateFormat_extraInitializers);
+              __esDecorate(null, null, _customDateFormat_decorators, { kind: "field", name: "customDateFormat", static: false, private: false, access: { has: obj => "customDateFormat" in obj, get: obj => obj.customDateFormat, set: (obj, value) => { obj.customDateFormat = value; } }, metadata: _metadata }, _customDateFormat_initializers, _customDateFormat_extraInitializers);
+              __esDecorate(null, null, _dateLocale_decorators, { kind: "field", name: "dateLocale", static: false, private: false, access: { has: obj => "dateLocale" in obj, get: obj => obj.dateLocale, set: (obj, value) => { obj.dateLocale = value; } }, metadata: _metadata }, _dateLocale_initializers, _dateLocale_extraInitializers);
+              __esDecorate(null, null, _trueValue_decorators, { kind: "field", name: "trueValue", static: false, private: false, access: { has: obj => "trueValue" in obj, get: obj => obj.trueValue, set: (obj, value) => { obj.trueValue = value; } }, metadata: _metadata }, _trueValue_initializers, _trueValue_extraInitializers);
+              __esDecorate(null, null, _falseValue_decorators, { kind: "field", name: "falseValue", static: false, private: false, access: { has: obj => "falseValue" in obj, get: obj => obj.falseValue, set: (obj, value) => { obj.falseValue = value; } }, metadata: _metadata }, _falseValue_initializers, _falseValue_extraInitializers);
+              __esDecorate(null, null, _useSymbols_decorators, { kind: "field", name: "useSymbols", static: false, private: false, access: { has: obj => "useSymbols" in obj, get: obj => obj.useSymbols, set: (obj, value) => { obj.useSymbols = value; } }, metadata: _metadata }, _useSymbols_initializers, _useSymbols_extraInitializers);
+              __esDecorate(null, null, _trueSymbol_decorators, { kind: "field", name: "trueSymbol", static: false, private: false, access: { has: obj => "trueSymbol" in obj, get: obj => obj.trueSymbol, set: (obj, value) => { obj.trueSymbol = value; } }, metadata: _metadata }, _trueSymbol_initializers, _trueSymbol_extraInitializers);
+              __esDecorate(null, null, _falseSymbol_decorators, { kind: "field", name: "falseSymbol", static: false, private: false, access: { has: obj => "falseSymbol" in obj, get: obj => obj.falseSymbol, set: (obj, value) => { obj.falseSymbol = value; } }, metadata: _metadata }, _falseSymbol_initializers, _falseSymbol_extraInitializers);
+              __esDecorate(null, null, _ratingMax_decorators, { kind: "field", name: "ratingMax", static: false, private: false, access: { has: obj => "ratingMax" in obj, get: obj => obj.ratingMax, set: (obj, value) => { obj.ratingMax = value; } }, metadata: _metadata }, _ratingMax_initializers, _ratingMax_extraInitializers);
+              __esDecorate(null, null, _ratingSymbol_decorators, { kind: "field", name: "ratingSymbol", static: false, private: false, access: { has: obj => "ratingSymbol" in obj, get: obj => obj.ratingSymbol, set: (obj, value) => { obj.ratingSymbol = value; } }, metadata: _metadata }, _ratingSymbol_initializers, _ratingSymbol_extraInitializers);
+              __esDecorate(null, null, _ratingEmptySymbol_decorators, { kind: "field", name: "ratingEmptySymbol", static: false, private: false, access: { has: obj => "ratingEmptySymbol" in obj, get: obj => obj.ratingEmptySymbol, set: (obj, value) => { obj.ratingEmptySymbol = value; } }, metadata: _metadata }, _ratingEmptySymbol_initializers, _ratingEmptySymbol_extraInitializers);
+              __esDecorate(null, null, _ratingColor_decorators, { kind: "field", name: "ratingColor", static: false, private: false, access: { has: obj => "ratingColor" in obj, get: obj => obj.ratingColor, set: (obj, value) => { obj.ratingColor = value; } }, metadata: _metadata }, _ratingColor_initializers, _ratingColor_extraInitializers);
+              __esDecorate(null, null, _progressMax_decorators, { kind: "field", name: "progressMax", static: false, private: false, access: { has: obj => "progressMax" in obj, get: obj => obj.progressMax, set: (obj, value) => { obj.progressMax = value; } }, metadata: _metadata }, _progressMax_initializers, _progressMax_extraInitializers);
+              __esDecorate(null, null, _showPercentage_decorators, { kind: "field", name: "showPercentage", static: false, private: false, access: { has: obj => "showPercentage" in obj, get: obj => obj.showPercentage, set: (obj, value) => { obj.showPercentage = value; } }, metadata: _metadata }, _showPercentage_initializers, _showPercentage_extraInitializers);
+              __esDecorate(null, null, _progressColor_decorators, { kind: "field", name: "progressColor", static: false, private: false, access: { has: obj => "progressColor" in obj, get: obj => obj.progressColor, set: (obj, value) => { obj.progressColor = value; } }, metadata: _metadata }, _progressColor_initializers, _progressColor_extraInitializers);
+              __esDecorate(null, null, _progressBgColor_decorators, { kind: "field", name: "progressBgColor", static: false, private: false, access: { has: obj => "progressBgColor" in obj, get: obj => obj.progressBgColor, set: (obj, value) => { obj.progressBgColor = value; } }, metadata: _metadata }, _progressBgColor_initializers, _progressBgColor_extraInitializers);
+              __esDecorate(null, null, _progressHeight_decorators, { kind: "field", name: "progressHeight", static: false, private: false, access: { has: obj => "progressHeight" in obj, get: obj => obj.progressHeight, set: (obj, value) => { obj.progressHeight = value; } }, metadata: _metadata }, _progressHeight_initializers, _progressHeight_extraInitializers);
+              __esDecorate(null, null, _sparklineType_decorators, { kind: "field", name: "sparklineType", static: false, private: false, access: { has: obj => "sparklineType" in obj, get: obj => obj.sparklineType, set: (obj, value) => { obj.sparklineType = value; } }, metadata: _metadata }, _sparklineType_initializers, _sparklineType_extraInitializers);
+              __esDecorate(null, null, _sparklineColor_decorators, { kind: "field", name: "sparklineColor", static: false, private: false, access: { has: obj => "sparklineColor" in obj, get: obj => obj.sparklineColor, set: (obj, value) => { obj.sparklineColor = value; } }, metadata: _metadata }, _sparklineColor_initializers, _sparklineColor_extraInitializers);
+              __esDecorate(null, null, _sparklineWidth_decorators, { kind: "field", name: "sparklineWidth", static: false, private: false, access: { has: obj => "sparklineWidth" in obj, get: obj => obj.sparklineWidth, set: (obj, value) => { obj.sparklineWidth = value; } }, metadata: _metadata }, _sparklineWidth_initializers, _sparklineWidth_extraInitializers);
+              __esDecorate(null, null, _sparklineHeight_decorators, { kind: "field", name: "sparklineHeight", static: false, private: false, access: { has: obj => "sparklineHeight" in obj, get: obj => obj.sparklineHeight, set: (obj, value) => { obj.sparklineHeight = value; } }, metadata: _metadata }, _sparklineHeight_initializers, _sparklineHeight_extraInitializers);
+              __esDecorate(null, null, _cellBgColor_decorators, { kind: "field", name: "cellBgColor", static: false, private: false, access: { has: obj => "cellBgColor" in obj, get: obj => obj.cellBgColor, set: (obj, value) => { obj.cellBgColor = value; } }, metadata: _metadata }, _cellBgColor_initializers, _cellBgColor_extraInitializers);
+              __esDecorate(null, null, _cellColor_decorators, { kind: "field", name: "cellColor", static: false, private: false, access: { has: obj => "cellColor" in obj, get: obj => obj.cellColor, set: (obj, value) => { obj.cellColor = value; } }, metadata: _metadata }, _cellColor_initializers, _cellColor_extraInitializers);
+              __esDecorate(null, null, _cellFontWeight_decorators, { kind: "field", name: "cellFontWeight", static: false, private: false, access: { has: obj => "cellFontWeight" in obj, get: obj => obj.cellFontWeight, set: (obj, value) => { obj.cellFontWeight = value; } }, metadata: _metadata }, _cellFontWeight_initializers, _cellFontWeight_extraInitializers);
+              __esDecorate(null, null, _cellFontStyle_decorators, { kind: "field", name: "cellFontStyle", static: false, private: false, access: { has: obj => "cellFontStyle" in obj, get: obj => obj.cellFontStyle, set: (obj, value) => { obj.cellFontStyle = value; } }, metadata: _metadata }, _cellFontStyle_initializers, _cellFontStyle_extraInitializers);
+              __esDecorate(null, null, _cellFontSize_decorators, { kind: "field", name: "cellFontSize", static: false, private: false, access: { has: obj => "cellFontSize" in obj, get: obj => obj.cellFontSize, set: (obj, value) => { obj.cellFontSize = value; } }, metadata: _metadata }, _cellFontSize_initializers, _cellFontSize_extraInitializers);
+              __esDecorate(null, null, _cellTextDecoration_decorators, { kind: "field", name: "cellTextDecoration", static: false, private: false, access: { has: obj => "cellTextDecoration" in obj, get: obj => obj.cellTextDecoration, set: (obj, value) => { obj.cellTextDecoration = value; } }, metadata: _metadata }, _cellTextDecoration_initializers, _cellTextDecoration_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() {
+              return snice.html /*html*/ `<slot></slot>`;
+          }
+          // Set custom formatter function
+          setFormatter(formatter) {
+              this.formatter = formatter;
+              this.notifyTableOfChange();
+          }
+          // Add conditional formatting rule
+          addConditionalFormat(format) {
+              this.conditionalFormats.push(format);
+              this.notifyTableOfChange();
+          }
+          // Remove conditional formatting rule
+          removeConditionalFormat(index) {
+              this.conditionalFormats.splice(index, 1);
+              this.notifyTableOfChange();
+          }
+          // Clear all conditional formatting
+          clearConditionalFormats() {
+              this.conditionalFormats = [];
+              this.notifyTableOfChange();
+          }
+          // Get the complete column definition for the table
+          getColumnDefinition() {
+              const definition = {
+                  key: this.key,
+                  label: this.label,
+                  type: this.type,
+                  align: this.align,
+                  width: this.width,
+                  sortable: this.sortable,
+                  filterable: this.filterable,
+                  wrap: this.wrap,
+                  ellipsis: this.ellipsis,
+                  tooltip: this.tooltip,
+                  formatter: this.formatter,
+                  conditionalFormats: this.conditionalFormats
+              };
+              // Add type-specific formatting
+              if (this.type === 'number' || this.type === 'currency' || this.type === 'percent' ||
+                  this.type === 'accounting' || this.type === 'scientific' || this.type === 'fraction') {
+                  const numberFormat = {};
+                  if (this.decimals !== undefined)
+                      numberFormat.decimals = this.decimals;
+                  if (this.thousandsSeparator !== undefined)
+                      numberFormat.thousandsSeparator = this.thousandsSeparator;
+                  if (this.numberPrefix)
+                      numberFormat.prefix = this.numberPrefix;
+                  if (this.numberSuffix)
+                      numberFormat.suffix = this.numberSuffix;
+                  if (this.negativeStyle)
+                      numberFormat.negativeStyle = this.negativeStyle;
+                  if (Object.keys(numberFormat).length > 0) {
+                      definition.numberFormat = numberFormat;
+                  }
+              }
+              if (this.type === 'date') {
+                  const dateFormat = {};
+                  if (this.dateFormat)
+                      dateFormat.format = this.dateFormat;
+                  if (this.customDateFormat)
+                      dateFormat.customFormat = this.customDateFormat;
+                  if (this.dateLocale)
+                      dateFormat.locale = this.dateLocale;
+                  if (Object.keys(dateFormat).length > 0) {
+                      definition.dateFormat = dateFormat;
+                  }
+              }
+              if (this.type === 'boolean') {
+                  const booleanFormat = {};
+                  if (this.trueValue)
+                      booleanFormat.trueValue = this.trueValue;
+                  if (this.falseValue)
+                      booleanFormat.falseValue = this.falseValue;
+                  if (this.useSymbols !== undefined)
+                      booleanFormat.useSymbols = this.useSymbols;
+                  if (this.trueSymbol)
+                      booleanFormat.trueSymbol = this.trueSymbol;
+                  if (this.falseSymbol)
+                      booleanFormat.falseSymbol = this.falseSymbol;
+                  if (Object.keys(booleanFormat).length > 0) {
+                      definition.booleanFormat = booleanFormat;
+                  }
+              }
+              if (this.type === 'rating') {
+                  const ratingFormat = {};
+                  if (this.ratingMax !== undefined)
+                      ratingFormat.max = this.ratingMax;
+                  if (this.ratingSymbol)
+                      ratingFormat.symbol = this.ratingSymbol;
+                  if (this.ratingEmptySymbol)
+                      ratingFormat.emptySymbol = this.ratingEmptySymbol;
+                  if (this.ratingColor)
+                      ratingFormat.color = this.ratingColor;
+                  if (Object.keys(ratingFormat).length > 0) {
+                      definition.ratingFormat = ratingFormat;
+                  }
+              }
+              if (this.type === 'progress') {
+                  const progressFormat = {};
+                  if (this.progressMax !== undefined)
+                      progressFormat.max = this.progressMax;
+                  if (this.showPercentage !== undefined)
+                      progressFormat.showPercentage = this.showPercentage;
+                  if (this.progressColor)
+                      progressFormat.color = this.progressColor;
+                  if (this.progressBgColor)
+                      progressFormat.backgroundColor = this.progressBgColor;
+                  if (this.progressHeight)
+                      progressFormat.height = this.progressHeight;
+                  if (Object.keys(progressFormat).length > 0) {
+                      definition.progressFormat = progressFormat;
+                  }
+              }
+              if (this.type === 'sparkline') {
+                  const sparklineFormat = {};
+                  if (this.sparklineType)
+                      sparklineFormat.type = this.sparklineType;
+                  if (this.sparklineColor)
+                      sparklineFormat.color = this.sparklineColor;
+                  if (this.sparklineWidth !== undefined)
+                      sparklineFormat.width = this.sparklineWidth;
+                  if (this.sparklineHeight !== undefined)
+                      sparklineFormat.height = this.sparklineHeight;
+                  if (Object.keys(sparklineFormat).length > 0) {
+                      definition.sparklineFormat = sparklineFormat;
+                  }
+              }
+              // Add cell style if any style properties are set
+              const cellStyle = {};
+              if (this.cellBgColor)
+                  cellStyle.backgroundColor = this.cellBgColor;
+              if (this.cellColor)
+                  cellStyle.color = this.cellColor;
+              if (this.cellFontWeight)
+                  cellStyle.fontWeight = this.cellFontWeight;
+              if (this.cellFontStyle)
+                  cellStyle.fontStyle = this.cellFontStyle;
+              if (this.cellFontSize)
+                  cellStyle.fontSize = this.cellFontSize;
+              if (this.cellTextDecoration)
+                  cellStyle.textDecoration = this.cellTextDecoration;
+              if (Object.keys(cellStyle).length > 0) {
+                  definition.style = cellStyle;
+              }
+              return definition;
+          }
+          handleBasicPropsChange() {
+              this.notifyTableOfChange();
+          }
+          handleNumberFormatChange() {
+              if (this.type === 'number' || this.type === 'currency' || this.type === 'percent' ||
+                  this.type === 'accounting' || this.type === 'scientific' || this.type === 'fraction') {
+                  this.notifyTableOfChange();
+              }
+          }
+          handleDateFormatChange() {
+              if (this.type === 'date') {
+                  this.notifyTableOfChange();
+              }
+          }
+          handleBooleanFormatChange() {
+              if (this.type === 'boolean') {
+                  this.notifyTableOfChange();
+              }
+          }
+          handleRatingFormatChange() {
+              if (this.type === 'rating') {
+                  this.notifyTableOfChange();
+              }
+          }
+          handleProgressFormatChange() {
+              if (this.type === 'progress') {
+                  this.notifyTableOfChange();
+              }
+          }
+          handleSparklineFormatChange() {
+              if (this.type === 'sparkline') {
+                  this.notifyTableOfChange();
+              }
+          }
+          handleStyleChange() {
+              this.notifyTableOfChange();
+          }
+          notifyTableOfChange() {
+              // Dispatch event to parent table to notify of column definition change
+              this.dispatchEvent(new CustomEvent('column-changed', {
+                  detail: { column: this.getColumnDefinition() },
+                  bubbles: true,
+                  composed: true
+              }));
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$b = ":host{color:var(--snice-color-text);display:flex;align-items:center;min-height:2.5rem;height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem}.cell-link{display:inline-flex;align-items:center;gap:.25rem;color:var(--snice-color-primary);text-decoration:none;transition:color .2s}.cell-link:hover{color:var(--snice-color-primary-dark);text-decoration:underline}.cell-link:focus{outline:2px solid var(--snice-color-primary);outline-offset:2px;border-radius:2px}.cell-link:visited{color:var(--snice-color-secondary)}.link-icon{display:inline-flex;align-items:center;font-size:1rem}.link-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.external-icon{display:inline-flex;align-items:center;font-size:.75rem;opacity:.7}:host([align=left]){text-align:left;justify-content:flex-start}:host([align=center]){text-align:center;justify-content:center}:host([align=right]){text-align:right;justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text);font-size:.75rem;line-height:1rem}}@media print{.cell-link{text-decoration:underline}.cell-link::after{content:\" (\" attr(href) \")\";font-size:.75rem;color:var(--snice-color-text-secondary)}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-cell-link')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _value_decorators;
+      let _value_initializers = [];
+      let _value_extraInitializers = [];
+      let _href_decorators;
+      let _href_initializers = [];
+      let _href_extraInitializers = [];
+      let _target_decorators;
+      let _target_initializers = [];
+      let _target_extraInitializers = [];
+      let _external_decorators;
+      let _external_initializers = [];
+      let _external_extraInitializers = [];
+      let _icon_decorators;
+      let _icon_initializers = [];
+      let _icon_extraInitializers = [];
+      let _text_decorators;
+      let _text_initializers = [];
+      let _text_extraInitializers = [];
+      let _column_decorators;
+      let _column_initializers = [];
+      let _column_extraInitializers = [];
+      let _rowData_decorators;
+      let _rowData_initializers = [];
+      let _rowData_extraInitializers = [];
+      let _align_decorators;
+      let _align_initializers = [];
+      let _align_extraInitializers = [];
+      let _type_decorators;
+      let _type_initializers = [];
+      let _type_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _init_decorators;
+      let _updateCellAttributes_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _value_decorators = [snice.property({ type: String })];
+              _href_decorators = [snice.property({ type: String })];
+              _target_decorators = [snice.property({ type: String })];
+              _external_decorators = [snice.property({ type: Boolean, attribute: 'external' })];
+              _icon_decorators = [snice.property({ type: String })];
+              _text_decorators = [snice.property({ type: String })];
+              _column_decorators = [snice.property({ type: Object })];
+              _rowData_decorators = [snice.property({ type: Object })];
+              _align_decorators = [snice.property({ type: String })];
+              _type_decorators = [snice.property({ type: String })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _init_decorators = [snice.ready()];
+              _updateCellAttributes_decorators = [snice.watch('value', 'column')];
+              __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, _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, _updateCellAttributes_decorators, { kind: "method", name: "updateCellAttributes", static: false, private: false, access: { has: obj => "updateCellAttributes" in obj, get: obj => obj.updateCellAttributes }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+              __esDecorate(null, null, _href_decorators, { kind: "field", name: "href", static: false, private: false, access: { has: obj => "href" in obj, get: obj => obj.href, set: (obj, value) => { obj.href = value; } }, metadata: _metadata }, _href_initializers, _href_extraInitializers);
+              __esDecorate(null, null, _target_decorators, { kind: "field", name: "target", static: false, private: false, access: { has: obj => "target" in obj, get: obj => obj.target, set: (obj, value) => { obj.target = value; } }, metadata: _metadata }, _target_initializers, _target_extraInitializers);
+              __esDecorate(null, null, _external_decorators, { kind: "field", name: "external", static: false, private: false, access: { has: obj => "external" in obj, get: obj => obj.external, set: (obj, value) => { obj.external = value; } }, metadata: _metadata }, _external_initializers, _external_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, _text_decorators, { kind: "field", name: "text", static: false, private: false, access: { has: obj => "text" in obj, get: obj => obj.text, set: (obj, value) => { obj.text = value; } }, metadata: _metadata }, _text_initializers, _text_extraInitializers);
+              __esDecorate(null, null, _column_decorators, { kind: "field", name: "column", static: false, private: false, access: { has: obj => "column" in obj, get: obj => obj.column, set: (obj, value) => { obj.column = value; } }, metadata: _metadata }, _column_initializers, _column_extraInitializers);
+              __esDecorate(null, null, _rowData_decorators, { kind: "field", name: "rowData", static: false, private: false, access: { has: obj => "rowData" in obj, get: obj => obj.rowData, set: (obj, value) => { obj.rowData = value; } }, metadata: _metadata }, _rowData_initializers, _rowData_extraInitializers);
+              __esDecorate(null, null, _align_decorators, { kind: "field", name: "align", static: false, private: false, access: { has: obj => "align" in obj, get: obj => obj.align, set: (obj, value) => { obj.align = value; } }, metadata: _metadata }, _align_initializers, _align_extraInitializers);
+              __esDecorate(null, null, _type_decorators, { kind: "field", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_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 linkHref = this.href || this.value;
+              const linkText = this.text || this.value;
+              const isExternal = this.external || this.target === '_blank' || linkHref.startsWith('http');
+              const iconHTML = this.icon ? `<span class="link-icon">${this.icon}</span>` : '';
+              const externalIcon = isExternal ? '<span class="external-icon">↗</span>' : '';
+              return snice.html /*html*/ `
+      <div class="cell-content cell-content--link" part="content">
+        <a
+          href="${linkHref}"
+          target="${isExternal ? '_blank' : this.target}"
+          rel="${isExternal ? 'noopener noreferrer' : ''}"
+          class="cell-link"
+          part="link"
+        >
+          ${snice.unsafeHTML(iconHTML)}
+          <span class="link-text">${linkText}</span>
+          ${snice.unsafeHTML(externalIcon)}
+        </a>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$b}`;
+          }
+          init() {
+              this.updateCellAttributes();
+          }
+          updateCellAttributes() {
+              // Extract link properties from column config
+              if (this.column?.linkFormat) {
+                  const format = this.column.linkFormat;
+                  this.href = format.href || this.value;
+                  this.target = format.target || '_self';
+                  this.external = format.external || false;
+                  this.icon = format.icon || '';
+                  this.text = format.text || this.value;
+              }
+          }
+          constructor() {
+              super(...arguments);
+              this.value = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, ''));
+              this.href = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _href_initializers, ''));
+              this.target = (__runInitializers(this, _href_extraInitializers), __runInitializers(this, _target_initializers, '_self'));
+              this.external = (__runInitializers(this, _target_extraInitializers), __runInitializers(this, _external_initializers, false));
+              this.icon = (__runInitializers(this, _external_extraInitializers), __runInitializers(this, _icon_initializers, ''));
+              this.text = (__runInitializers(this, _icon_extraInitializers), __runInitializers(this, _text_initializers, ''));
+              this.column = (__runInitializers(this, _text_extraInitializers), __runInitializers(this, _column_initializers, null));
+              this.rowData = (__runInitializers(this, _column_extraInitializers), __runInitializers(this, _rowData_initializers, null));
+              this.align = (__runInitializers(this, _rowData_extraInitializers), __runInitializers(this, _align_initializers, 'left'));
+              this.type = (__runInitializers(this, _align_extraInitializers), __runInitializers(this, _type_initializers, 'link'));
+              __runInitializers(this, _type_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$a = ":host{color:var(--snice-color-text);display:flex;align-items:center;min-height:2.5rem;height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem}.actions-container{display:inline-flex;gap:.5rem;align-items:center}.action-button{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border:1px solid transparent;border-radius:.25rem;background:0 0;cursor:pointer;transition:.2s;font-size:.875rem;line-height:1}.action-button:hover{background:hsl(0 0% 0% / .05)}.action-button:focus{outline:2px solid var(--snice-color-primary);outline-offset:2px}.action-button:active{transform:scale(.95)}.action-button:disabled{opacity:.5;cursor:not-allowed}.action-button:disabled:hover{background:0 0}.action-button--primary{color:var(--snice-color-primary)}.action-button--primary:hover:not(:disabled){background:hsl(var(--snice-color-blue-500) / .1)}.action-button--secondary{color:var(--snice-color-text)}.action-button--danger{color:var(--snice-color-danger)}.action-button--danger:hover:not(:disabled){background:hsl(var(--snice-color-red-500) / .1)}.action-button--success{color:var(--snice-color-success)}.action-button--success:hover:not(:disabled){background:hsl(var(--snice-color-green-500) / .1)}.action-icon{display:inline-flex;align-items:center;font-size:1rem}.action-icon--image{width:1rem;height:1rem}.action-icon--image img{width:100%;height:100%;object-fit:contain}.action-label{font-weight:500}:host([align=left]){justify-content:flex-start}:host([align=center]){justify-content:center}:host([align=right]){justify-content:flex-end}@media (max-width:768px){.action-button{padding:.25rem}.action-label{display:none}}@media print{.actions-container{display:none}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-cell-actions')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _actions_decorators;
+      let _actions_initializers = [];
+      let _actions_extraInitializers = [];
+      let _column_decorators;
+      let _column_initializers = [];
+      let _column_extraInitializers = [];
+      let _rowData_decorators;
+      let _rowData_initializers = [];
+      let _rowData_extraInitializers = [];
+      let _value_decorators;
+      let _value_initializers = [];
+      let _value_extraInitializers = [];
+      let _align_decorators;
+      let _align_initializers = [];
+      let _align_extraInitializers = [];
+      let _type_decorators;
+      let _type_initializers = [];
+      let _type_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _init_decorators;
+      let _extractActionsFromColumn_decorators;
+      let _dispatchAction_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _actions_decorators = [snice.property({ type: Array })];
+              _column_decorators = [snice.property({ type: Object })];
+              _rowData_decorators = [snice.property({ type: Object })];
+              _value_decorators = [snice.property({ type: String })];
+              _align_decorators = [snice.property({ type: String })];
+              _type_decorators = [snice.property({ type: String })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _init_decorators = [snice.ready()];
+              _extractActionsFromColumn_decorators = [snice.watch('column')];
+              _dispatchAction_decorators = [snice.dispatch('cell-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, _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, _extractActionsFromColumn_decorators, { kind: "method", name: "extractActionsFromColumn", static: false, private: false, access: { has: obj => "extractActionsFromColumn" in obj, get: obj => obj.extractActionsFromColumn }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _dispatchAction_decorators, { kind: "method", name: "dispatchAction", static: false, private: false, access: { has: obj => "dispatchAction" in obj, get: obj => obj.dispatchAction }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _actions_decorators, { kind: "field", name: "actions", static: false, private: false, access: { has: obj => "actions" in obj, get: obj => obj.actions, set: (obj, value) => { obj.actions = value; } }, metadata: _metadata }, _actions_initializers, _actions_extraInitializers);
+              __esDecorate(null, null, _column_decorators, { kind: "field", name: "column", static: false, private: false, access: { has: obj => "column" in obj, get: obj => obj.column, set: (obj, value) => { obj.column = value; } }, metadata: _metadata }, _column_initializers, _column_extraInitializers);
+              __esDecorate(null, null, _rowData_decorators, { kind: "field", name: "rowData", static: false, private: false, access: { has: obj => "rowData" in obj, get: obj => obj.rowData, set: (obj, value) => { obj.rowData = value; } }, metadata: _metadata }, _rowData_initializers, _rowData_extraInitializers);
+              __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+              __esDecorate(null, null, _align_decorators, { kind: "field", name: "align", static: false, private: false, access: { has: obj => "align" in obj, get: obj => obj.align, set: (obj, value) => { obj.align = value; } }, metadata: _metadata }, _align_initializers, _align_extraInitializers);
+              __esDecorate(null, null, _type_decorators, { kind: "field", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_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() {
+              if (this.actions.length === 0) {
+                  return snice.html /*html*/ `
+        <div class="cell-content cell-content--actions" part="content">
+          <div class="actions-container"></div>
+        </div>
+      `;
+              }
+              return snice.html /*html*/ `
+      <div class="cell-content cell-content--actions" part="content">
+        <div class="actions-container">
+          ${this.actions.map(action => this.renderActionButton(action))}
+        </div>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$a}`;
+          }
+          init() {
+              this.extractActionsFromColumn();
+          }
+          extractActionsFromColumn() {
+              if (this.column?.actionsFormat?.actions) {
+                  this.actions = this.column.actionsFormat.actions;
+              }
+          }
+          renderActionButton(action) {
+              const icon = action.icon || '';
+              const label = action.label || '';
+              const variant = action.variant || 'secondary';
+              const disabled = action.disabled || false;
+              // Determine if icon is an image URL or text/emoji
+              const isImageUrl = icon && (icon.startsWith('http://') || icon.startsWith('https://') || icon.startsWith('/') || icon.startsWith('./'));
+              let iconHTML = '';
+              if (icon) {
+                  if (isImageUrl) {
+                      iconHTML = `<span class="action-icon action-icon--image"><img src="${icon}" alt="" /></span>`;
+                  }
+                  else {
+                      iconHTML = `<span class="action-icon">${icon}</span>`;
+                  }
+              }
+              return snice.html /*html*/ `
+      <button
+        class="action-button action-button--${variant}"
+        part="action-button"
+        title="${action.title || action.action}"
+        ?disabled=${disabled}
+        @click=${(e) => this.handleActionClick(e, action.action)}
+      >
+        ${snice.unsafeHTML(iconHTML)}
+        ${label ? snice.html /*html*/ `<span class="action-label">${label}</span>` : ''}
+      </button>
+    `;
+          }
+          handleActionClick(e, action) {
+              e.stopPropagation();
+              this.dispatchAction(action);
+          }
+          dispatchAction(action) {
+              return {
+                  action,
+                  rowData: this.rowData,
+                  column: this.column
+              };
+          }
+          constructor() {
+              super(...arguments);
+              this.actions = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _actions_initializers, []));
+              this.column = (__runInitializers(this, _actions_extraInitializers), __runInitializers(this, _column_initializers, null));
+              this.rowData = (__runInitializers(this, _column_extraInitializers), __runInitializers(this, _rowData_initializers, null));
+              this.value = (__runInitializers(this, _rowData_extraInitializers), __runInitializers(this, _value_initializers, ''));
+              this.align = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _align_initializers, 'left'));
+              this.type = (__runInitializers(this, _align_extraInitializers), __runInitializers(this, _type_initializers, 'actions'));
+              __runInitializers(this, _type_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$9 = ":host{color:var(--snice-color-text);display:flex;align-items:center;min-height:2.5rem;height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem}.tags-container{display:inline-flex;flex-wrap:wrap;gap:.25rem;align-items:center}.tag{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:.75rem;font-size:.75rem;font-weight:500;line-height:1.25;white-space:nowrap}.tag--default{background:hsl(0 0% 0% / .08);color:var(--snice-color-text)}.tag--primary{background:hsl(var(--snice-color-blue-500) / .1);color:var(--snice-color-primary)}.tag--success{background:hsl(var(--snice-color-green-500) / .1);color:var(--snice-color-success)}.tag--danger{background:hsl(var(--snice-color-red-500) / .1);color:var(--snice-color-danger)}.tag--warning{background:hsl(var(--snice-color-yellow-500) / .1);color:var(--snice-color-warning)}.tag--info{background:hsl(var(--snice-color-blue-400) / .1);color:var(--snice-color-primary)}:host([align=left]){justify-content:flex-start}:host([align=center]){justify-content:center}:host([align=right]){justify-content:flex-end}@media (max-width:768px){.tag{font-size:.6875rem;padding:.0625rem .375rem}}@media print{.tag{border:1px solid currentColor}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-cell-tag')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _tags_decorators;
+      let _tags_initializers = [];
+      let _tags_extraInitializers = [];
+      let _value_decorators;
+      let _value_initializers = [];
+      let _value_extraInitializers = [];
+      let _variant_decorators;
+      let _variant_initializers = [];
+      let _variant_extraInitializers = [];
+      let _column_decorators;
+      let _column_initializers = [];
+      let _column_extraInitializers = [];
+      let _rowData_decorators;
+      let _rowData_initializers = [];
+      let _rowData_extraInitializers = [];
+      let _align_decorators;
+      let _align_initializers = [];
+      let _align_extraInitializers = [];
+      let _type_decorators;
+      let _type_initializers = [];
+      let _type_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _init_decorators;
+      let _extractTagsFromColumn_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _tags_decorators = [snice.property({ type: Array })];
+              _value_decorators = [snice.property({ type: String })];
+              _variant_decorators = [snice.property({ type: String })];
+              _column_decorators = [snice.property({ type: Object })];
+              _rowData_decorators = [snice.property({ type: Object })];
+              _align_decorators = [snice.property({ type: String })];
+              _type_decorators = [snice.property({ type: String })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _init_decorators = [snice.ready()];
+              _extractTagsFromColumn_decorators = [snice.watch('value', 'column')];
+              __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, _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, _extractTagsFromColumn_decorators, { kind: "method", name: "extractTagsFromColumn", static: false, private: false, access: { has: obj => "extractTagsFromColumn" in obj, get: obj => obj.extractTagsFromColumn }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _tags_decorators, { kind: "field", name: "tags", static: false, private: false, access: { has: obj => "tags" in obj, get: obj => obj.tags, set: (obj, value) => { obj.tags = value; } }, metadata: _metadata }, _tags_initializers, _tags_extraInitializers);
+              __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_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, _column_decorators, { kind: "field", name: "column", static: false, private: false, access: { has: obj => "column" in obj, get: obj => obj.column, set: (obj, value) => { obj.column = value; } }, metadata: _metadata }, _column_initializers, _column_extraInitializers);
+              __esDecorate(null, null, _rowData_decorators, { kind: "field", name: "rowData", static: false, private: false, access: { has: obj => "rowData" in obj, get: obj => obj.rowData, set: (obj, value) => { obj.rowData = value; } }, metadata: _metadata }, _rowData_initializers, _rowData_extraInitializers);
+              __esDecorate(null, null, _align_decorators, { kind: "field", name: "align", static: false, private: false, access: { has: obj => "align" in obj, get: obj => obj.align, set: (obj, value) => { obj.align = value; } }, metadata: _metadata }, _align_initializers, _align_extraInitializers);
+              __esDecorate(null, null, _type_decorators, { kind: "field", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_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 tagList = this.tags.length > 0 ? this.tags : this.parseValue();
+              return snice.html /*html*/ `
+      <div class="cell-content cell-content--tag" part="content">
+        <div class="tags-container">
+          ${tagList.map(tag => this.renderTag(tag))}
+        </div>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$9}`;
+          }
+          init() {
+              this.extractTagsFromColumn();
+          }
+          extractTagsFromColumn() {
+              if (this.column?.tagFormat) {
+                  this.variant = this.column.tagFormat.variant || 'default';
+              }
+          }
+          parseValue() {
+              if (!this.value)
+                  return [];
+              if (Array.isArray(this.value))
+                  return this.value;
+              if (typeof this.value === 'string') {
+                  // Try parsing as JSON array first
+                  try {
+                      const parsed = JSON.parse(this.value);
+                      if (Array.isArray(parsed))
+                          return parsed;
+                  }
+                  catch { }
+                  // Otherwise split by comma
+                  return this.value.split(',').map(t => t.trim()).filter(t => t);
+              }
+              return [String(this.value)];
+          }
+          renderTag(tag) {
+              return snice.html /*html*/ `
+      <span class="tag tag--${this.variant}" part="tag">
+        ${tag}
+      </span>
+    `;
+          }
+          constructor() {
+              super(...arguments);
+              this.tags = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _tags_initializers, []));
+              this.value = (__runInitializers(this, _tags_extraInitializers), __runInitializers(this, _value_initializers, ''));
+              this.variant = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _variant_initializers, 'default'));
+              this.column = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _column_initializers, null));
+              this.rowData = (__runInitializers(this, _column_extraInitializers), __runInitializers(this, _rowData_initializers, null));
+              this.align = (__runInitializers(this, _rowData_extraInitializers), __runInitializers(this, _align_initializers, 'left'));
+              this.type = (__runInitializers(this, _align_extraInitializers), __runInitializers(this, _type_initializers, 'tag'));
+              __runInitializers(this, _type_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$8 = ":host{color:var(--snice-color-text);display:flex;align-items:center;min-height:2.5rem;height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem;display:flex;align-items:center}.cell-image{display:block;object-fit:cover;background-color:hsl(var(--snice-color-gray-100))}.image--small{width:1.5rem;height:1.5rem}.image--medium{width:2rem;height:2rem}.image--large{width:3rem;height:3rem}.image--rounded{border-radius:.25rem}.image--square{border-radius:0}.image--circle{border-radius:50%}.cell-image--placeholder{background:linear-gradient(135deg,hsl(var(--snice-color-gray-200)) 0,hsl(var(--snice-color-gray-300)) 100%);border:1px solid hsl(var(--snice-color-gray-300));position:relative}.cell-image--placeholder::after{content:'📷';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;opacity:.5}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}:host(.loading) .cell-image{opacity:.6;animation:1.5s ease-in-out infinite image-pulse}@keyframes image-pulse{0%,100%{opacity:.6}50%{opacity:.3}}@media (max-width:768px){.image--small{width:1.25rem;height:1.25rem}.image--medium{width:1.75rem;height:1.75rem}.image--large{width:2.5rem;height:2.5rem}}@media (prefers-reduced-motion:reduce){:host(.loading) .cell-image{animation:none}}@media print{.cell-image{max-width:2rem;max-height:2rem}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-cell-image')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _value_decorators;
+      let _value_initializers = [];
+      let _value_extraInitializers = [];
+      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 _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 _column_decorators;
+      let _column_initializers = [];
+      let _column_extraInitializers = [];
+      let _rowData_decorators;
+      let _rowData_initializers = [];
+      let _rowData_extraInitializers = [];
+      let _align_decorators;
+      let _align_initializers = [];
+      let _align_extraInitializers = [];
+      let _type_decorators;
+      let _type_initializers = [];
+      let _type_extraInitializers = [];
+      let _imageError_decorators;
+      let _imageError_initializers = [];
+      let _imageError_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _init_decorators;
+      let _updateImageAttributes_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _value_decorators = [snice.property({ type: String })];
+              _src_decorators = [snice.property({ type: String })];
+              _alt_decorators = [snice.property({ type: String })];
+              _fallback_decorators = [snice.property({ type: String })];
+              _variant_decorators = [snice.property({ type: String })];
+              _size_decorators = [snice.property({ type: String })];
+              _lazy_decorators = [snice.property({ type: Boolean })];
+              _column_decorators = [snice.property({ type: Object })];
+              _rowData_decorators = [snice.property({ type: Object })];
+              _align_decorators = [snice.property({ type: String })];
+              _type_decorators = [snice.property({ type: String })];
+              _imageError_decorators = [snice.property({ type: Boolean })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _init_decorators = [snice.ready()];
+              _updateImageAttributes_decorators = [snice.watch('column')];
+              __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, _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, _updateImageAttributes_decorators, { kind: "method", name: "updateImageAttributes", static: false, private: false, access: { has: obj => "updateImageAttributes" in obj, get: obj => obj.updateImageAttributes }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+              __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, _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, _column_decorators, { kind: "field", name: "column", static: false, private: false, access: { has: obj => "column" in obj, get: obj => obj.column, set: (obj, value) => { obj.column = value; } }, metadata: _metadata }, _column_initializers, _column_extraInitializers);
+              __esDecorate(null, null, _rowData_decorators, { kind: "field", name: "rowData", static: false, private: false, access: { has: obj => "rowData" in obj, get: obj => obj.rowData, set: (obj, value) => { obj.rowData = value; } }, metadata: _metadata }, _rowData_initializers, _rowData_extraInitializers);
+              __esDecorate(null, null, _align_decorators, { kind: "field", name: "align", static: false, private: false, access: { has: obj => "align" in obj, get: obj => obj.align, set: (obj, value) => { obj.align = value; } }, metadata: _metadata }, _align_initializers, _align_extraInitializers);
+              __esDecorate(null, null, _type_decorators, { kind: "field", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_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, _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 imageSrc = this.src || this.value;
+              const imageAlt = this.alt || 'Image';
+              const loadingAttr = this.lazy ? 'lazy' : 'eager';
+              const variantClass = `image--${this.variant}`;
+              const sizeClass = `image--${this.size}`;
+              const classes = `cell-image ${variantClass} ${sizeClass}`;
+              if (this.imageError && this.fallback) {
+                  return snice.html /*html*/ `
+        <div class="cell-content cell-content--image" part="content">
+          <img src="${this.fallback}" alt="${imageAlt}" class="${classes}" />
+        </div>
+      `;
+              }
+              if (imageSrc) {
+                  return snice.html /*html*/ `
+        <div class="cell-content cell-content--image" part="content">
+          <img src="${imageSrc}" alt="${imageAlt}" loading="${loadingAttr}" class="${classes}" @error=${this.handleImageError} />
+        </div>
+      `;
+              }
+              return snice.html /*html*/ `
+      <div class="cell-content cell-content--image" part="content">
+        <div class="${classes} cell-image--placeholder"></div>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$8}`;
+          }
+          init() {
+              this.updateImageAttributes();
+          }
+          updateImageAttributes() {
+              if (this.column?.imageFormat) {
+                  const format = this.column.imageFormat;
+                  this.src = format.src || this.value;
+                  this.alt = format.alt || '';
+                  this.fallback = format.fallback || '';
+                  this.variant = format.variant || 'rounded';
+                  this.size = format.size || 'medium';
+                  this.lazy = format.lazy ?? true;
+              }
+          }
+          handleImageError() {
+              this.imageError = true;
+          }
+          constructor() {
+              super(...arguments);
+              this.value = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, ''));
+              this.src = (__runInitializers(this, _value_extraInitializers), __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.variant = (__runInitializers(this, _fallback_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.column = (__runInitializers(this, _lazy_extraInitializers), __runInitializers(this, _column_initializers, null));
+              this.rowData = (__runInitializers(this, _column_extraInitializers), __runInitializers(this, _rowData_initializers, null));
+              this.align = (__runInitializers(this, _rowData_extraInitializers), __runInitializers(this, _align_initializers, 'center'));
+              this.type = (__runInitializers(this, _align_extraInitializers), __runInitializers(this, _type_initializers, 'image'));
+              this.imageError = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _imageError_initializers, false));
+              __runInitializers(this, _imageError_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$7 = ":host{color:var(--snice-color-text);display:flex;align-items:center;min-height:2.5rem;height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem;display:flex;align-items:center;gap:.375rem}.email-icon{display:inline-flex;align-items:center;font-size:.875rem;opacity:.7;flex-shrink:0}.email-link{color:var(--snice-color-primary);text-decoration:none;transition:color .2s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.email-link:hover{color:var(--snice-color-primary-dark);text-decoration:underline}.email-link:focus{outline:2px solid var(--snice-color-primary);outline-offset:2px;border-radius:2px}.email-link:visited{color:var(--snice-color-secondary)}.email-empty{color:var(--snice-color-text-secondary);font-style:italic}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text);font-size:.75rem;line-height:1rem}.email-icon{font-size:.75rem}}@media print{.email-link{text-decoration:underline}.email-link::after{content:\" (\" attr(href) \")\";font-size:.75rem;color:var(--snice-color-text-secondary)}.email-icon{display:none}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-cell-email')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _value_decorators;
+      let _value_initializers = [];
+      let _value_extraInitializers = [];
+      let _email_decorators;
+      let _email_initializers = [];
+      let _email_extraInitializers = [];
+      let _displayText_decorators;
+      let _displayText_initializers = [];
+      let _displayText_extraInitializers = [];
+      let _showIcon_decorators;
+      let _showIcon_initializers = [];
+      let _showIcon_extraInitializers = [];
+      let _column_decorators;
+      let _column_initializers = [];
+      let _column_extraInitializers = [];
+      let _rowData_decorators;
+      let _rowData_initializers = [];
+      let _rowData_extraInitializers = [];
+      let _align_decorators;
+      let _align_initializers = [];
+      let _align_extraInitializers = [];
+      let _type_decorators;
+      let _type_initializers = [];
+      let _type_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _init_decorators;
+      let _updateEmailAttributes_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _value_decorators = [snice.property({ type: String })];
+              _email_decorators = [snice.property({ type: String })];
+              _displayText_decorators = [snice.property({ type: String })];
+              _showIcon_decorators = [snice.property({ type: Boolean })];
+              _column_decorators = [snice.property({ type: Object })];
+              _rowData_decorators = [snice.property({ type: Object })];
+              _align_decorators = [snice.property({ type: String })];
+              _type_decorators = [snice.property({ type: String })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _init_decorators = [snice.ready()];
+              _updateEmailAttributes_decorators = [snice.watch('value', 'column')];
+              __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, _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, _updateEmailAttributes_decorators, { kind: "method", name: "updateEmailAttributes", static: false, private: false, access: { has: obj => "updateEmailAttributes" in obj, get: obj => obj.updateEmailAttributes }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+              __esDecorate(null, null, _email_decorators, { kind: "field", name: "email", static: false, private: false, access: { has: obj => "email" in obj, get: obj => obj.email, set: (obj, value) => { obj.email = value; } }, metadata: _metadata }, _email_initializers, _email_extraInitializers);
+              __esDecorate(null, null, _displayText_decorators, { kind: "field", name: "displayText", static: false, private: false, access: { has: obj => "displayText" in obj, get: obj => obj.displayText, set: (obj, value) => { obj.displayText = value; } }, metadata: _metadata }, _displayText_initializers, _displayText_extraInitializers);
+              __esDecorate(null, null, _showIcon_decorators, { kind: "field", name: "showIcon", static: false, private: false, access: { has: obj => "showIcon" in obj, get: obj => obj.showIcon, set: (obj, value) => { obj.showIcon = value; } }, metadata: _metadata }, _showIcon_initializers, _showIcon_extraInitializers);
+              __esDecorate(null, null, _column_decorators, { kind: "field", name: "column", static: false, private: false, access: { has: obj => "column" in obj, get: obj => obj.column, set: (obj, value) => { obj.column = value; } }, metadata: _metadata }, _column_initializers, _column_extraInitializers);
+              __esDecorate(null, null, _rowData_decorators, { kind: "field", name: "rowData", static: false, private: false, access: { has: obj => "rowData" in obj, get: obj => obj.rowData, set: (obj, value) => { obj.rowData = value; } }, metadata: _metadata }, _rowData_initializers, _rowData_extraInitializers);
+              __esDecorate(null, null, _align_decorators, { kind: "field", name: "align", static: false, private: false, access: { has: obj => "align" in obj, get: obj => obj.align, set: (obj, value) => { obj.align = value; } }, metadata: _metadata }, _align_initializers, _align_extraInitializers);
+              __esDecorate(null, null, _type_decorators, { kind: "field", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_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 emailAddress = this.email || this.value;
+              const displayName = this.displayText || emailAddress;
+              const iconHTML = this.showIcon ? '<span class="email-icon">✉</span>' : '';
+              if (!emailAddress) {
+                  return snice.html /*html*/ `
+        <div class="cell-content cell-content--email" part="content">
+          <span class="email-empty"></span>
+        </div>
+      `;
+              }
+              return snice.html /*html*/ `
+      <div class="cell-content cell-content--email" part="content">
+        ${snice.unsafeHTML(iconHTML)}
+        <a href="mailto:${emailAddress}" class="email-link" part="link">
+          ${displayName}
+        </a>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$7}`;
+          }
+          init() {
+              this.updateEmailAttributes();
+          }
+          updateEmailAttributes() {
+              if (this.column?.emailFormat) {
+                  const format = this.column.emailFormat;
+                  this.email = format.email || this.value;
+                  this.displayText = format.displayText || '';
+                  this.showIcon = format.showIcon ?? true;
+              }
+          }
+          constructor() {
+              super(...arguments);
+              this.value = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, ''));
+              this.email = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _email_initializers, ''));
+              this.displayText = (__runInitializers(this, _email_extraInitializers), __runInitializers(this, _displayText_initializers, ''));
+              this.showIcon = (__runInitializers(this, _displayText_extraInitializers), __runInitializers(this, _showIcon_initializers, true));
+              this.column = (__runInitializers(this, _showIcon_extraInitializers), __runInitializers(this, _column_initializers, null));
+              this.rowData = (__runInitializers(this, _column_extraInitializers), __runInitializers(this, _rowData_initializers, null));
+              this.align = (__runInitializers(this, _rowData_extraInitializers), __runInitializers(this, _align_initializers, 'left'));
+              this.type = (__runInitializers(this, _align_extraInitializers), __runInitializers(this, _type_initializers, 'email'));
+              __runInitializers(this, _type_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$6 = ":host{color:var(--snice-color-text);display:flex;align-items:center;min-height:2.5rem;height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem;display:flex;align-items:center;gap:.375rem}.phone-icon{display:inline-flex;align-items:center;font-size:.875rem;opacity:.7;flex-shrink:0}.phone-link{color:var(--snice-color-primary);text-decoration:none;transition:color .2s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.phone-link:hover{color:var(--snice-color-primary-dark);text-decoration:underline}.phone-link:focus{outline:2px solid var(--snice-color-primary);outline-offset:2px;border-radius:2px}.phone-link:visited{color:var(--snice-color-secondary)}.phone-empty{color:var(--snice-color-text-secondary);font-style:italic}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text);font-size:.75rem;line-height:1rem}.phone-icon{font-size:.75rem}}@media print{.phone-link{text-decoration:underline}.phone-link::after{content:\" (\" attr(href) \")\";font-size:.75rem;color:var(--snice-color-text-secondary)}.phone-icon{display:none}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-cell-phone')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _value_decorators;
+      let _value_initializers = [];
+      let _value_extraInitializers = [];
+      let _phone_decorators;
+      let _phone_initializers = [];
+      let _phone_extraInitializers = [];
+      let _displayText_decorators;
+      let _displayText_initializers = [];
+      let _displayText_extraInitializers = [];
+      let _showIcon_decorators;
+      let _showIcon_initializers = [];
+      let _showIcon_extraInitializers = [];
+      let _format_decorators;
+      let _format_initializers = [];
+      let _format_extraInitializers = [];
+      let _country_decorators;
+      let _country_initializers = [];
+      let _country_extraInitializers = [];
+      let _column_decorators;
+      let _column_initializers = [];
+      let _column_extraInitializers = [];
+      let _rowData_decorators;
+      let _rowData_initializers = [];
+      let _rowData_extraInitializers = [];
+      let _align_decorators;
+      let _align_initializers = [];
+      let _align_extraInitializers = [];
+      let _type_decorators;
+      let _type_initializers = [];
+      let _type_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _init_decorators;
+      let _updatePhoneAttributes_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _value_decorators = [snice.property({ type: String })];
+              _phone_decorators = [snice.property({ type: String })];
+              _displayText_decorators = [snice.property({ type: String })];
+              _showIcon_decorators = [snice.property({ type: Boolean })];
+              _format_decorators = [snice.property({ type: Boolean })];
+              _country_decorators = [snice.property({ type: String })];
+              _column_decorators = [snice.property({ type: Object })];
+              _rowData_decorators = [snice.property({ type: Object })];
+              _align_decorators = [snice.property({ type: String })];
+              _type_decorators = [snice.property({ type: String })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _init_decorators = [snice.ready()];
+              _updatePhoneAttributes_decorators = [snice.watch('value', 'column')];
+              __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, _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, _updatePhoneAttributes_decorators, { kind: "method", name: "updatePhoneAttributes", static: false, private: false, access: { has: obj => "updatePhoneAttributes" in obj, get: obj => obj.updatePhoneAttributes }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+              __esDecorate(null, null, _phone_decorators, { kind: "field", name: "phone", static: false, private: false, access: { has: obj => "phone" in obj, get: obj => obj.phone, set: (obj, value) => { obj.phone = value; } }, metadata: _metadata }, _phone_initializers, _phone_extraInitializers);
+              __esDecorate(null, null, _displayText_decorators, { kind: "field", name: "displayText", static: false, private: false, access: { has: obj => "displayText" in obj, get: obj => obj.displayText, set: (obj, value) => { obj.displayText = value; } }, metadata: _metadata }, _displayText_initializers, _displayText_extraInitializers);
+              __esDecorate(null, null, _showIcon_decorators, { kind: "field", name: "showIcon", static: false, private: false, access: { has: obj => "showIcon" in obj, get: obj => obj.showIcon, set: (obj, value) => { obj.showIcon = value; } }, metadata: _metadata }, _showIcon_initializers, _showIcon_extraInitializers);
+              __esDecorate(null, null, _format_decorators, { kind: "field", name: "format", static: false, private: false, access: { has: obj => "format" in obj, get: obj => obj.format, set: (obj, value) => { obj.format = value; } }, metadata: _metadata }, _format_initializers, _format_extraInitializers);
+              __esDecorate(null, null, _country_decorators, { kind: "field", name: "country", static: false, private: false, access: { has: obj => "country" in obj, get: obj => obj.country, set: (obj, value) => { obj.country = value; } }, metadata: _metadata }, _country_initializers, _country_extraInitializers);
+              __esDecorate(null, null, _column_decorators, { kind: "field", name: "column", static: false, private: false, access: { has: obj => "column" in obj, get: obj => obj.column, set: (obj, value) => { obj.column = value; } }, metadata: _metadata }, _column_initializers, _column_extraInitializers);
+              __esDecorate(null, null, _rowData_decorators, { kind: "field", name: "rowData", static: false, private: false, access: { has: obj => "rowData" in obj, get: obj => obj.rowData, set: (obj, value) => { obj.rowData = value; } }, metadata: _metadata }, _rowData_initializers, _rowData_extraInitializers);
+              __esDecorate(null, null, _align_decorators, { kind: "field", name: "align", static: false, private: false, access: { has: obj => "align" in obj, get: obj => obj.align, set: (obj, value) => { obj.align = value; } }, metadata: _metadata }, _align_initializers, _align_extraInitializers);
+              __esDecorate(null, null, _type_decorators, { kind: "field", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_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 phoneNumber = this.phone || this.value;
+              const displayText = this.displayText || (this.format ? this.formatPhoneNumber(phoneNumber) : phoneNumber);
+              const iconHTML = this.showIcon ? '<span class="phone-icon">📞</span>' : '';
+              if (!phoneNumber) {
+                  return snice.html /*html*/ `
+        <div class="cell-content cell-content--phone" part="content">
+          <span class="phone-empty"></span>
+        </div>
+      `;
+              }
+              return snice.html /*html*/ `
+      <div class="cell-content cell-content--phone" part="content">
+        ${snice.unsafeHTML(iconHTML)}
+        <a href="tel:${phoneNumber}" class="phone-link" part="link">
+          ${displayText}
+        </a>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$6}`;
+          }
+          init() {
+              this.updatePhoneAttributes();
+          }
+          updatePhoneAttributes() {
+              if (this.column?.phoneFormat) {
+                  const format = this.column.phoneFormat;
+                  this.phone = format.phone || this.value;
+                  this.displayText = format.displayText || '';
+                  this.showIcon = format.showIcon ?? true;
+                  this.format = format.format ?? true;
+                  this.country = format.country || 'US';
+              }
+          }
+          formatPhoneNumber(phone) {
+              // Remove all non-numeric characters
+              const cleaned = phone.replace(/\D/g, '');
+              // Format US phone numbers (10 digits)
+              if (this.country === 'US' && cleaned.length === 10) {
+                  return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
+              }
+              // Format US phone numbers with country code (11 digits starting with 1)
+              if (this.country === 'US' && cleaned.length === 11 && cleaned[0] === '1') {
+                  return `+1 (${cleaned.slice(1, 4)}) ${cleaned.slice(4, 7)}-${cleaned.slice(7)}`;
+              }
+              // For other formats, just return the original value
+              return phone;
+          }
+          constructor() {
+              super(...arguments);
+              this.value = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, ''));
+              this.phone = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _phone_initializers, ''));
+              this.displayText = (__runInitializers(this, _phone_extraInitializers), __runInitializers(this, _displayText_initializers, ''));
+              this.showIcon = (__runInitializers(this, _displayText_extraInitializers), __runInitializers(this, _showIcon_initializers, true));
+              this.format = (__runInitializers(this, _showIcon_extraInitializers), __runInitializers(this, _format_initializers, true));
+              this.country = (__runInitializers(this, _format_extraInitializers), __runInitializers(this, _country_initializers, 'US'));
+              this.column = (__runInitializers(this, _country_extraInitializers), __runInitializers(this, _column_initializers, null));
+              this.rowData = (__runInitializers(this, _column_extraInitializers), __runInitializers(this, _rowData_initializers, null));
+              this.align = (__runInitializers(this, _rowData_extraInitializers), __runInitializers(this, _align_initializers, 'left'));
+              this.type = (__runInitializers(this, _align_extraInitializers), __runInitializers(this, _type_initializers, 'phone'));
+              __runInitializers(this, _type_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$5 = ":host{color:var(--snice-color-text);display:flex;align-items:center;min-height:2.5rem;height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem;display:flex;align-items:center;gap:.5rem}.status-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0;position:relative}.status-dot--online{background-color:var(--snice-color-success);box-shadow:0 0 0 2px hsl(var(--snice-color-green-500) / .2)}.status-dot--offline{background-color:hsl(var(--snice-color-gray-400));box-shadow:0 0 0 2px hsl(var(--snice-color-gray-500) / .2)}.status-dot--busy{background-color:var(--snice-color-danger);box-shadow:0 0 0 2px hsl(var(--snice-color-red-500) / .2)}.status-dot--away{background-color:var(--snice-color-warning);box-shadow:0 0 0 2px hsl(var(--snice-color-yellow-500) / .2)}.status-dot--custom{background-color:var(--snice-color-primary);box-shadow:0 0 0 2px hsl(var(--snice-color-blue-500) / .2)}.status-dot--online::after{content:'';position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border-radius:50%;border:2px solid var(--snice-color-success);animation:2s ease-in-out infinite status-pulse;opacity:0}@keyframes status-pulse{0%{transform:scale(1);opacity:1}100%{transform:scale(1.5);opacity:0}}.status-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-label--online{color:var(--snice-color-success)}.status-label--offline{color:var(--snice-color-text-secondary)}.status-label--busy{color:var(--snice-color-danger)}.status-label--away{color:var(--snice-color-warning)}.status-label--custom{color:var(--snice-color-text)}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text);font-size:.75rem;line-height:1rem}.status-dot{width:.375rem;height:.375rem}}@media (prefers-reduced-motion:reduce){.status-dot--online::after{animation:none}}@media print{.status-dot{border:1px solid var(--snice-color-text)}.status-dot--online{background-color:var(--snice-color-background);border-color:var(--snice-color-success)}.status-dot--offline{background-color:var(--snice-color-background);border-color:var(--snice-color-neutral)}.status-dot--busy{background-color:var(--snice-color-background);border-color:var(--snice-color-danger)}.status-dot--away{background-color:var(--snice-color-background);border-color:var(--snice-color-warning)}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-cell-status')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _value_decorators;
+      let _value_initializers = [];
+      let _value_extraInitializers = [];
+      let _status_decorators;
+      let _status_initializers = [];
+      let _status_extraInitializers = [];
+      let _label_decorators;
+      let _label_initializers = [];
+      let _label_extraInitializers = [];
+      let _showDot_decorators;
+      let _showDot_initializers = [];
+      let _showDot_extraInitializers = [];
+      let _variant_decorators;
+      let _variant_initializers = [];
+      let _variant_extraInitializers = [];
+      let _column_decorators;
+      let _column_initializers = [];
+      let _column_extraInitializers = [];
+      let _rowData_decorators;
+      let _rowData_initializers = [];
+      let _rowData_extraInitializers = [];
+      let _align_decorators;
+      let _align_initializers = [];
+      let _align_extraInitializers = [];
+      let _type_decorators;
+      let _type_initializers = [];
+      let _type_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _init_decorators;
+      let _updateStatusAttributes_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _value_decorators = [snice.property({ type: String })];
+              _status_decorators = [snice.property({ type: String })];
+              _label_decorators = [snice.property({ type: String })];
+              _showDot_decorators = [snice.property({ type: Boolean })];
+              _variant_decorators = [snice.property({ type: String })];
+              _column_decorators = [snice.property({ type: Object })];
+              _rowData_decorators = [snice.property({ type: Object })];
+              _align_decorators = [snice.property({ type: String })];
+              _type_decorators = [snice.property({ type: String })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _init_decorators = [snice.ready()];
+              _updateStatusAttributes_decorators = [snice.watch('value', 'column')];
+              __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, _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, _updateStatusAttributes_decorators, { kind: "method", name: "updateStatusAttributes", static: false, private: false, access: { has: obj => "updateStatusAttributes" in obj, get: obj => obj.updateStatusAttributes }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+              __esDecorate(null, null, _status_decorators, { kind: "field", name: "status", static: false, private: false, access: { has: obj => "status" in obj, get: obj => obj.status, set: (obj, value) => { obj.status = value; } }, metadata: _metadata }, _status_initializers, _status_extraInitializers);
+              __esDecorate(null, null, _label_decorators, { kind: "field", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+              __esDecorate(null, null, _showDot_decorators, { kind: "field", name: "showDot", static: false, private: false, access: { has: obj => "showDot" in obj, get: obj => obj.showDot, set: (obj, value) => { obj.showDot = value; } }, metadata: _metadata }, _showDot_initializers, _showDot_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, _column_decorators, { kind: "field", name: "column", static: false, private: false, access: { has: obj => "column" in obj, get: obj => obj.column, set: (obj, value) => { obj.column = value; } }, metadata: _metadata }, _column_initializers, _column_extraInitializers);
+              __esDecorate(null, null, _rowData_decorators, { kind: "field", name: "rowData", static: false, private: false, access: { has: obj => "rowData" in obj, get: obj => obj.rowData, set: (obj, value) => { obj.rowData = value; } }, metadata: _metadata }, _rowData_initializers, _rowData_extraInitializers);
+              __esDecorate(null, null, _align_decorators, { kind: "field", name: "align", static: false, private: false, access: { has: obj => "align" in obj, get: obj => obj.align, set: (obj, value) => { obj.align = value; } }, metadata: _metadata }, _align_initializers, _align_extraInitializers);
+              __esDecorate(null, null, _type_decorators, { kind: "field", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_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 statusValue = this.status || this.value;
+              const statusLabel = this.label || statusValue;
+              const statusVariant = this.getStatusVariant(statusValue);
+              const dotHTML = this.showDot ? `<span class="status-dot status-dot--${statusVariant}"></span>` : '';
+              return snice.html /*html*/ `
+      <div class="cell-content cell-content--status" part="content">
+        ${snice.unsafeHTML(dotHTML)}
+        <span class="status-label status-label--${statusVariant}">${statusLabel}</span>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$5}`;
+          }
+          init() {
+              this.updateStatusAttributes();
+          }
+          updateStatusAttributes() {
+              if (this.column?.statusFormat) {
+                  const format = this.column.statusFormat;
+                  this.status = format.status || this.value;
+                  this.label = format.label || this.value;
+                  this.showDot = format.showDot ?? true;
+                  this.variant = format.variant || 'custom';
+              }
+          }
+          getStatusVariant(status) {
+              if (this.variant !== 'custom') {
+                  return this.variant;
+              }
+              // Auto-detect common status values
+              const lowerStatus = status.toLowerCase();
+              if (lowerStatus === 'online' || lowerStatus === 'active' || lowerStatus === 'available') {
+                  return 'online';
+              }
+              if (lowerStatus === 'offline' || lowerStatus === 'inactive' || lowerStatus === 'unavailable') {
+                  return 'offline';
+              }
+              if (lowerStatus === 'busy' || lowerStatus === 'dnd' || lowerStatus === 'do not disturb') {
+                  return 'busy';
+              }
+              if (lowerStatus === 'away' || lowerStatus === 'idle') {
+                  return 'away';
+              }
+              return 'custom';
+          }
+          constructor() {
+              super(...arguments);
+              this.value = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, ''));
+              this.status = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _status_initializers, ''));
+              this.label = (__runInitializers(this, _status_extraInitializers), __runInitializers(this, _label_initializers, ''));
+              this.showDot = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _showDot_initializers, true));
+              this.variant = (__runInitializers(this, _showDot_extraInitializers), __runInitializers(this, _variant_initializers, 'custom'));
+              this.column = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _column_initializers, null));
+              this.rowData = (__runInitializers(this, _column_extraInitializers), __runInitializers(this, _rowData_initializers, null));
+              this.align = (__runInitializers(this, _rowData_extraInitializers), __runInitializers(this, _align_initializers, 'left'));
+              this.type = (__runInitializers(this, _align_extraInitializers), __runInitializers(this, _type_initializers, 'status'));
+              __runInitializers(this, _type_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$4 = ":host{color:var(--snice-color-text);display:flex;align-items:center;min-height:2.5rem;height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem;display:flex;align-items:center;gap:.5rem}.color-swatch{border:1px solid var(--snice-color-border);border-radius:.25rem;flex-shrink:0;box-shadow:var(--snice-shadow-xs)}.color-swatch--small{width:1rem;height:1rem}.color-swatch--medium{width:1.5rem;height:1.5rem}.color-swatch--large{width:2rem;height:2rem}.color-text{font-family:monospace;font-size:.875rem;color:var(--snice-color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text);font-size:.75rem;line-height:1rem}.color-swatch--small{width:.875rem;height:.875rem}.color-swatch--medium{width:1.25rem;height:1.25rem}.color-swatch--large{width:1.75rem;height:1.75rem}.color-text{font-size:.75rem}}@media print{.color-swatch{border:2px solid var(--snice-color-text)}.color-text{font-size:.75rem}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-cell-color')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _value_decorators;
+      let _value_initializers = [];
+      let _value_extraInitializers = [];
+      let _color_decorators;
+      let _color_initializers = [];
+      let _color_extraInitializers = [];
+      let _showSwatch_decorators;
+      let _showSwatch_initializers = [];
+      let _showSwatch_extraInitializers = [];
+      let _showHex_decorators;
+      let _showHex_initializers = [];
+      let _showHex_extraInitializers = [];
+      let _showRgb_decorators;
+      let _showRgb_initializers = [];
+      let _showRgb_extraInitializers = [];
+      let _swatchSize_decorators;
+      let _swatchSize_initializers = [];
+      let _swatchSize_extraInitializers = [];
+      let _column_decorators;
+      let _column_initializers = [];
+      let _column_extraInitializers = [];
+      let _rowData_decorators;
+      let _rowData_initializers = [];
+      let _rowData_extraInitializers = [];
+      let _align_decorators;
+      let _align_initializers = [];
+      let _align_extraInitializers = [];
+      let _type_decorators;
+      let _type_initializers = [];
+      let _type_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _init_decorators;
+      let _updateColorAttributes_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _value_decorators = [snice.property({ type: String })];
+              _color_decorators = [snice.property({ type: String })];
+              _showSwatch_decorators = [snice.property({ type: Boolean })];
+              _showHex_decorators = [snice.property({ type: Boolean })];
+              _showRgb_decorators = [snice.property({ type: Boolean })];
+              _swatchSize_decorators = [snice.property({ type: String })];
+              _column_decorators = [snice.property({ type: Object })];
+              _rowData_decorators = [snice.property({ type: Object })];
+              _align_decorators = [snice.property({ type: String })];
+              _type_decorators = [snice.property({ type: String })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _init_decorators = [snice.ready()];
+              _updateColorAttributes_decorators = [snice.watch('value', 'column')];
+              __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, _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, _updateColorAttributes_decorators, { kind: "method", name: "updateColorAttributes", static: false, private: false, access: { has: obj => "updateColorAttributes" in obj, get: obj => obj.updateColorAttributes }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+              __esDecorate(null, null, _color_decorators, { kind: "field", name: "color", static: false, private: false, access: { has: obj => "color" in obj, get: obj => obj.color, set: (obj, value) => { obj.color = value; } }, metadata: _metadata }, _color_initializers, _color_extraInitializers);
+              __esDecorate(null, null, _showSwatch_decorators, { kind: "field", name: "showSwatch", static: false, private: false, access: { has: obj => "showSwatch" in obj, get: obj => obj.showSwatch, set: (obj, value) => { obj.showSwatch = value; } }, metadata: _metadata }, _showSwatch_initializers, _showSwatch_extraInitializers);
+              __esDecorate(null, null, _showHex_decorators, { kind: "field", name: "showHex", static: false, private: false, access: { has: obj => "showHex" in obj, get: obj => obj.showHex, set: (obj, value) => { obj.showHex = value; } }, metadata: _metadata }, _showHex_initializers, _showHex_extraInitializers);
+              __esDecorate(null, null, _showRgb_decorators, { kind: "field", name: "showRgb", static: false, private: false, access: { has: obj => "showRgb" in obj, get: obj => obj.showRgb, set: (obj, value) => { obj.showRgb = value; } }, metadata: _metadata }, _showRgb_initializers, _showRgb_extraInitializers);
+              __esDecorate(null, null, _swatchSize_decorators, { kind: "field", name: "swatchSize", static: false, private: false, access: { has: obj => "swatchSize" in obj, get: obj => obj.swatchSize, set: (obj, value) => { obj.swatchSize = value; } }, metadata: _metadata }, _swatchSize_initializers, _swatchSize_extraInitializers);
+              __esDecorate(null, null, _column_decorators, { kind: "field", name: "column", static: false, private: false, access: { has: obj => "column" in obj, get: obj => obj.column, set: (obj, value) => { obj.column = value; } }, metadata: _metadata }, _column_initializers, _column_extraInitializers);
+              __esDecorate(null, null, _rowData_decorators, { kind: "field", name: "rowData", static: false, private: false, access: { has: obj => "rowData" in obj, get: obj => obj.rowData, set: (obj, value) => { obj.rowData = value; } }, metadata: _metadata }, _rowData_initializers, _rowData_extraInitializers);
+              __esDecorate(null, null, _align_decorators, { kind: "field", name: "align", static: false, private: false, access: { has: obj => "align" in obj, get: obj => obj.align, set: (obj, value) => { obj.align = value; } }, metadata: _metadata }, _align_initializers, _align_extraInitializers);
+              __esDecorate(null, null, _type_decorators, { kind: "field", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_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 colorValue = this.color || this.value;
+              const swatchHTML = this.showSwatch
+                  ? `<span class="color-swatch color-swatch--${this.swatchSize}" style="background-color: ${colorValue};"></span>`
+                  : '';
+              let textDisplay = '';
+              if (this.showHex) {
+                  textDisplay = colorValue;
+              }
+              if (this.showRgb && colorValue.startsWith('#')) {
+                  const rgb = this.hexToRgb(colorValue);
+                  textDisplay = rgb ? `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})` : colorValue;
+              }
+              return snice.html /*html*/ `
+      <div class="cell-content cell-content--color" part="content">
+        ${snice.unsafeHTML(swatchHTML)}
+        ${textDisplay ? snice.html `<span class="color-text">${textDisplay}</span>` : ''}
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$4}`;
+          }
+          init() {
+              this.updateColorAttributes();
+          }
+          updateColorAttributes() {
+              if (this.column?.colorFormat) {
+                  const format = this.column.colorFormat;
+                  this.color = format.color || this.value;
+                  this.showSwatch = format.showSwatch ?? true;
+                  this.showHex = format.showHex ?? true;
+                  this.showRgb = format.showRgb ?? false;
+                  this.swatchSize = format.swatchSize || 'medium';
+              }
+          }
+          hexToRgb(hex) {
+              const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+              return result
+                  ? {
+                      r: parseInt(result[1], 16),
+                      g: parseInt(result[2], 16),
+                      b: parseInt(result[3], 16),
+                  }
+                  : null;
+          }
+          constructor() {
+              super(...arguments);
+              this.value = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, ''));
+              this.color = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _color_initializers, ''));
+              this.showSwatch = (__runInitializers(this, _color_extraInitializers), __runInitializers(this, _showSwatch_initializers, true));
+              this.showHex = (__runInitializers(this, _showSwatch_extraInitializers), __runInitializers(this, _showHex_initializers, true));
+              this.showRgb = (__runInitializers(this, _showHex_extraInitializers), __runInitializers(this, _showRgb_initializers, false));
+              this.swatchSize = (__runInitializers(this, _showRgb_extraInitializers), __runInitializers(this, _swatchSize_initializers, 'medium'));
+              this.column = (__runInitializers(this, _swatchSize_extraInitializers), __runInitializers(this, _column_initializers, null));
+              this.rowData = (__runInitializers(this, _column_extraInitializers), __runInitializers(this, _rowData_initializers, null));
+              this.align = (__runInitializers(this, _rowData_extraInitializers), __runInitializers(this, _align_initializers, 'left'));
+              this.type = (__runInitializers(this, _align_extraInitializers), __runInitializers(this, _type_initializers, 'color'));
+              __runInitializers(this, _type_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$3 = ":host{color:var(--snice-color-text);display:flex;align-items:center;min-height:2.5rem;height:auto;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem;display:flex;align-items:flex-start;gap:.5rem;padding:.25rem 0}.json-toggle{background:0 0;border:none;color:var(--snice-color-text-secondary);cursor:pointer;padding:.125rem .25rem;font-size:.75rem;line-height:1;border-radius:.25rem;transition:background-color .2s;flex-shrink:0}.json-toggle:hover{background-color:var(--snice-color-background-hover)}.json-toggle:focus{outline:2px solid var(--snice-color-primary);outline-offset:2px}.json-viewer{font-family:'Courier New',Consolas,monospace;font-size:.8125rem;overflow:hidden;flex:1}.json-viewer--collapsed{white-space:nowrap;text-overflow:ellipsis}.json-viewer--expanded{white-space:pre-wrap;word-break:break-word}.json-preview{color:var(--snice-color-text-secondary);font-style:italic}.json-object{padding-left:1rem}.json-line{margin:.125rem 0}.json-key{color:var(--snice-color-primary);font-weight:500;margin-right:.25rem}.json-string{color:var(--snice-color-success)}.json-number{color:var(--snice-color-info)}.json-boolean{color:var(--snice-color-warning)}.json-empty,.json-null,.json-undefined{color:var(--snice-color-text-secondary);font-style:italic}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text);font-size:.75rem;line-height:1rem}.json-viewer{font-size:.75rem}.json-toggle{font-size:.625rem}}@media print{.json-toggle{display:none}.json-viewer--collapsed{white-space:normal}.json-viewer{font-size:.625rem}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-cell-json')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _value_decorators;
+      let _value_initializers = [];
+      let _value_extraInitializers = [];
+      let _collapsed_decorators;
+      let _collapsed_initializers = [];
+      let _collapsed_extraInitializers = [];
+      let _maxDepth_decorators;
+      let _maxDepth_initializers = [];
+      let _maxDepth_extraInitializers = [];
+      let _showToggle_decorators;
+      let _showToggle_initializers = [];
+      let _showToggle_extraInitializers = [];
+      let _column_decorators;
+      let _column_initializers = [];
+      let _column_extraInitializers = [];
+      let _rowData_decorators;
+      let _rowData_initializers = [];
+      let _rowData_extraInitializers = [];
+      let _align_decorators;
+      let _align_initializers = [];
+      let _align_extraInitializers = [];
+      let _type_decorators;
+      let _type_initializers = [];
+      let _type_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _init_decorators;
+      let _updateJsonAttributes_decorators;
+      let _handleToggle_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _value_decorators = [snice.property({ type: String })];
+              _collapsed_decorators = [snice.property({ type: Boolean })];
+              _maxDepth_decorators = [snice.property({ type: Number })];
+              _showToggle_decorators = [snice.property({ type: Boolean })];
+              _column_decorators = [snice.property({ type: Object })];
+              _rowData_decorators = [snice.property({ type: Object })];
+              _align_decorators = [snice.property({ type: String })];
+              _type_decorators = [snice.property({ type: String })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _init_decorators = [snice.ready()];
+              _updateJsonAttributes_decorators = [snice.watch('value', 'column')];
+              _handleToggle_decorators = [snice.on('click', '.json-toggle')];
+              __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, _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, _updateJsonAttributes_decorators, { kind: "method", name: "updateJsonAttributes", static: false, private: false, access: { has: obj => "updateJsonAttributes" in obj, get: obj => obj.updateJsonAttributes }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _handleToggle_decorators, { kind: "method", name: "handleToggle", static: false, private: false, access: { has: obj => "handleToggle" in obj, get: obj => obj.handleToggle }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_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, _maxDepth_decorators, { kind: "field", name: "maxDepth", static: false, private: false, access: { has: obj => "maxDepth" in obj, get: obj => obj.maxDepth, set: (obj, value) => { obj.maxDepth = value; } }, metadata: _metadata }, _maxDepth_initializers, _maxDepth_extraInitializers);
+              __esDecorate(null, null, _showToggle_decorators, { kind: "field", name: "showToggle", static: false, private: false, access: { has: obj => "showToggle" in obj, get: obj => obj.showToggle, set: (obj, value) => { obj.showToggle = value; } }, metadata: _metadata }, _showToggle_initializers, _showToggle_extraInitializers);
+              __esDecorate(null, null, _column_decorators, { kind: "field", name: "column", static: false, private: false, access: { has: obj => "column" in obj, get: obj => obj.column, set: (obj, value) => { obj.column = value; } }, metadata: _metadata }, _column_initializers, _column_extraInitializers);
+              __esDecorate(null, null, _rowData_decorators, { kind: "field", name: "rowData", static: false, private: false, access: { has: obj => "rowData" in obj, get: obj => obj.rowData, set: (obj, value) => { obj.rowData = value; } }, metadata: _metadata }, _rowData_initializers, _rowData_extraInitializers);
+              __esDecorate(null, null, _align_decorators, { kind: "field", name: "align", static: false, private: false, access: { has: obj => "align" in obj, get: obj => obj.align, set: (obj, value) => { obj.align = value; } }, metadata: _metadata }, _align_initializers, _align_extraInitializers);
+              __esDecorate(null, null, _type_decorators, { kind: "field", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_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 jsonValue = typeof this.value === 'string' ? this.tryParseJson(this.value) : this.value;
+              if (jsonValue === null || jsonValue === undefined) {
+                  return snice.html /*html*/ `
+        <div class="cell-content cell-content--json" part="content">
+          <span class="json-empty">null</span>
+        </div>
+      `;
+              }
+              const toggleHTML = this.showToggle
+                  ? `<button class="json-toggle" part="toggle" aria-label="${this.collapsed ? 'Expand' : 'Collapse'}">${this.collapsed ? '▶' : '▼'}</button>`
+                  : '';
+              const jsonHTML = this.collapsed
+                  ? this.renderCollapsed(jsonValue)
+                  : this.renderExpanded(jsonValue);
+              return snice.html /*html*/ `
+      <div class="cell-content cell-content--json" part="content">
+        ${snice.unsafeHTML(toggleHTML)}
+        <div class="json-viewer ${this.collapsed ? 'json-viewer--collapsed' : 'json-viewer--expanded'}">
+          ${snice.unsafeHTML(jsonHTML)}
+        </div>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$3}`;
+          }
+          init() {
+              this.updateJsonAttributes();
+          }
+          updateJsonAttributes() {
+              if (this.column?.jsonFormat) {
+                  const format = this.column.jsonFormat;
+                  this.collapsed = format.collapsed ?? true;
+                  this.maxDepth = format.maxDepth ?? 3;
+                  this.showToggle = format.showToggle ?? true;
+              }
+          }
+          handleToggle() {
+              this.collapsed = !this.collapsed;
+          }
+          tryParseJson(str) {
+              try {
+                  return JSON.parse(str);
+              }
+              catch {
+                  return str;
+              }
+          }
+          renderCollapsed(json) {
+              if (typeof json === 'object' && json !== null) {
+                  if (Array.isArray(json)) {
+                      return `<span class="json-preview">[${json.length} items]</span>`;
+                  }
+                  const keys = Object.keys(json);
+                  return `<span class="json-preview">{${keys.length} keys}</span>`;
+              }
+              return this.renderValue(json);
+          }
+          renderExpanded(json, depth = 0) {
+              if (depth >= this.maxDepth) {
+                  return this.renderCollapsed(json);
+              }
+              if (typeof json === 'object' && json !== null) {
+                  if (Array.isArray(json)) {
+                      const items = json.map((item, i) => {
+                          const value = this.renderExpanded(item, depth + 1);
+                          return `<div class="json-line"><span class="json-key">${i}:</span> ${value}</div>`;
+                      }).join('');
+                      return `<div class="json-object">[${items}]</div>`;
+                  }
+                  const entries = Object.entries(json).map(([key, value]) => {
+                      const renderedValue = this.renderExpanded(value, depth + 1);
+                      return `<div class="json-line"><span class="json-key">${key}:</span> ${renderedValue}</div>`;
+                  }).join('');
+                  return `<div class="json-object">{${entries}}</div>`;
+              }
+              return this.renderValue(json);
+          }
+          renderValue(value) {
+              if (value === null)
+                  return '<span class="json-null">null</span>';
+              if (value === undefined)
+                  return '<span class="json-undefined">undefined</span>';
+              if (typeof value === 'boolean')
+                  return `<span class="json-boolean">${value}</span>`;
+              if (typeof value === 'number')
+                  return `<span class="json-number">${value}</span>`;
+              if (typeof value === 'string')
+                  return `<span class="json-string">"${value}"</span>`;
+              return String(value);
+          }
+          constructor() {
+              super(...arguments);
+              this.value = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, null));
+              this.collapsed = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _collapsed_initializers, true));
+              this.maxDepth = (__runInitializers(this, _collapsed_extraInitializers), __runInitializers(this, _maxDepth_initializers, 3));
+              this.showToggle = (__runInitializers(this, _maxDepth_extraInitializers), __runInitializers(this, _showToggle_initializers, true));
+              this.column = (__runInitializers(this, _showToggle_extraInitializers), __runInitializers(this, _column_initializers, null));
+              this.rowData = (__runInitializers(this, _column_extraInitializers), __runInitializers(this, _rowData_initializers, null));
+              this.align = (__runInitializers(this, _rowData_extraInitializers), __runInitializers(this, _align_initializers, 'left'));
+              this.type = (__runInitializers(this, _align_extraInitializers), __runInitializers(this, _type_initializers, 'json'));
+              __runInitializers(this, _type_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  (() => {
+      let _classDecorators = [snice.element('snice-cell-currency')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _align_decorators;
+      let _align_initializers = [];
+      let _align_extraInitializers = [];
+      let _type_decorators;
+      let _type_initializers = [];
+      let _type_extraInitializers = [];
+      let _value_decorators;
+      let _value_initializers = [];
+      let _value_extraInitializers = [];
+      let _column_decorators;
+      let _column_initializers = [];
+      let _column_extraInitializers = [];
+      let _rowData_decorators;
+      let _rowData_initializers = [];
+      let _rowData_extraInitializers = [];
+      let _contentElement_decorators;
+      let _contentElement_initializers = [];
+      let _contentElement_extraInitializers = [];
+      let _decimals_decorators;
+      let _decimals_initializers = [];
+      let _decimals_extraInitializers = [];
+      let _thousandsSeparator_decorators;
+      let _thousandsSeparator_initializers = [];
+      let _thousandsSeparator_extraInitializers = [];
+      let _currency_decorators;
+      let _currency_initializers = [];
+      let _currency_extraInitializers = [];
+      let _currencyDisplay_decorators;
+      let _currencyDisplay_initializers = [];
+      let _currencyDisplay_extraInitializers = [];
+      let _locale_decorators;
+      let _locale_initializers = [];
+      let _locale_extraInitializers = [];
+      let _negativeStyle_decorators;
+      let _negativeStyle_initializers = [];
+      let _negativeStyle_extraInitializers = [];
+      let _highlight_decorators;
+      let _highlight_initializers = [];
+      let _highlight_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _init_decorators;
+      let _updateAlignment_decorators;
+      let _updateContent_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _align_decorators = [snice.property({ type: String })];
+              _type_decorators = [snice.property({ type: String })];
+              _value_decorators = [snice.property({})];
+              _column_decorators = [snice.property({ type: Object })];
+              _rowData_decorators = [snice.property({ type: Object })];
+              _contentElement_decorators = [snice.query('.cell-content')];
+              _decimals_decorators = [snice.property({ type: Number })];
+              _thousandsSeparator_decorators = [snice.property({ type: Boolean, attribute: 'thousands-separator' })];
+              _currency_decorators = [snice.property({ type: String })];
+              _currencyDisplay_decorators = [snice.property({ type: String })];
+              _locale_decorators = [snice.property({ type: String })];
+              _negativeStyle_decorators = [snice.property({ type: String, attribute: 'negative-style' })];
+              _highlight_decorators = [snice.property({ type: Boolean })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _init_decorators = [snice.ready()];
+              _updateAlignment_decorators = [snice.watch('align')];
+              _updateContent_decorators = [snice.watch('value', 'column')];
+              __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, _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, _updateAlignment_decorators, { kind: "method", name: "updateAlignment", static: false, private: false, access: { has: obj => "updateAlignment" in obj, get: obj => obj.updateAlignment }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _updateContent_decorators, { kind: "method", name: "updateContent", static: false, private: false, access: { has: obj => "updateContent" in obj, get: obj => obj.updateContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _align_decorators, { kind: "field", name: "align", static: false, private: false, access: { has: obj => "align" in obj, get: obj => obj.align, set: (obj, value) => { obj.align = value; } }, metadata: _metadata }, _align_initializers, _align_extraInitializers);
+              __esDecorate(null, null, _type_decorators, { kind: "field", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
+              __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+              __esDecorate(null, null, _column_decorators, { kind: "field", name: "column", static: false, private: false, access: { has: obj => "column" in obj, get: obj => obj.column, set: (obj, value) => { obj.column = value; } }, metadata: _metadata }, _column_initializers, _column_extraInitializers);
+              __esDecorate(null, null, _rowData_decorators, { kind: "field", name: "rowData", static: false, private: false, access: { has: obj => "rowData" in obj, get: obj => obj.rowData, set: (obj, value) => { obj.rowData = value; } }, metadata: _metadata }, _rowData_initializers, _rowData_extraInitializers);
+              __esDecorate(null, null, _contentElement_decorators, { kind: "field", name: "contentElement", static: false, private: false, access: { has: obj => "contentElement" in obj, get: obj => obj.contentElement, set: (obj, value) => { obj.contentElement = value; } }, metadata: _metadata }, _contentElement_initializers, _contentElement_extraInitializers);
+              __esDecorate(null, null, _decimals_decorators, { kind: "field", name: "decimals", static: false, private: false, access: { has: obj => "decimals" in obj, get: obj => obj.decimals, set: (obj, value) => { obj.decimals = value; } }, metadata: _metadata }, _decimals_initializers, _decimals_extraInitializers);
+              __esDecorate(null, null, _thousandsSeparator_decorators, { kind: "field", name: "thousandsSeparator", static: false, private: false, access: { has: obj => "thousandsSeparator" in obj, get: obj => obj.thousandsSeparator, set: (obj, value) => { obj.thousandsSeparator = value; } }, metadata: _metadata }, _thousandsSeparator_initializers, _thousandsSeparator_extraInitializers);
+              __esDecorate(null, null, _currency_decorators, { kind: "field", name: "currency", static: false, private: false, access: { has: obj => "currency" in obj, get: obj => obj.currency, set: (obj, value) => { obj.currency = value; } }, metadata: _metadata }, _currency_initializers, _currency_extraInitializers);
+              __esDecorate(null, null, _currencyDisplay_decorators, { kind: "field", name: "currencyDisplay", static: false, private: false, access: { has: obj => "currencyDisplay" in obj, get: obj => obj.currencyDisplay, set: (obj, value) => { obj.currencyDisplay = value; } }, metadata: _metadata }, _currencyDisplay_initializers, _currencyDisplay_extraInitializers);
+              __esDecorate(null, null, _locale_decorators, { kind: "field", name: "locale", static: false, private: false, access: { has: obj => "locale" in obj, get: obj => obj.locale, set: (obj, value) => { obj.locale = value; } }, metadata: _metadata }, _locale_initializers, _locale_extraInitializers);
+              __esDecorate(null, null, _negativeStyle_decorators, { kind: "field", name: "negativeStyle", static: false, private: false, access: { has: obj => "negativeStyle" in obj, get: obj => obj.negativeStyle, set: (obj, value) => { obj.negativeStyle = value; } }, metadata: _metadata }, _negativeStyle_initializers, _negativeStyle_extraInitializers);
+              __esDecorate(null, null, _highlight_decorators, { kind: "field", name: "highlight", static: false, private: false, access: { has: obj => "highlight" in obj, get: obj => obj.highlight, set: (obj, value) => { obj.highlight = value; } }, metadata: _metadata }, _highlight_initializers, _highlight_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 formattedValue = this.formatCurrencyValue();
+              const styles = this.getCurrencyStyles();
+              return snice.html /*html*/ `
+      <div class="cell-content cell-content--number" part="content" style="${styles}">
+        ${formattedValue}
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$c}`;
+          }
+          init() {
+              this.applyAlignment();
+          }
+          applyAlignment() {
+              this.style.textAlign = this.align;
+          }
+          updateAlignment() {
+              this.applyAlignment();
+          }
+          updateContent() {
+              if (this.contentElement) {
+                  const formattedValue = this.formatCurrencyValue();
+                  const styles = this.getCurrencyStyles();
+                  this.contentElement.innerHTML = formattedValue;
+                  this.contentElement.setAttribute('style', styles);
+              }
+          }
+          formatCurrencyValue() {
+              if (this.value === null || this.value === undefined || this.value === '') {
+                  return '';
+              }
+              // Use custom formatter if provided
+              if (this.column.formatter) {
+                  return this.column.formatter(this.value, this.rowData);
+              }
+              // Use column currency format or component properties
+              const format = this.column.currencyFormat || {
+                  decimals: this.decimals,
+                  currency: this.currency,
+                  currencyDisplay: this.currencyDisplay,
+                  locale: this.locale,
+                  negativeStyle: this.negativeStyle
+              };
+              const num = Number(this.value);
+              if (isNaN(num)) {
+                  return String(this.value);
+              }
+              try {
+                  const formatter = new Intl.NumberFormat(format.locale || this.locale, {
+                      style: 'currency',
+                      currency: format.currency || this.currency,
+                      currencyDisplay: format.currencyDisplay || this.currencyDisplay,
+                      minimumFractionDigits: format.decimals ?? this.decimals,
+                      maximumFractionDigits: format.decimals ?? this.decimals
+                  });
+                  let formatted = formatter.format(Math.abs(num));
+                  // Handle negative numbers
+                  if (num < 0) {
+                      const negStyle = format.negativeStyle ?? this.negativeStyle;
+                      if (negStyle === 'parentheses') {
+                          formatted = `(${formatted})`;
+                      }
+                      else if (negStyle === 'red') {
+                          formatted = `-${formatted}`;
+                      }
+                      else {
+                          formatted = `-${formatted}`;
+                      }
+                  }
+                  return formatted;
+              }
+              catch (error) {
+                  // Fallback to basic formatting if Intl.NumberFormat fails
+                  let formatted = num.toFixed(format.decimals ?? this.decimals);
+                  if (this.thousandsSeparator) {
+                      const parts = formatted.split('.');
+                      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+                      formatted = parts.join('.');
+                  }
+                  return `$${formatted}`;
+              }
+          }
+          getCurrencyStyles() {
+              const num = Number(this.value);
+              // Remove existing number classes
+              this.classList.remove('number--negative', 'number--positive', 'number--zero', 'number--highlighted');
+              // Apply CSS classes instead of direct styles
+              if (num < 0) {
+                  this.classList.add('number--negative');
+                  const negStyle = this.column.currencyFormat?.negativeStyle ?? this.negativeStyle;
+                  if (negStyle === 'red') {
+                      this.classList.add('number--negative-red');
+                  }
+              }
+              else if (num > 0) {
+                  this.classList.add('number--positive');
+                  if (this.highlight) {
+                      this.classList.add('number--highlighted');
+                  }
+              }
+              else if (num === 0) {
+                  this.classList.add('number--zero');
+              }
+              return 'text-align: right';
+          }
+          constructor() {
+              super(...arguments);
+              this.align = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _align_initializers, 'right'));
+              this.type = (__runInitializers(this, _align_extraInitializers), __runInitializers(this, _type_initializers, 'currency'));
+              this.value = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _value_initializers, ''));
+              this.column = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _column_initializers, {
+                  key: '',
+                  label: '',
+                  type: 'currency',
+                  align: 'right'
+              }));
+              this.rowData = (__runInitializers(this, _column_extraInitializers), __runInitializers(this, _rowData_initializers, null));
+              this.contentElement = (__runInitializers(this, _rowData_extraInitializers), __runInitializers(this, _contentElement_initializers, void 0));
+              this.decimals = (__runInitializers(this, _contentElement_extraInitializers), __runInitializers(this, _decimals_initializers, 2));
+              this.thousandsSeparator = (__runInitializers(this, _decimals_extraInitializers), __runInitializers(this, _thousandsSeparator_initializers, true));
+              this.currency = (__runInitializers(this, _thousandsSeparator_extraInitializers), __runInitializers(this, _currency_initializers, 'USD'));
+              this.currencyDisplay = (__runInitializers(this, _currency_extraInitializers), __runInitializers(this, _currencyDisplay_initializers, 'symbol'));
+              this.locale = (__runInitializers(this, _currencyDisplay_extraInitializers), __runInitializers(this, _locale_initializers, 'en-US'));
+              this.negativeStyle = (__runInitializers(this, _locale_extraInitializers), __runInitializers(this, _negativeStyle_initializers, 'red'));
+              this.highlight = (__runInitializers(this, _negativeStyle_extraInitializers), __runInitializers(this, _highlight_initializers, false));
+              __runInitializers(this, _highlight_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$2 = ":host{color:var(--snice-color-text);display:flex;align-items:center;min-height:2.5rem;height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem;font-variant-numeric:tabular-nums}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem;word-wrap:break-word;display:flex;align-items:center;justify-content:flex-end;gap:.375rem}.cell-content--percentage{font-feature-settings:'tnum'}.percentage-trend{display:inline-flex;align-items:center;font-size:1rem;margin-left:.25rem}:host(.percentage--positive){color:var(--snice-color-success)}:host(.percentage--negative){color:var(--snice-color-danger)}:host(.percentage--zero){color:var(--snice-color-text-secondary)}:host(.percentage--trend-up) .percentage-trend{color:var(--snice-color-success)}:host(.percentage--trend-down) .percentage-trend{color:var(--snice-color-danger)}:host(.percentage--trend-neutral) .percentage-trend{color:var(--snice-color-text-secondary)}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text);font-size:.75rem;line-height:1rem}.percentage-trend{font-size:.875rem}}@media print{:host{color:var(--snice-color-text);font-size:.75rem}.percentage-trend{font-size:.875rem}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-cell-percentage')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _align_decorators;
+      let _align_initializers = [];
+      let _align_extraInitializers = [];
+      let _type_decorators;
+      let _type_initializers = [];
+      let _type_extraInitializers = [];
+      let _value_decorators;
+      let _value_initializers = [];
+      let _value_extraInitializers = [];
+      let _column_decorators;
+      let _column_initializers = [];
+      let _column_extraInitializers = [];
+      let _rowData_decorators;
+      let _rowData_initializers = [];
+      let _rowData_extraInitializers = [];
+      let _contentElement_decorators;
+      let _contentElement_initializers = [];
+      let _contentElement_extraInitializers = [];
+      let _decimals_decorators;
+      let _decimals_initializers = [];
+      let _decimals_extraInitializers = [];
+      let _showTrend_decorators;
+      let _showTrend_initializers = [];
+      let _showTrend_extraInitializers = [];
+      let _trendValue_decorators;
+      let _trendValue_initializers = [];
+      let _trendValue_extraInitializers = [];
+      let _colorize_decorators;
+      let _colorize_initializers = [];
+      let _colorize_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _init_decorators;
+      let _updateAlignment_decorators;
+      let _updateContent_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _align_decorators = [snice.property({ type: String })];
+              _type_decorators = [snice.property({ type: String })];
+              _value_decorators = [snice.property({})];
+              _column_decorators = [snice.property({ type: Object })];
+              _rowData_decorators = [snice.property({ type: Object })];
+              _contentElement_decorators = [snice.query('.cell-content')];
+              _decimals_decorators = [snice.property({ type: Number })];
+              _showTrend_decorators = [snice.property({ type: Boolean })];
+              _trendValue_decorators = [snice.property({ type: Number })];
+              _colorize_decorators = [snice.property({ type: Boolean })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _init_decorators = [snice.ready()];
+              _updateAlignment_decorators = [snice.watch('align')];
+              _updateContent_decorators = [snice.watch('value', 'column')];
+              __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, _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, _updateAlignment_decorators, { kind: "method", name: "updateAlignment", static: false, private: false, access: { has: obj => "updateAlignment" in obj, get: obj => obj.updateAlignment }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _updateContent_decorators, { kind: "method", name: "updateContent", static: false, private: false, access: { has: obj => "updateContent" in obj, get: obj => obj.updateContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _align_decorators, { kind: "field", name: "align", static: false, private: false, access: { has: obj => "align" in obj, get: obj => obj.align, set: (obj, value) => { obj.align = value; } }, metadata: _metadata }, _align_initializers, _align_extraInitializers);
+              __esDecorate(null, null, _type_decorators, { kind: "field", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
+              __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+              __esDecorate(null, null, _column_decorators, { kind: "field", name: "column", static: false, private: false, access: { has: obj => "column" in obj, get: obj => obj.column, set: (obj, value) => { obj.column = value; } }, metadata: _metadata }, _column_initializers, _column_extraInitializers);
+              __esDecorate(null, null, _rowData_decorators, { kind: "field", name: "rowData", static: false, private: false, access: { has: obj => "rowData" in obj, get: obj => obj.rowData, set: (obj, value) => { obj.rowData = value; } }, metadata: _metadata }, _rowData_initializers, _rowData_extraInitializers);
+              __esDecorate(null, null, _contentElement_decorators, { kind: "field", name: "contentElement", static: false, private: false, access: { has: obj => "contentElement" in obj, get: obj => obj.contentElement, set: (obj, value) => { obj.contentElement = value; } }, metadata: _metadata }, _contentElement_initializers, _contentElement_extraInitializers);
+              __esDecorate(null, null, _decimals_decorators, { kind: "field", name: "decimals", static: false, private: false, access: { has: obj => "decimals" in obj, get: obj => obj.decimals, set: (obj, value) => { obj.decimals = value; } }, metadata: _metadata }, _decimals_initializers, _decimals_extraInitializers);
+              __esDecorate(null, null, _showTrend_decorators, { kind: "field", name: "showTrend", static: false, private: false, access: { has: obj => "showTrend" in obj, get: obj => obj.showTrend, set: (obj, value) => { obj.showTrend = value; } }, metadata: _metadata }, _showTrend_initializers, _showTrend_extraInitializers);
+              __esDecorate(null, null, _trendValue_decorators, { kind: "field", name: "trendValue", static: false, private: false, access: { has: obj => "trendValue" in obj, get: obj => obj.trendValue, set: (obj, value) => { obj.trendValue = value; } }, metadata: _metadata }, _trendValue_initializers, _trendValue_extraInitializers);
+              __esDecorate(null, null, _colorize_decorators, { kind: "field", name: "colorize", static: false, private: false, access: { has: obj => "colorize" in obj, get: obj => obj.colorize, set: (obj, value) => { obj.colorize = value; } }, metadata: _metadata }, _colorize_initializers, _colorize_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 formattedValue = this.formatPercentageValue();
+              const trendArrow = this.getTrendArrow();
+              const styles = this.getPercentageStyles();
+              return snice.html /*html*/ `
+      <div class="cell-content cell-content--percentage" part="content" style="${styles}">
+        ${formattedValue}
+        ${this.showTrend && trendArrow ? snice.unsafeHTML(`<span class="percentage-trend">${trendArrow}</span>`) : ''}
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$2}`;
+          }
+          init() {
+              this.applyAlignment();
+          }
+          applyAlignment() {
+              this.style.textAlign = this.align;
+          }
+          updateAlignment() {
+              this.applyAlignment();
+          }
+          updateContent() {
+              if (this.contentElement) {
+                  const formattedValue = this.formatPercentageValue();
+                  const trendArrow = this.getTrendArrow();
+                  const styles = this.getPercentageStyles();
+                  const trendHTML = this.showTrend && trendArrow
+                      ? `<span class="percentage-trend">${trendArrow}</span>`
+                      : '';
+                  this.contentElement.innerHTML = formattedValue + trendHTML;
+                  this.contentElement.setAttribute('style', styles);
+              }
+          }
+          formatPercentageValue() {
+              if (this.value === null || this.value === undefined || this.value === '') {
+                  return '';
+              }
+              // Use custom formatter if provided
+              if (this.column?.formatter) {
+                  return this.column.formatter(this.value, this.rowData);
+              }
+              // Use column percentage format or component properties
+              const format = this.column?.percentageFormat || {
+                  decimals: this.decimals,
+                  showTrend: this.showTrend,
+                  trendValue: this.trendValue,
+                  colorize: this.colorize
+              };
+              const num = Number(this.value);
+              if (isNaN(num)) {
+                  return String(this.value);
+              }
+              const formatted = num.toFixed(format.decimals ?? this.decimals);
+              return `${formatted}%`;
+          }
+          getTrendArrow() {
+              const trend = this.column?.percentageFormat?.trendValue ?? this.trendValue;
+              if (trend === null || trend === undefined) {
+                  return '';
+              }
+              if (trend > 0) {
+                  return '↑';
+              }
+              else if (trend < 0) {
+                  return '↓';
+              }
+              return '→';
+          }
+          getPercentageStyles() {
+              const num = Number(this.value);
+              const shouldColorize = this.column?.percentageFormat?.colorize ?? this.colorize;
+              // Remove existing classes
+              this.classList.remove('percentage--positive', 'percentage--negative', 'percentage--zero');
+              if (shouldColorize) {
+                  if (num > 0) {
+                      this.classList.add('percentage--positive');
+                  }
+                  else if (num < 0) {
+                      this.classList.add('percentage--negative');
+                  }
+                  else if (num === 0) {
+                      this.classList.add('percentage--zero');
+                  }
+              }
+              // Apply trend arrow color
+              const trend = this.column?.percentageFormat?.trendValue ?? this.trendValue;
+              this.classList.remove('percentage--trend-up', 'percentage--trend-down', 'percentage--trend-neutral');
+              if (trend !== null && trend !== undefined) {
+                  if (trend > 0) {
+                      this.classList.add('percentage--trend-up');
+                  }
+                  else if (trend < 0) {
+                      this.classList.add('percentage--trend-down');
+                  }
+                  else {
+                      this.classList.add('percentage--trend-neutral');
+                  }
+              }
+              return 'text-align: right';
+          }
+          constructor() {
+              super(...arguments);
+              this.align = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _align_initializers, 'right'));
+              this.type = (__runInitializers(this, _align_extraInitializers), __runInitializers(this, _type_initializers, 'percentage'));
+              this.value = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _value_initializers, ''));
+              this.column = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _column_initializers, null));
+              this.rowData = (__runInitializers(this, _column_extraInitializers), __runInitializers(this, _rowData_initializers, null));
+              this.contentElement = (__runInitializers(this, _rowData_extraInitializers), __runInitializers(this, _contentElement_initializers, void 0));
+              this.decimals = (__runInitializers(this, _contentElement_extraInitializers), __runInitializers(this, _decimals_initializers, 2));
+              this.showTrend = (__runInitializers(this, _decimals_extraInitializers), __runInitializers(this, _showTrend_initializers, false));
+              this.trendValue = (__runInitializers(this, _showTrend_extraInitializers), __runInitializers(this, _trendValue_initializers, null));
+              this.colorize = (__runInitializers(this, _trendValue_extraInitializers), __runInitializers(this, _colorize_initializers, true));
+              __runInitializers(this, _colorize_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent$1 = ":host{color:var(--snice-color-text);display:flex;align-items:center;min-height:2.5rem;height:2.5rem;min-width:6.25rem;flex:1;font-size:.875rem;line-height:1.25rem}.cell-content{width:100%;min-width:6.25rem;min-height:1.25rem;display:flex;align-items:center;gap:.375rem}.location-icon{display:inline-flex;align-items:center;font-size:.875rem;opacity:.7;flex-shrink:0}.location-link{color:var(--snice-color-primary);text-decoration:none;transition:color .2s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.location-link:hover{color:var(--snice-color-primary-dark);text-decoration:underline}.location-link:focus{outline:2px solid var(--snice-color-primary);outline-offset:2px;border-radius:2px}.location-link:visited{color:var(--snice-color-secondary)}.location-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--snice-color-text)}.location-empty{color:var(--snice-color-text-secondary);font-style:italic}:host([align=left]) .cell-content{justify-content:flex-start}:host([align=center]) .cell-content{justify-content:center}:host([align=right]) .cell-content{justify-content:flex-end}@media (max-width:768px){:host{color:var(--snice-color-text);font-size:.75rem;line-height:1rem}.location-icon{font-size:.75rem}}@media print{.location-link{text-decoration:underline}.location-link::after{content:\" (\" attr(href) \")\";font-size:.75rem;color:var(--snice-color-text-secondary)}.location-icon{display:none}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-cell-location')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _value_decorators;
+      let _value_initializers = [];
+      let _value_extraInitializers = [];
+      let _address_decorators;
+      let _address_initializers = [];
+      let _address_extraInitializers = [];
+      let _latitude_decorators;
+      let _latitude_initializers = [];
+      let _latitude_extraInitializers = [];
+      let _longitude_decorators;
+      let _longitude_initializers = [];
+      let _longitude_extraInitializers = [];
+      let _showMapLink_decorators;
+      let _showMapLink_initializers = [];
+      let _showMapLink_extraInitializers = [];
+      let _mapProvider_decorators;
+      let _mapProvider_initializers = [];
+      let _mapProvider_extraInitializers = [];
+      let _showIcon_decorators;
+      let _showIcon_initializers = [];
+      let _showIcon_extraInitializers = [];
+      let _column_decorators;
+      let _column_initializers = [];
+      let _column_extraInitializers = [];
+      let _rowData_decorators;
+      let _rowData_initializers = [];
+      let _rowData_extraInitializers = [];
+      let _align_decorators;
+      let _align_initializers = [];
+      let _align_extraInitializers = [];
+      let _type_decorators;
+      let _type_initializers = [];
+      let _type_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _init_decorators;
+      let _updateLocationAttributes_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _value_decorators = [snice.property({ type: String })];
+              _address_decorators = [snice.property({ type: String })];
+              _latitude_decorators = [snice.property({ type: String })];
+              _longitude_decorators = [snice.property({ type: String })];
+              _showMapLink_decorators = [snice.property({ type: Boolean })];
+              _mapProvider_decorators = [snice.property({ type: String })];
+              _showIcon_decorators = [snice.property({ type: Boolean })];
+              _column_decorators = [snice.property({ type: Object })];
+              _rowData_decorators = [snice.property({ type: Object })];
+              _align_decorators = [snice.property({ type: String })];
+              _type_decorators = [snice.property({ type: String })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _init_decorators = [snice.ready()];
+              _updateLocationAttributes_decorators = [snice.watch('value', 'column')];
+              __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, _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, _updateLocationAttributes_decorators, { kind: "method", name: "updateLocationAttributes", static: false, private: false, access: { has: obj => "updateLocationAttributes" in obj, get: obj => obj.updateLocationAttributes }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+              __esDecorate(null, null, _address_decorators, { kind: "field", name: "address", static: false, private: false, access: { has: obj => "address" in obj, get: obj => obj.address, set: (obj, value) => { obj.address = value; } }, metadata: _metadata }, _address_initializers, _address_extraInitializers);
+              __esDecorate(null, null, _latitude_decorators, { kind: "field", name: "latitude", static: false, private: false, access: { has: obj => "latitude" in obj, get: obj => obj.latitude, set: (obj, value) => { obj.latitude = value; } }, metadata: _metadata }, _latitude_initializers, _latitude_extraInitializers);
+              __esDecorate(null, null, _longitude_decorators, { kind: "field", name: "longitude", static: false, private: false, access: { has: obj => "longitude" in obj, get: obj => obj.longitude, set: (obj, value) => { obj.longitude = value; } }, metadata: _metadata }, _longitude_initializers, _longitude_extraInitializers);
+              __esDecorate(null, null, _showMapLink_decorators, { kind: "field", name: "showMapLink", static: false, private: false, access: { has: obj => "showMapLink" in obj, get: obj => obj.showMapLink, set: (obj, value) => { obj.showMapLink = value; } }, metadata: _metadata }, _showMapLink_initializers, _showMapLink_extraInitializers);
+              __esDecorate(null, null, _mapProvider_decorators, { kind: "field", name: "mapProvider", static: false, private: false, access: { has: obj => "mapProvider" in obj, get: obj => obj.mapProvider, set: (obj, value) => { obj.mapProvider = value; } }, metadata: _metadata }, _mapProvider_initializers, _mapProvider_extraInitializers);
+              __esDecorate(null, null, _showIcon_decorators, { kind: "field", name: "showIcon", static: false, private: false, access: { has: obj => "showIcon" in obj, get: obj => obj.showIcon, set: (obj, value) => { obj.showIcon = value; } }, metadata: _metadata }, _showIcon_initializers, _showIcon_extraInitializers);
+              __esDecorate(null, null, _column_decorators, { kind: "field", name: "column", static: false, private: false, access: { has: obj => "column" in obj, get: obj => obj.column, set: (obj, value) => { obj.column = value; } }, metadata: _metadata }, _column_initializers, _column_extraInitializers);
+              __esDecorate(null, null, _rowData_decorators, { kind: "field", name: "rowData", static: false, private: false, access: { has: obj => "rowData" in obj, get: obj => obj.rowData, set: (obj, value) => { obj.rowData = value; } }, metadata: _metadata }, _rowData_initializers, _rowData_extraInitializers);
+              __esDecorate(null, null, _align_decorators, { kind: "field", name: "align", static: false, private: false, access: { has: obj => "align" in obj, get: obj => obj.align, set: (obj, value) => { obj.align = value; } }, metadata: _metadata }, _align_initializers, _align_extraInitializers);
+              __esDecorate(null, null, _type_decorators, { kind: "field", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_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 locationValue = this.address || this.value;
+              const iconHTML = this.showIcon ? '<span class="location-icon">📍</span>' : '';
+              const mapLink = this.getMapLink();
+              if (!locationValue && !this.latitude && !this.longitude) {
+                  return snice.html /*html*/ `
+        <div class="cell-content cell-content--location" part="content">
+          <span class="location-empty"></span>
+        </div>
+      `;
+              }
+              const displayText = locationValue || `${this.latitude}, ${this.longitude}`;
+              return snice.html /*html*/ `
+      <div class="cell-content cell-content--location" part="content">
+        ${snice.unsafeHTML(iconHTML)}
+        ${this.showMapLink && mapLink
+                ? snice.html `<a href="${mapLink}" target="_blank" rel="noopener noreferrer" class="location-link" part="link">
+              ${displayText}
+            </a>`
+                : snice.html `<span class="location-text">${displayText}</span>`}
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent$1}`;
+          }
+          init() {
+              this.updateLocationAttributes();
+          }
+          updateLocationAttributes() {
+              if (this.column?.locationFormat) {
+                  const format = this.column.locationFormat;
+                  this.address = format.address || this.value;
+                  this.latitude = format.latitude ? String(format.latitude) : '';
+                  this.longitude = format.longitude ? String(format.longitude) : '';
+                  this.showMapLink = format.showMapLink ?? true;
+                  this.mapProvider = format.mapProvider || 'google';
+                  this.showIcon = format.showIcon ?? true;
+              }
+          }
+          getMapLink() {
+              if (!this.showMapLink) {
+                  return '';
+              }
+              const address = this.address || this.value;
+              const lat = this.latitude;
+              const lon = this.longitude;
+              switch (this.mapProvider) {
+                  case 'google':
+                      if (lat && lon) {
+                          return `https://www.google.com/maps?q=${lat},${lon}`;
+                      }
+                      if (address) {
+                          return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(address)}`;
+                      }
+                      return '';
+                  case 'openstreetmap':
+                      if (lat && lon) {
+                          return `https://www.openstreetmap.org/?mlat=${lat}&mlon=${lon}&zoom=15`;
+                      }
+                      if (address) {
+                          return `https://www.openstreetmap.org/search?query=${encodeURIComponent(address)}`;
+                      }
+                      return '';
+                  case 'apple':
+                      if (lat && lon) {
+                          return `https://maps.apple.com/?ll=${lat},${lon}`;
+                      }
+                      if (address) {
+                          return `https://maps.apple.com/?address=${encodeURIComponent(address)}`;
+                      }
+                      return '';
+                  default:
+                      return '';
+              }
+          }
+          constructor() {
+              super(...arguments);
+              this.value = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, ''));
+              this.address = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _address_initializers, ''));
+              this.latitude = (__runInitializers(this, _address_extraInitializers), __runInitializers(this, _latitude_initializers, ''));
+              this.longitude = (__runInitializers(this, _latitude_extraInitializers), __runInitializers(this, _longitude_initializers, ''));
+              this.showMapLink = (__runInitializers(this, _longitude_extraInitializers), __runInitializers(this, _showMapLink_initializers, true));
+              this.mapProvider = (__runInitializers(this, _showMapLink_extraInitializers), __runInitializers(this, _mapProvider_initializers, 'google'));
+              this.showIcon = (__runInitializers(this, _mapProvider_extraInitializers), __runInitializers(this, _showIcon_initializers, true));
+              this.column = (__runInitializers(this, _showIcon_extraInitializers), __runInitializers(this, _column_initializers, null));
+              this.rowData = (__runInitializers(this, _column_extraInitializers), __runInitializers(this, _rowData_initializers, null));
+              this.align = (__runInitializers(this, _rowData_extraInitializers), __runInitializers(this, _align_initializers, 'left'));
+              this.type = (__runInitializers(this, _align_extraInitializers), __runInitializers(this, _type_initializers, 'location'));
+              __runInitializers(this, _type_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
+  var cssContent = ":host{display:block;width:100%;min-height:2.5rem}.row-container{display:flex;align-items:stretch;width:100%;min-height:2.5rem;height:2.5rem;background:0 0;color:var(--snice-color-text);border-bottom:1px solid var(--snice-color-border);transition:background-color .15s}.cell{display:flex;align-items:center;border-right:1px solid var(--snice-color-border);min-height:2.5rem;height:2.5rem;min-width:6.25rem;flex:1;word-wrap:break-word;overflow:hidden;color:var(--snice-color-text)}.cell:last-child{border-right:none}.cell--checkbox{width:3rem;min-width:3rem;max-width:3rem;padding:.75rem;justify-content:center}.row-checkbox{width:1rem;height:1rem;cursor:pointer}.cells-container{display:flex;flex:1;align-items:stretch}.cell--text{text-align:left}.cell--accounting,.cell--currency,.cell--fraction,.cell--number,.cell--percent,.cell--scientific{text-align:right;font-variant-numeric:tabular-nums}.cell--date{min-width:8rem;font-variant-numeric:tabular-nums}.cell--boolean{text-align:center;font-size:1rem}.cell--rating{text-align:center;min-width:6rem}.cell--progress{min-width:8rem}.cell--sparkline{text-align:center;min-width:6rem}.cell--duration,.cell--filesize{text-align:right;font-variant-numeric:tabular-nums}:host(.row--hoverable) .row-container:hover{background-color:var(--snice-color-background-secondary)}:host(.row--clickable) .row-container{cursor:pointer}:host(.row--clickable) .row-container:hover{background-color:var(--snice-color-background-tertiary)}:host(.row--selected) .row-container{background-color:var(--snice-color-primary-light)}:host(.row--selected.row--hoverable) .row-container:hover{background-color:var(--snice-color-primary-lighter)}:host(.row--highlighted) .row-container{background-color:var(--snice-color-warning-light)!important;animation:2s ease-out row-highlight-fade}@keyframes row-highlight-fade{0%{background-color:var(--snice-color-warning-lighter)}100%{background-color:var(--snice-color-warning-light)}}:host(:focus) .row-container{outline:2px solid var(--snice-color-primary);outline-offset:-2px}:host(.row--selectable){tabindex:0}:host(.row--striped) .row-container{background-color:var(--snice-color-background-secondary)}:host(.row--bordered) .row-container{border-bottom:1px solid var(--snice-color-border)}:host(.row--small) .cell{padding:.5rem .75rem;min-height:2rem;font-size:.75rem}:host(.row--small) .row-container{min-height:2rem}:host(.row--large) .cell{padding:1rem 1.25rem;min-height:3.5rem;font-size:1rem}:host(.row--large) .row-container{min-height:3.5rem}@media (max-width:768px){.cell{padding:.5rem .75rem;font-size:.875rem}.cell--checkbox{width:2.5rem;min-width:2.5rem;max-width:2.5rem;padding:.5rem}.row-checkbox{width:.875rem;height:.875rem}}:host(.row--loading) .row-container{opacity:.6;pointer-events:none}:host(.row--loading) .row-container::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,hsl(0 0% 100% / .6),transparent);animation:1.5s infinite loading-shimmer}@keyframes loading-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@media (prefers-reduced-motion:reduce){.row-container{transition:none}:host(.row--highlighted) .row-container{animation:none;background-color:var(--snice-color-warning-light)!important}:host(.row--loading) .row-container::after{animation:none}}@media (prefers-contrast:high){.cell{border-right:1px solid}.row-container{border-bottom:1px solid}:host(.row--selected) .row-container{border:2px solid}}";
+
+  (() => {
+      let _classDecorators = [snice.element('snice-row')];
+      let _classDescriptor;
+      let _classExtraInitializers = [];
+      let _classThis;
+      let _classSuper = HTMLElement;
+      let _instanceExtraInitializers = [];
+      let _selected_decorators;
+      let _selected_initializers = [];
+      let _selected_extraInitializers = [];
+      let _hoverable_decorators;
+      let _hoverable_initializers = [];
+      let _hoverable_extraInitializers = [];
+      let _clickable_decorators;
+      let _clickable_initializers = [];
+      let _clickable_extraInitializers = [];
+      let _selectable_decorators;
+      let _selectable_initializers = [];
+      let _selectable_extraInitializers = [];
+      let _data_decorators;
+      let _data_initializers = [];
+      let _data_extraInitializers = [];
+      let _index_decorators;
+      let _index_initializers = [];
+      let _index_extraInitializers = [];
+      let _columns_decorators;
+      let _columns_initializers = [];
+      let _columns_extraInitializers = [];
+      let _render_decorators;
+      let _styles_decorators;
+      let _init_decorators;
+      let _updateSelection_decorators;
+      let _updateRowAttributes_decorators;
+      let _updateCells_decorators;
+      let _dispatchRowClick_decorators;
+      let _dispatchRowSelect_decorators;
+      let _dispatchRowHover_decorators;
+      (class extends _classSuper {
+          static { _classThis = this; }
+          static {
+              const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+              _selected_decorators = [snice.property({ type: Boolean, })];
+              _hoverable_decorators = [snice.property({ type: Boolean, })];
+              _clickable_decorators = [snice.property({ type: Boolean, })];
+              _selectable_decorators = [snice.property({ type: Boolean, })];
+              _data_decorators = [snice.property({ type: Object })];
+              _index_decorators = [snice.property({ type: Number, })];
+              _columns_decorators = [snice.property({ type: Array })];
+              _render_decorators = [snice.render()];
+              _styles_decorators = [snice.styles()];
+              _init_decorators = [snice.ready()];
+              _updateSelection_decorators = [snice.watch('selected')];
+              _updateRowAttributes_decorators = [snice.watch('hoverable', 'clickable', 'selectable')];
+              _updateCells_decorators = [snice.watch('data', 'columns')];
+              _dispatchRowClick_decorators = [snice.dispatch('row-click', { bubbles: true, composed: true })];
+              _dispatchRowSelect_decorators = [snice.dispatch('row-select', { bubbles: true, composed: true })];
+              _dispatchRowHover_decorators = [snice.dispatch('row-hover', { 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, _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, _updateSelection_decorators, { kind: "method", name: "updateSelection", static: false, private: false, access: { has: obj => "updateSelection" in obj, get: obj => obj.updateSelection }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _updateRowAttributes_decorators, { kind: "method", name: "updateRowAttributes", static: false, private: false, access: { has: obj => "updateRowAttributes" in obj, get: obj => obj.updateRowAttributes }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _updateCells_decorators, { kind: "method", name: "updateCells", static: false, private: false, access: { has: obj => "updateCells" in obj, get: obj => obj.updateCells }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _dispatchRowClick_decorators, { kind: "method", name: "dispatchRowClick", static: false, private: false, access: { has: obj => "dispatchRowClick" in obj, get: obj => obj.dispatchRowClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _dispatchRowSelect_decorators, { kind: "method", name: "dispatchRowSelect", static: false, private: false, access: { has: obj => "dispatchRowSelect" in obj, get: obj => obj.dispatchRowSelect }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(this, null, _dispatchRowHover_decorators, { kind: "method", name: "dispatchRowHover", static: false, private: false, access: { has: obj => "dispatchRowHover" in obj, get: obj => obj.dispatchRowHover }, metadata: _metadata }, null, _instanceExtraInitializers);
+              __esDecorate(null, null, _selected_decorators, { kind: "field", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
+              __esDecorate(null, null, _hoverable_decorators, { kind: "field", name: "hoverable", static: false, private: false, access: { has: obj => "hoverable" in obj, get: obj => obj.hoverable, set: (obj, value) => { obj.hoverable = value; } }, metadata: _metadata }, _hoverable_initializers, _hoverable_extraInitializers);
+              __esDecorate(null, null, _clickable_decorators, { kind: "field", name: "clickable", static: false, private: false, access: { has: obj => "clickable" in obj, get: obj => obj.clickable, set: (obj, value) => { obj.clickable = value; } }, metadata: _metadata }, _clickable_initializers, _clickable_extraInitializers);
+              __esDecorate(null, null, _selectable_decorators, { kind: "field", name: "selectable", static: false, private: false, access: { has: obj => "selectable" in obj, get: obj => obj.selectable, set: (obj, value) => { obj.selectable = value; } }, metadata: _metadata }, _selectable_initializers, _selectable_extraInitializers);
+              __esDecorate(null, null, _data_decorators, { kind: "field", name: "data", static: false, private: false, access: { has: obj => "data" in obj, get: obj => obj.data, set: (obj, value) => { obj.data = value; } }, metadata: _metadata }, _data_initializers, _data_extraInitializers);
+              __esDecorate(null, null, _index_decorators, { kind: "field", name: "index", static: false, private: false, access: { has: obj => "index" in obj, get: obj => obj.index, set: (obj, value) => { obj.index = value; } }, metadata: _metadata }, _index_initializers, _index_extraInitializers);
+              __esDecorate(null, null, _columns_decorators, { kind: "field", name: "columns", static: false, private: false, access: { has: obj => "columns" in obj, get: obj => obj.columns, set: (obj, value) => { obj.columns = value; } }, metadata: _metadata }, _columns_initializers, _columns_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);
+          }
+          // Extract data from data-* attributes - pass raw values, let cells handle conversion
+          extractDataFromAttributes() {
+              const data = {};
+              // Get all attribute names that start with data-
+              const attrNames = this.getAttributeNames().filter(name => name.startsWith('data-') && name !== 'data-column-index');
+              attrNames.forEach(attrName => {
+                  const key = attrName.slice(5); // Remove 'data-' prefix
+                  const value = this.getAttribute(attrName);
+                  if (value !== null) {
+                      data[key] = value; // Keep as raw string, let cells convert
+                  }
+              });
+              return data;
+          }
+          render() {
+              return snice.html /*html*/ `
+      <div class="row-container" part="container" @click=${(e) => this.handleRowClick(e)} @keydown=${(e) => this.handleKeyDown(e)}>
+        <if ${this.selectable}>
+          ${this.renderCheckbox()}
+        </if>
+        <div class="cells-container">
+          <if ${this.columns && this.columns.length}>
+            ${this.columns.map((column, columnIndex) => this.renderCell(column, columnIndex))}
+          </if>
+          <if ${!this.columns || !this.columns.length}>
+            <!-- No columns set yet -->
+          </if>
+        </div>
+      </div>
+    `;
+          }
+          styles() {
+              return snice.css /*css*/ `${cssContent}`;
+          }
+          init() {
+              // Extract data from data-* attributes if data object is empty
+              if (!this.data || Object.keys(this.data).length === 0) {
+                  this.data = this.extractDataFromAttributes();
+              }
+              this.updateRowAttributes();
+              this.configureCells();
+          }
+          configureCells() {
+              if (!this.columns) {
+                  return;
+              }
+              this.columns.forEach((column, index) => {
+                  const cellElement = this.shadowRoot?.querySelector(`[data-column-index="${index}"]`);
+                  if (cellElement) {
+                      const value = this.data[column.key];
+                      cellElement.value = value;
+                      cellElement.column = column;
+                      cellElement.rowData = this.data;
+                      // For sparkline cells, also set the data property if value is an array
+                      if (column.type === 'sparkline' && Array.isArray(value)) {
+                          cellElement.data = value;
+                      }
+                  }
+              });
+          }
+          updateSelection() {
+              this.updateRowAttributes();
+              const checkbox = this.shadowRoot?.querySelector('.row-checkbox');
+              if (checkbox) {
+                  checkbox.checked = this.selected;
+              }
+          }
+          updateRowAttributes() {
+              this.classList.toggle('row--hoverable', this.hoverable);
+              this.classList.toggle('row--clickable', this.clickable);
+              this.classList.toggle('row--selectable', this.selectable);
+              this.classList.toggle('row--selected', this.selected);
+          }
+          updateCells() {
+              // Re-render is handled automatically by @render decorator
+              // Just need to reconfigure cells after the template updates
+              setTimeout(() => this.configureCells(), 0);
+          }
+          handleRowClick(e) {
+              const target = e.target;
+              // Handle checkbox change separately
+              if (target.matches('.row-checkbox')) {
+                  return; // Let the change event handle this
+              }
+              // Don't trigger row click if clicking on other interactive elements
+              if (target.matches('button, a, .interactive')) {
+                  return;
+              }
+              if (this.clickable) {
+                  this.dispatchRowClick();
+              }
+              if (this.selectable) {
+                  this.toggleSelection();
+              }
+          }
+          handleChange(e) {
+              const target = e.target;
+              if (!target.matches('.row-checkbox'))
+                  return;
+              const checkbox = target;
+              this.selected = checkbox.checked;
+              this.dispatchRowSelect();
+          }
+          handleKeyDown(e) {
+              if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  if (this.selectable) {
+                      this.toggleSelection();
+                  }
+                  else if (this.clickable) {
+                      this.dispatchRowClick();
+                  }
+              }
+          }
+          renderCheckbox() {
+              return snice.html /*html*/ `
+      <div class="cell cell--checkbox" part="checkbox-cell">
+        <input
+          type="checkbox"
+          class="row-checkbox"
+          ?checked=${this.selected}
+          tabindex="-1"
+          @change=${(e) => this.handleChange(e)}
+        />
+      </div>
+    `;
+          }
+          renderCell(column, columnIndex) {
+              this.data[column.key];
+              const cellComponent = this.getCellComponent(column.type);
+              return snice.html /*html*/ `
+      <div class="cell cell--${column.type}" part="cell" style="${this.getCellStyles(column)}">
+        ${snice.unsafeHTML(`<${cellComponent}
+          type="${column.type}"
+          align="${column.align || 'left'}"
+          data-column-index="${columnIndex}"
+        ></${cellComponent}>`)}
+      </div>
+    `;
+          }
+          getCellComponent(type) {
+              switch (type) {
+                  case 'text':
+                      return 'snice-cell-text';
+                  case 'number':
+                  case 'accounting':
+                  case 'scientific':
+                  case 'fraction':
+                      return 'snice-cell-number';
+                  case 'date':
+                      return 'snice-cell-date';
+                  case 'boolean':
+                      return 'snice-cell-boolean';
+                  case 'sparkline':
+                      return 'snice-cell-sparkline';
+                  case 'rating':
+                      return 'snice-cell-rating';
+                  case 'progress':
+                      return 'snice-cell-progress';
+                  case 'duration':
+                      return 'snice-cell-duration';
+                  case 'filesize':
+                      return 'snice-cell-filesize';
+                  case 'link':
+                  case 'url':
+                      return 'snice-cell-link';
+                  case 'actions':
+                      return 'snice-cell-actions';
+                  case 'tag':
+                  case 'tags':
+                  case 'badge':
+                  case 'badges':
+                      return 'snice-cell-tag';
+                  case 'image':
+                  case 'avatar':
+                  case 'thumbnail':
+                      return 'snice-cell-image';
+                  case 'email':
+                      return 'snice-cell-email';
+                  case 'phone':
+                  case 'tel':
+                  case 'telephone':
+                      return 'snice-cell-phone';
+                  case 'status':
+                      return 'snice-cell-status';
+                  case 'color':
+                      return 'snice-cell-color';
+                  case 'json':
+                  case 'object':
+                      return 'snice-cell-json';
+                  case 'currency':
+                  case 'money':
+                      return 'snice-cell-currency';
+                  case 'percent':
+                  case 'percentage':
+                      return 'snice-cell-percentage';
+                  case 'location':
+                  case 'address':
+                  case 'coordinates':
+                      return 'snice-cell-location';
+                  case 'custom':
+                  default:
+                      return 'snice-cell';
+              }
+          }
+          getCellStyles(column) {
+              let styles = [];
+              if (column.width) {
+                  styles.push(`width: ${column.width}`);
+                  styles.push(`min-width: ${column.width}`);
+                  styles.push(`max-width: ${column.width}`);
+              }
+              if (column.align) {
+                  styles.push(`text-align: ${column.align}`);
+              }
+              return styles.join('; ');
+          }
+          escapeHtml(value) {
+              if (value === null || value === undefined) {
+                  return '';
+              }
+              const str = String(value);
+              const div = document.createElement('div');
+              div.textContent = str;
+              return div.innerHTML;
+          }
+          toggleSelection() {
+              this.selected = !this.selected;
+              this.dispatchRowSelect();
+          }
+          dispatchRowClick() {
+              return {
+                  data: this.data,
+                  index: this.index,
+                  element: this
+              };
+          }
+          dispatchRowSelect() {
+              return {
+                  selected: this.selected,
+                  data: this.data,
+                  index: this.index,
+                  element: this
+              };
+          }
+          dispatchRowHover() {
+              return {
+                  data: this.data,
+                  index: this.index,
+                  element: this
+              };
+          }
+          // Public API methods
+          select() {
+              this.selected = true;
+              this.dispatchRowSelect();
+          }
+          deselect() {
+              this.selected = false;
+              this.dispatchRowSelect();
+          }
+          focusRow() {
+              super.focus();
+              this.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+          }
+          getCellValue(columnKey) {
+              return this.data[columnKey];
+          }
+          setCellValue(columnKey, value) {
+              this.data = { ...this.data, [columnKey]: value };
+              this.updateCells();
+          }
+          getCellElement(columnKey) {
+              const column = this.columns.find(col => col.key === columnKey);
+              if (!column)
+                  return null;
+              const columnIndex = this.columns.indexOf(column);
+              return this.shadowRoot?.querySelector(`[data-column-index="${columnIndex}"]`) || null;
+          }
+          // Highlight row temporarily (useful for showing updates)
+          highlight(duration = 2000) {
+              this.classList.add('row--highlighted');
+              setTimeout(() => {
+                  this.classList.remove('row--highlighted');
+              }, duration);
+          }
+          constructor() {
+              super(...arguments);
+              this.selected = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _selected_initializers, false));
+              this.hoverable = (__runInitializers(this, _selected_extraInitializers), __runInitializers(this, _hoverable_initializers, true));
+              this.clickable = (__runInitializers(this, _hoverable_extraInitializers), __runInitializers(this, _clickable_initializers, false));
+              this.selectable = (__runInitializers(this, _clickable_extraInitializers), __runInitializers(this, _selectable_initializers, false));
+              this.data = (__runInitializers(this, _selectable_extraInitializers), __runInitializers(this, _data_initializers, {}));
+              this.index = (__runInitializers(this, _data_extraInitializers), __runInitializers(this, _index_initializers, 0));
+              this.columns = (__runInitializers(this, _index_extraInitializers), __runInitializers(this, _columns_initializers, []));
+              __runInitializers(this, _columns_extraInitializers);
+          }
+      });
+      return _classThis;
+  })();
+
   let SniceTable = (() => {
       let _classDecorators = [snice.element('snice-table')];
       let _classDescriptor;
@@ -4110,8 +6875,8 @@ var SniceTable = (function (exports, snice) {
               _table_decorators = [snice.query('table')];
               _thead_decorators = [snice.query('thead')];
               _tbody_decorators = [snice.query('tbody')];
-              _getTableConfig_decorators = [snice.request('@snice/table/config')];
-              _getTableData_decorators = [snice.request('@snice/table/data')];
+              _getTableConfig_decorators = [snice.request('table/config')];
+              _getTableData_decorators = [snice.request('table/data')];
               _styles_decorators = [snice.styles()];
               _render_decorators = [snice.render()];
               _initialize_decorators = [snice.ready()];
@@ -4531,7 +7296,7 @@ var SniceTable = (function (exports, snice) {
           }
           async initialize() {
               // Listen for controller attached event
-              this.addEventListener('@snice/controller-attached', this.onAttached);
+              this.addEventListener('controller-attached', this.onAttached);
               // Listen for select change events from the filter dropdown
               this.addEventListener('select-change', this.handleSelectorChange);
               // Wait for snice-column to be defined