tyrell-components 1.0.0-RC10

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

@@ -0,0 +1,6 @@
+/**
+ * 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, 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

@@ -0,0 +1 @@
+{"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

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

package/lib/styles/custom-scrollbar.js.map

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

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

@@ -0,0 +1,6 @@
+/**
+ * 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: 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

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

package/lib/styles/date-picker.js

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

package/lib/styles/date-picker.js.map

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