@lekoala/slot-picker 0.1.0

package/dist/slot-picker.css

@@ -0,0 +1,597 @@
+:where(slot-picker) {
+  --sp-bg: #ffffff;
+  --sp-fg: #1f2328;
+  --sp-muted: color-mix(in srgb, var(--sp-fg) 58%, var(--sp-bg));
+  --sp-border: color-mix(in srgb, var(--sp-fg) 16%, var(--sp-bg));
+  --sp-hover: color-mix(in srgb, var(--sp-fg) 5%, var(--sp-bg));
+  --sp-notice-hover-bg: color-mix(in srgb, var(--sp-fg) 12%, var(--sp-bg));
+  --sp-accent: #2563eb;
+  --sp-accent-fg: #ffffff;
+  --sp-accent-soft: color-mix(in srgb, var(--sp-accent) 16%, var(--sp-bg));
+  --sp-focus: var(--sp-accent);
+  --sp-radius: 0.5rem;
+  --sp-gap: 0.5rem;
+  --sp-day-gap: 0.75rem;
+  --sp-slot-columns: 3;
+  --sp-card-bg: transparent;
+  --sp-slot-block-size: 2.75rem;
+  /* Slot colors are their own theming surface so a `data-tone` can recolor a
+     single slot without touching focus or the rest of the picker. */
+  --sp-slot-bg: var(--sp-accent-soft);
+  --sp-slot-fg: var(--sp-fg);
+  --sp-slot-border: transparent;
+  --sp-slot-hover-bg: color-mix(in srgb, var(--sp-accent) 22%, var(--sp-bg));
+  --sp-slot-selected-bg: var(--sp-accent);
+  --sp-slot-selected-fg: var(--sp-accent-fg);
+  --sp-nav-size: 2.5rem;
+  /* Stable collapsed footprint. `--sp-day-header-block-size` is a minimum, not
+     a fixed height: the reserved area follows `max-visible-rows` so navigating
+     between sparse and empty ranges never shifts the page. */
+  --sp-day-header-block-size: 3.4rem;
+  --sp-collapsed-rows: var(--_sp-max-visible-rows, 5);
+  --sp-collapsed-body-block-size: calc(
+    var(--sp-collapsed-rows) *
+    (var(--sp-slot-block-size) + var(--sp-gap)) -
+    var(--sp-gap)
+  );
+  --sp-footer-block-size: 2.5rem;
+  /* Reserved height for the `home` shortcut when `home-date` is configured. */
+  --sp-shortcuts-block-size: 2.5rem;
+  --sp-collapsed-block-size: calc(
+    var(--sp-day-header-block-size) +
+    var(--sp-collapsed-body-block-size) +
+    var(--sp-footer-block-size)
+  );
+  /* Collapsed "show more" floats in the reserved footer band; the gradient
+     rises above that band to hint at availability that is not rendered. */
+  --sp-more-fade-size: 4rem;
+  --sp-more-bg: var(--sp-bg);
+  --sp-panel-min-block-size: calc(2 * var(--sp-slot-block-size) + var(--sp-gap));
+  /* `closed` is a normal day state; themes may restyle it entirely. */
+  --sp-closed-opacity: 0.55;
+  --sp-loading-fade-opacity: 0.72;
+  --sp-loading-fade-delay: 400ms;
+  display: block;
+  color: var(--sp-fg);
+  font: inherit;
+}
+
+.sp-visually-hidden {
+  position: absolute !important;
+  inline-size: 1px !important;
+  block-size: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+.sp-shell {
+  display: block;
+}
+
+/* `previous`/`next` are a symmetric pair around a centered projection. They
+   are the only range-navigation chrome; `home` is not their mirror and lives
+   in `.sp-shortcuts` instead. */
+.sp-projection {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--sp-gap);
+}
+
+.sp-content {
+  position: relative;
+  min-inline-size: 0;
+  opacity: 1;
+  transition-property: opacity;
+  transition-duration: 160ms;
+  transition-timing-function: ease;
+  transition-delay: 0ms;
+}
+
+/* Slow loads fade the current projection to signal stale data, but only after
+   a delay: fast requests never flicker. `aria-busy` is the only state source. */
+slot-picker[aria-busy="true"] .sp-content {
+  opacity: var(--sp-loading-fade-opacity, 0.72);
+  transition-delay: var(--sp-loading-fade-delay, 400ms);
+}
+
+/* Keep the delay (the stale hint), drop the animation. */
+@media (prefers-reduced-motion: reduce) {
+  .sp-content {
+    transition-duration: 0ms;
+  }
+}
+
+/* Collapsed columns keep the same footprint whether the range is full, sparse,
+   or empty. Expanded content simply grows past this floor. */
+slot-picker:not([layout="day"]) .sp-content {
+  min-block-size: var(--sp-collapsed-block-size);
+}
+
+/* Auxiliary, start-aligned shortcut. Rendered only when `homeDate` is outside
+   the visible range, i.e. when it would actually change something. */
+.sp-shortcuts {
+  display: flex;
+  justify-content: flex-start;
+  margin-block-start: var(--sp-gap);
+}
+
+/* Keep the wrapper present (empty when `homeDate` is visible) so the shortcut
+   appearing never shifts the content below. */
+slot-picker[home-date] .sp-shortcuts {
+  min-block-size: var(--sp-shortcuts-block-size, 2.5rem);
+}
+
+.sp-home {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.25rem 0;
+  border: 0;
+  background: transparent;
+  color: var(--sp-accent);
+  font: inherit;
+  cursor: pointer;
+}
+
+.sp-home:hover {
+  text-decoration: underline;
+}
+
+.sp-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--_sp-day-count, 5), minmax(0, 1fr));
+  gap: var(--sp-day-gap);
+}
+
+.sp-day {
+  min-inline-size: 0;
+}
+
+.sp-day-header {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  gap: 0.1rem;
+  /* Deterministic leading: an inherited `normal` line-height can exceed the
+     reserved header height and break the stable footprint. */
+  line-height: 1.25;
+  box-sizing: border-box;
+  min-block-size: var(--sp-day-header-block-size);
+  padding-block: 0.15rem 0.55rem;
+  text-align: center;
+}
+
+.sp-weekday {
+  color: var(--sp-muted);
+  font-size: 0.85rem;
+}
+
+.sp-date {
+  font-size: 0.9rem;
+  font-weight: 650;
+}
+
+/* Notice indicator. Without `data-day-index` it is decorative; with it, it is
+   the accessible control used by notice-display="action". */
+.sp-notice {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  display: grid;
+  place-items: center;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  color: var(--sp-muted);
+  pointer-events: none;
+}
+
+.sp-notice[data-day-index] {
+  pointer-events: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+
+.sp-notice[data-day-index]:hover {
+  background: var(--sp-notice-hover-bg);
+  color: var(--sp-fg);
+}
+
+.sp-notice-dot {
+  inline-size: 0.45rem;
+  block-size: 0.45rem;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.sp-slots {
+  display: grid;
+  gap: var(--sp-gap);
+}
+
+.sp-slot,
+.sp-empty {
+  display: grid;
+  place-items: center;
+  min-block-size: var(--sp-slot-block-size);
+  box-sizing: border-box;
+  border-radius: var(--sp-radius);
+  font: inherit;
+}
+
+.sp-slot {
+  border: 1px solid var(--sp-slot-border);
+  background: var(--sp-slot-bg);
+  color: var(--sp-slot-fg);
+  cursor: pointer;
+}
+
+.sp-slot:hover:not(:disabled):not([aria-selected="true"]) {
+  background: var(--sp-slot-hover-bg);
+}
+
+.sp-slot[aria-selected="true"] {
+  background: var(--sp-slot-selected-bg);
+  color: var(--sp-slot-selected-fg);
+}
+
+.sp-slot:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.sp-slot:focus-visible {
+  outline: 2px solid var(--sp-focus);
+  outline-offset: 2px;
+}
+
+.sp-slot[aria-selected="true"]:focus-visible {
+  outline-color: var(--sp-fg);
+}
+
+.sp-empty {
+  color: var(--sp-muted);
+  user-select: none;
+}
+
+.sp-nav {
+  display: grid;
+  place-items: center;
+  inline-size: var(--sp-nav-size);
+  block-size: var(--sp-nav-size);
+  margin-block-start: 0.45rem;
+  padding: 0;
+  border: 1px solid var(--sp-border);
+  border-radius: 50%;
+  background: var(--sp-bg);
+  color: var(--sp-fg);
+  cursor: pointer;
+}
+
+.sp-nav:hover:not(:disabled) {
+  background: var(--sp-hover);
+}
+
+.sp-nav:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.sp-nav svg {
+  display: block;
+  inline-size: 1rem;
+  block-size: 1rem;
+  pointer-events: none;
+}
+
+[dir="rtl"] .sp-nav svg,
+html[dir="rtl"] .sp-nav svg {
+  transform: scaleX(-1);
+}
+
+.sp-more {
+  display: flex;
+  justify-content: center;
+  margin-block-start: 1rem;
+}
+
+/* Collapsed: float the control inside the reserved footer band while the
+   gradient rises above it to suggest the availability that is not rendered.
+   The last rendered row stays fully interactive. */
+slot-picker:not([expanded]) .sp-more {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  display: grid;
+  place-items: end center;
+  margin-block-start: 0;
+  min-block-size: var(--sp-footer-block-size);
+}
+
+slot-picker:not([expanded]) .sp-more::before {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  block-size: var(--sp-more-fade-size, 4rem);
+  background: linear-gradient(to bottom, transparent, var(--sp-more-bg, var(--sp-bg)));
+  pointer-events: none;
+}
+
+/* Expanded: back to normal flow, overlay and gradient removed. */
+slot-picker[expanded] .sp-more {
+  position: static;
+}
+
+slot-picker[expanded] .sp-more::before {
+  content: none;
+}
+
+.sp-more-button {
+  position: relative;
+  z-index: 1;
+  border: 0;
+  background: transparent;
+  color: var(--sp-accent);
+  font: inherit;
+  cursor: pointer;
+}
+
+.sp-status {
+  margin-block-end: 0.75rem;
+  color: var(--sp-muted);
+  text-align: center;
+}
+
+.sp-status-error {
+  color: var(--sp-fg);
+}
+
+.sp-day-empty {
+  display: grid;
+  place-items: center;
+  min-block-size: var(--sp-slot-block-size);
+  padding-inline: 0.5rem;
+  color: var(--sp-muted);
+  font-size: 0.9rem;
+  text-align: center;
+}
+
+/* A day closed by the application's opening rule. It stays in the civil
+   projection; only its presentation changes. */
+.sp-day[data-closed],
+.sp-panel[data-closed],
+.sp-strip-day[data-closed] {
+  opacity: var(--sp-closed-opacity, 0.55);
+}
+
+.sp-range-empty {
+  display: grid;
+  justify-items: center;
+  align-content: center;
+  gap: 0.5rem;
+  box-sizing: border-box;
+  min-block-size: var(--sp-collapsed-block-size);
+  padding: 1.5rem 1rem;
+  border-radius: var(--sp-radius);
+  background: var(--sp-card-bg);
+  text-align: center;
+}
+
+slot-picker[layout="day"] .sp-range-empty {
+  min-block-size: var(--sp-panel-min-block-size);
+}
+
+/* Day layout: only the empty state needs a baseline, a populated panel keeps
+   its natural height. */
+slot-picker[layout="day"] .sp-day-empty {
+  align-content: center;
+  min-block-size: var(--sp-panel-min-block-size);
+}
+
+.sp-range-empty-title {
+  font-size: 1rem;
+}
+
+.sp-range-empty-description {
+  margin: 0;
+  color: var(--sp-muted);
+}
+
+.sp-range-empty-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
+.sp-range-empty-next {
+  border: 0;
+  border-radius: var(--sp-radius);
+  padding: 0.6rem 1rem;
+  background: var(--sp-accent);
+  color: var(--sp-accent-fg);
+  font: inherit;
+  cursor: pointer;
+}
+
+.sp-range-empty-next:hover {
+  background: color-mix(in srgb, var(--sp-accent) 85%, var(--sp-bg));
+}
+
+.sp-range-empty-availability {
+  border: 1px solid var(--sp-border);
+  border-radius: var(--sp-radius);
+  padding: 0.6rem 1rem;
+  background: var(--sp-bg);
+  color: var(--sp-accent);
+  font: inherit;
+  cursor: pointer;
+}
+
+.sp-range-empty-availability:hover {
+  background: var(--sp-hover);
+}
+
+.sp-range-empty-next:focus-visible,
+.sp-range-empty-availability:focus-visible {
+  outline: 2px solid var(--sp-focus);
+  outline-offset: 2px;
+}
+
+.sp-daystrip {
+  display: grid;
+  grid-template-columns: repeat(var(--_sp-day-count, 5), minmax(0, 1fr));
+  gap: var(--sp-gap);
+  margin-block-end: 1rem;
+}
+
+.sp-strip-day {
+  display: grid;
+  justify-items: center;
+  gap: 0.1rem;
+  min-inline-size: 0;
+  padding-block: 0.6rem 0.55rem;
+  padding-inline: 0.25rem;
+  border: 1px solid var(--sp-border);
+  border-radius: var(--sp-radius);
+  background: var(--sp-card-bg);
+  color: var(--sp-fg);
+  font: inherit;
+  cursor: pointer;
+}
+
+.sp-strip-day:hover {
+  background: var(--sp-hover);
+}
+
+.sp-strip-day[aria-pressed="true"] {
+  border-color: var(--sp-accent);
+  background: var(--sp-accent-soft);
+}
+
+.sp-strip-weekday {
+  color: var(--sp-muted);
+  font-size: 0.85rem;
+}
+
+.sp-strip-day[data-today] .sp-strip-weekday {
+  font-weight: 700;
+}
+
+.sp-strip-date {
+  font-size: 0.9rem;
+}
+
+.sp-strip-count {
+  max-inline-size: 100%;
+  color: var(--sp-muted);
+  font-size: 0.8rem;
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+
+.sp-panel-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-block-end: 0.75rem;
+  text-align: center;
+}
+
+.sp-panel-title {
+  font-size: 1rem;
+}
+
+.sp-panel-slots {
+  display: grid;
+  grid-template-columns: repeat(var(--sp-slot-columns, 3), minmax(0, 1fr));
+  gap: var(--sp-gap);
+}
+
+/* Readable notice. Non-interactive: the control is the dot. Overflow is
+   structurally contained so it can never bleed into the next column. */
+.sp-day-notice {
+  display: block;
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  overflow: hidden;
+  margin-block-end: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: var(--sp-radius);
+  background: var(--sp-hover);
+  text-align: center;
+}
+
+.sp-day-notice-label {
+  display: -webkit-box;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  margin-block-end: 0.25rem;
+}
+
+/* The description stays in the DOM in every projection; the layout decides
+   how much is revealed. Themes may override either rule. */
+.sp-day-notice-description {
+  display: none;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  overflow-wrap: anywhere;
+  margin: 0;
+  color: var(--sp-muted);
+  font-size: 0.9rem;
+}
+
+slot-picker[layout="day"] .sp-day-notice-label {
+  display: block;
+  -webkit-line-clamp: unset;
+}
+
+slot-picker[layout="day"] .sp-day-notice-description {
+  display: block;
+}
+
+.sp-nav:focus-visible,
+.sp-home:focus-visible,
+.sp-more-button:focus-visible,
+.sp-notice[data-day-index]:focus-visible,
+.sp-strip-day:focus-visible {
+  outline: 2px solid var(--sp-focus);
+  outline-offset: 2px;
+}
+
+@media (forced-colors: active) {
+  .sp-slot {
+    border-color: ButtonText;
+  }
+
+  .sp-slot[aria-selected="true"] {
+    border-width: 2px;
+  }
+
+  .sp-strip-day[aria-pressed="true"] {
+    border-width: 2px;
+    border-color: ButtonText;
+  }
+
+  .sp-day-notice {
+    border: 1px solid ButtonText;
+  }
+
+  .sp-notice-dot {
+    background: CanvasText;
+  }
+}