@acorex/styles 21.0.3-next.8 → 21.1.0-next.0

package/components/_action-item.css

@@ -27,7 +27,10 @@
     font-weight: bolder;
     text-transform: uppercase;
     padding-block: var(--ax-comp-action-item-padding-block, 0.25rem);
-    padding-inline: var(--ax-comp-action-item-padding-inline, calc(var(--ax-comp-action-item-padding-inline, 0.875rem) / 3 * 2));
+    padding-inline: var(
+      --ax-comp-action-item-padding-inline,
+      calc(var(--ax-comp-action-item-padding-inline, 0.875rem) / 3 * 2)
+    );
   }
   ax-divider {
     display: block;

package/components/_editor-container.css

@@ -2,14 +2,11 @@
 
 @layer base {
   .ax-editor-container {
-    @apply h-9 min-h-9 px-3 py-3 text-sm;
+    @apply rounded-default relative flex h-default min-h-default items-center justify-between overflow-hidden px-3 py-3 text-sm leading-5;
+
     .ax-content {
       @apply text-sm;
     }
-  }
-
-  .ax-editor-container {
-    @apply rounded-default relative flex h-9 min-h-9 items-center justify-between overflow-hidden px-3 py-3 text-sm leading-5;
 
     .ax-editor-container {
       @apply p-0;
@@ -23,26 +20,72 @@
     .ax-editor {
       font-size: inherit;
 
-      @apply w-full flex-1 py-2 outline-0 outline-transparent placeholder:opacity-50;
+      @apply w-full flex-1 py-2 outline-0 outline-transparent;
     }
     .ax-placeholder {
       @apply opacity-50;
     }
 
     &.ax-state-error {
-      @apply border-danger-600! focus-within:ring-danger-600/30!;
+      @apply border-danger-600!;
+      &:focus-within {
+        @apply outline-2 outline-offset-0 outline-danger-light;
+      }
     }
 
-    &:has(.ax-general-button-control, .ax-general-button-icon) {
-      @apply pe-1;
+    /* Keep end padding for spin/clear controls, but not when a suffix button is attached */
+    &:has(.ax-general-button-control, .ax-general-button-icon):not(:has(ax-suffix > ax-button)) {
+      @apply pe-2;
+    }
+
+    ax-suffix > ax-icon,
+    ax-prefix > ax-icon {
+      @apply text-muted;
     }
 
     ax-prefix,
     ax-suffix {
-      @apply flex items-center gap-2;
+      @apply flex items-center self-stretch gap-2;
+    }
+
+    ax-prefix:has(> ax-button),
+    ax-suffix:has(> ax-button) {
+      @apply items-stretch;
     }
+
     ax-prefix {
       @apply pe-2;
     }
   }
 }
+
+/* Components layer so these beat button size utilities and spin-button pe-2 */
+@layer components {
+  .ax-editor-container {
+    &:has(ax-prefix > ax-button),
+    &:has(ax-suffix > ax-button) {
+      @apply py-0;
+    }
+
+    &:has(ax-prefix > ax-button) {
+      @apply ps-0!;
+    }
+
+    &:has(ax-suffix > ax-button) {
+      @apply pe-0!;
+    }
+
+    ax-prefix > ax-button,
+    ax-suffix > ax-button {
+      @apply self-stretch shrink-0 rounded-none!;
+
+      > button {
+        @apply h-full min-h-0 rounded-[inherit]!;
+      }
+
+      &.ax-button-icon > button {
+        @apply aspect-square size-auto! h-full w-auto!;
+      }
+    }
+  }
+}

package/components/_general-button.css

@@ -7,7 +7,9 @@
     @apply disabled:cursor-not-allowed disabled:opacity-50;
     @apply text-text-default/50 hover:text-text-default/70;
     @apply hover:bg-bg-default/10;
-    @apply focus-visible:ring-primary/30 focus-visible:ring-3 focus-visible:outline-none;
+    &:focus-visible {
+      @apply ax-focus-ring;
+    }
     * {
       @apply cursor-[inherit];
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/styles",
-  "version": "21.0.3-next.8",
+  "version": "21.1.0-next.0",
   "main": "index.css",
   "author": "Ali Safari",
   "license": "ISC",
@@ -11,4 +11,4 @@
     "postcss": "^8.5.6",
     "tw-animate": "^1.0.3"
   }
-}
+}