tyrell-components 1.0.0-TC18 → 1.0.0-TC22

package/lib/components/modal.d.ts

@@ -8,7 +8,7 @@
  * Features:
  * - Native dialog element wrapper
  * - Dual API: declarative (open attribute) and imperative (show/hide methods)
- * - Protected mode with confirmation dialog
+ * - Cancellable `beforeclose` lifecycle event for unsaved-state flows
  * - Auto-hiding close button on hover (desktop only)
  * - Scroll locking with unique modal IDs
  * - Customizable backdrop via CSS variables
@@ -32,22 +32,42 @@ export interface ModalAttributes {
     backdrop: boolean;
     closeOnOutsideClick: boolean;
     closeOnEscape: boolean;
-    protected: boolean;
 }
+/**
+ * How a modal close was triggered.
+ */
+export type ModalCloseReason = 'programmatic' | 'backdrop' | 'escape' | 'close-button' | 'native';
 /**
  * Modal close event detail
  */
 export interface ModalCloseDetail {
-    reason: 'programmatic' | 'native';
+    reason: ModalCloseReason;
     returnValue?: string;
 }
+/**
+ * Modal beforeclose event detail — fired *before* the modal closes. The event
+ * is cancellable; consumers can call `event.preventDefault()` to abort the
+ * close, render their own UI (e.g. a styled "Discard changes?" prompt), and
+ * later call `.hide()` themselves when ready.
+ */
+export interface ModalBeforeCloseDetail {
+    reason: ModalCloseReason;
+}
 /**
  * TyModal Web Component
  */
 export declare class TyModal extends HTMLElement {
     /** Programmatic API methods */
     show?: () => void;
-    hide?: () => void;
+    /**
+     * Close the modal. Without `force`, fires `beforeclose` first — consumers
+     * can `preventDefault()` to abort. With `force: true`, bypasses the
+     * cancellable event; used when the consumer has already obtained user
+     * consent through their own UI.
+     */
+    hide?: (opts?: {
+        force?: boolean;
+    }) => void;
     /** Observed attributes */
     static get observedAttributes(): string[];
     constructor();

package/lib/components/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/components/modal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAUH;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,cAAc,GAAG,QAAQ,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAweD;;GAEG;AACH,qBAAa,OAAQ,SAAQ,WAAW;IACtC,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAElB,0BAA0B;IAC1B,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IAQjB,oBAAoB;IAIpB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI;CAI3F"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/components/modal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAUH;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,aAAa,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,MAAM,gBAAgB,GACxB,cAAc,GACd,UAAU,GACV,QAAQ,GACR,cAAc,GACd,QAAQ,CAAC;AAEb;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,gBAAgB,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;GAKG;AACH,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,gBAAgB,CAAC;CAC1B;AA0fD;;GAEG;AACH,qBAAa,OAAQ,SAAQ,WAAW;IACtC,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,IAAI,CAAC;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IAE5C,0BAA0B;IAC1B,MAAM,KAAK,kBAAkB,aAE5B;;IAOD,iBAAiB;IAQjB,oBAAoB;IAIpB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI;CAI3F"}

package/lib/components/modal.js

@@ -8,7 +8,7 @@
  * Features:
  * - Native dialog element wrapper
  * - Dual API: declarative (open attribute) and imperative (show/hide methods)
- * - Protected mode with confirmation dialog
+ * - Cancellable `beforeclose` lifecycle event for unsaved-state flows
  * - Auto-hiding close button on hover (desktop only)
  * - Scroll locking with unique modal IDs
  * - Customizable backdrop via CSS variables
@@ -76,7 +76,6 @@ function getModalAttributes(el) {
         closeOnEscape: el.hasAttribute('close-on-escape')
             ? parseBoolAttr(el, 'close-on-escape')
             : true,
-        protected: parseBoolAttr(el, 'protected'),
     };
 }
 /**
@@ -147,21 +146,36 @@ function ensureInternalDialog(shadowRoot) {
 // Event Handlers
 // ============================================================================
 /**
- * Close modal with protection check
+ * Close modal with cancellable beforeclose lifecycle.
+ *
+ *   1. Emit `beforeclose` (cancellable, bubbles, composed). Consumers can
+ *      `event.preventDefault()` to abort the close — render your own UI for
+ *      unsaved-state flows.
+ *   2. Remove the `open` attribute, which triggers the actual close.
+ *
+ * Callers pass `reason` so consumers can decide differently based on intent
+ * (e.g. "OK to discard via ESC, but not via .hide() during a save").
  */
-function closeModal(el) {
-    const { protected: isProtected } = getModalAttributes(el);
+function closeModal(el, reason = 'programmatic', opts) {
     const shadowRoot = el.shadowRoot;
     const dialog = shadowRoot ? getModalDialog(shadowRoot) : null;
     if (!dialog || !dialog.open)
         return;
-    // Check if protected mode is enabled
-    if (isProtected) {
-        const confirmed = confirm('You have unsaved changes. Are you sure you want to close?');
-        if (!confirmed)
+    // `force: true` bypasses the cancellable event. Used by consumers AFTER
+    // they've shown their own confirm UI and the user said "yes, close" —
+    // calling `.hide()` again without force would re-trigger their intercept.
+    if (!opts?.force) {
+        const beforeClose = new CustomEvent('beforeclose', {
+            detail: { reason },
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+        });
+        el.dispatchEvent(beforeClose);
+        if (beforeClose.defaultPrevented)
             return;
     }
-    // Remove open attribute
+    // Remove open attribute (triggers actual close).
     el.removeAttribute('open');
 }
 /**
@@ -180,7 +194,7 @@ function handleBackdropClick(el, event) {
     // Only close if clicking on dialog backdrop (not content)
     if (dialog && event.target === dialog) {
         event.preventDefault();
-        closeModal(el);
+        closeModal(el, 'backdrop');
     }
 }
 /**
@@ -190,7 +204,7 @@ function handleEscapeKey(el, event) {
     event.stopPropagation();
     if (event.key === 'Escape') {
         event.preventDefault();
-        closeModal(el);
+        closeModal(el, 'escape');
     }
 }
 /**
@@ -199,7 +213,7 @@ function handleEscapeKey(el, event) {
 function handleCloseButtonClick(el, event) {
     event.preventDefault();
     event.stopPropagation();
-    closeModal(el);
+    closeModal(el, 'close-button');
 }
 /**
  * Handle hover enter on modal content (hide close button)
@@ -456,7 +470,7 @@ function cleanup(el) {
 export class TyModal extends HTMLElement {
     /** Observed attributes */
     static get observedAttributes() {
-        return ['open', 'backdrop', 'close-on-outside-click', 'close-on-escape', 'protected'];
+        return ['open', 'backdrop', 'close-on-outside-click', 'close-on-escape'];
     }
     constructor() {
         super();
@@ -466,7 +480,7 @@ export class TyModal extends HTMLElement {
         render(this);
         // Add public API methods
         this.show = () => openModal(this);
-        this.hide = () => closeModal(this);
+        this.hide = (opts) => closeModal(this, 'programmatic', opts);
     }
     disconnectedCallback() {
         cleanup(this);

package/lib/components/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../src/components/modal.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../src/components/modal.ts"],"names":[],"mappings":"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"}

package/lib/components/tooltip.js

@@ -150,7 +150,7 @@ function applyFlavorStyles(popover, flavor) {
             popover.style.borderColor = 'var(--ty-border-secondary, #a78bfa)';
             break;
         case 'success':
-            popover.style.background = 'var(--ty-bg-success-mild, #10b981)';
+            popover.style.background = 'var(--ty-bg-success-bold, #10b981)';
             popover.style.color = 'var(--ty-color-success-strong, #ecfdf5)';
             popover.style.borderColor = 'var(--ty-border-success, #34d399)';
             break;

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

@@ -2,5 +2,5 @@
  * Calendar Month Styles
  * Improved design with better visual hierarchy and size variants
  */
-export declare const calendarMonthStyles = "\n/* ============================================================================\n   Theming Tokens\n   Override these to retheme the calendar without touching the global palette.\n   Defaults chain back to the global --ty-color-* / --ty-bg-* / --ty-border tokens.\n   ============================================================================ */\n\n:host {\n  /* Accent aliases \u2014 override these three for thin retheming */\n  --ty-calendar-accent: var(--ty-color-primary);\n  --ty-calendar-today-accent: var(--ty-color-secondary);\n  --ty-calendar-muted: var(--ty-color-neutral);\n\n  /* Header (weekday names) */\n  --ty-calendar-header-color: var(--ty-color-neutral-strong);\n\n  /* Day cell \u2014 base */\n  --ty-calendar-day-color: var(--ty-calendar-muted);\n  --ty-calendar-day-bg: transparent;\n  --ty-calendar-day-border: var(--ty-border);\n  --ty-calendar-day-radius: 0.375rem;\n\n  /* Day cell \u2014 hover */\n  --ty-calendar-day-hover-color: var(--ty-color-neutral-strong);\n  --ty-calendar-day-hover-bg: var(--ty-bg-neutral-soft);\n  --ty-calendar-day-hover-border: var(--ty-border-mild);\n\n  /* Today */\n  --ty-calendar-today-color: var(--ty-color-secondary-strong);\n  --ty-calendar-today-bg: var(--ty-bg-secondary-soft);\n  --ty-calendar-today-border: var(--ty-calendar-today-accent);\n\n  /* Selected */\n  --ty-calendar-selected-color: var(--ty-color-primary-strong);\n  --ty-calendar-selected-bg: var(--ty-bg-primary);\n  --ty-calendar-selected-border: var(--ty-calendar-accent);\n  --ty-calendar-selected-hover-bg: var(--ty-bg-primary-mild);\n  --ty-calendar-selected-hover-border: var(--ty-color-primary-mild);\n\n  /* Modifier states */\n  --ty-calendar-weekend-color: var(--ty-color-danger-soft);\n  --ty-calendar-other-month-color: var(--ty-color-neutral-faint);\n  --ty-calendar-other-month-opacity: 0.5;\n}\n\n/* ============================================================================\n   Base Calendar Container\n   ============================================================================ */\n\n.calendar-flex-container {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  gap: 0;\n  padding: 0.75rem;\n  border-radius: 0.5rem;\n  font-family: system-ui, sans-serif;\n  user-select: none;\n  width: var(--calendar-width, fit-content);\n  min-width: 280px;\n  max-width: var(--calendar-max-width, none);\n}\n\n/* ============================================================================\n   Rows (Header + 6 Day Rows)\n   ============================================================================ */\n\n.calendar-row {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n}\n\n.calendar-header-row {\n  flex: 0 0 auto;\n  color: var(--ty-calendar-header-color);\n}\n\n.calendar-day-row {\n  flex: 1;\n  min-height: 2rem;\n  margin-bottom: 0.125rem;\n}\n\n/* ============================================================================\n   Base Cell Styles\n   ============================================================================ */\n\n.calendar-cell {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  position: relative;\n  box-sizing: border-box;\n}\n\n/* ============================================================================\n   Header Cells\n   ============================================================================ */\n\n.calendar-header-cell {\n  text-align: center;\n  font-weight: 600;\n  text-transform: uppercase;\n  padding: 0.25rem;\n  letter-spacing: 0.05em;\n}\n\n/* ============================================================================\n   Day Cells - Square with Better Visual Hierarchy\n   ============================================================================ */\n\n.calendar-day-cell {\n  /* Square cells */\n  aspect-ratio: 1;\n\n  /* Layout */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  /* Spacing */\n  margin: 0.125rem;\n\n  /* Visual */\n  border-radius: var(--ty-calendar-day-radius);\n  border: 1px solid var(--ty-calendar-day-border);\n  background-color: var(--ty-calendar-day-bg);\n  color: var(--ty-calendar-day-color);\n  cursor: pointer;\n  transition: all 0.15s ease;\n\n  /* Typography */\n  font-weight: 400;\n}\n\n/* Hover State - Stronger Feedback */\n.calendar-day-cell:hover {\n  color: var(--ty-calendar-day-hover-color);\n  background-color: var(--ty-calendar-day-hover-bg);\n  border-color: var(--ty-calendar-day-hover-border);\n}\n\n/* ============================================================================\n   Day States\n   ============================================================================ */\n\n/* Today - Strong Visual Indicator */\n.calendar-day-cell.today {\n  background-color: var(--ty-calendar-today-bg);\n  color: var(--ty-calendar-today-color);\n  border-color: var(--ty-calendar-today-border);\n  font-weight: 600;\n}\n\n/* Weekend - Subtle Color Shift */\n.calendar-day-cell.weekend {\n  color: var(--ty-calendar-weekend-color);\n}\n\n/* Other Month - Muted */\n.calendar-day-cell.other-month {\n  color: var(--ty-calendar-other-month-color);\n  opacity: var(--ty-calendar-other-month-opacity);\n}\n\n.calendar-day-cell.other-month:hover { \n  color: var(--ty-calendar-day-hover-color);\n  background-color: var(--ty-calendar-day-hover-bg);\n  opacity: 0.7;\n}\n\n/* Selected State (for custom usage) */\n.calendar-day-cell.selected {\n  background-color: var(--ty-calendar-selected-bg);\n  color: var(--ty-calendar-selected-color);\n  border-color: var(--ty-calendar-selected-border);\n  font-weight: 600;\n}\n\n.calendar-day-cell.selected:hover {\n  background-color: var(--ty-calendar-selected-hover-bg);\n  border-color: var(--ty-calendar-selected-hover-border);\n}\n\n.calendar-day-cell.selected.other-month {\n  opacity: 0.7;\n}\n\n/* ============================================================================\n   Size Variants\n   ============================================================================ */\n\n/* Small - Compact (240px min-width) */\n.calendar-size-sm {\n  padding: 0.5rem;\n  min-width: 240px;\n}\n\n.calendar-size-sm .calendar-header-cell {\n  font-size: 0.625rem;\n  padding: 0.125rem;\n}\n\n.calendar-size-sm .calendar-day-cell {\n  font-size: 0.75rem;\n  margin: 0.0625rem;\n}\n\n.calendar-size-sm .calendar-day-row {\n  min-height: 1.5rem;\n}\n\n/* Medium - Default (280px min-width) */\n.calendar-size-md {\n  padding: 0.75rem;\n  min-width: 280px;\n}\n\n.calendar-size-md .calendar-header-cell {\n  font-size: 0.6875rem;\n  padding: 0.25rem;\n}\n\n.calendar-size-md .calendar-day-cell {\n  font-size: 0.8125rem;\n  margin: 0.125rem;\n}\n\n.calendar-size-md .calendar-day-row {\n  min-height: 2rem;\n}\n\n/* Large - Spacious (360px min-width) */\n.calendar-size-lg {\n  padding: 1rem;\n  min-width: 360px;\n}\n\n.calendar-size-lg .calendar-header-cell {\n  font-size: 0.75rem;\n  padding: 0.375rem;\n}\n\n.calendar-size-lg .calendar-day-cell {\n  font-size: 0.875rem;\n  margin: 0.1875rem;\n}\n\n.calendar-size-lg .calendar-day-row {\n  min-height: 2.5rem;\n}\n\n/* ============================================================================\n   Backwards Compatibility\n   ============================================================================ */\n\n.calendar-day {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n";
+export declare const calendarMonthStyles = "\n/* ============================================================================\n   Theming Tokens\n   Override these to retheme the calendar without touching the global palette.\n   Defaults chain back to the global --ty-color-* / --ty-bg-* / --ty-border tokens.\n   ============================================================================ */\n\n:host {\n  /* Accent aliases \u2014 override these three for thin retheming */\n  --ty-calendar-accent: var(--ty-color-primary);\n  --ty-calendar-today-accent: var(--ty-color-secondary);\n  --ty-calendar-muted: var(--ty-color-neutral);\n\n  /* Header (weekday names) */\n  --ty-calendar-header-color: var(--ty-color-neutral-strong);\n\n  /* Day cell \u2014 base */\n  --ty-calendar-day-color: var(--ty-calendar-muted);\n  --ty-calendar-day-bg: transparent;\n  --ty-calendar-day-border: var(--ty-border);\n  --ty-calendar-day-radius: 0.375rem;\n\n  /* Day cell \u2014 hover */\n  --ty-calendar-day-hover-color: var(--ty-color-neutral-strong);\n  --ty-calendar-day-hover-bg: var(--ty-bg-neutral-soft);\n  --ty-calendar-day-hover-border: var(--ty-border-bold);\n\n  /* Today */\n  --ty-calendar-today-color: var(--ty-color-secondary-strong);\n  --ty-calendar-today-bg: var(--ty-bg-secondary-soft);\n  --ty-calendar-today-border: var(--ty-calendar-today-accent);\n\n  /* Selected */\n  --ty-calendar-selected-color: var(--ty-color-primary-strong);\n  --ty-calendar-selected-bg: var(--ty-bg-primary);\n  --ty-calendar-selected-border: var(--ty-calendar-accent);\n  --ty-calendar-selected-hover-bg: var(--ty-bg-primary-bold);\n  --ty-calendar-selected-hover-border: var(--ty-color-primary-bold);\n\n  /* Modifier states */\n  --ty-calendar-weekend-color: var(--ty-color-danger-soft);\n  --ty-calendar-other-month-color: var(--ty-color-neutral-faint);\n  --ty-calendar-other-month-opacity: 0.5;\n}\n\n/* ============================================================================\n   Base Calendar Container\n   ============================================================================ */\n\n.calendar-flex-container {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  gap: 0;\n  padding: 0.75rem;\n  border-radius: 0.5rem;\n  font-family: system-ui, sans-serif;\n  user-select: none;\n  width: var(--calendar-width, fit-content);\n  min-width: 280px;\n  max-width: var(--calendar-max-width, none);\n}\n\n/* ============================================================================\n   Rows (Header + 6 Day Rows)\n   ============================================================================ */\n\n.calendar-row {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n}\n\n.calendar-header-row {\n  flex: 0 0 auto;\n  color: var(--ty-calendar-header-color);\n}\n\n.calendar-day-row {\n  flex: 1;\n  min-height: 2rem;\n  margin-bottom: 0.125rem;\n}\n\n/* ============================================================================\n   Base Cell Styles\n   ============================================================================ */\n\n.calendar-cell {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n  position: relative;\n  box-sizing: border-box;\n}\n\n/* ============================================================================\n   Header Cells\n   ============================================================================ */\n\n.calendar-header-cell {\n  text-align: center;\n  font-weight: 600;\n  text-transform: uppercase;\n  padding: 0.25rem;\n  letter-spacing: 0.05em;\n}\n\n/* ============================================================================\n   Day Cells - Square with Better Visual Hierarchy\n   ============================================================================ */\n\n.calendar-day-cell {\n  /* Square cells */\n  aspect-ratio: 1;\n\n  /* Layout */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  /* Spacing */\n  margin: 0.125rem;\n\n  /* Visual */\n  border-radius: var(--ty-calendar-day-radius);\n  border: 1px solid var(--ty-calendar-day-border);\n  background-color: var(--ty-calendar-day-bg);\n  color: var(--ty-calendar-day-color);\n  cursor: pointer;\n  transition: all 0.15s ease;\n\n  /* Typography */\n  font-weight: 400;\n}\n\n/* Hover State - Stronger Feedback */\n.calendar-day-cell:hover {\n  color: var(--ty-calendar-day-hover-color);\n  background-color: var(--ty-calendar-day-hover-bg);\n  border-color: var(--ty-calendar-day-hover-border);\n}\n\n/* ============================================================================\n   Day States\n   ============================================================================ */\n\n/* Today - Strong Visual Indicator */\n.calendar-day-cell.today {\n  background-color: var(--ty-calendar-today-bg);\n  color: var(--ty-calendar-today-color);\n  border-color: var(--ty-calendar-today-border);\n  font-weight: 600;\n}\n\n/* Weekend - Subtle Color Shift */\n.calendar-day-cell.weekend {\n  color: var(--ty-calendar-weekend-color);\n}\n\n/* Other Month - Muted */\n.calendar-day-cell.other-month {\n  color: var(--ty-calendar-other-month-color);\n  opacity: var(--ty-calendar-other-month-opacity);\n}\n\n.calendar-day-cell.other-month:hover { \n  color: var(--ty-calendar-day-hover-color);\n  background-color: var(--ty-calendar-day-hover-bg);\n  opacity: 0.7;\n}\n\n/* Selected State (for custom usage) */\n.calendar-day-cell.selected {\n  background-color: var(--ty-calendar-selected-bg);\n  color: var(--ty-calendar-selected-color);\n  border-color: var(--ty-calendar-selected-border);\n  font-weight: 600;\n}\n\n.calendar-day-cell.selected:hover {\n  background-color: var(--ty-calendar-selected-hover-bg);\n  border-color: var(--ty-calendar-selected-hover-border);\n}\n\n.calendar-day-cell.selected.other-month {\n  opacity: 0.7;\n}\n\n/* ============================================================================\n   Size Variants\n   ============================================================================ */\n\n/* Small - Compact (240px min-width) */\n.calendar-size-sm {\n  padding: 0.5rem;\n  min-width: 240px;\n}\n\n.calendar-size-sm .calendar-header-cell {\n  font-size: 0.625rem;\n  padding: 0.125rem;\n}\n\n.calendar-size-sm .calendar-day-cell {\n  font-size: 0.75rem;\n  margin: 0.0625rem;\n}\n\n.calendar-size-sm .calendar-day-row {\n  min-height: 1.5rem;\n}\n\n/* Medium - Default (280px min-width) */\n.calendar-size-md {\n  padding: 0.75rem;\n  min-width: 280px;\n}\n\n.calendar-size-md .calendar-header-cell {\n  font-size: 0.6875rem;\n  padding: 0.25rem;\n}\n\n.calendar-size-md .calendar-day-cell {\n  font-size: 0.8125rem;\n  margin: 0.125rem;\n}\n\n.calendar-size-md .calendar-day-row {\n  min-height: 2rem;\n}\n\n/* Large - Spacious (360px min-width) */\n.calendar-size-lg {\n  padding: 1rem;\n  min-width: 360px;\n}\n\n.calendar-size-lg .calendar-header-cell {\n  font-size: 0.75rem;\n  padding: 0.375rem;\n}\n\n.calendar-size-lg .calendar-day-cell {\n  font-size: 0.875rem;\n  margin: 0.1875rem;\n}\n\n.calendar-size-lg .calendar-day-row {\n  min-height: 2.5rem;\n}\n\n/* ============================================================================\n   Backwards Compatibility\n   ============================================================================ */\n\n.calendar-day {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n";
 //# sourceMappingURL=calendar-month.d.ts.map

package/lib/styles/calendar-month.js

@@ -27,7 +27,7 @@ export const calendarMonthStyles = `
   /* Day cell — hover */
   --ty-calendar-day-hover-color: var(--ty-color-neutral-strong);
   --ty-calendar-day-hover-bg: var(--ty-bg-neutral-soft);
-  --ty-calendar-day-hover-border: var(--ty-border-mild);
+  --ty-calendar-day-hover-border: var(--ty-border-bold);
 
   /* Today */
   --ty-calendar-today-color: var(--ty-color-secondary-strong);
@@ -38,8 +38,8 @@ export const calendarMonthStyles = `
   --ty-calendar-selected-color: var(--ty-color-primary-strong);
   --ty-calendar-selected-bg: var(--ty-bg-primary);
   --ty-calendar-selected-border: var(--ty-calendar-accent);
-  --ty-calendar-selected-hover-bg: var(--ty-bg-primary-mild);
-  --ty-calendar-selected-hover-border: var(--ty-color-primary-mild);
+  --ty-calendar-selected-hover-bg: var(--ty-bg-primary-bold);
+  --ty-calendar-selected-hover-border: var(--ty-color-primary-bold);
 
   /* Modifier states */
   --ty-calendar-weekend-color: var(--ty-color-danger-soft);

package/lib/styles/checkbox.d.ts

@@ -5,5 +5,5 @@
  * to be inline-flex so the checkbox sizes to its visual instead of
  * inheriting `display: block; width: 100%` from input's :host rule.
  */
-export declare const checkboxStyles = "\n\n:host {\n  display: block;\n  font-family: var(--ty-font-sans);\n  width: 100%;\n}\n\n:host([size=\"xl\"]) {\n  font-size: 20px;\n}\n\n\n:host([size=\"xs\"]) {\n  font-size: 12px;\n}\n\n\n:host([size=\"sm\"]) {\n  font-size: 14px;\n}\n\n:host([size=\"lg\"]) {\n  font-size: 18px;\n}\n\n.input-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\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  display: flex;\n  align-items: center;\n}\n\n/* Required indicator - using SVG icon */\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--ty-color-danger);\n  width: 12px;\n  height: 12px;\n  margin-left: 4px;\n  vertical-align: middle;\n}\n\n.required-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ===== INPUT WRAPPER WITH SLOTS ===== */\n\n.input-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem; /* No gap by default */\n  width: 100%;\n  box-sizing: border-box;\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-base);\n  background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));\n  transition: all 0.15s ease-in-out;\n  \n  /* Default size (md) */\n  min-height: 40px;\n  padding: 0 12px;\n}\n\n/* Wrapper states */\n.input-wrapper:hover:not(.disabled) {\n  border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.input-wrapper.focused {\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}\n\n.input-wrapper.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}\n\n/* ===== SLOT STYLING ===== */\n\n/* Style slotted content directly (no wrappers needed) */\n::slotted([slot=\"start\"]),\n::slotted([slot=\"end\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: var(--ty-color-text-soft);\n}\n\n/* Icon sizing for slotted icons */\n::slotted(ty-icon) {\n  width: 1em;\n  height: 1em;\n  flex-shrink: 0;\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 wrapper */\n.input-wrapper.error {\n  border-color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-soft);\n}\n\n.input-wrapper.error.focused {\n  border-color: var(--ty-color-danger-mild);\n  box-shadow: 0 0 0 3px var(--input-shadow-focus, var(--ty-input-shadow-focus));\n}\n\n/* ===== INPUT BASE STYLING ===== */\n\ninput {\n  /* Reset and base styles \u2014 Linear-paired typography */\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: var(--input-color, var(--ty-input-color));\n  font-family: inherit;\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  padding: 0;\n  margin: 0;\n}\n\n/* Remove number input spinner arrows */\ninput[type=\"number\"]::-webkit-outer-spin-button,\ninput[type=\"number\"]::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput[type=\"number\"] {\n  -moz-appearance: textfield;\n}\n\n/* Disabled state */\ninput:disabled {\n  cursor: not-allowed;\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling */\ninput::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: 400;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\n.input-wrapper.xs {\n  min-height: 32px;\n  padding: 0 8px;\n  border-radius: var(--ty-input-radius-xs, var(--ty-radius-base));\n}\n\n.input-wrapper.xs input {\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 */\n.input-wrapper.sm {\n  min-height: 36px;\n  padding: 0 10px;\n  border-radius: var(--ty-input-radius-sm, var(--ty-radius-base));\n}\n\n.input-wrapper.sm input {\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) */\n.input-wrapper.md {\n  min-height: 40px;\n  padding: 0 12px;\n  border-radius: var(--ty-input-radius-md, var(--ty-radius-base));\n}\n\n.input-wrapper.md input {\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 */\n.input-wrapper.lg {\n  min-height: 44px;\n  padding: 0 14px;\n  border-radius: var(--ty-input-radius-lg, var(--ty-radius-base));\n}\n\n.input-wrapper.lg input {\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 */\n.input-wrapper.xl {\n  min-height: 48px;\n  padding: 0 16px;\n  border-radius: var(--ty-input-radius-xl, var(--ty-radius-base));\n}\n\n.input-wrapper.xl input {\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== SEMANTIC FLAVOR MODIFIERS ===== */\n\n/* Primary */\n.input-wrapper.primary {\n  border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.input-wrapper.primary:hover:not(.disabled) {\n  border-color: var(--ty-color-primary-mild);\n}\n\n.input-wrapper.primary.focused {\n  border-color: var(--ty-color-primary-mild);\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* Secondary */\n.input-wrapper.secondary {\n  border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.input-wrapper.secondary.focused {\n  border-color: var(--ty-color-secondary-mild);\n  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\n}\n\n/* Success */\n.input-wrapper.success {\n  border-color: var(--ty-input-success-border);\n}\n\n.input-wrapper.success:hover:not(.disabled) {\n  border-color: var(--ty-color-success-mild);\n}\n\n.input-wrapper.success.focused {\n  border-color: var(--ty-color-success-mild);\n  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n/* Danger */\n.input-wrapper.danger {\n  border-color: var(--ty-input-danger-border);\n}\n\n.input-wrapper.danger:hover:not(.disabled) {\n  border-color: var(--ty-color-danger-mild);\n}\n\n.input-wrapper.danger.focused {\n  border-color: var(--ty-color-danger-mild);\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Warning */\n.input-wrapper.warning {\n  border-color: var(--ty-input-warning-border);\n}\n\n.input-wrapper.warning:hover:not(.disabled) {\n  border-color: var(--ty-color-warning-mild);\n}\n\n.input-wrapper.warning.focused {\n  border-color: var(--ty-color-warning-mild);\n  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n/* Neutral (default) */\n.input-wrapper.neutral.focused {\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}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ninput:focus-visible {\n  outline: none;\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  .input-wrapper {\n    border-width: 2px;\n  }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  .input-wrapper {\n    transition: none;\n  }\n}\n\n/* ===== RESPONSIVE BEHAVIOR ===== */\n\n@media (max-width: 640px) {\n  .input-wrapper.lg {\n    min-height: 40px;\n    padding: 0 12px;\n  }\n\n  .input-wrapper.lg input {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n  }\n\n  .input-wrapper.xl {\n    min-height: 44px;\n    padding: 0 14px;\n  }\n\n  .input-wrapper.xl input {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n  }\n}\n\n@media (max-width: 480px) {\n  .input-wrapper.xl {\n    min-height: 40px;\n    padding: 0 12px;\n  }\n\n  .input-wrapper.xl input {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n  }\n}\n\n/* ===== CHECKBOX STYLING ===== */\n\n.checkbox-container {\n  display: inline-flex;\n  align-items: center;\n  outline: none;\n  transition: all 0.15s ease-in-out;\n  user-select: none;\n  cursor: pointer;\n\n  /* Default size (md) - matching input sizes */\n  border-radius: 6px;\n  gap: var(--ty-spacing-1);\n  color: var(--ty-text-faint);\n}\n\n.checkbox-container[aria-checked=\"true\"] {\n  color: var(--ty-text);\n}\n\n/* Ensure slotted label content inherits the color from container */\n.checkbox-container ::slotted(*) {\n  color: inherit;\n  transition: color 0.15s ease-in-out;\n}\n\n.checkbox-container label {\n  cursor: pointer;\n}\n\n.checkbox-container label {\n  font-size: var(--ty-font-sm);\n}\n\n.checkbox-container.sm label {\n  font-size: var(--ty-font-xs);\n}\n\n.checkbox-container.lg label {\n  font-size: var(--ty-font-base);\n}\n\n.checkbox-container.xl label {\n  font-size: var(--ty-font-lg);\n}\n\n/* Checkbox input container - different layout for checkboxes */\n.input-container.checkbox-layout {\n  flex-direction: row;\n  align-items: center;\n  gap: 12px;\n  width: auto;\n  /* Don't force full width for checkboxes */\n}\n\n.input-container.checkbox-layout .ty-field-label {\n  margin-bottom: 0;\n  padding-left: 0;\n  order: 2;\n  cursor: pointer;\n  flex: 1;\n}\n\n.input-container.checkbox-layout .checkbox-container {\n  order: 1;\n  flex-shrink: 0;\n}\n\n/* Error message positioning for checkboxes */\n.input-container.checkbox-layout .error-message {\n  padding-left: 0;\n  margin-left: 52px;\n  /* Align with label text */\n}\n\n.checkbox-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n  transition: color 0.15s ease-in-out;\n  pointer-events: none;\n  /* Let the container handle the click */\n}\n\n.checkbox-container svg {\n  width: 24px;\n  height: 24px;\n}\n\n/* ===== CHECKBOX SIZE MODIFIERS ===== */\n\n.checkbox-container.xs svg {\n  width: 16px;\n  height: 16px;\n}\n\n/* Adjust error message margin for XS */\n.input-container.checkbox-layout .checkbox-container.xs~.error-message {\n  margin-left: 44px;\n}\n\n\n.checkbox-container.sm svg {\n  width: 20px;\n  height: 20px;\n}\n\n/* Adjust error message margin for SM */\n.input-container.checkbox-layout .checkbox-container.sm~.error-message {\n  margin-left: 48px;\n}\n\n\n.checkbox-container.md svg {\n  width: 24px;\n  height: 24px;\n}\n\n\n.checkbox-container.lg svg {\n  width: 28px;\n  height: 28px;\n}\n\n.checkbox-container.xl svg {\n  width: 32px;\n  height: 32px;\n}\n\n\n.checkbox-container.xl svg {\n  font-size: 20px;\n}\n\n/* Adjust error message margin for LG */\n.input-container.checkbox-layout .checkbox-container.lg~.error-message {\n  margin-left: 56px;\n}\n\n\n/* Adjust error message margin for XL */\n.input-container.checkbox-layout .checkbox-container.xl~.error-message {\n  margin-left: 60px;\n  /* 48px + 12px gap */\n}\n\n/* ===== CHECKBOX SEMANTIC FLAVORS ===== */\n\n.checkbox-container.primary {\n  color: var(--ty-color-primary-soft);\n}\n\n\n.checkbox-container.primary[aria-checked=\"true\"] {\n  color: var(--ty-color-primary);\n}\n\n.checkbox-container.secondary {\n  color: var(--ty-color-secondary-soft);\n}\n\n\n.checkbox-container.secondary[aria-checked=\"true\"] {\n  color: var(--ty-color-secondary);\n}\n\n.checkbox-container.success {\n  color: var(--ty-color-success-soft);\n}\n\n\n.checkbox-container.success[aria-checked=\"true\"] {\n  color: var(--ty-color-success);\n}\n\n.checkbox-container.danger {\n  color: var(--ty-color-danger-soft);\n}\n\n.checkbox-container.danger[aria-checked=\"true\"] {\n  color: var(--ty-color-danger);\n}\n\n.checkbox-container.warning {\n  color: var(--ty-color-warning-soft);\n}\n\n.checkbox-container.warning[aria-checked=\"true\"] {\n  color: var(--ty-color-warning);\n}\n\n\n/* Neutral */\n.checkbox-container.neutral {\n  color: var(--ty-color-neutral-soft);\n}\n\n.checkbox-container.neutral[aria-checked=\"true\"] {\n  color: var(--ty-color-neutral);\n}\n\n/* Disabled state */\n.checkbox-container.disabled {\n  pointer-events: none;\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.checkbox-container.disabled .checkbox-icon {\n  color: var(--ty-color-neutral-faint);\n}\n\n/* Error state */\n.checkbox-container.error .checkbox-icon {\n  color: var(--ty-color-danger);\n}\n\n.checkbox-container.error:focus {\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Required state */\n.checkbox-container.required .checkbox-icon {\n  /* Could add specific styling for required checkboxes */\n}\n\n/* ===== RESPONSIVE CHECKBOX BEHAVIOR ===== */\n\n@container (max-width: 480px) {\n  .checkbox-container.lg {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.lg svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  .checkbox-container.xl {\n    width: 44px;\n    height: 44px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 22px;\n    height: 22px;\n  }\n}\n\n@container (max-width: 320px) {\n  .checkbox-container.xl {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 20px;\n    height: 20px;\n  }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n  .checkbox-container.lg {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.lg svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  .checkbox-container.xl {\n    width: 44px;\n    height: 44px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 22px;\n    height: 22px;\n  }\n}\n\n@media (max-width: 480px) {\n  .checkbox-container.xl {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 20px;\n    height: 20px;\n  }\n}\n\n\n/* Override input's :host to be inline (sized to its visual) */\n:host {\n  display: inline-flex;\n  width: auto;\n  vertical-align: middle;\n}\n";
+export declare const checkboxStyles = "\n\n:host {\n  display: block;\n  font-family: var(--ty-font-sans);\n  width: 100%;\n}\n\n:host([size=\"xl\"]) {\n  font-size: 20px;\n}\n\n\n:host([size=\"xs\"]) {\n  font-size: 12px;\n}\n\n\n:host([size=\"sm\"]) {\n  font-size: 14px;\n}\n\n:host([size=\"lg\"]) {\n  font-size: 18px;\n}\n\n.input-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\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  display: flex;\n  align-items: center;\n}\n\n/* Required indicator - using SVG icon */\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: var(--ty-color-danger);\n  width: 12px;\n  height: 12px;\n  margin-left: 4px;\n  vertical-align: middle;\n}\n\n.required-icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n/* ===== INPUT WRAPPER WITH SLOTS ===== */\n\n.input-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem; /* No gap by default */\n  width: 100%;\n  box-sizing: border-box;\n  border: 1px solid var(--input-border, var(--ty-input-border));\n  border-radius: var(--ty-radius-base);\n  background: var(--input-bg, var(--input-bg, var(--ty-input-bg)));\n  transition: all 0.15s ease-in-out;\n  \n  /* Default size (md) */\n  min-height: 40px;\n  padding: 0 12px;\n}\n\n/* Wrapper states */\n.input-wrapper:hover:not(.disabled) {\n  border-color: var(--input-border-hover, var(--ty-input-border-hover));\n}\n\n.input-wrapper.focused {\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}\n\n.input-wrapper.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}\n\n/* ===== SLOT STYLING ===== */\n\n/* Style slotted content directly (no wrappers needed) */\n::slotted([slot=\"start\"]),\n::slotted([slot=\"end\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: var(--ty-color-text-soft);\n}\n\n/* Icon sizing for slotted icons */\n::slotted(ty-icon) {\n  width: 1em;\n  height: 1em;\n  flex-shrink: 0;\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 wrapper */\n.input-wrapper.error {\n  border-color: var(--ty-color-danger);\n  background: var(--ty-bg-danger-soft);\n}\n\n.input-wrapper.error.focused {\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/* ===== INPUT BASE STYLING ===== */\n\ninput {\n  /* Reset and base styles \u2014 Linear-paired typography */\n  flex: 1;\n  min-width: 0;\n  box-sizing: border-box;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: var(--input-color, var(--ty-input-color));\n  font-family: inherit;\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  padding: 0;\n  margin: 0;\n}\n\n/* Remove number input spinner arrows */\ninput[type=\"number\"]::-webkit-outer-spin-button,\ninput[type=\"number\"]::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput[type=\"number\"] {\n  -moz-appearance: textfield;\n}\n\n/* Disabled state */\ninput:disabled {\n  cursor: not-allowed;\n  color: var(--input-disabled-color, var(--ty-input-disabled-color));\n}\n\n/* Placeholder styling */\ninput::placeholder {\n  color: var(--input-placeholder, var(--ty-input-placeholder));\n  font-weight: 400;\n}\n\n/* ===== SIZE MODIFIERS ===== */\n\n/* Extra Small */\n.input-wrapper.xs {\n  min-height: 32px;\n  padding: 0 8px;\n  border-radius: var(--ty-input-radius-xs, var(--ty-radius-base));\n}\n\n.input-wrapper.xs input {\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 */\n.input-wrapper.sm {\n  min-height: 36px;\n  padding: 0 10px;\n  border-radius: var(--ty-input-radius-sm, var(--ty-radius-base));\n}\n\n.input-wrapper.sm input {\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) */\n.input-wrapper.md {\n  min-height: 40px;\n  padding: 0 12px;\n  border-radius: var(--ty-input-radius-md, var(--ty-radius-base));\n}\n\n.input-wrapper.md input {\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 */\n.input-wrapper.lg {\n  min-height: 44px;\n  padding: 0 14px;\n  border-radius: var(--ty-input-radius-lg, var(--ty-radius-base));\n}\n\n.input-wrapper.lg input {\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 */\n.input-wrapper.xl {\n  min-height: 48px;\n  padding: 0 16px;\n  border-radius: var(--ty-input-radius-xl, var(--ty-radius-base));\n}\n\n.input-wrapper.xl input {\n  font-size: var(--ty-font-lg);\n  line-height: var(--ty-leading-lg);\n  letter-spacing: var(--ty-tracking-lg);\n}\n\n/* ===== SEMANTIC FLAVOR MODIFIERS ===== */\n\n/* Primary */\n.input-wrapper.primary {\n  border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.input-wrapper.primary:hover:not(.disabled) {\n  border-color: var(--ty-color-primary-bold);\n}\n\n.input-wrapper.primary.focused {\n  border-color: var(--ty-color-primary-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 15%, transparent);\n}\n\n/* Secondary */\n.input-wrapper.secondary {\n  border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.input-wrapper.secondary.focused {\n  border-color: var(--ty-color-secondary-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-secondary) 15%, transparent);\n}\n\n/* Success */\n.input-wrapper.success {\n  border-color: var(--ty-input-success-border);\n}\n\n.input-wrapper.success:hover:not(.disabled) {\n  border-color: var(--ty-color-success-bold);\n}\n\n.input-wrapper.success.focused {\n  border-color: var(--ty-color-success-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-success) 15%, transparent);\n}\n\n/* Danger */\n.input-wrapper.danger {\n  border-color: var(--ty-input-danger-border);\n}\n\n.input-wrapper.danger:hover:not(.disabled) {\n  border-color: var(--ty-color-danger-bold);\n}\n\n.input-wrapper.danger.focused {\n  border-color: var(--ty-color-danger-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);\n}\n\n/* Warning */\n.input-wrapper.warning {\n  border-color: var(--ty-input-warning-border);\n}\n\n.input-wrapper.warning:hover:not(.disabled) {\n  border-color: var(--ty-color-warning-bold);\n}\n\n.input-wrapper.warning.focused {\n  border-color: var(--ty-color-warning-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-warning) 15%, transparent);\n}\n\n/* Neutral (default) */\n.input-wrapper.neutral.focused {\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}\n\n/* ===== ACCESSIBILITY ENHANCEMENTS ===== */\n\ninput:focus-visible {\n  outline: none;\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  .input-wrapper {\n    border-width: 2px;\n  }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  .input-wrapper {\n    transition: none;\n  }\n}\n\n/* ===== RESPONSIVE BEHAVIOR ===== */\n\n@media (max-width: 640px) {\n  .input-wrapper.lg {\n    min-height: 40px;\n    padding: 0 12px;\n  }\n\n  .input-wrapper.lg input {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n  }\n\n  .input-wrapper.xl {\n    min-height: 44px;\n    padding: 0 14px;\n  }\n\n  .input-wrapper.xl input {\n    font-size: var(--ty-font-base);\n    line-height: var(--ty-leading-base);\n    letter-spacing: var(--ty-tracking-base);\n  }\n}\n\n@media (max-width: 480px) {\n  .input-wrapper.xl {\n    min-height: 40px;\n    padding: 0 12px;\n  }\n\n  .input-wrapper.xl input {\n    font-size: var(--ty-font-sm);\n    line-height: var(--ty-leading-sm);\n    letter-spacing: var(--ty-tracking-sm);\n  }\n}\n\n/* ===== CHECKBOX STYLING ===== */\n\n.checkbox-container {\n  display: inline-flex;\n  align-items: center;\n  outline: none;\n  transition: all 0.15s ease-in-out;\n  user-select: none;\n  cursor: pointer;\n\n  /* Default size (md) - matching input sizes */\n  border-radius: 6px;\n  gap: var(--ty-spacing-1);\n  color: var(--ty-text-faint);\n}\n\n.checkbox-container[aria-checked=\"true\"] {\n  color: var(--ty-text);\n}\n\n/* Ensure slotted label content inherits the color from container */\n.checkbox-container ::slotted(*) {\n  color: inherit;\n  transition: color 0.15s ease-in-out;\n}\n\n.checkbox-container label {\n  cursor: pointer;\n}\n\n.checkbox-container label {\n  font-size: var(--ty-font-sm);\n}\n\n.checkbox-container.sm label {\n  font-size: var(--ty-font-xs);\n}\n\n.checkbox-container.lg label {\n  font-size: var(--ty-font-base);\n}\n\n.checkbox-container.xl label {\n  font-size: var(--ty-font-lg);\n}\n\n/* Checkbox input container - different layout for checkboxes */\n.input-container.checkbox-layout {\n  flex-direction: row;\n  align-items: center;\n  gap: 12px;\n  width: auto;\n  /* Don't force full width for checkboxes */\n}\n\n.input-container.checkbox-layout .ty-field-label {\n  margin-bottom: 0;\n  padding-left: 0;\n  order: 2;\n  cursor: pointer;\n  flex: 1;\n}\n\n.input-container.checkbox-layout .checkbox-container {\n  order: 1;\n  flex-shrink: 0;\n}\n\n/* Error message positioning for checkboxes */\n.input-container.checkbox-layout .error-message {\n  padding-left: 0;\n  margin-left: 52px;\n  /* Align with label text */\n}\n\n.checkbox-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: inherit;\n  transition: color 0.15s ease-in-out;\n  pointer-events: none;\n  /* Let the container handle the click */\n}\n\n.checkbox-container svg {\n  width: 24px;\n  height: 24px;\n}\n\n/* ===== CHECKBOX SIZE MODIFIERS ===== */\n\n.checkbox-container.xs svg {\n  width: 16px;\n  height: 16px;\n}\n\n/* Adjust error message margin for XS */\n.input-container.checkbox-layout .checkbox-container.xs~.error-message {\n  margin-left: 44px;\n}\n\n\n.checkbox-container.sm svg {\n  width: 20px;\n  height: 20px;\n}\n\n/* Adjust error message margin for SM */\n.input-container.checkbox-layout .checkbox-container.sm~.error-message {\n  margin-left: 48px;\n}\n\n\n.checkbox-container.md svg {\n  width: 24px;\n  height: 24px;\n}\n\n\n.checkbox-container.lg svg {\n  width: 28px;\n  height: 28px;\n}\n\n.checkbox-container.xl svg {\n  width: 32px;\n  height: 32px;\n}\n\n\n.checkbox-container.xl svg {\n  font-size: 20px;\n}\n\n/* Adjust error message margin for LG */\n.input-container.checkbox-layout .checkbox-container.lg~.error-message {\n  margin-left: 56px;\n}\n\n\n/* Adjust error message margin for XL */\n.input-container.checkbox-layout .checkbox-container.xl~.error-message {\n  margin-left: 60px;\n  /* 48px + 12px gap */\n}\n\n/* ===== CHECKBOX SEMANTIC FLAVORS ===== */\n\n.checkbox-container.primary {\n  color: var(--ty-color-primary-soft);\n}\n\n\n.checkbox-container.primary[aria-checked=\"true\"] {\n  color: var(--ty-color-primary);\n}\n\n.checkbox-container.secondary {\n  color: var(--ty-color-secondary-soft);\n}\n\n\n.checkbox-container.secondary[aria-checked=\"true\"] {\n  color: var(--ty-color-secondary);\n}\n\n.checkbox-container.success {\n  color: var(--ty-color-success-soft);\n}\n\n\n.checkbox-container.success[aria-checked=\"true\"] {\n  color: var(--ty-color-success);\n}\n\n.checkbox-container.danger {\n  color: var(--ty-color-danger-soft);\n}\n\n.checkbox-container.danger[aria-checked=\"true\"] {\n  color: var(--ty-color-danger);\n}\n\n.checkbox-container.warning {\n  color: var(--ty-color-warning-soft);\n}\n\n.checkbox-container.warning[aria-checked=\"true\"] {\n  color: var(--ty-color-warning);\n}\n\n\n/* Neutral */\n.checkbox-container.neutral {\n  color: var(--ty-color-neutral-soft);\n}\n\n.checkbox-container.neutral[aria-checked=\"true\"] {\n  color: var(--ty-color-neutral);\n}\n\n/* Disabled state */\n.checkbox-container.disabled {\n  pointer-events: none;\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.checkbox-container.disabled .checkbox-icon {\n  color: var(--ty-color-neutral-faint);\n}\n\n/* Error state */\n.checkbox-container.error .checkbox-icon {\n  color: var(--ty-color-danger);\n}\n\n.checkbox-container.error:focus {\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);\n}\n\n/* Required state */\n.checkbox-container.required .checkbox-icon {\n  /* Could add specific styling for required checkboxes */\n}\n\n/* ===== RESPONSIVE CHECKBOX BEHAVIOR ===== */\n\n@container (max-width: 480px) {\n  .checkbox-container.lg {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.lg svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  .checkbox-container.xl {\n    width: 44px;\n    height: 44px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 22px;\n    height: 22px;\n  }\n}\n\n@container (max-width: 320px) {\n  .checkbox-container.xl {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 20px;\n    height: 20px;\n  }\n}\n\n/* Fallback for browsers without container query support */\n@media (max-width: 640px) {\n  .checkbox-container.lg {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.lg svg {\n    width: 20px;\n    height: 20px;\n  }\n\n  .checkbox-container.xl {\n    width: 44px;\n    height: 44px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 22px;\n    height: 22px;\n  }\n}\n\n@media (max-width: 480px) {\n  .checkbox-container.xl {\n    width: 40px;\n    height: 40px;\n  }\n\n  .checkbox-container.xl svg {\n    width: 20px;\n    height: 20px;\n  }\n}\n\n\n/* Override input's :host to be inline (sized to its visual) */\n:host {\n  display: inline-flex;\n  width: auto;\n  vertical-align: middle;\n}\n";
 //# sourceMappingURL=checkbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/styles/checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,eAAO,MAAM,cAAc,ulcAS1B,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/styles/checkbox.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,eAAO,MAAM,cAAc,6zcAS1B,CAAC"}

package/lib/styles/custom-scrollbar.d.ts

@@ -2,5 +2,5 @@
  * Shared CSS for CustomScrollbar utility
  * Include this in any component that uses CustomScrollbar
  */
-export declare const customScrollbarStyles = "\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, rgba(0, 0, 0, 0.06));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, rgba(0, 0, 0, 0.35));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, rgba(0, 0, 0, 0.50));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, rgba(0, 0, 0, 0.60));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, rgba(0, 0, 0, 0.06));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, rgba(0, 0, 0, 0.35));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, rgba(0, 0, 0, 0.50));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, rgba(0, 0, 0, 0.60));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n";
+export declare const customScrollbarStyles = "\n/* ===================================== */\n/* Custom Scrollbar - Vertical Track     */\n/* ===================================== */\n\n.ty-scrollbar-track-y {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-y.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-y.has-overflow:hover,\n.ty-scrollbar-track-y.has-overflow.scrolling,\n.ty-scrollbar-track-y.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-y::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-y:hover::before,\n.ty-scrollbar-track-y.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-y {\n  position: absolute;\n  right: 0;\n  width: 100%;\n  min-height: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-y:hover,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-y:active,\n.ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Custom Scrollbar - Horizontal Track   */\n/* ===================================== */\n\n.ty-scrollbar-track-x {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: var(--ty-scrollbar-width, 8px);\n  z-index: 3;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.25s ease-out;\n  cursor: pointer;\n}\n\n.ty-scrollbar-track-x.has-overflow {\n  pointer-events: auto;\n}\n\n.ty-scrollbar-track-x.has-overflow:hover,\n.ty-scrollbar-track-x.has-overflow.scrolling,\n.ty-scrollbar-track-x.dragging {\n  opacity: 1;\n}\n\n.ty-scrollbar-track-x::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--ty-scrollbar-track, transparent);\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  opacity: 0;\n  transition: opacity 0.15s ease-out;\n}\n\n.ty-scrollbar-track-x:hover::before,\n.ty-scrollbar-track-x.dragging::before {\n  opacity: 1;\n  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));\n}\n\n.ty-scrollbar-thumb-x {\n  position: absolute;\n  bottom: 0;\n  height: 100%;\n  min-width: var(--ty-scrollbar-thumb-min-height, 30px);\n  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));\n  border-radius: var(--ty-scrollbar-radius, 4px);\n  transition: background 0.15s ease-out;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n}\n\n.ty-scrollbar-thumb-x:hover,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));\n}\n\n.ty-scrollbar-thumb-x:active,\n.ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {\n  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));\n}\n\n/* ===================================== */\n/* Touch devices - hide custom scrollbar */\n/* ===================================== */\n\n@media (pointer: coarse) and (hover: none) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x {\n    display: none !important;\n  }\n}\n\n/* Respect reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .ty-scrollbar-track-y,\n  .ty-scrollbar-track-x,\n  .ty-scrollbar-thumb-y,\n  .ty-scrollbar-thumb-x {\n    transition-duration: 0ms !important;\n  }\n}\n";
 //# sourceMappingURL=custom-scrollbar.d.ts.map

package/lib/styles/custom-scrollbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-scrollbar.d.ts","sourceRoot":"","sources":["../../src/styles/custom-scrollbar.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,qBAAqB,i0HAuJjC,CAAC"}
+{"version":3,"file":"custom-scrollbar.d.ts","sourceRoot":"","sources":["../../src/styles/custom-scrollbar.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,qBAAqB,urIAuJjC,CAAC"}

package/lib/styles/custom-scrollbar.js

@@ -43,7 +43,7 @@ export const customScrollbarStyles = `
 .ty-scrollbar-track-y:hover::before,
 .ty-scrollbar-track-y.dragging::before {
   opacity: 1;
-  background: var(--ty-scrollbar-track-hover, rgba(0, 0, 0, 0.06));
+  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));
 }
 
 .ty-scrollbar-thumb-y {
@@ -51,7 +51,7 @@ export const customScrollbarStyles = `
   right: 0;
   width: 100%;
   min-height: var(--ty-scrollbar-thumb-min-height, 30px);
-  background: var(--ty-scrollbar-thumb, rgba(0, 0, 0, 0.35));
+  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));
   border-radius: var(--ty-scrollbar-radius, 4px);
   transition: background 0.15s ease-out;
   box-sizing: border-box;
@@ -60,12 +60,12 @@ export const customScrollbarStyles = `
 
 .ty-scrollbar-thumb-y:hover,
 .ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {
-  background: var(--ty-scrollbar-thumb-hover, rgba(0, 0, 0, 0.50));
+  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));
 }
 
 .ty-scrollbar-thumb-y:active,
 .ty-scrollbar-track-y.dragging .ty-scrollbar-thumb-y {
-  background: var(--ty-scrollbar-thumb-active, rgba(0, 0, 0, 0.60));
+  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));
 }
 
 /* ===================================== */
@@ -108,7 +108,7 @@ export const customScrollbarStyles = `
 .ty-scrollbar-track-x:hover::before,
 .ty-scrollbar-track-x.dragging::before {
   opacity: 1;
-  background: var(--ty-scrollbar-track-hover, rgba(0, 0, 0, 0.06));
+  background: var(--ty-scrollbar-track-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 8%, transparent));
 }
 
 .ty-scrollbar-thumb-x {
@@ -116,7 +116,7 @@ export const customScrollbarStyles = `
   bottom: 0;
   height: 100%;
   min-width: var(--ty-scrollbar-thumb-min-height, 30px);
-  background: var(--ty-scrollbar-thumb, rgba(0, 0, 0, 0.35));
+  background: var(--ty-scrollbar-thumb, color-mix(in oklab, var(--ty-color-neutral-bold) 40%, transparent));
   border-radius: var(--ty-scrollbar-radius, 4px);
   transition: background 0.15s ease-out;
   box-sizing: border-box;
@@ -125,12 +125,12 @@ export const customScrollbarStyles = `
 
 .ty-scrollbar-thumb-x:hover,
 .ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {
-  background: var(--ty-scrollbar-thumb-hover, rgba(0, 0, 0, 0.50));
+  background: var(--ty-scrollbar-thumb-hover, color-mix(in oklab, var(--ty-color-neutral-bold) 55%, transparent));
 }
 
 .ty-scrollbar-thumb-x:active,
 .ty-scrollbar-track-x.dragging .ty-scrollbar-thumb-x {
-  background: var(--ty-scrollbar-thumb-active, rgba(0, 0, 0, 0.60));
+  background: var(--ty-scrollbar-thumb-active, color-mix(in oklab, var(--ty-color-neutral-bold) 70%, transparent));
 }
 
 /* ===================================== */

package/lib/styles/date-picker.d.ts

@@ -2,5 +2,5 @@
  * Date Picker Component Styles
  * PORTED FROM: cljs/ty/components/date_picker.css
  */
-export declare const datePickerStyles = "\n/* Date Picker Component Styles */\n:host {\n  display: block;\n  width: auto;\n  min-width: 200px;\n\n  /* ==========================================================================\n     Theming Tokens \u2014 Date Picker Stub\n     Thin shim over --ty-input-*. Override these to retheme just the date-picker\n     trigger without affecting other inputs.\n     ========================================================================== */\n  --ty-date-picker-bg: var(--ty-input-bg);\n  --ty-date-picker-color: var(--ty-input-color);\n  --ty-date-picker-placeholder: var(--ty-input-placeholder);\n  --ty-date-picker-border: var(--ty-input-border);\n  --ty-date-picker-border-hover: var(--ty-input-border-hover);\n  --ty-date-picker-border-focus: var(--ty-input-border-focus);\n  --ty-date-picker-shadow-focus: var(--ty-input-shadow-focus);\n  --ty-date-picker-disabled-bg: var(--ty-input-disabled-bg);\n  --ty-date-picker-disabled-color: var(--ty-input-disabled-color);\n  --ty-date-picker-radius: var(--ty-radius-md);\n\n  /* ==========================================================================\n     Theming Tokens \u2014 Calendar Popup Surface\n     Shared with ty-calendar / ty-calendar-month theming.\n     ========================================================================== */\n  --ty-calendar-surface-bg: var(--ty-surface-floating);\n  --ty-calendar-surface-border: var(--ty-input-border);\n  --ty-calendar-surface-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1);\n  --ty-calendar-surface-radius: var(--ty-radius-lg);\n\n  /* ==========================================================================\n     Theming Tokens \u2014 Time Section\n     ========================================================================== */\n  --ty-calendar-time-bg: var(--ty-bg-neutral-faint);\n  --ty-calendar-time-border: var(--ty-input-border);\n  --ty-calendar-time-label-color: var(--ty-color-neutral);\n  --ty-calendar-time-input-color: var(--ty-input-color);\n  --ty-calendar-time-placeholder-color: var(--ty-input-placeholder);\n  --ty-calendar-time-icon-color: var(--ty-color-neutral-soft);\n}\n\n/* Container structure (reuses dropdown patterns) */\n.dropdown-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\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  display: flex;\n  align-items: center;\n}\n\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: #ef4444;\n  width: 12px;\n  height: 12px;\n  vertical-align: middle;\n  margin-left: 4px;\n}\n\n.dropdown-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n/* Start-slot icon (leading content inside the date-picker stub) */\n.date-picker-stub ::slotted([slot=\"start\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n  color: var(--ty-color-text-soft);\n}\n\n.date-picker-stub ::slotted(ty-icon[slot=\"start\"]) {\n  width: 1em;\n  height: 1em;\n}\n\n/* Date picker stub (styled like dropdown) */\n.date-picker-stub {\n  width: 100%;\n  cursor: pointer;\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--ty-date-picker-bg);\n  color: var(--ty-date-picker-color);\n  border: 1px solid var(--ty-date-picker-border);\n  border-radius: var(--ty-date-picker-radius);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  font-weight: var(--ty-font-normal);\n  line-height: var(--ty-line-height-tight);\n  min-height: var(--ty-size-md);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transition: var(--ty-transition-all), opacity 0.2s ease;\n  outline: none;\n}\n\n.date-picker-stub:hover:not([disabled]):not(.open) {\n  border-color: var(--ty-date-picker-border-hover);\n}\n\n.date-picker-stub[disabled] {\n  background-color: var(--ty-date-picker-disabled-bg);\n  color: var(--ty-date-picker-disabled-color);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.date-picker-stub:focus,\n.date-picker-stub.open {\n  border-color: var(--ty-date-picker-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-date-picker-shadow-focus);\n}\n\n/* Size variants */\n.date-picker-stub.xs {\n  min-height: var(--ty-size-xs);\n  font-size: var(--ty-font-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));\n}\n\n.date-picker-stub.sm {\n  min-height: var(--ty-size-sm);\n  font-size: var(--ty-font-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));\n}\n\n.date-picker-stub.lg {\n  min-height: var(--ty-size-lg);\n  font-size: var(--ty-font-base);\n  padding: var(--ty-spacing-2) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1.125rem + var(--ty-spacing-2));\n}\n\n.date-picker-stub.xl {\n  min-height: var(--ty-size-xl);\n  font-size: var(--ty-font-lg);\n  padding: var(--ty-spacing-3) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1.25rem + var(--ty-spacing-3));\n}\n\n/* Flavor variants */\n/* Primary - Main brand focus state */\n.date-picker-stub.primary {\n  border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.date-picker-stub.primary:hover:not([disabled]) {\n  border-color: var(--ty-color-primary-mild);\n}\n\n.date-picker-stub.primary:focus,\n.date-picker-stub.primary.open {\n  border-color: var(--ty-color-primary-mild);\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n/* Secondary - Supporting action focus state */\n.date-picker-stub.secondary {\n  border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.date-picker-stub.secondary:hover:not([disabled]) {\n  border-color: var(--ty-color-secondary-mild);\n}\n\n.date-picker-stub.secondary:focus,\n.date-picker-stub.secondary.open {\n  border-color: var(--ty-color-secondary-mild);\n  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);\n}\n\n/* Success - Valid/confirmed input state */\n.date-picker-stub.success {\n  border-color: var(--ty-input-success-border, var(--ty-color-success));\n}\n\n.date-picker-stub.success:hover:not([disabled]) {\n  border-color: var(--ty-color-success-mild);\n}\n\n.date-picker-stub.success:focus,\n.date-picker-stub.success.open {\n  border-color: var(--ty-color-success-mild);\n  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);\n}\n\n/* Danger - Error/invalid input state */\n.date-picker-stub.danger {\n  border-color: var(--ty-input-danger-border, var(--ty-color-danger));\n}\n\n.date-picker-stub.danger:hover:not([disabled]) {\n  border-color: var(--ty-color-danger-mild);\n}\n\n.date-picker-stub.danger:focus,\n.date-picker-stub.danger.open {\n  border-color: var(--ty-color-danger-mild);\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);\n}\n\n/* Warning - Caution/attention needed input state */\n.date-picker-stub.warning {\n  border-color: var(--ty-input-warning-border, var(--ty-color-warning));\n}\n\n.date-picker-stub.warning:hover:not([disabled]) {\n  border-color: var(--ty-color-warning-mild);\n}\n\n.date-picker-stub.warning:focus,\n.date-picker-stub.warning.open {\n  border-color: var(--ty-color-warning-mild);\n  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n/* Text content */\n.stub-text {\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n  color: inherit;\n  pointer-events: none;\n}\n\n.stub-text.placeholder {\n  color: var(--ty-date-picker-placeholder);\n}\n\n/* Icons */\n.stub-icons {\n  display: flex;\n  align-items: center;\n  gap: var(--ty-spacing-1);\n  position: absolute;\n  right: var(--ty-spacing-3);\n  top: 50%;\n  transform: translateY(-50%);\n  height: 1rem;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.stub-clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  padding: 0;\n  border: none;\n  background: none;\n  color: var(--ty-color-neutral-soft);\n  cursor: pointer;\n  border-radius: var(--ty-radius-sm);\n  transition: all 0.15s ease;\n  pointer-events: auto;\n}\n\n.stub-clear:hover {\n  color: var(--ty-color-negative);\n  background-color: var(--ty-bg-negative-faint);\n}\n\n.stub-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  color: var(--ty-color-neutral-soft);\n}\n\n.date-picker-stub:hover .stub-arrow {\n  color: var(--ty-color-neutral);\n}\n\n.date-picker-stub:focus .stub-arrow,\n.date-picker-stub.open .stub-arrow {\n  color: var(--ty-date-picker-border-focus);\n}\n\n/* Calendar dialog (showModal positioning system) */\n.calendar-dialog {\n  position: fixed;\n  flex-direction: column;\n  max-width: 90vw;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  box-sizing: border-box;\n  padding: var(--calendar-padding, 8px);\n\n  /* Hidden by default */\n  opacity: 0;\n  transition: opacity 200ms ease;\n\n  transform: translate(var(--calendar-offset-x, 0px), var(--calendar-offset-y, 0px));\n  top: -1000px;\n  left: -1000px;\n}\n\n/* Direction-based positioning with CSS classes */\n.calendar-dialog.position-below {\n  left: var(--calendar-x);\n  top: var(--calendar-y);\n}\n\n.calendar-dialog.position-above {\n  left: var(--calendar-x);\n  bottom: var(--calendar-y);\n  top: auto;\n  flex-direction: column-reverse;\n}\n\n.calendar-dialog.open {\n  opacity: 1;\n}\n\n.calendar-dialog::backdrop {\n  background: transparent\n}\n\n/* Calendar content container */\n.calendar-content {\n  background-color: var(--ty-calendar-surface-bg);\n  border: 1px solid var(--ty-calendar-surface-border);\n  border-radius: var(--ty-calendar-surface-radius);\n  box-shadow: var(--ty-calendar-surface-shadow);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n/* Native date input for mobile */\n/* Native input is invisible \u2014 used only to trigger the OS picker */\n.native-date-input {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: none;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.native-date-input::-webkit-calendar-picker-indicator {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n}\n\n/* Time input section */\n.time-section {\n  display: flex;\n  min-height: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1rem;\n  border-top: 1px solid var(--ty-calendar-time-border);\n  background-color: var(--ty-calendar-time-bg);\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n}\n\n.time-label {\n  font-size: var(--ty-font-sm);\n  font-weight: 500;\n  color: var(--ty-calendar-time-label-color);\n  flex-shrink: 0;\n}\n\n.time-input {\n  width: 3.5rem;\n  border: none;\n  border-radius: var(--ty-radius-sm);\n  background: transparent;\n  color: var(--ty-calendar-time-input-color);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  text-align: center;\n  outline: none;\n}\n\n.time-input::placeholder {\n  color: var(--ty-calendar-time-placeholder-color);\n}\n\n.time-icon {\n  display: flex;\n  align-items: center;\n  color: var(--ty-calendar-time-icon-color);\n  width: 1rem;\n  height: 1rem;\n  flex-shrink: 0;\n}\n";
+export declare const datePickerStyles = "\n/* Date Picker Component Styles */\n:host {\n  display: block;\n  width: auto;\n  min-width: 200px;\n\n  /* ==========================================================================\n     Theming Tokens \u2014 Date Picker Stub\n     Thin shim over --ty-input-*. Override these to retheme just the date-picker\n     trigger without affecting other inputs.\n     ========================================================================== */\n  --ty-date-picker-bg: var(--ty-input-bg);\n  --ty-date-picker-color: var(--ty-input-color);\n  --ty-date-picker-placeholder: var(--ty-input-placeholder);\n  --ty-date-picker-border: var(--ty-input-border);\n  --ty-date-picker-border-hover: var(--ty-input-border-hover);\n  --ty-date-picker-border-focus: var(--ty-input-border-focus);\n  --ty-date-picker-shadow-focus: var(--ty-input-shadow-focus);\n  --ty-date-picker-disabled-bg: var(--ty-input-disabled-bg);\n  --ty-date-picker-disabled-color: var(--ty-input-disabled-color);\n  --ty-date-picker-radius: var(--ty-radius-md);\n\n  /* ==========================================================================\n     Theming Tokens \u2014 Calendar Popup Surface\n     Shared with ty-calendar / ty-calendar-month theming.\n     ========================================================================== */\n  --ty-calendar-surface-bg: var(--ty-surface-floating);\n  --ty-calendar-surface-border: var(--ty-input-border);\n  --ty-calendar-surface-shadow: var(--ty-shadow-lg, 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.1));\n  --ty-calendar-surface-radius: var(--ty-radius-lg);\n\n  /* ==========================================================================\n     Theming Tokens \u2014 Time Section\n     ========================================================================== */\n  --ty-calendar-time-bg: var(--ty-bg-neutral-faint);\n  --ty-calendar-time-border: var(--ty-input-border);\n  --ty-calendar-time-label-color: var(--ty-color-neutral);\n  --ty-calendar-time-input-color: var(--ty-input-color);\n  --ty-calendar-time-placeholder-color: var(--ty-input-placeholder);\n  --ty-calendar-time-icon-color: var(--ty-color-neutral-soft);\n}\n\n/* Container structure (reuses dropdown patterns) */\n.dropdown-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  box-sizing: border-box;\n}\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  display: flex;\n  align-items: center;\n}\n\n.required-icon {\n  display: inline-flex;\n  align-items: center;\n  color: #ef4444;\n  width: 12px;\n  height: 12px;\n  vertical-align: middle;\n  margin-left: 4px;\n}\n\n.dropdown-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n\n/* Start-slot icon (leading content inside the date-picker stub) */\n.date-picker-stub ::slotted([slot=\"start\"]) {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n  color: var(--ty-color-text-soft);\n}\n\n.date-picker-stub ::slotted(ty-icon[slot=\"start\"]) {\n  width: 1em;\n  height: 1em;\n}\n\n/* Date picker stub (styled like dropdown) */\n.date-picker-stub {\n  width: 100%;\n  cursor: pointer;\n  box-sizing: border-box;\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--ty-date-picker-bg);\n  color: var(--ty-date-picker-color);\n  border: 1px solid var(--ty-date-picker-border);\n  border-radius: var(--ty-date-picker-radius);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  font-weight: var(--ty-font-normal);\n  line-height: var(--ty-line-height-tight);\n  min-height: var(--ty-size-md);\n  padding: var(--ty-spacing-2) var(--ty-spacing-3);\n  padding-right: calc(var(--ty-spacing-3) + 1rem + var(--ty-spacing-2));\n  transition: var(--ty-transition-all), opacity 0.2s ease;\n  outline: none;\n}\n\n.date-picker-stub:hover:not([disabled]):not(.open) {\n  border-color: var(--ty-date-picker-border-hover);\n}\n\n.date-picker-stub[disabled] {\n  background-color: var(--ty-date-picker-disabled-bg);\n  color: var(--ty-date-picker-disabled-color);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.date-picker-stub:focus,\n.date-picker-stub.open {\n  border-color: var(--ty-date-picker-border-focus);\n  box-shadow: 0 0 0 3px var(--ty-date-picker-shadow-focus);\n}\n\n/* Size variants */\n.date-picker-stub.xs {\n  min-height: var(--ty-size-xs);\n  font-size: var(--ty-font-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));\n}\n\n.date-picker-stub.sm {\n  min-height: var(--ty-size-sm);\n  font-size: var(--ty-font-xs);\n  padding: var(--ty-spacing-1) var(--ty-spacing-2);\n  padding-right: calc(var(--ty-spacing-2) + 0.875rem + var(--ty-spacing-1));\n}\n\n.date-picker-stub.lg {\n  min-height: var(--ty-size-lg);\n  font-size: var(--ty-font-base);\n  padding: var(--ty-spacing-2) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1.125rem + var(--ty-spacing-2));\n}\n\n.date-picker-stub.xl {\n  min-height: var(--ty-size-xl);\n  font-size: var(--ty-font-lg);\n  padding: var(--ty-spacing-3) var(--ty-spacing-4);\n  padding-right: calc(var(--ty-spacing-4) + 1.25rem + var(--ty-spacing-3));\n}\n\n/* Flavor variants */\n/* Primary - Main brand focus state */\n.date-picker-stub.primary {\n  border-color: var(--ty-input-primary-border, var(--ty-color-primary));\n}\n\n.date-picker-stub.primary:hover:not([disabled]) {\n  border-color: var(--ty-color-primary-bold);\n}\n\n.date-picker-stub.primary:focus,\n.date-picker-stub.primary.open {\n  border-color: var(--ty-color-primary-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-primary) 15%, transparent);\n}\n\n/* Secondary - Supporting action focus state */\n.date-picker-stub.secondary {\n  border-color: var(--ty-input-secondary-border, var(--ty-color-secondary));\n}\n\n.date-picker-stub.secondary:hover:not([disabled]) {\n  border-color: var(--ty-color-secondary-bold);\n}\n\n.date-picker-stub.secondary:focus,\n.date-picker-stub.secondary.open {\n  border-color: var(--ty-color-secondary-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-secondary) 15%, transparent);\n}\n\n/* Success - Valid/confirmed input state */\n.date-picker-stub.success {\n  border-color: var(--ty-input-success-border, var(--ty-color-success));\n}\n\n.date-picker-stub.success:hover:not([disabled]) {\n  border-color: var(--ty-color-success-bold);\n}\n\n.date-picker-stub.success:focus,\n.date-picker-stub.success.open {\n  border-color: var(--ty-color-success-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-success) 15%, transparent);\n}\n\n/* Danger - Error/invalid input state */\n.date-picker-stub.danger {\n  border-color: var(--ty-input-danger-border, var(--ty-color-danger));\n}\n\n.date-picker-stub.danger:hover:not([disabled]) {\n  border-color: var(--ty-color-danger-bold);\n}\n\n.date-picker-stub.danger:focus,\n.date-picker-stub.danger.open {\n  border-color: var(--ty-color-danger-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-danger) 15%, transparent);\n}\n\n/* Warning - Caution/attention needed input state */\n.date-picker-stub.warning {\n  border-color: var(--ty-input-warning-border, var(--ty-color-warning));\n}\n\n.date-picker-stub.warning:hover:not([disabled]) {\n  border-color: var(--ty-color-warning-bold);\n}\n\n.date-picker-stub.warning:focus,\n.date-picker-stub.warning.open {\n  border-color: var(--ty-color-warning-bold);\n  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ty-color-warning) 15%, transparent);\n}\n\n/* Text content */\n.stub-text {\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n  color: inherit;\n  pointer-events: none;\n}\n\n.stub-text.placeholder {\n  color: var(--ty-date-picker-placeholder);\n}\n\n/* Icons */\n.stub-icons {\n  display: flex;\n  align-items: center;\n  gap: var(--ty-spacing-1);\n  position: absolute;\n  right: var(--ty-spacing-3);\n  top: 50%;\n  transform: translateY(-50%);\n  height: 1rem;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.stub-clear {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  padding: 0;\n  border: none;\n  background: none;\n  color: var(--ty-color-neutral-soft);\n  cursor: pointer;\n  border-radius: var(--ty-radius-sm);\n  transition: all 0.15s ease;\n  pointer-events: auto;\n}\n\n.stub-clear:hover {\n  color: var(--ty-color-negative);\n  background-color: var(--ty-bg-negative-faint);\n}\n\n.stub-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1rem;\n  height: 1rem;\n  color: var(--ty-color-neutral-soft);\n}\n\n.date-picker-stub:hover .stub-arrow {\n  color: var(--ty-color-neutral);\n}\n\n.date-picker-stub:focus .stub-arrow,\n.date-picker-stub.open .stub-arrow {\n  color: var(--ty-date-picker-border-focus);\n}\n\n/* Calendar dialog (showModal positioning system) */\n.calendar-dialog {\n  position: fixed;\n  flex-direction: column;\n  max-width: 90vw;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  box-sizing: border-box;\n  padding: var(--calendar-padding, 8px);\n\n  /* Hidden by default */\n  opacity: 0;\n  transition: opacity 200ms ease;\n\n  transform: translate(var(--calendar-offset-x, 0px), var(--calendar-offset-y, 0px));\n  top: -1000px;\n  left: -1000px;\n}\n\n/* Direction-based positioning with CSS classes */\n.calendar-dialog.position-below {\n  left: var(--calendar-x);\n  top: var(--calendar-y);\n}\n\n.calendar-dialog.position-above {\n  left: var(--calendar-x);\n  bottom: var(--calendar-y);\n  top: auto;\n  flex-direction: column-reverse;\n}\n\n.calendar-dialog.open {\n  opacity: 1;\n}\n\n.calendar-dialog::backdrop {\n  background: transparent\n}\n\n/* Calendar content container */\n.calendar-content {\n  background-color: var(--ty-calendar-surface-bg);\n  border: 1px solid var(--ty-calendar-surface-border);\n  border-radius: var(--ty-calendar-surface-radius);\n  box-shadow: var(--ty-calendar-surface-shadow);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n/* Native date input for mobile */\n/* Native input is invisible \u2014 used only to trigger the OS picker */\n.native-date-input {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: none;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.native-date-input::-webkit-calendar-picker-indicator {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n}\n\n/* Time input section */\n.time-section {\n  display: flex;\n  min-height: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1rem;\n  border-top: 1px solid var(--ty-calendar-time-border);\n  background-color: var(--ty-calendar-time-bg);\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n}\n\n.time-label {\n  font-size: var(--ty-font-sm);\n  font-weight: 500;\n  color: var(--ty-calendar-time-label-color);\n  flex-shrink: 0;\n}\n\n.time-input {\n  width: 3.5rem;\n  border: none;\n  border-radius: var(--ty-radius-sm);\n  background: transparent;\n  color: var(--ty-calendar-time-input-color);\n  font-family: var(--ty-font-sans);\n  font-size: var(--ty-font-sm);\n  text-align: center;\n  outline: none;\n}\n\n.time-input::placeholder {\n  color: var(--ty-calendar-time-placeholder-color);\n}\n\n.time-icon {\n  display: flex;\n  align-items: center;\n  color: var(--ty-calendar-time-icon-color);\n  width: 1rem;\n  height: 1rem;\n  flex-shrink: 0;\n}\n";
 //# sourceMappingURL=date-picker.d.ts.map

package/lib/styles/date-picker.d.ts.map

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