tyrell-components 1.0.0-TC51 → 1.0.0-TC53

package/lib/styles/calendar-month.js

@@ -1,251 +1,191 @@
 import { FLAVORS } from "../types/common.js";
 const calendarMonthFlavor = (f, fb) => {
-    const color = (s) => fb
-        ? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
-        : `var(--ty-color-${f}${s})`;
-    const bg = (s) => fb
-        ? `var(--ty-bg-${f}${s}, var(--ty-bg-${fb}${s}))`
-        : `var(--ty-bg-${f}${s})`;
-    return `
+const color = (s) => fb
+? `var(--ty-color-${f}${s}, var(--ty-color-${fb}${s}))`
+: `var(--ty-color-${f}${s})`;
+const bg = (s) => fb
+? `var(--ty-bg-${f}${s}, var(--ty-bg-${fb}${s}))`
+: `var(--ty-bg-${f}${s})`;
+return `
 :host([flavor="${f}"]) {
-  --calendar-month-accent: ${color("")};
-  --calendar-month-selected-bg: ${bg("")};
-  --calendar-month-selected-color: ${color("-strong")};
-  --calendar-month-selected-hover-bg: ${bg("-bold")};
+--calendar-month-accent: ${color("")};
+--calendar-month-selected-bg: ${bg("")};
+--calendar-month-selected-color: ${color("-strong")};
+--calendar-month-selected-hover-bg: ${bg("-bold")};
 }
 :host([flavor="${f}+"]) {
-  --calendar-month-accent: ${color("-strong")};
-  --calendar-month-selected-bg: ${bg("-bold")};
-  --calendar-month-selected-color: ${color("-strong")};
-  --calendar-month-selected-hover-bg: ${bg("-bold")};
+--calendar-month-accent: ${color("-strong")};
+--calendar-month-selected-bg: ${bg("-bold")};
+--calendar-month-selected-color: ${color("-strong")};
+--calendar-month-selected-hover-bg: ${bg("-bold")};
 }
 :host([flavor="${f}-"]) {
-  --calendar-month-accent: ${color("-soft")};
-  --calendar-month-selected-bg: ${bg("-soft")};
-  --calendar-month-selected-color: ${color("")};
-  --calendar-month-selected-hover-bg: ${bg("")};
+--calendar-month-accent: ${color("-soft")};
+--calendar-month-selected-bg: ${bg("-soft")};
+--calendar-month-selected-color: ${color("")};
+--calendar-month-selected-hover-bg: ${bg("")};
 }
 `;
 };
 export const calendarMonthCustomFlavorCss = (base) => calendarMonthFlavor(base, "neutral");
 export const calendarMonthStyles = `
-/* Theming tokens are applied as var(--ty-calendar-*, <default>) at point
-   of use (not declared on :host) so consumers can override any of them
-   from outside the shadow root. The 3 accent aliases — --ty-calendar-accent,
-   --ty-calendar-today-accent, --ty-calendar-muted — still cascade into the
-   derived defaults, so overriding one retints the related cells. */
-
 .calendar-flex-container {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  gap: 0;
-  padding: 0.75rem;
-  border-radius: var(--ty-radius-md);
-  font-family: inherit;
-  user-select: none;
-  width: var(--calendar-width, fit-content);
-  min-width: 280px;
-  max-width: var(--calendar-max-width, none);
-}
-
-/* Rows: header + 6 day rows */
+display: flex;
+flex-direction: column;
+box-sizing: border-box;
+gap: 0;
+padding: 0.75rem;
+border-radius: var(--ty-radius-md);
+font-family: inherit;
+user-select: none;
+width: var(--calendar-width, fit-content);
+min-width: 280px;
+max-width: var(--calendar-max-width, none);
+}
 .calendar-row {
-  display: flex;
-  flex: 1;
-  min-height: 0;
+display: flex;
+flex: 1;
+min-height: 0;
 }
-
 .calendar-header-row {
-  flex: 0 0 auto;
-  color: var(--ty-calendar-header-color, var(--ty-color-neutral-soft));
+flex: 0 0 auto;
+color: var(--ty-calendar-header-color, var(--ty-color-neutral-soft));
 }
-
 .calendar-day-row {
-  flex: 1;
-  min-height: 2rem;
-  margin-bottom: 0.125rem;
+flex: 1;
+min-height: 2rem;
+margin-bottom: 0.125rem;
 }
-
 .calendar-cell {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 0;
-  position: relative;
-  box-sizing: border-box;
-}
-
+flex: 1;
+display: flex;
+align-items: center;
+justify-content: center;
+min-width: 0;
+position: relative;
+box-sizing: border-box;
+}
 .calendar-header-cell {
-  text-align: center;
-  font-weight: 500;
-  text-transform: uppercase;
-  padding: 0.25rem;
-  letter-spacing: 0.05em;
+text-align: center;
+font-weight: 500;
+text-transform: uppercase;
+padding: 0.25rem;
+letter-spacing: 0.05em;
 }
-
 .calendar-day-cell {
-  aspect-ratio: 1;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-
-  margin: 0.125rem;
-
-  /* Visual: ghost cells — no boxes; the border is a theming hook only */
-  border-radius: var(--ty-calendar-day-radius, 0.5rem);
-  border: 1px solid var(--ty-calendar-day-border, transparent);
-  background-color: var(--ty-calendar-day-bg, transparent);
-  color: var(--ty-calendar-day-color, var(--ty-calendar-muted, var(--ty-text)));
-  cursor: pointer;
-  transition: var(--ty-local-transition, background-color 0.15s ease, color 0.15s ease);
-
-  font-weight: 400;
-  font-variant-numeric: tabular-nums;
-}
-
-/* Hover: soft rounded pill, no border flash */
+aspect-ratio: 1;
+display: flex;
+align-items: center;
+justify-content: center;
+flex-direction: column;
+margin: 0.125rem;
+border-radius: var(--ty-calendar-day-radius, 0.5rem);
+border: 1px solid var(--ty-calendar-day-border, transparent);
+background-color: var(--ty-calendar-day-bg, transparent);
+color: var(--ty-calendar-day-color, var(--ty-calendar-muted, var(--ty-text)));
+cursor: pointer;
+transition: var(--ty-local-transition, background-color 0.15s ease, color 0.15s ease);
+font-weight: 400;
+font-variant-numeric: tabular-nums;
+}
 .calendar-day-cell:hover {
-  color: var(--ty-calendar-day-hover-color, var(--ty-text-strong));
-  background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));
-  border-color: var(--ty-calendar-day-hover-border, transparent);
-}
-
-/* Keyboard focus ring (roving tabindex — see calendar-month.ts's render()).
-   :focus-visible, not :focus, so mouse/pointerdown activation doesn't flash
-   a ring; only Tab-in / arrow-key navigation does. */
+color: var(--ty-calendar-day-hover-color, var(--ty-text-strong));
+background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));
+border-color: var(--ty-calendar-day-hover-border, transparent);
+}
 .calendar-day-cell:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--calendar-month-accent, var(--ty-color-primary));
+outline: none;
+box-shadow: 0 0 0 2px var(--calendar-month-accent, var(--ty-color-primary));
 }
-
-/* Today: accent number, no slab — never collides with hover, and the
-   selected pill wins when today is picked */
 .calendar-day-cell.today {
-  background-color: var(--ty-calendar-today-bg, transparent);
-  color: var(--ty-calendar-today-color, var(--ty-calendar-today-accent, var(--calendar-month-accent, var(--ty-color-primary))));
-  border-color: var(--ty-calendar-today-border, transparent);
-  font-weight: 600;
+background-color: var(--ty-calendar-today-bg, transparent);
+color: var(--ty-calendar-today-color, var(--ty-calendar-today-accent, var(--calendar-month-accent, var(--ty-color-primary))));
+border-color: var(--ty-calendar-today-border, transparent);
+font-weight: 600;
 }
-
-/* Weekend: no distinction by default (hook kept for theming) */
 .calendar-day-cell.weekend {
-  color: var(--ty-calendar-weekend-color, var(--ty-calendar-day-color, var(--ty-text)));
-}
-
-/* Other Month - Muted.
-   Was color: var(--ty-color-neutral-faint) at opacity 0.5 — -faint alone is
-   only ~2.5:1 against the content surface (already under the 4.5:1 AA text
-   minimum), and blending it toward the background via opacity made it
-   worse (~1.5:1 in light mode). --ty-calendar-other-month-color is its own
-   token (tyrell.css :root / html.dark) calibrated to actually pass, with
-   opacity dropped rather than layered on top. */
+color: var(--ty-calendar-weekend-color, var(--ty-calendar-day-color, var(--ty-text)));
+}
 .calendar-day-cell.other-month {
-  color: var(--ty-calendar-other-month-color, #6b7280);
+color: var(--ty-calendar-other-month-color, #6b7280);
 }
-
 .calendar-day-cell.other-month:hover { 
-  color: var(--ty-calendar-day-hover-color, var(--ty-color-neutral-strong));
-  background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));
-  opacity: 0.7;
+color: var(--ty-calendar-day-hover-color, var(--ty-color-neutral-strong));
+background-color: var(--ty-calendar-day-hover-bg, var(--ty-bg-neutral-soft));
+opacity: 0.7;
 }
-
-/* Disabled - outside min/max bounds */
 .calendar-day-cell.disabled {
-  color: var(--ty-calendar-disabled-color, var(--ty-color-neutral-faint));
-  opacity: var(--ty-calendar-disabled-opacity, 0.35);
-  cursor: default;
-  pointer-events: none;
+color: var(--ty-calendar-disabled-color, var(--ty-color-neutral-faint));
+opacity: var(--ty-calendar-disabled-opacity, 0.35);
+cursor: default;
+pointer-events: none;
 }
-
-/* Selected: the one strong element in the grid */
 .calendar-day-cell.selected {
-  background-color: var(--ty-calendar-selected-bg, var(--calendar-month-selected-bg, var(--ty-bg-primary)));
-  color: var(--ty-calendar-selected-color, var(--calendar-month-selected-color, var(--ty-color-primary-strong)));
-  border-color: var(--ty-calendar-selected-border, var(--ty-calendar-accent, var(--calendar-month-accent, transparent)));
-  font-weight: 600;
+background-color: var(--ty-calendar-selected-bg, var(--calendar-month-selected-bg, var(--ty-bg-primary)));
+color: var(--ty-calendar-selected-color, var(--calendar-month-selected-color, var(--ty-color-primary-strong)));
+border-color: var(--ty-calendar-selected-border, var(--ty-calendar-accent, var(--calendar-month-accent, transparent)));
+font-weight: 600;
 }
-
 .calendar-day-cell.selected:hover {
-  background-color: var(--ty-calendar-selected-hover-bg, var(--calendar-month-selected-hover-bg, var(--ty-bg-primary-bold)));
-  border-color: var(--ty-calendar-selected-hover-border, transparent);
+background-color: var(--ty-calendar-selected-hover-bg, var(--calendar-month-selected-hover-bg, var(--ty-bg-primary-bold)));
+border-color: var(--ty-calendar-selected-hover-border, transparent);
 }
-
 .calendar-day-cell.selected.other-month {
-  opacity: 0.7;
+opacity: 0.7;
 }
-
 .calendar-size-sm {
-  padding: 0.5rem;
-  min-width: 240px;
+padding: 0.5rem;
+min-width: 240px;
 }
-
 .calendar-size-sm .calendar-header-cell {
-  font-size: 0.625rem;
-  padding: 0.125rem;
+font-size: 0.625rem;
+padding: 0.125rem;
 }
-
 .calendar-size-sm .calendar-day-cell {
-  font-size: 0.75rem;
-  margin: 0.0625rem;
+font-size: 0.75rem;
+margin: 0.0625rem;
 }
-
 .calendar-size-sm .calendar-day-row {
-  min-height: 1.5rem;
+min-height: 1.5rem;
 }
-
 .calendar-size-md {
-  padding: 0.75rem;
-  min-width: 280px;
+padding: 0.75rem;
+min-width: 280px;
 }
-
 .calendar-size-md .calendar-header-cell {
-  font-size: 0.6875rem;
-  padding: 0.25rem;
+font-size: 0.6875rem;
+padding: 0.25rem;
 }
-
 .calendar-size-md .calendar-day-cell {
-  font-size: 0.8125rem;
-  margin: 0.125rem;
+font-size: 0.8125rem;
+margin: 0.125rem;
 }
-
 .calendar-size-md .calendar-day-row {
-  min-height: 2rem;
+min-height: 2rem;
 }
-
 .calendar-size-lg {
-  padding: 1rem;
-  min-width: 360px;
+padding: 1rem;
+min-width: 360px;
 }
-
 .calendar-size-lg .calendar-header-cell {
-  font-size: 0.75rem;
-  padding: 0.375rem;
+font-size: 0.75rem;
+padding: 0.375rem;
 }
-
 .calendar-size-lg .calendar-day-cell {
-  font-size: 0.875rem;
-  margin: 0.1875rem;
+font-size: 0.875rem;
+margin: 0.1875rem;
 }
-
 .calendar-size-lg .calendar-day-row {
-  min-height: 2.5rem;
+min-height: 2.5rem;
 }
-
-/* Kept for backwards compatibility */
 .calendar-day {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-
-/* Flavor variants set --calendar-month-*, consumed above */
+width: 100%;
+height: 100%;
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+box-sizing: border-box;
+}
 ${FLAVORS.map((f) => calendarMonthFlavor(f)).join("")}
 `;

package/lib/styles/calendar-navigation.js

@@ -1,110 +1,91 @@
 export const calendarNavigationStyles = `
-/* Theming tokens applied as var(--ty-calendar-nav-*, <default>) at point of
-   use (NOT on :host) so consumers can override them from outside — this
-   component is nested inside ty-calendar's shadow, so a :host default would
-   block inherited overrides. --ty-calendar-accent still cascades in. */
-
 :host([data-size="md"]) {
-  --nav-btn-size: 2rem;
-  --nav-btn-icon-size: 1.25rem;
-  --nav-font-size: 1rem;
-  --nav-padding: 0.5rem 0.75rem;
-  --nav-default-width: 280px;
+--nav-btn-size: 2rem;
+--nav-btn-icon-size: 1.25rem;
+--nav-font-size: 1rem;
+--nav-padding: 0.5rem 0.75rem;
+--nav-default-width: 280px;
 }
-
 :host([data-size="sm"]) {
-  --nav-btn-size: 1.5rem;
-  --nav-btn-icon-size: 1rem;
-  --nav-font-size: 0.875rem;
-  --nav-padding: 0.375rem 0.5rem;
-  --nav-default-width: 240px;
+--nav-btn-size: 1.5rem;
+--nav-btn-icon-size: 1rem;
+--nav-font-size: 0.875rem;
+--nav-padding: 0.375rem 0.5rem;
+--nav-default-width: 240px;
 }
-
 :host([data-size="lg"]) {
-  --nav-btn-size: 2.5rem;
-  --nav-btn-icon-size: 1.5rem;
-  --nav-font-size: 1.125rem;
-  --nav-padding: 0.625rem 1rem;
-  --nav-default-width: 360px;
+--nav-btn-size: 2.5rem;
+--nav-btn-icon-size: 1.5rem;
+--nav-font-size: 1.125rem;
+--nav-padding: 0.625rem 1rem;
+--nav-default-width: 360px;
 }
-
 .calendar-navigation-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--nav-padding);
-  font-family: inherit;
-  user-select: none;
-  width: var(--nav-width, var(--nav-default-width));
-  box-sizing: border-box;
+display: flex;
+align-items: center;
+justify-content: space-between;
+padding: var(--nav-padding);
+font-family: inherit;
+user-select: none;
+width: var(--nav-width, var(--nav-default-width));
+box-sizing: border-box;
 }
-
-/* Navigation groups: left, center, right */
 .nav-group {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
+display: flex;
+align-items: center;
+gap: 0.25rem;
 }
-
 .nav-group-left,
 .nav-group-right {
-  flex: 0 0 auto;
+flex: 0 0 auto;
 }
-
 .nav-group-center {
-  flex: 1;
-  justify-content: center;
+flex: 1;
+justify-content: center;
 }
-
 .nav-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--nav-btn-size);
-  height: var(--nav-btn-size);
-  padding: 0;
-  border: none;
-  border-radius: var(--ty-radius-base);
-  background-color: transparent;
-  color: var(--ty-calendar-nav-color, var(--ty-color-neutral));
-  cursor: pointer;
-  transition: var(--ty-local-transition, all 0.15s ease);
-  outline: none;
+display: inline-flex;
+align-items: center;
+justify-content: center;
+width: var(--nav-btn-size);
+height: var(--nav-btn-size);
+padding: 0;
+border: none;
+border-radius: var(--ty-radius-base);
+background-color: transparent;
+color: var(--ty-calendar-nav-color, var(--ty-color-neutral));
+cursor: pointer;
+transition: var(--ty-local-transition, all 0.15s ease);
+outline: none;
 }
-
 .nav-btn:hover {
-  background-color: var(--ty-calendar-nav-hover-bg, var(--ty-bg-neutral-soft));
-  color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));
+background-color: var(--ty-calendar-nav-hover-bg, var(--ty-bg-neutral-soft));
+color: var(--ty-calendar-nav-hover-color, var(--ty-color-neutral-strong));
 }
-
 .nav-btn:active {
-  background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));
-  transform: scale(0.95);
+background-color: var(--ty-calendar-nav-active-bg, var(--ty-bg-neutral));
+transform: scale(0.95);
 }
-
 .nav-btn:disabled {
-  opacity: 0.35;
-  cursor: default;
-  pointer-events: none;
+opacity: 0.35;
+cursor: default;
+pointer-events: none;
 }
-
 .nav-btn:focus-visible {
-  outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));
-  outline-offset: 2px;
+outline: 2px solid var(--ty-calendar-nav-focus-outline, var(--ty-calendar-accent, var(--ty-color-primary)));
+outline-offset: 2px;
 }
-
 .nav-btn svg {
-  width: var(--nav-btn-icon-size);
-  height: var(--nav-btn-icon-size);
-  display: block;
+width: var(--nav-btn-icon-size);
+height: var(--nav-btn-icon-size);
+display: block;
 }
-
 .month-year-display {
-  font-size: var(--nav-font-size);
-  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;
+font-size: var(--nav-font-size);
+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;
 }
 `;

package/lib/styles/calendar.js

@@ -1,15 +1,14 @@
 export const calendarStyles = `
 .calendar-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  box-sizing: border-box;
-  font-family: inherit;
+display: flex;
+flex-direction: column;
+gap: 0.125rem;
+box-sizing: border-box;
+font-family: inherit;
 }
-
 @media (max-width: 320px) {
-  .calendar-container {
-    gap: 0.375rem;
-  }
+.calendar-container {
+gap: 0.375rem;
+}
 }
 `;