@rysinal/heroui-vue-styles 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rysinal/heroui-vue-styles",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Styles for HeroUI Vue components",
   "keywords": [
     "heroui",
@@ -48,7 +48,7 @@
     "@tailwindcss/vite": "^4.2.4",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.8.3",
-    "@rysinal/heroui-vue-standard": "0.0.4"
+    "@rysinal/heroui-vue-standard": "0.0.5"
   },
   "peerDependencies": {
     "tailwindcss": ">=4.0.0"

package/src/components/accordion.css

@@ -22,7 +22,13 @@
 }
 
 .accordion__indicator {
-  @apply ml-auto size-4 shrink-0 text-muted;
+  @apply ml-auto inline-flex size-4 shrink-0 items-center justify-center text-muted;
+  line-height: 1;
+  transform-origin: center;
+
+  & > svg {
+    @apply block size-full shrink-0;
+  }
 
   /**
    * Transitions

package/src/components/alert-dialog.css

@@ -217,9 +217,13 @@
 /**
  * Element: heading - the main title text
  */
-.alert-dialog__heading {
+.alert-dialog__heading,
+.alert-dialog__dialog .alert-dialog__heading {
   @apply align-middle;
   @apply text-base font-medium text-foreground;
+  margin: 0;
+  border: 0;
+  padding: 0;
 }
 
 /**

package/src/components/button.css

@@ -156,3 +156,7 @@
 .button--full-width {
   @apply w-full;
 }
+
+.button.w-full {
+  width: 100%;
+}

package/src/components/disclosure.css

@@ -3,8 +3,10 @@
   @apply relative;
 }
 
-.disclosure__heading {
+.disclosure .disclosure__heading {
   @apply flex;
+  margin: 0;
+  font: inherit;
 }
 
 .disclosure__trigger {
@@ -13,19 +15,25 @@
 
   /* Focus state */
   &:focus-visible:not(:focus),
-  &[data-focus-visible="true"] {
+  &[data-focus-visible='true'] {
     @apply status-focused;
   }
 
   /* Disabled state */
   &:disabled,
-  &[aria-disabled="true"] {
+  &[aria-disabled='true'] {
     @apply status-disabled;
   }
 }
 
 .disclosure__indicator {
-  @apply ml-auto size-4 shrink-0 text-inherit;
+  @apply ml-auto inline-flex size-4 shrink-0 items-center justify-center text-inherit;
+  line-height: 1;
+  transform-origin: center;
+
+  & > svg {
+    @apply block size-full shrink-0;
+  }
 
   /**
    * Transitions
@@ -33,7 +41,7 @@
   @apply transition duration-250 motion-reduce:transition-none;
 
   /* Expanded state for indicator rotation */
-  &[data-expanded="true"] {
+  &[data-expanded='true'] {
     @apply -rotate-180;
   }
 }
@@ -52,7 +60,7 @@
     opacity 200ms var(--ease-out);
   @apply motion-reduce:transition-none;
 
-  &[data-expanded="true"] {
+  &[data-expanded='true'] {
     will-change: height, opacity;
     opacity: 1;
   }

package/src/components/drawer.css

@@ -43,7 +43,8 @@
  */
 .drawer__backdrop {
   @apply fixed inset-0 z-50;
-  @apply h-(--visual-viewport-height) w-full;
+  @apply w-full;
+  height: var(--visual-viewport-height, 100dvh);
   opacity: 1;
   transition: opacity 250ms cubic-bezier(0.32, 0.72, 0, 1);
 
@@ -94,7 +95,8 @@
 .drawer__content {
   @apply pointer-events-none;
   @apply fixed inset-0 z-50 flex;
-  @apply h-(--visual-viewport-height) w-full min-w-0;
+  @apply w-full min-w-0;
+  height: var(--visual-viewport-height, 100dvh);
 }
 
 /**
@@ -224,9 +226,13 @@
 /**
  * Element: heading - the main title text
  */
-.drawer__heading {
+.drawer__heading,
+.drawer__dialog .drawer__heading {
   @apply align-middle;
   @apply text-base font-medium text-foreground;
+  margin: 0;
+  border: 0;
+  padding: 0;
 }
 
 /**
@@ -241,6 +247,11 @@
   -webkit-overflow-scrolling: touch;
 }
 
+.drawer__header > :where(p):not([class]),
+.drawer__body > :where(p):not([class]) {
+  margin: 0;
+}
+
 /**
  * Element: footer - the bottom action section
  */

package/src/components/modal.css

@@ -63,6 +63,7 @@
   &[data-exiting="true"],
   &[data-entering="true"] {
     @apply will-change-[opacity];
+    --tw-animation-fill-mode: both;
     @apply motion-reduce:animate-none;
   }
 }
@@ -93,10 +94,11 @@
  */
 .modal__container {
   @apply flex flex-col items-center;
-  @apply h-(--visual-viewport-height) w-full min-w-0 flex-1;
+  @apply w-full min-w-0 flex-1;
   @apply p-4;
   @apply sm:w-fit sm:p-10;
   @apply pointer-events-none;
+  height: var(--visual-viewport-height, 100dvh);
 
   /* Entering animation */
   &[data-entering="true"] {
@@ -132,6 +134,7 @@
   &[data-exiting="true"],
   &[data-entering="true"] {
     @apply will-change-[opacity,transform];
+    --tw-animation-fill-mode: both;
     @apply motion-reduce:animate-none;
   }
 }
@@ -140,7 +143,7 @@
  * Modifier: container--scroll-outside
  */
 .modal__container--scroll-outside {
-  @apply overflow-y-auto;
+  @apply overflow-y-auto overscroll-contain;
   @apply pointer-events-auto;
   -webkit-overflow-scrolling: touch;
 }
@@ -195,7 +198,7 @@
  * Modifier: dialog--scroll-inside
  */
 .modal__dialog--scroll-inside {
-  @apply overflow-hidden;
+  @apply max-h-full overflow-hidden;
 }
 
 /**
@@ -265,9 +268,13 @@
 /**
  * Element: heading - the main title text
  */
-.modal__heading {
+.modal__heading,
+.modal__dialog .modal__heading {
   @apply align-middle;
   @apply text-base font-medium text-foreground;
+  margin: 0;
+  border: 0;
+  padding: 0;
 }
 
 /**
@@ -279,6 +286,30 @@
   @apply rounded-full select-none;
 }
 
+.modal__icon.bg-default {
+  background-color: var(--color-default);
+}
+
+.modal__icon.bg-accent-soft {
+  background-color: var(--color-accent-soft);
+}
+
+.modal__icon.bg-success-soft {
+  background-color: var(--color-success-soft);
+}
+
+.modal__icon.text-foreground {
+  color: var(--color-foreground);
+}
+
+.modal__icon.text-accent-soft-foreground {
+  color: var(--color-accent-soft-foreground);
+}
+
+.modal__icon.text-success-soft-foreground {
+  color: var(--color-success-soft-foreground);
+}
+
 /**
  * Element: body - the main content area
  */
@@ -288,11 +319,16 @@
   @apply my-0;
 }
 
+.modal__header > :where(p),
+.modal__body > :where(p) {
+  margin: 0;
+}
+
 /**
  * Modifier: body--scroll-inside
  */
 .modal__body--scroll-inside {
-  @apply overflow-y-auto;
+  @apply overflow-y-auto overscroll-contain;
   -webkit-overflow-scrolling: touch;
 }
 

package/src/components/popover.css

@@ -62,8 +62,14 @@
 }
 
 /* Popover heading */
-.popover__heading {
+.popover__heading,
+.popover .popover__heading {
   @apply font-medium;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  font-size: inherit;
+  line-height: inherit;
 }
 
 /* Popover trigger */