tyrell-components 1.0.0-RC13 → 1.0.0-RC15

package/lib/styles/tabs.js

@@ -1,254 +1,222 @@
-/**
- * Tabs Component Styles
- *
- * Styles for the ty-tabs container component including:
- * - Flexbox layout with top/bottom placement
- * - Tab buttons with hover and active states
- * - Animated marker that follows active tab
- * - Carousel viewport with transform animations
- * - Responsive design with prefers-reduced-motion support
- * - Fully customizable via CSS Parts (::part)
- */
 export const tabsStyles = `
 :host {
-  display: block;
-  width: var(--tabs-width, 100%);
-  height: var(--tabs-height, 400px);
-  box-sizing: border-box;
+display: block;
+width: var(--tabs-width, 100%);
+height: var(--tabs-height, 400px);
+box-sizing: border-box;
 }
-
 .tabs-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  box-sizing: border-box;
-}
-
-/* Bottom placement reverses the order */
+width: 100%;
+height: 100%;
+display: flex;
+flex-direction: column;
+position: relative;
+box-sizing: border-box;
+}
 .tabs-container[data-placement="bottom"] {
-  flex-direction: column-reverse;
-}
-
-/* ===================================== */
-/* Tab Buttons Container */
-/* Expose as CSS Part for full styling control */
-/* ===================================== */
-
+flex-direction: column-reverse;
+}
 .tab-buttons {
-  display: flex;
-  gap: 0;
-  flex-shrink: 0;
-  position: relative;
-  /* For absolute positioned marker */
-  
-  /* Default minimal styling - customize via ::part(buttons-container) */
-  border-bottom: 1px solid var(--ty-border);
-  background: transparent;
-}
-
-/* Bottom placement moves border to top */
-.tabs-container[data-placement="bottom"] .tab-buttons {
-  border-bottom: none;
-  border-top: 1px solid var(--ty-border);
-}
-
-/* ===================================== */
-/* Marker Wrapper */
-/* Expose as CSS Part for custom marker styling */
-/* ===================================== */
-
+display: flex;
+gap: 0;
+flex-shrink: 0;
+position: relative;
+background: transparent;
+}
+.tab-buttons::after {
+content: "";
+position: absolute;
+left: 0;
+right: 0;
+bottom: 0;
+height: 1px;
+background: var(--ty-tabs-separator, var(--ty-border));
+pointer-events: none;
+}
+.tabs-container[data-placement="bottom"] .tab-buttons::after {
+bottom: auto;
+top: 0;
+}
+.tab-strip {
+display: flex;
+flex: 1 1 auto;
+min-width: 0;
+position: relative;
+z-index: 1;
+overflow-x: auto;
+scrollbar-width: none;
+--fade-left: 0px;
+--fade-right: 0px;
+-webkit-mask-image: linear-gradient(to right,
+transparent, black var(--fade-left),
+black calc(100% - var(--fade-right)), transparent);
+mask-image: linear-gradient(to right,
+transparent, black var(--fade-left),
+black calc(100% - var(--fade-right)), transparent);
+}
+.tab-strip::-webkit-scrollbar {
+display: none;
+}
+.tab-strip.unclipped {
+overflow: visible;
+-webkit-mask-image: none;
+mask-image: none;
+}
 .marker-wrapper {
-  position: absolute;
-  z-index: 0;
-  /* Behind buttons */
-  pointer-events: none;
-  /* Don't block clicks */
-  transition: left var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),
-    width var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),
-    height var(--transition-duration, 300ms) var(--transition-easing, ease-in-out),
-    top var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);
-}
-
-/* Default marker - simple underline */
+position: absolute;
+z-index: 0;
+pointer-events: none;
+transition: left var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out),
+width var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out),
+height var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out),
+top var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out);
+}
 .default-marker {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 2px;
-  width: 100%;
-  background: var(--ty-color-primary);
-  pointer-events: none;
-}
-
-/* Hide default marker when custom marker is slotted */
-.marker-wrapper:has(::slotted([slot="marker"])) .default-marker {
-  display: none;
-}
-
-/* User's marker element fills the wrapper */
+position: absolute;
+bottom: 0;
+left: 0;
+height: 3px;
+width: 100%;
+background: var(--ty-color-primary);
+pointer-events: none;
+}
+.tabs-container[data-placement="bottom"] .default-marker {
+bottom: auto;
+top: 0;
+}
 ::slotted([slot="marker"]) {
-  display: block;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-/* ===================================== */
-/* Tab Buttons */
-/* ===================================== */
-
+display: block;
+width: 100%;
+height: 100%;
+box-sizing: border-box;
+}
 .tab-button {
-  min-width: 120px;
-  padding: 6px 12px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  font: inherit;
-  color: var(--ty-text-soft);
-  transition: var(--ty-local-transition, color 200ms, background-color 200ms);
-  white-space: nowrap;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  font-weight: var(--ty-font-bold);
-  font-size: var(--ty-font-sm);
-  position: relative;
-  /* Establish stacking context */
-  z-index: 10;
-  /* Above marker */
-}
-
+min-width: var(--ty-tab-min-width, 72px);
+flex-shrink: 0;
+padding: 6px 12px;
+border: none;
+background: transparent;
+cursor: pointer;
+font: inherit;
+color: var(--ty-text-soft);
+transition: var(--ty-local-transition, color 200ms, background-color 200ms);
+white-space: nowrap;
+display: inline-flex;
+align-items: center;
+justify-content: center;
+gap: 8px;
+font-weight: var(--ty-font-bold);
+font-size: var(--ty-font-sm);
+position: relative;
+z-index: 10;
+}
+.tabs-container[data-fixed] .tab-button {
+flex: 1 1 0;
+min-width: 0;
+}
+.tabs-container[data-fixed] .tab-label {
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap;
+}
 .tab-button[aria-selected=true] {
-  color: var(--ty-text-strong);
+color: var(--ty-text-strong);
 }
-
 .tab-button[disabled] {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
+opacity: 0.5;
+cursor: not-allowed;
+pointer-events: none;
 }
-
 .tab-button:focus-visible {
-  outline: 2px solid var(--ty-color-primary);
-  outline-offset: -2px;
-}
-
-.tab-button.overflow-hidden {
-  display: none;
-}
-
-/* ===================================== */
-/* Overflow "more" trigger + menu */
-/* ===================================== */
-
+outline: 2px solid var(--ty-color-primary);
+outline-offset: -2px;
+}
 .tab-overflow-trigger {
-  flex-shrink: 0;
-  width: 40px;
-  min-width: 40px;
-  padding: 6px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  color: var(--ty-text-soft);
-  font-size: 18px;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  z-index: 10;
-}
-
+flex-shrink: 0;
+align-self: center;
+min-width: 36px;
+height: 24px;
+margin: 0 8px;
+padding: 0 10px;
+border: 1px solid var(--ty-border);
+border-radius: 9999px;
+background: transparent;
+cursor: pointer;
+color: var(--ty-text-soft);
+font-size: 16px;
+line-height: 1;
+display: inline-flex;
+align-items: center;
+justify-content: center;
+position: relative;
+z-index: 10;
+transition: color 200ms, border-color 200ms;
+}
 .tab-overflow-trigger:hover {
-  color: var(--ty-text-strong);
+color: var(--ty-text-strong);
+border-color: var(--ty-text-soft);
 }
-
 .tab-overflow-trigger:focus-visible {
-  outline: 2px solid var(--ty-color-primary);
-  outline-offset: -2px;
+outline: 2px solid var(--ty-color-primary);
+outline-offset: -2px;
 }
-
 .tab-overflow-menu {
-  display: flex;
-  flex-direction: column;
-  min-width: 160px;
-  max-height: 300px;
-  overflow-y: auto;
-  padding: var(--ty-spacing-2, 4px);
-  background: var(--ty-surface-floating);
-  border-radius: var(--ty-radius-md);
-  box-shadow: var(--ty-shadow-md, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));
-}
-
+display: flex;
+flex-direction: column;
+min-width: 160px;
+max-height: 300px;
+overflow-y: auto;
+padding: var(--ty-spacing-2, 4px);
+background: var(--ty-surface-floating);
+border-radius: var(--ty-radius-md);
+box-shadow: var(--ty-shadow-md, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1));
+}
 .tab-overflow-item {
-  padding: var(--ty-spacing-2, 6px) var(--ty-spacing-3, 12px);
-  border: none;
-  background: transparent;
-  text-align: left;
-  cursor: pointer;
-  border-radius: var(--ty-radius-md);
-  color: var(--ty-text);
-  font: inherit;
-  font-size: var(--ty-font-sm);
-  white-space: nowrap;
-}
-
+padding: var(--ty-spacing-2, 6px) var(--ty-spacing-3, 12px);
+border: none;
+background: transparent;
+text-align: left;
+cursor: pointer;
+border-radius: var(--ty-radius-md);
+color: var(--ty-text);
+font: inherit;
+font-size: var(--ty-font-sm);
+white-space: nowrap;
+}
 .tab-overflow-item:hover {
-  background: var(--ty-bg-neutral-soft);
-  color: var(--ty-text-strong);
+background: var(--ty-bg-neutral-soft);
+color: var(--ty-text-strong);
+}
+.tab-overflow-item[data-active="true"] {
+color: var(--ty-color-primary);
+font-weight: var(--ty-font-bold);
 }
-
 .tab-overflow-item[disabled] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* ===================================== */
-/* Panels Viewport */
-/* Expose as CSS Part for panels container styling */
-/* ===================================== */
-
+opacity: 0.5;
+cursor: not-allowed;
+}
 .panels-viewport {
-  position: relative;
-  flex: 1;
-  overflow: hidden;
-  /* Critical: hides off-screen panels */
-  min-height: 0;
-  /* Allows flex child to shrink */
-}
-
-/* ===================================== */
-/* Panels Wrapper (slides horizontally) */
-/* ===================================== */
-
+position: relative;
+flex: 1;
+overflow: hidden;
+min-height: 0;
+}
 .panels-wrapper {
-  display: flex;
-  height: 100%;
-  transition: transform var(--transition-duration, 300ms) var(--transition-easing, ease-in-out);
+display: flex;
+height: 100%;
+transition: transform var(--ty-tabs-transition-duration, 300ms) var(--ty-tabs-transition-easing, ease-in-out);
 }
-
-/* Respect user's motion preferences */
 @media (prefers-reduced-motion: reduce) {
-  .panels-wrapper {
-    transition-duration: 0ms !important;
-  }
-
-  .marker-wrapper {
-    transition-duration: 0ms !important;
-  }
-}
-
-/* ===================================== */
-/* Slotted Tab Panels */
-/* ===================================== */
-
+.panels-wrapper {
+transition-duration: 0ms !important;
+}
+.marker-wrapper {
+transition-duration: 0ms !important;
+}
+}
 ::slotted(ty-tab) {
-  width: var(--tabs-width, 100%);
-  height: 100%;
-  flex-shrink: 0;
+width: var(--tabs-page-width, var(--tabs-width, 100%));
+height: 100%;
+flex-shrink: 0;
 }
 `;
-//# sourceMappingURL=tabs.js.map

package/lib/styles/tag.d.ts

@@ -1,6 +1,2 @@
-/**
- * Tag Component Styles
- * PORTED FROM: clj/ty/components/tag.css
- */
+/** Tag Component Styles */
 export declare const tagStyles: string;
-//# sourceMappingURL=tag.d.ts.map