@coopdigital/styles 1.22.0 → 1.23.1

package/dist/vars/colors.css

@@ -1 +1 @@
-:root{--color-brand-blue:#00a1cc;--color-blue-900:#002c3d;--color-blue-800:#00394e;--color-blue-700:#005878;--color-blue-500:#00729a;--color-blue-100:#ecf2fb;--color-blue:var(--color-blue-500);--color-text-link:var(--color-blue-500);--color-text-link-hover:var(--color-blue-800);--color-text-link-active:var(--color-blue-900);--color-text-link-visited:var(--color-blue-900);--color-teal-500:#0f8482;--color-teal:var(--color-teal-500);--color-purple-500:#8d44d8;--color-purple:var(--color-purple-500);--color-focus:var(--color-purple-500);--color-red-100:#fcf1f1;--color-red-500:#d12430;--color-red:var(--color-red-500);--color-green-100:#dcedc8;--color-green-500:#5b7f2e;--color-green:var(--color-green-500);--color-yellow-100:var(--color-tint-yellow);--color-yellow-500:var(--color-light-yellow);--color-yellow-900:var(--color-dark-yellow);--color-yellow:var(--color-light-yellow);--color-offer:var(--color-red-500);--color-error:var(--color-red-500);--color-error-light:var(--color-red-100);--color-alert:var(--color-yellow-500);--color-alert-light:var(--color-yellow-100);--color-success:var(--color-green-500);--color-success-light:var(--color-green-100);--color-white:#fff;--color-black:#000;--color-grey-warm-100:#f5f5f0;--color-grey-warm-500:#e5e3da;--color-grey-warm-900:#3a352f;--color-grey-warm:var(--color-grey-warm-500);--color-grey-cool-100:#f2f4f7;--color-grey-cool-500:#dde9ed;--color-grey-cool-900:#1f262c;--color-grey-cool:var(--color-grey-cool-500);--color-grey-900:#282828;--color-grey-800:#595959;--color-grey-700:#6e6e6e;--color-grey-600:#c4c4c4;--color-grey-500:#d8d8d8;--color-grey-400:#e6e6e6;--color-grey-300:#efefef;--color-grey-200:#f3f3f3;--color-grey-100:#fafafa;--color-grey:var(--color-grey-500);--color-text-default:var(--color-grey-900);--color-text-alt:var(--color-grey-800);--color-text-black:var(--color-black);--color-text-white:var(--color-white);--color-text-dark-blue:var(--color-dark-blue);--color-tint-purple:#fef2ff;--color-tint-pink:#ffeaf2;--color-tint-green:#f9fbdd;--color-tint-orange:#ffede0;--color-tint-red:#ffe8e9;--color-tint-yellow:#fff4d5;--color-tint-lilac:#f2f2ff;--color-tint-blue:#e6f6fa;--color-tint-grey:var(--color-grey-200);--color-tint-brown:var(--color-grey-warm-100);--color-light-purple:#f8beff;--color-light-pink:#ffaece;--color-light-green:#e1ec54;--color-light-orange:#ffb886;--color-light-red:#ffb1b4;--color-light-yellow:#ffc82b;--color-light-lilac:#bfbffd;--color-light-blue:#80d0e5;--color-dark-purple:#c164c9;--color-dark-pink:#f85792;--color-dark-green:#819c00;--color-dark-orange:#e85a00;--color-dark-red:#f14f57;--color-dark-yellow:#b78f1f;--color-dark-lilac:#6762f9;--color-dark-blue:#003057}
+:root{--color-brand-blue:#00a1cc;--color-blue-900:#002c3d;--color-blue-800:#00394e;--color-blue-700:#005878;--color-blue-500:#00729a;--color-blue-100:#ecf2fb;--color-blue:var(--color-blue-500);--color-text-link:var(--color-blue-500);--color-text-link-hover:var(--color-blue-800);--color-text-link-active:var(--color-blue-900);--color-text-link-visited:var(--color-blue-900);--color-teal-500:#0f8482;--color-teal:var(--color-teal-500);--color-purple-500:#8d44d8;--color-purple:var(--color-purple-500);--color-focus:var(--color-purple-500);--color-red-100:#fcf1f1;--color-red-500:#d12430;--color-red:var(--color-red-500);--color-green-100:#dcedc8;--color-green-500:#5b7f2e;--color-green:var(--color-green-500);--color-yellow-100:var(--color-tint-yellow);--color-yellow-500:var(--color-light-yellow);--color-yellow-900:var(--color-dark-yellow);--color-yellow:var(--color-light-yellow);--color-offer:var(--color-red-500);--color-error:var(--color-red-500);--color-error-light:var(--color-red-100);--color-alert:var(--color-yellow-500);--color-alert-light:var(--color-yellow-100);--color-success:var(--color-green-500);--color-success-light:var(--color-green-100);--color-white:#fff;--color-black:#000;--color-grey-warm-100:#f5f5f0;--color-grey-warm-500:#e5e3da;--color-grey-warm-900:#3a352f;--color-grey-warm:var(--color-grey-warm-500);--color-grey-cool-100:#f2f4f7;--color-grey-cool-500:#dde9ed;--color-grey-cool-900:#1f262c;--color-grey-cool:var(--color-grey-cool-500);--color-grey-900:#282828;--color-grey-800:#595959;--color-grey-700:#6e6e6e;--color-grey-600:#c4c4c4;--color-grey-500:#d8d8d8;--color-grey-400:#e6e6e6;--color-grey-300:#efefef;--color-grey-200:#f3f3f3;--color-grey-100:#fafafa;--color-grey:var(--color-grey-500);--color-text-default:var(--color-grey-900);--color-text-alt:var(--color-grey-800);--color-text-black:var(--color-black);--color-text-white:var(--color-white);--color-text-dark-blue:var(--color-dark-blue);--color-tint-purple:#fef2ff;--color-tint-pink:#ffeaf2;--color-tint-green:#f9fbdd;--color-tint-orange:#ffede0;--color-tint-red:#ffe8e9;--color-tint-yellow:#fff4d5;--color-tint-lilac:#f2f2ff;--color-tint-blue:#e6f6fa;--color-tint-grey:var(--color-grey-200);--color-tint-brown:var(--color-grey-warm-100);--color-light-purple:#f8beff;--color-light-pink:#ffaece;--color-light-green:#e1ec54;--color-light-orange:#ffb886;--color-light-red:#ffb1b4;--color-light-yellow:#ffc82b;--color-light-lilac:#bfbffd;--color-light-blue:#80d0e5;--color-dark-purple:#c164c9;--color-dark-pink:#f85792;--color-dark-green:#819c00;--color-dark-orange:#e85a00;--color-dark-red:#f14f57;--color-dark-yellow:#b78f1f;--color-dark-lilac:#6762f9;--color-dark-blue:#003057;--color-navy:var(--color-dark-blue)}

package/dist/vars.css

@@ -1 +1 @@
-:root{--color-brand-blue:#00a1cc;--color-blue-900:#002c3d;--color-blue-800:#00394e;--color-blue-700:#005878;--color-blue-500:#00729a;--color-blue-100:#ecf2fb;--color-blue:var(--color-blue-500);--color-text-link:var(--color-blue-500);--color-text-link-hover:var(--color-blue-800);--color-text-link-active:var(--color-blue-900);--color-text-link-visited:var(--color-blue-900);--color-teal-500:#0f8482;--color-teal:var(--color-teal-500);--color-purple-500:#8d44d8;--color-purple:var(--color-purple-500);--color-focus:var(--color-purple-500);--color-red-100:#fcf1f1;--color-red-500:#d12430;--color-red:var(--color-red-500);--color-green-100:#dcedc8;--color-green-500:#5b7f2e;--color-green:var(--color-green-500);--color-yellow-100:var(--color-tint-yellow);--color-yellow-500:var(--color-light-yellow);--color-yellow-900:var(--color-dark-yellow);--color-yellow:var(--color-light-yellow);--color-offer:var(--color-red-500);--color-error:var(--color-red-500);--color-error-light:var(--color-red-100);--color-alert:var(--color-yellow-500);--color-alert-light:var(--color-yellow-100);--color-success:var(--color-green-500);--color-success-light:var(--color-green-100);--color-white:#fff;--color-black:#000;--color-grey-warm-100:#f5f5f0;--color-grey-warm-500:#e5e3da;--color-grey-warm-900:#3a352f;--color-grey-warm:var(--color-grey-warm-500);--color-grey-cool-100:#f2f4f7;--color-grey-cool-500:#dde9ed;--color-grey-cool-900:#1f262c;--color-grey-cool:var(--color-grey-cool-500);--color-grey-900:#282828;--color-grey-800:#595959;--color-grey-700:#6e6e6e;--color-grey-600:#c4c4c4;--color-grey-500:#d8d8d8;--color-grey-400:#e6e6e6;--color-grey-300:#efefef;--color-grey-200:#f3f3f3;--color-grey-100:#fafafa;--color-grey:var(--color-grey-500);--color-text-default:var(--color-grey-900);--color-text-alt:var(--color-grey-800);--color-text-black:var(--color-black);--color-text-white:var(--color-white);--color-text-dark-blue:var(--color-dark-blue);--color-tint-purple:#fef2ff;--color-tint-pink:#ffeaf2;--color-tint-green:#f9fbdd;--color-tint-orange:#ffede0;--color-tint-red:#ffe8e9;--color-tint-yellow:#fff4d5;--color-tint-lilac:#f2f2ff;--color-tint-blue:#e6f6fa;--color-tint-grey:var(--color-grey-200);--color-tint-brown:var(--color-grey-warm-100);--color-light-purple:#f8beff;--color-light-pink:#ffaece;--color-light-green:#e1ec54;--color-light-orange:#ffb886;--color-light-red:#ffb1b4;--color-light-yellow:#ffc82b;--color-light-lilac:#bfbffd;--color-light-blue:#80d0e5;--color-dark-purple:#c164c9;--color-dark-pink:#f85792;--color-dark-green:#819c00;--color-dark-orange:#e85a00;--color-dark-red:#f14f57;--color-dark-yellow:#b78f1f;--color-dark-lilac:#6762f9;--color-dark-blue:#003057;--ui-shadow:0 2px 4px 0 #00000026;--ui-shadow-sm:0 2px 2px 0 #0000001a;--ui-shadow-hover:0 2px 4px 0 #00000040;--ui-transition-hover:.1s ease-out;--ui-transition-hover-property:background-color, color;--ui-border-radius-sm:4px;--ui-border-radius-md:6px;--ui-border-radius-lg:8px;--ui-border-radius-xl:12px;--ui-border-radius-2xl:16px;--ui-border-radius-3xl:24px;--ui-border-radius-full:calc(infinity * 1px);--ui-text-underline-offset:3px;--spacing-64:4rem;--spacing-60:3.75rem;--spacing-58:3.625rem;--spacing-56:3.5rem;--spacing-54:3.375rem;--spacing-52:3.25rem;--spacing-48:3rem;--spacing-40:2.5rem;--spacing-32:2rem;--spacing-24:1.5rem;--spacing-20:1.25rem;--spacing-18:1.125rem;--spacing-16:1rem;--spacing-14:.875rem;--spacing-12:.75rem;--spacing-10:.625rem;--spacing-8:.5rem;--spacing-6:.375rem;--spacing-4:.25rem;--spacing-2:.125rem;--font-family:"Avenir Next", "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;--font-family-headline:"Co-opHeadline", "Impact Fallback", sans-serif;--font-family-mono:ui-monospace, monospace;--font-weight-default:normal;--font-weight-medium:500;--font-weight-demibold:600;--text-size-10:.625rem;--text-size-11:.6875rem;--text-size-12:.75rem;--text-size-13:.8125rem;--text-size-14:.875rem;--text-size-16:1rem;--text-size-18:1.125rem;--text-size-20:1.25rem;--text-size-22:1.375rem;--text-size-24:1.5rem;--text-size-26:1.625rem;--text-size-28:1.75rem;--text-size-30:1.875rem;--text-size-32:2rem;--text-size-36:2.25rem;--text-size-40:2.5rem;--text-size-46:2.875rem;--text-size-48:3rem;--text-size-56:3.5rem;--text-size-60:3.75rem;--text-size-64:4rem;--text-size-72:4.5rem;--text-size-82:5.125rem;--text-size-96:6rem;--text-size-default:var(--text-size-18);--type-line-height-default:1.5;--type-line-height-tight:1.25;--type-line-height-headline:1.05;--type-line-height-loose:1.75}
+:root{--color-brand-blue:#00a1cc;--color-blue-900:#002c3d;--color-blue-800:#00394e;--color-blue-700:#005878;--color-blue-500:#00729a;--color-blue-100:#ecf2fb;--color-blue:var(--color-blue-500);--color-text-link:var(--color-blue-500);--color-text-link-hover:var(--color-blue-800);--color-text-link-active:var(--color-blue-900);--color-text-link-visited:var(--color-blue-900);--color-teal-500:#0f8482;--color-teal:var(--color-teal-500);--color-purple-500:#8d44d8;--color-purple:var(--color-purple-500);--color-focus:var(--color-purple-500);--color-red-100:#fcf1f1;--color-red-500:#d12430;--color-red:var(--color-red-500);--color-green-100:#dcedc8;--color-green-500:#5b7f2e;--color-green:var(--color-green-500);--color-yellow-100:var(--color-tint-yellow);--color-yellow-500:var(--color-light-yellow);--color-yellow-900:var(--color-dark-yellow);--color-yellow:var(--color-light-yellow);--color-offer:var(--color-red-500);--color-error:var(--color-red-500);--color-error-light:var(--color-red-100);--color-alert:var(--color-yellow-500);--color-alert-light:var(--color-yellow-100);--color-success:var(--color-green-500);--color-success-light:var(--color-green-100);--color-white:#fff;--color-black:#000;--color-grey-warm-100:#f5f5f0;--color-grey-warm-500:#e5e3da;--color-grey-warm-900:#3a352f;--color-grey-warm:var(--color-grey-warm-500);--color-grey-cool-100:#f2f4f7;--color-grey-cool-500:#dde9ed;--color-grey-cool-900:#1f262c;--color-grey-cool:var(--color-grey-cool-500);--color-grey-900:#282828;--color-grey-800:#595959;--color-grey-700:#6e6e6e;--color-grey-600:#c4c4c4;--color-grey-500:#d8d8d8;--color-grey-400:#e6e6e6;--color-grey-300:#efefef;--color-grey-200:#f3f3f3;--color-grey-100:#fafafa;--color-grey:var(--color-grey-500);--color-text-default:var(--color-grey-900);--color-text-alt:var(--color-grey-800);--color-text-black:var(--color-black);--color-text-white:var(--color-white);--color-text-dark-blue:var(--color-dark-blue);--color-tint-purple:#fef2ff;--color-tint-pink:#ffeaf2;--color-tint-green:#f9fbdd;--color-tint-orange:#ffede0;--color-tint-red:#ffe8e9;--color-tint-yellow:#fff4d5;--color-tint-lilac:#f2f2ff;--color-tint-blue:#e6f6fa;--color-tint-grey:var(--color-grey-200);--color-tint-brown:var(--color-grey-warm-100);--color-light-purple:#f8beff;--color-light-pink:#ffaece;--color-light-green:#e1ec54;--color-light-orange:#ffb886;--color-light-red:#ffb1b4;--color-light-yellow:#ffc82b;--color-light-lilac:#bfbffd;--color-light-blue:#80d0e5;--color-dark-purple:#c164c9;--color-dark-pink:#f85792;--color-dark-green:#819c00;--color-dark-orange:#e85a00;--color-dark-red:#f14f57;--color-dark-yellow:#b78f1f;--color-dark-lilac:#6762f9;--color-dark-blue:#003057;--color-navy:var(--color-dark-blue);--ui-shadow:0 2px 4px 0 #00000026;--ui-shadow-sm:0 2px 2px 0 #0000001a;--ui-shadow-hover:0 2px 4px 0 #00000040;--ui-transition-hover:.1s ease-out;--ui-transition-hover-property:background-color, color;--ui-border-radius-sm:4px;--ui-border-radius-md:6px;--ui-border-radius-lg:8px;--ui-border-radius-xl:12px;--ui-border-radius-2xl:16px;--ui-border-radius-3xl:24px;--ui-border-radius-full:calc(infinity * 1px);--ui-text-underline-offset:3px;--spacing-64:4rem;--spacing-60:3.75rem;--spacing-58:3.625rem;--spacing-56:3.5rem;--spacing-54:3.375rem;--spacing-52:3.25rem;--spacing-48:3rem;--spacing-40:2.5rem;--spacing-32:2rem;--spacing-24:1.5rem;--spacing-20:1.25rem;--spacing-18:1.125rem;--spacing-16:1rem;--spacing-14:.875rem;--spacing-12:.75rem;--spacing-10:.625rem;--spacing-8:.5rem;--spacing-6:.375rem;--spacing-4:.25rem;--spacing-2:.125rem;--font-family:"Avenir Next", "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;--font-family-headline:"Co-opHeadline", "Impact Fallback", sans-serif;--font-family-mono:ui-monospace, monospace;--font-weight-default:normal;--font-weight-medium:500;--font-weight-demibold:600;--text-size-10:.625rem;--text-size-11:.6875rem;--text-size-12:.75rem;--text-size-13:.8125rem;--text-size-14:.875rem;--text-size-16:1rem;--text-size-18:1.125rem;--text-size-20:1.25rem;--text-size-22:1.375rem;--text-size-24:1.5rem;--text-size-26:1.625rem;--text-size-28:1.75rem;--text-size-30:1.875rem;--text-size-32:2rem;--text-size-36:2.25rem;--text-size-40:2.5rem;--text-size-46:2.875rem;--text-size-48:3rem;--text-size-56:3.5rem;--text-size-60:3.75rem;--text-size-64:4rem;--text-size-72:4.5rem;--text-size-82:5.125rem;--text-size-96:6rem;--text-size-default:var(--text-size-18);--type-line-height-default:1.5;--type-line-height-tight:1.25;--type-line-height-headline:1.05;--type-line-height-loose:1.75}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/styles",
   "type": "module",
-  "version": "1.22.0",
+  "version": "1.23.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -10,14 +10,13 @@
     "./*": "./dist/*",
     "./src/*": "./src/*",
     "./presets/uno": {
-      "types": "./presets/uno/index.d.ts",
-      "default": "./presets/uno/index.js"
+      "types": "./dist/presets/uno/index.d.ts",
+      "default": "./dist/presets/uno/index.js"
     }
   },
   "files": [
     "dist",
-    "src/**/*.scss",
-    "presets"
+    "src/**/*.scss"
   ],
   "keywords": [
     "co-op",
@@ -40,5 +39,5 @@
   "devDependencies": {
     "lightningcss": "^1.33.0"
   },
-  "gitHead": "6a649143b3381563d36754d873c1410eb307fdc4"
+  "gitHead": "6347bde769b20af71b2e29b6d6fc3ec9135eeb5f"
 }

package/src/components/Author.scss

@@ -26,17 +26,6 @@
     --author-gap: var(--spacing-16);
   }
 
-  &--content {
-    display: flex;
-    flex-direction: column;
-    font-size: var(--author-font-size);
-    line-height: var(--author-line-height);
-  }
-
-  &--date {
-    white-space: nowrap;
-  }
-
   img {
     max-width: var(--author-image-size);
     max-height: var(--author-image-size);
@@ -52,3 +41,14 @@
     }
   }
 }
+
+.coop-author--content {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--author-font-size);
+  line-height: var(--author-line-height);
+}
+
+.coop-author--date {
+  white-space: nowrap;
+}

package/src/components/Button.scss

@@ -36,6 +36,12 @@
   transition-property: background-color, color, border-color;
 
   /* SIZES */
+  &[data-size="xs"] {
+    --button-padding-x: var(--spacing-12);
+    --button-height: var(--spacing-32);
+    --button-font-size: var(--text-size-14);
+  }
+
   &[data-size="sm"] {
     --button-padding-x: var(--spacing-16);
     --button-height: var(--spacing-40);

package/src/components/Card.scss

@@ -3,12 +3,15 @@
 .coop-card {
   --card-radius: var(--ui-border-radius-lg);
   --card-padding: var(--spacing-24);
+  --card-row: row;
+  --card-direction: column;
+  --card-adaptive-direction: var(--card-row);
 
   position: relative;
 
   overflow: hidden;
   display: flex;
-  flex-direction: column;
+  flex-direction: var(--card-direction);
 
   border-radius: var(--coop-card-radius, var(--card-radius));
 
@@ -37,153 +40,140 @@
     outline-offset: 3px;
   }
 
-  &:not([data-orientation="horizontal"]) {
-    &[data-adaptive="sm"] {
-      @media (min-width: $mq-sm) {
-        flex-direction: row;
-      }
-    }
-
-    &[data-adaptive="md"] {
-      @media (min-width: $mq-md) {
-        flex-direction: row;
-      }
-    }
+  &:has(picture[data-align="right"]) {
+    --card-row: row-reverse;
   }
 
-  &:where([data-orientation="horizontal"]) {
-    flex-direction: row;
-
-    &[data-adaptive="sm"] {
-      @media (min-width: $mq-sm) {
-        flex-direction: column;
-      }
-    }
+  &[data-orientation="horizontal"] {
+    --card-direction: var(--card-row);
+    --card-adaptive-direction: column;
+  }
 
-    &[data-adaptive="md"] {
-      @media (min-width: $mq-md) {
-        flex-direction: column;
-      }
+  &[data-adaptive="sm"] {
+    @media (min-width: $mq-sm) {
+      flex-direction: var(--card-adaptive-direction);
     }
   }
 
-  &[data-orientation="horizontal"]:where(:has(picture[data-align="right"])) {
-    flex-direction: row-reverse;
+  &[data-adaptive="md"] {
+    @media (min-width: $mq-md) {
+      flex-direction: var(--card-adaptive-direction);
+    }
   }
 
-  &-wrapper {
-    position: relative;
-    display: flex;
-    flex-grow: 1;
+  &:has(a):hover,
+  &:has(a):focus-visible {
+    box-shadow: var(--ui-shadow-hover);
 
-    &:hover {
-      .coop-card--badge {
-        transform: scale(1.05);
-      }
+    .coop-card--icon svg {
+      transform: translateX(0.25rem);
     }
   }
 
-  &--picture {
-    overflow: hidden;
-    flex-shrink: 1.5;
-    min-width: 33%;
-    margin: 0;
+  &[data-signpost] {
+    .coop-card--icon svg {
+      width: 2rem;
+      height: 2rem;
+    }
+
+    .coop-card--content {
+      flex-direction: row;
+      flex-grow: 1;
+      place-items: center;
+      justify-content: space-between;
 
-    img {
-      width: 100%;
       height: 100%;
     }
   }
+}
 
-  &--heading {
-    margin: 0;
-    font-size: var(--text-size-20);
-    font-weight: var(--font-weight-demibold);
-    line-height: var(--type-line-height);
+.coop-card-wrapper {
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+
+  &:hover {
+    .coop-card--badge {
+      transform: scale(1.05);
+    }
   }
+}
 
-  &--icon {
-    pointer-events: none;
+.coop-card--picture {
+  overflow: hidden;
+  flex-shrink: 1.5;
+  min-width: 33%;
+  margin: 0;
 
-    svg {
-      transition: transform 0.2s ease-out;
-    }
+  img {
+    width: 100%;
+    height: 100%;
   }
+}
 
-  &--link:is(a) {
-    color: inherit;
-    text-decoration: inherit;
-    outline: 0;
+.coop-card--heading {
+  margin: 0;
+  font-size: var(--text-size-20);
+  font-weight: var(--font-weight-demibold);
+  line-height: var(--type-line-height);
+}
 
-    &::before {
-      content: "";
-      position: absolute;
-      inset: 0 0 0 0;
-    }
+.coop-card--icon {
+  pointer-events: none;
 
-    &:hover,
-    &:focus-visible {
-      .coop-card--heading {
-        text-decoration: underline;
-      }
-    }
+  svg {
+    transition: transform 0.2s ease-out;
   }
+}
 
-  &--content {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-8);
+.coop-card--link:is(a) {
+  color: inherit;
+  text-decoration: inherit;
+  outline: 0;
 
-    min-width: 67%;
-    padding: var(--coop-card-padding, var(--card-padding));
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0 0 0 0;
   }
 
-  &--badge {
-    --badge-x: 0.5rem;
-    --badge-y: 0.5rem;
+  &:hover,
+  &:focus-visible {
+    .coop-card--heading {
+      text-decoration: underline;
+    }
+  }
+}
 
-    pointer-events: none;
+.coop-card--content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
 
-    position: absolute;
-    z-index: 10;
-    top: var(--badge-y);
-    right: var(--badge-x);
+  min-width: 67%;
+  padding: var(--coop-card-padding, var(--card-padding));
+}
 
-    transition: transform 0.1s ease-out;
+.coop-card--badge {
+  --badge-x: 0.5rem;
+  --badge-y: 0.5rem;
 
-    &[data-position="popout"] {
-      --badge-x: -0.75rem;
-      --badge-y: -0.75rem;
-    }
+  pointer-events: none;
 
-    &[data-align="left"] {
-      right: auto;
-      left: var(--badge-x);
-    }
-  }
+  position: absolute;
+  z-index: 10;
+  top: var(--badge-y);
+  right: var(--badge-x);
 
-  &:has(a):hover,
-  &:has(a):focus-visible {
-    box-shadow: var(--ui-shadow-hover);
+  transition: transform 0.1s ease-out;
 
-    .coop-card--icon svg {
-      transform: translateX(0.25rem);
-    }
+  &[data-position="popout"] {
+    --badge-x: -0.75rem;
+    --badge-y: -0.75rem;
   }
 
-  &[data-signpost] {
-    .coop-card--icon svg {
-      width: 2rem;
-      height: 2rem;
-    }
-
-    .coop-card--content {
-      flex-direction: row;
-      flex-grow: 1;
-      place-items: center;
-      justify-content: space-between;
-
-      height: 100%;
-    }
+  &[data-align="left"] {
+    right: auto;
+    left: var(--badge-x);
   }
 }

package/src/components/Expandable.scss

@@ -1,15 +1,14 @@
-.coop-expandable {
-  --expandable-bg-color: var(--bg-color, var(--color-tint-grey));
+:where(.coop-expandable) {
+  color: var(--color-text-default);
+  background-color: var(--color-tint-grey);
+}
 
+.coop-expandable {
   display: inline-block;
-
   padding: var(--spacing-10) var(--spacing-16);
   border-radius: var(--ui-border-radius-lg);
-
   font-size: var(--text-size-18);
 
-  background-color: var(--expandable-bg-color);
-
   & > summary {
     cursor: pointer;
 
@@ -28,8 +27,11 @@
     transition: transform 0.2s ease-out;
   }
 
+  // The background paints under a transparent border, so the open state grows without a colour
   &[open] {
-    box-shadow: 0 0 0 var(--spacing-6) var(--expandable-bg-color);
+    margin: calc(var(--spacing-6) * -1);
+    border: var(--spacing-6) solid transparent;
+    border-radius: calc(var(--ui-border-radius-lg) + var(--spacing-6));
 
     .coop-expandable--icon {
       transform: rotate(180deg);

package/src/components/Popover.scss

@@ -1,8 +1,12 @@
+:where(.coop-popover) {
+  color: var(--color-text-default);
+  background-color: var(--color-tint-grey);
+}
+
 .coop-popover {
   --popover-width: calc(100vw - 2rem);
   --popover-max-width: 22.5rem;
   --popover-zindex: 100;
-  --popover-bg: var(--color-tint-grey);
 
   z-index: var(--popover-zindex);
 
@@ -11,10 +15,15 @@
   padding: var(--spacing-16);
   border-radius: var(--ui-border-radius-md);
 
-  background: var(--popover-bg);
   box-shadow: var(--ui-shadow);
 }
 
+// Radix positions and rotates the arrow in a wrapper span, so the wrapper is painted as the arrow
+.coop-popover > span:has(> .coop-popover-arrow) {
+  background-color: inherit;
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+}
+
 .coop-popover-arrow {
-  fill: var(--popover-bg, var(--color-tint-grey));
+  fill: none;
 }

package/src/components/Searchbox.scss

@@ -8,25 +8,6 @@
   width: 100%;
   border-width: 0;
 
-  &--inner {
-    display: inline-flex;
-    align-items: flex-end;
-
-    width: 100%;
-    border-radius: var(--ui-border-radius-lg);
-
-    background-color: var(--color-white);
-
-    /* STATUS */
-
-    &:has(input:focus-visible) {
-      border-radius: var(--ui-border-radius-md);
-      outline: 2px solid var(--color-focus);
-      outline-offset: 3px;
-      transition: none;
-    }
-  }
-
   button {
     --button-padding: 0 var(--spacing-12);
 
@@ -84,3 +65,22 @@
     }
   }
 }
+
+.coop-searchbox--inner {
+  display: inline-flex;
+  align-items: flex-end;
+
+  width: 100%;
+  border-radius: var(--ui-border-radius-lg);
+
+  background-color: var(--color-white);
+
+  /* STATUS */
+
+  &:has(input:focus-visible) {
+    border-radius: var(--ui-border-radius-md);
+    outline: 2px solid var(--color-focus);
+    outline-offset: 3px;
+    transition: none;
+  }
+}

package/src/components/Signpost.scss

@@ -17,12 +17,6 @@
 
   transition: box-shadow var(--ui-transition-hover);
 
-  &--heading {
-    margin: 0;
-    font-size: var(--text-size-20);
-    font-weight: var(--font-weight-demibold);
-  }
-
   picture {
     overflow: hidden;
     align-self: stretch;
@@ -71,30 +65,6 @@
     }
   }
 
-  &--content {
-    display: flex;
-    gap: var(--spacing-12);
-    align-items: center;
-    justify-content: space-between;
-
-    height: 100%;
-    padding: var(--spacing-20);
-    border-radius: var(--ui-border-radius-lg);
-
-    background: var(--color-white);
-  }
-
-  &--icon {
-    display: flex;
-    justify-content: flex-end;
-    min-width: 1rem;
-
-    svg {
-      height: 1rem;
-      transition: transform 0.2s ease-out;
-    }
-  }
-
   &:hover,
   &:focus-visible {
     box-shadow: var(--ui-shadow-hover);
@@ -113,3 +83,33 @@
     }
   }
 }
+
+.coop-signpost--heading {
+  margin: 0;
+  font-size: var(--text-size-20);
+  font-weight: var(--font-weight-demibold);
+}
+
+.coop-signpost--content {
+  display: flex;
+  gap: var(--spacing-12);
+  align-items: center;
+  justify-content: space-between;
+
+  height: 100%;
+  padding: var(--spacing-20);
+  border-radius: var(--ui-border-radius-lg);
+
+  background: var(--color-white);
+}
+
+.coop-signpost--icon {
+  display: flex;
+  justify-content: flex-end;
+  min-width: 1rem;
+
+  svg {
+    height: 1rem;
+    transition: transform 0.2s ease-out;
+  }
+}

package/src/form.scss

@@ -264,21 +264,21 @@ $inline: '[type="radio"], [type="checkbox"]';
     outline: 2px solid var(--color-focus);
     outline-offset: 3px;
   }
+}
 
-  &--heading {
-    margin-bottom: var(--spacing-8);
-  }
+.coop-validation-summary--heading {
+  margin-bottom: var(--spacing-8);
+}
 
-  &--errors {
-    padding-top: var(--spacing-12);
-    color: var(--color-error);
+.coop-validation-summary--errors {
+  padding-top: var(--spacing-12);
+  color: var(--color-error);
 
-    ul {
-      list-style-type: disc;
-    }
+  ul {
+    list-style-type: disc;
+  }
 
-    a:not([class*="bg"]) {
-      color: var(--color-error);
-    }
+  a:not([class*="bg"]) {
+    color: var(--color-error);
   }
 }

package/src/layout/loading.scss

@@ -1,3 +1,6 @@
+// Line height 0 keeps the wrapper the same size as the icon, so it rotates around the icon's centre
 .coop-loading-spinner {
+  display: inline-block;
+  line-height: 0;
   animation: spin 1.25s linear infinite;
 }

package/src/typography/links.scss

@@ -24,7 +24,7 @@ a:where(:not([class*="bg"])),
   align-items: center;
 }
 
-button.coop-link {
+:where(button).coop-link {
   cursor: pointer;
 
   display: inline;

package/src/vars/colors.scss

@@ -123,4 +123,6 @@
   --color-dark-yellow: #b78f1f;
   --color-dark-lilac: #6762f9;
   --color-dark-blue: #003057;
+
+  --color-navy: var(--color-dark-blue);
 }

package/presets/uno/index.d.ts

@@ -1,2 +0,0 @@
-declare const coopPreset: import("unocss").PresetFactory<object, undefined>;
-export { coopPreset as default };