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

package/lib/styles.css

@@ -35,6 +35,30 @@
       font-size: calc(var(--font-sizes-medium) * 1.11);
       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);
+      font-size: var(--font-sizes-xxsmall);
+      line-height: var(--line-heights-xxsmall);
+}
+
+    .\[\&_a\]\:textStyle_label\.xsmall a:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-xxsmall) * 1.11);
+      line-height: calc(var(--line-heights-xxsmall) * 1.11);
+}
 }
 
   .bd_1px_solid {
@@ -49,6 +73,10 @@
     box-shadow: var(--shadows-full);
 }
 
+  .mbe_4xsmall {
+    margin-block-end: var(--spacing-4xsmall);
+}
+
   .ov_hidden {
     overflow: hidden;
 }
@@ -230,6 +258,26 @@
     max-width: 8xl;
 }
 
+  .max-w_surface\.xsmall {
+    max-width: var(--sizes-surface-xsmall);
+}
+
+  .gap_xxsmall {
+    gap: var(--spacing-xxsmall);
+}
+
+  .td_underline {
+    text-decoration: underline;
+}
+
+  .h_215px {
+    height: 215px;
+}
+
+  .c_inherit {
+    color: inherit;
+}
+
   .bd-l_4px_solid {
     border-left: 4px solid;
 }
@@ -246,6 +294,26 @@
     white-space: pre;
 }
 
+  .d_inline {
+    display: inline;
+}
+
+  .ms_xsmall {
+    margin-inline-start: var(--spacing-xsmall);
+}
+
+  .h_auto {
+    height: auto;
+}
+
+  .w_surface\.xlarge {
+    width: var(--sizes-surface-xlarge);
+}
+
+  .c_text\.error {
+    color: var(--colors-text-error);
+}
+
   .h_surface\.xsmall {
     height: var(--sizes-surface-xsmall);
 }
@@ -295,6 +363,102 @@
     border-radius: var(--radii-large);
 }
 
+  .ov_visible {
+    overflow: visible;
+}
+
+  .bd-b_1px_solid {
+    border-bottom: 1px solid;
+}
+
+  .py_4xsmall {
+    padding-block: var(--spacing-4xsmall);
+}
+
+  .px_4xsmall {
+    padding-inline: var(--spacing-4xsmall);
+}
+
+  .ta_center {
+    text-align: center;
+}
+
+  .my_xxlarge {
+    margin-block: var(--spacing-xxlarge);
+}
+
+  .p_medium {
+    padding: var(--spacing-medium);
+}
+
+  .max-h_surface\.xxsmall {
+    max-height: var(--sizes-surface-xxsmall);
+}
+
+  .gap_small {
+    gap: var(--spacing-small);
+}
+
+  .px_0 {
+    padding-inline: 0;
+}
+
+  .mbs_3xsmall {
+    margin-block-start: var(--spacing-3xsmall);
+}
+
+  .py_small {
+    padding-block: var(--spacing-small);
+}
+
+  .bd-t_1px_solid {
+    border-top: 1px solid;
+}
+
+  .bg_surface\.default {
+    background: var(--colors-surface-default);
+}
+
+  .bg_surface\.dangerSubtle {
+    background: var(--colors-surface-danger-subtle);
+}
+
+  .d_inline-flex {
+    display: inline-flex;
+}
+
+  .white-space_pre-wrap {
+    white-space: pre-wrap;
+}
+
+  .c_primary {
+    color: var(--colors-primary);
+}
+
+  .white-space_nowrap {
+    white-space: nowrap;
+}
+
+  .c_icon\.strong {
+    color: var(--colors-icon-strong);
+}
+
+  .li-s_none {
+    list-style: none;
+}
+
+  .d_grid {
+    display: grid;
+}
+
+  .mbs_xsmall {
+    margin-block-start: var(--spacing-xsmall);
+}
+
+  .asp_1\/1 {
+    aspect-ratio: 1/1;
+}
+
   .bd-c_stroke\.default {
     border-color: var(--colors-stroke-default);
 }
@@ -342,6 +506,10 @@
     transition-timing-function: var(--easings-default);
 }
 
+  .as_center {
+    align-self: center;
+}
+
   .bd-l-c_stroke\.default {
     border-left-color: var(--colors-stroke-default);
 }
@@ -413,6 +581,69 @@
     background-color: var(--colors-surface-action);
 }
 
+  .border-style_dashed {
+    border-style: dashed;
+}
+
+  .bd-c_stroke\.hover {
+    border-color: var(--colors-stroke-hover);
+}
+
+  .mb_medium {
+    margin-bottom: var(--spacing-medium);
+}
+
+  .mt_3xsmall {
+    margin-top: var(--spacing-3xsmall);
+}
+
+  .ml_3xsmall {
+    margin-left: var(--spacing-3xsmall);
+}
+
+  .trs-prop_max-height {
+    --transition-prop: max-height;
+    transition-property: max-height;
+}
+
+  .trs-dur_slow {
+    --transition-duration: var(--durations-slow);
+    transition-duration: var(--durations-slow);
+}
+
+  .trs-tmf_ease-in-out {
+    --transition-easing: ease-in-out;
+    transition-timing-function: ease-in-out;
+}
+
+  .bottom_-medium {
+    bottom: calc(var(--spacing-medium) * -1);
+}
+
+  .jc_space-between {
+    justify-content: space-between;
+}
+
+  .font-style_italic {
+    font-style: italic;
+}
+
+  .bd-c_stroke\.error {
+    border-color: var(--colors-stroke-error);
+}
+
+  .grid-tc_repeat\(2\,_1fr\) {
+    grid-template-columns: repeat(2, 1fr);
+}
+
+  .\[\&\[data-align\=\"center\"\]\]\:ta_center[data-align="center"] {
+    text-align: center;
+}
+
+  .\[\&\:has\(span\[dir\=\"rtl\"\]\)\]\:direction_rtl:has(span[dir="rtl"]) {
+    direction: rtl;
+}
+
   .\[\&_img\]\:w_100\% img {
     width: 100%;
 }
@@ -517,10 +748,18 @@
     opacity: 0.7;
 }
 
+  .\[\&_p\]\:d_inline p {
+    display: inline;
+}
+
   .\[\&_\>_\*\:not\(\:where\(\:first-child\)\)\]\:mbs_xsmall > *:not(:where(:first-child)) {
     margin-block-start: var(--spacing-xsmall);
 }
 
+  .\[\&_li\]\:d_block li {
+    display: block;
+}
+
   .\[\&_svg\]\:fill_text\.subtle svg {
     fill: var(--colors-text-subtle);
 }
@@ -541,10 +780,93 @@
     margin-block-start: var(--spacing-3xsmall);
 }
 
+  .\[\&_iframe\]\:h_auto iframe {
+    height: auto;
+}
+
+  .\[\&_iframe\]\:w_100\% iframe {
+    width: 100%;
+}
+
+  .\[\&_a\]\:ms_1 a {
+    margin-inline-start: var(--spacing-1);
+}
+
   .\[\&_svg\]\:fill_primary svg {
     fill: var(--colors-primary);
 }
 
+  .\[\&_a\]\:c_text\.strong a {
+    color: var(--colors-text-strong);
+}
+
+  .open\:max-h_500vh:is([open], [data-open], [data-state="open"]) {
+    max-height: 500vh;
+}
+
+  .\[\&_\:first-child\]\:mbs_0 :first-child {
+    margin-block-start: 0;
+}
+
+  .after\:ta_center::after {
+    text-align: center;
+}
+
+  .after\:pos_absolute::after {
+    position: absolute;
+}
+
+  .after\:inset_0::after {
+    inset: 0;
+}
+
+  .after\:grad-from_surface\.default\/00::after {
+    --mix---gradient-from: color-mix(in srgb, var(--colors-surface-default) 00%, transparent);
+    --gradient-from: var(--mix---gradient-from, var(--colors-surface-default));
+}
+
+  .after\:grad-to_surface\.default::after {
+    --gradient-to: var(--colors-surface-default);
+}
+
+  .after\:bg-grad_to-b::after {
+    --gradient-stops: var(--gradient-via-stops, var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position));
+    --gradient: var(--gradient-via-stops, var(--gradient-stops));
+    background-image: linear-gradient(to bottom, var(--gradient));
+}
+
+  .after\:op_1::after {
+    opacity: 1;
+}
+
+  .after\:z_base::after {
+    z-index: var(--z-index-base);
+}
+
+  .open\:pbe_xsmall:is([open], [data-open], [data-state="open"]) {
+    padding-block-end: var(--spacing-xsmall);
+}
+
+  .first\:bg_surface\.brand\.1\.subtle:first-child {
+    background: var(--colors-surface-brand-1-subtle);
+}
+
+  .\[\&_h3\]\:td_underline h3 {
+    text-decoration: underline;
+}
+
+  .before\:pos_absolute::before {
+    position: absolute;
+}
+
+  .before\:inset_0::before {
+    inset: 0;
+}
+
+  .before\:z_0::before {
+    z-index: 0;
+}
+
   .\[\&_\.linenumber\]\:bd-c_stroke\.subtle .linenumber {
     border-color: var(--colors-stroke-subtle);
 }
@@ -576,6 +898,75 @@
     transition-timing-function: ease-out;
 }
 
+  .\[\&_h1\]\:mt_0 h1 {
+    margin-top: 0;
+}
+
+  .after\:content_\"\"::after {
+    content: "";
+}
+
+  .after\:trs-prop_opacity::after {
+    --transition-prop: opacity;
+    transition-property: opacity;
+}
+
+  .after\:trs-dur_slow::after {
+    --transition-duration: var(--durations-slow);
+    transition-duration: var(--durations-slow);
+}
+
+  .after\:trs-tmf_ease-out::after {
+    --transition-easing: ease-out;
+    transition-timing-function: ease-out;
+}
+
+  .\[\&_svg\]\:trs-tmf_ease-in-out svg {
+    --transition-easing: ease-in-out;
+    transition-timing-function: ease-in-out;
+}
+
+  .\[\&_svg\]\:trs-dur_fast svg {
+    --transition-duration: var(--durations-fast);
+    transition-duration: var(--durations-fast);
+}
+
+  .first\:bd-c_stroke\.default:first-child {
+    border-color: var(--colors-stroke-default);
+}
+
+  .\[\&_\[data-forward\]\]\:trs-prop_width\,_height [data-forward] {
+    --transition-prop: width, height;
+    transition-property: width, height;
+}
+
+  .\[\&_\[data-forward\]\]\:trs-tmf_ease-in-out [data-forward] {
+    --transition-easing: ease-in-out;
+    transition-timing-function: ease-in-out;
+}
+
+  .\[\&_\[data-forward\]\]\:trs-dur_fast [data-forward] {
+    --transition-duration: var(--durations-fast);
+    transition-duration: var(--durations-fast);
+}
+
+  .before\:content_\"\"::before {
+    content: "";
+}
+
+  .focusWithin\:td_none:focus-within {
+    text-decoration: none;
+}
+
+  .focusVisible\:ring_none:is(:focus-visible, [data-focus-visible]) {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+}
+
+  .focusVisible\:bdr_0:is(:focus-visible, [data-focus-visible]) {
+    border-radius: 0;
+}
+
   .\[\&\:hover\,_\&\:focus-visible\]\:bd-c_stroke\.hover:hover,.\[\&\:hover\,_\&\:focus-visible\]\:bd-c_stroke\.hover:focus-visible {
     border-color: var(--colors-stroke-hover);
 }
@@ -584,14 +975,82 @@
     background-color: var(--colors-surface-action-subtle-hover);
 }
 
+  .hover\:td_none:is(:hover, [data-hover]) {
+    text-decoration: none;
+}
+
+  .hover\:bg_surface\.actionSubtle\.hover:is(:hover, [data-hover]) {
+    background: var(--colors-surface-action-subtle-hover);
+}
+
+  .hover\:bd-c_text\.link:is(:hover, [data-hover]) {
+    border-color: var(--colors-text-link);
+}
+
+  .active\:bg_surface\.actionSubtle\.active:is(:active, [data-active]) {
+    background: var(--colors-surface-action-subtle-active);
+}
+
+  .active\:bd-c_text\.link:is(:active, [data-active]) {
+    border-color: var(--colors-text-link);
+}
+
   .\[\&_button\[data-expanded\=\'true\'\]\]\:\[\&_svg\]\:trf_rotate\(-45deg\) button[data-expanded='true'] svg {
     transform: rotate(-45deg);
 }
 
+  .open\:after\:op_0:is([open], [data-open], [data-state="open"])::after {
+    opacity: 0;
+}
+
+  .open\:after\:z_hide:is([open], [data-open], [data-state="open"])::after {
+    z-index: var(--z-index-hide);
+}
+
+  .open\:\[\&_svg\]\:trf_rotate\(180deg\):is([open], [data-open], [data-state="open"]) svg {
+    transform: rotate(180deg);
+}
+
+  .first\:\[\&_p\]\:fw_bold:first-child p {
+    font-weight: var(--font-weights-bold);
+}
+
   .\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h1,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h2,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h3,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h4,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h5,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:hover h6,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h1,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h2,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h3,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h4,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h5,.\[\&\:hover\,_\&\:focus-visible\]\:\[\&_h1\,_h2\,_h3\,_h4\,_h5\,_h6\]\:td_underline:focus-visible h6 {
     text-decoration: underline;
 }
 
+  .focusVisible\:after\:pos_absolute:is(:focus-visible, [data-focus-visible])::after {
+    position: absolute;
+}
+
+  .focusVisible\:after\:inset_0:is(:focus-visible, [data-focus-visible])::after {
+    inset: 0;
+}
+
+  .focusVisible\:after\:ring_3px:is(:focus-visible, [data-focus-visible])::after {
+    outline: 3px;
+}
+
+  .focusVisible\:after\:bdr_xsmall:is(:focus-visible, [data-focus-visible])::after {
+    border-radius: var(--radii-xsmall);
+}
+
+  .focusVisible\:after\:ring-o_3px:is(:focus-visible, [data-focus-visible])::after {
+    outline-offset: 3px;
+}
+
+  .focusVisible\:after\:content_\"\":is(:focus-visible, [data-focus-visible])::after {
+    content: "";
+}
+
+  .focusVisible\:after\:ring-c_stroke\.default:is(:focus-visible, [data-focus-visible])::after {
+    outline-color: var(--colors-stroke-default);
+}
+
+  .focusVisible\:after\:outline-style_solid:is(:focus-visible, [data-focus-visible])::after {
+    outline-style: solid;
+}
+
   .hover\:\[\&_\[data-byline-button\]\]\:bg_background\.default:is(:hover, [data-hover]) [data-byline-button] {
     background: var(--colors-background-default);
 }
@@ -600,9 +1059,36 @@
     transform: scale(1.2);
 }
 
+  .hover\:\[\&_h3\]\:td_none:is(:hover, [data-hover]) h3 {
+    text-decoration: none;
+}
+
+  .hover\:\[\&_\[data-forward\]\]\:w_large:is(:hover, [data-hover]) [data-forward] {
+    width: var(--sizes-large);
+}
+
+  .hover\:\[\&_\[data-forward\]\]\:h_large:is(:hover, [data-hover]) [data-forward] {
+    height: var(--sizes-large);
+}
+
+  @media screen and (min-width: 29.75rem) {
+    .mobileWide\:max-w_surface\.medium {
+      max-width: var(--sizes-surface-medium);
+}
+    .mobileWide\:d_none {
+      display: none;
+}
+}
+
   @media screen and (min-width: 37.5625rem) {
     .tablet\:px_medium {
       padding-inline: var(--spacing-medium);
+}
+    .tablet\:mt_xxlarge {
+      margin-top: var(--spacing-xxlarge);
+}
+    .tablet\:mb_xxlarge {
+      margin-bottom: var(--spacing-xxlarge);
 }
     .\[\&\[data-has-image\=\'true\'\]\]\:tablet\:py_xsmall[data-has-image='true'] {
       padding-block: var(--spacing-xsmall);
@@ -621,6 +1107,9 @@
 }
     .tabletWide\:max-w_532px {
       max-width: 532px;
+}
+    .tabletWide\:max-w_1100px {
+      max-width: 1100px;
 }
     .tabletWide\:flex-d_row {
       flex-direction: row;
@@ -636,6 +1125,9 @@
 }
     .desktop\:h_260px {
       height: 260px;
+}
+    .desktop\:h_340px {
+      height: 340px;
 }
 }
 
@@ -663,6 +1155,9 @@
 }
     .tabletWideDown\:px_xsmall {
       padding-inline: var(--spacing-xsmall);
+}
+    .tabletWideDown\:p_xsmall {
+      padding: var(--spacing-xsmall);
 }
     .tabletWideDown\:grid-tc_1fr_repeat\(5\,_auto\)_1fr {
       grid-template-columns: 1fr repeat(5, auto) 1fr;
@@ -670,11 +1165,86 @@
     .tabletWideDown\:grid-template-areas_\"track_track_track_track_track_track_track\"_\"\._speed_backwards_play_forwards_volume_\.\" {
       grid-template-areas: "track track track track track track track" ". speed backwards play forwards volume .";
 }
+}
+
+  @media screen and (max-width: 37.56rem) {
+    .tabletDown\:gap_0 {
+      gap: 0;
+}
+    .tabletDown\:p_0 {
+      padding: 0;
+}
+    .tabletDown\:p_xsmall {
+      padding: var(--spacing-xsmall);
+}
+    .tabletDown\:w_100\% {
+      width: 100%;
+}
+    .tabletDown\:bdr_0 {
+      border-radius: 0;
+}
+    .tabletDown\:grid-tc_1fr {
+      grid-template-columns: 1fr;
+}
+    .tabletDown\:flex-d_column {
+      flex-direction: column;
+}
 }
 
   @media screen and (max-width: 29.7475rem) {
+    .mobileWideDown\:d_grid {
+      display: grid;
+}
+    .mobileWideDown\:ov_hidden {
+      overflow: hidden;
+}
+    .mobileWideDown\:white-space_nowrap {
+      white-space: nowrap;
+}
+    .mobileWideDown\:max-h_large {
+      max-height: var(--sizes-large);
+}
+    .mobileWideDown\:tov_ellipsis {
+      text-overflow: ellipsis;
+}
     .mobileWideDown\:cg_3xsmall {
       column-gap: var(--spacing-3xsmall);
+}
+    .mobileWideDown\:grid-tc_1fr_auto {
+      grid-template-columns: 1fr auto;
+}
+    .mobileWideDown\:ai_center {
+      align-items: center;
+}
+    .mobileWideDown\:trs-prop_max-height {
+      --transition-prop: max-height;
+      transition-property: max-height;
+}
+    .mobileWideDown\:trs-dur_slow {
+      --transition-duration: var(--durations-slow);
+      transition-duration: var(--durations-slow);
+}
+    .mobileWideDown\:trs-tmf_ease-in {
+      --transition-easing: ease-in;
+      transition-timing-function: ease-in;
+}
+}
+
+  @media screen and (max-width: 29.7475rem) {
+    .mobileWideDown\:open\:d_inline:is([open], [data-open], [data-state="open"]) {
+      display: inline;
+}
+}
+
+  @media screen and (max-width: 29.7475rem) {
+    .mobileWideDown\:open\:white-space_pre-wrap:is([open], [data-open], [data-state="open"]) {
+      white-space: pre-wrap;
+}
+}
+
+  @media screen and (max-width: 29.7475rem) {
+    .mobileWideDown\:open\:max-h_none:is([open], [data-open], [data-state="open"]) {
+      max-height: none;
 }
 }
 
@@ -682,5 +1252,32 @@
     .mobileDown\:px_xsmall {
       padding-inline: var(--spacing-xsmall);
 }
+}
+
+  @media print {
+    .print\:ov_visible {
+      overflow: visible;
+}
+    .print\:d_none {
+      display: none;
+}
+}
+
+  @media print {
+    .closed\:print\:ov_visible:is([closed], [data-closed], [data-state="closed"]) {
+      overflow: visible;
+}
+}
+
+  @media print {
+    .closed\:print\:max-h_500vh:is([closed], [data-closed], [data-state="closed"]) {
+      max-height: 500vh;
+}
+}
+
+  @media print {
+    .print\:after\:d_none::after {
+      display: none;
+}
 }
 }