@planningcenter/tapestry 2.0.0-rc.4 → 2.0.0-rc.6

package/dist/unstable.css

@@ -1,83 +1,3 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-.t-banner {
-  --t-banner-font-size: var(--t-font-size-md);
-  --t-banner-font-color: var(--t-text-color-default-primary);
-  --t-banner-background-color: var(--t-fill-color-status-neutral-ghost);
-  --t-banner-spacing: var(--t-spacing-2);
-  --t-banner-border-radius: var(--t-border-radius-md);
-  --t-banner-title-font-color: var(--t-text-color-default-headline);
-  --t-banner-title-font-size: var(--t-font-size-md);
-  --t-banner-title-font-weight: var(--t-font-weight-semibold);
-  --t-banner-icon-fill-color: hsla(0, 0%, 0%, 0);
-  --t-banner-background-color-info: var(--t-fill-color-status-info-ghost);
-  --t-banner-icon-fill-color-info: var(--t-icon-color-status-info-primary);
-  --t-banner-background-color-warning: var(--t-fill-color-status-warning-ghost);
-  --t-banner-icon-fill-color-warning: var(--t-icon-color-status-warning-primary);
-  --t-banner-background-color-error: var(--t-fill-color-status-error-ghost);
-  --t-banner-icon-fill-color-error: var(--t-icon-color-status-error-primary);
-  --t-banner-background-color-success: var(--t-fill-color-status-success-ghost);
-  --t-banner-icon-fill-color-success: var(--t-icon-color-status-success-primary);
-  --t-banner-link-font-color-hover: var(--t-text-color-default-headline);
-  display: flex;
-  gap: var(--t-banner-spacing);
-  padding: var(--t-banner-spacing);
-  font-size: var(--t-banner-font-size);
-  line-height: 1.4;
-  color: var(--t-banner-font-color);
-  background-color: var(--t-banner-background-color);
-  border-radius: var(--t-banner-border-radius);
-}
-
-.t-banner-title {
-  display: block;
-  margin-bottom: var(--t-spacing-half);
-  font-size: var(--t-banner-title-font-size);
-  font-weight: var(--t-banner-title-font-weight);
-  color: var(--t-banner-title-font-color);
-}
-
-.t-banner-icon {
-  margin-top: 1px;
-}
-
-.t-banner-icon svg {
-  fill: var(--t-banner-icon-fill-color);
-}
-
-.t-banner-body a {
-  color: inherit;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  transition: color .1s linear;
-}
-
-.t-banner--status-info {
-  --t-banner-background-color: var(--t-banner-background-color-info);
-  --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-info);
-}
-
-.t-banner--status-warning {
-  --t-banner-background-color: var(--t-banner-background-color-warning);
-  --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-warning);
-}
-
-.t-banner--status-error {
-  --t-banner-background-color: var(--t-banner-background-color-error);
-  --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-error);
-}
-
-.t-banner--status-success {
-  --t-banner-background-color: var(--t-banner-background-color-success);
-  --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-success);
-}
-
-.t-banner--sm {
-  --t-banner-spacing: calc(var(--t-spacing-half) + var(--t-spacing-1));
-}
-
 @layer t-critical, t-component;
 
 /**
@@ -1109,6 +1029,7 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"] {
   --tds-btn-disabled-opacity: 1;
   --tds-btn-min-height: 32px;
   --tds-btn-text-decoration: none;
+  --tds-btn-attention-icon-size: 1em;
   display: inline-flex;
   gap: 1ex;
   align-items: center;
@@ -1507,6 +1428,15 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"] {
     visibility: hidden;
   }
 
+.tds-btn--attention .attention-icon {
+  display: inline-block;
+  width: var(--tds-btn-attention-icon-size);
+  height: var(--tds-btn-attention-icon-size);
+  background-color: var(--t-icon-color-status-warning-primary);
+  border: .125em solid var(--t-border-color-default-white);
+  border-radius: var(--t-border-radius-round);
+}
+
 .tds-loading-spinner {
   --tds-loading-spinner-border-width: 4px; /* Default for md size */
   --tds-loading-spinner-border-color: var(--t-fill-color-transparency-light-040);
@@ -1533,4 +1463,261 @@ tds-sidenav-section:not(.hydrated)  > [slot="ssr"] {
   }
 }
 
+.tds-checkbox {
+  --tds-checkbox-column-gap: var(--t-spacing-1);
+  --tds-checkbox-cursor: pointer;
+  --tds-checkbox-line-height: 1.4;
+  --tds-checkbox-transition-property: background-color, border-color;
+
+  --tds-checkbox-input-size: var(--t-element-size-md);
+  --tds-checkbox-input-border-radius: 3px;
+  --tds-checkbox-input-border-color: var(--t-border-color-control-neutral);
+  --tds-checkbox-input-background-color: transparent;
+  --tds-checkbox-input-border-color-hover: var(--t-border-color-button-info);
+  --tds-checkbox-input-background-color-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
+  --tds-checkbox-input-border-color-checked: var(--t-border-color-control-info);
+  --tds-checkbox-input-background-color-checked: var(--t-fill-color-control-primary);
+  --tds-checkbox-input-border-color-disabled: var(--t-border-color-control-disabled);
+  --tds-checkbox-input-background-color-disabled: var(--t-fill-color-neutral-070);
+
+  --tds-checkbox-input-icon: none;
+  --tds-checkbox-input-icon-visibility: hidden;
+  --tds-checkbox-input-icon-opacity: 0;
+  --tds-checkbox-input-icon-fill: var(--t-icon-color-default-inverted);
+  --tds-checkbox-input-icon-checked: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
+  --tds-checkbox-input-icon-indeterminate: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
+
+  --tds-checkbox-font-size: var(--t-font-size-md);
+  --tds-checkbox-label-color: var(--t-text-color-default-primary);
+
+  --tds-checkbox-description-font-size: var(--t-font-size-sm);
+  --tds-checkbox-description-line-height: 1.35;
+  --tds-checkbox-description-color: var(--t-text-color-default-secondary);
+
+  position: relative;
+  display: inline-grid;
+  grid-template-areas:
+    "checkbox label"
+    ". description";
+  grid-template-columns: auto 1fr;
+  gap: var(--t-spacing-fourth) var(--tds-checkbox-column-gap);
+  line-height: var(--tds-checkbox-line-height);
+  cursor: var(--tds-checkbox-cursor);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
+.tds-checkbox label {
+    grid-area: label;
+    font-size: var(--tds-checkbox-font-size);
+    color: var(--tds-checkbox-label-color);
+    cursor: var(--tds-checkbox-cursor);
+  }
+
+.tds-checkbox input[type="checkbox"] {
+    position: relative;
+    grid-area: checkbox;
+    width: 1em;
+    height: 1em;
+    margin: calc((1lh - 1em) / 2) 0 0;
+    font-size: var(--tds-checkbox-font-size);
+    line-height: inherit;
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    cursor: var(--tds-checkbox-cursor);
+    background-color: var(--tds-checkbox-input-background-color);
+    border: var(--t-border-width-default) solid var(--tds-checkbox-input-border-color);
+    border-radius: var(--tds-checkbox-input-border-radius);
+    transition-timing-function: ease-in-out;
+    transition-duration: 180ms;
+    transition-property: var(--tds-checkbox-transition-property);
+  }
+
+:is(.tds-checkbox input[type="checkbox"])::before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      visibility: var(--tds-checkbox-input-icon-visibility);
+      width: 100%;
+      height: 100%;
+      content: "";
+      background-color: var(--tds-checkbox-input-icon-fill);
+      border-radius: var(--tds-checkbox-input-border-radius);
+      opacity: var(--tds-checkbox-input-icon-opacity);
+      -webkit-mask-image: var(--tds-checkbox-input-icon);
+              mask-image: var(--tds-checkbox-input-icon);
+      -webkit-mask-repeat: no-repeat;
+              mask-repeat: no-repeat;
+      -webkit-mask-size: contain;
+              mask-size: contain;
+      transform: translate(-50%, -50%);
+    }
+
+:is(.tds-checkbox input[type="checkbox"]):hover {
+      --tds-checkbox-input-background-color: var(--tds-checkbox-input-background-color-hover);
+      --tds-checkbox-input-border-color: var(--tds-checkbox-input-border-color-hover);
+    }
+
+:is(.tds-checkbox input[type="checkbox"]):focus-visible {
+      outline: solid 2px var(--t-border-color-status-info);
+      outline-offset: 1px;
+    }
+
+:is(.tds-checkbox input[type="checkbox"]):checked,:is(.tds-checkbox input[type="checkbox"]):indeterminate {
+      --tds-checkbox-input-background-color: var(--tds-checkbox-input-background-color-checked);
+      --tds-checkbox-input-border-color: var(--tds-checkbox-input-border-color-checked);
+      --tds-checkbox-input-icon-visibility: visible;
+      --tds-checkbox-input-icon-opacity: 1;
+    }
+
+:is(.tds-checkbox input[type="checkbox"]):disabled {
+      --tds-checkbox-input-background-color: var(--tds-checkbox-input-background-color-disabled);
+      --tds-checkbox-input-border-color: var(--tds-checkbox-input-border-color-disabled);
+      --tds-checkbox-input-icon-fill: var(--t-icon-color-default-disabled);
+      pointer-events: none;
+    }
+
+.tds-checkbox:has(input:disabled) {
+    --tds-checkbox-label-color: var(--t-text-color-default-disabled);
+    --tds-checkbox-description-color: var(--t-text-color-default-disabled);
+    --tds-checkbox-cursor: not-allowed;
+    --tds-checkbox-input-background-color-checked: var(--t-fill-color-control-disabled);
+    --tds-checkbox-input-border-color-checked: var(--tds-checkbox-input-border-color-disabled);
+  }
+
+.tds-checkbox:has(input:checked) {
+    --tds-checkbox-input-icon: var(--tds-checkbox-input-icon-checked);
+  }
+
+.tds-checkbox .tds-checkbox--indeterminate,.tds-checkbox:has(input:indeterminate) {
+    --tds-checkbox-input-icon: var(--tds-checkbox-input-icon-indeterminate);
+  }
+
+@media (prefers-reduced-motion: reduce) {
+
+.tds-checkbox {
+    --tds-checkbox-transition-property: none;
+}
+  }
+
+.tds-checkbox-description {
+  grid-area: description;
+  margin: 0;
+  margin-top: var(--t-spacing-fourth);
+  font-size: var(--tds-checkbox-description-font-size);
+  line-height: var(--tds-checkbox-description-line-height);
+  color: var(--tds-checkbox-description-color);
+  cursor: text;
+}
+
+.tds-checkbox--invalid,
+.tds-checkbox:has(input:invalid) {
+  --tds-checkbox-input-border-color: var(--t-border-color-button-delete);
+  --tds-checkbox-input-border-color-hover: var(--t-border-color-button-delete);
+  --tds-checkbox-input-background-color-hover: var(--t-fill-color-button-delete-outline-dim-hover);
+  --tds-checkbox-input-border-color-checked: var(--t-fill-color-button-delete-solid-default);
+  --tds-checkbox-input-background-color-checked: var(--t-fill-color-button-delete-solid-default);
+  --tds-checkbox-description-color: var(--t-text-color-status-error);
+}
+
+.tds-checkbox--sm {
+  --tds-checkbox-column-gap: 6px;
+  --tds-checkbox-line-height: 1.35;
+  --tds-checkbox-input-size: var(--t-element-size-sm);
+  --tds-checkbox-font-size: var(--t-font-size-sm);
+  --tds-checkbox-description-font-size: var(--t-font-size-xs);
+  --tds-checkbox-description-line-height: 1.3;
+}
+
+.tds-checkbox--xs {
+  --tds-checkbox-column-gap: var(--t-spacing-half);
+  --tds-checkbox-line-height: 1.3;
+  --tds-checkbox-input-size: var(--t-element-size-xs);
+  --tds-checkbox-font-size: var(--t-font-size-xs);
+  --tds-checkbox-description-font-size: var(--t-font-size-xs);
+  --tds-checkbox-description-line-height: 1.25;
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.t-banner {
+  --t-banner-font-size: var(--t-font-size-md);
+  --t-banner-font-color: var(--t-text-color-default-primary);
+  --t-banner-background-color: var(--t-fill-color-status-neutral-ghost);
+  --t-banner-spacing: var(--t-spacing-2);
+  --t-banner-border-radius: var(--t-border-radius-md);
+  --t-banner-title-font-color: var(--t-text-color-default-headline);
+  --t-banner-title-font-size: var(--t-font-size-md);
+  --t-banner-title-font-weight: var(--t-font-weight-semibold);
+  --t-banner-icon-fill-color: hsla(0, 0%, 0%, 0);
+  --t-banner-background-color-info: var(--t-fill-color-status-info-ghost);
+  --t-banner-icon-fill-color-info: var(--t-icon-color-status-info-primary);
+  --t-banner-background-color-warning: var(--t-fill-color-status-warning-ghost);
+  --t-banner-icon-fill-color-warning: var(--t-icon-color-status-warning-primary);
+  --t-banner-background-color-error: var(--t-fill-color-status-error-ghost);
+  --t-banner-icon-fill-color-error: var(--t-icon-color-status-error-primary);
+  --t-banner-background-color-success: var(--t-fill-color-status-success-ghost);
+  --t-banner-icon-fill-color-success: var(--t-icon-color-status-success-primary);
+  --t-banner-link-font-color-hover: var(--t-text-color-default-headline);
+  display: flex;
+  gap: var(--t-banner-spacing);
+  padding: var(--t-banner-spacing);
+  font-size: var(--t-banner-font-size);
+  line-height: 1.4;
+  color: var(--t-banner-font-color);
+  background-color: var(--t-banner-background-color);
+  border-radius: var(--t-banner-border-radius);
+}
+
+.t-banner-title {
+  display: block;
+  margin-bottom: var(--t-spacing-half);
+  font-size: var(--t-banner-title-font-size);
+  font-weight: var(--t-banner-title-font-weight);
+  color: var(--t-banner-title-font-color);
+}
+
+.t-banner-icon {
+  margin-top: 1px;
+}
+
+.t-banner-icon svg {
+  fill: var(--t-banner-icon-fill-color);
+}
+
+.t-banner-body a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: color .1s linear;
+}
+
+.t-banner--status-info {
+  --t-banner-background-color: var(--t-banner-background-color-info);
+  --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-info);
+}
+
+.t-banner--status-warning {
+  --t-banner-background-color: var(--t-banner-background-color-warning);
+  --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-warning);
+}
+
+.t-banner--status-error {
+  --t-banner-background-color: var(--t-banner-background-color-error);
+  --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-error);
+}
+
+.t-banner--status-success {
+  --t-banner-background-color: var(--t-banner-background-color-success);
+  --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-success);
+}
+
+.t-banner--sm {
+  --t-banner-spacing: calc(var(--t-spacing-half) + var(--t-spacing-1));
+}
+
 /*# sourceMappingURL=unstable.css.map */