tyrell-components 1.0.0-TC53 → 1.0.0-TC55

package/lib/components/select.js

@@ -20,10 +20,10 @@ elementIds.set(element, id);
 return id;
 }
 import { REQUIRED_ICON_SVG } from "../utils/icons.js";
+const SEARCH_AUTO_THRESHOLD = 7;
 const CHEVRON_DOWN_SVG = `<svg viewBox="0 0 20 20" fill="currentColor">
 <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
 </svg>`;
-const SEARCH_AUTO_THRESHOLD = 7;
 function slugify(text) {
 return text
 .trim()
@@ -55,11 +55,12 @@ this._clearable = true;
 this._externalSearch = false;
 this._allowCreate = false;
 this._createTransform = "none";
-this._searchable = "auto";
+this._notSearchable = false;
 this._loading = false;
 this._scrollLockId = null;
 this._size = DEFAULT_SIZE;
 this._availableLabel = "Available";
+this._selectedLabel = "Selected";
 this._noOptionsMessage = "No options available";
 this._state = {
 open: false,
@@ -94,9 +95,7 @@ dialog.close();
 }
 });
 this.render();
-requestAnimationFrame(() => {
 this.initializeState();
-});
 this._childObserver = new MutationObserver(() => {
 this.ensureOptionRoles();
 if (this._state.selectedValues.length > 0) {
@@ -187,8 +186,8 @@ break;
 case "externalSearch":
 this._externalSearch = newValue;
 break;
-case "searchable":
-this._searchable = newValue;
+case "notSearchable":
+this._notSearchable = newValue;
 if (this.isConnected && this.shadowRoot)
 this.updateSearchVisibility();
 break;
@@ -209,6 +208,9 @@ break;
 case "available-label":
 this._availableLabel = newValue || "Available";
 break;
+case "selected-label":
+this._selectedLabel = newValue || "Selected";
+break;
 case "no-options-message":
 this._noOptionsMessage = newValue || "No options available";
 break;
@@ -268,13 +270,23 @@ this.updateSelectionDisplay();
 this.updateMobileSelectedState();
 }
 else {
-const allTags = this.getTagElements();
-const preSelectedTags = allTags
+this.resolveDeclarativeSelection();
+}
+}
+resolveDeclarativeSelection() {
+if (this.getAttribute("value") || this._state.selectedValues.length > 0) {
+return;
+}
+const preSelectedTags = this.getTagElements()
 .filter((tag) => tag.hasAttribute("selected"))
 .map((tag) => this.getTagData(tag).value);
 if (preSelectedTags.length > 0) {
 this.updateComponentValue(preSelectedTags, false);
+return;
 }
+if (document.readyState === "loading") {
+document.addEventListener("DOMContentLoaded", () => { if (this.isConnected)
+this.resolveDeclarativeSelection(); }, { once: true });
 }
 }
 getTagElements() {
@@ -295,10 +307,7 @@ deselectTag(tag) {
 tag.removeAttribute("selected");
 }
 getSelectedValues() {
-return this.getTagElements()
-.filter((tag) => tag.hasAttribute("selected"))
-.map((tag) => this.getTagData(tag).value)
-.filter((value) => value !== "");
+return [...this._state.selectedValues];
 }
 syncSelectedTags(selectedValues) {
 const selectedSet = new Set(selectedValues);
@@ -612,7 +621,7 @@ this.closeDropdown();
 }
 return;
 }
-if (tag.hasAttribute("selected")) {
+if (currentValues.includes(tagValue)) {
 const newValues = currentValues.filter((v) => v !== tagValue);
 this.updateComponentValue(newValues, true, "remove", tagValue);
 }
@@ -693,6 +702,8 @@ e.stopPropagation();
 e.preventDefault();
 }
 handleSearchInput(e) {
+if (this._state.mode === "mobile")
+this.expandMobileSection("available");
 const target = e.target;
 const query = target.value;
 this._state.search = query;
@@ -725,7 +736,12 @@ switch (e.key) {
 case "Escape":
 e.preventDefault();
 e.stopPropagation();
+if (this._state.mode === "mobile") {
+this.closeMobileModal();
+}
+else {
 this.closeDropdown();
+}
 break;
 case "Enter":
 e.preventDefault();
@@ -741,43 +757,33 @@ break;
 case "ArrowUp":
 e.preventDefault();
 e.stopPropagation();
-let newIndexUp;
-if (tagsCount === 0) {
-newIndexUp = -1;
-}
-else if (currentHighlightedIndex === -1) {
-newIndexUp = tagsCount - 1;
-}
-else if (currentHighlightedIndex === 0) {
-newIndexUp = tagsCount - 1;
-}
-else {
-newIndexUp = currentHighlightedIndex - 1;
-}
+const newIndexUp = this.nextEnabledTagIndex(filteredTags, currentHighlightedIndex, -1);
 this._state.highlightedIndex = newIndexUp;
 this.highlightTag(filteredTags, newIndexUp);
 break;
 case "ArrowDown":
 e.preventDefault();
 e.stopPropagation();
-let newIndexDown;
-if (tagsCount === 0) {
-newIndexDown = -1;
-}
-else if (currentHighlightedIndex === -1) {
-newIndexDown = 0;
-}
-else if (currentHighlightedIndex === tagsCount - 1) {
-newIndexDown = 0;
-}
-else {
-newIndexDown = currentHighlightedIndex + 1;
-}
+const newIndexDown = this.nextEnabledTagIndex(filteredTags, currentHighlightedIndex, 1);
 this._state.highlightedIndex = newIndexDown;
 this.highlightTag(filteredTags, newIndexDown);
 break;
 }
 }
+nextEnabledTagIndex(tags, fromIndex, direction) {
+const count = tags.length;
+if (count === 0)
+return -1;
+let index = fromIndex === -1
+? (direction === 1 ? 0 : count - 1)
+: (fromIndex + direction + count) % count;
+for (let i = 0; i < count; i++) {
+if (!tags[index].element.hasAttribute("disabled"))
+return index;
+index = (index + direction + count) % count;
+}
+return -1;
+}
 filterTags(tags, query) {
 if (!query || query.trim() === "") {
 return tags;
@@ -1093,12 +1099,21 @@ ${CHEVRON_DOWN_SVG}
 <!-- HEADER (matches dropdown.ts) -->
 ${searchHeaderHtml}
 <!-- BODY: options list with toggleable selected state -->
-<div class="mobile-body">
+<div class="mobile-body" data-expanded="available">
+<!-- SELECTED STRIP (pinned above the list, collapses when empty) -->
+<div class="mobile-selected-section" data-empty="true">
+<button class="section-header" type="button" data-section="selected" aria-expanded="false">
+<span class="section-title">${this._selectedLabel} <span class="section-count">(0)</span></span>
+${CHEVRON_DOWN_SVG}
+</button>
+<div class="section-content mobile-selected-chips"></div>
+</div>
 <!-- AVAILABLE LIST (always visible, takes remaining space) -->
 <div class="mobile-available-section" data-empty="false">
-<div class="section-header">
+<button class="section-header" type="button" data-section="available" aria-expanded="true">
 <span class="section-title">${this._availableLabel}</span>
-</div>
+${CHEVRON_DOWN_SVG}
+</button>
 <div class="section-content dropdown-options-wrapper" id="${listboxId}" role="listbox" ${this._multiple ? 'aria-multiselectable="true"' : ""}>
 <slot id="options-slot"></slot>
 <div class="empty-state">${this._noOptionsMessage}</div>
@@ -1121,6 +1136,10 @@ this.setupMobileEventListeners();
 this.updateSelectionDisplay();
 }
 setupMobileEventListeners() {
+if (!this._keyboardHandler) {
+this._keyboardHandler = this.handleKeyboard.bind(this);
+document.addEventListener("keydown", this._keyboardHandler);
+}
 const shadow = this.shadowRoot;
 const stub = shadow.querySelector(".select-stub");
 const optionsSlot = shadow.querySelector("#options-slot");
@@ -1140,6 +1159,9 @@ optionsSlot.addEventListener("click", (e) => this.handleMobileTagClick(e));
 if (searchInput) {
 searchInput.addEventListener("input", (e) => this.handleSearchInput(e));
 }
+shadow.querySelectorAll(".mobile-body .section-header").forEach((header) => {
+header.addEventListener("click", () => this.expandMobileSection(header.dataset.section === "selected" ? "selected" : "available"));
+});
 if (closeButton) {
 closeButton.addEventListener("click", () => this.closeMobileModal());
 }
@@ -1178,9 +1200,10 @@ updateMobileSelectedState() {
 if (this._state.mode !== "mobile")
 return;
 const shadow = this.shadowRoot;
+this.renderMobileSelectedChips();
 const availableSection = shadow.querySelector(".mobile-available-section");
 if (availableSection) {
-const visibleAvailable = this.getTagElements().filter((tag) => !tag.hasAttribute("hidden")).length;
+const visibleAvailable = this.getTagElements().filter((tag) => !tag.hasAttribute("hidden") && !tag.hasAttribute("selected")).length;
 availableSection.setAttribute("data-empty", String(visibleAvailable === 0));
 const availableTitleSpan = shadow.querySelector(".mobile-available-section .section-title");
 if (availableTitleSpan) {
@@ -1188,14 +1211,59 @@ availableTitleSpan.textContent = `${this._availableLabel} (${visibleAvailable})`
 }
 }
 }
+expandMobileSection(section) {
+const shadow = this.shadowRoot;
+const body = shadow?.querySelector(".mobile-body");
+if (!body)
+return;
+if (section === "selected" && this._state.selectedValues.length === 0)
+return;
+body.dataset.expanded = section;
+shadow.querySelectorAll(".mobile-body .section-header").forEach((header) => {
+const owns = header.dataset.section === section;
+header.setAttribute("aria-expanded", String(owns));
+});
+}
+renderMobileSelectedChips() {
+const shadow = this.shadowRoot;
+const section = shadow.querySelector(".mobile-selected-section");
+const host = shadow.querySelector(".mobile-selected-chips");
+if (!section || !host)
+return;
+const selected = this._state.selectedValues;
+section.setAttribute("data-empty", String(selected.length === 0));
+const count = section.querySelector(".section-count");
+if (count)
+count.textContent = `(${selected.length})`;
+if (selected.length === 0)
+this.expandMobileSection("available");
+const labelFor = (value) => {
+const option = this.getTagElements().find((tag) => this.getTagData(tag).value === value);
+return option ? this.getTagData(option).text : value;
+};
+host.textContent = "";
+for (const value of selected) {
+const chip = document.createElement("button");
+chip.type = "button";
+chip.className = "mobile-selected-chip";
+chip.dataset.value = value;
+chip.setAttribute("aria-label", `Remove ${labelFor(value)}`);
+chip.innerHTML = `<span class="chip-label"></span>${CLEAR_ICON_SVG}`;
+chip.querySelector(".chip-label").textContent = labelFor(value);
+chip.addEventListener("click", (e) => {
+e.preventDefault();
+e.stopPropagation();
+this.deselectValue(value);
+});
+host.appendChild(chip);
+}
+}
 shouldShowSearch() {
 if (this._externalSearch)
 return true;
 if (this._allowCreate)
 return true;
-if (this._searchable === "always")
-return true;
-if (this._searchable === "never")
+if (this._notSearchable)
 return false;
 return this.getTagElements().length > SEARCH_AUTO_THRESHOLD;
 }
@@ -1234,10 +1302,11 @@ clearBtn.hidden = !(count > 0 && this._clearable && !this._disabled && !this._re
 }
 const wantClone = !this._multiple && count > 0 ? values[0] : null;
 this.syncSelectedClone(wantClone);
-stub.classList.toggle("has-clone", wantClone !== null);
+const hasClone = this._selectedClone !== null;
+stub.classList.toggle("has-clone", hasClone);
 const textEl = stub.querySelector(".dropdown-placeholder");
 if (textEl) {
-textEl.hidden = wantClone !== null;
+textEl.hidden = hasClone;
 const showLabels = count > 0 && this._multiple && !this._compact;
 if (showLabels) {
 textEl.textContent = this.getSelectedItems(values)
@@ -1245,6 +1314,10 @@ textEl.textContent = this.getSelectedItems(values)
 .join(", ");
 textEl.classList.remove("placeholder-shown");
 }
+else if (wantClone !== null) {
+textEl.textContent = values.join(", ");
+textEl.classList.remove("placeholder-shown");
+}
 else {
 textEl.textContent = this._placeholder;
 textEl.classList.add("placeholder-shown");
@@ -1254,9 +1327,14 @@ textEl.classList.add("placeholder-shown");
 syncSelectedClone(value) {
 const existing = this.querySelector(':scope > [cloned][slot="selected"]');
 if (existing?.getAttribute("value") === value) {
+const stale = value !== null &&
+existing.childNodes.length === 0 &&
+(this.getTagElements().find((el) => this.getTagData(el).value === value)?.childNodes.length ?? 0) > 0;
+if (!stale) {
 this._selectedClone = existing;
 return;
 }
+}
 existing?.remove();
 if (value === null) {
 this._selectedClone = null;
@@ -1270,6 +1348,10 @@ clone.setAttribute("slot", "selected");
 clone.setAttribute("cloned", "true");
 this.appendChild(clone);
 this._selectedClone = clone;
+if (option.childNodes.length === 0 && document.readyState === "loading") {
+document.addEventListener("DOMContentLoaded", () => { if (this.isConnected)
+this.updateSelectionDisplay(); }, { once: true });
+}
 }
 else if (this._selectedClone?.getAttribute("value") === value) {
 const restored = this._selectedClone.cloneNode(true);
@@ -1352,11 +1434,11 @@ return this.getProperty("required");
 set required(value) {
 this.setProperty("required", value);
 }
-get searchable() {
-return this.getProperty("searchable");
+get notSearchable() {
+return this.getProperty("notSearchable");
 }
-set searchable(value) {
-this.setProperty("searchable", value);
+set notSearchable(value) {
+this.setProperty("notSearchable", value);
 }
 get externalSearch() {
 return this.getProperty("externalSearch");
@@ -1480,17 +1562,10 @@ default: "none",
 aliases: { "create-transform": true },
 coerce: (v) => (v === "slug" ? "slug" : "none"),
 },
-searchable: {
-type: "string",
+notSearchable: {
+type: "boolean",
 visual: true,
-default: "auto",
-coerce: (v) => {
-if (v === true || v === "" || v === "true")
-return "always";
-if (v === false || v === "false")
-return "never";
-return "auto";
-},
+default: false,
 },
 align: {
 type: "string",
@@ -1533,6 +1608,11 @@ type: "string",
 visual: true,
 default: "Available",
 },
+"selected-label": {
+type: "string",
+visual: true,
+default: "Selected",
+},
 "no-options-message": {
 type: "string",
 visual: true,

package/lib/components/selected-tags.js

@@ -29,6 +29,10 @@ if (!this.style.display)
 this.style.display = 'contents';
 this.bind();
 this.renderChips();
+if (document.readyState === 'loading') {
+document.addEventListener('DOMContentLoaded', () => { if (this.isConnected)
+this.renderChips(); }, { once: true });
+}
 this._childObserver = new MutationObserver(() => {
 const template = this.template();
 if (template !== this._lastTemplate) {

package/lib/components/tabs.js

@@ -2,6 +2,7 @@ import { ensureStyles } from '../utils/styles.js';
 import { tabsStyles } from '../styles/tabs.js';
 const eventHandlers = new WeakMap();
 const resizeObservers = new WeakMap();
+const pendingInitialSnap = new WeakSet();
 function getTabsAttributes(el) {
 return {
 width: el.getAttribute('width') || '100%',
@@ -40,6 +41,11 @@ function findTabIndex(tabs, tabId) {
 const index = tabs.findIndex(tab => getTabId(tab) === tabId);
 return index >= 0 ? index : undefined;
 }
+function currentActive(el) {
+const tabs = getChildTabs(el);
+const id = getActiveTabId(el, tabs);
+return { id, index: (id ? findTabIndex(tabs, id) : undefined) ?? 0 };
+}
 function getActiveTabId(el, tabs) {
 const activeAttr = el.getAttribute('active');
 if (activeAttr && findTabIndex(tabs, activeAttr) !== undefined) {
@@ -171,17 +177,13 @@ const button = shadowRoot.querySelector(`[data-tab-id='${activeId}']`);
 const buttonsContainer = shadowRoot.querySelector('.tab-buttons');
 if (!button || !buttonsContainer)
 return null;
-const buttonRect = button.getBoundingClientRect();
 const left = button.offsetLeft;
 const top = button.offsetTop;
-return {
-left,
-top,
-width: buttonRect.width,
-height: buttonRect.height,
-};
+const width = button.offsetWidth;
+const height = button.offsetHeight;
+return { left, top, width, height };
 }
-function updateMarker(el, activeId) {
+function updateMarker(el, activeId, forceSnap = false) {
 const shadowRoot = el.shadowRoot;
 if (!shadowRoot)
 return;
@@ -191,7 +193,7 @@ return;
 const position = calculateMarkerPosition(el, shadowRoot, activeId);
 if (!position)
 return;
-const snap = !marker.style.left || marker.offsetWidth === 0;
+const snap = forceSnap || !marker.style.left || marker.offsetWidth === 0;
 if (snap)
 marker.style.transition = 'none';
 marker.style.left = `${position.left}px`;
@@ -216,7 +218,7 @@ el.style.setProperty('--active-index', String(newIndex));
 updateTransform(el, newIndex);
 updateAriaAttributes(el, shadowRoot, tabId);
 updatePanelInteraction(el, tabId);
-updateMarker(el, tabId);
+updateMarker(el, tabId, pendingInitialSnap.delete(el));
 shadowRoot.querySelectorAll('.tab-overflow-item').forEach((item) => {
 item.setAttribute('data-active', String(item.dataset.tabId === tabId));
 });
@@ -470,11 +472,12 @@ if (buttons) {
 const buttonsHeight = buttons.offsetHeight;
 el.style.setProperty('--buttons-height', `${buttonsHeight}px`);
 }
-updateTransform(el, activeIndex);
+const current = currentActive(el);
+updateTransform(el, current.index);
 updateOverflow(el);
-if (activeId) {
-updateMarker(el, activeId);
-scrollActiveIntoView(el, activeId, true);
+if (current.id) {
+updateMarker(el, current.id);
+scrollActiveIntoView(el, current.id, true);
 }
 });
 if (activeId) {
@@ -482,6 +485,7 @@ updatePanelInteraction(el, activeId);
 }
 }
 else {
+pendingInitialSnap.add(el);
 shadowRoot.innerHTML = `
 <div class="tabs-container" data-placement="${placement}"${fixed ? ' data-fixed' : ''}>
 ${renderTabButtons(el, tabs, activeId)}
@@ -498,11 +502,12 @@ if (buttons) {
 const buttonsHeight = buttons.offsetHeight;
 el.style.setProperty('--buttons-height', `${buttonsHeight}px`);
 }
-updateTransform(el, activeIndex);
+const current = currentActive(el);
+updateTransform(el, current.index);
 updateOverflow(el);
-if (activeId) {
-updateMarker(el, activeId);
-scrollActiveIntoView(el, activeId, false);
+if (current.id) {
+updateMarker(el, current.id);
+scrollActiveIntoView(el, current.id, false);
 }
 });
 setupEventListeners(el, shadowRoot, tabs);

package/lib/styles/calendar-month.js

@@ -39,7 +39,7 @@ border-radius: var(--ty-radius-md);
 font-family: inherit;
 user-select: none;
 width: var(--calendar-width, fit-content);
-min-width: 280px;
+min-width: var(--ty-calendar-width, 280px);
 max-width: var(--calendar-max-width, none);
 }
 .calendar-row {
@@ -135,7 +135,7 @@ opacity: 0.7;
 }
 .calendar-size-sm {
 padding: 0.5rem;
-min-width: 240px;
+min-width: var(--ty-calendar-width, 240px);
 }
 .calendar-size-sm .calendar-header-cell {
 font-size: 0.625rem;
@@ -150,7 +150,7 @@ min-height: 1.5rem;
 }
 .calendar-size-md {
 padding: 0.75rem;
-min-width: 280px;
+min-width: var(--ty-calendar-width, 280px);
 }
 .calendar-size-md .calendar-header-cell {
 font-size: 0.6875rem;
@@ -165,7 +165,7 @@ min-height: 2rem;
 }
 .calendar-size-lg {
 padding: 1rem;
-min-width: 360px;
+min-width: var(--ty-calendar-width, 360px);
 }
 .calendar-size-lg .calendar-header-cell {
 font-size: 0.75rem;

package/lib/styles/calendar-navigation.d.ts

@@ -1,2 +1,2 @@
 /** Calendar Navigation Styles */
-export declare const calendarNavigationStyles = "\n/* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of\n   use (NOT on :host) so consumers can override them from outside \u2014 this\n   component is nested inside ty-calendar's shadow, so a :host default would\n   block inherited overrides. --ty-calendar-accent still cascades in. */\n\n:host([data-size=\"md\"]) {\n  --nav-btn-size: 2rem;\n  --nav-btn-icon-size: 1.25rem;\n  --nav-font-size: 1rem;\n  --nav-padding: 0.5rem 0.75rem;\n  --nav-default-width: 280px;\n}\n\n:host([data-size=\"sm\"]) {\n  --nav-btn-size: 1.5rem;\n  --nav-btn-icon-size: 1rem;\n  --nav-font-size: 0.875rem;\n  --nav-padding: 0.375rem 0.5rem;\n  --nav-default-width: 240px;\n}\n\n:host([data-size=\"lg\"]) {\n  --nav-btn-size: 2.5rem;\n  --nav-btn-icon-size: 1.5rem;\n  --nav-font-size: 1.125rem;\n  --nav-padding: 0.625rem 1rem;\n  --nav-default-width: 360px;\n}\n\n.calendar-navigation-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--nav-padding);\n  font-family: inherit;\n  user-select: none;\n  width: var(--nav-width, var(--nav-default-width));\n  box-sizing: border-box;\n}\n\n/* Navigation groups: left, center, right */\n.nav-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.nav-group-left,\n.nav-group-right {\n  flex: 0 0 auto;\n}\n\n.nav-group-center {\n  flex: 1;\n  justify-content: center;\n}\n\n.nav-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--nav-btn-size);\n  height: var(--nav-btn-size);\n  padding: 0;\n  border: none;\n  border-radius: var(--ty-radius-base);\n  background-color: transparent;\n  color: var(--ty-calendar-nav-color, var(--ty-color-neutral));\n  cursor: pointer;\n  transition: var(--ty-local-transition, all 0.15s ease);\n  outline: none;\n}\n\n.nav-btn:hover {\n  background-color: var(--ty-calendar-nav-hover-bg, var(--ty-bg-neutral-soft));\n  color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));\n}\n\n.nav-btn:active {\n  background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));\n  transform: scale(0.95);\n}\n\n.nav-btn:disabled {\n  opacity: 0.35;\n  cursor: default;\n  pointer-events: none;\n}\n\n.nav-btn:focus-visible {\n  outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));\n  outline-offset: 2px;\n}\n\n.nav-btn svg {\n  width: var(--nav-btn-icon-size);\n  height: var(--nav-btn-icon-size);\n  display: block;\n}\n\n.month-year-display {\n  font-size: var(--nav-font-size);\n  font-weight: 600;\n  color: var(--ty-calendar-nav-title-color, var(--ty-color-neutral-strong));\n  text-align: center;\n  white-space: nowrap;\n  letter-spacing: -0.01em;\n}\n";
+export declare const calendarNavigationStyles = "\n/* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of\n   use (NOT on :host) so consumers can override them from outside \u2014 this\n   component is nested inside ty-calendar's shadow, so a :host default would\n   block inherited overrides. --ty-calendar-accent still cascades in. */\n\n:host([data-size=\"md\"]) {\n  --nav-btn-size: 2rem;\n  --nav-btn-icon-size: 1.25rem;\n  --nav-font-size: 0.875rem;\n  --nav-padding: 0.5rem 0.75rem;\n  --nav-default-width: 280px;\n}\n\n:host([data-size=\"sm\"]) {\n  --nav-btn-size: 1.5rem;\n  --nav-btn-icon-size: 1rem;\n  --nav-font-size: 0.875rem;\n  --nav-padding: 0.375rem 0.5rem;\n  --nav-default-width: 240px;\n}\n\n:host([data-size=\"lg\"]) {\n  --nav-btn-size: 2.5rem;\n  --nav-btn-icon-size: 1.5rem;\n  --nav-font-size: 0.875rem;\n  --nav-padding: 0.625rem 1rem;\n  --nav-default-width: 360px;\n}\n\n.calendar-navigation-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--nav-padding);\n  font-family: inherit;\n  user-select: none;\n  /* --ty-calendar-width is the public knob: set it on ty-calendar (or any\n     ancestor) and BOTH the nav and the day grid follow it, because custom\n     properties inherit through shadow boundaries. --nav-default-width can't\n     serve that role \u2014 it's declared on :host([data-size]) inside this shadow\n     root, and a declaration on the element always beats a value inherited\n     into it, so an outside override of it is silently dead. --nav-width\n     (set inline by the width attribute) still wins over both. */\n  width: var(--nav-width, var(--ty-calendar-width, var(--nav-default-width)));\n  box-sizing: border-box;\n}\n\n/* Navigation groups: left, center, right */\n.nav-group {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.nav-group-left,\n.nav-group-right {\n  flex: 0 0 auto;\n}\n\n.nav-group-center {\n  flex: 1;\n  justify-content: center;\n  /* Flex items default to min-width:auto, i.e. they refuse to shrink below\n     their content. A long month name (\"September 2026\") therefore widened\n     this group and shoved the arrow groups outward \u2014 the nav visibly\n     re-laid-out as you paged month to month. min-width:0 lets the centre\n     take exactly the leftover space, so the arrows stay pinned whatever the\n     label says, and an over-long label ellipsizes instead of pushing. */\n  min-width: 0;\n}\n\n.nav-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--nav-btn-size);\n  height: var(--nav-btn-size);\n  padding: 0;\n  border: none;\n  border-radius: var(--ty-radius-base);\n  background-color: transparent;\n  color: var(--ty-calendar-nav-color, var(--ty-color-neutral));\n  cursor: pointer;\n  transition: var(--ty-local-transition, all 0.15s ease);\n  outline: none;\n}\n\n.nav-btn:hover {\n  background-color: var(--ty-calendar-nav-hover-bg, var(--ty-bg-neutral-soft));\n  color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));\n}\n\n.nav-btn:active {\n  background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));\n  transform: scale(0.95);\n}\n\n.nav-btn:disabled {\n  opacity: 0.35;\n  cursor: default;\n  pointer-events: none;\n}\n\n.nav-btn:focus-visible {\n  outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));\n  outline-offset: 2px;\n}\n\n.nav-btn svg {\n  width: var(--nav-btn-icon-size);\n  height: var(--nav-btn-icon-size);\n  display: block;\n}\n\n/* 14px uppercase at every size, not a per-size type scale: the label is the\n   widest thing in the bar and the only one whose width depends on the data\n   (\"May\" vs \"September\"), so scaling it up on lg was what made the arrows\n   shuffle around. Small caps read as chrome, stay legible, and leave the\n   centre column comfortably wider than the longest localized month name.\n   Ellipsis is a backstop for a narrow --nav-width, not the sizing strategy. */\n.month-year-display {\n  font-size: var(--nav-font-size);\n  font-weight: 600;\n  color: var(--ty-calendar-nav-title-color, var(--ty-color-neutral-strong));\n  text-align: center;\n  white-space: nowrap;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n";

package/lib/styles/calendar-navigation.js

@@ -2,7 +2,7 @@ export const calendarNavigationStyles = `
 :host([data-size="md"]) {
 --nav-btn-size: 2rem;
 --nav-btn-icon-size: 1.25rem;
---nav-font-size: 1rem;
+--nav-font-size: 0.875rem;
 --nav-padding: 0.5rem 0.75rem;
 --nav-default-width: 280px;
 }
@@ -16,7 +16,7 @@ export const calendarNavigationStyles = `
 :host([data-size="lg"]) {
 --nav-btn-size: 2.5rem;
 --nav-btn-icon-size: 1.5rem;
---nav-font-size: 1.125rem;
+--nav-font-size: 0.875rem;
 --nav-padding: 0.625rem 1rem;
 --nav-default-width: 360px;
 }
@@ -27,7 +27,7 @@ justify-content: space-between;
 padding: var(--nav-padding);
 font-family: inherit;
 user-select: none;
-width: var(--nav-width, var(--nav-default-width));
+width: var(--nav-width, var(--ty-calendar-width, var(--nav-default-width)));
 box-sizing: border-box;
 }
 .nav-group {
@@ -42,6 +42,7 @@ flex: 0 0 auto;
 .nav-group-center {
 flex: 1;
 justify-content: center;
+min-width: 0;
 }
 .nav-btn {
 display: inline-flex;
@@ -86,6 +87,9 @@ font-weight: 600;
 color: var(--ty-calendar-nav-title-color, var(--ty-color-neutral-strong));
 text-align: center;
 white-space: nowrap;
-letter-spacing: -0.01em;
+text-transform: uppercase;
+letter-spacing: 0.04em;
+overflow: hidden;
+text-overflow: ellipsis;
 }
 `;

package/lib/styles/calendar.d.ts

@@ -2,4 +2,4 @@
  * Calendar Orchestration Styles
  * Simple container for navigation + month display
  */
-export declare const calendarStyles = "\n.calendar-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  box-sizing: border-box;\n  font-family: inherit;\n}\n\n@media (max-width: 320px) {\n  .calendar-container {\n    gap: 0.375rem;\n  }\n}\n";
+export declare const calendarStyles = "\n.calendar-container {\n  display: flex;\n  flex-direction: column;\n  gap: 0.125rem;\n  box-sizing: border-box;\n  font-family: inherit;\n  /* Nav is a fixed width and the grid is fit-content, so in any host wider\n     than them (a popup, a stretched cell) the default stretch alignment\n     left-pinned both. Centring keeps the block centred in whatever space it\n     gets \u2014 without widening the calendar itself to fill it. */\n  align-items: center;\n}\n\n@media (max-width: 320px) {\n  .calendar-container {\n    gap: 0.375rem;\n  }\n}\n";

package/lib/styles/calendar.js

@@ -5,6 +5,7 @@ flex-direction: column;
 gap: 0.125rem;
 box-sizing: border-box;
 font-family: inherit;
+align-items: center;
 }
 @media (max-width: 320px) {
 .calendar-container {