@planningcenter/topbar 12.3.0 → 12.4.0-qa-958.1

package/dist/topbar.css

@@ -504,30 +504,502 @@ Caused by products overriding .topbar-wrap’s z-index.
   max-height: calc(100% - var(--topbar-height) - var(--t-spacing-3));
 }
 
+.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);
+}
+
+/* Sits bare in the small topbar's header, the same target as the avatar's. */
+.searchButton-fYa5-.mobile-ksZyA {
+  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;
+}
+
+.modal-NR3TO {
+  height: 640px;
+  max-height: calc(100vh - var(--t-spacing-3) * 2);
+  /* Keeps the results panel's background inside the rounded corners. */
+  overflow: hidden;
+  border: var(--t-border-width) solid var(--t-border-color);
+}
+
+/*
+ * On a phone, fill the screen rather than float at a desktop height, with
+ * tighter padding inside. The search field, product select and results panel
+ * read the padding from --product-search-padding. 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.
+ */
+.modal-NR3TO.mobile-4e5rC {
+  --product-search-padding: var(--t-spacing-2);
+  --product-search-row-inset: var(--t-spacing-1);
+  --product-search-results-inset: calc(
+    var(--product-search-padding) - var(--product-search-row-inset)
+  );
+
+  height: calc(100vh - var(--t-spacing-3) * 2);
+  padding-block-start: var(--product-search-padding);
+}
+
+/* Lines the title and close button up with the search field below. */
+.header-c3SLe {
+  padding-inline: var(--product-search-padding, var(--t-spacing-3));
+  margin-block-end: var(--t-spacing-1);
+}
+
+/* Fits mobile Safari's visible viewport, between its toolbars. */
+@supports (height: 100dvh) {
+  .modal-NR3TO {
+    max-height: calc(100dvh - var(--t-spacing-3) * 2);
+  }
+
+  .modal-NR3TO.mobile-4e5rC {
+    height: calc(100dvh - var(--t-spacing-3) * 2);
+  }
+}
+
+/*
+ * Tapestry only takes a class for the dialog, so on a phone its overlay and
+ * frame are reached through it: both narrow their margins to 8px, and 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.
+ */
+@supports selector(:has(*)) {
+  .tds-modal-overlay:has(.mobile-4e5rC) {
+    --tds-modal-min-margin-block: var(--t-spacing-1);
+  }
+
+  .tds-modal-frame:has(> .mobile-4e5rC) {
+    --tds-modal-edge-margin-inline: var(--t-spacing-1);
+
+    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));
+  }
+
+  .modal-NR3TO.mobile-4e5rC {
+    height: auto;
+    max-height: none;
+  }
+}
+
 .visuallyHidden-C28ju {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
-  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
   white-space: nowrap;
 }
 
-/* Placeholder until design lands: just enough to tell which product is selected. */
-.tab-lQLDx[aria-selected="true"] {
-  background-color: var(--t-fill-color-interaction);
-  color: var(--t-text-color-inverted);
+/* Scrolls the results under the product picker, tabs or dropdown. */
+@property --scroll-shadow-offset {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@keyframes scroll-shadow-slide-RlHcf {
+  to {
+    --scroll-shadow-offset: 12px;
+  }
+}
+
+.panel-HlF7S {
+  --scroll-shadow-cover: var(--t-surface-color-card);
+  --scroll-shadow: color-mix(
+    in srgb,
+    var(--t-fill-color-transparency-dark-static-010) 55%,
+    transparent
+  );
+
+  flex: 1;
+  min-height: 0;
+  padding: var(--product-search-padding, var(--t-spacing-3))
+    var(
+      --product-search-results-inset,
+      var(--product-search-padding, var(--t-spacing-3))
+    );
+  /* 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, var(--t-spacing-3));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background:
+    linear-gradient(transparent, var(--scroll-shadow-cover) 28px) bottom /
+      100% 48px no-repeat local,
+    radial-gradient(
+        farthest-side at 50% 100%,
+        var(--scroll-shadow),
+        transparent
+      )
+      left 0 bottom calc(var(--scroll-shadow-offset) * -1) / 100% 12px
+      no-repeat scroll;
+  animation: scroll-shadow-slide-RlHcf linear both;
+  animation-range: calc(100% - 48px) 100%;
+  animation-timeline: scroll(self);
+}
+
+.container-YDdM1 {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  gap: var(--t-spacing-1);
+  padding: var(--t-spacing-1) var(--t-spacing-1-half);
+  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-1);
+  padding: var(--t-spacing-half) var(--t-spacing-1);
+  border-radius: var(--t-border-radius-lg);
+  transition: background-color var(--t-duration-500) var(--t-ease-out);
+  color: var(--t-text-color-placeholder);
+  font-size: var(--t-font-size-sm);
+}
+
+.keycap-ENJM2 {
+  --keycap-size: 24px;
+  --keycap-padding: 4px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--keycap-size);
+  height: var(--keycap-size);
+  padding: var(--keycap-padding);
+  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;
+}
+
+.copied-DUFa1 {
+  background-color: var(--t-fill-color-status-success-ghost);
+  transition: none;
 }
 
-/* Placeholder until design lands: just enough to see which result is highlighted. */
-.result-WCnxr {
+.icon-XKLvN {
+  position: relative;
   display: block;
+  flex-shrink: 0;
 }
 
-.result-WCnxr[aria-selected="true"] {
-  background-color: var(--t-fill-color-interaction);
-  color: var(--t-text-color-inverted);
+.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, var(--t-spacing-3)) var(--t-spacing-2);
+}
+
+.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(--t-spacing-2);
+  padding-top: var(--t-spacing-2);
+  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(--t-spacing-2);
+  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 {
+  z-index: 1;
+  outline: none;
+}
+
+.tab-dz8ki: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;
+}
+
+.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-lg);
+  /* 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;
+  }
+}
+
+.message-1-PP- {
+  margin: 0;
+  padding-block: var(--t-spacing-5);
+  color: var(--t-text-color-secondary);
+  text-align: center;
+}
+
+.heading-LioUF {
+  padding: var(--t-spacing-1) var(--product-search-row-inset, 12px);
+  color: var(--t-text-color-secondary);
+  font-size: var(--t-font-size-sm);
+}
+
+.heading-LioUF:not(:first-child) {
+  margin-top: var(--t-spacing-2);
+}
+
+.header-sXEyG {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--t-spacing-1);
+  padding: 0 var(--product-search-padding, var(--t-spacing-3)) var(--t-spacing-2);
+  cursor: text;
+}
+
+/*
+ * A field of its own, styled like the product select below it, with the
+ * search icon inset to line up with the select's logomark. The icon is 4px
+ * wider than the logomark, so a narrower gap lines the text up too.
+ */
+.bordered-mWkCy {
+  gap: var(--t-spacing-half);
+  min-height: var(--t-container-size-lg);
+  padding: 0 var(--t-spacing-1);
+  margin: 0 var(--product-search-padding, var(--t-spacing-3)) var(--t-spacing-1);
+  background-color: var(--t-form-background-color);
+  border: var(--t-form-border-width) solid var(--t-form-border-color);
+  border-radius: var(--t-form-border-radius);
+  transition: border-color var(--t-duration-300) var(--t-ease-in-out);
+}
+
+.bordered-mWkCy:focus-within {
+  border-color: var(--t-form-border-color-hover);
+}
+
+.bordered-mWkCy .input-YQkTC {
+  font-size: var(--t-font-size-lg);
+}
+
+.input-YQkTC {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  background: none;
+  color: var(--t-text-color);
+  font: inherit;
+  font-size: var(--t-font-size-xl);
+  border: 0;
+  outline: none;
+}
+
+.input-YQkTC::placeholder {
+  color: var(--t-text-color-placeholder);
+}
+
+.input-YQkTC::-webkit-search-cancel-button {
+  appearance: none;
+}
+
+.clearButton-9Yh9w {
+  --clear-button-size: 20px;
+
+  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(--t-fill-color-neutral-030);
+  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(--t-fill-color-neutral-040);
+}
+
+.clearButton-9Yh9w svg {
+  height: calc(var(--clear-button-size) * 0.65);
+  width: calc(var(--clear-button-size) * 0.65);
 }
 
 .route--8BWe {
@@ -576,6 +1048,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 +1066,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 +1077,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 +1392,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;
@@ -1139,12 +1638,12 @@ Caused by products overriding .topbar-wrap’s z-index.
     display: block;
   }
 }
-.color-mode-switcher-modes-u-bic svg path {
-  stroke: var(--t-icon-color-dim);
+.color-mode-switcher-modes-u-bic svg {
+  color: var(--t-icon-color-dim);
 }
 .color-mode-switcher-modes-u-bic label,
-.color-mode-switcher-modes-u-bic svg path {
-  transition-property: color, background-color, stroke;
+.color-mode-switcher-modes-u-bic svg {
+  transition-property: color, background-color;
   transition-duration: 0.1s;
   transition-timing-function: linear;
 }
@@ -1152,8 +1651,8 @@ Caused by products overriding .topbar-wrap’s z-index.
   color: var(--t-text-color-status-info);
   background-color: var(--t-fill-color-status-info-ghost);
 }
-.color-mode-switcher-modes-u-bic label:has(input:checked) svg path {
-  stroke: var(--t-icon-color-status-info);
+.color-mode-switcher-modes-u-bic label:has(input:checked) svg {
+  color: var(--t-icon-color-status-info);
 }
 .toolbar-KHJR5 {
   display: flex;
@@ -1411,4 +1910,70 @@ Caused by products overriding .topbar-wrap’s z-index.
   color: var(--t-icon-color-status-neutral-secondary);
 }
 
+.button-2NVI1 {
+  --local-ask-ai-gradient: linear-gradient(
+    163.5deg,
+    var(--t-fill-color-tag-teal-040) 0%,
+    var(--t-fill-color-tag-blue-040) 35.27%,
+    var(--t-fill-color-tag-purple-040) 65.62%,
+    var(--t-fill-color-tag-orange-040) 100%
+  );
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--t-spacing-half);
+  height: var(--t-container-size-md);
+  padding: 0 var(--t-spacing-1);
+  border: var(--t-border-width) solid transparent;
+  border-radius: var(--t-border-radius-md);
+  background:
+    linear-gradient(
+      var(--t-fill-color-button-neutral-outline),
+      var(--t-fill-color-button-neutral-outline)
+    )
+    padding-box,
+    var(--local-ask-ai-gradient) border-box;
+  overflow: hidden;
+  cursor: pointer;
+  font: inherit;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.button-2NVI1::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: var(--local-ask-ai-gradient);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.button-2NVI1:hover::before {
+  opacity: 0.15;
+}
+
+.button-2NVI1:active::before {
+  opacity: 0.25;
+}
+
+.button-2NVI1:focus-visible {
+  outline: var(--t-focus-ring-outline);
+  outline-offset: var(--t-focus-ring-offset);
+}
+
+.sparkle-ruJGP {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.label-4NUGB {
+  position: relative;
+  font-size: var(--t-font-size-sm);
+  line-height: 1.35;
+  color: var(--t-text-color);
+}
+
 /*# sourceMappingURL=topbar.css.map */