@planningcenter/tapestry 1.1.0-rc.8 → 1.1.0

package/dist/components/page-header/PageHeader.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+export declare function PageHeader({ children, actions, navigation, className, inactive, profile, }: {
+    /**
+     * Additional content (typically actions) that complements the primary slot.
+     */
+    actions?: React.ReactNode;
+    /**
+     * The main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.
+     */
+    children: React.ReactNode;
+    className?: string;
+    /**
+     * Indicates whether the page header is inactive or not. When set to true, the page header is visually inactive
+     */
+    inactive?: boolean;
+    /**
+     * Navigation for the page. Should contain an unstyled unordered list (ul)
+     * that contains a list of links or buttons.
+     */
+    navigation?: React.ReactNode;
+    /**
+     * Indicates whether the page header is a profile page header or not. When set to true, the page header will visually center the title and actions at mobile breakpoints.
+     */
+    profile?: boolean;
+}): React.JSX.Element;
+//# sourceMappingURL=PageHeader.d.ts.map

package/dist/components/page-header/PageHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,OAAe,GAChB,EAAE;IACD;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,qBAUA"}

package/dist/components/page-header/PageHeader.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+function PageHeader({ children, actions, navigation, className, inactive = false, profile = false, }) {
+    const inactiveProps = inactive ? { inactive } : {};
+    const profileProps = profile ? { profile } : {};
+    return (React.createElement("tds-page-header", { ...inactiveProps, ...profileProps, class: className },
+        children,
+        actions && React.createElement("div", { slot: "actions" }, actions),
+        navigation && React.createElement("nav", { slot: "navigation" }, navigation)));
+}
+
+export { PageHeader };
+//# sourceMappingURL=PageHeader.js.map

package/dist/components/page-header/PageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.js","sources":["../../../src/components/page-header/PageHeader.tsx"],"sourcesContent":["import React from \"react\"\n\nexport function PageHeader({\n  children,\n  actions,\n  navigation,\n  className,\n  inactive = false,\n  profile = false,\n}: {\n  /**\n   * Additional content (typically actions) that complements the primary slot.\n   */\n  actions?: React.ReactNode\n  /**\n   * The main content of the page header. It will be displayed prominently. For simple pages, providing a h1 will suffice.\n   */\n  children: React.ReactNode\n  className?: string\n  /**\n   * Indicates whether the page header is inactive or not. When set to true, the page header is visually inactive\n   */\n  inactive?: boolean\n  /**\n   * Navigation for the page. Should contain an unstyled unordered list (ul)\n   * that contains a list of links or buttons.\n   */\n  navigation?: React.ReactNode\n  /**\n   * Indicates whether the page header is a profile page header or not. When set to true, the page header will visually center the title and actions at mobile breakpoints.\n   */\n  profile?: boolean\n}) {\n  const inactiveProps = inactive ? { inactive } : {}\n  const profileProps = profile ? { profile } : {}\n  return (\n    <tds-page-header {...inactiveProps} {...profileProps} class={className}>\n      {children}\n      {actions && <div slot=\"actions\">{actions}</div>}\n      {navigation && <nav slot=\"navigation\">{navigation}</nav>}\n    </tds-page-header>\n  )\n}\n"],"names":[],"mappings":";;SAEgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,GAwBhB,EAAA;AACC,IAAA,MAAM,aAAa,GAAG,QAAQ,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAA;AAClD,IAAA,MAAM,YAAY,GAAG,OAAO,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,CAAA;IAC/C,QACE,4CAAqB,aAAa,EAAA,GAAM,YAAY,EAAE,KAAK,EAAE,SAAS,EAAA;QACnE,QAAQ;AACR,QAAA,OAAO,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,SAAS,EAAA,EAAE,OAAO,CAAO;QAC9C,UAAU,IAAI,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,IAAI,EAAC,YAAY,IAAE,UAAU,CAAO,CACxC,EACnB;AACH;;;;"}

package/dist/index.css

@@ -516,90 +516,105 @@
 @layer t-component {
   .tds-page-header {
     --tds-page-header-background-color: var(--t-surface-color-card);
-    --tds-page-header-background-color-inactive: var(
-      --t-fill-color-transparency-dark-010
-    );
+    --tds-page-header-background-color-inactive:
+      var(
+        --t-fill-color-transparency-dark-010
+      );
     --tds-page-header-color: var(--t-text-color-default-secondary);
     --tds-page-header-headline-color: var(--t-text-color-default-headline);
     --tds-page-header-padding-x: var(--t-spacing-2);
     --tds-page-header-padding-y: var(--t-spacing-2);
-    --tds-page-header-nav-padding-x: var(
-      --tds-page-header-padding-x,
-      var(--t-spacing-3)
-    );
-    --tds-page-header-nav-background: linear-gradient(
-      180deg,
-      rgba(0, 0, 0, 0) 0%,
-      rgba(0, 0, 0, 0.1) 100%
-    );
+    --tds-page-header-nav-padding-x:
+      var(
+        --tds-page-header-padding-x,
+        var(--t-spacing-3)
+      );
+    --tds-page-header-nav-background:
+      linear-gradient(
+        180deg,
+        rgba(0, 0, 0, 0) 0%,
+        rgba(0, 0, 0, .1) 100%
+      );
     --tds-page-header-nav-item-padding-x: var(--t-spacing-1);
     --tds-page-header-nav-item-padding-y: var(--t-spacing-1);
     --tds-page-header-nav-item-color: var(--t-text-color-default-primary);
-    --tds-page-header-nav-item-background-color: var(
-      --t-fill-color-transparency-light-060
-    );
+    --tds-page-header-nav-item-background-color:
+      var(
+        --t-fill-color-transparency-light-060
+      );
     --tds-page-header-nav-item-border-width: 0;
 
-    --tds-page-header-nav-item-border-color: var(
-      --tds-page-header-nav-item-background-color
-    );
-    --tds-page-header-nav-item-border-bottom-color: var(
-      --t-border-color-default-base
-    );
+    --tds-page-header-nav-item-border-color:
+      var(
+        --tds-page-header-nav-item-background-color
+      );
+    --tds-page-header-nav-item-border-bottom-color:
+      var(
+        --t-border-color-default-base
+      );
 
     --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);
-    --tds-page-header-nav-item-background-color-hover: var(
-      --t-fill-color-neutral-080
-    );
-    --tds-page-header-nav-item-border-color-hover: var(
-      --tds-page-header-nav-item-background-color-hover
-    );
+    --tds-page-header-nav-item-background-color-hover:
+      var(
+        --t-fill-color-neutral-080
+      );
+    --tds-page-header-nav-item-border-color-hover:
+      var(
+        --tds-page-header-nav-item-background-color-hover
+      );
 
-    --tds-page-header-nav-item-background-color-active: var(
-      --t-fill-color-neutral-060
-    );
-    --tds-page-header-nav-item-border-color-active: var(
-      --tds-page-header-nav-item-background-color-hover
-    );
+    --tds-page-header-nav-item-background-color-active:
+      var(
+        --t-fill-color-neutral-060
+      );
+    --tds-page-header-nav-item-border-color-active:
+      var(
+        --tds-page-header-nav-item-background-color-hover
+      );
 
-    --tds-page-header-nav-item-color-disabled: var(
-      --t-text-color-default-disabled
-    );
-    --tds-page-header-nav-item-background-color-disabled: var(
-      --t-fill-color-neutral-080
-    );
-    --tds-page-header-nav-item-border-color-disabled: var(
-      --tds-page-header-nav-item-background-color-disabled
-    );
+    --tds-page-header-nav-item-color-disabled:
+      var(
+        --t-text-color-default-disabled
+      );
+    --tds-page-header-nav-item-background-color-disabled:
+      var(
+        --t-fill-color-neutral-080
+      );
+    --tds-page-header-nav-item-border-color-disabled:
+      var(
+        --tds-page-header-nav-item-background-color-disabled
+      );
 
-    --tds-page-header-nav-item-color-selected: var(
-      --t-text-color-interaction-primary
-    );
-    --tds-page-header-nav-item-border-color-selected: var(
-      --t-border-color-default-base
-    );
-    --tds-page-header-nav-item-background-color-selected: var(
-      --t-fill-color-neutral-100
-    );
-    --tds-page-header-nav-item-border-bottom-color-selected: var(
-      --tds-page-header-nav-item-background-color-selected
-    );
+    --tds-page-header-nav-item-color-selected:
+      var(
+        --t-text-color-default-primary
+      );
+    --tds-page-header-nav-item-border-color-selected:
+      var(
+        --t-border-color-default-base
+      );
+    --tds-page-header-nav-item-background-color-selected:
+      var(
+        --t-fill-color-neutral-100
+      );
+    --tds-page-header-nav-item-border-bottom-color-selected:
+      var(
+        --tds-page-header-nav-item-background-color-selected
+      );
   }
 
 
-  @media (width >= 600px) {
+  @media (min-width: 720px) {
     .tds-page-header {
       --tds-page-header-padding-x: var(--t-spacing-3);
       --tds-page-header-nav-background: transparent;
       --tds-page-header-nav-item-padding-x: var(--t-spacing-2);
       --tds-page-header-nav-item-border-width: 1px;
       --tds-page-header-nav-item-color: var(--t-text-color-default-secondary);
-      --tds-page-header-nav-item-background-color: var(
-        --t-fill-color-neutral-070
-      );
-      --tds-page-header-nav-item-color-selected: var(
-        --t-text-color-default-primary
-      );
+      --tds-page-header-nav-item-background-color:
+        var(
+          --t-fill-color-neutral-070
+        );
     }
   }
 }
@@ -664,10 +679,10 @@
   display: flex;
   gap: var(--t-spacing-half);
   padding: 0 var(--tds-page-header-nav-padding-x);
-  margin: 0 0 -1px 0;
+  margin: 0 0 -1px;
   overflow: auto;
-  background: var(--tds-page-header-nav-background);
   list-style: none;
+  background: var(--tds-page-header-nav-background);
 }
 
 .tds-page-header nav[slot="navigation"] a,
@@ -675,19 +690,21 @@
 .tds-page-header nav.tds-page-header__nav a,
 .tds-page-header nav.tds-page-header__nav button {
   display: inline-flex;
-  padding: var(--tds-page-header-nav-item-padding-y)
+  padding:
+    var(--tds-page-header-nav-item-padding-y)
     var(--tds-page-header-nav-item-padding-x);
   font-size: var(--t-font-size-md);
   color: var(--tds-page-header-nav-item-color);
   white-space: nowrap;
   text-decoration: none;
   -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   cursor: pointer;
   outline-offset: -2px;
   background-color: var(--tds-page-header-nav-item-background-color);
-  border: var(--tds-page-header-nav-item-border-width) solid
+  border:
+    var(--tds-page-header-nav-item-border-width) solid
     var(--tds-page-header-nav-item-border-color);
   border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
   border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
@@ -697,18 +714,22 @@
 .tds-page-header nav[slot="navigation"] button.selected,
 .tds-page-header nav.tds-page-header__nav a.selected,
 .tds-page-header nav.tds-page-header__nav button.selected {
-  --tds-page-header-nav-item-color: var(
-    --tds-page-header-nav-item-color-selected
-  );
-  --tds-page-header-nav-item-border-color: var(
-    --tds-page-header-nav-item-border-color-selected
-  );
-  --tds-page-header-nav-item-background-color: var(
-    --tds-page-header-nav-item-background-color-selected
-  );
-  --tds-page-header-nav-item-border-bottom-color: var(
-    --tds-page-header-nav-item-background-color-selected
-  );
+  --tds-page-header-nav-item-color:
+    var(
+      --tds-page-header-nav-item-color-selected
+    );
+  --tds-page-header-nav-item-border-color:
+    var(
+      --tds-page-header-nav-item-border-color-selected
+    );
+  --tds-page-header-nav-item-background-color:
+    var(
+      --tds-page-header-nav-item-background-color-selected
+    );
+  --tds-page-header-nav-item-border-bottom-color:
+    var(
+      --tds-page-header-nav-item-background-color-selected
+    );
 }
 
 .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
@@ -716,12 +737,14 @@
 .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
 .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
   --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
-  --tds-page-header-nav-item-background-color: var(
-    --tds-page-header-nav-item-background-color-hover
-  );
-  --tds-page-header-nav-item-border-color: var(
-    --tds-page-header-nav-item-border-color-hover
-  );
+  --tds-page-header-nav-item-background-color:
+    var(
+      --tds-page-header-nav-item-background-color-hover
+    );
+  --tds-page-header-nav-item-border-color:
+    var(
+      --tds-page-header-nav-item-border-color-hover
+    );
 }
 
 .tds-page-header nav[slot="navigation"] a:not(.selected):active,
@@ -741,7 +764,7 @@
   opacity: 1;
 }
 
-@media (width >= 720px) {
+@media (min-width: 720px) {
   .tds-page-header__title-bar,
   .tds-page-header--profile .tds-page-header__title-bar {
     flex-direction: row;
@@ -836,7 +859,9 @@
     color: var(--t-text-color-default-headline);
     white-space: nowrap;
     text-decoration: none;
-    appearance: none;
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
     cursor: pointer;
     outline: 0;
     background-color: transparent;
@@ -854,14 +879,14 @@
       white-space: nowrap;
     }
 
-[aria-current="page"]:is(.tds-sidenav-item :is(a,button)) {
+.selected > :is(.tds-sidenav-item :is(a,button)) {
       --tds-sidenav-item-nested-background: transparent;
       --tds-sidenav-item-nested-border-color: var(--tds-sidenav-item-nested-border-color-selected);
       font-weight: 600;
       background-color: var(--tds-sidenav-item-background-selected);
     }
 
-[aria-current="page"]:is(.tds-sidenav-item :is(a,button)) .prefix,[aria-current="page"]:is(.tds-sidenav-item :is(a,button)) [slot="prefix"] {
+:is(.selected > :is(.tds-sidenav-item :is(a,button))) .prefix,:is(.selected > :is(.tds-sidenav-item :is(a,button))) [slot="prefix"] {
         color: var(--t-icon-color-default-primary);
       }
 
@@ -883,6 +908,8 @@
 
 :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg {
         display: block;
+        width: 16px;
+        height: 16px;
       }
 
 :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section {
@@ -977,6 +1004,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    order: 0;
     height: var(--t-container-size-md);
     padding: 3px var(--t-spacing-1);
     background-color: var(--t-fill-color-button-neutral-outline-dim-default);
@@ -994,34 +1022,68 @@
 
 .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label {
     flex: 1;
+    order: 1;
     margin: 0;
     font-size: var(--t-font-size-lg);
     font-weight: var(--t-font-weight-medium);
     color: var(--t-text-color-default-headline);
   }
 
-@media (max-width: 767px) {
+@media (max-width: 719px) {
   .tds-sidenav-collapse {
+    display: none;
     position: absolute;
-    top: anchor(bottom);
-    left: anchor(left);
-    z-index: 7000;
-    justify-content: flex-start;
-    max-width: 448px;
-    padding: var(--t-spacing-2);
-    margin-top: 12px;
+    z-index: 10001;
+    max-width: min(448px, calc(100vw - 48px));
+    padding: 0;
+    margin: 12px 0;
+    overflow: hidden;
     outline: 0;
-    background: #fff;
+    background: var(--t-surface-color-card);
     border: 0;
     border-radius: 6px;
     box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .25);
+    will-change: transform;
+    position-area: bottom span-right;
+  }
+
+  .tds-sidenav-collapse:popover-open,
+  .tds-sidenav-collapse.\:popover-open {
+    display: flex;
+  }
+
+  .tds-sidenav-scroll-container {
+    --webkit-overflow-scrolling: touch;
+    display: block;
+    width: 100%;
+    height: -moz-fit-content;
+    height: fit-content;
+    padding: var(--t-spacing-2);
+    overflow-y: auto;
+  }
+
+  .tds-sidenav-item :is(a, button) :is(.prefix, [slot="prefix"]) {
+    display: none;
   }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 720px) {
   .tds-sidenav-responsive-header {
     display: none;
   }
 }
 
+:is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated)  > :not([slot="ssr"]) {
+      display: none;
+    }
+
+:is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated)  > [slot="ssr"] {
+      display: block;
+    }
+
+tds-sidenav-section:not(.hydrated)  > [slot="ssr"] {
+      display: flex;
+      flex-direction: column;
+    }
+
 /*# sourceMappingURL=index.css.map */