@ndla/ui 55.0.16-alpha.0 → 55.0.18-alpha.0

package/dist/styles.css

@@ -61,46 +61,74 @@
 }
 }
 
-  .mbs_medium {
-    margin-block-start: var(--spacing-medium);
-}
-
-  .pbs_xsmall {
-    padding-block-start: var(--spacing-xsmall);
-}
-
-  .bd-t_1px_solid {
-    border-top: 1px solid;
+  .w_100\% {
+    width: 100%;
 }
 
   .d_flex {
     display: flex;
 }
 
-  .gap_3xsmall {
-    gap: var(--spacing-3xsmall);
+  .c_text\.default {
+    color: var(--colors-text-default);
 }
 
-  .w_100\% {
-    width: 100%;
+  .gap_xxlarge {
+    gap: var(--spacing-xxlarge);
+}
+
+  .bg_surface\.default {
+    background: var(--colors-surface-default);
 }
 
   .py_xsmall {
     padding-block: var(--spacing-xsmall);
 }
 
+  .px_8\% {
+    padding-inline: 8%;
+}
+
+  .ov-wrap_break-word {
+    overflow-wrap: break-word;
+}
+
+  .pos_relative {
+    position: relative;
+}
+
   .gap_xsmall {
     gap: var(--spacing-xsmall);
 }
 
-  .pbs_xxlarge {
-    padding-block-start: var(--spacing-xxlarge);
+  .pos_absolute {
+    position: absolute;
 }
 
   .gap_medium {
     gap: var(--spacing-medium);
 }
 
+  .mbs_medium {
+    margin-block-start: var(--spacing-medium);
+}
+
+  .pbs_xsmall {
+    padding-block-start: var(--spacing-xsmall);
+}
+
+  .bd-t_1px_solid {
+    border-top: 1px solid;
+}
+
+  .gap_3xsmall {
+    gap: var(--spacing-3xsmall);
+}
+
+  .pbs_xxlarge {
+    padding-block-start: var(--spacing-xxlarge);
+}
+
   .li-s_none {
     list-style: none;
 }
@@ -238,10 +266,6 @@
     border-width: 0;
 }
 
-  .c_text\.default {
-    color: var(--colors-text-default);
-}
-
   .h_100\% {
     height: 100%;
 }
@@ -274,32 +298,32 @@
     width: fit-content;
 }
 
-  .pos_relative {
-    position: relative;
-}
-
   .max-w_8xl {
     max-width: 8xl;
 }
 
-  .max-w_surface\.xsmall {
-    max-width: var(--sizes-surface-xsmall);
+  .c_inherit {
+    color: inherit;
 }
 
-  .gap_xxsmall {
-    gap: var(--spacing-xxsmall);
+  .gap_4xsmall {
+    gap: var(--spacing-4xsmall);
 }
 
   .td_underline {
     text-decoration: underline;
 }
 
-  .h_215px {
-    height: 215px;
+  .max-w_surface\.xsmall {
+    max-width: var(--sizes-surface-xsmall);
 }
 
-  .c_inherit {
-    color: inherit;
+  .gap_xxsmall {
+    gap: var(--spacing-xxsmall);
+}
+
+  .h_215px {
+    height: 215px;
 }
 
   .bd-l_4px_solid {
@@ -322,6 +346,70 @@
     display: inline;
 }
 
+  .max-w_744px {
+    max-width: 744px;
+}
+
+  .min-w_surface\.xxsmall {
+    min-width: var(--sizes-surface-xxsmall);
+}
+
+  .p_medium {
+    padding: var(--spacing-medium);
+}
+
+  .z_base {
+    z-index: var(--z-index-base);
+}
+
+  .w_surface\.xsmall {
+    width: var(--sizes-surface-xsmall);
+}
+
+  .h_surface\.xsmall {
+    height: var(--sizes-surface-xsmall);
+}
+
+  .d_inline-flex {
+    display: inline-flex;
+}
+
+  .bdr_100\% {
+    border-radius: 100%;
+}
+
+  .c_var\(--icon-color\) {
+    color: var(--icon-color);
+}
+
+  .w_20px {
+    width: 20px;
+}
+
+  .h_20px {
+    height: 20px;
+}
+
+  .w_34px {
+    width: 34px;
+}
+
+  .h_34px {
+    height: 34px;
+}
+
+  .w_50px {
+    width: 50px;
+}
+
+  .h_50px {
+    height: 50px;
+}
+
+  .bd_2px_solid {
+    border: 2px solid;
+}
+
   .ms_xsmall {
     margin-inline-start: var(--spacing-xsmall);
 }
@@ -338,10 +426,6 @@
     color: var(--colors-text-error);
 }
 
-  .h_surface\.xsmall {
-    height: var(--sizes-surface-xsmall);
-}
-
   .bd-b_0 {
     border-bottom: 0;
 }
@@ -350,14 +434,6 @@
     cursor: pointer;
 }
 
-  .pos_absolute {
-    position: absolute;
-}
-
-  .z_base {
-    z-index: var(--z-index-base);
-}
-
   .bg_background\.default\/20 {
     --mix-background: color-mix(in srgb, var(--colors-background-default) 20%, transparent);
     background: var(--mix-background, var(--colors-background-default));
@@ -375,10 +451,6 @@
     height: var(--sizes-medium);
 }
 
-  .bd_2px_solid {
-    border: 2px solid;
-}
-
   .c_background\.default {
     color: var(--colors-background-default);
 }
@@ -411,10 +483,6 @@
     margin-block: var(--spacing-xxlarge);
 }
 
-  .p_medium {
-    padding: var(--spacing-medium);
-}
-
   .max-h_surface\.xxsmall {
     max-height: var(--sizes-surface-xxsmall);
 }
@@ -435,16 +503,28 @@
     padding-block: var(--spacing-small);
 }
 
-  .bg_surface\.default {
-    background: var(--colors-surface-default);
+  .pos_relative\! {
+    position: relative !important;
 }
 
-  .bg_surface\.dangerSubtle {
-    background: var(--colors-surface-danger-subtle);
+  .w_83\.333\% {
+    width: 83.333%;
 }
 
-  .d_inline-flex {
-    display: inline-flex;
+  .max-w_1150px {
+    max-width: 1150px;
+}
+
+  .max-w_1024px {
+    max-width: 1024px;
+}
+
+  .min-h_100vh {
+    min-height: 100vh;
+}
+
+  .bg_surface\.dangerSubtle {
+    background: var(--colors-surface-danger-subtle);
 }
 
   .white-space_pre-wrap {
@@ -475,6 +555,26 @@
     aspect-ratio: 1/1;
 }
 
+  .flex-d_column {
+    flex-direction: column;
+}
+
+  .ai_center {
+    align-items: center;
+}
+
+  .ai_flex-start {
+    align-items: flex-start;
+}
+
+  .right_8\% {
+    right: 8%;
+}
+
+  .top_xsmall {
+    top: var(--spacing-xsmall);
+}
+
   .bd-c_stroke\.subtle {
     border-color: var(--colors-stroke-subtle);
 }
@@ -487,22 +587,10 @@
     justify-content: space-between;
 }
 
-  .ai_center {
-    align-items: center;
-}
-
-  .flex-d_column {
-    flex-direction: column;
-}
-
   .bd-c_stroke\.default {
     border-color: var(--colors-stroke-default);
 }
 
-  .ai_flex-start {
-    align-items: flex-start;
-}
-
   .as_flex-start {
     align-self: flex-start;
 }
@@ -530,6 +618,14 @@
     transition-timing-function: var(--easings-default);
 }
 
+  .flex-wrap_wrap {
+    flex-wrap: wrap;
+}
+
+  .ai_flex-end {
+    align-items: flex-end;
+}
+
   .as_center {
     align-self: center;
 }
@@ -546,6 +642,22 @@
     font-family: var(--fonts-code);
 }
 
+  .jc_flex-start {
+    justify-content: flex-start;
+}
+
+  .ff_serif {
+    font-family: var(--fonts-serif);
+}
+
+  .bd-c_var\(--icon-color\) {
+    border-color: var(--icon-color);
+}
+
+  .bg-c_var\(--background-color\) {
+    background-color: var(--background-color);
+}
+
   .fw_bold {
     font-weight: var(--font-weights-bold);
 }
@@ -589,10 +701,6 @@
     transition-timing-function: ease-out;
 }
 
-  .top_xsmall {
-    top: var(--spacing-xsmall);
-}
-
   .right_xsmall {
     right: var(--spacing-xsmall);
 }
@@ -648,6 +756,30 @@
     font-style: italic;
 }
 
+  .right_auto\! {
+    right: auto !important;
+}
+
+  .left_8\.333\% {
+    left: 8.333%;
+}
+
+  .ml_auto {
+    margin-left: auto;
+}
+
+  .mr_auto {
+    margin-right: auto;
+}
+
+  .pl_18px {
+    padding-left: 18px;
+}
+
+  .pr_18px {
+    padding-right: 18px;
+}
+
   .bd-c_stroke\.error {
     border-color: var(--colors-stroke-error);
 }
@@ -656,6 +788,22 @@
     grid-template-columns: repeat(2, 1fr);
 }
 
+  .\[\&_mjx-stretchy-v_\>_mjx-ext_\>_mjx-c\]\:trf_scaleY\(100\)_translateY\(0\.075em\) mjx-stretchy-v > mjx-ext > mjx-c {
+    transform: scaleY(100) translateY(0.075em);
+}
+
+  .after\:d_table::after {
+    display: table;
+}
+
+  .after\:clear_both::after {
+    clear: both;
+}
+
+  .\[\&_h1\]\:ov-wrap_anywhere h1 {
+    overflow-wrap: anywhere;
+}
+
   .\[\&\[data-align\=\"center\"\]\]\:ta_center[data-align="center"] {
     text-align: center;
 }
@@ -772,6 +920,42 @@
     display: inline;
 }
 
+  .before\:pos_absolute::before {
+    position: absolute;
+}
+
+  .before\:h_calc\(100\%_\+_50px\)::before {
+    height: calc(100% + 50px);
+}
+
+  .before\:w_surface\.3xlarge::before {
+    width: var(--sizes-surface-3xlarge);
+}
+
+  .before\:trf_rotate\(-4deg\)::before {
+    transform: rotate(-4deg);
+}
+
+  .before\:z_hide::before {
+    z-index: var(--z-index-hide);
+}
+
+  .\[\&_svg\]\:w_10px svg {
+    width: 10px;
+}
+
+  .\[\&_svg\]\:h_10px svg {
+    height: 10px;
+}
+
+  .\[\&_svg\]\:w_25px svg {
+    width: 25px;
+}
+
+  .\[\&_svg\]\:h_25px svg {
+    height: 25px;
+}
+
   .\[\&_\>_\*\:not\(\:where\(\:first-child\)\)\]\:mbs_xsmall > *:not(:where(:first-child)) {
     margin-block-start: var(--spacing-xsmall);
 }
@@ -871,12 +1055,16 @@
     background: var(--colors-surface-brand-1-subtle);
 }
 
-  .\[\&_h3\]\:td_underline h3 {
-    text-decoration: underline;
+  .after\:d_block\!::after {
+    display: block !important;
 }
 
-  .before\:pos_absolute::before {
-    position: absolute;
+  .after\:clear_both\!::after {
+    clear: both !important;
+}
+
+  .\[\&_h3\]\:td_underline h3 {
+    text-decoration: underline;
 }
 
   .before\:inset_0::before {
@@ -887,6 +1075,10 @@
     z-index: 0;
 }
 
+  .after\:content_0::after {
+    content: 0;
+}
+
   .\[\&_\.linenumber\]\:bd-c_stroke\.subtle .linenumber {
     border-color: var(--colors-stroke-subtle);
 }
@@ -903,6 +1095,38 @@
     font-style: italic;
 }
 
+  .before\:content_\"\"::before {
+    content: "";
+}
+
+  .before\:top_-60px::before {
+    top: -60px;
+}
+
+  .before\:left_-50px::before {
+    left: -50px;
+}
+
+  .before\:right_0::before {
+    right: 0;
+}
+
+  .before\:bottom_0::before {
+    bottom: 0;
+}
+
+  .before\:bg-c_surface\.brand\.3::before {
+    background-color: var(--colors-surface-brand-3);
+}
+
+  .before\:bg-c_surface\.brand\.3\.moderate::before {
+    background-color: var(--colors-surface-brand-3-moderate);
+}
+
+  .before\:bg-c_surface\.brand\.3\.subtle::before {
+    background-color: var(--colors-surface-brand-3-subtle);
+}
+
   .\[\&_svg\]\:trs-prop_transform svg {
     --transition-prop: transform;
     transition-property: transform;
@@ -955,6 +1179,10 @@
     border-color: var(--colors-stroke-default);
 }
 
+  .after\:content_\"\"\!::after {
+    content: "" !important;
+}
+
   .\[\&_\[data-forward\]\]\:trs-prop_width\,_height [data-forward] {
     --transition-prop: width, height;
     transition-property: width, height;
@@ -970,11 +1198,11 @@
     transition-duration: var(--durations-fast);
 }
 
-  .before\:content_\"\"::before {
-    content: "";
+  .focusWithin\:td_none:focus-within {
+    text-decoration: none;
 }
 
-  .focusWithin\:td_none:focus-within {
+  .focusVisible\:td_none:is(:focus-visible, [data-focus-visible]) {
     text-decoration: none;
 }
 
@@ -1097,24 +1325,69 @@
 }
     .mobileWide\:d_none {
       display: none;
+}
+    .mobileWide\:pl_medium {
+      padding-left: var(--spacing-medium);
+}
+    .mobileWide\:pr_medium {
+      padding-right: var(--spacing-medium);
 }
 }
 
   @media screen and (min-width: 37.5625rem) {
+    .tablet\:py_medium {
+      padding-block: var(--spacing-medium);
+}
     .tablet\:px_medium {
       padding-inline: var(--spacing-medium);
+}
+    .tablet\:h_26px {
+      height: 26px;
+}
+    .tablet\:w_26px {
+      width: 26px;
+}
+    .tablet\:pos_relative\! {
+      position: relative !important;
+}
+    .tablet\:w_83\.333\% {
+      width: 83.333%;
+}
+    .tablet\:top_medium {
+      top: var(--spacing-medium);
+}
+    .tablet\:ai_unset {
+      align-items: unset;
+}
+    .tablet\:flex-d_row {
+      flex-direction: row;
 }
     .tablet\:mt_xxlarge {
       margin-top: var(--spacing-xxlarge);
 }
     .tablet\:mb_xxlarge {
       margin-bottom: var(--spacing-xxlarge);
+}
+    .tablet\:right_auto\! {
+      right: auto !important;
+}
+    .tablet\:left_8\.333\% {
+      left: 8.333%;
+}
+    .tablet\:bg-c_\#f8f8f8 {
+      background-color: #f8f8f8;
 }
     .\[\&\[data-has-image\=\'true\'\]\]\:tablet\:py_xsmall[data-has-image='true'] {
       padding-block: var(--spacing-xsmall);
 }
     .\[\&\[data-has-image\=\'true\'\]\]\:tablet\:px_medium[data-has-image='true'] {
       padding-inline: var(--spacing-medium);
+}
+    .\[\&_svg\]\:tablet\:w_12px svg {
+      width: 12px;
+}
+    .\[\&_svg\]\:tablet\:h_12px svg {
+      height: 12px;
 }
 }
 
@@ -1140,6 +1413,9 @@
 }
 
   @media screen and (min-width: 61.3125rem) {
+    .desktop\:py_xxlarge {
+      padding-block: var(--spacing-xxlarge);
+}
     .desktop\:w_260px {
       width: 260px;
 }
@@ -1148,6 +1424,9 @@
 }
     .desktop\:h_340px {
       height: 340px;
+}
+    .desktop\:top_xxlarge {
+      top: var(--spacing-xxlarge);
 }
 }
 
@@ -1188,6 +1467,12 @@
 }
 
   @media screen and (max-width: 37.56rem) {
+    .tabletDown\:d_block {
+      display: block;
+}
+    .tabletDown\:d_none {
+      display: none;
+}
     .tabletDown\:gap_0 {
       gap: 0;
 }
@@ -1208,6 +1493,39 @@
 }
     .tabletDown\:flex-d_column {
       flex-direction: column;
+}
+    .tabletDown\:before\:d_none::before {
+      display: none;
+}
+    .tabletDown\:before\:pos_absolute::before {
+      position: absolute;
+}
+    .tabletDown\:before\:h_surface\.xxsmall::before {
+      height: var(--sizes-surface-xxsmall);
+}
+    .tabletDown\:before\:w_surface\.3xlarge::before {
+      width: var(--sizes-surface-3xlarge);
+}
+    .tabletDown\:before\:trf_rotate\(-4deg\)::before {
+      transform: rotate(-4deg);
+}
+    .tabletDown\:before\:z_hide::before {
+      z-index: var(--z-index-hide);
+}
+    .tabletDown\:before\:content_\"\"::before {
+      content: "";
+}
+    .tabletDown\:before\:top_-50px::before {
+      top: -50px;
+}
+    .tabletDown\:before\:left_-50px::before {
+      left: -50px;
+}
+    .tabletDown\:before\:right_0::before {
+      right: 0;
+}
+    .tabletDown\:before\:bottom_0::before {
+      bottom: 0;
 }
 }
 
@@ -1271,6 +1589,18 @@
   @media screen and (max-width: 19.9975rem) {
     .mobileDown\:px_xsmall {
       padding-inline: var(--spacing-xsmall);
+}
+    .mobileDown\:gap_xxsmall {
+      gap: var(--spacing-xxsmall);
+}
+    .mobileDown\:ai_flex-start {
+      align-items: flex-start;
+}
+    .mobileDown\:jc_center {
+      justify-content: center;
+}
+    .mobileDown\:flex-d_column {
+      flex-direction: column;
 }
 }