snice 2.1.5 → 2.2.0

package/components/tabs/snice-tab-panel.css

@@ -1,264 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-}
-
-:host([hidden]) {
-  display: none !important;
-}
-
-/* During transitions, position absolutely to overlap */
-:host([transition-in]),
-:host([transition-out]) {
-  position: absolute !important;
-  /* Use parent's padding variable, fallback to default */
-  --panel-padding: var(--snice-tabs-panel-padding, var(--snice-spacing-md, 1rem));
-  top: var(--panel-padding);
-  left: var(--panel-padding);
-  right: var(--panel-padding);
-  width: calc(100% - var(--panel-padding) * 2);
-}
-
-/* Outgoing panel should be behind incoming */
-:host([transition-out]) {
-  z-index: 1;
-}
-
-:host([transition-in]) {
-  z-index: 2;
-}
-
-.tab-panel {
-  display: block;
-  width: 100%;
-}
-
-/* Get timing from parent or use defaults */
-:host([transition-in]),
-:host([transition-out]) {
-  --transition-duration: var(--snice-tabs-transition-duration, 300ms);
-}
-
-/* Fade transitions */
-:host([transition-in="fade"]) {
-  animation: fadeIn var(--transition-duration, 200ms) ease-in-out;
-}
-
-:host([transition-out="fade"]) {
-  animation: fadeOut var(--transition-duration, 200ms) ease-in-out;
-}
-
-/* Scale transitions */
-:host([transition-in="scale"]) {
-  animation: scaleIn var(--transition-duration, 250ms) ease-in-out;
-}
-
-:host([transition-out="scale"]) {
-  animation: scaleOut var(--transition-duration, 250ms) ease-in-out;
-}
-
-/* Slide transitions */
-:host([transition-in="slide"]) {
-  animation: slideIn var(--transition-duration, 300ms) ease-in-out;
-}
-
-:host([transition-out="slide"]) {
-  animation: slideOut var(--transition-duration, 300ms) ease-in-out;
-}
-
-/* Slide right transitions */
-:host([transition-in="slide-right"]) {
-  animation: slideRightIn var(--transition-duration, 300ms) ease-in-out;
-}
-
-:host([transition-out="slide-right"]) {
-  animation: slideRightOut var(--transition-duration, 300ms) ease-in-out;
-}
-
-/* Slide up transitions */
-:host([transition-in="slide-up"]) {
-  animation: slideUpIn var(--transition-duration, 300ms) ease-in-out;
-}
-
-:host([transition-out="slide-up"]) {
-  animation: slideUpOut var(--transition-duration, 300ms) ease-in-out;
-}
-
-/* Slide down transitions */
-:host([transition-in="slide-down"]) {
-  animation: slideDownIn var(--transition-duration, 300ms) ease-in-out;
-}
-
-:host([transition-out="slide-down"]) {
-  animation: slideDownOut var(--transition-duration, 300ms) ease-in-out;
-}
-
-/* Zoom transitions */
-:host([transition-in="zoom"]) {
-  animation: zoomIn var(--transition-duration, 300ms) ease-in-out;
-}
-
-:host([transition-out="zoom"]) {
-  animation: zoomOut var(--transition-duration, 300ms) ease-in-out;
-}
-
-/* Rotate transitions */
-:host([transition-in="rotate"]) {
-  animation: rotateIn var(--transition-duration, 400ms) ease-in-out;
-}
-
-:host([transition-out="rotate"]) {
-  animation: rotateOut var(--transition-duration, 400ms) ease-in-out;
-}
-
-/* Flip transitions */
-:host([transition-in="flip"]) {
-  animation: flipIn var(--transition-duration, 400ms) ease-in-out;
-}
-
-:host([transition-out="flip"]) {
-  animation: flipOut var(--transition-duration, 400ms) ease-in-out;
-}
-
-/* Keyframes */
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes fadeOut {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}
-
-@keyframes scaleIn {
-  from { 
-    transform: scale(0.9);
-    opacity: 0;
-  }
-  to { 
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes scaleOut {
-  from { 
-    transform: scale(1);
-    opacity: 1;
-  }
-  to { 
-    transform: scale(0.9);
-    opacity: 0;
-  }
-}
-
-@keyframes slideIn {
-  from { transform: translateX(-100%); }
-  to { transform: translateX(0); }
-}
-
-@keyframes slideOut {
-  from { transform: translateX(0); }
-  to { transform: translateX(-100%); }
-}
-
-@keyframes slideRightIn {
-  from { transform: translateX(100%); }
-  to { transform: translateX(0); }
-}
-
-@keyframes slideRightOut {
-  from { transform: translateX(0); }
-  to { transform: translateX(100%); }
-}
-
-@keyframes slideUpIn {
-  from { transform: translateY(-100%); }
-  to { transform: translateY(0); }
-}
-
-@keyframes slideUpOut {
-  from { transform: translateY(0); }
-  to { transform: translateY(-100%); }
-}
-
-@keyframes slideDownIn {
-  from { transform: translateY(100%); }
-  to { transform: translateY(0); }
-}
-
-@keyframes slideDownOut {
-  from { transform: translateY(0); }
-  to { transform: translateY(100%); }
-}
-
-@keyframes zoomIn {
-  from { 
-    transform: scale(2);
-    opacity: 0;
-  }
-  to { 
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes zoomOut {
-  from { 
-    transform: scale(1);
-    opacity: 1;
-  }
-  to { 
-    transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@keyframes rotateIn {
-  from { 
-    transform: rotate(180deg) scale(0.5);
-    opacity: 0;
-  }
-  to { 
-    transform: rotate(0) scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes rotateOut {
-  from { 
-    transform: rotate(0) scale(1);
-    opacity: 1;
-  }
-  to { 
-    transform: rotate(180deg) scale(0.5);
-    opacity: 0;
-  }
-}
-
-@keyframes flipIn {
-  from { 
-    transform: rotateY(180deg);
-    opacity: 0;
-  }
-  to { 
-    transform: rotateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes flipOut {
-  from { 
-    transform: rotateY(0);
-    opacity: 1;
-  }
-  to { 
-    transform: rotateY(180deg);
-    opacity: 0;
-  }
-}
-
-::slotted(*) {
-  display: block;
-}

package/components/tabs/snice-tab-panel.ts

@@ -1,47 +0,0 @@
-import { element, property, watch } from 'snice';
-import css from './snice-tab-panel.css?inline';
-import type { SniceTabPanelElement } from './snice-tabs.types';
-
-@element('snice-tab-panel')
-export class SniceTabPanel extends HTMLElement implements SniceTabPanelElement {
-  @property({ reflect: true })
-  name = '';
-
-  @property({ reflect: true })
-  transitionIn = '';
-
-  @property({ reflect: true })
-  transitionOut = '';
-
-  @property({ reflect: true })
-  transitioning: 'in' | 'out' | '' = '';
-
-  @property({ type: Number, reflect: true })
-  transitionDuration = 300;
-
-  @watch('transitionIn')
-  handleTransitionIn() {
-    if (this.transitionIn) {
-      this.transitioning = 'in';
-    }
-  }
-
-  @watch('transitionOut')
-  handleTransitionOut() {
-    if (this.transitionOut) {
-      this.transitioning = 'out';
-    }
-  }
-
-  html() {
-    return /*html*/`
-      <div class="tab-panel" part="base">
-        <slot></slot>
-      </div>
-    `;
-  }
-
-  css() {
-    return css;
-  }
-}

package/components/tabs/snice-tab.css

@@ -1,96 +0,0 @@
-:host {
-  display: block;
-  position: relative;
-  cursor: pointer;
-}
-
-:host([disabled]) {
-  cursor: not-allowed;
-}
-
-.tab {
-  display: flex;
-  align-items: center;
-  gap: var(--snice-spacing-xs);
-  padding: var(--snice-spacing-sm) var(--snice-spacing-md);
-  min-height: 3rem; /* 48px */
-  color: var(--snice-color-text-secondary);
-  font-family: var(--snice-font-family);
-  font-size: var(--snice-font-size-md);
-  font-weight: var(--snice-font-weight-medium);
-  background: transparent;
-  border: none;
-  position: relative;
-  transition: color var(--snice-transition-fast) ease,
-              background-color var(--snice-transition-fast) ease;
-  user-select: none;
-  white-space: nowrap;
-  outline: none;
-}
-
-.tab:hover:not(.tab--disabled) {
-  color: var(--snice-color-text);
-  background-color: var(--snice-color-background-secondary);
-}
-
-.tab:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--snice-color-primary);
-  border-radius: var(--snice-border-radius-md);
-}
-
-.tab--disabled {
-  opacity: 0.5;
-  color: var(--snice-color-text-tertiary);
-}
-
-:host(.snice-tab--active) .tab {
-  color: var(--snice-color-primary);
-}
-
-:host(.snice-tab--active) .tab:hover {
-  color: var(--snice-color-primary-hover);
-  background-color: rgb(var(--snice-color-blue-500) / 0.1);
-}
-
-.tab__label {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: var(--snice-spacing-xs);
-}
-
-.tab__close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.25rem; /* 20px */
-  height: 1.25rem; /* 20px */
-  padding: 0;
-  border: none;
-  border-radius: var(--snice-border-radius-sm);
-  background: transparent;
-  color: var(--snice-color-text-tertiary);
-  cursor: pointer;
-  transition: color var(--snice-transition-fast) ease,
-              background-color var(--snice-transition-fast) ease;
-  outline: none;
-}
-
-.tab__close:hover {
-  color: var(--snice-color-text);
-  background-color: var(--snice-color-background-tertiary);
-}
-
-.tab__close:focus-visible {
-  box-shadow: 0 0 0 2px var(--snice-color-primary);
-}
-
-.tab__close svg {
-  display: block;
-}
-
-::slotted(*) {
-  display: flex;
-  align-items: center;
-  gap: var(--snice-spacing-xs);
-}

package/components/tabs/snice-tab.ts

@@ -1,65 +0,0 @@
-import { element, property, query, on, dispatch } from 'snice';
-import css from './snice-tab.css?inline';
-import type { TabSelectDetail, TabCloseDetail, SniceTabElement } from './snice-tabs.types';
-
-@element('snice-tab')
-export class SniceTab extends HTMLElement implements SniceTabElement {
-  @property({ type: Boolean, reflect: true })
-  disabled = false;
-
-  @property({ type: Boolean, reflect: true })
-  closable = false;
-
-  @query('.tab')
-  tab?: HTMLElement;
-
-  @query('.tab__close')
-  closeButton?: HTMLButtonElement;
-
-  html() {
-    return /*html*/`
-      <div class="tab ${this.disabled ? 'tab--disabled' : ''}" part="base" tabindex="0">
-        <span class="tab__label" part="label">
-          <slot></slot>
-        </span>
-        ${this.closable ? /*html*/`
-          <button class="tab__close" part="close" tabindex="-1" aria-label="Close tab">
-            <svg viewBox="0 0 24 24" width="14" height="14">
-              <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>
-    `;
-  }
-
-  css() {
-    return css;
-  }
-
-  @on('click', '.tab__close')
-  @dispatch('@snice/close')
-  handleClose(event: MouseEvent): TabCloseDetail {
-    event.stopPropagation();
-    return { tab: this } as TabCloseDetail;
-  }
-
-  @on('click')
-  @dispatch('@snice/tab-select')
-  handleClick(event: MouseEvent): TabSelectDetail | undefined {
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
-    return { tab: this } as TabSelectDetail;
-  }
-
-  focus(options?: FocusOptions) {
-    this.tab?.focus(options);
-  }
-
-  blur() {
-    this.tab?.blur();
-  }
-}

package/components/tabs/snice-tabs.css

@@ -1,189 +0,0 @@
-:host {
-  display: block;
-  position: relative;
-  /* CSS custom properties for child components */
-  --snice-tabs-panel-padding: var(--snice-spacing-md);
-  --snice-tabs-transition-duration: 300ms;
-}
-
-.tabs {
-  display: flex;
-  width: 100%;
-}
-
-.tabs--top {
-  flex-direction: column;
-}
-
-.tabs--bottom {
-  flex-direction: column-reverse;
-}
-
-.tabs--start {
-  flex-direction: row;
-}
-
-.tabs--end {
-  flex-direction: row-reverse;
-}
-
-.tabs__nav-container {
-  display: flex;
-  position: relative;
-  border-bottom: 1px solid var(--snice-color-border);
-}
-
-.tabs--bottom .tabs__nav-container {
-  border-bottom: none;
-  border-top: 1px solid var(--snice-color-border);
-}
-
-.tabs--start .tabs__nav-container,
-.tabs--end .tabs__nav-container {
-  flex-direction: column;
-  border-bottom: none;
-  border-right: 1px solid var(--snice-color-border);
-  min-width: 12.5rem; /* 200px */
-}
-
-.tabs--end .tabs__nav-container {
-  border-right: none;
-  border-left: 1px solid var(--snice-color-border);
-}
-
-.tabs__nav {
-  flex: 1;
-  display: flex;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-  position: relative;
-}
-
-.tabs__nav::-webkit-scrollbar {
-  display: none;
-}
-
-.tabs--start .tabs__nav,
-.tabs--end .tabs__nav {
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-.tabs__nav-track {
-  display: flex;
-  position: relative;
-  align-items: center;
-  min-height: 3rem; /* 48px */
-}
-
-.tabs--start .tabs__nav-track,
-.tabs--end .tabs__nav-track {
-  flex-direction: column;
-  align-items: stretch;
-  width: 100%;
-}
-
-.tabs__indicator {
-  position: absolute;
-  background-color: var(--snice-color-primary);
-  transition: transform var(--snice-transition-medium) ease,
-              width var(--snice-transition-medium) ease,
-              height var(--snice-transition-medium) ease;
-  bottom: 0;
-  left: 0;
-  pointer-events: none;
-}
-
-.tabs--bottom .tabs__indicator {
-  bottom: auto;
-  top: 0;
-}
-
-.tabs--start .tabs__indicator,
-.tabs--end .tabs__indicator {
-  bottom: auto;
-  top: 0;
-  right: 0;
-  left: auto;
-}
-
-.tabs--end .tabs__indicator {
-  right: auto;
-  left: 0;
-}
-
-.tabs__scroll-button {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  width: 2rem; /* 32px */
-  height: 3rem; /* 48px */
-  padding: 0;
-  border: none;
-  background: var(--snice-color-background);
-  color: var(--snice-color-text-secondary);
-  cursor: pointer;
-  transition: color var(--snice-transition-fast) ease,
-              background-color var(--snice-transition-fast) ease,
-              opacity var(--snice-transition-fast) ease;
-}
-
-.tabs__scroll-button--visible {
-  display: flex;
-}
-
-.tabs--start .tabs__scroll-button--visible,
-.tabs--end .tabs__scroll-button--visible {
-  display: flex;
-  width: 100%;
-  height: 2rem; /* 32px */
-}
-
-.tabs__scroll-button:hover:not(.tabs__scroll-button--disabled) {
-  color: var(--snice-color-text);
-  background: var(--snice-color-background-secondary);
-}
-
-.tabs__scroll-button:focus-visible {
-  outline: 2px solid var(--snice-color-primary);
-  outline-offset: -2px;
-}
-
-.tabs__scroll-button--disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-.tabs__scroll-button svg {
-  display: block;
-}
-
-.tabs__panels {
-  flex: 1;
-  padding: var(--snice-tabs-panel-padding);
-  position: relative;
-  /* Prevent scrollbars during transitions */
-  overflow: hidden;
-  /* Maintain minimum height during transitions */
-  min-height: 12.5rem; /* 200px */
-}
-
-::slotted(snice-tab) {
-  flex: 0 0 auto;
-}
-
-.tabs--start ::slotted(snice-tab),
-.tabs--end ::slotted(snice-tab) {
-  width: 100%;
-}
-
-/* Base panel styles */
-::slotted(snice-tab-panel) {
-  display: block;
-}
-
-::slotted(snice-tab-panel[hidden]) {
-  display: none !important;
-}