@medyll/idae-slotui-svelte 0.62.0 → 0.64.0

package/dist/controls/button/Button.svelte

@@ -34,7 +34,7 @@ let startRef = $state(void 0);
 </script>
 
 <button
-	class={className + ' button '}
+	class={className + ' slotui-button '}
 	class:loading
 	bind:this={element}
 	use:popper={usePopperProps}
@@ -44,7 +44,7 @@ let startRef = $state(void 0);
 	type={buttonType}
 	{tall}
 	{width}
-	{variant}
+	variant={variant}
 	{selected}
 	{...rest}
 	style:aspect-ratio={ratio}
@@ -53,7 +53,7 @@ let startRef = $state(void 0);
 	{#if buttonStart || icon}
 		<div
 			bind:this={startRef}
-			class="button-start"
+			class="start"
 			style="--start-position:{(children ?? value) ? 'absolute' : 'relative'}"
 		>
 			<Slotted child={buttonStart}>
@@ -63,14 +63,14 @@ let startRef = $state(void 0);
 	{/if}
 	{#if children ?? value}
 		<div
-			class="button-central {ellipsis? 'ellipsis' : ''}"
+			class="central {ellipsis? 'ellipsis' : ''}"
 			style="--content-padding:{buttonStart || icon ? `${startRef?.clientWidth ?? '0.5rem'}px` : '0.5rem'}"
 		>
 			<Slotted child={children}>{value ?? ''}</Slotted>
 		</div>
 	{/if}
 	{#if buttonEnd || iconEnd}
-		<div class="button-end">
+		<div class="end">
 			<Slotted child={buttonEnd}>
 				<Icon icon={iconEnd} />
 			</Slotted>
@@ -113,311 +113,239 @@ let startRef = $state(void 0);
   background-color: rgba(255, 255, 255, 0.5);
 }
 
-button,
-.button,
-button.button,
-input[type=button],
-input[type=submit] {
+.slotui-button,
+button.slotui-button,
+input[type=button].slotui-button,
+input[type=submit].slotui-button {
   width: var(--sld-width-small);
-  min-height: var(--preset-tall-small);
-  height: var(--preset-tall-small);
-  border: none;
-  border-radius: 0;
-  margin: 0;
-  text-align: var(--sld-button-text-align);
-  font-size: var(--sld-button-font-size);
-  border-radius: var(--sld-button-radius);
-  color: var(--sld-color-foreground);
-  padding: var(--sld-button-padding);
-  position: relative;
-  display: inline-flex;
-  transition: all 0.2s ease-in-out;
-  overflow: hidden;
-  cursor: pointer;
-  align-content: center;
-  align-items: center;
-  background: var(--sld-button-background);
-  /*     :focus {
-      outline: 1px solid var(--sld-button-focus-border-color);
-      outline-offset: 2px;
-      box-shadow: var(--sld-button-focus-shadow);
-  }
-  :focus-visible {
-      outline: 1px solid var(--sld-button-focus-border-color);
-      outline-offset: -2px;
-      box-shadow: var(--sld-button-focus-shadow);
-  }
-  :hover {
-      background-color: var(--sld-button-hover-background);
-      box-shadow: var(--sld-button-hover-shadow);
-  }
-  :active {
-      transform: translateY(1px);
-      box-shadow: var(--sld-button-active-shadow);
-  }
-  :focus:not(:focus-visible) {
-      box-shadow: var(--sld-button-focus-shadow);
-  } */
-  width: var(--sld-width-small);
-  min-height: var(--preset-tall-small);
-  height: var(--preset-tall-small);
 }
-button,
-.button,
-button.button,
-input[type=button],
-input[type=submit] {
+.slotui-button,
+button.slotui-button,
+input[type=button].slotui-button,
+input[type=submit].slotui-button {
   --preset-width: var(--sld-width-small);
 }
-button[width=tiny], button.width-tiny,
-.button[width=tiny],
-.button.width-tiny,
-button.button[width=tiny],
-button.button.width-tiny,
-input[type=button][width=tiny],
-input[type=button].width-tiny,
-input[type=submit][width=tiny],
-input[type=submit].width-tiny {
+.slotui-button[width=tiny], .slotui-button.width-tiny,
+button.slotui-button[width=tiny],
+button.slotui-button.width-tiny,
+input[type=button].slotui-button[width=tiny],
+input[type=button].slotui-button.width-tiny,
+input[type=submit].slotui-button[width=tiny],
+input[type=submit].slotui-button.width-tiny {
   --preset-width: var(--sld-width-tiny);
   width: var(--sld-width-tiny) !important;
 }
-button[width=mini], button.width-mini,
-.button[width=mini],
-.button.width-mini,
-button.button[width=mini],
-button.button.width-mini,
-input[type=button][width=mini],
-input[type=button].width-mini,
-input[type=submit][width=mini],
-input[type=submit].width-mini {
+.slotui-button[width=mini], .slotui-button.width-mini,
+button.slotui-button[width=mini],
+button.slotui-button.width-mini,
+input[type=button].slotui-button[width=mini],
+input[type=button].slotui-button.width-mini,
+input[type=submit].slotui-button[width=mini],
+input[type=submit].slotui-button.width-mini {
   --preset-width: var(--sld-width-mini);
   width: var(--sld-width-mini) !important;
 }
-button[width=small], button.width-small,
-.button[width=small],
-.button.width-small,
-button.button[width=small],
-button.button.width-small,
-input[type=button][width=small],
-input[type=button].width-small,
-input[type=submit][width=small],
-input[type=submit].width-small {
+.slotui-button[width=small], .slotui-button.width-small,
+button.slotui-button[width=small],
+button.slotui-button.width-small,
+input[type=button].slotui-button[width=small],
+input[type=button].slotui-button.width-small,
+input[type=submit].slotui-button[width=small],
+input[type=submit].slotui-button.width-small {
   --preset-width: var(--sld-width-small);
   width: var(--sld-width-small) !important;
 }
-button[width=med], button.width-med,
-.button[width=med],
-.button.width-med,
-button.button[width=med],
-button.button.width-med,
-input[type=button][width=med],
-input[type=button].width-med,
-input[type=submit][width=med],
-input[type=submit].width-med {
+.slotui-button[width=med], .slotui-button.width-med,
+button.slotui-button[width=med],
+button.slotui-button.width-med,
+input[type=button].slotui-button[width=med],
+input[type=button].slotui-button.width-med,
+input[type=submit].slotui-button[width=med],
+input[type=submit].slotui-button.width-med {
   --preset-width: var(--sld-width-med);
   width: var(--sld-width-med) !important;
 }
-button[width=kind], button.width-kind,
-.button[width=kind],
-.button.width-kind,
-button.button[width=kind],
-button.button.width-kind,
-input[type=button][width=kind],
-input[type=button].width-kind,
-input[type=submit][width=kind],
-input[type=submit].width-kind {
+.slotui-button[width=kind], .slotui-button.width-kind,
+button.slotui-button[width=kind],
+button.slotui-button.width-kind,
+input[type=button].slotui-button[width=kind],
+input[type=button].slotui-button.width-kind,
+input[type=submit].slotui-button[width=kind],
+input[type=submit].slotui-button.width-kind {
   --preset-width: var(--sld-width-kind);
   width: var(--sld-width-kind) !important;
 }
-button[width=full], button.width-full,
-.button[width=full],
-.button.width-full,
-button.button[width=full],
-button.button.width-full,
-input[type=button][width=full],
-input[type=button].width-full,
-input[type=submit][width=full],
-input[type=submit].width-full {
+.slotui-button[width=full], .slotui-button.width-full,
+button.slotui-button[width=full],
+button.slotui-button.width-full,
+input[type=button].slotui-button[width=full],
+input[type=button].slotui-button.width-full,
+input[type=submit].slotui-button[width=full],
+input[type=submit].slotui-button.width-full {
   --preset-width: var(--sld-width-full);
   width: var(--sld-width-full) !important;
 }
-button[width=auto], button.width-auto,
-.button[width=auto],
-.button.width-auto,
-button.button[width=auto],
-button.button.width-auto,
-input[type=button][width=auto],
-input[type=button].width-auto,
-input[type=submit][width=auto],
-input[type=submit].width-auto {
+.slotui-button[width=auto], .slotui-button.width-auto,
+button.slotui-button[width=auto],
+button.slotui-button.width-auto,
+input[type=button].slotui-button[width=auto],
+input[type=button].slotui-button.width-auto,
+input[type=submit].slotui-button[width=auto],
+input[type=submit].slotui-button.width-auto {
   --preset-width: var(--sld-width-auto);
   width: var(--sld-width-auto) !important;
 }
-button[width=default], button.width-default,
-.button[width=default],
-.button.width-default,
-button.button[width=default],
-button.button.width-default,
-input[type=button][width=default],
-input[type=button].width-default,
-input[type=submit][width=default],
-input[type=submit].width-default {
+.slotui-button[width=default], .slotui-button.width-default,
+button.slotui-button[width=default],
+button.slotui-button.width-default,
+input[type=button].slotui-button[width=default],
+input[type=button].slotui-button.width-default,
+input[type=submit].slotui-button[width=default],
+input[type=submit].slotui-button.width-default {
   --preset-width: var(--sld-width-default);
   width: var(--sld-width-default) !important;
 }
-button,
-.button,
-button.button,
-input[type=button],
-input[type=submit] {
+.slotui-button,
+button.slotui-button,
+input[type=button].slotui-button,
+input[type=submit].slotui-button {
+  min-height: var(--preset-tall-small);
+  height: var(--preset-tall-small);
+}
+.slotui-button,
+button.slotui-button,
+input[type=button].slotui-button,
+input[type=submit].slotui-button {
   --preset-tall: var(--sld-tall-small);
 }
-button[tall=tiny], button.tall-tiny,
-.button[tall=tiny],
-.button.tall-tiny,
-button.button[tall=tiny],
-button.button.tall-tiny,
-input[type=button][tall=tiny],
-input[type=button].tall-tiny,
-input[type=submit][tall=tiny],
-input[type=submit].tall-tiny {
+.slotui-button[tall=tiny], .slotui-button.tall-tiny,
+button.slotui-button[tall=tiny],
+button.slotui-button.tall-tiny,
+input[type=button].slotui-button[tall=tiny],
+input[type=button].slotui-button.tall-tiny,
+input[type=submit].slotui-button[tall=tiny],
+input[type=submit].slotui-button.tall-tiny {
   min-height: var(--sld-tall-tiny) !important;
 }
-button[tall=mini], button.tall-mini,
-.button[tall=mini],
-.button.tall-mini,
-button.button[tall=mini],
-button.button.tall-mini,
-input[type=button][tall=mini],
-input[type=button].tall-mini,
-input[type=submit][tall=mini],
-input[type=submit].tall-mini {
+.slotui-button[tall=mini], .slotui-button.tall-mini,
+button.slotui-button[tall=mini],
+button.slotui-button.tall-mini,
+input[type=button].slotui-button[tall=mini],
+input[type=button].slotui-button.tall-mini,
+input[type=submit].slotui-button[tall=mini],
+input[type=submit].slotui-button.tall-mini {
   min-height: var(--sld-tall-mini) !important;
 }
-button[tall=small], button.tall-small,
-.button[tall=small],
-.button.tall-small,
-button.button[tall=small],
-button.button.tall-small,
-input[type=button][tall=small],
-input[type=button].tall-small,
-input[type=submit][tall=small],
-input[type=submit].tall-small {
+.slotui-button[tall=small], .slotui-button.tall-small,
+button.slotui-button[tall=small],
+button.slotui-button.tall-small,
+input[type=button].slotui-button[tall=small],
+input[type=button].slotui-button.tall-small,
+input[type=submit].slotui-button[tall=small],
+input[type=submit].slotui-button.tall-small {
   min-height: var(--sld-tall-small) !important;
 }
-button[tall=med], button.tall-med,
-.button[tall=med],
-.button.tall-med,
-button.button[tall=med],
-button.button.tall-med,
-input[type=button][tall=med],
-input[type=button].tall-med,
-input[type=submit][tall=med],
-input[type=submit].tall-med {
+.slotui-button[tall=med], .slotui-button.tall-med,
+button.slotui-button[tall=med],
+button.slotui-button.tall-med,
+input[type=button].slotui-button[tall=med],
+input[type=button].slotui-button.tall-med,
+input[type=submit].slotui-button[tall=med],
+input[type=submit].slotui-button.tall-med {
   min-height: var(--sld-tall-med) !important;
 }
-button[tall=kind], button.tall-kind,
-.button[tall=kind],
-.button.tall-kind,
-button.button[tall=kind],
-button.button.tall-kind,
-input[type=button][tall=kind],
-input[type=button].tall-kind,
-input[type=submit][tall=kind],
-input[type=submit].tall-kind {
+.slotui-button[tall=kind], .slotui-button.tall-kind,
+button.slotui-button[tall=kind],
+button.slotui-button.tall-kind,
+input[type=button].slotui-button[tall=kind],
+input[type=button].slotui-button.tall-kind,
+input[type=submit].slotui-button[tall=kind],
+input[type=submit].slotui-button.tall-kind {
   min-height: var(--sld-tall-kind) !important;
 }
-button[tall=auto], button.tall-auto,
-.button[tall=auto],
-.button.tall-auto,
-button.button[tall=auto],
-button.button.tall-auto,
-input[type=button][tall=auto],
-input[type=button].tall-auto,
-input[type=submit][tall=auto],
-input[type=submit].tall-auto {
+.slotui-button[tall=auto], .slotui-button.tall-auto,
+button.slotui-button[tall=auto],
+button.slotui-button.tall-auto,
+input[type=button].slotui-button[tall=auto],
+input[type=button].slotui-button.tall-auto,
+input[type=submit].slotui-button[tall=auto],
+input[type=submit].slotui-button.tall-auto {
   min-height: var(--sld-tall-auto) !important;
 }
-button[tall=default], button.tall-default,
-.button[tall=default],
-.button.tall-default,
-button.button[tall=default],
-button.button.tall-default,
-input[type=button][tall=default],
-input[type=button].tall-default,
-input[type=submit][tall=default],
-input[type=submit].tall-default {
+.slotui-button[tall=default], .slotui-button.tall-default,
+button.slotui-button[tall=default],
+button.slotui-button.tall-default,
+input[type=button].slotui-button[tall=default],
+input[type=button].slotui-button.tall-default,
+input[type=submit].slotui-button[tall=default],
+input[type=submit].slotui-button.tall-default {
   min-height: var(--sld-tall-default) !important;
 }
-button[variant*=square], button[square=true], button.square,
-.button[variant*=square],
-.button[square=true],
-.button.square,
-button.button[variant*=square],
-button.button[square=true],
-button.button.square,
-input[type=button][variant*=square],
-input[type=button][square=true],
-input[type=button].square,
-input[type=submit][variant*=square],
-input[type=submit][square=true],
-input[type=submit].square {
+.slotui-button[variant*=square],
+button.slotui-button[variant*=square],
+input[type=button].slotui-button[variant*=square],
+input[type=submit].slotui-button[variant*=square] {
   aspect-ratio: 1/1 !important;
   height: auto;
 }
-button[variant*=rounded], button[rounded=true], button.rounded,
-.button[variant*=rounded],
-.button[rounded=true],
-.button.rounded,
-button.button[variant*=rounded],
-button.button[rounded=true],
-button.button.rounded,
-input[type=button][variant*=rounded],
-input[type=button][rounded=true],
-input[type=button].rounded,
-input[type=submit][variant*=rounded],
-input[type=submit][rounded=true],
-input[type=submit].rounded {
+.slotui-button[variant*=rounded],
+button.slotui-button[variant*=rounded],
+input[type=button].slotui-button[variant*=rounded],
+input[type=submit].slotui-button[variant*=rounded] {
   border-radius: 50%;
 }
-button.elevation-0, button[elevation-0],
-.button.elevation-0,
-.button[elevation-0],
-button.button.elevation-0,
-button.button[elevation-0],
-input[type=button].elevation-0,
-input[type=button][elevation-0],
-input[type=submit].elevation-0,
-input[type=submit][elevation-0] {
+.slotui-button.elevation-0, .slotui-button[elevation-0],
+button.slotui-button.elevation-0,
+button.slotui-button[elevation-0],
+input[type=button].slotui-button.elevation-0,
+input[type=button].slotui-button[elevation-0],
+input[type=submit].slotui-button.elevation-0,
+input[type=submit].slotui-button[elevation-0] {
   box-shadow: var(--sld-elevation-0);
 }
-button.elevation-through, button[elevation-through],
-.button.elevation-through,
-.button[elevation-through],
-button.button.elevation-through,
-button.button[elevation-through],
-input[type=button].elevation-through,
-input[type=button][elevation-through],
-input[type=submit].elevation-through,
-input[type=submit][elevation-through] {
+.slotui-button.elevation-through, .slotui-button[elevation-through],
+button.slotui-button.elevation-through,
+button.slotui-button[elevation-through],
+input[type=button].slotui-button.elevation-through,
+input[type=button].slotui-button[elevation-through],
+input[type=submit].slotui-button.elevation-through,
+input[type=submit].slotui-button[elevation-through] {
   box-shadow: var(--sld-elevation-through);
 }
-button.elevation-5, button[elevation-5],
-.button.elevation-5,
-.button[elevation-5],
-button.button.elevation-5,
-button.button[elevation-5],
-input[type=button].elevation-5,
-input[type=button][elevation-5],
-input[type=submit].elevation-5,
-input[type=submit][elevation-5] {
+.slotui-button.elevation-5, .slotui-button[elevation-5],
+button.slotui-button.elevation-5,
+button.slotui-button[elevation-5],
+input[type=button].slotui-button.elevation-5,
+input[type=button].slotui-button[elevation-5],
+input[type=submit].slotui-button.elevation-5,
+input[type=submit].slotui-button[elevation-5] {
   box-shadow: var(--sld-elevation-5);
 }
-button .button-start,
-.button .button-start,
-button.button .button-start,
-input[type=button] .button-start,
-input[type=submit] .button-start {
+.slotui-button,
+button.slotui-button,
+input[type=button].slotui-button,
+input[type=submit].slotui-button {
+  border: none;
+  border-radius: 0;
+  margin: 0;
+  text-align: var(--sld-button-text-align);
+  font-size: var(--sld-button-font-size);
+  border-radius: var(--sld-button-radius);
+  color: var(--sld-color-foreground);
+  padding: var(--sld-button-padding);
+  position: relative;
+  display: inline-flex;
+  transition: all 0.2s ease-in-out;
+  overflow: hidden;
+  cursor: pointer;
+  align-content: center;
+  align-items: center;
+  background: var(--sld-button-background);
+}
+.slotui-button .start,
+button.slotui-button .start,
+input[type=button].slotui-button .start,
+input[type=submit].slotui-button .start {
   position: relative;
   top: 0;
   left: 0;
@@ -427,56 +355,33 @@ input[type=submit] .button-start {
   padding: 0 0.5rem;
   display: block;
 }
-button .button-start:empty,
-.button .button-start:empty,
-button.button .button-start:empty,
-input[type=button] .button-start:empty,
-input[type=submit] .button-start:empty {
+.slotui-button .start:empty,
+button.slotui-button .start:empty,
+input[type=button].slotui-button .start:empty,
+input[type=submit].slotui-button .start:empty {
   display: none;
 }
-button .button-central,
-.button .button-central,
-button.button .button-central,
-input[type=button] .button-central,
-input[type=submit] .button-central {
-  display: block;
-  max-width: 100%;
-  max-height: 100%;
-  flex: 1;
-  align-items: center;
-  align-content: center;
-  justify-content: center;
-  justify-items: center;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-  text-align: var(--sld-button-text-align, center);
-  overflow: hidden;
-}
-button .button-central,
-.button .button-central,
-button.button .button-central,
-input[type=button] .button-central,
-input[type=submit] .button-central {
+.slotui-button .central,
+button.slotui-button .central,
+input[type=button].slotui-button .central,
+input[type=submit].slotui-button .central {
   --preset-ellipsis-line: 1;
 }
-button .button-central[ellipsis], button .button-central.ellipsis,
-.button .button-central[ellipsis],
-.button .button-central.ellipsis,
-button.button .button-central[ellipsis],
-button.button .button-central.ellipsis,
-input[type=button] .button-central[ellipsis],
-input[type=button] .button-central.ellipsis,
-input[type=submit] .button-central[ellipsis],
-input[type=submit] .button-central.ellipsis {
+.slotui-button .central[ellipsis], .slotui-button .central.ellipsis,
+button.slotui-button .central[ellipsis],
+button.slotui-button .central.ellipsis,
+input[type=button].slotui-button .central[ellipsis],
+input[type=button].slotui-button .central.ellipsis,
+input[type=submit].slotui-button .central[ellipsis],
+input[type=submit].slotui-button .central.ellipsis {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-button .button-central.ellipsis-line-1,
-.button .button-central.ellipsis-line-1,
-button.button .button-central.ellipsis-line-1,
-input[type=button] .button-central.ellipsis-line-1,
-input[type=submit] .button-central.ellipsis-line-1 {
+.slotui-button .central.ellipsis-line-1,
+button.slotui-button .central.ellipsis-line-1,
+input[type=button].slotui-button .central.ellipsis-line-1,
+input[type=submit].slotui-button .central.ellipsis-line-1 {
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
@@ -485,11 +390,10 @@ input[type=submit] .button-central.ellipsis-line-1 {
   white-space: normal;
   --preset-ellipsis-line: 1;
 }
-button .button-central.ellipsis-line-2,
-.button .button-central.ellipsis-line-2,
-button.button .button-central.ellipsis-line-2,
-input[type=button] .button-central.ellipsis-line-2,
-input[type=submit] .button-central.ellipsis-line-2 {
+.slotui-button .central.ellipsis-line-2,
+button.slotui-button .central.ellipsis-line-2,
+input[type=button].slotui-button .central.ellipsis-line-2,
+input[type=submit].slotui-button .central.ellipsis-line-2 {
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -498,11 +402,10 @@ input[type=submit] .button-central.ellipsis-line-2 {
   white-space: normal;
   --preset-ellipsis-line: 2;
 }
-button .button-central.ellipsis-line-3,
-.button .button-central.ellipsis-line-3,
-button.button .button-central.ellipsis-line-3,
-input[type=button] .button-central.ellipsis-line-3,
-input[type=submit] .button-central.ellipsis-line-3 {
+.slotui-button .central.ellipsis-line-3,
+button.slotui-button .central.ellipsis-line-3,
+input[type=button].slotui-button .central.ellipsis-line-3,
+input[type=submit].slotui-button .central.ellipsis-line-3 {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -511,11 +414,10 @@ input[type=submit] .button-central.ellipsis-line-3 {
   white-space: normal;
   --preset-ellipsis-line: 3;
 }
-button .button-central.ellipsis-line-4,
-.button .button-central.ellipsis-line-4,
-button.button .button-central.ellipsis-line-4,
-input[type=button] .button-central.ellipsis-line-4,
-input[type=submit] .button-central.ellipsis-line-4 {
+.slotui-button .central.ellipsis-line-4,
+button.slotui-button .central.ellipsis-line-4,
+input[type=button].slotui-button .central.ellipsis-line-4,
+input[type=submit].slotui-button .central.ellipsis-line-4 {
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
@@ -524,11 +426,10 @@ input[type=submit] .button-central.ellipsis-line-4 {
   white-space: normal;
   --preset-ellipsis-line: 4;
 }
-button .button-central.ellipsis-line-5,
-.button .button-central.ellipsis-line-5,
-button.button .button-central.ellipsis-line-5,
-input[type=button] .button-central.ellipsis-line-5,
-input[type=submit] .button-central.ellipsis-line-5 {
+.slotui-button .central.ellipsis-line-5,
+button.slotui-button .central.ellipsis-line-5,
+input[type=button].slotui-button .central.ellipsis-line-5,
+input[type=submit].slotui-button .central.ellipsis-line-5 {
   display: -webkit-box;
   -webkit-line-clamp: 5;
   -webkit-box-orient: vertical;
@@ -537,18 +438,33 @@ input[type=submit] .button-central.ellipsis-line-5 {
   white-space: normal;
   --preset-ellipsis-line: 5;
 }
-button .button-central:empty,
-.button .button-central:empty,
-button.button .button-central:empty,
-input[type=button] .button-central:empty,
-input[type=submit] .button-central:empty {
+.slotui-button .central,
+button.slotui-button .central,
+input[type=button].slotui-button .central,
+input[type=submit].slotui-button .central {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  flex: 1;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  justify-items: center;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  text-align: var(--sld-button-text-align, center);
+  overflow: hidden;
+}
+.slotui-button .central:empty,
+button.slotui-button .central:empty,
+input[type=button].slotui-button .central:empty,
+input[type=submit].slotui-button .central:empty {
   display: none;
 }
-button .button-end,
-.button .button-end,
-button.button .button-end,
-input[type=button] .button-end,
-input[type=submit] .button-end {
+.slotui-button .end,
+button.slotui-button .end,
+input[type=button].slotui-button .end,
+input[type=submit].slotui-button .end {
   position: relative;
   align-items: center;
   align-content: center;
@@ -556,42 +472,36 @@ input[type=submit] .button-end {
   text-align: center;
   cursor: pointer;
 }
-button .button-end:empty,
-.button .button-end:empty,
-button.button .button-end:empty,
-input[type=button] .button-end:empty,
-input[type=submit] .button-end:empty {
+.slotui-button .end:empty,
+button.slotui-button .end:empty,
+input[type=button].slotui-button .end:empty,
+input[type=submit].slotui-button .end:empty {
   display: none;
 }
-button .button-end:hover,
-.button .button-end:hover,
-button.button .button-end:hover,
-input[type=button] .button-end:hover,
-input[type=submit] .button-end:hover {
+.slotui-button .end:hover,
+button.slotui-button .end:hover,
+input[type=button].slotui-button .end:hover,
+input[type=submit].slotui-button .end:hover {
   background-color: var(--sld-button-action-hover-background);
 }
-button.loading, button[aria-busy=true],
-.button.loading,
-.button[aria-busy=true],
-button.button.loading,
-button.button[aria-busy=true],
-input[type=button].loading,
-input[type=button][aria-busy=true],
-input[type=submit].loading,
-input[type=submit][aria-busy=true] {
+.slotui-button.loading, .slotui-button[aria-busy=true],
+button.slotui-button.loading,
+button.slotui-button[aria-busy=true],
+input[type=button].slotui-button.loading,
+input[type=button].slotui-button[aria-busy=true],
+input[type=submit].slotui-button.loading,
+input[type=submit].slotui-button[aria-busy=true] {
   position: relative;
   color: transparent;
   pointer-events: none;
 }
-button.loading::after, button[aria-busy=true]::after,
-.button.loading::after,
-.button[aria-busy=true]::after,
-button.button.loading::after,
-button.button[aria-busy=true]::after,
-input[type=button].loading::after,
-input[type=button][aria-busy=true]::after,
-input[type=submit].loading::after,
-input[type=submit][aria-busy=true]::after {
+.slotui-button.loading::after, .slotui-button[aria-busy=true]::after,
+button.slotui-button.loading::after,
+button.slotui-button[aria-busy=true]::after,
+input[type=button].slotui-button.loading::after,
+input[type=button].slotui-button[aria-busy=true]::after,
+input[type=submit].slotui-button.loading::after,
+input[type=submit].slotui-button[aria-busy=true]::after {
   content: " ";
   position: absolute;
   width: 16px;
@@ -606,19 +516,16 @@ input[type=submit][aria-busy=true]::after {
   border-radius: 50%;
   animation: button-spinner 0.6s linear infinite;
 }
-button[disabled], button.disabled, button[aria-disabled=true],
-.button[disabled],
-.button.disabled,
-.button[aria-disabled=true],
-button.button[disabled],
-button.button.disabled,
-button.button[aria-disabled=true],
-input[type=button][disabled],
-input[type=button].disabled,
-input[type=button][aria-disabled=true],
-input[type=submit][disabled],
-input[type=submit].disabled,
-input[type=submit][aria-disabled=true] {
+.slotui-button[disabled], .slotui-button.disabled, .slotui-button[aria-disabled=true],
+button.slotui-button[disabled],
+button.slotui-button.disabled,
+button.slotui-button[aria-disabled=true],
+input[type=button].slotui-button[disabled],
+input[type=button].slotui-button.disabled,
+input[type=button].slotui-button[aria-disabled=true],
+input[type=submit].slotui-button[disabled],
+input[type=submit].slotui-button.disabled,
+input[type=submit].slotui-button[aria-disabled=true] {
   color: var(--color-gray-800);
   border-color: var(--color-gray-400);
   opacity: 0.6;
@@ -626,24 +533,21 @@ input[type=submit][aria-disabled=true] {
   box-shadow: none;
   pointer-events: none;
 }
-button[aria-pressed=true], button.selected,
-.button[aria-pressed=true],
-.button.selected,
-button.button[aria-pressed=true],
-button.button.selected,
-input[type=button][aria-pressed=true],
-input[type=button].selected,
-input[type=submit][aria-pressed=true],
-input[type=submit].selected {
+.slotui-button[aria-pressed=true], .slotui-button.selected,
+button.slotui-button[aria-pressed=true],
+button.slotui-button.selected,
+input[type=button].slotui-button[aria-pressed=true],
+input[type=button].slotui-button.selected,
+input[type=submit].slotui-button[aria-pressed=true],
+input[type=submit].slotui-button.selected {
   box-shadow: var(--sld-elevation-3);
   background-color: var(--sld-color-secondary);
   font-weight: bold;
 }
-button .chip,
-.button .chip,
-button.button .chip,
-input[type=button] .chip,
-input[type=submit] .chip {
+.slotui-button .chip,
+button.slotui-button .chip,
+input[type=button].slotui-button .chip,
+input[type=submit].slotui-button .chip {
   position: absolute;
   z-index: 2;
   height: 3px;
@@ -654,11 +558,10 @@ input[type=submit] .chip {
   border-radius: var(--sld-radius-large);
   bottom: 2px;
 }
-button .loadingButtonZone,
-.button .loadingButtonZone,
-button.button .loadingButtonZone,
-input[type=button] .loadingButtonZone,
-input[type=submit] .loadingButtonZone {
+.slotui-button .loadingButtonZone,
+button.slotui-button .loadingButtonZone,
+input[type=button].slotui-button .loadingButtonZone,
+input[type=submit].slotui-button .loadingButtonZone {
   z-index: 10;
   position: absolute;
   top: 0;
@@ -670,367 +573,118 @@ input[type=submit] .loadingButtonZone {
   align-content: center;
   justify-content: space-around;
 }
-button,
-.button,
-button.button,
-input[type=button],
-input[type=submit] {
-  --preset-width: var(--sld-width-small);
-}
-button[width=tiny], button.width-tiny,
-.button[width=tiny],
-.button.width-tiny,
-button.button[width=tiny],
-button.button.width-tiny,
-input[type=button][width=tiny],
-input[type=button].width-tiny,
-input[type=submit][width=tiny],
-input[type=submit].width-tiny {
-  --preset-width: var(--sld-width-tiny);
-  width: var(--sld-width-tiny) !important;
-}
-button[width=mini], button.width-mini,
-.button[width=mini],
-.button.width-mini,
-button.button[width=mini],
-button.button.width-mini,
-input[type=button][width=mini],
-input[type=button].width-mini,
-input[type=submit][width=mini],
-input[type=submit].width-mini {
-  --preset-width: var(--sld-width-mini);
-  width: var(--sld-width-mini) !important;
-}
-button[width=small], button.width-small,
-.button[width=small],
-.button.width-small,
-button.button[width=small],
-button.button.width-small,
-input[type=button][width=small],
-input[type=button].width-small,
-input[type=submit][width=small],
-input[type=submit].width-small {
-  --preset-width: var(--sld-width-small);
-  width: var(--sld-width-small) !important;
-}
-button[width=med], button.width-med,
-.button[width=med],
-.button.width-med,
-button.button[width=med],
-button.button.width-med,
-input[type=button][width=med],
-input[type=button].width-med,
-input[type=submit][width=med],
-input[type=submit].width-med {
-  --preset-width: var(--sld-width-med);
-  width: var(--sld-width-med) !important;
-}
-button[width=kind], button.width-kind,
-.button[width=kind],
-.button.width-kind,
-button.button[width=kind],
-button.button.width-kind,
-input[type=button][width=kind],
-input[type=button].width-kind,
-input[type=submit][width=kind],
-input[type=submit].width-kind {
-  --preset-width: var(--sld-width-kind);
-  width: var(--sld-width-kind) !important;
-}
-button[width=full], button.width-full,
-.button[width=full],
-.button.width-full,
-button.button[width=full],
-button.button.width-full,
-input[type=button][width=full],
-input[type=button].width-full,
-input[type=submit][width=full],
-input[type=submit].width-full {
-  --preset-width: var(--sld-width-full);
-  width: var(--sld-width-full) !important;
-}
-button[width=auto], button.width-auto,
-.button[width=auto],
-.button.width-auto,
-button.button[width=auto],
-button.button.width-auto,
-input[type=button][width=auto],
-input[type=button].width-auto,
-input[type=submit][width=auto],
-input[type=submit].width-auto {
-  --preset-width: var(--sld-width-auto);
-  width: var(--sld-width-auto) !important;
-}
-button[width=default], button.width-default,
-.button[width=default],
-.button.width-default,
-button.button[width=default],
-button.button.width-default,
-input[type=button][width=default],
-input[type=button].width-default,
-input[type=submit][width=default],
-input[type=submit].width-default {
-  --preset-width: var(--sld-width-default);
-  width: var(--sld-width-default) !important;
-}
-button,
-.button,
-button.button,
-input[type=button],
-input[type=submit] {
-  --preset-tall: var(--sld-tall-small);
-}
-button[tall=tiny], button.tall-tiny,
-.button[tall=tiny],
-.button.tall-tiny,
-button.button[tall=tiny],
-button.button.tall-tiny,
-input[type=button][tall=tiny],
-input[type=button].tall-tiny,
-input[type=submit][tall=tiny],
-input[type=submit].tall-tiny {
-  min-height: var(--sld-tall-tiny) !important;
-}
-button[tall=mini], button.tall-mini,
-.button[tall=mini],
-.button.tall-mini,
-button.button[tall=mini],
-button.button.tall-mini,
-input[type=button][tall=mini],
-input[type=button].tall-mini,
-input[type=submit][tall=mini],
-input[type=submit].tall-mini {
-  min-height: var(--sld-tall-mini) !important;
-}
-button[tall=small], button.tall-small,
-.button[tall=small],
-.button.tall-small,
-button.button[tall=small],
-button.button.tall-small,
-input[type=button][tall=small],
-input[type=button].tall-small,
-input[type=submit][tall=small],
-input[type=submit].tall-small {
-  min-height: var(--sld-tall-small) !important;
-}
-button[tall=med], button.tall-med,
-.button[tall=med],
-.button.tall-med,
-button.button[tall=med],
-button.button.tall-med,
-input[type=button][tall=med],
-input[type=button].tall-med,
-input[type=submit][tall=med],
-input[type=submit].tall-med {
-  min-height: var(--sld-tall-med) !important;
-}
-button[tall=kind], button.tall-kind,
-.button[tall=kind],
-.button.tall-kind,
-button.button[tall=kind],
-button.button.tall-kind,
-input[type=button][tall=kind],
-input[type=button].tall-kind,
-input[type=submit][tall=kind],
-input[type=submit].tall-kind {
-  min-height: var(--sld-tall-kind) !important;
-}
-button[tall=auto], button.tall-auto,
-.button[tall=auto],
-.button.tall-auto,
-button.button[tall=auto],
-button.button.tall-auto,
-input[type=button][tall=auto],
-input[type=button].tall-auto,
-input[type=submit][tall=auto],
-input[type=submit].tall-auto {
-  min-height: var(--sld-tall-auto) !important;
-}
-button[tall=default], button.tall-default,
-.button[tall=default],
-.button.tall-default,
-button.button[tall=default],
-button.button.tall-default,
-input[type=button][tall=default],
-input[type=button].tall-default,
-input[type=submit][tall=default],
-input[type=submit].tall-default {
-  min-height: var(--sld-tall-default) !important;
-}
-button[variant*=square], button[square=true], button.square,
-.button[variant*=square],
-.button[square=true],
-.button.square,
-button.button[variant*=square],
-button.button[square=true],
-button.button.square,
-input[type=button][variant*=square],
-input[type=button][square=true],
-input[type=button].square,
-input[type=submit][variant*=square],
-input[type=submit][square=true],
-input[type=submit].square {
-  aspect-ratio: 1/1 !important;
-  height: auto;
-}
-button[variant*=rounded], button[rounded=true], button.rounded,
-.button[variant*=rounded],
-.button[rounded=true],
-.button.rounded,
-button.button[variant*=rounded],
-button.button[rounded=true],
-button.button.rounded,
-input[type=button][variant*=rounded],
-input[type=button][rounded=true],
-input[type=button].rounded,
-input[type=submit][variant*=rounded],
-input[type=submit][rounded=true],
-input[type=submit].rounded {
-  border-radius: 50%;
-}
-button[variant*=bordered], button[bordered=true], button.bordered,
-.button[variant*=bordered],
-.button[bordered=true],
-.button.bordered,
-button.button[variant*=bordered],
-button.button[bordered=true],
-button.button.bordered,
-input[type=button][variant*=bordered],
-input[type=button][bordered=true],
-input[type=button].bordered,
-input[type=submit][variant*=bordered],
-input[type=submit][bordered=true],
-input[type=submit].bordered {
+.slotui-button[variant*=bordered], .slotui-button[bordered=true], .slotui-button.bordered,
+button.slotui-button[variant*=bordered],
+button.slotui-button[bordered=true],
+button.slotui-button.bordered,
+input[type=button].slotui-button[variant*=bordered],
+input[type=button].slotui-button[bordered=true],
+input[type=button].slotui-button.bordered,
+input[type=submit].slotui-button[variant*=bordered],
+input[type=submit].slotui-button[bordered=true],
+input[type=submit].slotui-button.bordered {
   color: var(--sld-color-foreground);
   border: var(--sld-button-border-width) solid var(--sld-button-border-color);
   box-shadow: var(--sld-elevation-1);
   background-color: var(--sld-button-background);
 }
-button[variant*=bordered]:hover, button[bordered=true]:hover, button.bordered:hover,
-.button[variant*=bordered]:hover,
-.button[bordered=true]:hover,
-.button.bordered:hover,
-button.button[variant*=bordered]:hover,
-button.button[bordered=true]:hover,
-button.button.bordered:hover,
-input[type=button][variant*=bordered]:hover,
-input[type=button][bordered=true]:hover,
-input[type=button].bordered:hover,
-input[type=submit][variant*=bordered]:hover,
-input[type=submit][bordered=true]:hover,
-input[type=submit].bordered:hover {
+.slotui-button[variant*=bordered]:hover, .slotui-button[bordered=true]:hover, .slotui-button.bordered:hover,
+button.slotui-button[variant*=bordered]:hover,
+button.slotui-button[bordered=true]:hover,
+button.slotui-button.bordered:hover,
+input[type=button].slotui-button[variant*=bordered]:hover,
+input[type=button].slotui-button[bordered=true]:hover,
+input[type=button].slotui-button.bordered:hover,
+input[type=submit].slotui-button[variant*=bordered]:hover,
+input[type=submit].slotui-button[bordered=true]:hover,
+input[type=submit].slotui-button.bordered:hover {
   border-color: var(--sld-color-primary);
   box-shadow: var(--sld-button-hover-shadow);
 }
-button[variant*=bordered]:focus, button[variant*=bordered]:active, button[bordered=true]:focus, button[bordered=true]:active, button.bordered:focus, button.bordered:active,
-.button[variant*=bordered]:focus,
-.button[variant*=bordered]:active,
-.button[bordered=true]:focus,
-.button[bordered=true]:active,
-.button.bordered:focus,
-.button.bordered:active,
-button.button[variant*=bordered]:focus,
-button.button[variant*=bordered]:active,
-button.button[bordered=true]:focus,
-button.button[bordered=true]:active,
-button.button.bordered:focus,
-button.button.bordered:active,
-input[type=button][variant*=bordered]:focus,
-input[type=button][variant*=bordered]:active,
-input[type=button][bordered=true]:focus,
-input[type=button][bordered=true]:active,
-input[type=button].bordered:focus,
-input[type=button].bordered:active,
-input[type=submit][variant*=bordered]:focus,
-input[type=submit][variant*=bordered]:active,
-input[type=submit][bordered=true]:focus,
-input[type=submit][bordered=true]:active,
-input[type=submit].bordered:focus,
-input[type=submit].bordered:active {
+.slotui-button[variant*=bordered]:focus, .slotui-button[variant*=bordered]:active, .slotui-button[bordered=true]:focus, .slotui-button[bordered=true]:active, .slotui-button.bordered:focus, .slotui-button.bordered:active,
+button.slotui-button[variant*=bordered]:focus,
+button.slotui-button[variant*=bordered]:active,
+button.slotui-button[bordered=true]:focus,
+button.slotui-button[bordered=true]:active,
+button.slotui-button.bordered:focus,
+button.slotui-button.bordered:active,
+input[type=button].slotui-button[variant*=bordered]:focus,
+input[type=button].slotui-button[variant*=bordered]:active,
+input[type=button].slotui-button[bordered=true]:focus,
+input[type=button].slotui-button[bordered=true]:active,
+input[type=button].slotui-button.bordered:focus,
+input[type=button].slotui-button.bordered:active,
+input[type=submit].slotui-button[variant*=bordered]:focus,
+input[type=submit].slotui-button[variant*=bordered]:active,
+input[type=submit].slotui-button[bordered=true]:focus,
+input[type=submit].slotui-button[bordered=true]:active,
+input[type=submit].slotui-button.bordered:focus,
+input[type=submit].slotui-button.bordered:active {
   border-color: var(--sld-button-active-border-color);
   box-shadow: var(--sld-button-active-shadow);
 }
-button[variant*=contained], button[contained=true], button.contained,
-.button[variant*=contained],
-.button[contained=true],
-.button.contained,
-button.button[variant*=contained],
-button.button[contained=true],
-button.button.contained,
-input[type=button][variant*=contained],
-input[type=button][contained=true],
-input[type=button].contained,
-input[type=submit][variant*=contained],
-input[type=submit][contained=true],
-input[type=submit].contained {
+.slotui-button[variant*=contained], .slotui-button[contained=true], .slotui-button.contained,
+button.slotui-button[variant*=contained],
+button.slotui-button[contained=true],
+button.slotui-button.contained,
+input[type=button].slotui-button[variant*=contained],
+input[type=button].slotui-button[contained=true],
+input[type=button].slotui-button.contained,
+input[type=submit].slotui-button[variant*=contained],
+input[type=submit].slotui-button[contained=true],
+input[type=submit].slotui-button.contained {
   border: var(--sld-button-border-width) solid var(--sld-button-border-color);
   color: var(--sld-color-on-primary);
   background-color: var(--sld-button-contained-background);
   background-clip: padding-box;
   box-shadow: var(--sld-elevation-1);
 }
-button[variant*=contained]:hover, button[contained=true]:hover, button.contained:hover,
-.button[variant*=contained]:hover,
-.button[contained=true]:hover,
-.button.contained:hover,
-button.button[variant*=contained]:hover,
-button.button[contained=true]:hover,
-button.button.contained:hover,
-input[type=button][variant*=contained]:hover,
-input[type=button][contained=true]:hover,
-input[type=button].contained:hover,
-input[type=submit][variant*=contained]:hover,
-input[type=submit][contained=true]:hover,
-input[type=submit].contained:hover {
+.slotui-button[variant*=contained]:hover, .slotui-button[contained=true]:hover, .slotui-button.contained:hover,
+button.slotui-button[variant*=contained]:hover,
+button.slotui-button[contained=true]:hover,
+button.slotui-button.contained:hover,
+input[type=button].slotui-button[variant*=contained]:hover,
+input[type=button].slotui-button[contained=true]:hover,
+input[type=button].slotui-button.contained:hover,
+input[type=submit].slotui-button[variant*=contained]:hover,
+input[type=submit].slotui-button[contained=true]:hover,
+input[type=submit].slotui-button.contained:hover {
   background-color: var(--sld-color-secondary);
   color: var(--sld-color-on-secondary);
 }
-button[variant*=contained]:focus, button[variant*=contained]:active, button[contained=true]:focus, button[contained=true]:active, button.contained:focus, button.contained:active,
-.button[variant*=contained]:focus,
-.button[variant*=contained]:active,
-.button[contained=true]:focus,
-.button[contained=true]:active,
-.button.contained:focus,
-.button.contained:active,
-button.button[variant*=contained]:focus,
-button.button[variant*=contained]:active,
-button.button[contained=true]:focus,
-button.button[contained=true]:active,
-button.button.contained:focus,
-button.button.contained:active,
-input[type=button][variant*=contained]:focus,
-input[type=button][variant*=contained]:active,
-input[type=button][contained=true]:focus,
-input[type=button][contained=true]:active,
-input[type=button].contained:focus,
-input[type=button].contained:active,
-input[type=submit][variant*=contained]:focus,
-input[type=submit][variant*=contained]:active,
-input[type=submit][contained=true]:focus,
-input[type=submit][contained=true]:active,
-input[type=submit].contained:focus,
-input[type=submit].contained:active {
+.slotui-button[variant*=contained]:focus, .slotui-button[variant*=contained]:active, .slotui-button[contained=true]:focus, .slotui-button[contained=true]:active, .slotui-button.contained:focus, .slotui-button.contained:active,
+button.slotui-button[variant*=contained]:focus,
+button.slotui-button[variant*=contained]:active,
+button.slotui-button[contained=true]:focus,
+button.slotui-button[contained=true]:active,
+button.slotui-button.contained:focus,
+button.slotui-button.contained:active,
+input[type=button].slotui-button[variant*=contained]:focus,
+input[type=button].slotui-button[variant*=contained]:active,
+input[type=button].slotui-button[contained=true]:focus,
+input[type=button].slotui-button[contained=true]:active,
+input[type=button].slotui-button.contained:focus,
+input[type=button].slotui-button.contained:active,
+input[type=submit].slotui-button[variant*=contained]:focus,
+input[type=submit].slotui-button[variant*=contained]:active,
+input[type=submit].slotui-button[contained=true]:focus,
+input[type=submit].slotui-button[contained=true]:active,
+input[type=submit].slotui-button.contained:focus,
+input[type=submit].slotui-button.contained:active {
   background-color: var(--sld-color-tertiary);
   color: var(--sld-color-on-tertiary);
   box-shadow: var(--sld-button-active-shadow);
 }
-button[variant*=link], button[link=true], button.link, button[role=link],
-.button[variant*=link],
-.button[link=true],
-.button.link,
-.button[role=link],
-button.button[variant*=link],
-button.button[link=true],
-button.button.link,
-button.button[role=link],
-input[type=button][variant*=link],
-input[type=button][link=true],
-input[type=button].link,
-input[type=button][role=link],
-input[type=submit][variant*=link],
-input[type=submit][link=true],
-input[type=submit].link,
-input[type=submit][role=link] {
+.slotui-button[variant*=link], .slotui-button.link, .slotui-button[role=link],
+button.slotui-button[variant*=link],
+button.slotui-button.link,
+button.slotui-button[role=link],
+input[type=button].slotui-button[variant*=link],
+input[type=button].slotui-button.link,
+input[type=button].slotui-button[role=link],
+input[type=submit].slotui-button[variant*=link],
+input[type=submit].slotui-button.link,
+input[type=submit].slotui-button[role=link] {
   color: var(--sld-color-primary);
   text-decoration: underline;
   text-underline-offset: 0.35rem;
@@ -1038,199 +692,151 @@ input[type=submit][role=link] {
   cursor: pointer;
   border: none;
 }
-button[variant*=link]:hover, button[link=true]:hover, button.link:hover, button[role=link]:hover,
-.button[variant*=link]:hover,
-.button[link=true]:hover,
-.button.link:hover,
-.button[role=link]:hover,
-button.button[variant*=link]:hover,
-button.button[link=true]:hover,
-button.button.link:hover,
-button.button[role=link]:hover,
-input[type=button][variant*=link]:hover,
-input[type=button][link=true]:hover,
-input[type=button].link:hover,
-input[type=button][role=link]:hover,
-input[type=submit][variant*=link]:hover,
-input[type=submit][link=true]:hover,
-input[type=submit].link:hover,
-input[type=submit][role=link]:hover {
+.slotui-button[variant*=link]:hover, .slotui-button.link:hover, .slotui-button[role=link]:hover,
+button.slotui-button[variant*=link]:hover,
+button.slotui-button.link:hover,
+button.slotui-button[role=link]:hover,
+input[type=button].slotui-button[variant*=link]:hover,
+input[type=button].slotui-button.link:hover,
+input[type=button].slotui-button[role=link]:hover,
+input[type=submit].slotui-button[variant*=link]:hover,
+input[type=submit].slotui-button.link:hover,
+input[type=submit].slotui-button[role=link]:hover {
   text-decoration: underline;
 }
-button[variant*=link]:focus, button[variant*=link]:active, button[link=true]:focus, button[link=true]:active, button.link:focus, button.link:active, button[role=link]:focus, button[role=link]:active,
-.button[variant*=link]:focus,
-.button[variant*=link]:active,
-.button[link=true]:focus,
-.button[link=true]:active,
-.button.link:focus,
-.button.link:active,
-.button[role=link]:focus,
-.button[role=link]:active,
-button.button[variant*=link]:focus,
-button.button[variant*=link]:active,
-button.button[link=true]:focus,
-button.button[link=true]:active,
-button.button.link:focus,
-button.button.link:active,
-button.button[role=link]:focus,
-button.button[role=link]:active,
-input[type=button][variant*=link]:focus,
-input[type=button][variant*=link]:active,
-input[type=button][link=true]:focus,
-input[type=button][link=true]:active,
-input[type=button].link:focus,
-input[type=button].link:active,
-input[type=button][role=link]:focus,
-input[type=button][role=link]:active,
-input[type=submit][variant*=link]:focus,
-input[type=submit][variant*=link]:active,
-input[type=submit][link=true]:focus,
-input[type=submit][link=true]:active,
-input[type=submit].link:focus,
-input[type=submit].link:active,
-input[type=submit][role=link]:focus,
-input[type=submit][role=link]:active {
+.slotui-button[variant*=link]:focus, .slotui-button[variant*=link]:active, .slotui-button.link:focus, .slotui-button.link:active, .slotui-button[role=link]:focus, .slotui-button[role=link]:active,
+button.slotui-button[variant*=link]:focus,
+button.slotui-button[variant*=link]:active,
+button.slotui-button.link:focus,
+button.slotui-button.link:active,
+button.slotui-button[role=link]:focus,
+button.slotui-button[role=link]:active,
+input[type=button].slotui-button[variant*=link]:focus,
+input[type=button].slotui-button[variant*=link]:active,
+input[type=button].slotui-button.link:focus,
+input[type=button].slotui-button.link:active,
+input[type=button].slotui-button[role=link]:focus,
+input[type=button].slotui-button[role=link]:active,
+input[type=submit].slotui-button[variant*=link]:focus,
+input[type=submit].slotui-button[variant*=link]:active,
+input[type=submit].slotui-button.link:focus,
+input[type=submit].slotui-button.link:active,
+input[type=submit].slotui-button[role=link]:focus,
+input[type=submit].slotui-button[role=link]:active {
   text-decoration: underline;
   outline: none;
   box-shadow: none;
 }
-button[variant*=naked], button[naked=true], button.naked,
-.button[variant*=naked],
-.button[naked=true],
-.button.naked,
-button.button[variant*=naked],
-button.button[naked=true],
-button.button.naked,
-input[type=button][variant*=naked],
-input[type=button][naked=true],
-input[type=button].naked,
-input[type=submit][variant*=naked],
-input[type=submit][naked=true],
-input[type=submit].naked {
+.slotui-button[variant*=naked]:hover, .slotui-button[naked=true]:hover, .slotui-button.naked:hover,
+button.slotui-button[variant*=naked]:hover,
+button.slotui-button[naked=true]:hover,
+button.slotui-button.naked:hover,
+input[type=button].slotui-button[variant*=naked]:hover,
+input[type=button].slotui-button[naked=true]:hover,
+input[type=button].slotui-button.naked:hover,
+input[type=submit].slotui-button[variant*=naked]:hover,
+input[type=submit].slotui-button[naked=true]:hover,
+input[type=submit].slotui-button.naked:hover {
+  border-color: var(--sld-hover-border-color);
+  background-color: var(--sld-background-disabled);
+}
+.slotui-button[variant*=naked], .slotui-button[naked=true], .slotui-button.naked,
+button.slotui-button[variant*=naked],
+button.slotui-button[naked=true],
+button.slotui-button.naked,
+input[type=button].slotui-button[variant*=naked],
+input[type=button].slotui-button[naked=true],
+input[type=button].slotui-button.naked,
+input[type=submit].slotui-button[variant*=naked],
+input[type=submit].slotui-button[naked=true],
+input[type=submit].slotui-button.naked {
   color: inherit;
   background-color: transparent;
   border: 0px solid transparent;
   cursor: pointer;
 }
-button[variant*=naked]:hover, button[naked=true]:hover, button.naked:hover,
-.button[variant*=naked]:hover,
-.button[naked=true]:hover,
-.button.naked:hover,
-button.button[variant*=naked]:hover,
-button.button[naked=true]:hover,
-button.button.naked:hover,
-input[type=button][variant*=naked]:hover,
-input[type=button][naked=true]:hover,
-input[type=button].naked:hover,
-input[type=submit][variant*=naked]:hover,
-input[type=submit][naked=true]:hover,
-input[type=submit].naked:hover {
-  border-color: var(--sld-hover-border-color);
-  background-color: var(--sld-background-disabled);
-}
-button[variant*=naked]:hover, button[naked=true]:hover, button.naked:hover,
-.button[variant*=naked]:hover,
-.button[naked=true]:hover,
-.button.naked:hover,
-button.button[variant*=naked]:hover,
-button.button[naked=true]:hover,
-button.button.naked:hover,
-input[type=button][variant*=naked]:hover,
-input[type=button][naked=true]:hover,
-input[type=button].naked:hover,
-input[type=submit][variant*=naked]:hover,
-input[type=submit][naked=true]:hover,
-input[type=submit].naked:hover {
+.slotui-button[variant*=naked]:hover, .slotui-button[naked=true]:hover, .slotui-button.naked:hover,
+button.slotui-button[variant*=naked]:hover,
+button.slotui-button[naked=true]:hover,
+button.slotui-button.naked:hover,
+input[type=button].slotui-button[variant*=naked]:hover,
+input[type=button].slotui-button[naked=true]:hover,
+input[type=button].slotui-button.naked:hover,
+input[type=submit].slotui-button[variant*=naked]:hover,
+input[type=submit].slotui-button[naked=true]:hover,
+input[type=submit].slotui-button.naked:hover {
   background-color: var(--sld-button-hover-background);
 }
-button[variant*=naked]:active, button[variant*=naked]:focus, button[naked=true]:active, button[naked=true]:focus, button.naked:active, button.naked:focus,
-.button[variant*=naked]:active,
-.button[variant*=naked]:focus,
-.button[naked=true]:active,
-.button[naked=true]:focus,
-.button.naked:active,
-.button.naked:focus,
-button.button[variant*=naked]:active,
-button.button[variant*=naked]:focus,
-button.button[naked=true]:active,
-button.button[naked=true]:focus,
-button.button.naked:active,
-button.button.naked:focus,
-input[type=button][variant*=naked]:active,
-input[type=button][variant*=naked]:focus,
-input[type=button][naked=true]:active,
-input[type=button][naked=true]:focus,
-input[type=button].naked:active,
-input[type=button].naked:focus,
-input[type=submit][variant*=naked]:active,
-input[type=submit][variant*=naked]:focus,
-input[type=submit][naked=true]:active,
-input[type=submit][naked=true]:focus,
-input[type=submit].naked:active,
-input[type=submit].naked:focus {
+.slotui-button[variant*=naked]:active, .slotui-button[variant*=naked]:focus, .slotui-button[naked=true]:active, .slotui-button[naked=true]:focus, .slotui-button.naked:active, .slotui-button.naked:focus,
+button.slotui-button[variant*=naked]:active,
+button.slotui-button[variant*=naked]:focus,
+button.slotui-button[naked=true]:active,
+button.slotui-button[naked=true]:focus,
+button.slotui-button.naked:active,
+button.slotui-button.naked:focus,
+input[type=button].slotui-button[variant*=naked]:active,
+input[type=button].slotui-button[variant*=naked]:focus,
+input[type=button].slotui-button[naked=true]:active,
+input[type=button].slotui-button[naked=true]:focus,
+input[type=button].slotui-button.naked:active,
+input[type=button].slotui-button.naked:focus,
+input[type=submit].slotui-button[variant*=naked]:active,
+input[type=submit].slotui-button[variant*=naked]:focus,
+input[type=submit].slotui-button[naked=true]:active,
+input[type=submit].slotui-button[naked=true]:focus,
+input[type=submit].slotui-button.naked:active,
+input[type=submit].slotui-button.naked:focus {
   background-color: transparent;
   border: 0.5px solid transparent;
   color: inherit;
 }
-button[variant*=flat], button[flat=true], button.flat,
-.button[variant*=flat],
-.button[flat=true],
-.button.flat,
-button.button[variant*=flat],
-button.button[flat=true],
-button.button.flat,
-input[type=button][variant*=flat],
-input[type=button][flat=true],
-input[type=button].flat,
-input[type=submit][variant*=flat],
-input[type=submit][flat=true],
-input[type=submit].flat {
+.slotui-button[variant*=flat], .slotui-button[flat=true], .slotui-button.flat,
+button.slotui-button[variant*=flat],
+button.slotui-button[flat=true],
+button.slotui-button.flat,
+input[type=button].slotui-button[variant*=flat],
+input[type=button].slotui-button[flat=true],
+input[type=button].slotui-button.flat,
+input[type=submit].slotui-button[variant*=flat],
+input[type=submit].slotui-button[flat=true],
+input[type=submit].slotui-button.flat {
   color: inherit;
   background-color: transparent;
   border: none;
   border-radius: 0;
   cursor: pointer;
 }
-button[variant*=flat]:hover, button[flat=true]:hover, button.flat:hover,
-.button[variant*=flat]:hover,
-.button[flat=true]:hover,
-.button.flat:hover,
-button.button[variant*=flat]:hover,
-button.button[flat=true]:hover,
-button.button.flat:hover,
-input[type=button][variant*=flat]:hover,
-input[type=button][flat=true]:hover,
-input[type=button].flat:hover,
-input[type=submit][variant*=flat]:hover,
-input[type=submit][flat=true]:hover,
-input[type=submit].flat:hover {
+.slotui-button[variant*=flat]:hover, .slotui-button[flat=true]:hover, .slotui-button.flat:hover,
+button.slotui-button[variant*=flat]:hover,
+button.slotui-button[flat=true]:hover,
+button.slotui-button.flat:hover,
+input[type=button].slotui-button[variant*=flat]:hover,
+input[type=button].slotui-button[flat=true]:hover,
+input[type=button].slotui-button.flat:hover,
+input[type=submit].slotui-button[variant*=flat]:hover,
+input[type=submit].slotui-button[flat=true]:hover,
+input[type=submit].slotui-button.flat:hover {
   background-color: var(--sld-button-hover-background);
 }
-button[variant*=flat]:active, button[variant*=flat]:focus, button[flat=true]:active, button[flat=true]:focus, button.flat:active, button.flat:focus,
-.button[variant*=flat]:active,
-.button[variant*=flat]:focus,
-.button[flat=true]:active,
-.button[flat=true]:focus,
-.button.flat:active,
-.button.flat:focus,
-button.button[variant*=flat]:active,
-button.button[variant*=flat]:focus,
-button.button[flat=true]:active,
-button.button[flat=true]:focus,
-button.button.flat:active,
-button.button.flat:focus,
-input[type=button][variant*=flat]:active,
-input[type=button][variant*=flat]:focus,
-input[type=button][flat=true]:active,
-input[type=button][flat=true]:focus,
-input[type=button].flat:active,
-input[type=button].flat:focus,
-input[type=submit][variant*=flat]:active,
-input[type=submit][variant*=flat]:focus,
-input[type=submit][flat=true]:active,
-input[type=submit][flat=true]:focus,
-input[type=submit].flat:active,
-input[type=submit].flat:focus {
+.slotui-button[variant*=flat]:active, .slotui-button[variant*=flat]:focus, .slotui-button[flat=true]:active, .slotui-button[flat=true]:focus, .slotui-button.flat:active, .slotui-button.flat:focus,
+button.slotui-button[variant*=flat]:active,
+button.slotui-button[variant*=flat]:focus,
+button.slotui-button[flat=true]:active,
+button.slotui-button[flat=true]:focus,
+button.slotui-button.flat:active,
+button.slotui-button.flat:focus,
+input[type=button].slotui-button[variant*=flat]:active,
+input[type=button].slotui-button[variant*=flat]:focus,
+input[type=button].slotui-button[flat=true]:active,
+input[type=button].slotui-button[flat=true]:focus,
+input[type=button].slotui-button.flat:active,
+input[type=button].slotui-button.flat:focus,
+input[type=submit].slotui-button[variant*=flat]:active,
+input[type=submit].slotui-button[variant*=flat]:focus,
+input[type=submit].slotui-button[flat=true]:active,
+input[type=submit].slotui-button[flat=true]:focus,
+input[type=submit].slotui-button.flat:active,
+input[type=submit].slotui-button.flat:focus {
   background-color: transparent;
   border: none;
   border-radius: 0;