@esri/calcite-components 1.0.0-beta.97 → 1.0.0-beta.99

package/dist/collection/components/button/button.css

@@ -69,7 +69,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0.01;
+    --calcite-internal-duration-factor: 0;
   }
 }
 /**
@@ -77,6 +77,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-z-index: 600;
 }
 
 :host([hidden]) {
@@ -104,11 +105,11 @@
   border-radius: 50px;
 }
 
-:host button, 
+:host button,
 :host a {
   outline-color: transparent;
 }
-:host button:focus, 
+:host button:focus,
 :host a:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: 2px;
@@ -116,11 +117,11 @@
 
 :host button,
 :host a {
-  --calcite-button-content-margin: 0.5rem;
-  --calcite-button-padding-x: 7px;
-  --calcite-button-padding-y: 3px;
-  padding-block: var(--calcite-button-padding-y);
-  padding-inline: var(--calcite-button-padding-x);
+  --calcite-button-content-margin-internal: 0.5rem;
+  --calcite-button-padding-x-internal: 7px;
+  --calcite-button-padding-y-internal: 3px;
+  padding-block: var(--calcite-button-padding-y-internal);
+  padding-inline: var(--calcite-button-padding-x-internal);
   position: relative;
   box-sizing: border-box;
   display: flex;
@@ -141,7 +142,7 @@
   text-decoration-line: none;
   transition: color var(--calcite-animation-timing) ease-in-out, background-color var(--calcite-animation-timing) ease-in-out, box-shadow var(--calcite-animation-timing) ease-in-out, outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;
 }
-:host button:hover, 
+:host button:hover,
 :host a:hover {
   text-decoration-line: none;
 }
@@ -149,7 +150,7 @@
 .content {
   display: flex;
   flex-basis: auto;
-  margin-inline: var(--calcite-button-content-margin);
+  margin-inline: var(--calcite-button-content-margin-internal);
 }
 
 .icon-start-empty .content {
@@ -162,12 +163,12 @@
 
 :host([scale=m]) button,
 :host([scale=m]) a {
-  --calcite-button-content-margin: 0.75rem;
+  --calcite-button-content-margin-internal: 0.75rem;
 }
 
 :host([scale=l]) button,
 :host([scale=l]) a {
-  --calcite-button-content-margin: 1rem;
+  --calcite-button-content-margin-internal: 1rem;
 }
 
 :host([width=auto]) {
@@ -182,22 +183,22 @@
   inline-size: 100%;
 }
 
-:host([alignment=center]:not([width=auto])) a, 
+:host([alignment=center]:not([width=auto])) a,
 :host([alignment=center]:not([width=auto])) button {
   justify-content: center;
 }
 
-:host([alignment=start]:not([width=auto])) a, 
+:host([alignment=start]:not([width=auto])) a,
 :host([alignment=start]:not([width=auto])) button {
   justify-content: flex-start;
 }
 
-:host([alignment=end]:not([width=auto])) a, 
+:host([alignment=end]:not([width=auto])) a,
 :host([alignment=end]:not([width=auto])) button {
   justify-content: flex-end;
 }
 
-:host([alignment*=space-between]:not([width=auto])) a, 
+:host([alignment*=space-between]:not([width=auto])) a,
 :host([alignment*=space-between]:not([width=auto])) button {
   justify-content: space-between;
 }
@@ -220,7 +221,7 @@
 
 :host([alignment=center]) a:not(.content--slotted) .icon--start + .icon--end,
 :host([alignment=center]) button:not(.content--slotted) .icon--start + .icon--end {
-  margin-inline-start: var(--calcite-button-content-margin);
+  margin-inline-start: var(--calcite-button-content-margin-internal);
 }
 
 .icon {
@@ -240,7 +241,7 @@
 :host([loading]) {
   pointer-events: none;
 }
-:host([loading]) button, 
+:host([loading]) button,
 :host([loading]) a {
   pointer-events: none;
   opacity: var(--calcite-ui-opacity-disabled);
@@ -288,385 +289,341 @@
 
 :host([loading]) button.content--slotted .calcite-button--loader calcite-loader,
 :host([loading]) a.content--slotted .calcite-button--loader calcite-loader {
-  margin-inline-end: var(--calcite-button-content-margin);
+  margin-inline-end: var(--calcite-button-content-margin-internal);
 }
-:host([loading]) button:not(.content--slotted) .icon--start, 
-:host([loading]) button:not(.content--slotted) .icon--end, 
-:host([loading]) a:not(.content--slotted) .icon--start, 
+:host([loading]) button:not(.content--slotted) .icon--start,
+:host([loading]) button:not(.content--slotted) .icon--end,
+:host([loading]) a:not(.content--slotted) .icon--start,
 :host([loading]) a:not(.content--slotted) .icon--end {
   display: none;
 }
 
-:host([appearance=solid]) button, 
-:host([appearance=solid]) a {
+:host([appearance]) button,
+:host([appearance]) a {
   border-width: 1px;
   border-style: solid;
   border-color: transparent;
 }
 
-:host([color=blue]) button, 
-:host([color=blue]) a {
+:host([kind=brand]) button,
+:host([kind=brand]) a {
   background-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-text-inverse);
 }
-:host([color=blue]) button:hover,  :host([color=blue]) button:focus, 
-:host([color=blue]) a:hover, 
-:host([color=blue]) a:focus {
+:host([kind=brand]) button:hover, :host([kind=brand]) button:focus,
+:host([kind=brand]) a:hover,
+:host([kind=brand]) a:focus {
   background-color: var(--calcite-ui-brand-hover);
 }
-:host([color=blue]) button:active, 
-:host([color=blue]) a:active {
+:host([kind=brand]) button:active,
+:host([kind=brand]) a:active {
   background-color: var(--calcite-ui-brand-press);
 }
-:host([color=blue]) button calcite-loader, 
-:host([color=blue]) a calcite-loader {
+:host([kind=brand]) button calcite-loader,
+:host([kind=brand]) a calcite-loader {
   color: var(--calcite-ui-text-inverse);
 }
 
-:host([color=red]) button, 
-:host([color=red]) a {
+:host([kind=danger]) button,
+:host([kind=danger]) a {
   background-color: var(--calcite-ui-danger);
   color: var(--calcite-ui-text-inverse);
 }
-:host([color=red]) button:hover,  :host([color=red]) button:focus, 
-:host([color=red]) a:hover, 
-:host([color=red]) a:focus {
+:host([kind=danger]) button:hover, :host([kind=danger]) button:focus,
+:host([kind=danger]) a:hover,
+:host([kind=danger]) a:focus {
   background-color: var(--calcite-ui-danger-hover);
 }
-:host([color=red]) button:active, 
-:host([color=red]) a:active {
+:host([kind=danger]) button:active,
+:host([kind=danger]) a:active {
   background-color: var(--calcite-ui-danger-press);
 }
-:host([color=red]) button calcite-loader, 
-:host([color=red]) a calcite-loader {
+:host([kind=danger]) button calcite-loader,
+:host([kind=danger]) a calcite-loader {
   color: var(--calcite-ui-text-inverse);
 }
 
-:host([color=neutral]) button, 
-:host([color=neutral]) a {
+:host([kind=neutral]) button,
+:host([kind=neutral]) a {
   background-color: var(--calcite-ui-foreground-3);
   color: var(--calcite-ui-text-1);
 }
-:host([color=neutral]) button:hover,  :host([color=neutral]) button:focus, 
-:host([color=neutral]) a:hover, 
-:host([color=neutral]) a:focus {
+:host([kind=neutral]) button:hover, :host([kind=neutral]) button:focus,
+:host([kind=neutral]) a:hover,
+:host([kind=neutral]) a:focus {
   background-color: var(--calcite-ui-foreground-2);
 }
-:host([color=neutral]) button:active, 
-:host([color=neutral]) a:active {
+:host([kind=neutral]) button:active,
+:host([kind=neutral]) a:active {
   background-color: var(--calcite-ui-foreground-1);
 }
-:host([color=neutral]) button calcite-loader, 
-:host([color=neutral]) a calcite-loader {
+:host([kind=neutral]) button calcite-loader,
+:host([kind=neutral]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([color=inverse]) button, 
-:host([color=inverse]) a {
+:host([kind=inverse]) button,
+:host([kind=inverse]) a {
   color: var(--calcite-ui-text-inverse);
   background-color: var(--calcite-ui-inverse);
 }
-:host([color=inverse]) button:hover, :host([color=inverse]) button:focus,
-:host([color=inverse]) a:hover,
-:host([color=inverse]) a:focus {
+:host([kind=inverse]) button:hover, :host([kind=inverse]) button:focus,
+:host([kind=inverse]) a:hover,
+:host([kind=inverse]) a:focus {
   background-color: var(--calcite-ui-inverse-hover);
 }
-:host([color=inverse]) button:active,
-:host([color=inverse]) a:active {
+:host([kind=inverse]) button:active,
+:host([kind=inverse]) a:active {
   background-color: var(--calcite-ui-inverse-press);
 }
-:host([color=inverse]) button calcite-loader, 
-:host([color=inverse]) a calcite-loader {
+:host([kind=inverse]) button calcite-loader,
+:host([kind=inverse]) a calcite-loader {
   color: var(--calcite-ui-text-inverse);
 }
 
-:host([appearance=outline]) button, 
-:host([appearance=outline]) a {
+:host([appearance=outline-fill]) button,
+:host([appearance=outline-fill]) a {
   border-width: 1px;
   border-style: solid;
   background-color: var(--calcite-ui-foreground-1);
   box-shadow: inset 0 0 0 1px transparent;
 }
 
-:host([appearance=outline][color=blue]) button, 
-:host([appearance=outline][color=blue]) a {
+:host([appearance=outline-fill][kind=brand]) button,
+:host([appearance=outline-fill][kind=brand]) a {
   border-color: var(--calcite-ui-brand);
   background-color: var(--calcite-ui-foreground-1);
   color: var(--calcite-ui-brand);
 }
-:host([appearance=outline][color=blue]) button:hover, 
-:host([appearance=outline][color=blue]) a:hover {
+:host([appearance=outline-fill][kind=brand]) button:hover,
+:host([appearance=outline-fill][kind=brand]) a:hover {
   border-color: var(--calcite-ui-brand-hover);
   color: var(--calcite-ui-brand-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand-hover);
 }
-:host([appearance=outline][color=blue]) button:focus, 
-:host([appearance=outline][color=blue]) a:focus {
+:host([appearance=outline-fill][kind=brand]) button:focus,
+:host([appearance=outline-fill][kind=brand]) a:focus {
   border-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-brand);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
 }
-:host([appearance=outline][color=blue]) button:active, 
-:host([appearance=outline][color=blue]) a:active {
+:host([appearance=outline-fill][kind=brand]) button:active,
+:host([appearance=outline-fill][kind=brand]) a:active {
   border-color: var(--calcite-ui-brand-press);
   color: var(--calcite-ui-brand-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand-press);
 }
-:host([appearance=outline][color=blue]) button calcite-loader,
-:host([appearance=outline][color=blue]) a calcite-loader {
+:host([appearance=outline-fill][kind=brand]) button calcite-loader,
+:host([appearance=outline-fill][kind=brand]) a calcite-loader {
   color: var(--calcite-ui-brand);
 }
 
-:host([appearance=outline][color=red]) button, 
-:host([appearance=outline][color=red]) a {
+:host([appearance=outline-fill][kind=danger]) button,
+:host([appearance=outline-fill][kind=danger]) a {
   border-color: var(--calcite-ui-danger);
   background-color: var(--calcite-ui-foreground-1);
   color: var(--calcite-ui-danger);
 }
-:host([appearance=outline][color=red]) button:hover, 
-:host([appearance=outline][color=red]) a:hover {
+:host([appearance=outline-fill][kind=danger]) button:hover,
+:host([appearance=outline-fill][kind=danger]) a:hover {
   border-color: var(--calcite-ui-danger-hover);
   color: var(--calcite-ui-danger-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-danger-hover);
 }
-:host([appearance=outline][color=red]) button:focus, 
-:host([appearance=outline][color=red]) a:focus {
+:host([appearance=outline-fill][kind=danger]) button:focus,
+:host([appearance=outline-fill][kind=danger]) a:focus {
   border-color: var(--calcite-ui-danger);
   color: var(--calcite-ui-danger);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-danger);
 }
-:host([appearance=outline][color=red]) button:active, 
-:host([appearance=outline][color=red]) a:active {
+:host([appearance=outline-fill][kind=danger]) button:active,
+:host([appearance=outline-fill][kind=danger]) a:active {
   border-color: var(--calcite-ui-danger-press);
   color: var(--calcite-ui-danger-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-danger-press);
 }
-:host([appearance=outline][color=red]) button calcite-loader,
-:host([appearance=outline][color=red]) a calcite-loader {
+:host([appearance=outline-fill][kind=danger]) button calcite-loader,
+:host([appearance=outline-fill][kind=danger]) a calcite-loader {
   color: var(--calcite-ui-danger);
 }
 
-:host([appearance=outline][color=neutral]) button, 
-:host([appearance=outline][color=neutral]) a {
+:host([appearance=outline-fill][kind=neutral]) button,
+:host([appearance=outline-fill][kind=neutral]) a {
   background-color: var(--calcite-ui-foreground-1);
   color: var(--calcite-ui-text-1);
   border-color: var(--calcite-ui-foreground-3);
 }
-:host([appearance=outline][color=neutral]) button:hover,
-:host([appearance=outline][color=neutral]) a:hover {
+:host([appearance=outline-fill][kind=neutral]) button:hover,
+:host([appearance=outline-fill][kind=neutral]) a:hover {
   box-shadow: inset 0 0 0 1px var(--calcite-ui-foreground-3);
 }
-:host([appearance=outline][color=neutral]) button:focus,
-:host([appearance=outline][color=neutral]) a:focus {
+:host([appearance=outline-fill][kind=neutral]) button:focus,
+:host([appearance=outline-fill][kind=neutral]) a:focus {
   box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
 }
-:host([appearance=outline][color=neutral]) button:active,
-:host([appearance=outline][color=neutral]) a:active {
+:host([appearance=outline-fill][kind=neutral]) button:active,
+:host([appearance=outline-fill][kind=neutral]) a:active {
   box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
 }
-:host([appearance=outline][color=neutral]) button calcite-loader, 
-:host([appearance=outline][color=neutral]) a calcite-loader {
+:host([appearance=outline-fill][kind=neutral]) button calcite-loader,
+:host([appearance=outline-fill][kind=neutral]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=outline][color=inverse]) button, 
-:host([appearance=outline][color=inverse]) a {
+:host([appearance=outline-fill][kind=inverse]) button,
+:host([appearance=outline-fill][kind=inverse]) a {
   background-color: var(--calcite-ui-foreground-1);
   color: var(--calcite-ui-text-1);
   border-color: var(--calcite-ui-inverse);
 }
-:host([appearance=outline][color=inverse]) button:hover,
-:host([appearance=outline][color=inverse]) a:hover {
+:host([appearance=outline-fill][kind=inverse]) button:hover,
+:host([appearance=outline-fill][kind=inverse]) a:hover {
   border-color: var(--calcite-ui-inverse-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-inverse-hover);
 }
-:host([appearance=outline][color=inverse]) button:focus,
-:host([appearance=outline][color=inverse]) a:focus {
+:host([appearance=outline-fill][kind=inverse]) button:focus,
+:host([appearance=outline-fill][kind=inverse]) a:focus {
   border-color: var(--calcite-ui-inverse);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-inverse);
 }
-:host([appearance=outline][color=inverse]) button:active,
-:host([appearance=outline][color=inverse]) a:active {
+:host([appearance=outline-fill][kind=inverse]) button:active,
+:host([appearance=outline-fill][kind=inverse]) a:active {
   border-color: var(--calcite-ui-inverse-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-inverse-press);
 }
-:host([appearance=outline][color=inverse]) button calcite-loader, 
-:host([appearance=outline][color=inverse]) a calcite-loader {
+:host([appearance=outline-fill][kind=inverse]) button calcite-loader,
+:host([appearance=outline-fill][kind=inverse]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=clear]) button, 
-:host([appearance=clear]) a, 
-:host([appearance=minimal]) button, 
-:host([appearance=minimal]) a {
+:host([appearance=outline]) button,
+:host([appearance=outline]) a {
   border-width: 1px;
   border-style: solid;
   background-color: transparent;
   box-shadow: inset 0 0 0 1px transparent;
 }
 
-:host([appearance=clear][color=blue]) button, 
-:host([appearance=clear][color=blue]) a, 
-:host([appearance=minimal][color=blue]) button, 
-:host([appearance=minimal][color=blue]) a {
+:host([appearance=outline][kind=brand]) button,
+:host([appearance=outline][kind=brand]) a {
   border-color: var(--calcite-ui-brand);
   background-color: transparent;
   color: var(--calcite-ui-brand);
 }
-:host([appearance=clear][color=blue]) button:hover, 
-:host([appearance=clear][color=blue]) a:hover, 
-:host([appearance=minimal][color=blue]) button:hover, 
-:host([appearance=minimal][color=blue]) a:hover {
+:host([appearance=outline][kind=brand]) button:hover,
+:host([appearance=outline][kind=brand]) a:hover {
   border-color: var(--calcite-ui-brand-hover);
   color: var(--calcite-ui-brand-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand-hover);
 }
-:host([appearance=clear][color=blue]) button:focus, 
-:host([appearance=clear][color=blue]) a:focus, 
-:host([appearance=minimal][color=blue]) button:focus, 
-:host([appearance=minimal][color=blue]) a:focus {
+:host([appearance=outline][kind=brand]) button:focus,
+:host([appearance=outline][kind=brand]) a:focus {
   border-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-brand);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
 }
-:host([appearance=clear][color=blue]) button:active, 
-:host([appearance=clear][color=blue]) a:active, 
-:host([appearance=minimal][color=blue]) button:active, 
-:host([appearance=minimal][color=blue]) a:active {
+:host([appearance=outline][kind=brand]) button:active,
+:host([appearance=outline][kind=brand]) a:active {
   border-color: var(--calcite-ui-brand-press);
   color: var(--calcite-ui-brand-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand-press);
 }
-:host([appearance=clear][color=blue]) button calcite-loader,
-:host([appearance=clear][color=blue]) a calcite-loader,
-:host([appearance=minimal][color=blue]) button calcite-loader,
-:host([appearance=minimal][color=blue]) a calcite-loader {
+:host([appearance=outline][kind=brand]) button calcite-loader,
+:host([appearance=outline][kind=brand]) a calcite-loader {
   color: var(--calcite-ui-brand);
 }
 
-:host([appearance=clear][color=red]) button, 
-:host([appearance=clear][color=red]) a, 
-:host([appearance=minimal][color=red]) button, 
-:host([appearance=minimal][color=red]) a {
+:host([appearance=outline][kind=danger]) button,
+:host([appearance=outline][kind=danger]) a {
   border-color: var(--calcite-ui-danger);
   background-color: transparent;
   color: var(--calcite-ui-danger);
 }
-:host([appearance=clear][color=red]) button:hover, 
-:host([appearance=clear][color=red]) a:hover, 
-:host([appearance=minimal][color=red]) button:hover, 
-:host([appearance=minimal][color=red]) a:hover {
+:host([appearance=outline][kind=danger]) button:hover,
+:host([appearance=outline][kind=danger]) a:hover {
   border-color: var(--calcite-ui-danger-hover);
   color: var(--calcite-ui-danger-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-danger-hover);
 }
-:host([appearance=clear][color=red]) button:focus, 
-:host([appearance=clear][color=red]) a:focus, 
-:host([appearance=minimal][color=red]) button:focus, 
-:host([appearance=minimal][color=red]) a:focus {
+:host([appearance=outline][kind=danger]) button:focus,
+:host([appearance=outline][kind=danger]) a:focus {
   border-color: var(--calcite-ui-danger);
   color: var(--calcite-ui-danger);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-danger);
 }
-:host([appearance=clear][color=red]) button:active, 
-:host([appearance=clear][color=red]) a:active, 
-:host([appearance=minimal][color=red]) button:active, 
-:host([appearance=minimal][color=red]) a:active {
+:host([appearance=outline][kind=danger]) button:active,
+:host([appearance=outline][kind=danger]) a:active {
   border-color: var(--calcite-ui-danger-press);
   color: var(--calcite-ui-danger-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-danger-press);
 }
-:host([appearance=clear][color=red]) button calcite-loader,
-:host([appearance=clear][color=red]) a calcite-loader,
-:host([appearance=minimal][color=red]) button calcite-loader,
-:host([appearance=minimal][color=red]) a calcite-loader {
+:host([appearance=outline][kind=danger]) button calcite-loader,
+:host([appearance=outline][kind=danger]) a calcite-loader {
   color: var(--calcite-ui-danger);
 }
 
-:host([appearance=clear][color=neutral]) button, 
-:host([appearance=clear][color=neutral]) a, 
-:host([appearance=minimal][color=neutral]) button, 
-:host([appearance=minimal][color=neutral]) a {
+:host([appearance=outline][kind=neutral]) button,
+:host([appearance=outline][kind=neutral]) a {
   background-color: transparent;
   color: var(--calcite-ui-text-1);
   border-color: var(--calcite-ui-foreground-3);
 }
-:host([appearance=clear][color=neutral]) button:hover,
-:host([appearance=clear][color=neutral]) a:hover,
-:host([appearance=minimal][color=neutral]) button:hover,
-:host([appearance=minimal][color=neutral]) a:hover {
+:host([appearance=outline][kind=neutral]) button:hover,
+:host([appearance=outline][kind=neutral]) a:hover {
   box-shadow: inset 0 0 0 1px var(--calcite-ui-foreground-3);
 }
-:host([appearance=clear][color=neutral]) button:focus,
-:host([appearance=clear][color=neutral]) a:focus,
-:host([appearance=minimal][color=neutral]) button:focus,
-:host([appearance=minimal][color=neutral]) a:focus {
+:host([appearance=outline][kind=neutral]) button:focus,
+:host([appearance=outline][kind=neutral]) a:focus {
   box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
 }
-:host([appearance=clear][color=neutral]) button:active,
-:host([appearance=clear][color=neutral]) a:active,
-:host([appearance=minimal][color=neutral]) button:active,
-:host([appearance=minimal][color=neutral]) a:active {
+:host([appearance=outline][kind=neutral]) button:active,
+:host([appearance=outline][kind=neutral]) a:active {
   box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
 }
-:host([appearance=clear][color=neutral]) button calcite-loader, 
-:host([appearance=clear][color=neutral]) a calcite-loader, 
-:host([appearance=minimal][color=neutral]) button calcite-loader, 
-:host([appearance=minimal][color=neutral]) a calcite-loader {
+:host([appearance=outline][kind=neutral]) button calcite-loader,
+:host([appearance=outline][kind=neutral]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=clear][color=inverse]) button, 
-:host([appearance=clear][color=inverse]) a, 
-:host([appearance=minimal][color=inverse]) button, 
-:host([appearance=minimal][color=inverse]) a {
+:host([appearance=outline][kind=inverse]) button,
+:host([appearance=outline][kind=inverse]) a {
   background-color: transparent;
   color: var(--calcite-ui-text-1);
   border-color: var(--calcite-ui-inverse);
 }
-:host([appearance=clear][color=inverse]) button:hover,
-:host([appearance=clear][color=inverse]) a:hover,
-:host([appearance=minimal][color=inverse]) button:hover,
-:host([appearance=minimal][color=inverse]) a:hover {
+:host([appearance=outline][kind=inverse]) button:hover,
+:host([appearance=outline][kind=inverse]) a:hover {
   border-color: var(--calcite-ui-inverse-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-inverse-hover);
 }
-:host([appearance=clear][color=inverse]) button:focus,
-:host([appearance=clear][color=inverse]) a:focus,
-:host([appearance=minimal][color=inverse]) button:focus,
-:host([appearance=minimal][color=inverse]) a:focus {
+:host([appearance=outline][kind=inverse]) button:focus,
+:host([appearance=outline][kind=inverse]) a:focus {
   border-color: var(--calcite-ui-inverse);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-inverse);
 }
-:host([appearance=clear][color=inverse]) button:active,
-:host([appearance=clear][color=inverse]) a:active,
-:host([appearance=minimal][color=inverse]) button:active,
-:host([appearance=minimal][color=inverse]) a:active {
+:host([appearance=outline][kind=inverse]) button:active,
+:host([appearance=outline][kind=inverse]) a:active {
   border-color: var(--calcite-ui-inverse-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-inverse-press);
 }
-:host([appearance=clear][color=inverse]) button calcite-loader, 
-:host([appearance=clear][color=inverse]) a calcite-loader, 
-:host([appearance=minimal][color=inverse]) button calcite-loader, 
-:host([appearance=minimal][color=inverse]) a calcite-loader {
+:host([appearance=outline][kind=inverse]) button calcite-loader,
+:host([appearance=outline][kind=inverse]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=outline][split-child=primary]) button,
-:host([appearance=clear][split-child=primary]) button,
-:host([appearance=minimal][split-child=primary]) button {
+:host([appearance=outline-fill][split-child=primary]) button,
+:host([appearance=outline][split-child=primary]) button {
   border-inline-end-width: 0;
   border-inline-start-width: 1px;
 }
 
-:host([appearance=outline][split-child=secondary]) button,
-:host([appearance=clear][split-child=secondary]) button,
-:host([appearance=minimal][split-child=secondary]) button {
+:host([appearance=outline-fill][split-child=secondary]) button,
+:host([appearance=outline][split-child=secondary]) button {
   border-inline-start-width: 0;
   border-inline-end-width: 1px;
 }
 
-:host([appearance=transparent]:not(.enable-editing-button)) button, 
+:host([appearance=transparent]:not(.enable-editing-button)) button,
 :host([appearance=transparent]:not(.enable-editing-button)) a {
   background-color: transparent;
 }
@@ -680,55 +637,55 @@
   background-color: var(--calcite-button-transparent-press);
 }
 
-:host([appearance=transparent][color=blue]) button,
-:host([appearance=transparent][color=blue]) a {
+:host([appearance=transparent][kind=brand]) button,
+:host([appearance=transparent][kind=brand]) a {
   color: var(--calcite-ui-brand);
 }
-:host([appearance=transparent][color=blue]) button:hover,
-:host([appearance=transparent][color=blue]) a:hover {
+:host([appearance=transparent][kind=brand]) button:hover,
+:host([appearance=transparent][kind=brand]) a:hover {
   color: var(--calcite-ui-brand-hover);
 }
-:host([appearance=transparent][color=blue]) button:focus,
-:host([appearance=transparent][color=blue]) a:focus {
+:host([appearance=transparent][kind=brand]) button:focus,
+:host([appearance=transparent][kind=brand]) a:focus {
   color: var(--calcite-ui-brand);
 }
-:host([appearance=transparent][color=blue]) button:active,
-:host([appearance=transparent][color=blue]) a:active {
+:host([appearance=transparent][kind=brand]) button:active,
+:host([appearance=transparent][kind=brand]) a:active {
   color: var(--calcite-ui-brand-press);
 }
-:host([appearance=transparent][color=blue]) button calcite-loader,
-:host([appearance=transparent][color=blue]) a calcite-loader {
+:host([appearance=transparent][kind=brand]) button calcite-loader,
+:host([appearance=transparent][kind=brand]) a calcite-loader {
   color: var(--calcite-ui-brand);
 }
 
-:host([appearance=transparent][color=red]) button,
-:host([appearance=transparent][color=red]) a {
+:host([appearance=transparent][kind=danger]) button,
+:host([appearance=transparent][kind=danger]) a {
   color: var(--calcite-ui-danger);
 }
-:host([appearance=transparent][color=red]) button:hover,
-:host([appearance=transparent][color=red]) a:hover {
+:host([appearance=transparent][kind=danger]) button:hover,
+:host([appearance=transparent][kind=danger]) a:hover {
   color: var(--calcite-ui-danger-hover);
 }
-:host([appearance=transparent][color=red]) button:focus,
-:host([appearance=transparent][color=red]) a:focus {
+:host([appearance=transparent][kind=danger]) button:focus,
+:host([appearance=transparent][kind=danger]) a:focus {
   color: var(--calcite-ui-danger);
 }
-:host([appearance=transparent][color=red]) button:active,
-:host([appearance=transparent][color=red]) a:active {
+:host([appearance=transparent][kind=danger]) button:active,
+:host([appearance=transparent][kind=danger]) a:active {
   color: var(--calcite-ui-danger-press);
 }
-:host([appearance=transparent][color=red]) button calcite-loader,
-:host([appearance=transparent][color=red]) a calcite-loader {
+:host([appearance=transparent][kind=danger]) button calcite-loader,
+:host([appearance=transparent][kind=danger]) a calcite-loader {
   color: var(--calcite-ui-danger);
 }
 
-:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) button, 
-:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) a, 
-:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) calcite-loader {
+:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) button,
+:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) a,
+:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=transparent][color=neutral].cancel-editing-button) button {
+:host([appearance=transparent][kind=neutral].cancel-editing-button) button {
   border-block-start-width: 1px;
   border-block-end-width: 1px;
   color: var(--calcite-ui-text-3);
@@ -736,14 +693,14 @@
   border-block-end-color: var(--calcite-ui-border-input);
   border-block-style: solid;
 }
-:host([appearance=transparent][color=neutral].cancel-editing-button) button:not(.content--slotted) {
-  --calcite-button-padding-y: 0;
+:host([appearance=transparent][kind=neutral].cancel-editing-button) button:not(.content--slotted) {
+  --calcite-button-padding-y-internal: 0;
 }
-:host([appearance=transparent][color=neutral].cancel-editing-button) button:hover {
+:host([appearance=transparent][kind=neutral].cancel-editing-button) button:hover {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=transparent][color=neutral].enable-editing-button) button {
+:host([appearance=transparent][kind=neutral].enable-editing-button) button {
   background-color: transparent;
 }
 
@@ -753,13 +710,13 @@
   outline-offset: -2px;
 }
 
-:host([appearance=transparent][color=inverse]) button, 
-:host([appearance=transparent][color=inverse]) a, 
-:host([appearance=transparent][color=inverse]) calcite-loader {
+:host([appearance=transparent][kind=inverse]) button,
+:host([appearance=transparent][kind=inverse]) a,
+:host([appearance=transparent][kind=inverse]) calcite-loader {
   color: var(--calcite-ui-text-inverse);
 }
 
-:host([scale=s]) button.content--slotted, 
+:host([scale=s]) button.content--slotted,
 :host([scale=s]) a.content--slotted {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
@@ -767,80 +724,70 @@
 
 :host([scale=s][appearance=transparent]) button.content--slotted,
 :host([scale=s][appearance=transparent]) a.content--slotted {
-  --calcite-button-padding-x: 0.5rem;
-  --calcite-button-padding-y: 0.25rem;
+  --calcite-button-padding-x-internal: 0.5rem;
+}
+
+:host([scale=s]) button,
+:host([scale=s]) a {
+  --calcite-button-padding-y-internal: 3px;
 }
 
 :host([scale=m]) button.content--slotted,
 :host([scale=m]) a.content--slotted {
-  --calcite-button-padding-x: 11px;
+  --calcite-button-padding-x-internal: 11px;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 
-:host([scale=m]:not([appearance=transparent])) button.content--slotted,
-:host([scale=m]:not([appearance=transparent])) a.content--slotted {
-  --calcite-button-padding-y: 7px;
+:host([scale=m]) button,
+:host([scale=m]) a {
+  --calcite-button-padding-y-internal: 7px;
 }
 
 :host([scale=m][appearance=transparent]) button.content--slotted,
 :host([scale=m][appearance=transparent]) a.content--slotted {
-  --calcite-button-padding-x: 0.75rem;
-  --calcite-button-padding-y: 0.5rem;
+  --calcite-button-padding-x-internal: 0.75rem;
 }
 
 :host([scale=l]) button.content--slotted,
 :host([scale=l]) a.content--slotted {
-  --calcite-button-padding-x: 15px;
+  --calcite-button-padding-x-internal: 15px;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
 
-:host([scale=l]:not([appearance=transparent])) button.content--slotted,
-:host([scale=l]:not([appearance=transparent])) a.content--slotted {
-  --calcite-button-padding-y: 11px;
+:host([scale=l]) .button-padding {
+  --calcite-button-padding-x-internal: 1rem;
+  --calcite-button-padding-y-internal: 11px;
 }
-
-:host([scale=l][appearance=transparent]) button.content--slotted,
-:host([scale=l][appearance=transparent]) a.content--slotted {
-  --calcite-button-padding-x: 1rem;
-  --calcite-button-padding-y: 0.75rem;
+:host([scale=l]) .button-padding--shrunk {
+  --calcite-button-padding-y-internal: 9px;
 }
 
 :host([scale=s]) button:not(.content--slotted),
 :host([scale=s]) a:not(.content--slotted) {
-  --calcite-button-padding-x: 0.125rem;
-  --calcite-button-padding-y: 3px;
+  --calcite-button-padding-x-internal: 0.125rem;
+  --calcite-button-padding-y-internal: 3px;
   inline-size: 1.5rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
   min-block-size: 1.5rem;
 }
 
-:host([scale=s][appearance=transparent]) button:not(.content--slotted),
-:host([scale=s][appearance=transparent]) a:not(.content--slotted) {
-  --calcite-button-padding-y: 0.25rem;
-}
-
 :host([scale=m]) button:not(.content--slotted),
 :host([scale=m]) a:not(.content--slotted) {
-  --calcite-button-padding-x: 0.125rem;
-  --calcite-button-padding-y: 7px;
+  --calcite-button-padding-x-internal: 0.125rem;
+  --calcite-button-padding-y-internal: 7px;
   inline-size: 2rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
   min-block-size: 2rem;
 }
 
-:host([scale=m][appearance=transparent]) button:not(.content--slotted),
-:host([scale=m][appearance=transparent]) a:not(.content--slotted) {
-  --calcite-button-padding-y: 0.5rem;
-}
-
 :host([scale=l]) button:not(.content--slotted),
 :host([scale=l]) a:not(.content--slotted) {
-  --calcite-button-padding-x: 0.125rem;
-  --calcite-button-padding-y: 9px;
+  --calcite-button-padding-x-internal: 0.125rem;
+  --calcite-button-padding-y-internal: 9px;
   inline-size: 2.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
@@ -849,12 +796,12 @@
 
 :host([scale=l][appearance=transparent]) button:not(.content--slotted),
 :host([scale=l][appearance=transparent]) a:not(.content--slotted) {
-  --calcite-button-padding-y: 0.625rem;
+  --calcite-button-padding-y-internal: 0.625rem;
 }
 
 :host([scale=s][icon-start][icon-end]) button:not(.content--slotted),
 :host([scale=s][icon-start][icon-end]) a:not(.content--slotted) {
-  --calcite-button-padding-x: 23px;
+  --calcite-button-padding-x-internal: 23px;
   block-size: 1.5rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
@@ -862,12 +809,12 @@
 
 :host([scale=s][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),
 :host([scale=s][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted) {
-  --calcite-button-padding-x: 1.5rem;
+  --calcite-button-padding-x-internal: 1.5rem;
 }
 
 :host([scale=m][icon-start][icon-end]) button:not(.content--slotted),
 :host([scale=m][icon-start][icon-end]) a:not(.content--slotted) {
-  --calcite-button-padding-x: 2rem;
+  --calcite-button-padding-x-internal: 2rem;
   block-size: 2rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
@@ -875,12 +822,12 @@
 
 :host([scale=m][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),
 :host([scale=m][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted) {
-  --calcite-button-padding-x: 33px;
+  --calcite-button-padding-x-internal: 33px;
 }
 
 :host([scale=l][icon-start][icon-end]) button:not(.content--slotted),
 :host([scale=l][icon-start][icon-end]) a:not(.content--slotted) {
-  --calcite-button-padding-x: 43px;
+  --calcite-button-padding-x-internal: 43px;
   block-size: 2.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
@@ -892,5 +839,5 @@
 
 :host([scale=l][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),
 :host([scale=l][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted) {
-  --calcite-button-padding-x: 2.75rem;
+  --calcite-button-padding-x-internal: 2.75rem;
 }