fix: reset style priority

src/button/index.vue

@@ -86,21 +86,25 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 
 <style lang="scss" scoped>
 @use '../common/_partials';
+@use '../common/_reset';
 
+:where(.r-button) {
+  @include reset.button;
+}
+:where(a.r-button) {
+  text-decoration: none;
+}
 .r-button {
   --r-button-color: var(--r-common-text-color);
   --r-button-border-color: var(--r-button-color);
   --r-button-border-width: 1px;
   --r-button-border-dash: none;
-  appearance: none;
   display: inline-block;
   padding-block: var(--r-common-box-padding-block);
   padding-inline: var(--r-common-box-padding-inline);
-  border: none;
   color: var(--r-button-color);
   white-space: nowrap;
   text-align: center;
-  background-color: transparent;
   cursor: pointer;
   text-decoration-thickness: calc(var(--r-button-border-width) + 1px);
   &:focus {
@@ -151,7 +155,4 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
     font-size: var(--r-common-large-font-size);
   }
 }
-a.r-button {
-  text-decoration: none;
-}
 </style>

src/checkbox/checkbox-group.vue

@@ -52,9 +52,9 @@ provide(modelInjection, $$(model))
 </template>
 
 <style lang="scss" scoped>
-.r-checkbox-group {
-  margin: 0;
-  padding: 0;
-  border: none;
+@use '../common/_reset';
+
+:where(.r-checkbox-group) {
+  @include reset.fieldset;
 }
 </style>

src/checkbox/index.vue

@@ -135,6 +135,8 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 </template>
 
 <style lang="scss" scoped>
+@use '../common/_reset';
+
 .r-checkbox {
   --r-checkbox-border-color: var(--r-common-text-color);
   --r-checkbox-border-width: 1px;
@@ -152,10 +154,11 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
     text-decoration-line: line-through;
   }
 }
+:where(.r-checkbox__input) {
+  @include reset.input-checkbox;
+}
 .r-checkbox__input {
-  appearance: none;
   position: absolute;
-  margin: 0;
 }
 .r-checkbox__control {
   flex: none;

src/common/_reset.scss

@@ -0,0 +1,47 @@
+@mixin a {
+  text-decoration: none;
+}
+
+@mixin button {
+  appearance: none;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+}
+
+@mixin dialog {
+  padding: 0;
+  border: none;
+  background-color: transparent;
+}
+
+@mixin fieldset {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+
+@mixin input {
+  appearance: none;
+  border: none;
+  background-color: transparent;
+}
+
+@mixin input-checkbox {
+  appearance: none;
+  margin: 0;
+}
+
+@mixin input-range {
+  appearance: none;
+  margin: 0;
+}
+
+@mixin popover {
+  border: none;
+}
+
+@mixin textarea {
+  background: none;
+  resize: none;
+}

src/dialog/index.vue

@@ -119,12 +119,14 @@ const nestingGraphicsOptions = $computed(() => {
 </template>
 
 <style lang="scss" scoped>
+@use '../common/_reset';
+
+:where(.r-dialog) {
+  @include reset.dialog;
+}
 .r-dialog {
   max-width: min(90vw, 960px);
-  padding: 0;
-  border: none;
   color: var(--r-common-text-color);
-  background-color: transparent;
   &::backdrop {
     background-color: rgb(0 0 0 / 50%);
   }

src/input/index.vue

@@ -138,6 +138,8 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 </template>
 
 <style lang="scss" scoped>
+@use '../common/_reset';
+
 .r-input {
   --r-input-border-color: var(--r-common-text-color);
   --r-input-border-width: 1px;
@@ -160,14 +162,17 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
     width: auto;
   }
 }
+:where(.r-input__input) {
+  @include reset.input;
+}
+:where(textarea.r-input__input) {
+  @include reset.textarea;
+}
 .r-input__input {
-  appearance: none;
   width: 100%;
   padding-inline: var(--r-common-box-padding-inline);
-  border: none;
   color: var(--r-common-text-color);
   line-height: var(--r-input-line-height);
-  background-color: transparent;
   text-decoration-thickness: calc(var(--r-input-border-width) + 1px);
   &:focus {
     outline: none;
@@ -183,7 +188,5 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 }
 textarea.r-input__input {
   height: calc(var(--r-input-lines) * var(--r-input-line-height));
-  background: none;
-  resize: none;
 }
 </style>

src/link/index.vue

@@ -28,7 +28,11 @@ defineSlots<{
 
 <style lang="scss" scoped>
 @use '../common/_partials';
+@use '../common/_reset';
 
+:where(button.r-link) {
+  @include reset.button;
+}
 .r-link {
   --r-link-underline-width: 2px;
   text-decoration: none;
@@ -46,9 +50,6 @@ defineSlots<{
   }
 }
 button.r-link {
-  appearance: none;
-  border: none;
   color: var(--r-common-text-color);
-  background-color: transparent;
 }
 </style>

src/popover/index.vue

@@ -179,19 +179,20 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 </template>
 
 <style lang="scss" scoped>
+@use '../common/_reset';
+
 .r-popover {
   --r-popover-border-color: var(--r-common-text-color);
   --r-popover-border-width: 1px;
   position: relative;
   display: inline-block;
 }
+:where(.r-popover__anchor) {
+  @include reset.button;
+}
 .r-popover__anchor {
-  appearance: none;
   display: block;
-  padding: 0;
-  border: none;
   color: var(--r-common-text-color);
-  background-color: transparent;
 }
 .r-popover__content {
   position: absolute;

src/rate/index.vue

@@ -114,6 +114,8 @@ function click(event: MouseEvent) {
 </template>
 
 <style lang="scss" scoped>
+@use '../common/_reset';
+
 .r-rate {
   --r-rate-color: var(--r-common-primary-color);
   --r-rate-border-color: var(--r-common-text-color);
@@ -123,11 +125,12 @@ function click(event: MouseEvent) {
     cursor: not-allowed;
   }
 }
+:where(.r-rate__input) {
+  @include reset.input-range;
+}
 .r-rate__input {
-  appearance: none;
   width: calc((var(--r-rate-control-size) - 4) * 7 * 48 / 45 + 4);
   height: var(--r-rate-control-size);
-  margin: 0;
   opacity: 0;
   cursor: pointer;
   pointer-events: none;

src/select/index.vue

@@ -168,6 +168,8 @@ provide(labelsInjection, labels)
 </template>
 
 <style lang="scss" scoped>
+@use '../common/_reset';
+
 .r-select {
   --r-select-border-color: var(--r-common-text-color);
   --r-select-border-width: 1px;
@@ -181,14 +183,14 @@ provide(labelsInjection, labels)
     --r-select-border-width: 2px;
   }
 }
+:where(.r-select__input) {
+  @include reset.input;
+}
 .r-select__input {
-  appearance: none;
   width: 100%;
   padding-block: var(--r-common-box-padding-block);
   padding-inline: var(--r-common-box-padding-inline) calc(var(--r-common-box-padding-block) * 2 + var(--r-common-line-height));
-  border: none;
   color: var(--r-common-text-color);
-  background-color: transparent;
   &:focus {
     outline: none;
   }

src/switch/index.vue

@@ -96,6 +96,8 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 </template>
 
 <style lang="scss" scoped>
+@use '../common/_reset';
+
 .r-switch {
   --r-switch-border-color: var(--r-common-text-color);
   --r-switch-border-width: 1px;
@@ -113,10 +115,11 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
     text-decoration-line: line-through;
   }
 }
+:where(.r-switch__input) {
+  @include reset.input-checkbox;
+}
 .r-switch__input {
-  appearance: none;
   position: absolute;
-  margin: 0;
 }
 .r-switch__control {
   flex: none;

src/tabs/tab-anchor.vue

@@ -67,6 +67,8 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 </template>
 
 <style lang="scss" scoped>
+@use '../common/_reset';
+
 .r-tab-anchor {
   --r-tab-anchor-active-color: var(--r-common-primary-color);
   --r-tab-anchor-border-color: var(--r-common-text-color);
@@ -83,8 +85,10 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
     --r-tab-anchor-border-color: var(--r-tab-anchor-active-color);
   }
 }
+:where(.r-tab-anchor__button) {
+  @include reset.button;
+}
 .r-tab-anchor__button {
-  appearance: none;
   display: inline-block;
   padding-block: var(--r-common-box-padding-block);
   padding-inline: var(--r-common-box-padding-inline);

src/toast/index.vue

@@ -94,6 +94,11 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 </template>
 
 <style lang="scss" scoped>
+@use '../common/_reset';
+
+:where(.r-toast) {
+  @include reset.popover;
+}
 .r-toast {
   --r-toast-color: var(--r-common-text-color);
   position: fixed;
@@ -102,7 +107,6 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
   inset-inline-start: 50%;
   padding-block: var(--r-common-box-padding-block);
   padding-inline: var(--r-common-box-padding-inline);
-  border: none;
   color: var(--r-toast-color);
   transform: translate(-50%, -50%);
   &.primary {