@brandsync/wc 1.9.0 → 1.10.0

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

@@ -0,0 +1,200 @@
+/**
+ * @prop --bs-timepicker-width: Width of the card. 294px, exact match to Figma.
+ * @prop --bs-timepicker-bg: Card background. Aliased to --bs-surface-raised.
+ * @prop --bs-timepicker-radius: Card corner radius. Aliased to --bs-border-radius-100.
+ * @prop --bs-timepicker-padding-y: Vertical padding of the card. Aliased to --bs-spacing-200.
+ * @prop --bs-timepicker-padding-x: Horizontal padding of each section. Aliased to --bs-spacing-200.
+ * @prop --bs-timepicker-gap: Vertical gap between sections. Aliased to --bs-spacing-200.
+ * @prop --bs-timepicker-shadow: Card shadow. Aliased to --bs-shadow-md.
+ * @prop --bs-timepicker-title-size: Heading font size. Aliased to --bs-font-size-2xl.
+ * @prop --bs-timepicker-title-line-height: Heading line height. Aliased to --bs-line-height-heading-h6.
+ * @prop --bs-timepicker-color: Heading and value color. Aliased to --bs-text-default.
+ * @prop --bs-timepicker-color-secondary: Color of the 24h label and the step carets. Aliased to --bs-text-secondary.
+ * @prop --bs-timepicker-divider: Divider color. Aliased to --bs-border-neutral-container.
+ * @prop --bs-timepicker-cell-size: Width/height of a step button and a value. Aliased to --bs-spacing-550 (44px).
+ * @prop --bs-timepicker-cell-radius: Corner radius of a step button. Aliased to --bs-border-radius-100.
+ * @prop --bs-timepicker-value-radius: Corner radius of the focus ring on a value. Aliased to --bs-border-radius-50.
+ * @prop --bs-timepicker-hover: Background of a step button or value on hover. Aliased to --bs-surface-hover.
+ * @prop --bs-timepicker-pressed: Background of a step button or value when pressed. Aliased to --bs-surface-pressed.
+ * @prop --bs-timepicker-focus-ring-color: Focus ring color. Aliased to --bs-border-neutral-container-focused.
+ */
+:host {
+  display: inline-block;
+
+  --bs-timepicker-width: 294px;
+  --bs-timepicker-bg: var(--bs-surface-raised);
+  --bs-timepicker-radius: var(--bs-border-radius-100);
+  --bs-timepicker-padding-y: var(--bs-spacing-200);
+  --bs-timepicker-padding-x: var(--bs-spacing-200);
+  --bs-timepicker-gap: var(--bs-spacing-200);
+  --bs-timepicker-shadow: var(--bs-shadow-md);
+
+  --bs-timepicker-title-size: var(--bs-font-size-2xl);
+  --bs-timepicker-title-line-height: var(--bs-line-height-heading-h6);
+  --bs-timepicker-color: var(--bs-text-default);
+  --bs-timepicker-color-secondary: var(--bs-text-secondary);
+  --bs-timepicker-divider: var(--bs-border-neutral-container);
+
+  --bs-timepicker-cell-size: var(--bs-spacing-550);
+  --bs-timepicker-cell-radius: var(--bs-border-radius-100);
+  --bs-timepicker-value-radius: var(--bs-border-radius-50);
+  --bs-timepicker-hover: var(--bs-surface-hover);
+  --bs-timepicker-pressed: var(--bs-surface-pressed);
+  --bs-timepicker-focus-ring-color: var(--bs-border-neutral-container-focused);
+}
+
+.bs-timepicker {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-timepicker-gap);
+  width: var(--bs-timepicker-width);
+  max-width: 100%;
+  padding: var(--bs-timepicker-padding-y) 0;
+  border-radius: var(--bs-timepicker-radius);
+  background: var(--bs-timepicker-bg);
+  box-shadow: var(--bs-timepicker-shadow);
+  color: var(--bs-timepicker-color);
+  font-family: inherit;
+  font-size: var(--bs-font-size-md);
+}
+
+.bs-timepicker__header {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+  padding: 0 var(--bs-timepicker-padding-x);
+}
+
+.bs-timepicker__title {
+  flex: 1 1 0;
+  min-width: 0;
+  font-size: var(--bs-timepicker-title-size);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: calc(var(--bs-timepicker-title-line-height) * 1px);
+}
+
+.bs-timepicker__format {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-50);
+  color: var(--bs-timepicker-color-secondary);
+  line-height: calc(var(--bs-line-height-body-md) * 1px);
+}
+
+/* Full-bleed: the divider ignores the section padding, like the Figma's. */
+.bs-timepicker__divider {
+  height: 1px;
+  background: var(--bs-timepicker-divider);
+}
+
+.bs-timepicker__selector {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--bs-spacing-200);
+  padding: 0 var(--bs-timepicker-padding-x);
+}
+
+.bs-timepicker__spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--bs-spacing-100);
+  width: var(--bs-timepicker-cell-size);
+}
+
+.bs-timepicker__step,
+.bs-timepicker__value {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--bs-timepicker-cell-size);
+  height: var(--bs-timepicker-cell-size);
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+}
+
+.bs-timepicker__step {
+  border-radius: var(--bs-timepicker-cell-radius);
+  color: var(--bs-timepicker-color-secondary);
+  cursor: pointer;
+}
+
+.bs-timepicker__step svg {
+  width: 24px;
+  height: 24px;
+}
+
+.bs-timepicker__value {
+  border-radius: var(--bs-timepicker-value-radius);
+  color: var(--bs-timepicker-color);
+  font-size: var(--bs-timepicker-title-size);
+  font-weight: var(--bs-font-weight-bold);
+  line-height: calc(var(--bs-timepicker-title-line-height) * 1px);
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  user-select: none;
+}
+
+.bs-timepicker__step:hover,
+.bs-timepicker__value:hover {
+  background: var(--bs-timepicker-hover);
+}
+
+.bs-timepicker__step:active,
+.bs-timepicker__value:active {
+  background: var(--bs-timepicker-pressed);
+}
+
+/* Figma focus state: a 2px ring flush against the block's edge. */
+.bs-timepicker__step:focus-visible,
+.bs-timepicker__value:focus-visible {
+  outline: 2px solid var(--bs-timepicker-focus-ring-color);
+  outline-offset: 0;
+}
+
+.bs-timepicker__separator {
+  display: flex;
+  align-items: center;
+  color: var(--bs-timepicker-color);
+}
+
+.bs-timepicker__separator svg {
+  width: 4px;
+  height: 32px;
+}
+
+/* The Figma has no visible label on the AM/PM field; bs-input only names its field through its
+   label, so keep the label for assistive tech and hide it visually. */
+.bs-timepicker__period::part(label) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.bs-timepicker__period {
+  width: 112px;
+}
+
+/* bs-input's dropdown trigger is a read-only text input: no text caret, and a pointer cursor. */
+.bs-timepicker__period::part(control) {
+  caret-color: transparent;
+  cursor: pointer;
+  text-overflow: clip;
+}
+
+.bs-timepicker__footer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  gap: var(--bs-spacing-100);
+  padding: 0 var(--bs-timepicker-padding-x);
+}