@obosbbl/grunnmuren-tailwind 2.4.9 → 2.4.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-tailwind",
-  "version": "2.4.9",
+  "version": "2.4.11",
   "description": "Grunnmuren Tailwind preset",
   "license": "MIT",
   "repository": {

package/tailwind-base.css

@@ -174,54 +174,50 @@
   }
 }
 
-@utility layout-subgrid-* {
-  @apply layout-grid-gap-x grid;
-}
-
 @utility layout-subgrid-1 {
-  @apply grid-cols-1;
+  @apply layout-grid-gap-x grid grid-cols-1;
 }
 @utility layout-subgrid-2 {
-  @apply grid-cols-2;
+  @apply layout-grid-gap-x grid grid-cols-2;
 }
 @utility layout-subgrid-3 {
-  @apply grid-cols-3;
+  @apply layout-grid-gap-x grid grid-cols-3;
 }
 @utility layout-subgrid-4 {
-  @apply grid-cols-4;
+  @apply layout-grid-gap-x grid grid-cols-4;
 }
 @utility layout-subgrid-5 {
-  @apply grid-cols-5;
+  @apply layout-grid-gap-x grid grid-cols-5;
 }
 @utility layout-subgrid-6 {
-  @apply grid-cols-6;
+  @apply layout-grid-gap-x grid grid-cols-6;
 }
 @utility layout-subgrid-7 {
-  @apply grid-cols-7;
+  @apply layout-grid-gap-x grid grid-cols-7;
 }
 @utility layout-subgrid-8 {
-  @apply grid-cols-8;
+  @apply layout-grid-gap-x grid grid-cols-8;
 }
 @utility layout-subgrid-9 {
-  @apply grid-cols-9;
+  @apply layout-grid-gap-x grid grid-cols-9;
 }
 @utility layout-subgrid-10 {
-  @apply grid-cols-10;
+  @apply layout-grid-gap-x grid grid-cols-10;
 }
 @utility layout-subgrid-11 {
-  @apply grid-cols-11;
+  @apply layout-grid-gap-x grid grid-cols-11;
 }
 @utility layout-subgrid-12 {
-  @apply grid-cols-12;
+  @apply layout-grid-gap-x grid grid-cols-12;
 }
 @utility layout-subgrid-13 {
-  @apply grid-cols-13;
+  @apply layout-grid-gap-x grid grid-cols-13;
 }
 @utility layout-subgrid-14 {
-  @apply grid-cols-14;
+  @apply layout-grid-gap-x grid grid-cols-14;
 }
 @utility layout-subgrid-full {
-  @apply layout-subgrid-14;
+  @apply layout-grid-gap-x layout-subgrid-14 grid;
 }
 
 @utility layout-gap-x {
@@ -304,6 +300,73 @@
   @apply ring-focus ring-offset-2;
 }
 
+/*** Pagination component styles
+ *
+ * These have to sit in the utilities layer (not `@layer components`) because
+ * they override Button's cva-generated utility classes — `.transition-colors`
+ * and `.outline-white`. Rules in the components layer are emitted before
+ * utilities and always lose the cascade regardless of selector specificity. */
+@utility gm-pagination {
+  @apply flex items-center justify-center gap-2;
+  /* The list is the container that drives the responsive hide of the
+     outermost page slots — see `[data-outer]` below. */
+  container-type: inline-size;
+
+  /* Every <li> slot is fixed 44px wide and doesn't shrink — keeps the layout
+     stable when an ellipsis is swapped in for a page number. */
+  & > li {
+    @apply w-11 shrink-0;
+  }
+
+  /* Ellipsis slot — flex-centered "…" with an sr-only label describing the
+     skipped range. */
+  & > li[data-slot='ellipsis'] {
+    @apply flex size-11 items-center justify-center;
+
+    /* The label span is the one without `aria-hidden` (the visible "…" has
+       it). Selecting via the attribute absence avoids adding another marker. */
+    & > span:not([aria-hidden]) {
+      @apply sr-only;
+    }
+  }
+
+  /* Page-number buttons hold text, not an icon — force a square 44×44
+     (the Button `isIconOnly` variant is for icons). `transition-none`
+     prevents the hover-colour transition from flickering when rapid clicks
+     change which button is active. `:not(:has(svg))` distinguishes them
+     from prev/next which contain a chevron icon. */
+  & [data-slot='button']:not(:has(svg)) {
+    @apply size-11 transition-none;
+  }
+
+  /* color="white" sets outline-white for focus — invisible on white page
+     backgrounds. Force black via this higher-specificity selector so we
+     don't fight cva ordering inside Button. */
+  & [data-slot='button']:focus-visible {
+    @apply outline-black;
+  }
+
+  /* At a boundary, prev/next is rendered as a `<button>` (no href in JSX),
+     and our manual aria-disabled passes through (RACButton's useButton
+     forwards it, unlike RACLink which strips it). */
+  & [data-slot='button'][aria-disabled='true'] {
+    @apply cursor-default opacity-30;
+
+    &:hover {
+      @apply bg-white;
+    }
+  }
+
+  /* When the list is narrower than its full 8-slot width (~408px), hide the
+     two outermost page items — `data-outer` is set in JS on the visiblePages
+     entries farthest from the current page. */
+  @container (max-width: 27rem) {
+    & [data-outer] {
+      display: none;
+    }
+  }
+}
+
 /** Hides the scrollbar visually */
 @utility scrollbar-hidden {
   /* For IE, Edge and Firefox */

package/tailwind-typography.css

@@ -195,7 +195,7 @@
     }
 
     &:where(blockquote) {
-      @apply before:font-display grid grid-cols-[2.25rem_1fr] pt-4 text-[1rem]/[1.625rem] font-medium italic before:text-[3rem]/[1.375rem] before:not-italic before:content-["“"] lg:text-[1rem]/[1.6875rem];
+      @apply blockquote;
       margin-top: 1.6em;
       margin-bottom: 1.6em;
     }