@fremtind/jokul 5.0.0 → 5.0.1

package/styles/components/typography/title.css

@@ -2,53 +2,31 @@
  * Do not edit directly, this file was auto-generated.
  */
 @layer jokul.components {
-  :where(.jkl-title) {
-    font-weight: var(--jkl-typography-weight-normal);
-    line-height: var(--jkl-line-height-tight);
-  }
-  .jkl-title[data-text-size] {
+  :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size=xs] {
     margin-block: 0;
-  }
-  .jkl-title[data-text-size=xs],
-  .jkl-heading-xs {
     font: var(--jkl-text-style-heading-5);
   }
-  :where(.jkl-heading-xs) {
+  :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size=s] {
     margin-block: 0;
-  }
-  .jkl-title[data-text-size=s],
-  .jkl-heading-s {
     font: var(--jkl-text-style-heading-4);
   }
-  :where(.jkl-heading-s) {
+  :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size=m] {
     margin-block: 0;
-  }
-  .jkl-title[data-text-size=m],
-  .jkl-heading-m {
     font: var(--jkl-text-style-heading-3);
   }
-  :where(.jkl-heading-m) {
+  :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size=l] {
     margin-block: 0;
-  }
-  .jkl-title[data-text-size=l],
-  .jkl-heading-l {
     font: var(--jkl-text-style-heading-2);
   }
-  :where(.jkl-heading-l) {
+  :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size=xl] {
     margin-block: 0;
-  }
-  .jkl-title[data-text-size=xl],
-  .jkl-heading-xl {
     font: var(--jkl-text-style-heading-1);
   }
-  :where(.jkl-heading-xl) {
-    margin-block: 0;
-  }
-  :is(label, legend).jkl-title[data-text-size] {
-    font-weight: var(--jkl-typography-weight-normal);
+  :is(label, legend)[data-text-size] {
+    font-weight: var(--jkl-font-weight-normal);
     line-height: var(--jkl-line-height-relaxed);
   }
-  label.jkl-title[data-text-size] {
+  :is(label)[data-text-size] {
     display: block;
     margin-block-end: var(--jkl-spacing-8);
   }

package/styles/components/typography/title.min.css

@@ -1 +1 @@
-@layer jokul.components{:where(.jkl-title){font-weight:var(--jkl-typography-weight-normal);line-height:var(--jkl-line-height-tight)}.jkl-title[data-text-size]{margin-block:0}.jkl-heading-xs,.jkl-title[data-text-size=xs]{font:var(--jkl-text-style-heading-5)}:where(.jkl-heading-xs){margin-block:0}.jkl-heading-s,.jkl-title[data-text-size=s]{font:var(--jkl-text-style-heading-4)}:where(.jkl-heading-s){margin-block:0}.jkl-heading-m,.jkl-title[data-text-size=m]{font:var(--jkl-text-style-heading-3)}:where(.jkl-heading-m){margin-block:0}.jkl-heading-l,.jkl-title[data-text-size=l]{font:var(--jkl-text-style-heading-2)}:where(.jkl-heading-l){margin-block:0}.jkl-heading-xl,.jkl-title[data-text-size=xl]{font:var(--jkl-text-style-heading-1)}:where(.jkl-heading-xl){margin-block:0}:is(label,legend).jkl-title[data-text-size]{font-weight:var(--jkl-typography-weight-normal);line-height:var(--jkl-line-height-relaxed)}label.jkl-title[data-text-size]{display:block;-webkit-margin-after:var(--jkl-spacing-8);margin-block-end:var(--jkl-spacing-8)}}
+@layer jokul.components{:is(h1,h2,h3,h4,h5,h6,label,legend)[data-text-size=xs]{font:var(--jkl-text-style-heading-5);margin-block:0}:is(h1,h2,h3,h4,h5,h6,label,legend)[data-text-size=s]{font:var(--jkl-text-style-heading-4);margin-block:0}:is(h1,h2,h3,h4,h5,h6,label,legend)[data-text-size=m]{font:var(--jkl-text-style-heading-3);margin-block:0}:is(h1,h2,h3,h4,h5,h6,label,legend)[data-text-size=l]{font:var(--jkl-text-style-heading-2);margin-block:0}:is(h1,h2,h3,h4,h5,h6,label,legend)[data-text-size=xl]{font:var(--jkl-text-style-heading-1);margin-block:0}:is(label,legend)[data-text-size]{font-weight:var(--jkl-font-weight-normal);line-height:var(--jkl-line-height-relaxed)}:is(label)[data-text-size]{display:block;-webkit-margin-after:var(--jkl-spacing-8);margin-block-end:var(--jkl-spacing-8)}}

package/styles/components/typography/title.scss

@@ -12,48 +12,25 @@ $_size-styles: (
 );
 
 @layer jokul.components {
-    :where(.jkl-title) {
-        font-weight: var(--jkl-typography-weight-normal);
-        line-height: var(--jkl-line-height-tight);
-    }
-
-    // Scope margin-resetten til komponenten via `data-text-size` så vi ikke
-    // overstyrer margin på elementer som bare bruker `.jkl-title` som
-    // hjelpeklasse.
-    .jkl-title[data-text-size] {
-        margin-block: 0;
-    }
-
-    // Genererer både komponent-regler og ekvivalente hjelpeklasser fra
-    // samme kilde slik at de ikke drifter fra hverandre.
-    // `.jkl-heading-<size>` tilsvarer `<Title size="<size>">` brukt på et
-    // vilkårlig element.
     @each $name, $style in $_size-styles {
+        :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size="#{$name}"] {
+            margin-block: 0;
 
-        .jkl-title[data-text-size="#{$name}"],
-        .jkl-heading-#{$name} {
             @include jkl.text-style($style);
         }
-
-        :where(.jkl-heading-#{$name}) {
-            margin-block: 0;
-        }
     }
 
     // Skjema-elementer skal ikke arve heading sine fete font-weight og
     // tight line-height. De er tekst som beskriver et skjemafelt eller en
-    // gruppe, ikke strukturelle overskrifter. Spesifisiteten må matche
-    // `.jkl-title[data-text-size="…"]` (0,2,0) for å overstyre den.
-    :is(label, legend).jkl-title[data-text-size] {
-        font-weight: var(--jkl-typography-weight-normal);
+    // gruppe, ikke strukturelle overskrifter.
+    :is(label, legend)[data-text-size] {
+        font-weight: var(--jkl-font-weight-normal);
         line-height: var(--jkl-line-height-relaxed);
     }
 
     // Labels er blokk-nivå og har bunnmarg til feltet de beskriver.
-    // Spesifisiteten her (0,2,1) overstyrer `.jkl-title[data-text-size]`
-    // som ellers nullstiller margin via `margin-block: 0`.
-    label.jkl-title[data-text-size] {
+    :is(label)[data-text-size] {
         display: block;
         margin-block-end: var(--jkl-spacing-8);
     }
-}
+}

package/styles/components.css

@@ -322,7 +322,6 @@
 @layer jokul.components {
   .jkl-icon-button {
     background-color: transparent;
-    cursor: pointer;
     color: inherit;
     position: relative;
     transition-property: box-shadow;
@@ -432,7 +431,7 @@
     --color: var(--jkl-color-text-default);
   }
   .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-u1wrw19 forwards;
+    animation: var(--jkl-motion-timing-lazy) cubic-bezier(0, 0, 0.3, 1) var(--jkl-motion-timing-expressive) jkl-support-icon-entrance-uhpq1dc forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -486,7 +485,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-u1wrw19 {
+  @keyframes jkl-support-icon-entrance-uhpq1dc {
     0% {
       margin-right: 0;
       opacity: 0;
@@ -625,7 +624,6 @@
   .jkl-breadcrumb__item {
     margin-bottom: var(--jkl-unit-10);
     white-space: nowrap;
-    cursor: pointer;
   }
   .jkl-breadcrumb__item-separator {
     padding-left: var(--jkl-unit-10);
@@ -648,15 +646,9 @@
     text-decoration-thickness: 0.05em;
     text-decoration-color: rgb(from currentColor r g b/70%);
   }
-  .jkl-link__icon {
-    margin-inline-start: 0.2em;
-    margin-block-start: -0.1em;
-    vertical-align: middle;
-  }
-  .jkl-link--external::after, .jkl-link[target=_blank]::after, .jkl-link[download]::after {
+  .jkl-link::after {
     --jkl-icon-fill: 0;
     --jkl-icon-size: 1em;
-    content: "\e89e"/"(Åpnes i ny fane)";
     margin-block-start: -0.1em;
     padding-inline-start: 0.2em;
     vertical-align: middle;
@@ -674,6 +666,9 @@
     transition-property: font-variation-settings, transform;
     display: inline;
   }
+  .jkl-link--external::after, .jkl-link[target=_blank]::after {
+    content: "\e89e"/"(Åpnes i ny fane)";
+  }
   .jkl-link[download]::after {
     content: "\f090"/"(Last ned fil)";
   }
@@ -689,6 +684,16 @@
       --link-color: HighLight;
     }
   }
+  button.jkl-link {
+    appearance: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    background: none;
+    line-height: inherit;
+    font: inherit;
+    text-align: inherit;
+  }
 }
 @layer jokul.components {
   .jkl-button {
@@ -709,7 +714,6 @@
     display: inline-block;
     font: var(--jkl-text-style-text-medium);
     font-weight: var(--jkl-font-weight-bold);
-    cursor: pointer;
     user-select: none;
     background: var(--background-color);
     color: var(--text-color);
@@ -840,22 +844,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-u1wrw1n;
+    animation-name: jkl-loader-left-spin-uhpq1di;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-u1wrw26;
+    animation-name: jkl-loader-middle-spin-uhpq1ds;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-u1wrw2y;
+    animation-name: jkl-loader-right-spin-uhpq1em;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-u1wrw1n {
+  @keyframes jkl-loader-left-spin-uhpq1di {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -869,7 +873,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-u1wrw26 {
+  @keyframes jkl-loader-middle-spin-uhpq1ds {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -886,7 +890,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-u1wrw2y {
+  @keyframes jkl-loader-right-spin-uhpq1em {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -926,7 +930,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-u1wrw3f;
+      animation: 2s ease infinite jkl-blink-uhpq1fc;
     }
   }
   .jkl-skeleton-input {
@@ -974,10 +978,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-u1wrw3f;
+      animation: 2s ease-in-out infinite jkl-blink-uhpq1fc;
     }
   }
-  @keyframes jkl-blink-u1wrw3f {
+  @keyframes jkl-blink-uhpq1fc {
     0% {
       opacity: 1;
     }
@@ -1357,7 +1361,6 @@
   --border-width: 0.0625rem;
   font: var(--jkl-text-style-text-small);
   font-weight: var(--jkl-font-weight-bold);
-  cursor: pointer;
   position: relative;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -1658,7 +1661,6 @@
     color: var(--jkl-color-text-default);
     background-color: transparent;
     transition-property: color, background-color;
-    cursor: pointer;
     min-height: var(--jkl-combobox-option-height);
     padding: var(--jkl-combobox-option-padding);
     width: 100%;
@@ -2117,10 +2119,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-u1wrw4e var(--duration) linear forwards;
+    animation: jkl-downcount-uhpq1gp var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-u1wrw4e {
+  @keyframes jkl-downcount-uhpq1gp {
     from {
       width: 100%;
     }
@@ -2304,12 +2306,10 @@
   }
   .jkl-calendar-date-button:hover:not(:disabled) {
     background-color: color-mix(in srgb, currentColor 10%, transparent);
-    cursor: pointer;
   }
   .jkl-calendar-date-button[aria-pressed=true] {
     background-color: var(--jkl-color-background-contrast);
     color: var(--jkl-color-text-on-contrast);
-    cursor: pointer;
   }
   .jkl-calendar-date-button[aria-pressed=true]:hover {
     color: var(--jkl-color);
@@ -2623,12 +2623,12 @@
     font: var(--jkl-text-style-paragraph-small);
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-u1wrw4y 0.25s ease-out;
+    animation: jkl-show-uhpq1hl 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-u1wrw4y {
+  @keyframes jkl-show-uhpq1hl {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;
@@ -2754,7 +2754,6 @@
     position: relative;
     background-color: transparent;
     padding: 0;
-    cursor: pointer;
     color: inherit;
     display: grid;
     place-content: center;
@@ -2841,7 +2840,7 @@
     --icon-color: var(--jkl-color-success-background-contrast);
   }
   .jkl-message--dismissed {
-    animation: jkl-dismiss-u1wrw5v var(--jkl-motion-timing-lazy) ease-in-out forwards;
+    animation: jkl-dismiss-uhpq1i8 var(--jkl-motion-timing-lazy) ease-in-out forwards;
     transition: visibility 0ms var(--jkl-motion-timing-lazy);
     visibility: hidden;
   }
@@ -2863,7 +2862,7 @@
   .jkl-form-error-message {
     padding-bottom: var(--jkl-unit-50);
   }
-  @keyframes jkl-dismiss-u1wrw5v {
+  @keyframes jkl-dismiss-uhpq1i8 {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -3375,6 +3374,9 @@
     --link-color: var(--text-color);
     --jkl-color-border-strong: currentColor;
   }
+  .jkl-file[data-state=error] .jkl-file__content {
+    border-color: var(--jkl-color-error-border-default);
+  }
   @keyframes spin {
     from {
       transform: rotate(0turn);
@@ -3639,7 +3641,6 @@
     background-color: var(--background-color);
     color: var(--jkl-color-text-default);
     text-decoration: none;
-    cursor: pointer;
     box-sizing: border-box;
     user-select: none;
     font: var(--jkl-text-style-text-medium);
@@ -4086,13 +4087,13 @@
   .jkl-pagination-button {
     --button-size: var(--jkl-unit-40);
     all: unset;
+    cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     height: var(--button-size);
     min-width: var(--button-size);
     text-align: center;
-    cursor: pointer;
     user-select: none;
     border-radius: 0.1875rem;
     color: var(--jkl-color-text-default);
@@ -4462,7 +4463,7 @@
     transition-timing-function: var(--jkl-motion-easing-standard);
     transition-duration: var(--jkl-motion-timing-productive);
   }
-  @keyframes jkl-downcount-u1wrw5z {
+  @keyframes jkl-downcount-uhpq1j6 {
     from {
       width: 100%;
     }
@@ -4654,7 +4655,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   border: 0;
   height: 100%;
   padding: 0;
-  cursor: pointer;
   color: var(--jkl-color-text-default);
   border-radius: 100%;
 }
@@ -4883,7 +4883,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   .jkl-system-message__dismiss-button {
     background-color: transparent;
     padding: 0;
-    cursor: pointer;
     display: grid;
     place-content: center;
     position: relative;
@@ -4958,7 +4957,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     margin-bottom: 0;
   }
   .jkl-system-message--dismissed {
-    animation: jkl-dismiss-u1wrw6z var(--jkl-motion-timing-lazy) forwards;
+    animation: jkl-dismiss-uhpq1kd var(--jkl-motion-timing-lazy) forwards;
     transition: block var(--jkl-motion-timing-lazy) var(--jkl-motion-timing-lazy);
   }
   .jkl-system-message--info {
@@ -4996,7 +4995,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       border-width: 4px;
     }
   }
-  @keyframes jkl-dismiss-u1wrw6z {
+  @keyframes jkl-dismiss-uhpq1kd {
     from {
       opacity: 1;
       transform: translateY(0);
@@ -5232,7 +5231,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     background: transparent;
     color: var(--jkl-link-color);
     border-radius: 0.1875rem;
-    cursor: pointer;
     user-select: none;
     padding: 0;
     height: 2rem;
@@ -5609,7 +5607,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     padding: var(--jkl-unit-10) var(--padding-inline-end) var(--jkl-unit-10) var(--jkl-unit-05);
     border: none;
     background-color: transparent;
-    cursor: pointer;
     position: relative;
     scroll-margin-inline-start: var(--jkl-unit-20);
     scroll-snap-align: start;
@@ -5699,7 +5696,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     color: var(--text-color);
     background-color: var(--background-color);
     border: 1px solid var(--border-color);
-    border-radius: 4px;
+    border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
     align-items: start;
     overflow: hidden;
@@ -5709,12 +5706,14 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     font: var(--jkl-text-style-paragraph-medium);
   }
   .jkl-toast__progress {
-    --bar-color: var(--jkl-color-background-contrast);
-    --track-color: transparent;
-    border-radius: 0;
     position: absolute;
     inset: 0 0 auto;
   }
+  .jkl-toast .jkl-countdown {
+    --track-color: transparent;
+    --bar-color: var(--jkl-color-background-contrast);
+    border-radius: 0;
+  }
   @media screen and (forced-colors: active) {
     .jkl-toast__icon {
       stroke: CanvasText;
@@ -5742,7 +5741,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   .jkl-toast__dismiss-button {
     background-color: transparent;
     padding: 0;
-    cursor: pointer;
     color: inherit;
   }
   @media screen and (forced-colors: active) {
@@ -5769,21 +5767,45 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
     --text-color: var(--jkl-color-info-text-default);
     --border-color: var(--jkl-color-info-border-subdued);
   }
+  .jkl-toast--info .jkl-countdown {
+    --bar-color: var(--jkl-color-info-background-contrast);
+  }
+  .jkl-toast--info .jkl-toast__icon {
+    color: var(--jkl-color-info-background-contrast);
+  }
   .jkl-toast--warning {
     --background-color: var(--jkl-color-warning-background-container);
     --text-color: var(--jkl-color-warning-text-default);
     --border-color: var(--jkl-color-warning-border-subdued);
   }
+  .jkl-toast--warning .jkl-countdown {
+    --bar-color: var(--jkl-color-warning-background-contrast);
+  }
+  .jkl-toast--warning .jkl-toast__icon {
+    color: var(--jkl-color-warning-background-contrast);
+  }
   .jkl-toast--error {
     --background-color: var(--jkl-color-error-background-container);
     --text-color: var(--jkl-color-error-text-default);
     --border-color: var(--jkl-color-error-border-subdued);
   }
+  .jkl-toast--error .jkl-countdown {
+    --bar-color: var(--jkl-color-error-background-contrast);
+  }
+  .jkl-toast--error .jkl-toast__icon {
+    color: var(--jkl-color-error-background-contrast);
+  }
   .jkl-toast--success {
     --background-color: var(--jkl-color-success-background-container);
     --text-color: var(--jkl-color-success-text-default);
     --border-color: var(--jkl-color-success-border-subdued);
   }
+  .jkl-toast--success .jkl-countdown {
+    --bar-color: var(--jkl-color-success-background-contrast);
+  }
+  .jkl-toast--success .jkl-toast__icon {
+    color: var(--jkl-color-success-background-contrast);
+  }
   @media screen and (forced-colors: active) {
     .jkl-toast {
       border: 2px solid CanvasText;
@@ -5801,12 +5823,12 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
   }
   .jkl-toast[data-animation=entering],
   .jkl-toast[data-animation=queued] {
-    animation: jkl-entering-u1wrw7u var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
+    animation: jkl-entering-uhpq1kj var(--jkl-motion-timing-polite) var(--jkl-motion-easing-entrance) forwards;
   }
   .jkl-toast[data-animation=exiting] {
-    animation: jkl-exiting-u1wrw8g var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
+    animation: jkl-exiting-uhpq1le var(--jkl-motion-timing-productive) var(--jkl-motion-easing-exit) forwards;
   }
-  @keyframes jkl-entering-u1wrw7u {
+  @keyframes jkl-entering-uhpq1kj {
     from {
       opacity: 0;
       transform: translate3d(0, 50%, 0);
@@ -5816,7 +5838,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-select--beta s
       transform: translate3d(0, 0, 0);
     }
   }
-  @keyframes jkl-exiting-u1wrw8g {
+  @keyframes jkl-exiting-uhpq1le {
     from {
       opacity: 1;
       transform: translate3d(0, 0, 0);
@@ -7291,7 +7313,6 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   background: transparent;
   color: var(--text-color);
   padding: 0;
-  cursor: pointer;
   -webkit-tap-highlight-color: transparent;
   display: flex;
   flex-direction: row-reverse;
@@ -7398,7 +7419,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
 
 @layer jokul.components {
   :where(.jkl-text) {
-    font-weight: var(--jkl-typography-weight-normal);
+    font-weight: var(--jkl-font-weight-normal);
     line-height: var(--jkl-line-height-relaxed);
   }
   .jkl-text[data-text-size] {
@@ -7418,7 +7439,7 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   }
   .jkl-text[data-bold],
   strong.jkl-text[data-text-size] {
-    font-weight: var(--jkl-typography-weight-bold);
+    font-weight: var(--jkl-font-weight-bold);
   }
   .jkl-text[data-short] {
     line-height: var(--jkl-line-height-tight);
@@ -7432,53 +7453,31 @@ html:not([data-mousenavigation]):not([data-touchnavigation]) .jkl-toggle-slider:
   }
 }
 @layer jokul.components {
-  :where(.jkl-title) {
-    font-weight: var(--jkl-typography-weight-normal);
-    line-height: var(--jkl-line-height-tight);
-  }
-  .jkl-title[data-text-size] {
+  :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size=xs] {
     margin-block: 0;
-  }
-  .jkl-title[data-text-size=xs],
-  .jkl-heading-xs {
     font: var(--jkl-text-style-heading-5);
   }
-  :where(.jkl-heading-xs) {
+  :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size=s] {
     margin-block: 0;
-  }
-  .jkl-title[data-text-size=s],
-  .jkl-heading-s {
     font: var(--jkl-text-style-heading-4);
   }
-  :where(.jkl-heading-s) {
+  :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size=m] {
     margin-block: 0;
-  }
-  .jkl-title[data-text-size=m],
-  .jkl-heading-m {
     font: var(--jkl-text-style-heading-3);
   }
-  :where(.jkl-heading-m) {
+  :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size=l] {
     margin-block: 0;
-  }
-  .jkl-title[data-text-size=l],
-  .jkl-heading-l {
     font: var(--jkl-text-style-heading-2);
   }
-  :where(.jkl-heading-l) {
+  :is(h1, h2, h3, h4, h5, h6, label, legend)[data-text-size=xl] {
     margin-block: 0;
-  }
-  .jkl-title[data-text-size=xl],
-  .jkl-heading-xl {
     font: var(--jkl-text-style-heading-1);
   }
-  :where(.jkl-heading-xl) {
-    margin-block: 0;
-  }
-  :is(label, legend).jkl-title[data-text-size] {
-    font-weight: var(--jkl-typography-weight-normal);
+  :is(label, legend)[data-text-size] {
+    font-weight: var(--jkl-font-weight-normal);
     line-height: var(--jkl-line-height-relaxed);
   }
-  label.jkl-title[data-text-size] {
+  :is(label)[data-text-size] {
     display: block;
     margin-block-end: var(--jkl-spacing-8);
   }