ywana-core8 0.1.75 → 0.1.77

package/src/html/tab.css

@@ -43,3 +43,292 @@
 .tab.small {
   padding: .2rem;
 }
+
+/* Enhanced Tab Styles - New functionality while maintaining compatibility */
+
+/* Enhanced Tabs container */
+.tabs--vertical {
+  flex-direction: column;
+  align-items: stretch;
+  max-height: none;
+  max-width: 200px;
+}
+
+.tabs--scrollable {
+  overflow-x: auto;
+  scrollbar-width: thin;
+}
+
+.tabs--scrollable::-webkit-scrollbar {
+  height: 4px;
+}
+
+.tabs--scrollable::-webkit-scrollbar-track {
+  background: var(--background-color-light, #f5f5f5);
+}
+
+.tabs--scrollable::-webkit-scrollbar-thumb {
+  background: var(--divider-color, #e0e0e0);
+  border-radius: 2px;
+}
+
+.tabs--centered {
+  justify-content: center;
+}
+
+.tabs--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.tabs--animated .tab {
+  transition: all 0.2s ease;
+}
+
+/* Enhanced Tab styles */
+.tab {
+  position: relative;
+  outline: none;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+
+/* Removed focus outline to avoid interfering with selected tab design */
+.tab:focus {
+  outline: none;
+}
+
+.tab--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.tab--closeable {
+  padding-right: 2.5rem;
+}
+
+.tab--animated {
+  transition: all 0.2s ease;
+}
+
+.tab--animated:hover {
+  transform: translateY(-1px);
+}
+
+.tab--vertical {
+  width: 100%;
+  justify-content: flex-start;
+  text-align: left;
+  border-bottom: none;
+  border-right: solid 1px var(--divider-color);
+}
+
+.tab--vertical.selected {
+  border-right-width: 0;
+  border-left: solid 3px var(--primary-color, #2196f3);
+  border-bottom: solid 1px var(--divider-color);
+}
+
+/* Tab content */
+.tab__content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+}
+
+/* Tab badge */
+.tab__badge {
+  background-color: var(--primary-color, #2196f3);
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 500;
+  padding: 0.125rem 0.375rem;
+  border-radius: 10px;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+/* Tab actions */
+.tab__actions {
+  margin-left: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+/* Tab close button */
+.tab__close {
+  position: absolute;
+  right: 0.25rem;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0.25rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s ease, background-color 0.2s ease;
+}
+
+.tab:hover .tab__close,
+.tab:focus .tab__close {
+  opacity: 1;
+}
+
+.tab__close:hover {
+  background-color: var(--hover-color, rgba(0, 0, 0, 0.08));
+}
+
+/* Stack enhancements */
+.stack {
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+}
+
+.stack--animated {
+  transition: opacity 0.2s ease;
+}
+
+.stack__panel {
+  width: 100%;
+  height: 100%;
+}
+
+.stack__panel--hidden {
+  display: none;
+}
+
+.stack__panel--active {
+  display: block;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .tabs {
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
+  .tab {
+    min-width: 4rem;
+    padding: 0 0.75rem;
+    font-size: 0.8rem;
+  }
+
+  .tab__badge {
+    font-size: 0.7rem;
+    padding: 0.1rem 0.3rem;
+    min-width: 1rem;
+    height: 1rem;
+  }
+
+  .tab--closeable {
+    padding-right: 2rem;
+  }
+
+  .tab__close {
+    right: 0.125rem;
+    padding: 0.125rem;
+  }
+}
+
+/* Dark Theme Support */
+@media (prefers-color-scheme: dark) {
+  .tabs--scrollable::-webkit-scrollbar-track {
+    background: var(--background-color-light-dark, #424242);
+  }
+
+  .tabs--scrollable::-webkit-scrollbar-thumb {
+    background: var(--divider-color-dark, #616161);
+  }
+
+  .tab {
+    color: var(--text-color-dark, #ffffff);
+    border-color: var(--divider-color-dark, #616161);
+  }
+
+  .tab:hover {
+    background-color: var(--hover-color-dark, rgba(255, 255, 255, 0.08));
+  }
+
+  .tab.selected {
+    background-color: var(--paper-color-dark, #424242);
+    color: var(--text-color-dark, #ffffff);
+    border-color: var(--divider-color-dark, #616161);
+  }
+
+  .tab__close:hover {
+    background-color: var(--hover-color-dark, rgba(255, 255, 255, 0.12));
+  }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  .tab {
+    border-width: 2px;
+  }
+
+  .tab:focus {
+    outline: none;
+  }
+
+  .tab.selected {
+    border-bottom-width: 0;
+  }
+
+  .tab--vertical.selected {
+    border-left-width: 4px;
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .tabs--animated .tab,
+  .tab--animated,
+  .tab__close,
+  .stack--animated {
+    transition: none;
+  }
+
+  .tab--animated:hover {
+    transform: none;
+  }
+}
+
+/* Print Styles */
+@media print {
+  .tabs {
+    border-bottom: 2px solid black !important;
+    background: white !important;
+  }
+
+  .tab {
+    background: white !important;
+    color: black !important;
+    border: 1px solid black !important;
+  }
+
+  .tab.selected {
+    background: #f0f0f0 !important;
+    font-weight: bold !important;
+  }
+
+  .tab__close,
+  .tab__actions {
+    display: none !important;
+  }
+
+  .stack {
+    break-inside: avoid;
+  }
+}