snice 2.1.5 → 2.2.0

package/components/modal/snice-modal.css

@@ -1,203 +0,0 @@
-:host {
-  --modal-z-index: 1000;
-  --modal-backdrop-bg: rgba(0, 0, 0, 0.5);
-  --modal-panel-bg: var(--snice-color-background, white);
-  --modal-panel-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  --modal-border-radius: var(--snice-border-radius-lg, 8px);
-  --modal-padding: var(--snice-spacing-lg, 1.5rem);
-  --modal-transition-duration: 200ms;
-}
-
-.modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: var(--modal-z-index);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--modal-padding);
-  pointer-events: none;
-  opacity: 0;
-  visibility: hidden;
-}
-
-.modal--open {
-  pointer-events: auto;
-  opacity: 1;
-  visibility: visible;
-}
-
-.modal__backdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--modal-backdrop-bg);
-  opacity: 0;
-  transition: opacity var(--modal-transition-duration) ease;
-}
-
-.modal--open .modal__backdrop {
-  opacity: 1;
-}
-
-.modal__panel {
-  position: relative;
-  background: var(--modal-panel-bg);
-  border-radius: var(--modal-border-radius);
-  box-shadow: var(--modal-panel-shadow);
-  display: flex;
-  flex-direction: column;
-  max-height: calc(100vh - 2 * var(--modal-padding));
-  opacity: 0;
-  transform: scale(0.95) translateY(1.25rem); /* 20px */
-  transition: 
-    opacity var(--modal-transition-duration) ease,
-    transform var(--modal-transition-duration) ease;
-  z-index: 1;
-}
-
-.modal--open .modal__panel {
-  opacity: 1;
-  transform: scale(1) translateY(0);
-}
-
-/* Sizes */
-.modal__panel--small {
-  width: 100%;
-  max-width: 25rem; /* 400px */
-}
-
-.modal__panel--medium {
-  width: 100%;
-  max-width: 37.5rem; /* 600px */
-}
-
-.modal__panel--large {
-  width: 100%;
-  max-width: 56.25rem; /* 900px */
-}
-
-.modal__panel--fullscreen {
-  width: calc(100vw - 2 * var(--modal-padding));
-  height: calc(100vh - 2 * var(--modal-padding));
-  max-width: none;
-}
-
-.modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--modal-padding);
-  border-bottom: 1px solid var(--snice-color-border, #e5e7eb);
-}
-
-.modal__header:empty {
-  display: none;
-}
-
-::slotted([slot="header"]) {
-  flex: 1;
-  margin: 0;
-  font-size: var(--snice-font-size-lg, 1.125rem);
-  font-weight: 600;
-  color: var(--snice-color-text, #111827);
-}
-
-.modal__close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem; /* 32px */
-  height: 2rem; /* 32px */
-  padding: 0;
-  margin-left: auto;
-  background: transparent;
-  border: none;
-  border-radius: var(--snice-border-radius-md, 6px);
-  color: var(--snice-color-text-secondary, #6b7280);
-  cursor: pointer;
-  transition: 
-    background-color var(--snice-transition-fast) ease,
-    color var(--snice-transition-fast) ease;
-}
-
-.modal__close:hover {
-  background: var(--snice-color-background-hover, #f3f4f6);
-  color: var(--snice-color-text, #111827);
-}
-
-.modal__close:focus-visible {
-  outline: 2px solid var(--snice-color-primary, #3b82f6);
-  outline-offset: 2px;
-}
-
-.modal__body {
-  flex: 1;
-  padding: var(--modal-padding);
-  overflow-y: auto;
-  color: var(--snice-color-text, #111827);
-}
-
-.modal__footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--snice-spacing-sm, 0.5rem);
-  padding: var(--modal-padding);
-  border-top: 1px solid var(--snice-color-border, #e5e7eb);
-}
-
-.modal__footer:empty {
-  display: none;
-}
-
-/* Remove borders when header/footer are empty */
-.modal__header:empty + .modal__body {
-  padding-top: var(--modal-padding);
-}
-
-.modal__body:has(+ .modal__footer:empty) {
-  padding-bottom: var(--modal-padding);
-}
-
-/* Animation for entrance from bottom (alternative) */
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(6.25rem); /* 100px */
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* Animation for exit */
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-/* Mobile responsiveness */
-@media (max-width: 640px) {
-  .modal {
-    padding: 0;
-  }
-  
-  .modal__panel:not(.modal__panel--fullscreen) {
-    width: 100%;
-    height: 100%;
-    max-width: none;
-    max-height: none;
-    border-radius: 0;
-  }
-}

package/components/modal/snice-modal.ts

@@ -1,233 +0,0 @@
-import { element, property, query, on, watch, ready, dispatch } from 'snice';
-import css from './snice-modal.css?inline';
-import type { ModalSize, SniceModalElement } from './snice-modal.types';
-
-@element('snice-modal')
-export class SniceModal extends HTMLElement implements SniceModalElement {
-  @property({ type: Boolean, reflect: true })
-  open = false;
-
-  @property({ reflect: true })
-  size: ModalSize = 'medium';
-  
-  private previousSize = 'medium';
-
-  @property({ type: Boolean, attribute: 'no-backdrop-dismiss', reflect: true })
-  noBackdropDismiss = false;
-
-  @property({ type: Boolean, attribute: 'no-escape-dismiss', reflect: true })
-  noEscapeDismiss = false;
-
-  @property({ type: Boolean, attribute: 'no-focus-trap', reflect: true })
-  noFocusTrap = false;
-
-  @property({ type: Boolean, attribute: 'no-close-button', reflect: true })
-  noCloseButton = false;
-
-  @property({ reflect: true })
-  label = '';
-
-  @query('.modal')
-  modal?: HTMLElement;
-
-  @query('.modal__panel')
-  panel?: HTMLElement;
-
-  @query('.modal__backdrop')
-  backdrop?: HTMLElement;
-
-  private previousFocus: HTMLElement | null = null;
-
-  html() {
-    // Renders once - initial state
-    return /*html*/`
-      <div class="modal" 
-           role="dialog" 
-           aria-modal="true"
-           aria-label="${this.label}"
-           aria-hidden="true">
-        <div class="modal__backdrop" part="backdrop"></div>
-        <div class="modal__panel modal__panel--${this.size}" part="panel">
-          <div class="modal__header" part="header">
-            <slot name="header"></slot>
-            <button class="modal__close" part="close" aria-label="Close modal">
-              <svg viewBox="0 0 24 24" width="20" height="20">
-                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>
-              </svg>
-            </button>
-          </div>
-          <div class="modal__body" part="body">
-            <slot></slot>
-          </div>
-          <div class="modal__footer" part="footer">
-            <slot name="footer"></slot>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  css() {
-    return css;
-  }
-
-  @ready()
-  init() {
-    // Make sure modal state is properly initialized
-    if (this.open) {
-      this.showModal();
-    }
-    // Apply initial close button state
-    if (this.noCloseButton) {
-      const closeButton = this.shadowRoot?.querySelector('.modal__close') as HTMLElement;
-      if (closeButton) {
-        closeButton.style.display = 'none';
-      }
-    }
-  }
-
-  @watch('open')
-  handleOpenChange() {
-    // Imperatively update the modal DOM
-    if (this.modal) {
-      if (this.open) {
-        this.modal.classList.add('modal--open');
-        this.modal.setAttribute('aria-hidden', 'false');
-        this.showModal();
-      } else {
-        this.modal.classList.remove('modal--open');
-        this.modal.setAttribute('aria-hidden', 'true');
-        this.hideModal();
-      }
-    }
-  }
-  
-  @watch('size')
-  handleSizeChange() {
-    // Imperatively update the panel size class
-    if (this.panel) {
-      this.panel.classList.remove(`modal__panel--${this.previousSize}`);
-      this.panel.classList.add(`modal__panel--${this.size}`);
-      this.previousSize = this.size;
-    }
-  }
-
-  @watch('noCloseButton')
-  handleCloseButtonChange() {
-    // Imperatively show/hide the close button
-    const closeButton = this.shadowRoot?.querySelector('.modal__close') as HTMLElement;
-    if (closeButton) {
-      closeButton.style.display = this.noCloseButton ? 'none' : '';
-    }
-  }
-
-  @on('click', '.modal__backdrop')
-  handleBackdropClick() {
-    if (!this.noBackdropDismiss) {
-      this.close();
-    }
-  }
-
-  @on('click', '.modal__close')
-  handleCloseClick() {
-    this.close();
-  }
-
-  @on('keydown:Escape', { stopPropagation: true })
-  handleEscape() {
-    if (!this.open) return;
-    if (!this.noEscapeDismiss) {
-      this.close();
-    }
-  }
-
-  @on('keydown:Tab')
-  handleTab(e: KeyboardEvent) {
-    if (!this.open) return;
-    if (!this.noFocusTrap) {
-      this.trapFocus(e);
-    }
-  }
-
-
-  private showModal() {
-    // Store current focus
-    this.previousFocus = document.activeElement as HTMLElement;
-
-    // Lock body scroll
-    document.body.style.overflow = 'hidden';
-
-    // Focus first focusable element or modal itself
-    requestAnimationFrame(() => {
-      const firstFocusable = this.panel?.querySelector<HTMLElement>(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      if (firstFocusable) {
-        firstFocusable.focus();
-      } else {
-        this.panel?.focus();
-      }
-    });
-
-    this.dispatchOpenEvent();
-  }
-
-  private hideModal() {
-    // Restore body scroll
-    document.body.style.overflow = '';
-
-    // Restore previous focus
-    if (this.previousFocus) {
-      this.previousFocus.focus();
-      this.previousFocus = null;
-    }
-
-    this.dispatchCloseEvent();
-  }
-
-  private trapFocus(e: KeyboardEvent) {
-    if (!this.panel) return;
-
-    const focusableElements = this.panel.querySelectorAll<HTMLElement>(
-      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    );
-    
-    const focusable = Array.from(focusableElements);
-    const firstFocusable = focusable[0];
-    const lastFocusable = focusable[focusable.length - 1];
-
-    if (e.shiftKey) {
-      // Shift + Tab
-      if (document.activeElement === firstFocusable) {
-        lastFocusable?.focus();
-        e.preventDefault();
-      }
-    } else {
-      // Tab
-      if (document.activeElement === lastFocusable) {
-        firstFocusable?.focus();
-        e.preventDefault();
-      }
-    }
-  }
-
-  @dispatch('@snice/modal-open', { bubbles: true, composed: true })
-  private dispatchOpenEvent() {
-    return { modal: this };
-  }
-
-  @dispatch('@snice/modal-close', { bubbles: true, composed: true })
-  private dispatchCloseEvent() {
-    return { modal: this };
-  }
-
-  // Public API
-  show() {
-    this.open = true;
-  }
-
-  close() {
-    this.open = false;
-  }
-
-}

package/components/modal/snice-modal.types.ts

@@ -1,21 +0,0 @@
-export type ModalSize = 'small' | 'medium' | 'large' | 'fullscreen';
-
-export interface SniceModalElement extends HTMLElement {
-  open: boolean;
-  size: ModalSize;
-  noBackdropDismiss: boolean;
-  noEscapeDismiss: boolean;
-  noFocusTrap: boolean;
-  noCloseButton: boolean;
-  label: string;
-  show(): void;
-  close(): void;
-}
-
-export interface ModalOpenDetail {
-  modal: SniceModalElement;
-}
-
-export interface ModalCloseDetail {
-  modal: SniceModalElement;
-}