@ndla/ui 55.0.15-alpha.0 → 55.0.17-alpha.0

package/dist/styles.css

@@ -1,5 +1,17 @@
 @layer utilities {
   @layer compositions {
+    .textStyle_body\.medium {
+      font-family: var(--fonts-sans);
+      font-weight: var(--font-weights-normal);
+      font-size: var(--font-sizes-small);
+      line-height: var(--line-heights-small);
+}
+
+    .textStyle_body\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-small) * 1.11);
+      line-height: calc(var(--line-heights-small) * 1.11);
+}
+
     .textStyle_body\.large {
       font-family: var(--fonts-sans);
       font-weight: var(--font-weights-normal);
@@ -36,18 +48,6 @@
       line-height: calc(var(--line-heights-medium) * 1.11);
 }
 
-    .textStyle_body\.medium {
-      font-family: var(--fonts-sans);
-      font-weight: var(--font-weights-normal);
-      font-size: var(--font-sizes-small);
-      line-height: var(--line-heights-small);
-}
-
-    .textStyle_body\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
-      font-size: calc(var(--font-sizes-small) * 1.11);
-      line-height: calc(var(--line-heights-small) * 1.11);
-}
-
     .\[\&_a\]\:textStyle_label\.xsmall a {
       font-family: var(--fonts-sans);
       font-weight: var(--font-weights-normal);
@@ -61,6 +61,78 @@
 }
 }
 
+  .w_100\% {
+    width: 100%;
+}
+
+  .d_flex {
+    display: flex;
+}
+
+  .c_text\.default {
+    color: var(--colors-text-default);
+}
+
+  .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);
+}
+
+  .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;
+}
+
   .bd_1px_solid {
     border: 1px solid;
 }
@@ -81,10 +153,6 @@
     overflow: hidden;
 }
 
-  .d_flex {
-    display: flex;
-}
-
   .flex_1_0_auto {
     flex: 1 0 auto;
 }
@@ -97,18 +165,10 @@
     height: var(--sizes-surface-4xsmall);
 }
 
-  .gap_xsmall {
-    gap: var(--spacing-xsmall);
-}
-
   .p_xsmall {
     padding: var(--spacing-xsmall);
 }
 
-  .w_100\% {
-    width: 100%;
-}
-
   .bd-bs_1px_solid {
     border-block-start: 1px solid;
 }
@@ -134,10 +194,6 @@
     background: var(--colors-background-default);
 }
 
-  .py_xsmall {
-    padding-block: var(--spacing-xsmall);
-}
-
   .px_medium {
     padding-inline: var(--spacing-medium);
 }
@@ -210,14 +266,6 @@
     border-width: 0;
 }
 
-  .c_text\.default {
-    color: var(--colors-text-default);
-}
-
-  .gap_medium {
-    gap: var(--spacing-medium);
-}
-
   .h_100\% {
     height: 100%;
 }
@@ -250,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 {
@@ -298,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);
 }
@@ -314,10 +426,6 @@
     color: var(--colors-text-error);
 }
 
-  .h_surface\.xsmall {
-    height: var(--sizes-surface-xsmall);
-}
-
   .bd-b_0 {
     border-bottom: 0;
 }
@@ -326,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));
@@ -351,10 +451,6 @@
     height: var(--sizes-medium);
 }
 
-  .bd_2px_solid {
-    border: 2px solid;
-}
-
   .c_background\.default {
     color: var(--colors-background-default);
 }
@@ -387,10 +483,6 @@
     margin-block: var(--spacing-xxlarge);
 }
 
-  .p_medium {
-    padding: var(--spacing-medium);
-}
-
   .max-h_surface\.xxsmall {
     max-height: var(--sizes-surface-xxsmall);
 }
@@ -411,20 +503,28 @@
     padding-block: var(--spacing-small);
 }
 
-  .bd-t_1px_solid {
-    border-top: 1px solid;
+  .pos_relative\! {
+    position: relative !important;
 }
 
-  .bg_surface\.default {
-    background: var(--colors-surface-default);
+  .w_83\.333\% {
+    width: 83.333%;
 }
 
-  .bg_surface\.dangerSubtle {
-    background: var(--colors-surface-danger-subtle);
+  .max-w_1150px {
+    max-width: 1150px;
 }
 
-  .d_inline-flex {
-    display: inline-flex;
+  .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 {
@@ -443,10 +543,6 @@
     color: var(--colors-icon-strong);
 }
 
-  .li-s_none {
-    list-style: none;
-}
-
   .d_grid {
     display: grid;
 }
@@ -459,8 +555,8 @@
     aspect-ratio: 1/1;
 }
 
-  .bd-c_stroke\.default {
-    border-color: var(--colors-stroke-default);
+  .flex-d_column {
+    flex-direction: column;
 }
 
   .ai_center {
@@ -471,8 +567,28 @@
     align-items: flex-start;
 }
 
-  .flex-d_column {
-    flex-direction: column;
+  .right_8\% {
+    right: 8%;
+}
+
+  .top_xsmall {
+    top: var(--spacing-xsmall);
+}
+
+  .bd-c_stroke\.subtle {
+    border-color: var(--colors-stroke-subtle);
+}
+
+  .flex-d_column-reverse {
+    flex-direction: column-reverse;
+}
+
+  .jc_space-between {
+    justify-content: space-between;
+}
+
+  .bd-c_stroke\.default {
+    border-color: var(--colors-stroke-default);
 }
 
   .as_flex-start {
@@ -487,10 +603,6 @@
     background-color: var(--colors-background-default);
 }
 
-  .bd-c_stroke\.subtle {
-    border-color: var(--colors-stroke-subtle);
-}
-
   .trs-dur_fast {
     --transition-duration: var(--durations-fast);
     transition-duration: var(--durations-fast);
@@ -506,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;
 }
@@ -522,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);
 }
@@ -565,10 +701,6 @@
     transition-timing-function: ease-out;
 }
 
-  .top_xsmall {
-    top: var(--spacing-xsmall);
-}
-
   .right_xsmall {
     right: var(--spacing-xsmall);
 }
@@ -620,14 +752,34 @@
     bottom: calc(var(--spacing-medium) * -1);
 }
 
-  .jc_space-between {
-    justify-content: space-between;
-}
-
   .font-style_italic {
     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);
 }
@@ -636,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;
 }
@@ -752,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);
 }
@@ -851,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 {
@@ -867,6 +1075,10 @@
     z-index: 0;
 }
 
+  .after\:content_0::after {
+    content: 0;
+}
+
   .\[\&_\.linenumber\]\:bd-c_stroke\.subtle .linenumber {
     border-color: var(--colors-stroke-subtle);
 }
@@ -883,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;
@@ -935,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;
@@ -950,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;
 }
 
@@ -1077,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;
 }
 }
 
@@ -1120,6 +1413,9 @@
 }
 
   @media screen and (min-width: 61.3125rem) {
+    .desktop\:py_xxlarge {
+      padding-block: var(--spacing-xxlarge);
+}
     .desktop\:w_260px {
       width: 260px;
 }
@@ -1128,6 +1424,9 @@
 }
     .desktop\:h_340px {
       height: 340px;
+}
+    .desktop\:top_xxlarge {
+      top: var(--spacing-xxlarge);
 }
 }
 
@@ -1168,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;
 }
@@ -1188,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;
 }
 }
 
@@ -1251,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;
 }
 }