@kreftforeningen/web-react 1.0.21 → 1.0.22

package/dist/main.cjs.js

@@ -992,27 +992,18 @@ For more information, see https://radix-ui.com/primitives/docs/components/alert-
     color: var(--kf-color-gray-900, #0f172a);
   }
 `,XR={default:"kf-badge--default",secondary:"kf-badge--secondary",destructive:"kf-badge--destructive",outline:"kf-badge--outline"},y1=m.forwardRef(({className:e,variant:t="default",asChild:r=!1,...n},o)=>{const a=r?St:"span";return d.jsxs(d.Fragment,{children:[d.jsx(KR,{}),d.jsx(a,{ref:o,"data-slot":"badge",className:P("kf-badge",XR[t],e),...n})]})});y1.displayName="Badge";const ZR=ce`
+  .kf-banner-container {
+    container-type: inline-size;
+    container-name: banner-container;
+  }
+
   .kf-banner {
     display: grid;
     grid-template-columns: 1fr;
     border-radius: var(--kf-radius-2xl, 1rem);
     overflow: hidden;
     min-height: auto;
-  }
-
-  @media (min-width: var(--kf-breakpoint-sm, 40rem)) {
-    .kf-banner {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      min-height: 25rem;
-    }
-  }
-
-  .kf-banner[data-color="default"] {
-    background: var(--kf-color-blue-100, #dbeafe);
-  }
-
-  .dark .kf-banner[data-color="default"] {
-    background: var(--kf-color-blue-900, #1d4ed8);
+    position: relative;
   }
 
   .kf-banner__image {
@@ -1024,17 +1015,39 @@ For more information, see https://radix-ui.com/primitives/docs/components/alert-
     object-position: center;
   }
 
-  @media (min-width: var(--kf-breakpoint-sm, 40rem)) {
+  @container banner-container (min-width: 40rem) {
+    .kf-banner {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      min-height: 25rem;
+    }
+
     .kf-banner__image {
       max-height: none;
     }
+
+    .kf-banner[data-variant="full"] {
+      grid-template-columns: 1fr;
+      min-height: 25rem;
+    }
+
+    .kf-banner[data-variant="full"] .kf-banner__image {
+      max-height: none;
+    }
+  }
+
+  .kf-banner[data-color="default"] {
+    background: var(--kf-color-blue-100, #dbeafe);
+  }
+
+  .dark .kf-banner[data-color="default"] {
+    background: var(--kf-color-blue-900, #1d4ed8);
   }
 
   .kf-banner[data-variant="right"] .kf-banner__image {
     order: 1;
   }
 
-  @media (min-width: var(--kf-breakpoint-sm, 40rem)) {
+  @container banner-container (min-width: 40rem) {
     .kf-banner[data-variant="right"] .kf-banner__image {
       order: 2;
     }
@@ -1042,17 +1055,50 @@ For more information, see https://radix-ui.com/primitives/docs/components/alert-
 
   .kf-banner[data-variant="full"] .kf-banner__image {
     grid-column: 1 / -1;
+    grid-row: 1 / -1;
+    z-index: 0;
+    object-fit: cover;
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
   }
 
+
   .kf-banner__content {
     order: 2;
     display: flex;
     flex-direction: column;
-    gap: calc(var(--kf-spacing, 0.25rem) * 2);
+    justify-content: center;
+    gap: calc(var(--kf-spacing, 0.25rem) * 6);
     padding: calc(var(--kf-spacing, 0.25rem) * 8);
   }
 
-  @media (min-width: var(--kf-breakpoint-sm, 40rem)) {
+  .kf-banner[data-variant="full"] .kf-banner__content {
+    grid-column: 1 / -1;
+    grid-row: 1 / -1;
+    align-self: center;
+    justify-self: flex-start;
+    max-width: 26rem;
+    color: var(--kf-color-white, #ffffff);
+    position: relative;
+    z-index: 2;
+  }
+
+  .kf-banner[data-variant="full"]::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: color-mix(
+      in srgb,
+      var(--kf-color-gray-900, #1d4ed8) 75%,
+      transparent
+    );
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  @container banner-container (min-width: 40rem) {
     .kf-banner[data-variant="right"] .kf-banner__content {
       order: 1;
     }
@@ -1060,24 +1106,46 @@ For more information, see https://radix-ui.com/primitives/docs/components/alert-
 
   .kf-banner__title {
     margin: 0;
-    font-size: var(--kf-text-2xl, 1.5rem);
-    line-height: var(--kf-text-2xl--line-height, 1.3333333333);
+    font-size: var(--kf-text-3xl, 2rem);
+    line-height: var(--kf-text-3xl--line-height, 1.3333333333);
     font-weight: 700;
   }
 
   .kf-banner__description {
-    font-size: var(--kf-text-sm, 0.875rem);
-    line-height: var(--kf-text-sm--line-height, 1.4285714286);
-    color: var(--kf-color-gray-950, #0f172a);
+    line-height: var(--kf-text-base--line-height, 1.4285714286);
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 6;
+    overflow: hidden;
+
+    & > p:first-child {
+      margin-block-start: 0;
+    }
+
+    & > p:last-child {
+      margin-block-end: 0;
+    }
+  }
+
+  .kf-banner[data-variant="full"] .kf-banner__description {
+    -webkit-line-clamp: 3;
   }
 
+  @container banner-container (min-width: 40rem) {
+    .kf-banner[data-variant="full"] .kf-banner__description {
+      -webkit-line-clamp: 4;
+    }
+  }
+  
+
   .kf-banner__actions {
+    margin-block-start: calc(var(--kf-spacing, 0.25rem) * 2);
     display: flex;
     flex-wrap: wrap;
     gap: calc(var(--kf-spacing, 0.25rem) * 2);
     align-items: center;
   }
-`,x1=m.forwardRef(({variant:e="default",color:t="default",className:r,children:n,...o},a)=>d.jsxs(d.Fragment,{children:[d.jsx(ZR,{}),d.jsx("div",{ref:a,"data-slot":"banner","data-variant":e,"data-color":t,className:P("kf-banner",r),...o,children:n})]}));x1.displayName="Banner";const w1=m.forwardRef(({className:e,style:t,...r},n)=>d.jsx("img",{ref:n,className:P("kf-banner__image",e),style:t,...r}));w1.displayName="BannerImage";const _1=_.forwardRef(({className:e,...t},r)=>d.jsx("div",{ref:r,className:P("kf-banner__content",e),...t}));_1.displayName="BannerContent";const S1=m.forwardRef(({className:e,...t},r)=>d.jsx("h3",{ref:r,className:P("kf-banner__title",e),...t}));S1.displayName="BannerTitle";const C1=m.forwardRef(({className:e,...t},r)=>d.jsx("div",{ref:r,className:P("kf-banner__description",e),...t}));C1.displayName="BannerDescription";const E1=m.forwardRef(({className:e,...t},r)=>d.jsx("div",{ref:r,className:P("kf-banner__actions",e),...t}));E1.displayName="BannerButtons";function QR({className:e,href:t,...r}){return!r.children||r.children===""||!t||t===""?null:d.jsx("a",{href:t,children:d.jsx(Mt,{className:e,variant:"default",...r})})}function JR({className:e,href:t,...r}){return!r.children||r.children===""||!t||t===""?null:d.jsx("a",{href:t,children:d.jsx(Mt,{className:e,variant:"outline",...r})})}const P1={sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem"},M1={"margin-inline":{css:"margin-inline",fallback:"0"},"margin-block":{css:"margin-block",fallback:"0"},"padding-inline":{css:"padding-inline",fallback:"0"},"padding-block":{css:"padding-block",fallback:"0"}},eI=Object.entries(M1).map(([e,t])=>`    ${t.css}: var(--kf-bleed-${e}-base, ${t.fallback});`).join(`
+`,x1=m.forwardRef(({variant:e="default",color:t="default",className:r,children:n,...o},a)=>d.jsxs("div",{className:"kf-banner-container",children:[d.jsx(ZR,{}),d.jsx("div",{ref:a,"data-slot":"banner","data-variant":e,"data-color":t,className:P("kf-banner",e==="full"&&"dark",r),...o,children:n})]}));x1.displayName="Banner";const w1=m.forwardRef(({className:e,style:t,...r},n)=>d.jsx("img",{ref:n,className:P("kf-banner__image",e),style:t,...r}));w1.displayName="BannerImage";const _1=_.forwardRef(({className:e,...t},r)=>d.jsx("div",{ref:r,className:P("kf-banner__content",e),...t}));_1.displayName="BannerContent";const S1=m.forwardRef(({className:e,...t},r)=>d.jsx("h3",{ref:r,className:P("kf-banner__title",e),...t}));S1.displayName="BannerTitle";const C1=m.forwardRef(({className:e,...t},r)=>d.jsx("div",{ref:r,className:P("kf-banner__description",e),...t}));C1.displayName="BannerDescription";const E1=m.forwardRef(({className:e,...t},r)=>d.jsx("div",{ref:r,className:P("kf-banner__actions",e),...t}));E1.displayName="BannerButtons";function QR({className:e,href:t,...r}){return!r.children||r.children===""||!t||t===""?null:d.jsx("a",{href:t,children:d.jsx(Mt,{className:e,variant:"default",...r})})}function JR({className:e,href:t,...r}){return!r.children||r.children===""||!t||t===""?null:d.jsx("a",{href:t,children:d.jsx(Mt,{className:e,variant:"outline",...r})})}const P1={sm:"40rem",md:"48rem",lg:"64rem",xl:"80rem"},M1={"margin-inline":{css:"margin-inline",fallback:"0"},"margin-block":{css:"margin-block",fallback:"0"},"padding-inline":{css:"padding-inline",fallback:"0"},"padding-block":{css:"padding-block",fallback:"0"}},eI=Object.entries(M1).map(([e,t])=>`    ${t.css}: var(--kf-bleed-${e}-base, ${t.fallback});`).join(`
 `),tI=Object.entries(P1).map(([e,t])=>`
 @media (min-width: ${t}) {
   .kf-bleed {

package/dist/main.es.js

@@ -4800,27 +4800,18 @@ const JR = ue`
 );
 tI.displayName = "Badge";
 const rI = ue`
+  .kf-banner-container {
+    container-type: inline-size;
+    container-name: banner-container;
+  }
+
   .kf-banner {
     display: grid;
     grid-template-columns: 1fr;
     border-radius: var(--kf-radius-2xl, 1rem);
     overflow: hidden;
     min-height: auto;
-  }
-
-  @media (min-width: var(--kf-breakpoint-sm, 40rem)) {
-    .kf-banner {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      min-height: 25rem;
-    }
-  }
-
-  .kf-banner[data-color="default"] {
-    background: var(--kf-color-blue-100, #dbeafe);
-  }
-
-  .dark .kf-banner[data-color="default"] {
-    background: var(--kf-color-blue-900, #1d4ed8);
+    position: relative;
   }
 
   .kf-banner__image {
@@ -4832,17 +4823,39 @@ const rI = ue`
     object-position: center;
   }
 
-  @media (min-width: var(--kf-breakpoint-sm, 40rem)) {
+  @container banner-container (min-width: 40rem) {
+    .kf-banner {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      min-height: 25rem;
+    }
+
     .kf-banner__image {
       max-height: none;
     }
+
+    .kf-banner[data-variant="full"] {
+      grid-template-columns: 1fr;
+      min-height: 25rem;
+    }
+
+    .kf-banner[data-variant="full"] .kf-banner__image {
+      max-height: none;
+    }
+  }
+
+  .kf-banner[data-color="default"] {
+    background: var(--kf-color-blue-100, #dbeafe);
+  }
+
+  .dark .kf-banner[data-color="default"] {
+    background: var(--kf-color-blue-900, #1d4ed8);
   }
 
   .kf-banner[data-variant="right"] .kf-banner__image {
     order: 1;
   }
 
-  @media (min-width: var(--kf-breakpoint-sm, 40rem)) {
+  @container banner-container (min-width: 40rem) {
     .kf-banner[data-variant="right"] .kf-banner__image {
       order: 2;
     }
@@ -4850,17 +4863,50 @@ const rI = ue`
 
   .kf-banner[data-variant="full"] .kf-banner__image {
     grid-column: 1 / -1;
+    grid-row: 1 / -1;
+    z-index: 0;
+    object-fit: cover;
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
   }
 
+
   .kf-banner__content {
     order: 2;
     display: flex;
     flex-direction: column;
-    gap: calc(var(--kf-spacing, 0.25rem) * 2);
+    justify-content: center;
+    gap: calc(var(--kf-spacing, 0.25rem) * 6);
     padding: calc(var(--kf-spacing, 0.25rem) * 8);
   }
 
-  @media (min-width: var(--kf-breakpoint-sm, 40rem)) {
+  .kf-banner[data-variant="full"] .kf-banner__content {
+    grid-column: 1 / -1;
+    grid-row: 1 / -1;
+    align-self: center;
+    justify-self: flex-start;
+    max-width: 26rem;
+    color: var(--kf-color-white, #ffffff);
+    position: relative;
+    z-index: 2;
+  }
+
+  .kf-banner[data-variant="full"]::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: color-mix(
+      in srgb,
+      var(--kf-color-gray-900, #1d4ed8) 75%,
+      transparent
+    );
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  @container banner-container (min-width: 40rem) {
     .kf-banner[data-variant="right"] .kf-banner__content {
       order: 1;
     }
@@ -4868,25 +4914,47 @@ const rI = ue`
 
   .kf-banner__title {
     margin: 0;
-    font-size: var(--kf-text-2xl, 1.5rem);
-    line-height: var(--kf-text-2xl--line-height, 1.3333333333);
+    font-size: var(--kf-text-3xl, 2rem);
+    line-height: var(--kf-text-3xl--line-height, 1.3333333333);
     font-weight: 700;
   }
 
   .kf-banner__description {
-    font-size: var(--kf-text-sm, 0.875rem);
-    line-height: var(--kf-text-sm--line-height, 1.4285714286);
-    color: var(--kf-color-gray-950, #0f172a);
+    line-height: var(--kf-text-base--line-height, 1.4285714286);
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 6;
+    overflow: hidden;
+
+    & > p:first-child {
+      margin-block-start: 0;
+    }
+
+    & > p:last-child {
+      margin-block-end: 0;
+    }
+  }
+
+  .kf-banner[data-variant="full"] .kf-banner__description {
+    -webkit-line-clamp: 3;
   }
 
+  @container banner-container (min-width: 40rem) {
+    .kf-banner[data-variant="full"] .kf-banner__description {
+      -webkit-line-clamp: 4;
+    }
+  }
+  
+
   .kf-banner__actions {
+    margin-block-start: calc(var(--kf-spacing, 0.25rem) * 2);
     display: flex;
     flex-wrap: wrap;
     gap: calc(var(--kf-spacing, 0.25rem) * 2);
     align-items: center;
   }
 `, nI = m.forwardRef(
-  ({ variant: e = "default", color: t = "default", className: r, children: n, ...o }, a) => /* @__PURE__ */ L(se, { children: [
+  ({ variant: e = "default", color: t = "default", className: r, children: n, ...o }, a) => /* @__PURE__ */ L("div", { className: "kf-banner-container", children: [
     /* @__PURE__ */ p(rI, {}),
     /* @__PURE__ */ p(
       "div",
@@ -4895,7 +4963,7 @@ const rI = ue`
         "data-slot": "banner",
         "data-variant": e,
         "data-color": t,
-        className: E("kf-banner", r),
+        className: E("kf-banner", e === "full" && "dark", r),
         ...o,
         children: n
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kreftforeningen/web-react",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "type": "module",
   "publishConfig": {
     "access": "public"