snice 1.14.3 → 2.1.0

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

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

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

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

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

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