@tylertech/forge 3.13.1 → 3.14.0-dev.1

package/dist/field/forge-field.css

@@ -1,360 +1,6 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-/* prettier-ignore */
-@keyframes float-in-label-animation {
-  from {
-    translate: 0;
-    opacity: 40%;
-  }
-  to {
-    translate: var(--_field-floating-label-translation);
-    opacity: 100%;
-  }
-}
-@keyframes float-out-label-animation {
-  from {
-    translate: var(--_field-floating-label-translation);
-    opacity: 40%;
-  }
-  to {
-    translate: 0;
-    opacity: 100%;
-  }
-}
-@keyframes multiline-inset-label-background-animation {
-  from {
-    opacity: 0%;
-  }
-  to {
-    opacity: 100%;
-  }
-}
-@layer base, textarea, density, invalid, disabled;
-@layer base {
-  .forge-field {
-    --_field-shape: var(--forge-field-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));
-    --_field-outline-style: var(--forge-field-outline-style, solid);
-    --_field-outline-width: var(--forge-field-outline-width, var(--forge-border-thin, 1px));
-    --_field-height: var(--forge-field-height, 40px);
-    --_field-inset-height: var(--forge-field-inset-height, 48px);
-    --_field-background: var(--forge-field-background, transparent);
-    --_field-padding-inline: var(--forge-field-padding-inline, 12px);
-    --_field-disabled-background: var(--forge-field-disabled-background, var(--forge-theme-surface-container-low, #ebebeb));
-    --_field-disabled-opacity: var(--forge-field-disabled-opacity, 0.38);
-    --_field-placeholder-color: var(--forge-field-placeholder-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)));
-  }
-  .forge-field {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: var(--forge-spacing-xsmall, 8px);
-    box-shadow: var(--_field-elevation);
-    padding-inline: var(--_field-padding-inline);
-    border-radius: var(--_field-shape);
-    outline-style: var(--_field-outline-style);
-    outline-width: var(--_field-outline-width);
-    outline-color: var(--forge-theme-outline-low, #9e9e9e);
-    outline-offset: calc(var(--_field-outline-width) * -1);
-    background: var(--_field-background);
-    opacity: var(--_field-disableable-opacity);
-    cursor: var(--_field-disableable-cursor);
-  }
-  .forge-field:hover:not(:has(:where(input, textarea, select, .forge-field__input):disabled)) {
-    outline-color: var(--forge-theme-outline-high, #212121);
-  }
-  .forge-field :where(input, textarea, select, .forge-field__input) {
-    box-sizing: border-box;
-    margin: 0;
-    outline: none;
-    border: none;
-    background-color: transparent;
-    padding-block: 0;
-    padding-inline: 0;
-    inline-size: 100%;
-    block-size: 100%;
-    color: inherit;
-    font: inherit;
-    font-size: var(--_field-font-size);
-    text-overflow: ellipsis;
-    padding-block-start: 0;
-    padding-block-end: 0;
-    transition: padding-block var(--_field-floating-animation-duration) var(--_field-floating-animation-timing);
-    display: flex;
-    block-size: var(--_field-height);
-    inline-size: 100%;
-    overflow: hidden;
-    color: var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));
-    background: transparent;
-    appearance: none;
-  }
-  .forge-field :where(input, textarea, select, .forge-field__input)::placeholder {
-    color: var(--_field-placeholder-color);
-  }
-  .forge-field--plain {
-    --_field-multiline-inset-label-background: var(--forge-field-multiline-inset-label-background, var(--forge-theme-surface, #ffffff));
-    --_field-multiline-inset-label-background-hover: var(--forge-field-multiline-inset-label-background-hover, var(--forge-theme-surface, #ffffff));
-    --_field-outline-color: var(--forge-field-outline-color, transparent);
-    --_field-outline-color-hover: var(--forge-field-outline-color-hover, transparent);
-    --_field-inner-border-display: var(--forge-field-inner-border-display, none);
-    --_field-padding-inline: var(--forge-field-padding-inline, 0);
-    --_field-surface-display: var(--forge-field-surface-display, none);
-    outline-width: 0;
-  }
-  .forge-field--tonal {
-    --_field-outline-color: var(--forge-field-outline-color, transparent);
-    --_field-outline-color-hover: var(--forge-field-outline-color-hover, transparent);
-    --_field-inner-border-block-size: var(--forge-field-inner-border-block-size, calc(100% - 8px));
-    --_field-background: var(--_field-tonal-background);
-    --_field-multiline-inset-label-background: var(--forge-field-multiline-inset-label-background, var(--_field-background));
-    --_field-hover-background: var(--forge-field-hover-background, tonal-background-hover);
-    --_field-multiline-inset-label-background: var(--forge-field-multiline-inset-label-background, var(--_field-multiline-inset-label-tonal-background));
-    outline-width: 0;
-    background: var(--forge-theme-primary-container-low, #e8eaf6);
-  }
-  .forge-field--tonal:hover:not(:has(:where(input, textarea, select, .forge-field__input):disabled)) {
-    background: var(--forge-theme-surface-container-minimum, #f5f5f5);
-  }
-  .forge-field--filled {
-    --_field-background: var(--_field-filled-background);
-    --_field-multiline-inset-label-background: var(--forge-field-multiline-inset-label-background, var(--_field-background));
-    background: var(--forge-theme-surface-bright, #ffffff);
-  }
-  .forge-field--raised {
-    --_field-elevation: var(--forge-field-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));
-    --_field-elevation-active: var(--forge-field-elevation-active, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));
-    --_field-outline-color: var(--forge-field-outline-color, transparent);
-    --_field-outline-color-hover: var(--forge-field-outline-color-hover, transparent);
-    --_field-inner-border-block-size: var(--forge-field-inner-border-block-size, calc(100% - 8px));
-    --_field-background: var(--_field-filled-background);
-    --_field-multiline-inset-label-background: var(--forge-field-multiline-inset-label-background, var(--_field-background));
-    outline-width: 0;
-  }
-  .forge-field--raised:hover:not(:has(:where(input, textarea, select, .forge-field__input):disabled)) {
-    box-shadow: var(--_field-elevation-active);
-  }
-  .forge-field--rounded {
-    --_field-shape: var(--forge-field-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));
-    --_field-padding-inline: var(--forge-field-padding-inline, var(--_field-rounded-container-padding-inline-start));
-  }
-  .forge-field:has(label) {
-    --_field-floating-label-translation: var(--forge-field-floating-label-translation, 0 calc(calc(calc(max(var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375))), var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)))) / 2) + calc((var(--_field-height) - 56px) / 8)) * -1));
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    gap: 0;
-    block-size: var(--_field-height);
-    --_field-height: var(--forge-field-height, 48px);
-  }
-  .forge-field:has(label) label {
-    position: absolute;
-    grid-column: 2;
-    pointer-events: none;
-    color: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));
-  }
-  .forge-field:has(label).forge-field--rounded {
-    padding-inline: var(--forge-spacing-large, 24px);
-  }
-  @keyframes forge-field-float-label-in {
-    from {
-      transform: translateY(15%);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-  .forge-field:has(label).forge-field--float-label-in label {
-    animation: forge-field-float-label-in var(--forge-animation-duration-short4, 200ms) var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)) forwards;
-  }
-  @keyframes forge-field-float-label-out {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  .forge-field:has(label).forge-field--float-label-out label {
-    animation: forge-field-float-label-out var(--forge-animation-duration-short4, 200ms) var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)) forwards;
-  }
-  .forge-field:has(label).forge-field--float-label label, .forge-field:has(label):has(:where(:where(input, textarea, select, .forge-field__input):autofill, :where(input, textarea, select, .forge-field__input):placeholder-shown)) label {
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    font-family: var(--forge-typography-label2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));
-    font-size: var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.8125)));
-    font-weight: var(--forge-typography-label2-font-weight, 400);
-    line-height: var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));
-    letter-spacing: var(--forge-typography-label2-letter-spacing, 0.0096153846em);
-    text-transform: var(--forge-typography-label2-text-transform, inherit);
-    text-decoration: var(--forge-typography-label2-text-decoration, inherit);
-    translate: var(--_field-floating-label-translation);
-  }
-  .forge-field:has(label).forge-field--float-label:not(.forge-field--extra-small) :where(input, textarea, select, .forge-field__input), .forge-field:has(label):has(:where(:where(input, textarea, select, .forge-field__input):autofill, :where(input, textarea, select, .forge-field__input):placeholder-shown)):not(.forge-field--extra-small) :where(input, textarea, select, .forge-field__input) {
-    padding-block-start: calc(calc(calc(max(var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375))), var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)))) / 2) + calc((var(--_field-height) - 56px) / 8)) * 2) !important;
-  }
-  .forge-field:has(label) :where(input, textarea, select, .forge-field__input) {
-    grid-column: 2;
-    block-size: var(--_field-height);
-  }
-  .forge-field:has(label) :where(input, textarea, select, .forge-field__input) ~ * {
-    grid-column: 3;
-    margin-inline-start: var(--forge-spacing-xsmall, 8px);
-  }
-  .forge-field:has(label) > :not(:where(input, textarea, select, .forge-field__input) ~ *, :where(input, textarea, select, .forge-field__input), label) {
-    grid-column: 1;
-    margin-inline-end: var(--forge-spacing-xsmall, 8px);
-  }
-  @keyframes forge-focus-indicator-outward-grow {
-    from {
-      outline-width: 0;
-    }
-    to {
-      outline-width: var(--_focus-indicator-active-width);
-    }
-  }
-  @keyframes forge-focus-indicator-outward-shrink {
-    from {
-      outline-width: var(--_focus-indicator-active-width);
-    }
-  }
-  @keyframes forge-focus-indicator-inward-grow {
-    from {
-      border-width: 0;
-    }
-    to {
-      border-width: var(--_focus-indicator-active-width);
-    }
-  }
-  @keyframes forge-focus-indicator-inward-shrink {
-    from {
-      border-width: var(--_focus-indicator-active-width);
-    }
-  }
-  .forge-field:has(:where(input, textarea, select, .forge-field__input):focus) {
-    outline: none;
-  }
-  .forge-field:has(:where(input, textarea, select, .forge-field__input):focus)::after {
-    --_focus-indicator-display: var(--forge-focus-indicator-display, flex);
-    --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));
-    --_focus-indicator-active-width: var(--forge-focus-indicator-active-width, 6px);
-    --_focus-indicator-color: var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));
-    --_focus-indicator-shape: var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));
-    --_focus-indicator-duration: var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));
-    --_focus-indicator-easing: var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));
-    --_focus-indicator-shape-start-start: var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));
-    --_focus-indicator-shape-start-end: var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));
-    --_focus-indicator-shape-end-end: var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));
-    --_focus-indicator-shape-end-start: var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));
-    --_focus-indicator-outward-offset: var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));
-    --_focus-indicator-inward-offset: var(--forge-focus-indicator-inward-offset, 0px);
-    --_focus-indicator-offset-block: var(--forge-focus-indicator-offset-block, 0);
-    --_focus-indicator-offset-inline: var(--forge-focus-indicator-offset-inline, 0);
-    animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);
-    animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);
-    animation-timing-function: var(--_focus-indicator-easing);
-    box-sizing: border-box;
-    color: var(--_focus-indicator-color);
-    display: none;
-    pointer-events: none;
-    position: absolute;
-    margin-block: var(--_focus-indicator-offset-block);
-    margin-inline: var(--_focus-indicator-offset-inline);
-    animation-name: forge-focus-indicator-outward-grow, forge-focus-indicator-outward-shrink;
-    border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));
-    border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));
-    border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));
-    border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));
-    inset: calc(-1 * var(--_focus-indicator-outward-offset));
-    outline: var(--_focus-indicator-width) solid currentColor;
-    content: "";
-    display: block;
-    border-radius: inherit;
-  }
-  .forge-field:has(:where(input, textarea, select, .forge-field__input):focus) {
-    --forge-focus-indicator-color: var(--forge-theme-primary, #3f51b5);
-    --forge-focus-indicator-outward-offset: 0px;
-  }
-}
-@layer textarea {
-  .forge-field:has(textarea:only-child) {
-    padding-inline: 0;
-  }
-  .forge-field:has(textarea:only-child) textarea {
-    padding-inline: var(--_field-padding-inline);
-  }
-  .forge-field:has(textarea) {
-    align-items: start;
-    block-size: fit-content;
-  }
-  .forge-field:has(textarea) textarea {
-    padding-block-start: calc((var(--_field-height) - var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)))) / 2);
-    padding-block-end: calc(calc(calc(max(var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375))), var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)))) / 2) + calc((var(--_field-height) - 56px) / 8)) + (var(--_field-height) - var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375)))) / 2);
-    resize: vertical;
-    block-size: fit-content;
-  }
-  .forge-field:has(textarea) *:not(textarea) {
-    margin-block-start: var(--forge-spacing-xsmall, 8px);
-  }
-}
-@layer density {
-  .forge-field--dense, .forge-field--extra-small {
-    --_field-height: var(--forge-field-height, 24px);
-    --_field-padding-inline-start: var(--forge-field-padding-inline-start, 8px);
-    --_field-padding-inline-end: var(--forge-field-padding-inline-end, 4px);
-  }
-  .forge-field--dense:has(label) label, .forge-field--extra-small:has(label) label {
-    display: none;
-  }
-  .forge-field--small {
-    --_field-height: var(--forge-field-height, 32px);
-  }
-  .forge-field--small:has(label) {
-    --_field-height: var(--forge-field-height, 40px);
-  }
-  .forge-field--large {
-    --_field-height: var(--forge-field-height, 48px);
-  }
-  .forge-field--large:has(label) {
-    --_field-height: var(--forge-field-height, 56px);
-  }
-  .forge-field--extra-large {
-    --_field-height: var(--forge-field-height, 56px);
-  }
-  .forge-field--extra-large:has(label) {
-    --_field-height: var(--forge-field-height, 64px);
-  }
-}
-@layer disabled {
-  .forge-field:has(:where(input, textarea, select, .forge-field__input):disabled) {
-    --_field-background: var(--_field-disabled-background);
-    --_field-disableable-cursor: var(--forge-field-disableable-cursor, not-allowed);
-    --_field-disableable-opacity: var(--forge-field-disableable-opacity, var(--_field-disabled-opacity));
-  }
-  .forge-field:has(:where(input, textarea, select, .forge-field__input):disabled) :where(input, textarea, select, .forge-field__input):disabled {
-    cursor: not-allowed;
-  }
-}
-@layer invalid {
-  .forge-field--invalid, .forge-field:has(:where(input, textarea, select, .forge-field__input):invalid) {
-    outline-color: var(--forge-theme-error, #b00020);
-  }
-  .forge-field--invalid :not(:where(input, textarea, select, .forge-field__input)), .forge-field:has(:where(input, textarea, select, .forge-field__input):invalid) :not(:where(input, textarea, select, .forge-field__input)) {
-    color: var(--forge-theme-on-error-container, #5f0011);
-  }
-  .forge-field--invalid.forge-field:has(:where(input, textarea, select, .forge-field__input):focus), .forge-field:has(:where(input, textarea, select, .forge-field__input):invalid).forge-field:has(:where(input, textarea, select, .forge-field__input):focus) {
-    --forge-focus-indicator-color: var(--forge-theme-error, #b00020);
-    --forge-focus-indicator-outward-offset: calc(var(--_field-outline-width) * -1);
-  }
-  .forge-field--invalid label, .forge-field:has(:where(input, textarea, select, .forge-field__input):invalid) label {
-    color: var(--forge-theme-error, #b00020);
-  }
-  .forge-field--invalid.forge-field--tonal, .forge-field:has(:where(input, textarea, select, .forge-field__input):invalid).forge-field--tonal {
-    background: var(--forge-theme-error-container-low, #f6e0e4);
-  }
-  .forge-field--invalid.forge-field--tonal:hover:not(:has(:where(input, textarea, select, .forge-field__input):disabled)), .forge-field:has(:where(input, textarea, select, .forge-field__input):invalid).forge-field--tonal:hover:not(:has(:where(input, textarea, select, .forge-field__input):disabled)) {
-    background: var(--forge-theme-error-container-minimum, #fcf5f6);
-  }
-}
+@keyframes float-in-label-animation{from{translate:0;opacity:40%}to{translate:var(--_field-floating-label-translation);opacity:100%}}@keyframes float-out-label-animation{from{translate:var(--_field-floating-label-translation);opacity:40%}to{translate:0;opacity:100%}}@keyframes multiline-inset-label-background-animation{from{opacity:0%}to{opacity:100%}}@layer base, textarea, density, invalid, disabled;@layer base{.forge-field{--_field-shape:var(--forge-field-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));--_field-outline-style:var(--forge-field-outline-style, solid);--_field-outline-width:var(--forge-field-outline-width, var(--forge-border-thin, 1px));--_field-height:var(--forge-field-height, 40px);--_field-inset-height:var(--forge-field-inset-height, 48px);--_field-background:var(--forge-field-background, transparent);--_field-padding-inline:var(--forge-field-padding-inline, 12px);--_field-disabled-background:var(--forge-field-disabled-background, var(--forge-theme-surface-container-low, #ebebeb));--_field-disabled-opacity:var(--forge-field-disabled-opacity, 0.38);--_field-placeholder-color:var(--forge-field-placeholder-color, var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6)))}.forge-field{position:relative;display:flex;align-items:center;gap:var(--forge-spacing-xsmall, 8px);box-shadow:var(--_field-elevation);padding-inline:var(--_field-padding-inline);border-radius:var(--_field-shape);outline-style:var(--_field-outline-style);outline-width:var(--_field-outline-width);outline-color:var(--forge-theme-outline-low, #9e9e9e);outline-offset:calc(var(--_field-outline-width)*-1);background:var(--_field-background);opacity:var(--_field-disableable-opacity);cursor:var(--_field-disableable-cursor)}.forge-field:hover:not(:has(:where(input,textarea,select,.forge-field__input):disabled)){outline-color:var(--forge-theme-outline-high, #212121)}.forge-field :where(input,textarea,select,.forge-field__input){box-sizing:border-box;margin:0;outline:none;border:none;background-color:rgba(0,0,0,0);padding-block:0;padding-inline:0;inline-size:100%;block-size:100%;color:inherit;font:inherit;font-size:var(--_field-font-size);text-overflow:ellipsis;padding-block-start:0;padding-block-end:0;transition:padding-block var(--_field-floating-animation-duration) var(--_field-floating-animation-timing);display:flex;block-size:var(--_field-height);inline-size:100%;overflow:hidden;color:var(--forge-theme-text-high, rgba(0, 0, 0, 0.87));background:rgba(0,0,0,0);appearance:none}.forge-field :where(input,textarea,select,.forge-field__input)::placeholder{color:var(--_field-placeholder-color)}.forge-field--plain{--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--forge-theme-surface, #ffffff));--_field-multiline-inset-label-background-hover:var(--forge-field-multiline-inset-label-background-hover, var(--forge-theme-surface, #ffffff));--_field-outline-color:var(--forge-field-outline-color, transparent);--_field-outline-color-hover:var(--forge-field-outline-color-hover, transparent);--_field-inner-border-display:var(--forge-field-inner-border-display, none);--_field-padding-inline:var(--forge-field-padding-inline, 0);--_field-surface-display:var(--forge-field-surface-display, none);outline-width:0}.forge-field--tonal{--_field-outline-color:var(--forge-field-outline-color, transparent);--_field-outline-color-hover:var(--forge-field-outline-color-hover, transparent);--_field-inner-border-block-size:var(--forge-field-inner-border-block-size, calc(100% - 8px));--_field-background:var(--_field-tonal-background);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-background));--_field-hover-background:var(--forge-field-hover-background, tonal-background-hover);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-multiline-inset-label-tonal-background));outline-width:0;background:var(--forge-theme-primary-container-low, #e8eaf6)}.forge-field--tonal:hover:not(:has(:where(input,textarea,select,.forge-field__input):disabled)){background:var(--forge-theme-surface-container-minimum, #f5f5f5)}.forge-field--filled{--_field-background:var(--_field-filled-background);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-background));background:var(--forge-theme-surface-bright, #ffffff)}.forge-field--raised{--_field-elevation:var(--forge-field-elevation, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_field-elevation-active:var(--forge-field-elevation-active, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));--_field-outline-color:var(--forge-field-outline-color, transparent);--_field-outline-color-hover:var(--forge-field-outline-color-hover, transparent);--_field-inner-border-block-size:var(--forge-field-inner-border-block-size, calc(100% - 8px));--_field-background:var(--_field-filled-background);--_field-multiline-inset-label-background:var(--forge-field-multiline-inset-label-background, var(--_field-background));outline-width:0}.forge-field--raised:hover:not(:has(:where(input,textarea,select,.forge-field__input):disabled)){box-shadow:var(--_field-elevation-active)}.forge-field--rounded{--_field-shape:var(--forge-field-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_field-padding-inline:var(--forge-field-padding-inline, var(--_field-rounded-container-padding-inline-start))}.forge-field:has(label){--_field-floating-label-translation:var(--forge-field-floating-label-translation, 0 calc(calc(calc(max(var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375))), var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)))) / 2) + calc((var(--_field-height) - 56px) / 8)) * -1));display:grid;grid-template-columns:auto 1fr auto;gap:0;block-size:var(--_field-height);--_field-height:var(--forge-field-height, 48px)}.forge-field:has(label) label{position:absolute;grid-column:2;pointer-events:none;color:var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6))}.forge-field:has(label).forge-field--rounded{padding-inline:var(--forge-spacing-large, 24px)}@keyframes forge-field-float-label-in{from{transform:translateY(15%);opacity:0}to{transform:translateY(0);opacity:1}}.forge-field:has(label).forge-field--float-label-in label{animation:forge-field-float-label-in var(--forge-animation-duration-short4, 200ms) var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)) forwards}@keyframes forge-field-float-label-out{from{opacity:0}to{opacity:1}}.forge-field:has(label).forge-field--float-label-out label{animation:forge-field-float-label-out var(--forge-animation-duration-short4, 200ms) var(--forge-animation-easing-accelerate, cubic-bezier(0.3, 0, 1, 1)) forwards}.forge-field:has(label).forge-field--float-label label,.forge-field:has(label):has(:where(:where(input,textarea,select,.forge-field__input):autofill,:where(input,textarea,select,.forge-field__input):placeholder-shown)) label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label2-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));font-size:var(--forge-typography-label2-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, 0.8125)));font-weight:var(--forge-typography-label2-font-weight, 400);line-height:var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label2-letter-spacing, 0.0096153846em);text-transform:var(--forge-typography-label2-text-transform, inherit);text-decoration:var(--forge-typography-label2-text-decoration, inherit);translate:var(--_field-floating-label-translation)}.forge-field:has(label).forge-field--float-label:not(.forge-field--extra-small) :where(input,textarea,select,.forge-field__input),.forge-field:has(label):has(:where(:where(input,textarea,select,.forge-field__input):autofill,:where(input,textarea,select,.forge-field__input):placeholder-shown)):not(.forge-field--extra-small) :where(input,textarea,select,.forge-field__input){padding-block-start:calc(calc(calc(max(var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375))), var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)))) / 2) + calc((var(--_field-height) - 56px) / 8))*2) !important}.forge-field:has(label) :where(input,textarea,select,.forge-field__input){grid-column:2;block-size:var(--_field-height)}.forge-field:has(label) :where(input,textarea,select,.forge-field__input)~*{grid-column:3;margin-inline-start:var(--forge-spacing-xsmall, 8px)}.forge-field:has(label)>:not(:where(input,textarea,select,.forge-field__input)~*,:where(input,textarea,select,.forge-field__input),label){grid-column:1;margin-inline-end:var(--forge-spacing-xsmall, 8px)}@keyframes forge-focus-indicator-outward-grow{from{outline-width:0}to{outline-width:var(--_focus-indicator-active-width)}}@keyframes forge-focus-indicator-outward-shrink{from{outline-width:var(--_focus-indicator-active-width)}}@keyframes forge-focus-indicator-inward-grow{from{border-width:0}to{border-width:var(--_focus-indicator-active-width)}}@keyframes forge-focus-indicator-inward-shrink{from{border-width:var(--_focus-indicator-active-width)}}.forge-field:has(:where(input,textarea,select,.forge-field__input):focus){outline:none}.forge-field:has(:where(input,textarea,select,.forge-field__input):focus)::after{--_focus-indicator-display:var(--forge-focus-indicator-display, flex);--_focus-indicator-width:var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));--_focus-indicator-active-width:var(--forge-focus-indicator-active-width, 6px);--_focus-indicator-color:var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_focus-indicator-shape:var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));--_focus-indicator-duration:var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));--_focus-indicator-easing:var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));--_focus-indicator-shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));--_focus-indicator-shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));--_focus-indicator-shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));--_focus-indicator-shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));--_focus-indicator-outward-offset:var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));--_focus-indicator-inward-offset:var(--forge-focus-indicator-inward-offset, 0px);--_focus-indicator-offset-block:var(--forge-focus-indicator-offset-block, 0);--_focus-indicator-offset-inline:var(--forge-focus-indicator-offset-inline, 0);animation-delay:0s,calc(var(--_focus-indicator-duration)*.25);animation-duration:calc(var(--_focus-indicator-duration)*.25),calc(var(--_focus-indicator-duration)*.75);animation-timing-function:var(--_focus-indicator-easing);box-sizing:border-box;color:var(--_focus-indicator-color);display:none;pointer-events:none;position:absolute;margin-block:var(--_focus-indicator-offset-block);margin-inline:var(--_focus-indicator-offset-inline);animation-name:forge-focus-indicator-outward-grow,forge-focus-indicator-outward-shrink;border-end-end-radius:calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));border-end-start-radius:calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));border-start-end-radius:calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));border-start-start-radius:calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));inset:calc(-1*var(--_focus-indicator-outward-offset));outline:var(--_focus-indicator-width) solid currentColor;content:"";display:block;border-radius:inherit}.forge-field:has(:where(input,textarea,select,.forge-field__input):focus){--forge-focus-indicator-color: var(--forge-theme-primary, #3f51b5);--forge-focus-indicator-outward-offset: 0px}}@layer textarea{.forge-field:has(textarea:only-child){padding-inline:0}.forge-field:has(textarea:only-child) textarea{padding-inline:var(--_field-padding-inline)}.forge-field:has(textarea){align-items:start;block-size:fit-content}.forge-field:has(textarea) textarea{padding-block-start:calc((var(--_field-height) - var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375))))/2);padding-block-end:calc(calc(calc(max(var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375))), var(--forge-typography-label2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)))) / 2) + calc((var(--_field-height) - 56px) / 8)) + (var(--_field-height) - var(--forge-typography-body2-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.375))))/2);resize:vertical;block-size:fit-content}.forge-field:has(textarea) *:not(textarea){margin-block-start:var(--forge-spacing-xsmall, 8px)}}@layer density{.forge-field--dense,.forge-field--extra-small{--_field-height:var(--forge-field-height, 24px);--_field-padding-inline-start:var(--forge-field-padding-inline-start, 8px);--_field-padding-inline-end:var(--forge-field-padding-inline-end, 4px)}.forge-field--dense:has(label) label,.forge-field--extra-small:has(label) label{display:none}.forge-field--small{--_field-height:var(--forge-field-height, 32px)}.forge-field--small:has(label){--_field-height:var(--forge-field-height, 40px)}.forge-field--large{--_field-height:var(--forge-field-height, 48px)}.forge-field--large:has(label){--_field-height:var(--forge-field-height, 56px)}.forge-field--extra-large{--_field-height:var(--forge-field-height, 56px)}.forge-field--extra-large:has(label){--_field-height:var(--forge-field-height, 64px)}}@layer disabled{.forge-field:has(:where(input,textarea,select,.forge-field__input):disabled){--_field-background:var(--_field-disabled-background);--_field-disableable-cursor:var(--forge-field-disableable-cursor, not-allowed);--_field-disableable-opacity:var(--forge-field-disableable-opacity, var(--_field-disabled-opacity))}.forge-field:has(:where(input,textarea,select,.forge-field__input):disabled) :where(input,textarea,select,.forge-field__input):disabled{cursor:not-allowed}}@layer invalid{.forge-field--invalid,.forge-field:has(:where(input,textarea,select,.forge-field__input):invalid){outline-color:var(--forge-theme-error, #b00020)}.forge-field--invalid :not(:where(input,textarea,select,.forge-field__input)),.forge-field:has(:where(input,textarea,select,.forge-field__input):invalid) :not(:where(input,textarea,select,.forge-field__input)){color:var(--forge-theme-on-error-container, #5f0011)}.forge-field--invalid.forge-field:has(:where(input,textarea,select,.forge-field__input):focus),.forge-field:has(:where(input,textarea,select,.forge-field__input):invalid).forge-field:has(:where(input,textarea,select,.forge-field__input):focus){--forge-focus-indicator-color: var(--forge-theme-error, #b00020);--forge-focus-indicator-outward-offset: calc(var(--_field-outline-width) * -1)}.forge-field--invalid label,.forge-field:has(:where(input,textarea,select,.forge-field__input):invalid) label{color:var(--forge-theme-error, #b00020)}.forge-field--invalid.forge-field--tonal,.forge-field:has(:where(input,textarea,select,.forge-field__input):invalid).forge-field--tonal{background:var(--forge-theme-error-container-low, #f6e0e4)}.forge-field--invalid.forge-field--tonal:hover:not(:has(:where(input,textarea,select,.forge-field__input):disabled)),.forge-field:has(:where(input,textarea,select,.forge-field__input):invalid).forge-field--tonal:hover:not(:has(:where(input,textarea,select,.forge-field__input):disabled)){background:var(--forge-theme-error-container-minimum, #fcf5f6)}}

package/dist/floating-action-button/forge-floating-action-button.css

@@ -1,216 +1,6 @@
 /**
  * @license
- * Copyright Tyler Technologies, Inc. 
+ * Copyright Tyler Technologies, Inc.
  * License: Apache-2.0
  */
-/* prettier-ignore */
-.forge-fab {
-  --_fab-display: var(--forge-fab-display, inline-flex);
-  --_fab-gap: var(--forge-fab-gap, var(--forge-spacing-xsmall, 8px));
-  --_fab-background: var(--forge-fab-background, var(--forge-theme-secondary, #ffc107));
-  --_fab-color: var(--forge-fab-color, var(--forge-theme-on-secondary, #000000));
-  --_fab-size: var(--forge-fab-size, 56px);
-  --_fab-padding: var(--forge-fab-padding, var(--forge-spacing-xsmall, 8px));
-  --_fab-shadow: var(--forge-fab-shadow, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));
-  --_fab-hover-shadow: var(--forge-fab-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));
-  --_fab-active-shadow: var(--forge-fab-active-shadow, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));
-  --_fab-lowered-shadow: var(--forge-fab-lowered-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));
-  --_fab-lowered-hover-shadow: var(--forge-fab-lowered-hover-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));
-  --_fab-lowered-active-shadow: var(--forge-fab-lowered-active-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));
-  --_fab-transition-duration: var(--forge-fab-transition-duration, var(--forge-animation-duration-short3, 150ms));
-  --_fab-transition-timing: var(--forge-fab-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));
-  --_fab-shape: var(--forge-fab-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));
-  --_fab-shape-start-start: var(--forge-fab-shape-start-start, var(--_fab-shape));
-  --_fab-shape-start-end: var(--forge-fab-shape-start-end, var(--_fab-shape));
-  --_fab-shape-end-start: var(--forge-fab-shape-end-start, var(--_fab-shape));
-  --_fab-shape-end-end: var(--forge-fab-shape-end-end, var(--_fab-shape));
-  --_fab-extended-padding: var(--forge-fab-extended-padding, var(--forge-spacing-medium-large, 20px));
-  --_fab-extended-min-width: var(--forge-fab-extended-min-width, 96px);
-  --_fab-density-small-size: var(--forge-fab-density-small-size, 40px);
-  --_fab-density-medium-size: var(--forge-fab-density-medium-size, var(--_fab-size));
-  --_fab-density-large-size: var(--forge-fab-density-large-size, 96px);
-  --_fab-disabled-cursor: var(--forge-fab-disabled-cursor, not-allowed);
-  --_fab-disabled-background: var(--forge-fab-disabled-background, var(--forge-theme-surface-container, #e0e0e0));
-  --_fab-disabled-color: var(--forge-fab-disabled-color, var(--forge-theme-on-surface-container, #000000));
-  --_fab-disabled-opacity: var(--forge-fab-disabled-opacity, 0.38);
-}
-
-.forge-fab {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: var(--forge-typography-button-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));
-  font-size: var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, 0.875)));
-  font-weight: var(--forge-typography-button-font-weight, 500);
-  line-height: var(--forge-typography-button-line-height, normal);
-  letter-spacing: var(--forge-typography-button-letter-spacing, 0.0714285714em);
-  text-transform: var(--forge-typography-button-text-transform, inherit);
-  text-decoration: var(--forge-typography-button-text-decoration, inherit);
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--_fab-gap);
-  z-index: 0;
-  background: var(--_fab-background);
-  color: var(--_fab-color);
-  cursor: pointer;
-  box-shadow: var(--_fab-shadow);
-  box-sizing: border-box;
-  height: var(--_fab-density-medium-size);
-  min-width: var(--_fab-density-medium-size);
-  padding-inline: var(--_fab-padding);
-  border-width: medium;
-  border-style: none;
-  border-color: currentColor;
-  border-top-left-radius: var(--_fab-shape-start-start);
-  border-top-right-radius: var(--_fab-shape-start-end);
-  border-bottom-left-radius: var(--_fab-shape-end-start);
-  border-bottom-right-radius: var(--_fab-shape-end-end);
-  user-select: none;
-  white-space: nowrap;
-  transition-property: box-shadow, background, color;
-  transition-duration: var(--_fab-transition-duration);
-  transition-timing-function: var(--_fab-transition-timing);
-}
-.forge-fab:hover {
-  --_fab-shadow: var(--_fab-hover-shadow);
-}
-.forge-fab:active {
-  --_fab-shadow: var(--_fab-active-shadow);
-}
-.forge-fab:not(:disabled) {
-  --_state-layer-display: var(--forge-state-layer-display, flex);
-  --_state-layer-color: var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));
-  --_state-layer-hover-color: var(--forge-state-layer-hover-color, var(--_state-layer-color));
-  --_state-layer-hover-opacity: var(--forge-state-layer-hover-opacity, 0.08);
-  --_state-layer-pressed-color: var(--forge-state-layer-pressed-color, var(--_state-layer-color));
-  --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.12);
-  --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);
-  --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);
-  --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);
-}
-.forge-fab:not(:disabled)::before {
-  opacity: 0;
-  position: absolute;
-  backface-visibility: hidden;
-  transform: translateZ(0);
-  background-color: var(--_state-layer-hover-color);
-  inset: 0;
-  transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;
-  --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 100ms);
-  content: "";
-  opacity: 0;
-  border-radius: inherit;
-}
-.forge-fab:not(:disabled):hover::before {
-  background-color: var(--_state-layer-hover-color);
-  opacity: var(--_state-layer-hover-opacity);
-}
-.forge-fab:not(:disabled):active::before {
-  opacity: var(--_state-layer-pressed-opacity);
-  transition-duration: var(--_state-layer-pressed-duration);
-  --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);
-}
-@keyframes forge-focus-indicator-outward-grow {
-  from {
-    outline-width: 0;
-  }
-  to {
-    outline-width: var(--_focus-indicator-active-width);
-  }
-}
-@keyframes forge-focus-indicator-outward-shrink {
-  from {
-    outline-width: var(--_focus-indicator-active-width);
-  }
-}
-@keyframes forge-focus-indicator-inward-grow {
-  from {
-    border-width: 0;
-  }
-  to {
-    border-width: var(--_focus-indicator-active-width);
-  }
-}
-@keyframes forge-focus-indicator-inward-shrink {
-  from {
-    border-width: var(--_focus-indicator-active-width);
-  }
-}
-.forge-fab:not(:disabled) {
-  outline: none;
-}
-.forge-fab:not(:disabled):focus-visible::after {
-  --_focus-indicator-display: var(--forge-focus-indicator-display, flex);
-  --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));
-  --_focus-indicator-active-width: var(--forge-focus-indicator-active-width, 6px);
-  --_focus-indicator-color: var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));
-  --_focus-indicator-shape: var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));
-  --_focus-indicator-duration: var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));
-  --_focus-indicator-easing: var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));
-  --_focus-indicator-shape-start-start: var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));
-  --_focus-indicator-shape-start-end: var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));
-  --_focus-indicator-shape-end-end: var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));
-  --_focus-indicator-shape-end-start: var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));
-  --_focus-indicator-outward-offset: var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));
-  --_focus-indicator-inward-offset: var(--forge-focus-indicator-inward-offset, 0px);
-  --_focus-indicator-offset-block: var(--forge-focus-indicator-offset-block, 0);
-  --_focus-indicator-offset-inline: var(--forge-focus-indicator-offset-inline, 0);
-}
-.forge-fab:not(:disabled):focus-visible::after {
-  animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);
-  animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);
-  animation-timing-function: var(--_focus-indicator-easing);
-  box-sizing: border-box;
-  color: var(--_focus-indicator-color);
-  display: none;
-  pointer-events: none;
-  position: absolute;
-  margin-block: var(--_focus-indicator-offset-block);
-  margin-inline: var(--_focus-indicator-offset-inline);
-  animation-name: forge-focus-indicator-outward-grow, forge-focus-indicator-outward-shrink;
-  border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));
-  border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));
-  border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));
-  border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));
-  inset: calc(-1 * var(--_focus-indicator-outward-offset));
-  outline: var(--_focus-indicator-width) solid currentColor;
-  content: "";
-  display: block;
-}
-.forge-fab:not(:disabled) {
-  --forge-focus-indicator-color: var(--_fab-background);
-  --forge-focus-indicator-shape-start-start: var(--_fab-shape-start-start);
-  --forge-focus-indicator-shape-start-end: var(--_fab-shape-start-end);
-  --forge-focus-indicator-shape-end-start: var(--_fab-shape-end-start);
-  --forge-focus-indicator-shape-end-end: var(--_fab-shape-end-end);
-}
-.forge-fab--extended {
-  --_fab-padding: var(--_fab-extended-padding);
-  min-width: var(--_fab-extended-min-width);
-}
-.forge-fab:disabled {
-  cursor: var(--_fab-disabled-cursor);
-  --_fab-background: var(--_fab-disabled-background);
-  --_fab-color: var(--_fab-disabled-color);
-  pointer-events: none;
-  opacity: var(--_fab-disabled-opacity);
-  pointer-events: auto;
-  cursor: not-allowed;
-}
-.forge-fab--dense, .forge-fab--small {
-  --_fab-size: var(--_fab-density-small-size);
-}
-.forge-fab--large {
-  --_fab-size: var(--_fab-density-large-size);
-  --_fab-shape: var(--forge-fab-shape, calc(var(--forge-shape-extra-large, 16px) * var(--forge-shape-factor, 1)));
-}
-.forge-fab--flat {
-  --_fab-shadow: var(--_fab-lowered-shadow);
-}
-.forge-fab--flat:hover {
-  --_fab-shadow: var(--_fab-lowered-hover-shadow);
-}
-.forge-fab--flat:active {
-  --_fab-shadow: var(--_fab-lowered-active-shadow);
-}
+.forge-fab{--_fab-display:var(--forge-fab-display, inline-flex);--_fab-gap:var(--forge-fab-gap, var(--forge-spacing-xsmall, 8px));--_fab-background:var(--forge-fab-background, var(--forge-theme-secondary, #ffc107));--_fab-color:var(--forge-fab-color, var(--forge-theme-on-secondary, #000000));--_fab-size:var(--forge-fab-size, 56px);--_fab-padding:var(--forge-fab-padding, var(--forge-spacing-xsmall, 8px));--_fab-shadow:var(--forge-fab-shadow, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));--_fab-hover-shadow:var(--forge-fab-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));--_fab-active-shadow:var(--forge-fab-active-shadow, 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12));--_fab-lowered-shadow:var(--forge-fab-lowered-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_fab-lowered-hover-shadow:var(--forge-fab-lowered-hover-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));--_fab-lowered-active-shadow:var(--forge-fab-lowered-active-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12));--_fab-transition-duration:var(--forge-fab-transition-duration, var(--forge-animation-duration-short3, 150ms));--_fab-transition-timing:var(--forge-fab-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_fab-shape:var(--forge-fab-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));--_fab-shape-start-start:var(--forge-fab-shape-start-start, var(--_fab-shape));--_fab-shape-start-end:var(--forge-fab-shape-start-end, var(--_fab-shape));--_fab-shape-end-start:var(--forge-fab-shape-end-start, var(--_fab-shape));--_fab-shape-end-end:var(--forge-fab-shape-end-end, var(--_fab-shape));--_fab-extended-padding:var(--forge-fab-extended-padding, var(--forge-spacing-medium-large, 20px));--_fab-extended-min-width:var(--forge-fab-extended-min-width, 96px);--_fab-density-small-size:var(--forge-fab-density-small-size, 40px);--_fab-density-medium-size:var(--forge-fab-density-medium-size, var(--_fab-size));--_fab-density-large-size:var(--forge-fab-density-large-size, 96px);--_fab-disabled-cursor:var(--forge-fab-disabled-cursor, not-allowed);--_fab-disabled-background:var(--forge-fab-disabled-background, var(--forge-theme-surface-container, #e0e0e0));--_fab-disabled-color:var(--forge-fab-disabled-color, var(--forge-theme-on-surface-container, #000000));--_fab-disabled-opacity:var(--forge-fab-disabled-opacity, 0.38)}.forge-fab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-button-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));font-size:var(--forge-typography-button-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-button-font-size-scale, 0.875)));font-weight:var(--forge-typography-button-font-weight, 500);line-height:var(--forge-typography-button-line-height, normal);letter-spacing:var(--forge-typography-button-letter-spacing, 0.0714285714em);text-transform:var(--forge-typography-button-text-transform, inherit);text-decoration:var(--forge-typography-button-text-decoration, inherit);position:relative;display:inline-flex;justify-content:center;align-items:center;gap:var(--_fab-gap);z-index:0;background:var(--_fab-background);color:var(--_fab-color);cursor:pointer;box-shadow:var(--_fab-shadow);box-sizing:border-box;height:var(--_fab-density-medium-size);min-width:var(--_fab-density-medium-size);padding-inline:var(--_fab-padding);border-width:medium;border-style:none;border-color:currentColor;border-top-left-radius:var(--_fab-shape-start-start);border-top-right-radius:var(--_fab-shape-start-end);border-bottom-left-radius:var(--_fab-shape-end-start);border-bottom-right-radius:var(--_fab-shape-end-end);user-select:none;white-space:nowrap;transition-property:box-shadow,background,color;transition-duration:var(--_fab-transition-duration);transition-timing-function:var(--_fab-transition-timing)}.forge-fab:hover{--_fab-shadow:var(--_fab-hover-shadow)}.forge-fab:active{--_fab-shadow:var(--_fab-active-shadow)}.forge-fab:not(:disabled){--_state-layer-display:var(--forge-state-layer-display, flex);--_state-layer-color:var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));--_state-layer-hover-color:var(--forge-state-layer-hover-color, var(--_state-layer-color));--_state-layer-hover-opacity:var(--forge-state-layer-hover-opacity, 0.08);--_state-layer-pressed-color:var(--forge-state-layer-pressed-color, var(--_state-layer-color));--_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.12);--_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 15ms);--_state-layer-pressed-duration:var(--forge-state-layer-pressed-duration, 105ms);--_state-layer-animation-duration:var(--forge-state-layer-animation-duration, 375ms)}.forge-fab:not(:disabled)::before{opacity:0;position:absolute;backface-visibility:hidden;transform:translateZ(0);background-color:var(--_state-layer-hover-color);inset:0;transition:opacity var(--_state-layer-hover-duration) linear,background-color var(--_state-layer-hover-duration) linear;--_state-layer-hover-duration:var(--forge-state-layer-hover-duration, 100ms);content:"";opacity:0;border-radius:inherit}.forge-fab:not(:disabled):hover::before{background-color:var(--_state-layer-hover-color);opacity:var(--_state-layer-hover-opacity)}.forge-fab:not(:disabled):active::before{opacity:var(--_state-layer-pressed-opacity);transition-duration:var(--_state-layer-pressed-duration);--_state-layer-pressed-opacity:var(--forge-state-layer-pressed-opacity, 0.18)}@keyframes forge-focus-indicator-outward-grow{from{outline-width:0}to{outline-width:var(--_focus-indicator-active-width)}}@keyframes forge-focus-indicator-outward-shrink{from{outline-width:var(--_focus-indicator-active-width)}}@keyframes forge-focus-indicator-inward-grow{from{border-width:0}to{border-width:var(--_focus-indicator-active-width)}}@keyframes forge-focus-indicator-inward-shrink{from{border-width:var(--_focus-indicator-active-width)}}.forge-fab:not(:disabled){outline:none}.forge-fab:not(:disabled):focus-visible::after{--_focus-indicator-display:var(--forge-focus-indicator-display, flex);--_focus-indicator-width:var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));--_focus-indicator-active-width:var(--forge-focus-indicator-active-width, 6px);--_focus-indicator-color:var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_focus-indicator-shape:var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));--_focus-indicator-duration:var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));--_focus-indicator-easing:var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));--_focus-indicator-shape-start-start:var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));--_focus-indicator-shape-start-end:var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));--_focus-indicator-shape-end-end:var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));--_focus-indicator-shape-end-start:var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));--_focus-indicator-outward-offset:var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));--_focus-indicator-inward-offset:var(--forge-focus-indicator-inward-offset, 0px);--_focus-indicator-offset-block:var(--forge-focus-indicator-offset-block, 0);--_focus-indicator-offset-inline:var(--forge-focus-indicator-offset-inline, 0)}.forge-fab:not(:disabled):focus-visible::after{animation-delay:0s,calc(var(--_focus-indicator-duration)*.25);animation-duration:calc(var(--_focus-indicator-duration)*.25),calc(var(--_focus-indicator-duration)*.75);animation-timing-function:var(--_focus-indicator-easing);box-sizing:border-box;color:var(--_focus-indicator-color);display:none;pointer-events:none;position:absolute;margin-block:var(--_focus-indicator-offset-block);margin-inline:var(--_focus-indicator-offset-inline);animation-name:forge-focus-indicator-outward-grow,forge-focus-indicator-outward-shrink;border-end-end-radius:calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));border-end-start-radius:calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));border-start-end-radius:calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));border-start-start-radius:calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));inset:calc(-1*var(--_focus-indicator-outward-offset));outline:var(--_focus-indicator-width) solid currentColor;content:"";display:block}.forge-fab:not(:disabled){--forge-focus-indicator-color: var(--_fab-background);--forge-focus-indicator-shape-start-start: var(--_fab-shape-start-start);--forge-focus-indicator-shape-start-end: var(--_fab-shape-start-end);--forge-focus-indicator-shape-end-start: var(--_fab-shape-end-start);--forge-focus-indicator-shape-end-end: var(--_fab-shape-end-end)}.forge-fab--extended{--_fab-padding:var(--_fab-extended-padding);min-width:var(--_fab-extended-min-width)}.forge-fab:disabled{cursor:var(--_fab-disabled-cursor);--_fab-background:var(--_fab-disabled-background);--_fab-color:var(--_fab-disabled-color);pointer-events:none;opacity:var(--_fab-disabled-opacity);pointer-events:auto;cursor:not-allowed}.forge-fab--dense,.forge-fab--small{--_fab-size:var(--_fab-density-small-size)}.forge-fab--large{--_fab-size:var(--_fab-density-large-size);--_fab-shape:var(--forge-fab-shape, calc(var(--forge-shape-extra-large, 16px) * var(--forge-shape-factor, 1)))}.forge-fab--flat{--_fab-shadow:var(--_fab-lowered-shadow)}.forge-fab--flat:hover{--_fab-shadow:var(--_fab-lowered-hover-shadow)}.forge-fab--flat:active{--_fab-shadow:var(--_fab-lowered-active-shadow)}