@planningcenter/tapestry 3.2.1-rc.8 → 3.2.1

package/dist/unstable.css

@@ -3432,12 +3432,16 @@ a[class="tds-btn"]{
     --tds-checkbox-group-description-invalid-icon-display:inline-block;
   }
 
-.tds-checkbox-group:has(input:required) legend::after{
+.tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) legend::after{
       margin-left:.25ch;
       color:var(--t-text-color-status-error);
       content:"*";
     }
 
+.tds-checkbox-group:has(.tds-checkbox input:required):not(:has(.tds-checkbox input:not(:required))) .tds-checkbox label::after{
+      content:none;
+    }
+
 .tds-checkbox-group-fields{
   display:flex;
   flex-direction:column;
@@ -3480,6 +3484,7 @@ a[class="tds-btn"]{
   --tds-combo-box-font-size:var(--t-font-size-md);
   --tds-combo-box-min-height:var(--t-container-size-md);
   --tds-combo-box-padding-block:6px;
+  --tds-combo-box-button-offset:4px;
   --tds-combo-box-description-color:var(--t-text-color-secondary);
   --tds-combo-box-description-invalid-icon-display:none;
 
@@ -3518,13 +3523,14 @@ a[class="tds-btn"]{
       cursor:not-allowed;
     }
 
-.tds-combo-box[data-open] .tds-combo-box-button{
+.tds-combo-box[data-open] .tds-combo-box-button > svg{
     transform:rotate(.5turn);
   }
 
 .tds-combo-box--lg{
   --tds-combo-box-min-height:var(--t-container-size-lg);
   --tds-combo-box-font-size:var(--t-font-size-lg);
+  --tds-combo-box-button-offset:5px;
 }
 
 .tds-combo-box-label{
@@ -3601,39 +3607,36 @@ a[class="tds-btn"]{
   }
 
 .tds-combo-box-button{
-  display:flex;
   flex-shrink:0;
-  align-items:center;
   align-self:center;
-  justify-content:center;
-  padding:2px;
-  margin-inline-end:var(--t-spacing-half);
-  color:var(--tds-combo-box-color);
-  cursor:default;
-  outline:0;
-  background:transparent;
-  border:0;
-  border-radius:var(--t-border-radius-sm);
-  transition:transform var(--t-duration-300) var(--t-ease-in-out);
+  inline-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
+  block-size:calc(var(--tds-combo-box-min-height) - (var(--tds-combo-box-button-offset) * 2));
+  padding:0;
+  margin-inline-end:var(--tds-combo-box-button-offset);
 }
 
-.tds-combo-box-button[data-hovered]{
-    background:var(--t-fill-color-neutral-070);
+.tds-combo-box-button > svg{
+    inline-size:var(--tds-combo-box-font-size);
+    block-size:var(--tds-combo-box-font-size);
+    transition:transform var(--t-duration-300) var(--t-ease-in-out);
   }
 
-.tds-combo-box-button[data-pressed]{
-    background:var(--t-fill-color-button-interaction-ghost-active);
-  }
-
-.tds-combo-box-button[data-focus-visible]{
-    outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
-    outline-offset:var(--t-focus-ring-offset);
+.tds-combo-box-button:not(.tds-btn){
+    display:inline-flex;
+    align-items:center;
+    justify-content:center;
+    inline-size:auto;
+    block-size:auto;
+    margin-inline-end:.75em;
+    color:var(--t-icon-color);
+    cursor:default;
+    background:transparent;
+    border:0;
   }
 
-.tds-combo-box-button[data-disabled]{
-    color:var(--t-form-color-disabled);
-    cursor:not-allowed;
-  }
+.tds-combo-box-button[data-focus-visible]:not(.tds-btn){
+      outline:0;
+    }
 
 .tds-combo-box-popover{
   width:var(--trigger-width);
@@ -3677,7 +3680,7 @@ a[class="tds-btn"]{
       animation:none;
     }
 
-  .tds-combo-box-button{
+  .tds-combo-box-button > svg{
     transition:none;
   }
 }
@@ -3763,6 +3766,7 @@ a[class="tds-btn"]{
   --tds-date-picker-font-size:var(--t-font-size-md);
   --tds-date-picker-min-height:var(--t-container-size-md);
   --tds-date-picker-padding-block:6px;
+  --tds-date-picker-button-offset:4px;
   --tds-date-picker-description-color:var(--t-text-color-secondary);
   --tds-date-picker-description-invalid-icon-display:none;
 
@@ -3801,6 +3805,7 @@ a[class="tds-btn"]{
 .tds-date-picker--lg{
   --tds-date-picker-min-height:var(--t-container-size-lg);
   --tds-date-picker-font-size:var(--t-font-size-lg);
+  --tds-date-picker-button-offset:5px;
 }
 
 .tds-date-picker-label{
@@ -3903,39 +3908,14 @@ a[class="tds-btn"]{
   }
 
 .tds-date-picker-button{
-  display:flex;
   flex-shrink:0;
-  align-items:center;
   align-self:center;
-  justify-content:center;
-  padding:2px;
-  margin-inline-end:var(--t-spacing-half);
-  color:var(--tds-date-picker-color);
-  cursor:default;
-  outline:0;
-  background:transparent;
-  border:0;
-  border-radius:var(--t-border-radius-sm);
+  inline-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
+  block-size:calc(var(--tds-date-picker-min-height) - (var(--tds-date-picker-button-offset) * 2));
+  padding:0;
+  margin-inline-end:var(--tds-date-picker-button-offset);
 }
 
-.tds-date-picker-button[data-hovered]{
-    background:var(--t-fill-color-neutral-070);
-  }
-
-.tds-date-picker-button[data-pressed]{
-    background:var(--t-fill-color-button-interaction-ghost-active);
-  }
-
-.tds-date-picker-button[data-focus-visible]{
-    outline:var(--t-focus-ring-width) solid var(--t-focus-ring-color);
-    outline-offset:var(--t-focus-ring-offset);
-  }
-
-.tds-date-picker-button[data-disabled]{
-    color:var(--t-form-color-disabled);
-    cursor:not-allowed;
-  }
-
 .tds-date-picker-popover{
   padding:var(--t-spacing-2);
   background:var(--t-surface-color-card);