@planningcenter/tapestry 3.4.1-rc.9 → 3.5.0

package/dist/unstable.css

@@ -199,6 +199,115 @@ a.tds-dropdown-item:is(:hover, :active){
   border-top:1px solid var(--t-border-color);
 }
 
+.tds-field{
+  --tds-field-label-color:var(--t-text-color);
+  --tds-field-label-cursor:default;
+  --tds-field-label-font-size:var(--t-font-size-md);
+  --tds-field-description-color:var(--t-text-color-secondary);
+  --tds-field-description-cursor:text;
+  --tds-field-description-font-size:var(--t-font-size-sm);
+  --tds-field-description-line-height:1.35;
+  --tds-field-description-invalid-icon-display:none;
+
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  gap:var(--t-spacing-half);
+}
+
+.tds-field:has(:disabled){
+    --tds-field-label-color:var(--t-form-color-disabled);
+    --tds-field-label-cursor:not-allowed;
+    --tds-field-description-color:var(--t-form-color-disabled);
+    --tds-field-description-cursor:not-allowed;
+  }
+
+.tds-field:has([required],[aria-required="true"]) .tds-field-label::after{
+      margin-left:.25ch;
+      color:var(--t-text-color-status-error);
+      content:"*" / "";
+    }
+
+.tds-field:has([aria-invalid="true"],:user-invalid){
+    --tds-field-description-color:var(--t-text-color-status-error);
+    --tds-field-description-invalid-icon-display:inline-block;
+  }
+
+.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"]){
+    --tds-field-label-cursor:pointer;
+
+    display:grid;
+    grid-template-columns:auto;
+    grid-auto-columns:1fr;
+    row-gap:var(--t-spacing-fourth);
+    -moz-column-gap:var(--t-spacing-1);
+         column-gap:var(--t-spacing-1);
+  }
+
+:is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])):has(:disabled){
+      --tds-field-label-cursor:not-allowed;
+    }
+
+:is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])) input[type="checkbox"],:is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])) input[type="radio"],:is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])) tds-indeterminate{
+      grid-row:1;
+      grid-column:1;
+      align-self:center;
+    }
+
+:is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])) tds-indeterminate{
+      display:flex;
+    }
+
+:is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])) .tds-field-label{
+      grid-row:1;
+      grid-column:2;
+    }
+
+:is(.tds-field:has(input[type="checkbox"]),.tds-field:has(tds-indeterminate),.tds-field:has(input[type="radio"])) .tds-field-description{
+      grid-row:2;
+      grid-column:2;
+    }
+
+.tds-field--sm{
+  --tds-field-label-font-size:var(--t-font-size-sm);
+  --tds-field-description-font-size:var(--t-font-size-xs);
+  --tds-field-description-line-height:1.3;
+}
+
+.tds-field-label{
+  font-size:var(--tds-field-label-font-size);
+  font-weight:var(--t-font-weight-normal);
+  color:var(--tds-field-label-color);
+  cursor:var(--tds-field-label-cursor);
+}
+
+.tds-field-label--hidden{
+  position:absolute;
+  width:1px;
+  height:1px;
+  overflow:hidden;
+  white-space:nowrap;
+  clip-path:inset(50%);
+}
+
+.tds-field-description{
+  display:flex;
+  gap:var(--t-spacing-half);
+  align-items:flex-start;
+  margin:0;
+  font-size:var(--tds-field-description-font-size);
+  line-height:var(--tds-field-description-line-height);
+  color:var(--tds-field-description-color, var(--t-text-color-secondary));
+  cursor:var(--tds-field-description-cursor);
+}
+
+.tds-field-description .tds-field-description-invalid-icon{
+    display:var(--tds-field-description-invalid-icon-display, none);
+    flex-shrink:0;
+    margin-block-start:calc(.5lh - .5em);
+    line-height:var(--tds-field-description-line-height);
+  }
+
 @layer t-critical, t-component;
 
 :root{
@@ -2789,6 +2898,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
        -moz-appearance:none;
             appearance:none;
     outline:var(--t-focus-ring-width) solid transparent;
+    outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
     outline-offset:0;
     background-color:var(--tds-input-background-color);
     border:var(--t-form-border-width) solid var(--tds-input-border-color);
@@ -2803,7 +2913,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
     }
 
 :is(.tds-input :is(input,textarea)):focus{
-      outline-color:transparent;
+      outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
     }
 
 :is(.tds-input :is(input,textarea)):focus-visible{
@@ -3705,7 +3815,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   --tds-select-dropdown-border:1px solid var(--t-border-color);
   --tds-select-dropdown-padding:var(--t-spacing-1);
   --tds-select-dropdown-margin-block:5px;
-  --tds-select-dropdown-scrollbar-color:#0004 #0000;
+  --tds-select-dropdown-scrollbar-color:#0004 var(--t-surface-color-card);
   --tds-select-dropdown-scrollbar-width:thin;
   --tds-select-dropdown-border-radius:var(--t-border-radius);
   --tds-select-dropdown-box-shadow:hsl(0, 0%, 0%, .05) 0 10px 15px -3px, hsl(0, 0%, 0%, .05) 0 4px 6px -4px;
@@ -3717,7 +3827,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
   --tds-select-dropdown-open-translate:0 0;
 
   --tds-select-option-gap:var(--t-spacing-1);
-  --tds-select-option-padding-block:var(--t-spacing-1);
+  --tds-select-option-padding-block:var(--t-spacing-fourth);
   --tds-select-option-padding-inline:var(--t-spacing-2) var(--t-spacing-1);
   --tds-select-option-font-size:1rem;
   --tds-select-option-color:var(--t-text-color);
@@ -3767,6 +3877,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
             appearance:none;
     cursor:var(--tds-select-cursor, default);
     outline:var(--t-focus-ring-width) solid transparent;
+    outline-color:rgb(from var(--t-focus-ring-color) r g b / 0);
     outline-offset:0;
     background-color:var(--tds-select-background-color);
     background-image:var(--tds-select-background-image);
@@ -3833,12 +3944,14 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"]{
 
 .tds-select :is(li[role="option"],option:not([hidden])){
     display:block;
+    align-content:center;
+    min-height:var(--t-container-size-md);
     padding-block:var(--tds-select-option-padding-block);
     padding-inline:var(--tds-select-option-padding-inline);
     overflow:hidden;
     text-overflow:ellipsis;
     font-size:var(--tds-select-option-font-size);
-    line-height:1;
+    line-height:1.15;
     color:var(--tds-select-option-color);
     white-space:nowrap;
     cursor:default;