tyrell-components 1.0.0-RC10

package/lib/styles/tabs.js

@@ -0,0 +1,184 @@
+/**
+ * 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;
+}
+
+.tabs-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-sizing: border-box;
+}
+
+/* Bottom placement reverses the order */
+.tabs-container[data-placement="bottom"] {
+  flex-direction: column-reverse;
+}
+
+/* ===================================== */
+/* Tab Buttons Container */
+/* Expose as CSS Part for full styling control */
+/* ===================================== */
+
+.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 */
+/* ===================================== */
+
+.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 */
+.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 */
+::slotted([slot="marker"]) {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+/* ===================================== */
+/* Tab Buttons */
+/* ===================================== */
+
+.tab-button {
+  min-width: 120px;
+  padding: 6px 12px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  color: var(--ty-text-soft);
+  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 */
+}
+
+.tab-button[aria-selected=true] {
+  color: var(--ty-text-strong);
+}
+
+.tab-button[disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.tab-button:focus-visible {
+  outline: 2px solid var(--ty-color-primary);
+  outline-offset: -2px;
+}
+
+/* ===================================== */
+/* Panels Viewport */
+/* Expose as CSS Part for panels container styling */
+/* ===================================== */
+
+.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) */
+/* ===================================== */
+
+.panels-wrapper {
+  display: flex;
+  height: 100%;
+  transition: transform var(--transition-duration, 300ms) var(--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 */
+/* ===================================== */
+
+::slotted(ty-tab) {
+  width: var(--tabs-width, 100%);
+  height: 100%;
+  flex-shrink: 0;
+}
+`;
+//# sourceMappingURL=tabs.js.map

package/lib/styles/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/styles/tabs.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2KzB,CAAC"}

package/lib/styles/tag.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Tag Component Styles
+ * PORTED FROM: clj/ty/components/tag.css
+ */
+export declare const tagStyles = "\n/* Tag Component Styles using centralized ty.variables.css */\n\n/* Host element */\n\n/* Hidden attribute support */\n:host([hidden]) {\n  display: none !important;\n}\n\n/* Main container */\n.tag-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ty-spacing-1);\n  /* Default pill shape - can be overridden */\n  border-radius: var(--ty-radius-full);\n  font-weight: var(--ty-font-medium);\n  text-align: center;\n  white-space: nowrap;\n  user-select: none;\n  box-sizing: border-box;\n\n  /* Default MD size \u2014 anchor at 28px, even +4 steps for other sizes */\n  padding: 0 0.625rem;                            /* 0 10px */\n  font-size: var(--ty-font-xs);                   /* 14px */\n  line-height: var(--ty-leading-xs);              /* 21px */\n  letter-spacing: var(--ty-tracking-xs);          /* -0.013em */\n  min-height: 28px;\n\n  /* Transitions using centralized values */\n  transition: var(--ty-transition-all);\n\n  /* Colors via custom properties \u2014 override on :host for full control */\n  background: var(--tag-bg, transparent);\n  color: var(--tag-color, var(--ty-text));\n  border: 1px solid;\n  border-color: var(--tag-border-color, var(--ty-border));\n}\n\n/* Non-pill variant - rectangular with rounded corners */\n:host([pill=\"false\"]) .tag-container,\n:host([not-pill]) .tag-container {\n  border-radius: var(--ty-radius-md);\n  /* 6px instead of full pill */\n}\n\n/* Tags with value attribute but NOT selected should be clickable */\n:host([value]:not([selected])) .tag-container:not([aria-disabled=\"true\"]) {\n  cursor: pointer;\n}\n\n:host([selected]) .tag-container:not([aria-disabled=\"true\"]) {\n  cursor: initial;\n}\n\n.tag-container[tabindex]:not([aria-disabled=\"true\"]):hover {\n  background: var(--ty-bg-neutral-soft);\n  transform: translateY(-1px);\n  box-shadow: var(--ty-shadow-sm);\n}\n\n.tag-container[tabindex]:not([aria-disabled=\"true\"]):active {\n  transform: translateY(0);\n  box-shadow: var(--ty-shadow-sm);\n}\n\n.tag-container[tabindex]:focus {\n  outline: none;\n}\n\n/* Disabled state */\n.tag-container[aria-disabled=\"true\"] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Slot containers */\n.tag-start,\n.tag-content,\n.tag-end {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.tag-content {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Dismiss button */\n.tag-dismiss {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  background: none;\n  border: none;\n  color: currentColor;\n  cursor: pointer;\n  border-radius: var(--ty-radius-full);\n  transition: var(--ty-transition-all);\n  opacity: 0.7;\n  flex-shrink: 0;\n  /* Default MD dismiss button size */\n  width: var(--ty-spacing-4);\n  /* 16px */\n  height: var(--ty-spacing-4);\n}\n\n.tag-dismiss:hover {\n  opacity: 1;\n  background: rgba(0, 0, 0, 0.1);\n}\n\n.tag-dismiss svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* Size variants - override defaults */\n:host([size=\"xs\"]) .tag-container {\n  padding: 0 0.375rem;                            /* 0 6px */\n  font-size: var(--ty-font-xs);                   /* 12px */\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  min-height: 20px;\n}\n\n:host([size=\"xs\"]) .tag-dismiss {\n  width: var(--ty-spacing-3);\n  height: var(--ty-spacing-3);\n  margin-left: var(--ty-spacing-2);\n}\n\n:host([size=\"sm\"]) .tag-container {\n  padding: 0 var(--ty-spacing-2);                 /* 0 8px */\n  font-size: var(--ty-font-xs);                   /* 12px */\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  min-height: 24px;\n}\n\n:host([size=\"sm\"]) .tag-dismiss {\n  width: var(--ty-spacing-3);\n  height: var(--ty-spacing-3);\n  margin-left: var(--ty-spacing-2);\n}\n\n/* MD is now the default - no need for explicit [size=\"md\"] selector */\n/* All default styles above apply to MD size (min-height: 24px) */\n\n:host([size=\"lg\"]) .tag-container {\n  padding: 0 var(--ty-spacing-3);                 /* 0 12px */\n  font-size: var(--ty-font-sm);                   /* 14px */\n  line-height: var(--ty-leading-sm);              /* 21px */\n  letter-spacing: var(--ty-tracking-sm);          /* -0.013em */\n  min-height: 32px;\n}\n\n:host([size=\"lg\"]) .tag-dismiss {\n  width: var(--ty-spacing-5);\n  height: var(--ty-spacing-5);\n  margin-left: var(--ty-spacing-4);\n}\n\n:host([size=\"xl\"]) .tag-container {\n  padding: 0 0.875rem;                            /* 0 14px */\n  font-size: var(--ty-font-sm);                   /* 14px */\n  line-height: var(--ty-leading-sm);              /* 21px */\n  letter-spacing: var(--ty-tracking-sm);          /* -0.013em */\n  min-height: 36px;\n}\n\n:host([size=\"xl\"]) .tag-dismiss {\n  width: var(--ty-spacing-5);\n  height: var(--ty-spacing-5);\n  margin-left: var(--ty-spacing-4);\n}\n\n/* ===== FLAVOR VARIANTS =====\n   Each flavor sets --tag-bg / --tag-color / --tag-border-color on :host.\n   Append '+' to flavor for a stronger shade (mild background, strong color),\n   or '-' for a softer shade (soft background, base color). */\n\n/* ----- PRIMARY ----- */\n:host([flavor=\"primary\"]) {\n  --tag-bg: var(--ty-bg-primary);\n  --tag-color: var(--ty-color-primary-strong);\n  --tag-border-color: var(--ty-border-primary);\n}\n:host([flavor=\"primary+\"]) {\n  --tag-bg: var(--ty-bg-primary-bold);\n  --tag-color: var(--ty-color-primary-strong);\n  --tag-border-color: var(--ty-color-primary);\n}\n:host([flavor=\"primary-\"]) {\n  --tag-bg: var(--ty-bg-primary-soft);\n  --tag-color: var(--ty-color-primary);\n  --tag-border-color: var(--ty-border-primary);\n}\n:host([flavor=\"primary\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"primary+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"primary-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-primary-bold);\n}\n:host([flavor=\"primary\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"primary+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"primary-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-primary-faint);\n}\n\n/* ----- SECONDARY ----- */\n:host([flavor=\"secondary\"]) {\n  --tag-bg: var(--ty-bg-secondary);\n  --tag-color: var(--ty-color-secondary-strong);\n  --tag-border-color: var(--ty-border-secondary);\n}\n:host([flavor=\"secondary+\"]) {\n  --tag-bg: var(--ty-bg-secondary-bold);\n  --tag-color: var(--ty-color-secondary-strong);\n  --tag-border-color: var(--ty-color-secondary);\n}\n:host([flavor=\"secondary-\"]) {\n  --tag-bg: var(--ty-bg-secondary-soft);\n  --tag-color: var(--ty-color-secondary);\n  --tag-border-color: var(--ty-border-secondary);\n}\n:host([flavor=\"secondary\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"secondary+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"secondary-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-secondary-bold);\n}\n:host([flavor=\"secondary\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"secondary+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"secondary-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-secondary-faint);\n}\n\n/* ----- SUCCESS ----- */\n:host([flavor=\"success\"]) {\n  --tag-bg: var(--ty-bg-success);\n  --tag-color: var(--ty-color-success-strong);\n  --tag-border-color: var(--ty-border-success);\n}\n:host([flavor=\"success+\"]) {\n  --tag-bg: var(--ty-bg-success-bold);\n  --tag-color: var(--ty-color-success-strong);\n  --tag-border-color: var(--ty-color-success);\n}\n:host([flavor=\"success-\"]) {\n  --tag-bg: var(--ty-bg-success-soft);\n  --tag-color: var(--ty-color-success);\n  --tag-border-color: var(--ty-border-success);\n}\n:host([flavor=\"success\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"success+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"success-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-success-bold);\n}\n:host([flavor=\"success\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"success+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"success-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-success-faint);\n}\n\n/* ----- DANGER ----- */\n:host([flavor=\"danger\"]) {\n  --tag-bg: var(--ty-bg-danger);\n  --tag-color: var(--ty-color-danger-strong);\n  --tag-border-color: var(--ty-border-danger);\n}\n:host([flavor=\"danger+\"]) {\n  --tag-bg: var(--ty-bg-danger-bold);\n  --tag-color: var(--ty-color-danger-strong);\n  --tag-border-color: var(--ty-color-danger);\n}\n:host([flavor=\"danger-\"]) {\n  --tag-bg: var(--ty-bg-danger-soft);\n  --tag-color: var(--ty-color-danger);\n  --tag-border-color: var(--ty-border-danger);\n}\n:host([flavor=\"danger\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"danger+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"danger-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-danger-bold);\n}\n:host([flavor=\"danger\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"danger+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"danger-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-danger-faint);\n}\n\n/* ----- WARNING ----- */\n:host([flavor=\"warning\"]) {\n  --tag-bg: var(--ty-bg-warning);\n  --tag-color: var(--ty-color-warning-strong);\n  --tag-border-color: var(--ty-border-warning);\n}\n:host([flavor=\"warning+\"]) {\n  --tag-bg: var(--ty-bg-warning-bold);\n  --tag-color: var(--ty-color-warning-strong);\n  --tag-border-color: var(--ty-color-warning);\n}\n:host([flavor=\"warning-\"]) {\n  --tag-bg: var(--ty-bg-warning-soft);\n  --tag-color: var(--ty-color-warning);\n  --tag-border-color: var(--ty-border-warning);\n}\n:host([flavor=\"warning\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"warning+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"warning-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-warning-bold);\n}\n:host([flavor=\"warning\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"warning+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"warning-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-warning-faint);\n}\n\n:host([flavor=\"info\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-color-info-faint);\n}\n\n/* ----- NEUTRAL ----- */\n:host([flavor=\"neutral\"]) {\n  --tag-color: var(--ty-text-bold);\n  --tag-bg: var(--ty-bg-neutral-soft);\n  --tag-border-color: var(--ty-border-bold);\n}\n\n:host([flavor=\"neutral+\"]) {\n  --tag-bg: var(--ty-bg-neutral-bold);\n  --tag-color: var(--ty-text-bold);\n  --tag-border-color: var(--ty-border-strong);\n}\n:host([flavor=\"neutral-\"]) {\n  --tag-bg: var(--ty-bg-neutral-soft);\n  --tag-color: var(--ty-text-soft);\n  --tag-border-color: var(--ty-border);\n}\n:host([flavor=\"neutral\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"neutral+\"]) .tag-container[tabindex]:hover,\n:host([flavor=\"neutral-\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-neutral-soft);\n}\n:host([flavor=\"neutral\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"neutral+\"]) .tag-container[tabindex]:focus,\n:host([flavor=\"neutral-\"]) .tag-container[tabindex]:focus {\n  box-shadow: 0 0 0 3px var(--ty-border-soft);\n}\n\n/* Slotted content styling */\n.tag-start ::slotted(*),\n.tag-content ::slotted(*),\n.tag-end ::slotted(*) {\n  display: flex;\n  align-items: center;\n}\n\n/* Icon sizing for slotted icons */\n.tag-start ::slotted(ty-icon),\n.tag-end ::slotted(ty-icon) {\n  width: 1em;\n  height: 1em;\n  flex-shrink: 0;\n}\n\n/* Count/badge styling using centralized spacing */\n.tag-end ::slotted(.count) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--ty-spacing-6);\n  /* 24px */\n  height: var(--ty-spacing-5);\n  /* 20px */\n  padding: 0 var(--ty-spacing-2);\n  /* 0 8px */\n  background: rgba(0, 0, 0, 0.1);\n  border-radius: var(--ty-radius-full);\n  font-size: var(--ty-font-xs);\n  font-weight: var(--ty-font-semibold);\n  line-height: var(--ty-line-height-none);\n  flex-shrink: 0;\n}\n\n/* Special handling for long text content */\n.tag-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:host([data-type=\"user\"]) .tag-container {\n  min-width: var(--ty-spacing-20);\n  /* 80px for user tags */\n}\n\n/* Dark mode is handled automatically by the centralized variables */\n";
+//# sourceMappingURL=tag.d.ts.map

package/lib/styles/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,SAAS,osYAmZrB,CAAC"}

package/lib/styles/tag.js

@@ -0,0 +1,409 @@
+/**
+ * Tag Component Styles
+ * PORTED FROM: clj/ty/components/tag.css
+ */
+export const tagStyles = `
+/* Tag Component Styles using centralized ty.variables.css */
+
+/* Host element */
+
+/* Hidden attribute support */
+:host([hidden]) {
+  display: none !important;
+}
+
+/* Main container */
+.tag-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ty-spacing-1);
+  /* Default pill shape - can be overridden */
+  border-radius: var(--ty-radius-full);
+  font-weight: var(--ty-font-medium);
+  text-align: center;
+  white-space: nowrap;
+  user-select: none;
+  box-sizing: border-box;
+
+  /* Default MD size — anchor at 28px, even +4 steps for other sizes */
+  padding: 0 0.625rem;                            /* 0 10px */
+  font-size: var(--ty-font-xs);                   /* 14px */
+  line-height: var(--ty-leading-xs);              /* 21px */
+  letter-spacing: var(--ty-tracking-xs);          /* -0.013em */
+  min-height: 28px;
+
+  /* Transitions using centralized values */
+  transition: var(--ty-transition-all);
+
+  /* Colors via custom properties — override on :host for full control */
+  background: var(--tag-bg, transparent);
+  color: var(--tag-color, var(--ty-text));
+  border: 1px solid;
+  border-color: var(--tag-border-color, var(--ty-border));
+}
+
+/* Non-pill variant - rectangular with rounded corners */
+:host([pill="false"]) .tag-container,
+:host([not-pill]) .tag-container {
+  border-radius: var(--ty-radius-md);
+  /* 6px instead of full pill */
+}
+
+/* Tags with value attribute but NOT selected should be clickable */
+:host([value]:not([selected])) .tag-container:not([aria-disabled="true"]) {
+  cursor: pointer;
+}
+
+:host([selected]) .tag-container:not([aria-disabled="true"]) {
+  cursor: initial;
+}
+
+.tag-container[tabindex]:not([aria-disabled="true"]):hover {
+  background: var(--ty-bg-neutral-soft);
+  transform: translateY(-1px);
+  box-shadow: var(--ty-shadow-sm);
+}
+
+.tag-container[tabindex]:not([aria-disabled="true"]):active {
+  transform: translateY(0);
+  box-shadow: var(--ty-shadow-sm);
+}
+
+.tag-container[tabindex]:focus {
+  outline: none;
+}
+
+/* Disabled state */
+.tag-container[aria-disabled="true"] {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* Slot containers */
+.tag-start,
+.tag-content,
+.tag-end {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.tag-content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Dismiss button */
+.tag-dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: none;
+  border: none;
+  color: currentColor;
+  cursor: pointer;
+  border-radius: var(--ty-radius-full);
+  transition: var(--ty-transition-all);
+  opacity: 0.7;
+  flex-shrink: 0;
+  /* Default MD dismiss button size */
+  width: var(--ty-spacing-4);
+  /* 16px */
+  height: var(--ty-spacing-4);
+}
+
+.tag-dismiss:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.tag-dismiss svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* Size variants - override defaults */
+:host([size="xs"]) .tag-container {
+  padding: 0 0.375rem;                            /* 0 6px */
+  font-size: var(--ty-font-xs);                   /* 12px */
+  line-height: var(--ty-leading-xs);
+  letter-spacing: var(--ty-tracking-xs);
+  min-height: 20px;
+}
+
+:host([size="xs"]) .tag-dismiss {
+  width: var(--ty-spacing-3);
+  height: var(--ty-spacing-3);
+  margin-left: var(--ty-spacing-2);
+}
+
+:host([size="sm"]) .tag-container {
+  padding: 0 var(--ty-spacing-2);                 /* 0 8px */
+  font-size: var(--ty-font-xs);                   /* 12px */
+  line-height: var(--ty-leading-xs);
+  letter-spacing: var(--ty-tracking-xs);
+  min-height: 24px;
+}
+
+:host([size="sm"]) .tag-dismiss {
+  width: var(--ty-spacing-3);
+  height: var(--ty-spacing-3);
+  margin-left: var(--ty-spacing-2);
+}
+
+/* MD is now the default - no need for explicit [size="md"] selector */
+/* All default styles above apply to MD size (min-height: 24px) */
+
+:host([size="lg"]) .tag-container {
+  padding: 0 var(--ty-spacing-3);                 /* 0 12px */
+  font-size: var(--ty-font-sm);                   /* 14px */
+  line-height: var(--ty-leading-sm);              /* 21px */
+  letter-spacing: var(--ty-tracking-sm);          /* -0.013em */
+  min-height: 32px;
+}
+
+:host([size="lg"]) .tag-dismiss {
+  width: var(--ty-spacing-5);
+  height: var(--ty-spacing-5);
+  margin-left: var(--ty-spacing-4);
+}
+
+:host([size="xl"]) .tag-container {
+  padding: 0 0.875rem;                            /* 0 14px */
+  font-size: var(--ty-font-sm);                   /* 14px */
+  line-height: var(--ty-leading-sm);              /* 21px */
+  letter-spacing: var(--ty-tracking-sm);          /* -0.013em */
+  min-height: 36px;
+}
+
+:host([size="xl"]) .tag-dismiss {
+  width: var(--ty-spacing-5);
+  height: var(--ty-spacing-5);
+  margin-left: var(--ty-spacing-4);
+}
+
+/* ===== FLAVOR VARIANTS =====
+   Each flavor sets --tag-bg / --tag-color / --tag-border-color on :host.
+   Append '+' to flavor for a stronger shade (mild background, strong color),
+   or '-' for a softer shade (soft background, base color). */
+
+/* ----- PRIMARY ----- */
+:host([flavor="primary"]) {
+  --tag-bg: var(--ty-bg-primary);
+  --tag-color: var(--ty-color-primary-strong);
+  --tag-border-color: var(--ty-border-primary);
+}
+:host([flavor="primary+"]) {
+  --tag-bg: var(--ty-bg-primary-bold);
+  --tag-color: var(--ty-color-primary-strong);
+  --tag-border-color: var(--ty-color-primary);
+}
+:host([flavor="primary-"]) {
+  --tag-bg: var(--ty-bg-primary-soft);
+  --tag-color: var(--ty-color-primary);
+  --tag-border-color: var(--ty-border-primary);
+}
+:host([flavor="primary"]) .tag-container[tabindex]:hover,
+:host([flavor="primary+"]) .tag-container[tabindex]:hover,
+:host([flavor="primary-"]) .tag-container[tabindex]:hover {
+  background: var(--ty-bg-primary-bold);
+}
+:host([flavor="primary"]) .tag-container[tabindex]:focus,
+:host([flavor="primary+"]) .tag-container[tabindex]:focus,
+:host([flavor="primary-"]) .tag-container[tabindex]:focus {
+  box-shadow: 0 0 0 3px var(--ty-color-primary-faint);
+}
+
+/* ----- SECONDARY ----- */
+:host([flavor="secondary"]) {
+  --tag-bg: var(--ty-bg-secondary);
+  --tag-color: var(--ty-color-secondary-strong);
+  --tag-border-color: var(--ty-border-secondary);
+}
+:host([flavor="secondary+"]) {
+  --tag-bg: var(--ty-bg-secondary-bold);
+  --tag-color: var(--ty-color-secondary-strong);
+  --tag-border-color: var(--ty-color-secondary);
+}
+:host([flavor="secondary-"]) {
+  --tag-bg: var(--ty-bg-secondary-soft);
+  --tag-color: var(--ty-color-secondary);
+  --tag-border-color: var(--ty-border-secondary);
+}
+:host([flavor="secondary"]) .tag-container[tabindex]:hover,
+:host([flavor="secondary+"]) .tag-container[tabindex]:hover,
+:host([flavor="secondary-"]) .tag-container[tabindex]:hover {
+  background: var(--ty-bg-secondary-bold);
+}
+:host([flavor="secondary"]) .tag-container[tabindex]:focus,
+:host([flavor="secondary+"]) .tag-container[tabindex]:focus,
+:host([flavor="secondary-"]) .tag-container[tabindex]:focus {
+  box-shadow: 0 0 0 3px var(--ty-color-secondary-faint);
+}
+
+/* ----- SUCCESS ----- */
+:host([flavor="success"]) {
+  --tag-bg: var(--ty-bg-success);
+  --tag-color: var(--ty-color-success-strong);
+  --tag-border-color: var(--ty-border-success);
+}
+:host([flavor="success+"]) {
+  --tag-bg: var(--ty-bg-success-bold);
+  --tag-color: var(--ty-color-success-strong);
+  --tag-border-color: var(--ty-color-success);
+}
+:host([flavor="success-"]) {
+  --tag-bg: var(--ty-bg-success-soft);
+  --tag-color: var(--ty-color-success);
+  --tag-border-color: var(--ty-border-success);
+}
+:host([flavor="success"]) .tag-container[tabindex]:hover,
+:host([flavor="success+"]) .tag-container[tabindex]:hover,
+:host([flavor="success-"]) .tag-container[tabindex]:hover {
+  background: var(--ty-bg-success-bold);
+}
+:host([flavor="success"]) .tag-container[tabindex]:focus,
+:host([flavor="success+"]) .tag-container[tabindex]:focus,
+:host([flavor="success-"]) .tag-container[tabindex]:focus {
+  box-shadow: 0 0 0 3px var(--ty-color-success-faint);
+}
+
+/* ----- DANGER ----- */
+:host([flavor="danger"]) {
+  --tag-bg: var(--ty-bg-danger);
+  --tag-color: var(--ty-color-danger-strong);
+  --tag-border-color: var(--ty-border-danger);
+}
+:host([flavor="danger+"]) {
+  --tag-bg: var(--ty-bg-danger-bold);
+  --tag-color: var(--ty-color-danger-strong);
+  --tag-border-color: var(--ty-color-danger);
+}
+:host([flavor="danger-"]) {
+  --tag-bg: var(--ty-bg-danger-soft);
+  --tag-color: var(--ty-color-danger);
+  --tag-border-color: var(--ty-border-danger);
+}
+:host([flavor="danger"]) .tag-container[tabindex]:hover,
+:host([flavor="danger+"]) .tag-container[tabindex]:hover,
+:host([flavor="danger-"]) .tag-container[tabindex]:hover {
+  background: var(--ty-bg-danger-bold);
+}
+:host([flavor="danger"]) .tag-container[tabindex]:focus,
+:host([flavor="danger+"]) .tag-container[tabindex]:focus,
+:host([flavor="danger-"]) .tag-container[tabindex]:focus {
+  box-shadow: 0 0 0 3px var(--ty-color-danger-faint);
+}
+
+/* ----- WARNING ----- */
+:host([flavor="warning"]) {
+  --tag-bg: var(--ty-bg-warning);
+  --tag-color: var(--ty-color-warning-strong);
+  --tag-border-color: var(--ty-border-warning);
+}
+:host([flavor="warning+"]) {
+  --tag-bg: var(--ty-bg-warning-bold);
+  --tag-color: var(--ty-color-warning-strong);
+  --tag-border-color: var(--ty-color-warning);
+}
+:host([flavor="warning-"]) {
+  --tag-bg: var(--ty-bg-warning-soft);
+  --tag-color: var(--ty-color-warning);
+  --tag-border-color: var(--ty-border-warning);
+}
+:host([flavor="warning"]) .tag-container[tabindex]:hover,
+:host([flavor="warning+"]) .tag-container[tabindex]:hover,
+:host([flavor="warning-"]) .tag-container[tabindex]:hover {
+  background: var(--ty-bg-warning-bold);
+}
+:host([flavor="warning"]) .tag-container[tabindex]:focus,
+:host([flavor="warning+"]) .tag-container[tabindex]:focus,
+:host([flavor="warning-"]) .tag-container[tabindex]:focus {
+  box-shadow: 0 0 0 3px var(--ty-color-warning-faint);
+}
+
+:host([flavor="info"]) .tag-container[tabindex]:focus {
+  box-shadow: 0 0 0 3px var(--ty-color-info-faint);
+}
+
+/* ----- NEUTRAL ----- */
+:host([flavor="neutral"]) {
+  --tag-color: var(--ty-text-bold);
+  --tag-bg: var(--ty-bg-neutral-soft);
+  --tag-border-color: var(--ty-border-bold);
+}
+
+:host([flavor="neutral+"]) {
+  --tag-bg: var(--ty-bg-neutral-bold);
+  --tag-color: var(--ty-text-bold);
+  --tag-border-color: var(--ty-border-strong);
+}
+:host([flavor="neutral-"]) {
+  --tag-bg: var(--ty-bg-neutral-soft);
+  --tag-color: var(--ty-text-soft);
+  --tag-border-color: var(--ty-border);
+}
+:host([flavor="neutral"]) .tag-container[tabindex]:hover,
+:host([flavor="neutral+"]) .tag-container[tabindex]:hover,
+:host([flavor="neutral-"]) .tag-container[tabindex]:hover {
+  background: var(--ty-bg-neutral-soft);
+}
+:host([flavor="neutral"]) .tag-container[tabindex]:focus,
+:host([flavor="neutral+"]) .tag-container[tabindex]:focus,
+:host([flavor="neutral-"]) .tag-container[tabindex]:focus {
+  box-shadow: 0 0 0 3px var(--ty-border-soft);
+}
+
+/* Slotted content styling */
+.tag-start ::slotted(*),
+.tag-content ::slotted(*),
+.tag-end ::slotted(*) {
+  display: flex;
+  align-items: center;
+}
+
+/* Icon sizing for slotted icons */
+.tag-start ::slotted(ty-icon),
+.tag-end ::slotted(ty-icon) {
+  width: 1em;
+  height: 1em;
+  flex-shrink: 0;
+}
+
+/* Count/badge styling using centralized spacing */
+.tag-end ::slotted(.count) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--ty-spacing-6);
+  /* 24px */
+  height: var(--ty-spacing-5);
+  /* 20px */
+  padding: 0 var(--ty-spacing-2);
+  /* 0 8px */
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: var(--ty-radius-full);
+  font-size: var(--ty-font-xs);
+  font-weight: var(--ty-font-semibold);
+  line-height: var(--ty-line-height-none);
+  flex-shrink: 0;
+}
+
+/* Special handling for long text content */
+.tag-content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:host([data-type="user"]) .tag-container {
+  min-width: var(--ty-spacing-20);
+  /* 80px for user tags */
+}
+
+/* Dark mode is handled automatically by the centralized variables */
+`;
+//# sourceMappingURL=tag.js.map

package/lib/styles/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmZxB,CAAC"}

package/lib/styles/textarea.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Styles for ty-textarea component
+ * Enhanced textarea with auto-resize functionality
+ */
+export declare const textareaStyles = "\n:host {\n  display: block;\n  font-family: var(--ty-font-sans);\n  width: 100%;\n}\n\n.textarea-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n  /* For absolute positioned dummy element */\n}\n\n.textarea-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n/* Custom scrollbar track positioning within textarea border */\n.textarea-wrapper .ty-scrollbar-track-y {\n  top: 2px;\n  right: 2px;\n  bottom: 2px;\n  border-radius: 0 4px 4px 0;\n}\n\n/* ===== LABEL STYLING ===== */\n\n.ty-field-label {\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-medium);\n  color: var(--ty-label-color);\n  margin-bottom: 6px;\n  padding-left: 12px;\n}\n\n/* Required indicator - using SVG icon instead of CSS */\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--ty-color-danger);\n  width: 12px;\n  height: 12px;\n  vertical-align: middle;\n}\n\n/* ===== ERROR MESSAGE STYLING ===== */\n\n.error-message {\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n  color: var(--ty-color-danger);\n  margin-top: 4px;\n  padding-left: 12px;\n}\n\n/* Error state for textareas */\ntextarea.error {\n  border-color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-soft);\n}\n\ntextarea.error:focus {\n  border-color: var(--ty-color-danger-bold);\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== TEXTAREA BASE STYLING ===== */\n\ntextarea {\n  /* Base appearance \u2014 elegant and minimal like input */\n  box-sizing: border-box;\n  width: 100%;\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: 6px;\n  background: var(--input-bg, var(--ty-input-bg));\n  color: var(--input-color, var(--ty-input-color));\n  font-family: inherit;\n  /* Linear-paired typography */\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n  font-weight: var(--ty-font-normal);\n  transition: all 0.15s ease-in-out;\n  outline: none;\n\n  /* Default size (md) - refined spacing */\n  min-height: 80px;\n  /* Larger than input for multiline */\n  padding: 12px 12px;\n  /* Slightly larger padding for text areas */\n\n  /* Auto-resize specific styles */\n  overflow: hidden;\n  /* Hide scrollbars since we're auto-resizing */\n  resize: none;\n  /* Disable manual resize by default */\n\n  /* Ensure consistent text wrapping */\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n\n/* Hide native scrollbar for webkit when custom scrollbar is active\n   (scrollbar-width: none handles Firefox; this handles Chrome/Safari) */\n:host([data-custom-scroll]) textarea::-webkit-scrollbar {\n  display: none;\n}\n\n/* Focus state - elegant blue glow like input */\ntextarea:focus {\n  border-color: var(--input-border-focus, var(--ty-input-border-focus));\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n  background: var(--input-bg, var(--ty-input-bg));\n}\n\n/* Hover state - subtle feedback */\ntextarea:hover:not(:disabled) {\n  border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n/* Disabled state - refined opacity */\ntextarea:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n  background: var(--input-disabled-bg, var(--ty-input-disabled-bg));\n  border-color: var(--input-disabled-border, var(--ty-input-disabled-border));\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling - subtle and elegant */\ntextarea::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: 400;\n}\n\n/* ===== RESIZE CONTROL OPTIONS ===== */\n\n/* Allow manual resizing */\ntextarea.resize-both {\n  resize: both;\n}\n\ntextarea.resize-horizontal {\n  resize: horizontal;\n}\n\ntextarea.resize-vertical {\n  resize: vertical;\n}\n\ntextarea.resize-none {\n  resize: none;\n}\n\n/* Auto-resize mode (default) disables manual resize */\ntextarea:not(.resize-both):not(.resize-horizontal):not(.resize-vertical) {\n  resize: none;\n}\n\n/* ===== DUMMY ELEMENT FOR AUTO-RESIZE ===== */\n\n.textarea-dummy {\n  /* Hidden element that measures text height */\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  visibility: hidden !important;\n  white-space: pre-wrap !important;\n  word-break: break-word !important;\n  box-sizing: border-box !important;\n  overflow: hidden !important;\n  pointer-events: none !important;\n  z-index: -1 !important;\n\n  /* Ensure it has the same text behavior as textarea */\n  word-wrap: break-word !important;\n  overflow-wrap: break-word !important;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\ntextarea.xs {\n  min-height: 64px;\n  padding: 8px 10px;\n  font-size: var(--ty-font-xs);\n  line-height: var(--ty-leading-xs);\n  letter-spacing: var(--ty-tracking-xs);\n}\n\n/* Small */\ntextarea.sm {\n  min-height: 72px;\n  padding: 10px 10px;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Medium (default) */\ntextarea.md {\n  min-height: 80px;\n  padding: 12px 12px;\n  font-size: var(--ty-font-sm);\n  line-height: var(--ty-leading-sm);\n  letter-spacing: var(--ty-tracking-sm);\n}\n\n/* Large */\ntextarea.lg {\n  min-height: 96px;\n  padding: 14px 14px;\n  font-size: var(--ty-font-base);\n  line-height: var(--ty-leading-base);\n  letter-spacing: var(--ty-tracking-base);\n}\n\n/* Extra Large */\ntextarea.xl {\n  min-height: 112px;\n  padding: 16px 16px;\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ntextarea:focus-visible {\n  outline: none;\n  /* We use box-shadow instead */\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  textarea {\n    border-width: 2px;\n  }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  textarea {\n    transition: none;\n  }\n\n  .textarea-dummy {\n    transition: none;\n  }\n}\n\n/* ===== CONTAINER-AWARE RESPONSIVE BEHAVIOR ===== */\n\n/* Scale down on smaller containers using container queries */\n@container (max-width: 480px) {\n  textarea.lg {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n\n  textarea.xl {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n    padding: 14px 14px;\n    min-height: 96px;\n  }\n}\n\n@container (max-width: 320px) {\n  textarea.xl {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n  textarea.lg {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n\n  textarea.xl {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n    padding: 14px 14px;\n    min-height: 96px;\n  }\n}\n\n@media (max-width: 480px) {\n  textarea.xl {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n    padding: 12px 12px;\n    min-height: 80px;\n  }\n}\n\n/* ===== ANIMATION AND TRANSITIONS ===== */\n\n/* Smooth height transitions for auto-resize */\ntextarea {\n  transition:\n    border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out,\n    background-color 0.15s ease-in-out,\n    height 0.1s ease-out;\n  /* Smooth height changes */\n}\n\n/* Disable height transition on focus to avoid jarring effect */\ntextarea:focus {\n  transition:\n    border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out,\n    background-color 0.15s ease-in-out;\n}\n\n/* For users who prefer reduced motion, disable height transitions */\n@media (prefers-reduced-motion: reduce) {\n  textarea {\n    transition: none;\n  }\n}\n";
+//# sourceMappingURL=textarea.d.ts.map

package/lib/styles/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/styles/textarea.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,cAAc,muQAwV1B,CAAA"}