snice 2.1.5 → 2.2.1

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

@@ -0,0 +1,180 @@
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, query, part, watch, on, dispatch } from 'snice';
+
+var css = ":host {\n  display: block;\n  --alert-padding: 0.75rem 1rem; /* 12px 16px */\n  --alert-border-radius: 6px;\n  --alert-font-size: 0.875rem; /* 14px */\n  --alert-icon-size: 1.25rem; /* 20px */\n  --alert-border-width: 1px;\n}\n\n.alert {\n  display: flex;\n  align-items: flex-start;\n  padding: var(--alert-padding);\n  border-radius: var(--alert-border-radius);\n  font-size: var(--alert-font-size);\n  line-height: 1.5;\n  border: var(--alert-border-width) solid;\n  position: relative;\n  animation: slideIn 0.3s ease;\n}\n\n.alert--hidden {\n  display: none;\n}\n\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes slideOut {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n}\n\n.alert--hiding {\n  animation: slideOut 0.3s ease forwards;\n}\n\n/* Variants */\n:host([variant=\"info\"]) .alert {\n  background: rgb(var(--snice-color-blue-50, 239 246 255));\n  border-color: rgb(var(--snice-color-blue-200, 191 219 254));\n  color: rgb(var(--snice-color-blue-900, 30 58 138));\n}\n\n:host([variant=\"success\"]) .alert {\n  background: rgb(var(--snice-color-green-50, 240 253 244));\n  border-color: rgb(var(--snice-color-green-200, 187 247 208));\n  color: rgb(var(--snice-color-green-900, 20 83 45));\n}\n\n:host([variant=\"warning\"]) .alert {\n  background: rgb(var(--snice-color-yellow-50, 254 252 232));\n  border-color: rgb(var(--snice-color-yellow-200, 254 240 138));\n  color: rgb(var(--snice-color-yellow-900, 113 63 18));\n}\n\n:host([variant=\"error\"]) .alert {\n  background: rgb(var(--snice-color-red-50, 254 242 242));\n  border-color: rgb(var(--snice-color-red-200, 254 202 202));\n  color: rgb(var(--snice-color-red-900, 127 29 29));\n}\n\n/* Icon */\n.alert-icon {\n  flex-shrink: 0;\n  width: var(--alert-icon-size);\n  height: var(--alert-icon-size);\n  margin-right: 0.75rem; /* 12px */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.alert-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Default icons */\n:host([variant=\"info\"]) .alert-icon--default::before {\n  content: \"ℹ\";\n  font-size: 1.125rem; /* 18px */\n  font-weight: bold;\n}\n\n:host([variant=\"success\"]) .alert-icon--default::before {\n  content: \"✓\";\n  font-size: 1rem; /* 16px */\n  font-weight: bold;\n}\n\n:host([variant=\"warning\"]) .alert-icon--default::before {\n  content: \"⚠\";\n  font-size: 1.125rem; /* 18px */\n}\n\n:host([variant=\"error\"]) .alert-icon--default::before {\n  content: \"✕\";\n  font-size: 1rem; /* 16px */\n  font-weight: bold;\n}\n\n/* Content */\n.alert-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.alert-title {\n  font-weight: 600;\n  margin-bottom: 0.25rem; /* 4px */\n}\n\n.alert-title:empty {\n  display: none;\n}\n\n.alert-description {\n  color: inherit;\n  opacity: 0.9;\n}\n\n/* Dismiss button */\n.alert-dismiss {\n  flex-shrink: 0;\n  margin-left: 0.75rem; /* 12px */\n  margin-right: -0.25rem; /* -4px */\n  padding: 0.25rem; /* 4px */\n  background: none;\n  border: none;\n  cursor: pointer;\n  opacity: 0.6;\n  transition: opacity 0.2s ease;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n}\n\n.alert-dismiss:hover {\n  opacity: 1;\n}\n\n.alert-dismiss:focus-visible {\n  outline: 2px solid currentColor;\n  outline-offset: 2px; /* Keep px for crisp outline */\n}\n\n.alert-dismiss svg {\n  width: 1rem; /* 16px */\n  height: 1rem; /* 16px */\n}\n\n/* Sizes */\n:host([size=\"small\"]) {\n  --alert-padding: 0.5rem 0.75rem; /* 8px 12px */\n  --alert-font-size: 0.75rem; /* 12px */\n  --alert-icon-size: 1rem; /* 16px */\n  --alert-border-radius: 4px;\n}\n\n:host([size=\"large\"]) {\n  --alert-padding: 1rem 1.25rem; /* 16px 20px */\n  --alert-font-size: 1rem; /* 16px */\n  --alert-icon-size: 1.5rem; /* 24px */\n  --alert-border-radius: 8px;\n}\n\n/* Accessibility */\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}";
+
+let SniceAlert = (() => {
+    let _classDecorators = [element('snice-alert')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    let _dismissible_decorators;
+    let _dismissible_initializers = [];
+    let _dismissible_extraInitializers = [];
+    let _icon_decorators;
+    let _icon_initializers = [];
+    let _icon_extraInitializers = [];
+    let _alertElement_decorators;
+    let _alertElement_initializers = [];
+    let _alertElement_extraInitializers = [];
+    let _renderIconSection_decorators;
+    let _renderTitleSection_decorators;
+    let _renderDescriptionSection_decorators;
+    let _renderDismissSection_decorators;
+    let _handleDismiss_decorators;
+    let _handleAnimationEnd_decorators;
+    let _dispatchAlertHidden_decorators;
+    let _dispatchAlertShown_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.variant = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _variant_initializers, 'info'));
+            this.size = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _size_initializers, 'medium'));
+            this.title = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _title_initializers, ''));
+            this.dismissible = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _dismissible_initializers, false));
+            this.icon = (__runInitializers(this, _dismissible_extraInitializers), __runInitializers(this, _icon_initializers, ''));
+            this.alertElement = (__runInitializers(this, _icon_extraInitializers), __runInitializers(this, _alertElement_initializers, void 0));
+            this.isHidden = (__runInitializers(this, _alertElement_extraInitializers), false);
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _variant_decorators = [property({ reflect: true })];
+            _size_decorators = [property({ reflect: true })];
+            _title_decorators = [property({ reflect: true })];
+            _dismissible_decorators = [property({ type: Boolean, reflect: true })];
+            _icon_decorators = [property({ reflect: true })];
+            _alertElement_decorators = [query('.alert')];
+            _renderIconSection_decorators = [part('icon-section')];
+            _renderTitleSection_decorators = [watch('title'), part('title-section')];
+            _renderDescriptionSection_decorators = [part('description-section')];
+            _renderDismissSection_decorators = [watch('dismissible'), part('dismiss-section')];
+            _handleDismiss_decorators = [on('click', '.alert-dismiss'), dispatch('alert-dismiss')];
+            _handleAnimationEnd_decorators = [on('animationend', '.alert')];
+            _dispatchAlertHidden_decorators = [dispatch('alert-hidden')];
+            _dispatchAlertShown_decorators = [dispatch('alert-shown')];
+            __esDecorate(this, null, _renderIconSection_decorators, { kind: "method", name: "renderIconSection", static: false, private: false, access: { has: obj => "renderIconSection" in obj, get: obj => obj.renderIconSection }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _renderTitleSection_decorators, { kind: "method", name: "renderTitleSection", static: false, private: false, access: { has: obj => "renderTitleSection" in obj, get: obj => obj.renderTitleSection }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _renderDescriptionSection_decorators, { kind: "method", name: "renderDescriptionSection", static: false, private: false, access: { has: obj => "renderDescriptionSection" in obj, get: obj => obj.renderDescriptionSection }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _renderDismissSection_decorators, { kind: "method", name: "renderDismissSection", static: false, private: false, access: { has: obj => "renderDismissSection" in obj, get: obj => obj.renderDismissSection }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleDismiss_decorators, { kind: "method", name: "handleDismiss", static: false, private: false, access: { has: obj => "handleDismiss" in obj, get: obj => obj.handleDismiss }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleAnimationEnd_decorators, { kind: "method", name: "handleAnimationEnd", static: false, private: false, access: { has: obj => "handleAnimationEnd" in obj, get: obj => obj.handleAnimationEnd }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchAlertHidden_decorators, { kind: "method", name: "dispatchAlertHidden", static: false, private: false, access: { has: obj => "dispatchAlertHidden" in obj, get: obj => obj.dispatchAlertHidden }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _dispatchAlertShown_decorators, { kind: "method", name: "dispatchAlertShown", static: false, private: false, access: { has: obj => "dispatchAlertShown" in obj, get: obj => obj.dispatchAlertShown }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _variant_decorators, { kind: "field", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
+            __esDecorate(null, null, _size_decorators, { kind: "field", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
+            __esDecorate(null, null, _title_decorators, { kind: "field", name: "title", static: false, private: false, access: { has: obj => "title" in obj, get: obj => obj.title, set: (obj, value) => { obj.title = value; } }, metadata: _metadata }, _title_initializers, _title_extraInitializers);
+            __esDecorate(null, null, _dismissible_decorators, { kind: "field", name: "dismissible", static: false, private: false, access: { has: obj => "dismissible" in obj, get: obj => obj.dismissible, set: (obj, value) => { obj.dismissible = value; } }, metadata: _metadata }, _dismissible_initializers, _dismissible_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, _alertElement_decorators, { kind: "field", name: "alertElement", static: false, private: false, access: { has: obj => "alertElement" in obj, get: obj => obj.alertElement, set: (obj, value) => { obj.alertElement = value; } }, metadata: _metadata }, _alertElement_initializers, _alertElement_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        html() {
+            return /*html*/ `
+      <div class="alert ${this.isHidden ? 'alert--hidden' : ''}" role="alert" aria-live="polite">
+        <div part="icon-section"></div>
+        <div class="alert-content">
+          <div part="title-section"></div>
+          <div part="description-section"></div>
+        </div>
+        <div part="dismiss-section"></div>
+      </div>
+    `;
+        }
+        renderIconSection() {
+            const hasIcon = this.icon || this.shouldShowDefaultIcon();
+            return hasIcon ? /*html*/ `
+      <div class="alert-icon ${!this.icon ? 'alert-icon--default' : ''}">
+        ${this.icon || ''}
+      </div>
+    ` : '';
+        }
+        renderTitleSection() {
+            return this.title ? /*html*/ `
+      <div class="alert-title">${this.title}</div>
+    ` : '';
+        }
+        renderDescriptionSection() {
+            return /*html*/ `
+      <div class="alert-description">
+        <slot></slot>
+      </div>
+    `;
+        }
+        renderDismissSection() {
+            return this.dismissible ? /*html*/ `
+      <button class="alert-dismiss" type="button" aria-label="Dismiss alert">
+        <svg viewBox="0 0 24 24" fill="currentColor">
+          <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z"/>
+        </svg>
+      </button>
+    ` : '';
+        }
+        css() {
+            return css;
+        }
+        shouldShowDefaultIcon() {
+            // Show default icons for variants unless explicitly disabled
+            return this.icon !== 'none';
+        }
+        handleDismiss() {
+            this.hide();
+            return {
+                variant: this.variant,
+                title: this.title
+            };
+        }
+        handleAnimationEnd(event) {
+            if (event.animationName === 'slideOut') {
+                this.isHidden = true;
+                if (this.alertElement) {
+                    this.alertElement.classList.add('alert--hidden');
+                    this.alertElement.classList.remove('alert--hiding');
+                }
+                this.dispatchAlertHidden();
+            }
+        }
+        dispatchAlertHidden() {
+            return {
+                variant: this.variant,
+                title: this.title
+            };
+        }
+        dispatchAlertShown() {
+            return {
+                variant: this.variant,
+                title: this.title
+            };
+        }
+        show() {
+            this.isHidden = false;
+            if (this.alertElement) {
+                this.alertElement.classList.remove('alert--hidden', 'alert--hiding');
+            }
+            this.dispatchAlertShown();
+        }
+        hide() {
+            if (this.alertElement && !this.isHidden) {
+                this.alertElement.classList.add('alert--hiding');
+            }
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceAlert };
+//# sourceMappingURL=snice-alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"snice-alert.js","sources":["../../../components/alert/snice-alert.css?inline","../../../../components/alert/snice-alert.ts"],"sourcesContent":["export default \":host {\\n  display: block;\\n  --alert-padding: 0.75rem 1rem; /* 12px 16px */\\n  --alert-border-radius: 6px;\\n  --alert-font-size: 0.875rem; /* 14px */\\n  --alert-icon-size: 1.25rem; /* 20px */\\n  --alert-border-width: 1px;\\n}\\n\\n.alert {\\n  display: flex;\\n  align-items: flex-start;\\n  padding: var(--alert-padding);\\n  border-radius: var(--alert-border-radius);\\n  font-size: var(--alert-font-size);\\n  line-height: 1.5;\\n  border: var(--alert-border-width) solid;\\n  position: relative;\\n  animation: slideIn 0.3s ease;\\n}\\n\\n.alert--hidden {\\n  display: none;\\n}\\n\\n@keyframes slideIn {\\n  from {\\n    opacity: 0;\\n    transform: translateY(-10px);\\n  }\\n  to {\\n    opacity: 1;\\n    transform: translateY(0);\\n  }\\n}\\n\\n@keyframes slideOut {\\n  from {\\n    opacity: 1;\\n    transform: translateY(0);\\n  }\\n  to {\\n    opacity: 0;\\n    transform: translateY(-10px);\\n  }\\n}\\n\\n.alert--hiding {\\n  animation: slideOut 0.3s ease forwards;\\n}\\n\\n/* Variants */\\n:host([variant=\\\"info\\\"]) .alert {\\n  background: rgb(var(--snice-color-blue-50, 239 246 255));\\n  border-color: rgb(var(--snice-color-blue-200, 191 219 254));\\n  color: rgb(var(--snice-color-blue-900, 30 58 138));\\n}\\n\\n:host([variant=\\\"success\\\"]) .alert {\\n  background: rgb(var(--snice-color-green-50, 240 253 244));\\n  border-color: rgb(var(--snice-color-green-200, 187 247 208));\\n  color: rgb(var(--snice-color-green-900, 20 83 45));\\n}\\n\\n:host([variant=\\\"warning\\\"]) .alert {\\n  background: rgb(var(--snice-color-yellow-50, 254 252 232));\\n  border-color: rgb(var(--snice-color-yellow-200, 254 240 138));\\n  color: rgb(var(--snice-color-yellow-900, 113 63 18));\\n}\\n\\n:host([variant=\\\"error\\\"]) .alert {\\n  background: rgb(var(--snice-color-red-50, 254 242 242));\\n  border-color: rgb(var(--snice-color-red-200, 254 202 202));\\n  color: rgb(var(--snice-color-red-900, 127 29 29));\\n}\\n\\n/* Icon */\\n.alert-icon {\\n  flex-shrink: 0;\\n  width: var(--alert-icon-size);\\n  height: var(--alert-icon-size);\\n  margin-right: 0.75rem; /* 12px */\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n}\\n\\n.alert-icon svg {\\n  width: 100%;\\n  height: 100%;\\n}\\n\\n/* Default icons */\\n:host([variant=\\\"info\\\"]) .alert-icon--default::before {\\n  content: \\\"ℹ\\\";\\n  font-size: 1.125rem; /* 18px */\\n  font-weight: bold;\\n}\\n\\n:host([variant=\\\"success\\\"]) .alert-icon--default::before {\\n  content: \\\"✓\\\";\\n  font-size: 1rem; /* 16px */\\n  font-weight: bold;\\n}\\n\\n:host([variant=\\\"warning\\\"]) .alert-icon--default::before {\\n  content: \\\"⚠\\\";\\n  font-size: 1.125rem; /* 18px */\\n}\\n\\n:host([variant=\\\"error\\\"]) .alert-icon--default::before {\\n  content: \\\"✕\\\";\\n  font-size: 1rem; /* 16px */\\n  font-weight: bold;\\n}\\n\\n/* Content */\\n.alert-content {\\n  flex: 1;\\n  min-width: 0;\\n}\\n\\n.alert-title {\\n  font-weight: 600;\\n  margin-bottom: 0.25rem; /* 4px */\\n}\\n\\n.alert-title:empty {\\n  display: none;\\n}\\n\\n.alert-description {\\n  color: inherit;\\n  opacity: 0.9;\\n}\\n\\n/* Dismiss button */\\n.alert-dismiss {\\n  flex-shrink: 0;\\n  margin-left: 0.75rem; /* 12px */\\n  margin-right: -0.25rem; /* -4px */\\n  padding: 0.25rem; /* 4px */\\n  background: none;\\n  border: none;\\n  cursor: pointer;\\n  opacity: 0.6;\\n  transition: opacity 0.2s ease;\\n  border-radius: 4px;\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  color: inherit;\\n}\\n\\n.alert-dismiss:hover {\\n  opacity: 1;\\n}\\n\\n.alert-dismiss:focus-visible {\\n  outline: 2px solid currentColor;\\n  outline-offset: 2px; /* Keep px for crisp outline */\\n}\\n\\n.alert-dismiss svg {\\n  width: 1rem; /* 16px */\\n  height: 1rem; /* 16px */\\n}\\n\\n/* Sizes */\\n:host([size=\\\"small\\\"]) {\\n  --alert-padding: 0.5rem 0.75rem; /* 8px 12px */\\n  --alert-font-size: 0.75rem; /* 12px */\\n  --alert-icon-size: 1rem; /* 16px */\\n  --alert-border-radius: 4px;\\n}\\n\\n:host([size=\\\"large\\\"]) {\\n  --alert-padding: 1rem 1.25rem; /* 16px 20px */\\n  --alert-font-size: 1rem; /* 16px */\\n  --alert-icon-size: 1.5rem; /* 24px */\\n  --alert-border-radius: 8px;\\n}\\n\\n/* Accessibility */\\n.sr-only {\\n  position: absolute;\\n  width: 1px;\\n  height: 1px;\\n  padding: 0;\\n  margin: -1px;\\n  overflow: hidden;\\n  clip: rect(0, 0, 0, 0);\\n  white-space: nowrap;\\n  border: 0;\\n}\";",null],"names":[],"mappings":"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"}

package/{components/alert/snice-alert.types.ts → dist/components/alert/snice-alert.types.d.ts}

@@ -1,12 +1,11 @@
 export type AlertVariant = 'info' | 'success' | 'warning' | 'error';
 export type AlertSize = 'small' | 'medium' | 'large';
-
 export interface SniceAlertElement extends HTMLElement {
-  variant: AlertVariant;
-  size: AlertSize;
-  title: string;
-  dismissible: boolean;
-  icon: string;
-  show(): void;
-  hide(): void;
-}
+    variant: AlertVariant;
+    size: AlertSize;
+    title: string;
+    dismissible: boolean;
+    icon: string;
+    show(): void;
+    hide(): void;
+}

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

@@ -0,0 +1,24 @@
+import type { AvatarSize, AvatarShape, SniceAvatarElement } from './snice-avatar.types';
+export declare class SniceAvatar extends HTMLElement implements SniceAvatarElement {
+    src: string;
+    alt: string;
+    name: string;
+    size: AvatarSize;
+    shape: AvatarShape;
+    fallbackColor: string;
+    fallbackBackground: string;
+    imageElement?: HTMLImageElement;
+    fallbackElement?: HTMLElement;
+    private imageError;
+    html(): string;
+    renderImageSection(): string;
+    renderFallbackSection(): string;
+    css(): string;
+    init(): void;
+    private setupImageHandlers;
+    handleImageLoad(): void;
+    handleImageError(): void;
+    getInitials(name: string): string;
+    private getColorClass;
+    private renderIcon;
+}

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

@@ -0,0 +1,180 @@
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, query, watch, part, ready, on } from 'snice';
+
+var css = ":host {\n  display: inline-block;\n  --avatar-size: 2.5rem; /* 40px */\n  --avatar-bg: #6b7280;\n  --avatar-color: #ffffff;\n}\n\n.avatar {\n  position: relative;\n  width: var(--avatar-size);\n  height: var(--avatar-size);\n  overflow: hidden;\n  background: var(--avatar-bg);\n  color: var(--avatar-color);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  user-select: none;\n}\n\n/* Shapes */\n:host([shape=\"circle\"]) .avatar {\n  border-radius: 50%;\n}\n\n:host([shape=\"square\"]) .avatar {\n  border-radius: 0;\n}\n\n:host([shape=\"rounded\"]) .avatar {\n  border-radius: 8px;\n}\n\n/* Sizes */\n:host([size=\"xs\"]) {\n  --avatar-size: 1.5rem; /* 24px */\n  font-size: 0.625rem; /* 10px */\n}\n\n:host([size=\"small\"]) {\n  --avatar-size: 2rem; /* 32px */\n  font-size: 0.75rem; /* 12px */\n}\n\n:host([size=\"medium\"]) {\n  --avatar-size: 2.5rem; /* 40px */\n  font-size: 0.875rem; /* 14px */\n}\n\n:host([size=\"large\"]) {\n  --avatar-size: 3rem; /* 48px */\n  font-size: 1rem; /* 16px */\n}\n\n:host([size=\"xl\"]) {\n  --avatar-size: 4rem; /* 64px */\n  font-size: 1.25rem; /* 20px */\n}\n\n:host([size=\"xxl\"]) {\n  --avatar-size: 6rem; /* 96px */\n  font-size: 2rem; /* 32px */\n}\n\n/* Image */\n.avatar-image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n}\n\n.avatar-image--error {\n  display: none;\n}\n\n/* Fallback */\n.avatar-fallback {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  visibility: hidden;\n  transition: opacity 0.2s ease;\n}\n\n.avatar-fallback--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n.avatar-icon {\n  width: 60%;\n  height: 60%;\n  opacity: 0.9;\n}\n\n/* Avatar color classes for fallback backgrounds */\n.avatar--red { background: rgb(var(--avatar-color-red, 239 68 68)); }\n.avatar--orange { background: rgb(var(--avatar-color-orange, 251 146 60)); }\n.avatar--yellow { background: rgb(var(--avatar-color-yellow, 234 179 8)); }\n.avatar--lime { background: rgb(var(--avatar-color-lime, 163 230 53)); }\n.avatar--green { background: rgb(var(--avatar-color-green, 34 197 94)); }\n.avatar--teal { background: rgb(var(--avatar-color-teal, 20 184 166)); }\n.avatar--cyan { background: rgb(var(--avatar-color-cyan, 6 182 212)); }\n.avatar--sky { background: rgb(var(--avatar-color-sky, 14 165 233)); }\n.avatar--blue { background: rgb(var(--avatar-color-blue, 59 130 246)); }\n.avatar--indigo { background: rgb(var(--avatar-color-indigo, 99 102 241)); }\n.avatar--violet { background: rgb(var(--avatar-color-violet, 139 92 246)); }\n.avatar--purple { background: rgb(var(--avatar-color-purple, 168 85 247)); }\n.avatar--fuchsia { background: rgb(var(--avatar-color-fuchsia, 217 70 239)); }\n.avatar--pink { background: rgb(var(--avatar-color-pink, 236 72 153)); }\n.avatar--rose { background: rgb(var(--avatar-color-rose, 244 63 94)); }\n\n/* Group avatar support */\n:host(.avatar-group-item) {\n  margin-left: -0.5rem; /* -8px */\n  border: 2px solid white; /* Keep px for crisp borders */\n  border-radius: 50%;\n}\n\n:host(.avatar-group-item:first-child) {\n  margin-left: 0;\n}\n\n:host(.avatar-group-item) .avatar {\n  border: 2px solid white;\n}";
+
+let SniceAvatar = (() => {
+    let _classDecorators = [element('snice-avatar')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _src_decorators;
+    let _src_initializers = [];
+    let _src_extraInitializers = [];
+    let _alt_decorators;
+    let _alt_initializers = [];
+    let _alt_extraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _shape_decorators;
+    let _shape_initializers = [];
+    let _shape_extraInitializers = [];
+    let _fallbackColor_decorators;
+    let _fallbackColor_initializers = [];
+    let _fallbackColor_extraInitializers = [];
+    let _fallbackBackground_decorators;
+    let _fallbackBackground_initializers = [];
+    let _fallbackBackground_extraInitializers = [];
+    let _imageElement_decorators;
+    let _imageElement_initializers = [];
+    let _imageElement_extraInitializers = [];
+    let _fallbackElement_decorators;
+    let _fallbackElement_initializers = [];
+    let _fallbackElement_extraInitializers = [];
+    let _renderImageSection_decorators;
+    let _renderFallbackSection_decorators;
+    let _init_decorators;
+    let _handleImageLoad_decorators;
+    let _handleImageError_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.src = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _src_initializers, ''));
+            this.alt = (__runInitializers(this, _src_extraInitializers), __runInitializers(this, _alt_initializers, ''));
+            this.name = (__runInitializers(this, _alt_extraInitializers), __runInitializers(this, _name_initializers, ''));
+            this.size = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _size_initializers, 'medium'));
+            this.shape = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _shape_initializers, 'circle'));
+            this.fallbackColor = (__runInitializers(this, _shape_extraInitializers), __runInitializers(this, _fallbackColor_initializers, '#ffffff'));
+            this.fallbackBackground = (__runInitializers(this, _fallbackColor_extraInitializers), __runInitializers(this, _fallbackBackground_initializers, ''));
+            this.imageElement = (__runInitializers(this, _fallbackBackground_extraInitializers), __runInitializers(this, _imageElement_initializers, void 0));
+            this.fallbackElement = (__runInitializers(this, _imageElement_extraInitializers), __runInitializers(this, _fallbackElement_initializers, void 0));
+            this.imageError = (__runInitializers(this, _fallbackElement_extraInitializers), false);
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _src_decorators = [property({ reflect: true })];
+            _alt_decorators = [property({ reflect: true })];
+            _name_decorators = [property({ reflect: true })];
+            _size_decorators = [property({ reflect: true })];
+            _shape_decorators = [property({ reflect: true })];
+            _fallbackColor_decorators = [property({ attribute: 'fallback-color', reflect: true })];
+            _fallbackBackground_decorators = [property({ attribute: 'fallback-background', reflect: true })];
+            _imageElement_decorators = [query('.avatar-image')];
+            _fallbackElement_decorators = [query('.avatar-fallback')];
+            _renderImageSection_decorators = [watch('src'), part('image-section')];
+            _renderFallbackSection_decorators = [watch('name'), part('fallback-section')];
+            _init_decorators = [ready()];
+            _handleImageLoad_decorators = [on('load', '.avatar-image')];
+            _handleImageError_decorators = [on('error', '.avatar-image')];
+            __esDecorate(this, null, _renderImageSection_decorators, { kind: "method", name: "renderImageSection", static: false, private: false, access: { has: obj => "renderImageSection" in obj, get: obj => obj.renderImageSection }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _renderFallbackSection_decorators, { kind: "method", name: "renderFallbackSection", static: false, private: false, access: { has: obj => "renderFallbackSection" in obj, get: obj => obj.renderFallbackSection }, 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, _handleImageLoad_decorators, { kind: "method", name: "handleImageLoad", static: false, private: false, access: { has: obj => "handleImageLoad" in obj, get: obj => obj.handleImageLoad }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _handleImageError_decorators, { kind: "method", name: "handleImageError", static: false, private: false, access: { has: obj => "handleImageError" in obj, get: obj => obj.handleImageError }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _src_decorators, { kind: "field", name: "src", static: false, private: false, access: { has: obj => "src" in obj, get: obj => obj.src, set: (obj, value) => { obj.src = value; } }, metadata: _metadata }, _src_initializers, _src_extraInitializers);
+            __esDecorate(null, null, _alt_decorators, { kind: "field", name: "alt", static: false, private: false, access: { has: obj => "alt" in obj, get: obj => obj.alt, set: (obj, value) => { obj.alt = value; } }, metadata: _metadata }, _alt_initializers, _alt_extraInitializers);
+            __esDecorate(null, null, _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, _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, _shape_decorators, { kind: "field", name: "shape", static: false, private: false, access: { has: obj => "shape" in obj, get: obj => obj.shape, set: (obj, value) => { obj.shape = value; } }, metadata: _metadata }, _shape_initializers, _shape_extraInitializers);
+            __esDecorate(null, null, _fallbackColor_decorators, { kind: "field", name: "fallbackColor", static: false, private: false, access: { has: obj => "fallbackColor" in obj, get: obj => obj.fallbackColor, set: (obj, value) => { obj.fallbackColor = value; } }, metadata: _metadata }, _fallbackColor_initializers, _fallbackColor_extraInitializers);
+            __esDecorate(null, null, _fallbackBackground_decorators, { kind: "field", name: "fallbackBackground", static: false, private: false, access: { has: obj => "fallbackBackground" in obj, get: obj => obj.fallbackBackground, set: (obj, value) => { obj.fallbackBackground = value; } }, metadata: _metadata }, _fallbackBackground_initializers, _fallbackBackground_extraInitializers);
+            __esDecorate(null, null, _imageElement_decorators, { kind: "field", name: "imageElement", static: false, private: false, access: { has: obj => "imageElement" in obj, get: obj => obj.imageElement, set: (obj, value) => { obj.imageElement = value; } }, metadata: _metadata }, _imageElement_initializers, _imageElement_extraInitializers);
+            __esDecorate(null, null, _fallbackElement_decorators, { kind: "field", name: "fallbackElement", static: false, private: false, access: { has: obj => "fallbackElement" in obj, get: obj => obj.fallbackElement, set: (obj, value) => { obj.fallbackElement = value; } }, metadata: _metadata }, _fallbackElement_initializers, _fallbackElement_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        html() {
+            const colorClass = this.fallbackBackground ? '' : this.getColorClass(this.name);
+            const bgStyle = this.fallbackBackground ? `style="--avatar-bg: ${this.fallbackBackground}; --avatar-color: ${this.fallbackColor}"` : '';
+            return /*html*/ `
+      <div class="avatar ${colorClass}" ${bgStyle}>
+        <div part="image-section"></div>
+        <div part="fallback-section"></div>
+      </div>
+    `;
+        }
+        renderImageSection() {
+            return this.src ? /*html*/ `
+      <img class="avatar-image ${this.imageError ? 'avatar-image--error' : ''}" 
+           src="${this.src}" 
+           alt="${this.alt || this.name}"
+           loading="lazy">
+    ` : '';
+        }
+        renderFallbackSection() {
+            const initials = this.getInitials(this.name);
+            return /*html*/ `
+      <div class="avatar-fallback ${!this.src || this.imageError ? 'avatar-fallback--visible' : ''}">
+        ${initials || this.renderIcon()}
+      </div>
+    `;
+        }
+        css() {
+            return css;
+        }
+        init() {
+            this.setupImageHandlers();
+        }
+        setupImageHandlers() {
+            if (this.imageElement) {
+                this.imageElement.addEventListener('load', this.handleImageLoad.bind(this));
+                this.imageElement.addEventListener('error', this.handleImageError.bind(this));
+            }
+        }
+        handleImageLoad() {
+            this.imageError = false;
+            this.renderImageSection();
+            this.renderFallbackSection();
+        }
+        handleImageError() {
+            this.imageError = true;
+            this.renderImageSection();
+            this.renderFallbackSection();
+        }
+        getInitials(name) {
+            if (!name)
+                return '';
+            const words = name.trim().split(/\s+/);
+            if (words.length === 1) {
+                return words[0].substring(0, 2).toUpperCase();
+            }
+            return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+        }
+        getColorClass(name) {
+            if (!name)
+                return '';
+            const colors = [
+                'red', 'orange', 'yellow', 'lime', 'green',
+                'teal', 'cyan', 'sky', 'blue', 'indigo',
+                'violet', 'purple', 'fuchsia', 'pink', 'rose'
+            ];
+            // Hash the name to get a consistent index
+            let hash = 0;
+            for (let i = 0; i < name.length; i++) {
+                hash = name.charCodeAt(i) + ((hash << 5) - hash);
+            }
+            const colorIndex = Math.abs(hash) % colors.length;
+            return `avatar--${colors[colorIndex]}`;
+        }
+        renderIcon() {
+            return /*html*/ `
+      <svg class="avatar-icon" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+      </svg>
+    `;
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceAvatar };
+//# sourceMappingURL=snice-avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"snice-avatar.js","sources":["../../../components/avatar/snice-avatar.css?inline","../../../../components/avatar/snice-avatar.ts"],"sourcesContent":["export default \":host {\\n  display: inline-block;\\n  --avatar-size: 2.5rem; /* 40px */\\n  --avatar-bg: #6b7280;\\n  --avatar-color: #ffffff;\\n}\\n\\n.avatar {\\n  position: relative;\\n  width: var(--avatar-size);\\n  height: var(--avatar-size);\\n  overflow: hidden;\\n  background: var(--avatar-bg);\\n  color: var(--avatar-color);\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  font-weight: 600;\\n  user-select: none;\\n}\\n\\n/* Shapes */\\n:host([shape=\\\"circle\\\"]) .avatar {\\n  border-radius: 50%;\\n}\\n\\n:host([shape=\\\"square\\\"]) .avatar {\\n  border-radius: 0;\\n}\\n\\n:host([shape=\\\"rounded\\\"]) .avatar {\\n  border-radius: 8px;\\n}\\n\\n/* Sizes */\\n:host([size=\\\"xs\\\"]) {\\n  --avatar-size: 1.5rem; /* 24px */\\n  font-size: 0.625rem; /* 10px */\\n}\\n\\n:host([size=\\\"small\\\"]) {\\n  --avatar-size: 2rem; /* 32px */\\n  font-size: 0.75rem; /* 12px */\\n}\\n\\n:host([size=\\\"medium\\\"]) {\\n  --avatar-size: 2.5rem; /* 40px */\\n  font-size: 0.875rem; /* 14px */\\n}\\n\\n:host([size=\\\"large\\\"]) {\\n  --avatar-size: 3rem; /* 48px */\\n  font-size: 1rem; /* 16px */\\n}\\n\\n:host([size=\\\"xl\\\"]) {\\n  --avatar-size: 4rem; /* 64px */\\n  font-size: 1.25rem; /* 20px */\\n}\\n\\n:host([size=\\\"xxl\\\"]) {\\n  --avatar-size: 6rem; /* 96px */\\n  font-size: 2rem; /* 32px */\\n}\\n\\n/* Image */\\n.avatar-image {\\n  width: 100%;\\n  height: 100%;\\n  object-fit: cover;\\n  display: block;\\n}\\n\\n.avatar-image--error {\\n  display: none;\\n}\\n\\n/* Fallback */\\n.avatar-fallback {\\n  position: absolute;\\n  inset: 0;\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n  opacity: 0;\\n  visibility: hidden;\\n  transition: opacity 0.2s ease;\\n}\\n\\n.avatar-fallback--visible {\\n  opacity: 1;\\n  visibility: visible;\\n}\\n\\n.avatar-icon {\\n  width: 60%;\\n  height: 60%;\\n  opacity: 0.9;\\n}\\n\\n/* Avatar color classes for fallback backgrounds */\\n.avatar--red { background: rgb(var(--avatar-color-red, 239 68 68)); }\\n.avatar--orange { background: rgb(var(--avatar-color-orange, 251 146 60)); }\\n.avatar--yellow { background: rgb(var(--avatar-color-yellow, 234 179 8)); }\\n.avatar--lime { background: rgb(var(--avatar-color-lime, 163 230 53)); }\\n.avatar--green { background: rgb(var(--avatar-color-green, 34 197 94)); }\\n.avatar--teal { background: rgb(var(--avatar-color-teal, 20 184 166)); }\\n.avatar--cyan { background: rgb(var(--avatar-color-cyan, 6 182 212)); }\\n.avatar--sky { background: rgb(var(--avatar-color-sky, 14 165 233)); }\\n.avatar--blue { background: rgb(var(--avatar-color-blue, 59 130 246)); }\\n.avatar--indigo { background: rgb(var(--avatar-color-indigo, 99 102 241)); }\\n.avatar--violet { background: rgb(var(--avatar-color-violet, 139 92 246)); }\\n.avatar--purple { background: rgb(var(--avatar-color-purple, 168 85 247)); }\\n.avatar--fuchsia { background: rgb(var(--avatar-color-fuchsia, 217 70 239)); }\\n.avatar--pink { background: rgb(var(--avatar-color-pink, 236 72 153)); }\\n.avatar--rose { background: rgb(var(--avatar-color-rose, 244 63 94)); }\\n\\n/* Group avatar support */\\n:host(.avatar-group-item) {\\n  margin-left: -0.5rem; /* -8px */\\n  border: 2px solid white; /* Keep px for crisp borders */\\n  border-radius: 50%;\\n}\\n\\n:host(.avatar-group-item:first-child) {\\n  margin-left: 0;\\n}\\n\\n:host(.avatar-group-item) .avatar {\\n  border: 2px solid white;\\n}\";",null],"names":[],"mappings":"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"}

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

@@ -0,0 +1,12 @@
+export type AvatarSize = 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl';
+export type AvatarShape = 'circle' | 'square' | 'rounded';
+export interface SniceAvatarElement extends HTMLElement {
+    src: string;
+    alt: string;
+    name: string;
+    size: AvatarSize;
+    shape: AvatarShape;
+    fallbackColor: string;
+    fallbackBackground: string;
+    getInitials(name: string): string;
+}

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

@@ -0,0 +1,25 @@
+import type { BadgeVariant, BadgePosition, BadgeSize, SniceBadgeElement } from './snice-badge.types';
+export declare class SniceBadge extends HTMLElement implements SniceBadgeElement {
+    content: string;
+    count: number;
+    max: number;
+    dot: boolean;
+    variant: BadgeVariant;
+    position: BadgePosition;
+    inline: boolean;
+    size: BadgeSize;
+    pulse: boolean;
+    offset: number;
+    badgeElement?: HTMLElement;
+    html(): string;
+    renderBadgeSection(): string;
+    css(): string;
+    private getDisplayContent;
+    private shouldShowBadge;
+    init(): void;
+    updateOffset(): void;
+    setBadgeContent(content: string): void;
+    setBadgeCount(count: number): void;
+    showDot(): void;
+    hide(): void;
+}