snice 1.14.3 → 2.1.0

package/components/modal/snice-modal.css

@@ -0,0 +1,203 @@
+: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

@@ -0,0 +1,233 @@
+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

@@ -0,0 +1,21 @@
+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;
+}