@planningcenter/tapestry 2.10.1-rc.0 → 2.10.1

package/dist/components/Banner/Banner.js

@@ -29,5 +29,5 @@ const Banner = ({ children = "", size = "md", status = "neutral", title = "", })
             React.createElement("div", { className: "t-banner-body" }, children))));
 };
 
-export { Banner, Banner as default };
+export { Banner };
 //# sourceMappingURL=Banner.js.map

package/dist/components/button/BaseButton.d.ts

@@ -1,5 +1,5 @@
 import "./btn.css";
-import { BaseComponentProps, ComponentKind } from "@utilities/buttonLinkShared";
+import { BaseComponentProps, ComponentKind } from "../../utilities/buttonLinkShared";
 import React, { ButtonHTMLAttributes } from "react";
 export interface BaseButtonProps extends Omit<BaseComponentProps, "kind"> {
     kind?: ComponentKind;

package/dist/components/link/BaseLink.d.ts

@@ -1,5 +1,5 @@
 import "../button/btn.css";
-import { BaseComponentProps, ComponentKind } from "@utilities/buttonLinkShared";
+import { BaseComponentProps, ComponentKind } from "../../utilities/buttonLinkShared";
 import React, { AnchorHTMLAttributes } from "react";
 export interface BaseLinkElementProps extends BaseComponentProps, Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseComponentProps | "children"> {
     children?: React.ReactNode;

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

@@ -1,4 +1,4 @@
-import '../../tapestry-wc/dist/components/p-C8sHPHiA.js';
+import '../../tapestry-wc/dist/components/p-Cy3eHXXq.js';
 import { defineCustomElement } from '../../tapestry-wc/dist/components/tds-page-header.js';
 import { defineCustomElement as defineCustomElement$1 } from '../../tapestry-wc/dist/components/tds-page-header-nav.js';
 

package/dist/components/sidenav/index.js

@@ -1,4 +1,4 @@
-import '../../tapestry-wc/dist/components/p-C8sHPHiA.js';
+import '../../tapestry-wc/dist/components/p-Cy3eHXXq.js';
 import { defineCustomElement } from '../../tapestry-wc/dist/components/tds-sidenav.js';
 import { defineCustomElement as defineCustomElement$1 } from '../../tapestry-wc/dist/components/tds-sidenav-item.js';
 import { defineCustomElement as defineCustomElement$3 } from '../../tapestry-wc/dist/components/tds-sidenav-responsive-header.js';

package/dist/index.css

@@ -137,6 +137,7 @@
   --t-fill-color-status-error:hsl(8, 60%, 47%);
   --t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
   --t-fill-color-status-error-dim:hsl(7, 60%, 97%);
+  --t-fill-color-status-error-hover:hsl(8, 60%, 40%);
   --t-fill-color-tooltip:hsla(0, 0%, 12%, 0.9);
   --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
   --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
@@ -404,6 +405,10 @@
   --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.07);
   --t-font-sans-serif:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --t-font-monospace:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --t-focus-ring-color:var(--t-fill-color-interaction);
+  --t-focus-ring-offset:2px;
+  --t-focus-ring-outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
+  --t-focus-ring-width:2px;
   --t-form-background-color:var(--t-fill-color-neutral-100);
   --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
   --t-form-background-color-error:var(--t-fill-color-neutral-100);
@@ -411,15 +416,16 @@
   --t-form-border-color:var(--t-border-color);
   --t-form-border-color-disabled:var(--t-border-color);
   --t-form-border-color-error:var(--t-border-color-status-error);
+  --t-form-border-color-error-hover:var(--t-fill-color-status-error-hover);
   --t-form-border-color-focus:var(--t-fill-color-interaction);
   --t-form-border-color-hover:var(--t-border-color-dark);
   --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
   --t-form-border-radius:var(--t-border-radius-md);
   --t-form-border-width:var(--t-border-width);
-  --t-form-font-color:var(--t-text-color);
-  --t-form-font-color-disabled:var(--t-text-color-disabled);
-  --t-form-font-color-error:var(--t-text-color-status-error);
-  --t-form-font-color-readonly:var(--t-text-color);
+  --t-form-color:var(--t-text-color);
+  --t-form-color-disabled:var(--t-text-color-disabled);
+  --t-form-color-error:var(--t-text-color);
+  --t-form-color-readonly:var(--t-text-color);
   --t-form-picker-icon-color:var(--t-icon-color);
   --t-form-placeholder-color:var(--t-text-color-placeholder);
   --t-border-size-default:var(--t-border-width);
@@ -458,6 +464,10 @@
   --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
   --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
   --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
+  --t-form-font-color:var(--t-form-color);
+  --t-form-font-color-disabled:var(--t-form-color-disabled);
+  --t-form-font-color-error:var(--t-text-color-status-error);
+  --t-form-font-color-readonly:var(--t-form-color-readonly);
   --t-border-color-default-base:var(--t-border-color);
   --t-border-color-default-dark:var(--t-border-color-dark);
   --t-border-color-default-darker:var(--t-border-color-darker);
@@ -581,6 +591,7 @@
   --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
   --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
   --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
+  --t-fill-color-status-error-hover:hsl(8, 60%, 64%);
   --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
   --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
   --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
@@ -813,6 +824,7 @@
   --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
   --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
   --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
+  --t-fill-color-status-error-hover:hsl(8, 60%, 64%);
   --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
   --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
   --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
@@ -1192,8 +1204,8 @@
 .tds-page-header nav[slot="navigation"] button:not(.selected):active,
 .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
 .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
-  border-color:var(--tds-page-header-nav-item-border-color-active);
   background-color:var(--tds-page-header-nav-item-background-color-active);
+  border-color:var(--tds-page-header-nav-item-border-color-active);
 }
 
 .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
@@ -1265,7 +1277,8 @@
   }
 
 @layer tds-component{
-  tds-sidenav, .tds-sidenav{
+  tds-sidenav,
+ .tds-sidenav{
     --tds-sidenav-indent:12px;
     --tds-sidenav-item-depth:0;
 
@@ -1647,8 +1660,8 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 
 .tds-btn:focus-visible{
     color:var(--tds-btn-color-hover);
-    outline:solid var(--t-spacing-fourth) var(--t-border-color-status-info);
-    outline-offset:var(--t-spacing-fourth);
+    outline:var(--t-focus-ring-outline);
+    outline-offset:var(--t-focus-ring-offset);
     background-color:var(--tds-btn-bg-hover);
     border-color:var(--tds-btn-border-color-hover);
   }
@@ -2160,8 +2173,8 @@ a[class="tds-btn"]{
     }
 
 :is(.tds-checkbox input[type="checkbox"]):focus-visible{
-      outline:solid var(--t-spacing-fourth) var(--t-border-color-status-info);
-      outline-offset:var(--t-spacing-fourth);
+      outline:var(--t-focus-ring-outline);
+      outline-offset:var(--t-focus-ring-offset);
     }
 
 :is(.tds-checkbox input[type="checkbox"]):disabled{
@@ -2212,8 +2225,8 @@ a[class="tds-btn"]{
     }
 
 :is(:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:checked,:is(.tds-checkbox:has(input:user-invalid),.tds-checkbox.tds-checkbox--invalid) input:indeterminate):hover:not(:disabled){
-        --tds-checkbox-input-border-color:hsl(9 60% 40%);
-        --tds-checkbox-input-background-color:hsl(9 60% 40%);
+        --tds-checkbox-input-border-color:var(--t-form-border-color-error-hover);
+        --tds-checkbox-input-background-color:var(--t-form-border-color-error-hover);
       }
 
 .tds-checkbox:has(input:required) label::after{
@@ -2325,8 +2338,8 @@ a[class="tds-btn"]{
     }
 
 :is(.tds-radio input[type="radio"]):focus-visible{
-      outline:solid var(--t-spacing-fourth) var(--t-border-color-status-info);
-      outline-offset:var(--t-spacing-fourth);
+      outline:var(--t-focus-ring-outline);
+      outline-offset:var(--t-focus-ring-offset);
     }
 
 :is(.tds-radio input[type="radio"]):disabled{
@@ -2341,13 +2354,13 @@ a[class="tds-btn"]{
     }
 
 .tds-radio:has(input:checked){
-    --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
+    --tds-radio-input-background-color:var(--t-form-background-color);
     --tds-radio-input-border-color:var(--t-border-color-control-info);
     --tds-radio-input-border-width:4px;
   }
 
 .tds-radio:has(input:checked) input:hover:not(:disabled){
-      --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
+      --tds-radio-input-background-color:var(--t-form-background-color);
       --tds-radio-input-border-color:var(--t-fill-color-interaction-hover);
     }
 
@@ -2370,7 +2383,7 @@ a[class="tds-btn"]{
   }
 
 .tds-radio:has(input:disabled) input:checked{
-      --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
+      --tds-radio-input-background-color:var(--t-form-background-color);
       --tds-radio-input-border-color:var(--t-border-color-control-disabled);
     }
 
@@ -2405,15 +2418,15 @@ a[class="tds-btn"]{
   --tds-radio-group-description-line-height:1.35;
   --tds-radio-group-description-color:var(--t-text-color-secondary);
   --tds-radio-group-description-invalid-icon-display:none;
+  display:flex;
+  flex-direction:column;
+  gap:var(--tds-radio-group-gap);
+  padding:0;
+  margin:0;
 
   font-size:var(--tds-radio-group-font-size);
   line-height:var(--tds-radio-group-line-height);
   border:0;
-  padding:0;
-  margin:0;
-  display:flex;
-  flex-direction:column;
-  gap:var(--tds-radio-group-gap);
 }
 
 .tds-radio-group legend{
@@ -2435,12 +2448,12 @@ a[class="tds-btn"]{
     }
 
 :is(.tds-radio-group[aria-invalid="true"] .tds-radio) input:hover:not(:disabled){
-        --tds-radio-input-border-color:hsl(9 60% 40%);
+        --tds-radio-input-border-color:var(--t-form-border-color-error-hover);
         --tds-radio-input-background-color:var(--t-fill-color-status-error-dim);
       }
 
 :is(.tds-radio-group[aria-invalid="true"] .tds-radio):has(input:checked) input:hover:not(:disabled){
-        --tds-radio-input-background-color:var(--t-fill-color-neutral-100);
+        --tds-radio-input-background-color:var(--t-form-background-color);
       }
 
 .tds-radio-group:has(input:required) legend::after{
@@ -2545,7 +2558,7 @@ a[class="tds-btn"]{
   }
 
 .tds-toggle-switch:has(input:focus-visible){
-    --tds-toggle-switch-track-outline:solid var(--t-spacing-fourth) var(--t-border-color-status-info);
+    --tds-toggle-switch-track-outline:var(--t-focus-ring-outline);
   }
 
 .tds-toggle-switch:has(input:checked){
@@ -2570,7 +2583,7 @@ a[class="tds-btn"]{
   width:var(--tds-toggle-switch-track-width);
   height:var(--tds-toggle-switch-track-height);
   outline:var(--tds-toggle-switch-track-outline);
-  outline-offset:var(--t-spacing-fourth);
+  outline-offset:var(--t-focus-ring-offset);
   background-color:var(--tds-toggle-switch-track-background-color);
   border-radius:var(--t-border-radius-round);
   transition:var(--tds-toggle-switch-track-transition);