@brandsync/wc 1.8.0 → 1.10.0

package/dist/collection/components/bs-datepicker/bs-datepicker.css

@@ -0,0 +1,315 @@
+/**
+ * @prop --bs-datepicker-width: Width of the card. 364px, exact match to Figma.
+ * @prop --bs-datepicker-bg: Card background. Aliased to --bs-surface-raised.
+ * @prop --bs-datepicker-radius: Card corner radius. Aliased to --bs-border-radius-150.
+ * @prop --bs-datepicker-padding: Card padding. Aliased to --bs-spacing-200.
+ * @prop --bs-datepicker-gap: Vertical gap between the header, nav and grid. Aliased to --bs-spacing-150.
+ * @prop --bs-datepicker-shadow: Card shadow. Aliased to --bs-shadow-md.
+ * @prop --bs-datepicker-menu-max-height: Max height of the month/year dropdown list before it scrolls. 280px.
+ * @prop --bs-datepicker-band-bridge: Horizontal overlap that joins adjacent range-band cells across the column gap. Aliased to --bs-spacing-50 (keep equal to the gap between days).
+ * @prop --bs-datepicker-day-size: Width/height of each day button. Aliased to --bs-spacing-550 (44px).
+ * @prop --bs-datepicker-day-radius: Corner radius of each day button. Aliased to --bs-border-radius-100.
+ * @prop --bs-datepicker-day-gap: Gap between day rows. Aliased to --bs-spacing-50.
+ * @prop --bs-datepicker-font-size: Day and title font size. Aliased to --bs-font-size-md.
+ * @prop --bs-datepicker-line-height: Day and title line height. Aliased to --bs-line-height-body-md.
+ * @prop --bs-datepicker-weekday-font-size: Weekday header font size. Aliased to --bs-font-size-sm.
+ * @prop --bs-datepicker-weekday-line-height: Weekday header line height. Aliased to --bs-line-height-body-sm.
+ * @prop --bs-datepicker-color: Day number color. Aliased to --bs-text-default.
+ * @prop --bs-datepicker-color-muted: Color of days from the adjacent months. Aliased to --bs-text-muted.
+ * @prop --bs-datepicker-color-weekday: Weekday header color. Aliased to --bs-text-secondary.
+ * @prop --bs-datepicker-color-disabled: Color of disabled days. Aliased to --bs-text-on-disabled.
+ * @prop --bs-datepicker-hover: Background of an unselected day on hover. Aliased to --bs-surface-hover.
+ * @prop --bs-datepicker-pressed: Background of an unselected day when pressed. Aliased to --bs-surface-pressed.
+ * @prop --bs-datepicker-focus-bg: Background of an unselected day when focused. Aliased to --bs-surface-focus.
+ * @prop --bs-datepicker-selected-bg: Background of a selected day. Aliased to --bs-color-primary-default.
+ * @prop --bs-datepicker-selected-bg-hover: Background of a selected day on hover. Aliased to --bs-color-primary-hover.
+ * @prop --bs-datepicker-selected-bg-pressed: Background of a selected day when pressed. Aliased to --bs-color-primary-pressed.
+ * @prop --bs-datepicker-selected-bg-focus: Background of a selected day when focused. Aliased to --bs-color-primary-focused.
+ * @prop --bs-datepicker-selected-bg-disabled: Background of a selected day when disabled. Aliased to --bs-surface-action-disabled.
+ * @prop --bs-datepicker-selected-color: Text color of a selected day. Aliased to --bs-text-on-action.
+ * @prop --bs-datepicker-range-bg: Background of the band between range start and end. Aliased to --bs-color-primary-container.
+ * @prop --bs-datepicker-today-border: Outline color marking today. Aliased to --bs-border-primary.
+ * @prop --bs-datepicker-focus-ring-color: Focus ring color. Aliased to --bs-border-neutral-focus.
+ */
+:host {
+  display: inline-block;
+
+  --bs-datepicker-width: 364px;
+  --bs-datepicker-bg: var(--bs-surface-raised);
+  --bs-datepicker-radius: var(--bs-border-radius-150);
+  --bs-datepicker-padding: var(--bs-spacing-200);
+  --bs-datepicker-gap: var(--bs-spacing-150);
+  --bs-datepicker-shadow: var(--bs-shadow-md);
+
+  --bs-datepicker-menu-max-height: 280px;
+  --bs-datepicker-day-size: var(--bs-spacing-550);
+  --bs-datepicker-day-radius: var(--bs-border-radius-100);
+  --bs-datepicker-day-gap: var(--bs-spacing-50);
+  --bs-datepicker-band-bridge: var(--bs-spacing-50);
+
+  --bs-datepicker-font-size: var(--bs-font-size-md);
+  --bs-datepicker-line-height: var(--bs-line-height-body-md);
+  --bs-datepicker-weekday-font-size: var(--bs-font-size-sm);
+  --bs-datepicker-weekday-line-height: var(--bs-line-height-body-sm);
+
+  --bs-datepicker-color: var(--bs-text-default);
+  --bs-datepicker-color-muted: var(--bs-text-muted);
+  --bs-datepicker-color-weekday: var(--bs-text-secondary);
+  --bs-datepicker-color-disabled: var(--bs-text-on-disabled);
+
+  --bs-datepicker-hover: var(--bs-surface-hover);
+  --bs-datepicker-pressed: var(--bs-surface-pressed);
+  --bs-datepicker-focus-bg: var(--bs-surface-focus);
+  --bs-datepicker-selected-bg: var(--bs-color-primary-default);
+  --bs-datepicker-selected-bg-hover: var(--bs-color-primary-hover);
+  --bs-datepicker-selected-bg-pressed: var(--bs-color-primary-pressed);
+  --bs-datepicker-selected-bg-focus: var(--bs-color-primary-focused);
+  --bs-datepicker-selected-bg-disabled: var(--bs-surface-action-disabled);
+  --bs-datepicker-selected-color: var(--bs-text-on-action);
+  --bs-datepicker-range-bg: var(--bs-color-primary-container);
+  --bs-datepicker-today-border: var(--bs-border-primary);
+  --bs-datepicker-focus-ring-color: var(--bs-border-neutral-focus);
+}
+
+.bs-datepicker {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-datepicker-gap);
+  width: var(--bs-datepicker-width);
+  max-width: 100%;
+  padding: var(--bs-datepicker-padding);
+  border-radius: var(--bs-datepicker-radius);
+  background: var(--bs-datepicker-bg);
+  box-shadow: var(--bs-datepicker-shadow);
+  color: var(--bs-datepicker-color);
+  font-family: inherit;
+  font-size: var(--bs-datepicker-font-size);
+}
+
+.bs-datepicker__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-datepicker__header > bs-input {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+/* The Figma design has no visible label on the month/year dropdowns; bs-input only names its
+   field through its label, so keep the label for assistive tech and hide it visually. */
+.bs-datepicker__select::part(label) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.bs-datepicker__dropdown {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.bs-datepicker__dropdown bs-input {
+  width: 100%;
+}
+
+/* The scroll box owns the shadow and rounding, so the inner list's own shadow is turned off
+   (it would be clipped by the scroll box anyway). */
+.bs-datepicker__menu {
+  position: absolute;
+  top: calc(100% + var(--bs-spacing-50));
+  inset-inline: 0;
+  z-index: 2;
+  max-height: var(--bs-datepicker-menu-max-height);
+  overflow-y: auto;
+  border-radius: var(--bs-border-radius-100);
+  background: var(--bs-surface-raised);
+  box-shadow: var(--bs-shadow-md);
+  --bs-menu-shadow: none;
+}
+
+.bs-datepicker__menu bs-menu-item {
+  --bs-menu-item-color: var(--bs-datepicker-color);
+}
+
+.bs-datepicker__menu bs-menu-item::part(label) {
+  flex: 1;
+  text-align: start;
+}
+
+.bs-datepicker__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-spacing-100);
+}
+
+.bs-datepicker__option svg {
+  width: 20px;
+  height: 20px;
+  flex: none;
+}
+
+.bs-datepicker__nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bs-datepicker__title {
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: calc(var(--bs-datepicker-line-height) * 1px);
+}
+
+.bs-datepicker__nav-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--bs-spacing-600);
+  height: var(--bs-spacing-600);
+  padding: 0;
+  border: none;
+  border-radius: var(--bs-datepicker-day-radius);
+  background: transparent;
+  color: var(--bs-icon-default);
+  cursor: pointer;
+}
+
+.bs-datepicker__nav-button svg {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-datepicker__nav-button:hover {
+  background: var(--bs-datepicker-hover);
+}
+
+.bs-datepicker__grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-datepicker-day-gap);
+}
+
+.bs-datepicker__row {
+  display: grid;
+  grid-template-columns: repeat(7, var(--bs-datepicker-day-size));
+  justify-content: space-between;
+}
+
+.bs-datepicker__weekday {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--bs-datepicker-day-size);
+  color: var(--bs-datepicker-color-weekday);
+  font-size: var(--bs-datepicker-weekday-font-size);
+  font-weight: var(--bs-font-weight-semibold);
+  line-height: calc(var(--bs-datepicker-weekday-line-height) * 1px);
+}
+
+.bs-datepicker__cell {
+  display: flex;
+  justify-content: center;
+}
+
+/* The range band is painted on the cells so it runs unbroken behind the in-between days; a
+   cell's shadow bridges the gap to the next in-range cell in the same week. The two end days are
+   not part of it (Figma), and its ends are rounded like a day button. */
+.bs-datepicker__cell--in-range {
+  background: var(--bs-datepicker-range-bg);
+  box-shadow: calc(var(--bs-datepicker-band-bridge) + 1px) 0 0 var(--bs-datepicker-range-bg);
+}
+
+.bs-datepicker__cell--band-start {
+  border-start-start-radius: var(--bs-datepicker-day-radius);
+  border-end-start-radius: var(--bs-datepicker-day-radius);
+}
+
+.bs-datepicker__cell--band-end {
+  border-start-end-radius: var(--bs-datepicker-day-radius);
+  border-end-end-radius: var(--bs-datepicker-day-radius);
+  box-shadow: none;
+}
+
+.bs-datepicker__day {
+  width: var(--bs-datepicker-day-size);
+  height: var(--bs-datepicker-day-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--bs-datepicker-day-radius);
+  background: transparent;
+  color: var(--bs-datepicker-color);
+  font-family: inherit;
+  font-size: var(--bs-datepicker-font-size);
+  line-height: calc(var(--bs-datepicker-line-height) * 1px);
+  cursor: pointer;
+}
+
+.bs-datepicker__day--outside {
+  color: var(--bs-datepicker-color-muted);
+}
+
+.bs-datepicker__day--today {
+  box-shadow: inset 0 0 0 1px var(--bs-datepicker-today-border);
+}
+
+.bs-datepicker__day:not(:disabled):hover {
+  background: var(--bs-datepicker-hover);
+}
+
+.bs-datepicker__day:not(:disabled):active {
+  background: var(--bs-datepicker-pressed);
+}
+
+/* An in-range day already sits on the range band; hovering it keeps that colour (Figma "In-range,
+   Hovered"). */
+.bs-datepicker__day--in-range:not(:disabled):hover,
+.bs-datepicker__day--in-range:not(:disabled):active {
+  background: var(--bs-datepicker-range-bg);
+}
+
+.bs-datepicker__day--selected,
+.bs-datepicker__day--selected.bs-datepicker__day--outside {
+  background: var(--bs-datepicker-selected-bg);
+  color: var(--bs-datepicker-selected-color);
+}
+
+.bs-datepicker__day--selected:not(:disabled):hover {
+  background: var(--bs-datepicker-selected-bg-hover);
+}
+
+.bs-datepicker__day--selected:not(:disabled):active {
+  background: var(--bs-datepicker-selected-bg-pressed);
+}
+
+.bs-datepicker__day:disabled {
+  color: var(--bs-datepicker-color-disabled);
+  cursor: not-allowed;
+}
+
+.bs-datepicker__day--selected:disabled {
+  background: var(--bs-datepicker-selected-bg-disabled);
+}
+
+/* Figma focus state: a state-colored fill plus a 2px ring sitting flush against the day's edge. */
+.bs-datepicker__day:focus-visible {
+  background: var(--bs-datepicker-focus-bg);
+  outline: 2px solid var(--bs-datepicker-focus-ring-color);
+  outline-offset: 0;
+}
+
+.bs-datepicker__day--selected:focus-visible {
+  background: var(--bs-datepicker-selected-bg-focus);
+}
+
+.bs-datepicker__nav-button:focus-visible {
+  outline: 2px solid var(--bs-datepicker-focus-ring-color);
+  outline-offset: 2px;
+}