@planningcenter/topbar 12.4.1 → 12.5.0-rc.0

package/dist/topbar.css

@@ -504,24 +504,72 @@ Caused by products overriding .topbar-wrap’s z-index.
   max-height: calc(100% - var(--topbar-height) - var(--t-spacing-3));
 }
 
-/* Placeholder until design lands: just enough to tell which product is selected. */
-.tab-dz8ki[aria-selected="true"] {
-  background-color: var(--t-fill-color-interaction);
-  color: var(--t-text-color-inverted);
-  font-weight: var(--t-font-weight-semibold);
+.searchButton-fYa5- {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--topbar-nav-link-height);
+  height: var(--topbar-nav-link-height);
+  padding: 0;
+  margin-right: var(--t-spacing-half);
+  background-color: var(--topbar-nav-link-background-color-active);
+  color: var(--topbar-nav-link-font-color);
+  border: var(--t-border-width) solid var(--topbar-nav-link-border-color-active);
+  border-radius: var(--topbar-nav-link-border-radius);
+  cursor: pointer;
+  transition: var(--topbar-nav-link-transition);
 }
 
-/* Placeholder until design lands: just enough to see which result is highlighted. */
-.result-Thq2C {
-  display: block;
+/*
+ * At phone widths, where the small topbar shows, it sits bare in the header,
+ * the same target as the avatar's.
+ */
+@media (max-width: 599px) {
+  .searchButton-fYa5- {
+    width: var(--t-container-size-xl);
+    height: var(--t-container-size-xl);
+    margin-right: 0;
+    background-color: transparent;
+    color: var(--t-text-color-headline);
+    border: 0;
+    border-radius: 0;
+  }
 }
 
-.result-Thq2C[aria-selected="true"] {
-  background-color: var(--t-fill-color-interaction);
-  color: var(--t-text-color-inverted);
+.modal-NR3TO {
+  --product-search-padding-inline: var(--t-spacing-2);
+  --product-search-padding-block: var(--t-spacing-2);
+  --product-search-tab-padding-inline: var(--t-spacing-2);
+  --product-search-heading-inset: calc(
+    var(--product-search-tab-padding-inline) + var(--t-border-width)
+  );
+
+  height: 640px;
+  max-height: calc(100vh - var(--t-spacing-3) * 2);
+  /* Keeps the results panel's background inside the rounded corners. */
+  overflow: hidden;
+}
+
+/*
+ * Tapestry's .tds-modal sets padding and border on the same element with
+ * equal weight, and some products load Tapestry after topbar. The modal's ID
+ * outranks it whatever the order. Only these two properties use it, so the
+ * phone-width .modal rules below still override the rest.
+ */
+.modal-NR3TO#product_search_modal {
+  padding: 0;
+  border: var(--t-border-width) solid var(--t-border-color);
+}
+
+/* Fits mobile Safari's visible viewport, between its toolbars. */
+@supports (height: 100dvh) {
+  .modal-NR3TO {
+    max-height: calc(100dvh - var(--t-spacing-3) * 2);
+  }
 }
 
-.visuallyHidden-S9VG5 {
+.visuallyHidden-C28ju {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -530,6 +578,608 @@ Caused by products overriding .topbar-wrap’s z-index.
   white-space: nowrap;
 }
 
+/* Scrolls the results under the product picker, tabs or dropdown. */
+.panel-HlF7S {
+  flex: 1;
+  min-height: 0;
+  padding: var(--product-search-padding-block)
+    var(--product-search-results-inset, var(--product-search-padding-inline));
+  /* Lets results lay out by the panel's width rather than the viewport's. */
+  container-type: inline-size;
+  scroll-padding-block: var(--product-search-padding-block);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+/*
+ * Phone widths, where the small topbar shows (DisplaySwitch's default "xs"
+ * and "sm" breakpoints). The modal fills the screen rather than floating at a
+ * desktop height, with tighter padding above and below each section.
+ * Result rows and headings pad themselves by --product-search-row-inset,
+ * narrower here so the highlight sits closer to the content, and the panel's
+ * sides take that off to line their images and text up with the search icon.
+ * There are no tabs here, so headings line up with the results instead.
+ */
+@media (max-width: 599px) {
+  .modal-NR3TO {
+    --product-search-padding-block: var(--t-spacing-2);
+    --product-search-row-inset: var(--t-spacing-1);
+    --product-search-heading-inset: var(--product-search-row-inset);
+    --product-search-results-inset: calc(
+      var(--product-search-padding-inline) - var(--product-search-row-inset)
+    );
+
+    height: calc(100vh - var(--t-spacing-3) * 2);
+  }
+
+  @supports (height: 100dvh) {
+    .modal-NR3TO {
+      height: calc(100dvh - var(--t-spacing-3) * 2);
+    }
+  }
+
+  /* Section headings pad themselves, so they start just under the select. */
+  .panel-HlF7S {
+    padding-block-start: 0;
+  }
+
+  /*
+   * Tapestry only takes a class for the dialog, so its overlay and frame are
+   * reached through it. Top and bottom margins narrow to 8px; the sides keep
+   * 16px of backdrop to tap. The frame fills the dynamic viewport, which
+   * follows Safari's toolbars as they show and hide. The dialog stretches to
+   * fill the frame.
+   *
+   * Mobile Safari draws the keyboard over the page without shrinking 100dvh,
+   * so while it's open the frame sizes to the visible viewport instead. A
+   * bottom margin the keyboard's height keeps the overlay's centering above
+   * it.
+   *
+   * Browsers without :has() drop these rules, so the modal keeps its own
+   * height there. No @supports selector() guard: consuming apps run this file
+   * through libsass, which can't parse it.
+   */
+  .tds-modal-overlay:has(.modal-NR3TO) {
+    --tds-modal-min-margin-block: var(--t-spacing-1);
+  }
+
+  .tds-modal-frame:has(> .modal-NR3TO) {
+    --tds-modal-edge-margin-inline: var(--t-spacing-2);
+
+    height: calc(100vh - var(--t-spacing-1) * 2);
+    height: calc(
+      var(--visual-viewport-height, 100dvh) - var(--t-spacing-1) * 2
+    );
+    margin-block-end: calc(100dvh - var(--visual-viewport-height, 100dvh));
+  }
+
+  .tds-modal-frame:has(> .modal-NR3TO) > .modal-NR3TO {
+    height: auto;
+    max-height: none;
+  }
+}
+
+.container-YDdM1 {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  gap: var(--t-spacing-1);
+  /* Each hint pads itself by --t-spacing-1, so its keycaps line up with
+     the tabs. */
+  padding: var(--t-spacing-half)
+    calc(var(--product-search-padding-inline) - var(--t-spacing-1));
+  margin: 0;
+  list-style: none;
+  border-top: var(--t-border-width) solid var(--t-border-color);
+}
+
+.hint-017Rd {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--t-spacing-half);
+  padding: var(--t-spacing-half) var(--t-spacing-1);
+  border-radius: var(--t-border-radius-lg);
+  color: var(--t-text-color-placeholder);
+  font-size: var(--t-font-size-xs);
+}
+
+.keycap-ENJM2 {
+  --keycap-size: 20px;
+  --keycap-padding: 4px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--keycap-size);
+  height: var(--keycap-size);
+  padding: var(--keycap-padding);
+  margin-block: var(--t-spacing-fourth);
+  background-color: var(--t-fill-color-neutral-070);
+  color: var(--t-text-color-placeholder);
+  font-family: inherit;
+  font-size: calc(var(--keycap-size) - var(--keycap-padding) * 2);
+  font-weight: var(--t-font-weight-semibold);
+  border-radius: var(--t-border-radius-md);
+}
+
+.keycap-ENJM2 svg {
+  flex-shrink: 0;
+  width: 1.4em;
+  width: 2cap;
+  height: 1.4em;
+  height: 2cap;
+  stroke-width: 2;
+}
+
+.labels-GHPqL {
+  display: grid;
+  overflow: clip;
+}
+
+.labels-GHPqL > * {
+  grid-area: 1 / 1;
+}
+
+@property --copied {
+  syntax: "<percentage>";
+  inherits: true;
+  initial-value: 0%;
+}
+
+.copied-DUFa1 {
+  position: relative;
+  background-color: color-mix(
+    in srgb,
+    var(--t-fill-color-status-success-ghost) calc(var(--copied) * 0.3),
+    transparent
+  );
+  animation:
+    copied-enter-k4P4y var(--copied-enter) var(--t-ease-out) forwards,
+    copied-exit-oCDAu var(--copied-exit) var(--t-ease-out)
+      calc(var(--copied-enter) + var(--copied-active)) forwards;
+}
+
+.copied-DUFa1 .keycap-ENJM2 {
+  animation: copied-keypress-znahZ 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.copied-DUFa1 .labels-GHPqL > :first-child {
+  translate: 0 calc(var(--copied) * -1);
+}
+
+.copied-DUFa1 .labels-GHPqL > :last-child {
+  translate: 0 calc(100% - var(--copied));
+}
+
+.copied-DUFa1::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  border: 2px solid var(--t-border-color-status-success);
+  opacity: var(--copied);
+}
+
+@keyframes copied-enter-k4P4y {
+  to { --copied: 100% }
+}
+
+@keyframes copied-exit-oCDAu {
+  from { --copied: 100% }
+  to { --copied: 0% }
+}
+
+@keyframes copied-keypress-znahZ {
+  20%,
+  26% {
+    translate: 0 1px;
+    scale: 0.88;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .copied-DUFa1 {
+    --copied: 100%;
+    animation: none;
+  }
+
+  .copied-DUFa1 .keycap-ENJM2 {
+    animation: none;
+  }
+}
+
+.icon-XKLvN {
+  position: relative;
+  display: block;
+  flex-shrink: 0;
+}
+
+.icon-XKLvN::before {
+  content: "";
+  position: absolute;
+  inset: 12.5%;
+  background-color: hsl(0, 0%, 100%);
+  border-radius: 20%;
+}
+
+.squircle-JCHr6 {
+  position: absolute;
+  inset: 0;
+  mask-size: 100%;
+}
+
+.picker-iuzzj {
+  flex-shrink: 0;
+  padding: 0 var(--product-search-padding-inline) var(--t-spacing-1);
+}
+
+.option--7LXg {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--t-spacing-1);
+}
+
+.tablist-7ASvc {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--t-spacing-half);
+  padding-inline: var(--product-search-padding-inline);
+  padding-top: var(--t-spacing-half);
+  border-bottom: var(--t-border-width) solid var(--t-border-color);
+}
+
+.tab-dz8ki {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--t-spacing-1);
+  min-width: 48px;
+  height: 40px;
+  padding: 0 var(--product-search-tab-padding-inline);
+  margin-bottom: calc(var(--t-border-width) * -1);
+  background-color: var(--t-fill-color-neutral-070);
+  color: var(--t-text-color-secondary);
+  font-size: var(--t-font-size-md);
+  border: var(--t-border-width) solid transparent;
+  border-bottom-color: var(--t-border-color);
+  border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
+  cursor: pointer;
+}
+
+.tab-dz8ki:hover {
+  background-color: var(--t-fill-color-neutral-060);
+}
+
+.tab-dz8ki:focus-visible {
+  outline: none;
+}
+
+/* Set by useKeyboardFocus: Safari leaves :focus-visible off focus the modal's
+   focus scope moves here by script, as it does when Tab is pressed. */
+.tab-dz8ki[data-focus-visible] {
+  z-index: 1;
+}
+
+.tab-dz8ki[data-focus-visible]::after {
+  content: "";
+  position: absolute;
+  /* Measured from inside the tab's border, so step out past it too. */
+  inset: calc((var(--t-focus-ring-offset) + var(--t-border-width)) * -1);
+  border-radius: calc(var(--t-border-radius-md) + var(--t-focus-ring-offset));
+  box-shadow: 0 0 0 var(--t-focus-ring-width) var(--t-focus-ring-color);
+  pointer-events: none;
+}
+
+.tab-dz8ki[aria-selected="true"] {
+  background-color: var(--t-surface-color-card);
+  border-color: var(--t-border-color);
+  border-bottom-color: var(--t-surface-color-card);
+  cursor: default;
+}
+
+.blank_state-wMOWN {
+  max-width: 300px;
+  margin-inline: auto;
+  padding-block: var(--t-spacing-2);
+  text-align: center;
+}
+@media screen and (min-width: 600px) {
+  .blank_state-wMOWN {
+    padding-block: var(--t-spacing-5);
+  }
+}
+.blank_state-wMOWN h2 {
+  color: var(--t-text-color-headline);
+  font-size: var(--t-font-size-xl);
+  font-weight: var(--t-font-weight-semibold);
+  margin: 0;
+}
+.blank_state-wMOWN p {
+  color: var(--t-text-color-secondary);
+  font-size: var(--t-font-size-md);
+  margin: 0;
+}
+
+.image-uy0Fd {
+  color: var(--t-fill-color-status-info-ghost);
+}
+.image-uy0Fd svg {
+  width: 30vw;
+  max-width: 240px;
+  height: auto;
+}
+@media screen and (min-width: 600px) {
+  .image-uy0Fd svg {
+    width: 18vw;
+  }
+}
+:root[data-color-mode="dark"] .image-uy0Fd {
+  color: var(--t-fill-color-status-neutral-ghost);
+}
+@media (prefers-color-scheme: dark) {
+  :root[data-color-mode="system"] .image-uy0Fd {
+    color: var(--t-fill-color-status-neutral-ghost);
+  }
+}
+.result-Thq2C {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 56px;
+  padding: var(--t-spacing-1) var(--product-search-row-inset, 12px);
+  color: var(--t-text-color);
+  text-decoration: none;
+  border-radius: var(--t-border-radius-md);
+  /* Taps get the highlight below instead of the browser's grey flash. */
+  -webkit-tap-highlight-color: transparent;
+}
+
+.result-Thq2C:hover,
+.result-Thq2C:focus,
+.result-Thq2C:active,
+.result-Thq2C:visited {
+  color: var(--t-text-color);
+  text-decoration: none;
+}
+
+.result-Thq2C[aria-selected="true"],
+.result-Thq2C:active {
+  background-color: var(--t-fill-color-button-interaction-ghost-hover);
+}
+
+.title-KYUEn {
+  flex-shrink: 0;
+  max-width: 60%;
+  overflow: hidden;
+  font-size: var(--t-font-size-lg);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.subtitle-R2haq {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--t-text-color-secondary);
+  font-size: var(--t-font-size-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-KVDor {
+  --result-image-size: 32px;
+
+  position: relative;
+  flex-shrink: 0;
+  width: var(--result-image-size);
+  height: var(--result-image-size);
+}
+
+.avatar-6Gh62,
+.photo-FZR3Q {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.avatar-6Gh62 {
+  border-radius: 50%;
+}
+
+.photo-FZR3Q {
+  border-radius: var(--t-border-radius-md);
+}
+
+.badge-trUKt {
+  position: absolute;
+  right: -4px;
+  bottom: -4px;
+  filter: drop-shadow(0 1px 1px var(--t-fill-color-transparency-dark-static-010));
+}
+
+/*
+ * Too narrow for the title and meta to share a line, as on a phone, so they
+ * stack beside a smaller image.
+ */
+@container (max-width: 480px) {
+  .result-Thq2C {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-content: center;
+    gap: 0 12px;
+  }
+
+  .image-KVDor {
+    --result-image-size: 28px;
+
+    grid-row: span 2;
+    align-self: center;
+  }
+
+  .title-KYUEn {
+    max-width: none;
+  }
+}
+
+.heading-LioUF {
+  padding: var(--t-spacing-half)
+    var(--product-search-heading-inset, var(--product-search-row-inset, 12px));
+  color: var(--t-text-color-secondary);
+  font-size: var(--t-font-size-sm);
+}
+
+.group-cKChg:not(:first-child) > .heading-LioUF {
+  margin-top: var(--t-spacing-2);
+}
+
+/*
+ * The field is a box of its own, so keyboard focus can ring it like an input.
+ * Padding all around gives the ring room, and the row's padding is that much
+ * less than the section padding, so the icon lines up with the tabs.
+ */
+.row-5P7UQ {
+  --header-inset-block: var(--t-spacing-1);
+  --header-inset-inline: var(--t-spacing-half);
+
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--t-spacing-1);
+  padding-top: calc(
+    var(--product-search-padding-block) - var(--header-inset-block)
+  );
+  padding-inline: calc(
+    var(--product-search-padding-inline) - var(--header-inset-inline)
+  );
+  padding-bottom: calc(var(--t-spacing-1-half) - var(--header-inset-block));
+}
+
+.header-sXEyG {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: var(--t-spacing-1);
+  min-width: 0;
+  padding: var(--header-inset-block) var(--header-inset-inline);
+  border-radius: var(--t-border-radius-lg);
+  outline: var(--t-focus-ring-width) solid transparent;
+  cursor: text;
+  transition: outline-color var(--t-duration-200) var(--t-ease-in-out);
+}
+
+/* Only from the keyboard, since a click or tap already shows where it is. */
+.header-sXEyG:has([data-focus-visible]) {
+  outline-color: var(--t-focus-ring-color);
+}
+
+/* A 48px tap target around the 32px button, like the small topbar's. */
+.closeButton-rPJJV {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.closeButton-rPJJV::before {
+  position: absolute;
+  inset: calc((var(--t-container-size-xl) - var(--t-container-size-md)) / -2);
+  content: "";
+}
+
+/*
+ * Products style their own inputs, often by element and type with states
+ * like :focus. There's only ever one product search field, so these rules
+ * add its ID, set as a plain string in SearchInput, which outranks any
+ * product rule without one.
+ */
+.input-YQkTC#product_search {
+  position: static;
+  flex: 1;
+  min-width: 0;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  background: none;
+  color: var(--t-text-color);
+  font: inherit;
+  font-size: var(--t-font-size-xl);
+  border: 0 solid transparent;
+  border-radius: 0;
+  box-shadow: none;
+  outline: none;
+}
+
+.input-YQkTC#product_search::placeholder {
+  color: var(--t-text-color-placeholder);
+}
+
+.input-YQkTC#product_search::-webkit-search-cancel-button {
+  appearance: none;
+}
+
+.clearButton-9Yh9w {
+  --clear-button-size: 20px;
+  --clear-button-background: var(--t-fill-color-neutral-030);
+  --clear-button-background-hover: var(--t-fill-color-neutral-025);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--clear-button-size);
+  height: var(--clear-button-size);
+  padding: 0;
+  background: var(--clear-button-background);
+  color: #fff;
+  border: 0;
+  border-radius: var(--t-border-radius-round);
+  cursor: pointer;
+  transition: var(--topbar-slight-transition-background);
+}
+
+.clearButton-9Yh9w:hover {
+  background-color: var(--clear-button-background-hover);
+}
+
+:root[data-color-mode="dark"] .clearButton-9Yh9w {
+  --clear-button-background: var(--t-fill-color-neutral-040);
+  --clear-button-background-hover: var(--t-fill-color-neutral-050);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root[data-color-mode="system"] .clearButton-9Yh9w {
+    --clear-button-background: var(--t-fill-color-neutral-040);
+    --clear-button-background-hover: var(--t-fill-color-neutral-050);
+  }
+}
+
+.clearButton-9Yh9w svg {
+  height: calc(var(--clear-button-size) * 0.65);
+  width: calc(var(--clear-button-size) * 0.65);
+}
+
+.spinner-b5tlz {
+  --spinner-size: 54px;
+  --spinner-track-width: 6px;
+  --spinner-track-color: var(--t-border-color-dim);
+  --spinner-color: var(--t-border-color-status-info);
+
+  display: inline-block;
+  box-sizing: border-box;
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+  border: var(--spinner-track-width) solid var(--spinner-track-color);
+  border-bottom-color: var(--spinner-color);
+  border-radius: 50%;
+  animation: rotation-q2xiP .75s linear infinite;
+}
+
+@keyframes rotation-q2xiP {
+  to {
+    transform: rotate(1turn);
+  }
+}
 .route--8BWe {
   font-size: var(--topbar-nav-link-font-size);
   font-family: inherit;
@@ -576,6 +1226,9 @@ Caused by products overriding .topbar-wrap’s z-index.
 }
 
 .trigger-wrap-Jd-KR {
+  /* Lets the trigger shrink, truncating the org name, when the nav runs out
+  of room */
+  min-width: 0;
   margin-left: var(--t-spacing-1);
   position: relative;
   white-space: nowrap;
@@ -591,6 +1244,7 @@ Caused by products overriding .topbar-wrap’s z-index.
   border: var(--t-border-width) solid var(--topbar-nav-link-border-color-active);
   border-radius: var(--topbar-nav-link-border-radius);
   min-width: var(--t-container-size-md);
+  max-width: 100%;
   transition: var(--topbar-nav-link-transition);
   display: flex;
   align-items: center;
@@ -601,6 +1255,7 @@ Caused by products overriding .topbar-wrap’s z-index.
 }
 
 .trigger-WgRT5 svg {
+  flex-shrink: 0;
   transition: transform var(--topbar-slight-transition);
   /* Negative margin ensures button is a circle when orgname isn’t visible */
   margin-left: calc(var(--t-spacing-1) * -1);
@@ -915,13 +1570,35 @@ Caused by products overriding .topbar-wrap’s z-index.
   background-color: var(--t-fill-color-button-interaction-outline-active);
 }
 
+/*
+ * Spaces the header's buttons on the right. Each is the same touch target;
+ * the padding keeps the avatar, and the title's width, where they were
+ * before search joined it.
+ */
+.actions-INQ7- {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding-inline: var(--t-spacing-1-half) var(--t-spacing-1);
+}
+
 .profile-button-a2WO2 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--t-container-size-xl);
+  height: var(--t-container-size-xl);
+  padding: 0;
   background-color: transparent;
   border-width: 0;
-  padding: var(--t-spacing-2);
   appearance: none;
 }
 
+/* Centers the avatar in its target, without its own leading margin. */
+.profile-button-a2WO2 > div {
+  margin-left: 0;
+}
+
 .debug-pco-resource-sLteM {
   display: flex;
   flex-direction: column;