@nextrap/style-typography 2.0.2 → 2.0.3

package/.ai-usage-info.md

@@ -29,6 +29,7 @@ Provides composable typographic rules and vertical rhythm for individual native
 - Package-local overrides use the `--typography-*` prefix. Legacy typography variables remain fallback inputs where already supported.
 - Mixins style the current selector and must not own page, content or section selectors.
 - Native `ul` and `ol` rules restore their complete standard list presentation after resets, including marker, indentation and rhythm. Specialized list components must explicitly override the standard properties they replace.
+- Links containing images or picture elements (`a:has(img)` and `a:has(picture)`) use `display: inline-block` with `max-width: 100%`, so their clickable area follows the media width instead of spanning the surrounding text width.
 - `.small` is the class equivalent of the native `small` element and `.text-body-secondary` provides the Bootstrap-compatible secondary body color.
 - `.text-muted` remains the compatibility alias for older Bootstrap usage. `.text-nowrap`, `.text-break`, `.text-uppercase`, `.fw-normal`, `.fw-semibold` and `.fw-bold` are provided by `@nextrap/style-utils` and are materialized by the consuming theme's utility layer.
 

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 2.0.3 (2026-09-30)
+
+### 🩹 Fixes
+
+- **style-typography:** include linked picture elements ([7fdaff7](https://github.com/nextrap/nextrap-monorepo/commit/7fdaff7))
+- **style-typography:** constrain image link width ([ef7ddd0](https://github.com/nextrap/nextrap-monorepo/commit/ef7ddd0))
+
+### ❤️ Thank You
+
+- Matthias Leuffen
+
 ## 2.0.2 (2026-09-13)
 
 ### 🧱 Updated Dependencies

package/index.css

@@ -1 +1 @@
-h1,.h1{margin-top:0;margin-bottom:var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));color:var(--nt-header, var(--nt-text, currentColor));font-family:var(--nt-font-family-header, inherit);font-weight:var(--nt-font-weight-header, 500);line-height:var(--nt-line-height-header, 1.2);font-size:var(--nt-fs-h1, calc(1.375rem + 1.5vw) )}h2,.h2{margin-top:0;margin-bottom:var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));color:var(--nt-header, var(--nt-text, currentColor));font-family:var(--nt-font-family-header, inherit);font-weight:var(--nt-font-weight-header, 500);line-height:var(--nt-line-height-header, 1.2);font-size:var(--nt-fs-h2, calc(1.325rem + .9vw) )}h3,.h3{margin-top:0;margin-bottom:var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));color:var(--nt-header, var(--nt-text, currentColor));font-family:var(--nt-font-family-header, inherit);font-weight:var(--nt-font-weight-header, 500);line-height:var(--nt-line-height-header, 1.2);font-size:var(--nt-fs-h3, calc(1.3rem + .6vw) )}h4,.h4{margin-top:0;margin-bottom:var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));color:var(--nt-header, var(--nt-text, currentColor));font-family:var(--nt-font-family-header, inherit);font-weight:var(--nt-font-weight-header, 500);line-height:var(--nt-line-height-header, 1.2);font-size:var(--nt-fs-h4, calc(1.275rem + .3vw) )}h5,.h5{margin-top:0;margin-bottom:var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));color:var(--nt-header, var(--nt-text, currentColor));font-family:var(--nt-font-family-header, inherit);font-weight:var(--nt-font-weight-header, 500);line-height:var(--nt-line-height-header, 1.2);font-size:var(--nt-fs-h5, 1.25rem)}h6,.h6{margin-top:0;margin-bottom:var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));color:var(--nt-header, var(--nt-text, currentColor));font-family:var(--nt-font-family-header, inherit);font-weight:var(--nt-font-weight-header, 500);line-height:var(--nt-line-height-header, 1.2);font-size:var(--nt-fs-h6, 1rem)}p{margin-top:0;margin-bottom:var(--typography-paragraph-margin-bottom, var(--nt-spacing-text, 1rem));color:var(--nt-text, currentColor);font-family:var(--nt-font-family-base, inherit);font-weight:var(--nt-font-weight-base, 400);line-height:var(--nt-line-height-base, 1.5)}b,strong{color:inherit;font-weight:var(--nt-font-weight-bold, 700)}em{font-style:italic}small,.small{font-size:var(--nt-font-size-small, .875em)}a{color:var(--nt-link, currentColor);text-decoration:underline;text-decoration-color:currentColor;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}a:hover{color:var(--nt-link-hover, var(--nt-link, currentColor))}a:focus-visible{outline:var(--typography-focus-ring-width, 1px) dashed var(--nt-focus, currentColor);outline-offset:var(--typography-focus-ring-offset, 2px)}mark{padding:var(--typography-mark-padding, .1875em);color:var(--typography-mark-color, var(--nt-warning-emphasis, var(--nt-text, currentColor)));background-color:var(--typography-mark-bg, var(--nt-warning-subtle, #fff3cd))}ul{margin-top:0;margin-bottom:var(--typography-list-margin-bottom, var(--nt-spacing-text, 1rem));padding-left:1.25em;list-style:disc}ol{margin-top:0;margin-bottom:var(--typography-list-margin-bottom, var(--nt-spacing-text, 1rem));padding-left:var(--typography-list-padding-left, var(--nt-space-6, 2rem));list-style:decimal}dl{margin-top:0;margin-bottom:var(--typography-list-margin-bottom, var(--nt-spacing-text, 1rem))}dt{font-weight:var(--nt-font-weight-bold, 700)}dd{margin-bottom:var(--typography-definition-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));margin-left:0;color:var(--nt-text-muted, currentColor)}hr{margin:var(--typography-hr-margin-y, var(--nt-spacing-text, 1rem)) 0;color:inherit;border:0;border-top:var(--nt-border-width, 1px) solid;opacity:var(--typography-hr-opacity, .25)}code{padding:var(--typography-code-padding-y, .125em) var(--typography-code-padding-x, .375em);color:var(--typography-code-color, var(--nt-text, inherit));background:var(--typography-code-bg, color-mix(in oklch, currentColor 8%, transparent));border-radius:var(--nt-border-radius-sm, var(--nt-border-radius, .25rem));font-family:var(--typography-font-family-monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace);font-size:var(--typography-code-font-size, .875em)}pre{display:block;margin-top:0;margin-bottom:var(--typography-pre-margin-bottom, var(--nt-spacing-text, 1rem));padding:var(--typography-pre-padding, var(--nt-space-4, 1rem));overflow:auto;color:var(--nt-text, currentColor);background:var(--typography-pre-bg, color-mix(in oklch, currentColor 8%, transparent));border-radius:var(--nt-border-radius, .375rem);font-family:var(--typography-font-family-monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace);font-size:var(--typography-code-font-size, .875em)}pre code{padding:0;color:inherit;background:transparent;border-radius:0;font-size:inherit}blockquote{margin:0 0 var(--typography-blockquote-margin-bottom, var(--nt-spacing-text, 1rem));padding:var(--typography-blockquote-padding-y, .75rem) var(--typography-blockquote-padding-x, 1rem);color:var(--nt-text-muted, currentColor);border-left:var(--typography-blockquote-border-width, .25rem) solid var(--nt-primary-emphasis, var(--nt-primary, currentColor));font-size:var(--typography-blockquote-font-size, 1.125em)}figure{margin:0 0 var(--typography-figure-margin-bottom, var(--nt-spacing-text, 1rem))}figcaption,.figure-caption{margin-top:var(--typography-figure-caption-margin-top, var(--nt-space-2, .5rem));color:var(--nt-text-muted, currentColor);font-size:var(--nt-font-size-small, .875em);text-align:center}.lead{margin-top:0;margin-bottom:var(--typography-lead-margin-bottom, var(--nt-spacing-text, 1rem));color:var(--nt-text, currentColor);font-size:var(--typography-lead-font-size, var(--nt-fs-1, 1.25rem));font-weight:var(--typography-lead-font-weight, 300);line-height:var(--nt-line-height-base, 1.5)}.muted,.text-muted,.text-body-secondary{color:var(--nt-text-muted, currentColor)!important}
+h1,.h1{margin-top:0;margin-bottom:var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));color:var(--nt-header, var(--nt-text, currentColor));font-family:var(--nt-font-family-header, inherit);font-weight:var(--nt-font-weight-header, 500);line-height:var(--nt-line-height-header, 1.2);font-size:var(--nt-fs-h1, calc(1.375rem + 1.5vw) )}h2,.h2{margin-top:0;margin-bottom:var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));color:var(--nt-header, var(--nt-text, currentColor));font-family:var(--nt-font-family-header, inherit);font-weight:var(--nt-font-weight-header, 500);line-height:var(--nt-line-height-header, 1.2);font-size:var(--nt-fs-h2, calc(1.325rem + .9vw) )}h3,.h3{margin-top:0;margin-bottom:var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));color:var(--nt-header, var(--nt-text, currentColor));font-family:var(--nt-font-family-header, inherit);font-weight:var(--nt-font-weight-header, 500);line-height:var(--nt-line-height-header, 1.2);font-size:var(--nt-fs-h3, calc(1.3rem + .6vw) )}h4,.h4{margin-top:0;margin-bottom:var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));color:var(--nt-header, var(--nt-text, currentColor));font-family:var(--nt-font-family-header, inherit);font-weight:var(--nt-font-weight-header, 500);line-height:var(--nt-line-height-header, 1.2);font-size:var(--nt-fs-h4, calc(1.275rem + .3vw) )}h5,.h5{margin-top:0;margin-bottom:var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));color:var(--nt-header, var(--nt-text, currentColor));font-family:var(--nt-font-family-header, inherit);font-weight:var(--nt-font-weight-header, 500);line-height:var(--nt-line-height-header, 1.2);font-size:var(--nt-fs-h5, 1.25rem)}h6,.h6{margin-top:0;margin-bottom:var(--typography-heading-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));color:var(--nt-header, var(--nt-text, currentColor));font-family:var(--nt-font-family-header, inherit);font-weight:var(--nt-font-weight-header, 500);line-height:var(--nt-line-height-header, 1.2);font-size:var(--nt-fs-h6, 1rem)}p{margin-top:0;margin-bottom:var(--typography-paragraph-margin-bottom, var(--nt-spacing-text, 1rem));color:var(--nt-text, currentColor);font-family:var(--nt-font-family-base, inherit);font-weight:var(--nt-font-weight-base, 400);line-height:var(--nt-line-height-base, 1.5)}b,strong{color:inherit;font-weight:var(--nt-font-weight-bold, 700)}em{font-style:italic}small,.small{font-size:var(--nt-font-size-small, .875em)}a{color:var(--nt-link, currentColor);text-decoration:underline;text-decoration-color:currentColor;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}a:hover{color:var(--nt-link-hover, var(--nt-link, currentColor))}a:focus-visible{outline:var(--typography-focus-ring-width, 1px) dashed var(--nt-focus, currentColor);outline-offset:var(--typography-focus-ring-offset, 2px)}a:has(img),a:has(picture){display:inline-block;max-width:100%}mark{padding:var(--typography-mark-padding, .1875em);color:var(--typography-mark-color, var(--nt-warning-emphasis, var(--nt-text, currentColor)));background-color:var(--typography-mark-bg, var(--nt-warning-subtle, #fff3cd))}ul{margin-top:0;margin-bottom:var(--typography-list-margin-bottom, var(--nt-spacing-text, 1rem));padding-left:1.25em;list-style:disc}ol{margin-top:0;margin-bottom:var(--typography-list-margin-bottom, var(--nt-spacing-text, 1rem));padding-left:var(--typography-list-padding-left, var(--nt-space-6, 2rem));list-style:decimal}dl{margin-top:0;margin-bottom:var(--typography-list-margin-bottom, var(--nt-spacing-text, 1rem))}dt{font-weight:var(--nt-font-weight-bold, 700)}dd{margin-bottom:var(--typography-definition-margin-bottom, calc(var(--nt-spacing-text, 1rem) * .5));margin-left:0;color:var(--nt-text-muted, currentColor)}hr{margin:var(--typography-hr-margin-y, var(--nt-spacing-text, 1rem)) 0;color:inherit;border:0;border-top:var(--nt-border-width, 1px) solid;opacity:var(--typography-hr-opacity, .25)}code{padding:var(--typography-code-padding-y, .125em) var(--typography-code-padding-x, .375em);color:var(--typography-code-color, var(--nt-text, inherit));background:var(--typography-code-bg, color-mix(in oklch, currentColor 8%, transparent));border-radius:var(--nt-border-radius-sm, var(--nt-border-radius, .25rem));font-family:var(--typography-font-family-monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace);font-size:var(--typography-code-font-size, .875em)}pre{display:block;margin-top:0;margin-bottom:var(--typography-pre-margin-bottom, var(--nt-spacing-text, 1rem));padding:var(--typography-pre-padding, var(--nt-space-4, 1rem));overflow:auto;color:var(--nt-text, currentColor);background:var(--typography-pre-bg, color-mix(in oklch, currentColor 8%, transparent));border-radius:var(--nt-border-radius, .375rem);font-family:var(--typography-font-family-monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace);font-size:var(--typography-code-font-size, .875em)}pre code{padding:0;color:inherit;background:transparent;border-radius:0;font-size:inherit}blockquote{margin:0 0 var(--typography-blockquote-margin-bottom, var(--nt-spacing-text, 1rem));padding:var(--typography-blockquote-padding-y, .75rem) var(--typography-blockquote-padding-x, 1rem);color:var(--nt-text-muted, currentColor);border-left:var(--typography-blockquote-border-width, .25rem) solid var(--nt-primary-emphasis, var(--nt-primary, currentColor));font-size:var(--typography-blockquote-font-size, 1.125em)}figure{margin:0 0 var(--typography-figure-margin-bottom, var(--nt-spacing-text, 1rem))}figcaption,.figure-caption{margin-top:var(--typography-figure-caption-margin-top, var(--nt-space-2, .5rem));color:var(--nt-text-muted, currentColor);font-size:var(--nt-font-size-small, .875em);text-align:center}.lead{margin-top:0;margin-bottom:var(--typography-lead-margin-bottom, var(--nt-spacing-text, 1rem));color:var(--nt-text, currentColor);font-size:var(--typography-lead-font-size, var(--nt-fs-1, 1.25rem));font-weight:var(--typography-lead-font-weight, 300);line-height:var(--nt-line-height-base, 1.5)}.muted,.text-muted,.text-body-secondary{color:var(--nt-text-muted, currentColor)!important}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nextrap/style-typography",
-    "version": "2.0.2",
+    "version": "2.0.3",
     "main": "./index.js",
     "repository": {
         "directory": "nextrap-base/style-typography",

package/src/_style-typography.scss

@@ -17,6 +17,14 @@
   em { @include t.em(); }
   small, .small { @include t.small(); }
   a { @include t.link(); }
+
+  // Begrenzt Links mit Bildern oder Picture-Elementen auf die Medienbreite, damit die klickbare Fläche nicht die gesamte Textzeile einnimmt.
+  a:has(img),
+  a:has(picture) {
+    display: inline-block;
+    max-width: 100%;
+  }
+
   mark { @include t.mark(); }
   ul { @include t.ul(); }
   ol { @include t.ol(); }