tyrell-components 1.0.0-TC11 → 1.0.0-TC14

package/lib/styles/multiselect.js

@@ -577,42 +577,23 @@ export const multiselectStyles = `
   border-color: var(--mobile-border-color);
 }
 
-/* ===== SECTION HEADERS - Fixed 48px height ===== */
+/* ===== SECTION HEADERS - Labels, not buttons ===== */
 
 .dropdown-mode-mobile .section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 48px;
+  height: 36px;
   flex-shrink: 0;
   padding: 0 16px;
-  font-size: 12px;
+  font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--ty-text);
-  background: var(--ty-bg-neutral-soft);
-  border-bottom: 1px solid var(--ty-border-faint);
-  cursor: pointer;
-  user-select: none;
-  transition: all 0.3s ease;
-}
-
-/* Expanded section is mild (already viewing it), collapsed is normal (draws attention) */
-.dropdown-mode-mobile [data-expanded="false"] .section-header {
-  color: var(--ty-text);
-}
-
-.dropdown-mode-mobile [data-expanded="true"] .section-header {
+  letter-spacing: 0.06em;
   color: var(--ty-text-mild);
-}
-
-.dropdown-mode-mobile .section-header:hover {
-  background: var(--ty-bg-neutral);
-}
-
-.dropdown-mode-mobile .section-header:active {
-  background: var(--ty-bg-neutral-mild);
+  background: transparent;
+  cursor: default;
+  user-select: none;
 }
 
 .dropdown-mode-mobile .section-header .section-title {
@@ -620,99 +601,60 @@ export const multiselectStyles = `
 }
 
 .dropdown-mode-mobile .section-header .section-count {
-  font-weight: 400;
-  opacity: 0.7;
-  margin-left: 0.25rem;
-}
-
-/* Chevron indicator (only for selected section) */
-.dropdown-mode-mobile .section-header .section-chevron {
-  width: 16px;
-  height: 16px;
+  font-weight: 500;
   color: var(--ty-text-faint);
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.dropdown-mode-mobile .section-header .section-chevron svg {
-  width: 100%;
-  height: 100%;
-}
-
-/* Rotate chevron when expanded */
-.dropdown-mode-mobile .mobile-selected-section[data-expanded="true"] .section-chevron {
-  transform: rotate(180deg);
-}
-
-/* Available section header - not clickable */
-.dropdown-mode-mobile .mobile-available-section .section-header {
-  cursor: default;
-}
-
-.dropdown-mode-mobile .mobile-available-section .section-header:hover {
-  background: var(--ty-bg-neutral-soft);
+  margin-left: 0.25rem;
 }
 
-/* ===== SELECTED SECTION - Expandable with smooth transition ===== */
+/* ===== SELECTED STRIP - pinned, capped height, collapses when empty ===== */
 
 .dropdown-mode-mobile .mobile-selected-section {
   display: flex;
   flex-direction: column;
-  background: var(--ty-surface-elevated);
-  border-bottom: 2px solid var(--ty-border);
+  background: var(--ty-input-bg);
   overflow: hidden;
-  transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* Collapsed state - just header (48px) */
-.dropdown-mode-mobile .mobile-selected-section[data-expanded="false"] {
-  max-height: 48px;
-  flex: 0 0 48px;
+  flex: 0 0 auto;
+  max-height: 40%;
+  transition: max-height 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Expanded state - takes remaining space */
-.dropdown-mode-mobile .mobile-selected-section[data-expanded="true"] {
-  max-height: 1000px; /* Large enough for content */
-  flex: 1;
+/* Empty: collapse to header only */
+.dropdown-mode-mobile .mobile-selected-section[data-empty="true"] {
+  max-height: 36px;
+  flex: 0 0 36px;
 }
 
 .dropdown-mode-mobile .mobile-selected-section .section-content {
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
+  overscroll-behavior: contain;
   padding: 0.75rem 1rem;
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   align-content: flex-start;
+  /* Soft fade at bottom edge — hints at scrollable overflow */
+  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 12px), transparent);
+  mask-image: linear-gradient(to bottom, black calc(100% - 12px), transparent);
 }
 
-/* ===== AVAILABLE SECTION ===== */
+/* ===== AVAILABLE LIST - takes remaining space ===== */
 
 .dropdown-mode-mobile .mobile-available-section {
   display: flex;
   flex-direction: column;
-  background: var(--ty-surface-floating);
+  background: var(--ty-input-bg);
   overflow: hidden;
-  transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* Collapsed state - just header (48px) */
-.dropdown-mode-mobile .mobile-available-section[data-expanded="false"] {
-  max-height: 48px;
-  flex: 0 0 48px;
-}
-
-/* Expanded state - takes remaining space */
-.dropdown-mode-mobile .mobile-available-section[data-expanded="true"] {
-  max-height: 1000px; /* Large enough for content */
-  flex: 1;
+  flex: 1 1 auto;
+  min-height: 0;
 }
 
 .dropdown-mode-mobile .mobile-available-section .section-content {
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
+  overscroll-behavior: contain;
   padding: 0.75rem 1rem;
   display: flex;
   flex-wrap: wrap;
@@ -720,7 +662,9 @@ export const multiselectStyles = `
   align-content: flex-start;
 }
 
-/* ===== EMPTY STATES ===== */
+/* ===== EMPTY STATES =====
+   Selected strip collapses (no text needed).
+   Available shows the empty message only when there are zero tags total. */
 
 .dropdown-mode-mobile .empty-state {
   display: none;
@@ -734,14 +678,11 @@ export const multiselectStyles = `
   font-style: italic;
 }
 
-/* Show empty state when no tags present */
-.dropdown-mode-mobile .mobile-selected-section[data-empty="true"] .empty-state,
 .dropdown-mode-mobile .mobile-available-section[data-empty="true"] .empty-state {
   display: block;
 }
 
-/* Hide slot content when empty */
-.dropdown-mode-mobile .mobile-selected-section[data-empty="true"] slot,
+.dropdown-mode-mobile .mobile-selected-section[data-empty="true"] .section-content,
 .dropdown-mode-mobile .mobile-available-section[data-empty="true"] slot {
   display: none;
 }
@@ -753,14 +694,19 @@ export const multiselectStyles = `
   user-select: none;
   transition: transform 0.1s ease;
   margin: 2px 0; /* Vertical spacing like dropdown options */
+  /* Fade + scale entry — replays on each (re)insertion when a tag moves
+     between selected and available slots */
+  animation: ty-multiselect-tag-enter 180ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-.dropdown-mode-mobile .section-content ::slotted(ty-tag:hover) {
-  transform: scale(1.02);
+@media (hover: hover) {
+  .dropdown-mode-mobile .section-content ::slotted(ty-tag:hover) {
+    transform: scale(1.02);
+  }
 }
 
 .dropdown-mode-mobile .section-content ::slotted(ty-tag:active) {
-  transform: scale(0.98);
+  transform: scale(0.96);
 }
 
 /* Dimmed appearance for hidden filtered tags */
@@ -768,6 +714,17 @@ export const multiselectStyles = `
   display: none !important;
 }
 
+@keyframes ty-multiselect-tag-enter {
+  from { opacity: 0; transform: scale(0.85); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dropdown-mode-mobile .section-content ::slotted(ty-tag) {
+    animation: none;
+  }
+}
+
 /* ==================== LOADING STATE ====================
    Spinner overlay shown inside the options area while the parent
    (external-search mode) is fetching. Search input stays usable.

package/lib/styles/multiselect.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.js","sourceRoot":"","sources":["../../src/styles/multiselect.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA41B/B,qBAAqB;CACtB,CAAC"}
+{"version":3,"file":"multiselect.js","sourceRoot":"","sources":["../../src/styles/multiselect.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,CAAC,MAAM,iBAAiB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAizB/B,qBAAqB;CACtB,CAAC"}

package/lib/styles/tag.d.ts

@@ -2,5 +2,5 @@
  * 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;jk\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-mild);\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-mild);\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-mild);\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-mild);\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-mild);\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-mild);\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-mild);\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-mild);\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-mild);\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-mild);\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/* ----- INFO (kept for back-compat \u2014 not in built-in Flavor union) ----- */\n:host([flavor=\"info\"]) {\n  --tag-bg: var(--ty-bg-info);\n  --tag-color: var(--ty-color-info-strong);\n  --tag-border-color: var(--ty-border-info);\n}\n\n:host([flavor=\"info\"]) .tag-container[tabindex]:hover {\n  background: var(--ty-bg-info-mild);\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-mild);\n  --tag-bg: var(--ty-bg-neutral-soft);\n  --tag-border-color: var(--ty-border-mild);\n}\n\n:host([flavor=\"neutral+\"]) {\n  --tag-bg: var(--ty-bg-neutral-mild);\n  --tag-color: var(--ty-text-mild);\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-mildstrong);\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";
+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-mild);\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-mild);\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-mild);\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-mild);\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-mild);\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-mild);\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-mild);\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-mild);\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-mild);\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-mild);\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-mild);\n  --tag-bg: var(--ty-bg-neutral-soft);\n  --tag-border-color: var(--ty-border-mild);\n}\n\n:host([flavor=\"neutral+\"]) {\n  --tag-bg: var(--ty-bg-neutral-mild);\n  --tag-color: var(--ty-text-mild);\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-mildstrong);\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

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

package/lib/styles/tag.js

@@ -39,7 +39,7 @@ export const tagStyles = `
   /* 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;jk
+  border: 1px solid;
   border-color: var(--tag-border-color, var(--ty-border));
 }
 
@@ -326,17 +326,6 @@ export const tagStyles = `
   box-shadow: 0 0 0 3px var(--ty-color-warning-faint);
 }
 
-/* ----- INFO (kept for back-compat — not in built-in Flavor union) ----- */
-:host([flavor="info"]) {
-  --tag-bg: var(--ty-bg-info);
-  --tag-color: var(--ty-color-info-strong);
-  --tag-border-color: var(--ty-border-info);
-}
-
-:host([flavor="info"]) .tag-container[tabindex]:hover {
-  background: var(--ty-bg-info-mild);
-}
-
 :host([flavor="info"]) .tag-container[tabindex]:focus {
   box-shadow: 0 0 0 3px var(--ty-color-info-faint);
 }

package/lib/styles/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sourceRoot":"","sources":["../../src/styles/tag.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ZxB,CAAC"}
+{"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/version.d.ts

@@ -4,5 +4,5 @@
  * This is automatically synced with package.json during build.
  * Use `npm version` to bump versions.
  */
-export declare const VERSION = "1.0.0-TC11";
+export declare const VERSION = "1.0.0-TC14";
 //# sourceMappingURL=version.d.ts.map

package/lib/version.js

@@ -7,5 +7,5 @@
  * This is automatically synced with package.json during build.
  * Use `npm version` to bump versions.
  */
-export const VERSION = '1.0.0-TC11';
+export const VERSION = '1.0.0-TC14';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tyrell-components",
-  "version": "1.0.0-TC11",
+  "version": "1.0.0-TC14",
   "description": "Tyrell Components - Framework-agnostic web components with semantic design system",
   "type": "module",
   "sideEffects": [