Refactor host vars and remove non-display props

src/components/alert/alert.scss

@@ -2,7 +2,6 @@
 
 :host {
   display: block;
-  border-radius: var(--sl-border-radius-medium);
 
   &[hidden] {
     display: none;

src/components/checkbox/checkbox.scss

@@ -2,7 +2,6 @@
 
 :host {
   display: inline-block;
-  cursor: pointer;
 }
 
 .checkbox {
@@ -13,7 +12,7 @@
   font-weight: var(--sl-input-font-weight);
   color: var(--sl-input-color);
   vertical-align: middle;
-  cursor: inherit;
+  cursor: pointer;
 }
 
 .checkbox__control {

src/components/color-picker/color-picker.scss

@@ -8,13 +8,13 @@
  * @prop --slider-handle-size: The diameter of the slider's handle.
  */
 :host {
-  display: inline-block;
-
   --grid-width: 260px;
   --grid-height: 200px;
   --grid-handle-size: 12px;
   --slider-height: 10px;
   --slider-handle-size: 12px;
+
+  display: inline-block;
 }
 
 .color-picker {

src/components/details/details.scss

@@ -7,12 +7,12 @@
  * @prop --show-timing-function: The timing function (easing) to use for the show transition.
  */
 :host {
-  display: block;
-
   --hide-duration: var(--sl-transition-medium);
   --hide-timing-function: ease;
   --show-duration: var(--sl-transition-medium);
   --show-timing-function: ease;
+
+  display: block;
 }
 
 .details {

src/components/input/input.scss

@@ -4,7 +4,6 @@
 
 :host {
   display: block;
-  cursor: text;
 }
 
 .input {
@@ -22,7 +21,7 @@
   vertical-align: middle;
   overflow: hidden;
   transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
-  cursor: inherit;
+  cursor: text;
 
   &:hover:not(.input--disabled) {
     background-color: var(--sl-input-background-color-hover);

src/components/progress-bar/progress-bar.scss

@@ -4,9 +4,9 @@
  * @prop height: The progress bar's height.
  */
 :host {
-  display: block;
-
   --height: 16px;
+
+  display: block;
 }
 
 .progress-bar {

src/components/progress-ring/progress-ring.scss

@@ -5,10 +5,10 @@
  * @prop --indicator-color: The indicator color.
  */
 :host {
-  display: inline-flex;
-
   --track-color: var(--sl-color-gray-90);
   --indicator-color: var(--sl-color-primary-50);
+
+  display: inline-flex;
 }
 
 .progress-ring {

src/components/radio/radio.scss

@@ -2,7 +2,6 @@
 
 :host {
   display: inline-block;
-  cursor: pointer;
 }
 
 .radio {
@@ -13,7 +12,7 @@
   font-weight: var(--sl-input-font-weight);
   color: var(--sl-input-color);
   vertical-align: middle;
-  cursor: inherit;
+  cursor: pointer;
 }
 
 .radio__icon {

src/components/rating/rating.scss

@@ -7,12 +7,12 @@
  * @prop --symbol-spacing: The spacing to use around symbols.
  */
 :host {
-  display: inline-block;
-
   --symbol-color: var(--sl-color-gray-85);
   --symbol-color-active: #ffbe00;
   --symbol-size: 1.2rem;
   --symbol-spacing: var(--sl-spacing-xxx-small);
+
+  display: inline-block;
 }
 
 .rating {

src/components/spinner/spinner.scss

@@ -6,11 +6,11 @@
  * @prop --stroke-width: The width of the indicator.
  */
 :host {
-  display: inline-flex;
-
   --track-color: transparent;
   --indicator-color: var(--sl-color-primary-50);
   --stroke-width: 2px;
+
+  display: inline-flex;
 }
 
 .spinner {

src/components/switch/switch.scss

@@ -7,7 +7,6 @@
   --width: calc(var(--height) * 2);
 
   display: inline-block;
-  cursor: pointer;
 }
 
 .switch {
@@ -18,7 +17,7 @@
   font-weight: var(--sl-input-font-weight);
   color: var(--sl-input-color);
   vertical-align: middle;
-  cursor: inherit;
+  cursor: pointer;
 }
 
 .switch__control {

src/components/tag/tag.scss

@@ -2,7 +2,6 @@
 
 :host {
   display: inline-block;
-  cursor: default;
 }
 
 .tag {
@@ -12,7 +11,7 @@
   line-height: 1;
   white-space: nowrap;
   user-select: none;
-  cursor: inherit;
+  cursor: default;
 }
 
 .tag__clear {

src/components/textarea/textarea.scss

@@ -4,7 +4,6 @@
 
 :host {
   display: block;
-  cursor: text;
 }
 
 .textarea {
@@ -20,7 +19,7 @@
   border: solid var(--sl-input-border-width) var(--sl-input-border-color);
   vertical-align: middle;
   transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;
-  cursor: inherit;
+  cursor: text;
 
   &:hover:not(.textarea--disabled) {
     background-color: var(--sl-input-background-color-hover);

src/components/tooltip/tooltip.scss

@@ -10,8 +10,6 @@
  * @prop --show-timing-function: The timing function (easing) to use for the show transition.
  */
 :host {
-  display: contents;
-
   --max-width: 20rem;
   --hide-delay: 0s;
   --hide-duration: 0.125s;
@@ -19,6 +17,8 @@
   --show-delay: 0.125s;
   --show-duration: 0.125s;
   --show-timing-function: ease;
+
+  display: contents;
 }
 
 .tooltip {