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

package/dist/panda.buildinfo.json

@@ -2,16 +2,33 @@
   "schemaVersion": "0.42.0",
   "styles": {
     "atomic": [
+      "marginBlockStart]___[value:medium",
+      "paddingBlockStart]___[value:xsmall",
+      "borderTop]___[value:1px solid",
+      "borderColor]___[value:stroke.subtle",
+      "display]___[value:flex",
+      "flexDirection]___[value:column-reverse",
+      "gap]___[value:3xsmall",
+      "width]___[value:100%",
+      "justifyContent]___[value:space-between",
+      "paddingBlock]___[value:xsmall",
+      "textStyle]___[value:body.medium",
+      "flexDirection]___[value:row]___[cond:tabletWide",
+      "gap]___[value:xsmall",
+      "paddingBlockStart]___[value:xxlarge",
+      "alignItems]___[value:center",
+      "flexDirection]___[value:column",
+      "gap]___[value:medium",
+      "listStyle]___[value:none",
       "textAlign]___[value:center]___[cond:&[data-align=\"center\"]",
       "direction]___[value:rtl]___[cond:&:has(span[dir=\"rtl\"])",
       "border]___[value:1px solid",
       "borderColor]___[value:stroke.default",
       "borderRadius]___[value:xsmall",
       "boxShadow]___[value:full",
+      "marginBlockEnd]___[value:4xsmall",
       "overflow]___[value:hidden",
-      "display]___[value:flex",
       "display]___[value:block]___[cond:tabletWideDown",
-      "alignItems]___[value:center",
       "flex]___[value:1 0 auto",
       "width]___[value:surface.4xsmall",
       "height]___[value:surface.4xsmall",
@@ -25,14 +42,10 @@
       "width]___[value:100%]___[cond:tabletWideDown",
       "height]___[value:auto]___[cond:tabletWideDown",
       "alignItems]___[value:flex-start",
-      "flexDirection]___[value:column",
-      "gap]___[value:xsmall",
       "padding]___[value:xsmall",
-      "width]___[value:100%",
       "paddingBlock]___[value:xsmall]___[cond:&[data-has-image='true']<___>tablet",
       "paddingInline]___[value:medium]___[cond:&[data-has-image='true']<___>tablet",
       "width]___[value:100%]___[cond:tabletWide",
-      "flexDirection]___[value:row]___[cond:tabletWide",
       "justifyContent]___[value:space-between]___[cond:tabletWide",
       "borderBlockStart]___[value:1px solid",
       "paddingBlock]___[value:medium",
@@ -44,7 +57,6 @@
       "borderBottomRadius]___[value:xsmall",
       "justifyContent]___[value:center",
       "background]___[value:background.default",
-      "paddingBlock]___[value:xsmall",
       "paddingInline]___[value:medium",
       "display]___[value:grid]___[cond:tabletWideDown",
       "paddingBlock]___[value:xsmall]___[cond:tabletWideDown",
@@ -71,8 +83,6 @@
       "srOnly]___[value:true",
       "color]___[value:text.default",
       "backgroundColor]___[value:background.default",
-      "gap]___[value:medium",
-      "borderColor]___[value:stroke.subtle",
       "transitionDuration]___[value:fast",
       "transitionProperty]___[value:background-color, border-color, max-width",
       "transitionTimingFunction]___[value:default",
@@ -206,7 +216,6 @@
       "outlineColor]___[value:stroke.default]___[cond:_focusVisible<___>_after",
       "outlineOffset]___[value:3px]___[cond:_focusVisible<___>_after",
       "outlineStyle]___[value:solid]___[cond:_focusVisible<___>_after",
-      "textStyle]___[value:body.medium",
       "textAlign]___[value:center",
       "color]___[value:text.strong]___[cond:& a",
       "marginTop]___[value:0]___[cond:& h1",
@@ -247,17 +256,36 @@
       "transitionDuration]___[value:fast]___[cond:& svg",
       "transform]___[value:rotate(180deg)]___[cond:_open<___>& svg",
       "display]___[value:none]___[cond:_print",
-      "justifyContent]___[value:space-between",
       "gap]___[value:small",
       "paddingInline]___[value:0",
       "marginBlockStart]___[value:3xsmall",
       "paddingBlock]___[value:small",
-      "borderTop]___[value:1px solid",
       "background]___[value:surface.brand.1.subtle]___[cond:_first",
       "borderColor]___[value:stroke.default]___[cond:_first",
       "fontWeight]___[value:bold]___[cond:_first<___>& p",
       "fontStyle]___[value:italic",
       "background]___[value:surface.default",
+      "borderColor]___[value:stroke.error",
+      "background]___[value:surface.dangerSubtle",
+      "display]___[value:inline-flex",
+      "whiteSpace]___[value:pre-wrap",
+      "display]___[value:grid]___[cond:mobileWideDown",
+      "gridTemplateColumns]___[value:1fr auto]___[cond:mobileWideDown",
+      "alignItems]___[value:center]___[cond:mobileWideDown",
+      "overflow]___[value:hidden]___[cond:mobileWideDown",
+      "display]___[value:inline]___[cond:mobileWideDown<___>_open",
+      "whiteSpace]___[value:nowrap]___[cond:mobileWideDown",
+      "maxHeight]___[value:large]___[cond:mobileWideDown",
+      "textOverflow]___[value:ellipsis]___[cond:mobileWideDown",
+      "transitionProperty]___[value:max-height]___[cond:mobileWideDown",
+      "transitionDuration]___[value:slow]___[cond:mobileWideDown",
+      "transitionTimingFunction]___[value:ease-in]___[cond:mobileWideDown",
+      "whiteSpace]___[value:pre-wrap]___[cond:mobileWideDown<___>_open",
+      "maxHeight]___[value:none]___[cond:mobileWideDown<___>_open",
+      "display]___[value:none]___[cond:mobileWide",
+      "color]___[value:primary",
+      "whiteSpace]___[value:nowrap",
+      "textDecoration]___[value:none]___[cond:_focusWithin",
       "textDecoration]___[value:underline]___[cond:& h3",
       "transitionProperty]___[value:width, height]___[cond:& [data-forward]",
       "transitionTimingFunction]___[value:ease-in-out]___[cond:& [data-forward]",
@@ -266,7 +294,6 @@
       "width]___[value:large]___[cond:_hover<___>& [data-forward]",
       "height]___[value:large]___[cond:_hover<___>& [data-forward]",
       "color]___[value:icon.strong",
-      "listStyle]___[value:none",
       "content]___[value:\"\"]___[cond:_before",
       "position]___[value:absolute]___[cond:_before",
       "inset]___[value:0]___[cond:_before",

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,50 @@
 }
 }
 
+  .mbs_medium {
+    margin-block-start: var(--spacing-medium);
+}
+
+  .pbs_xsmall {
+    padding-block-start: var(--spacing-xsmall);
+}
+
+  .bd-t_1px_solid {
+    border-top: 1px solid;
+}
+
+  .d_flex {
+    display: flex;
+}
+
+  .gap_3xsmall {
+    gap: var(--spacing-3xsmall);
+}
+
+  .w_100\% {
+    width: 100%;
+}
+
+  .py_xsmall {
+    padding-block: var(--spacing-xsmall);
+}
+
+  .gap_xsmall {
+    gap: var(--spacing-xsmall);
+}
+
+  .pbs_xxlarge {
+    padding-block-start: var(--spacing-xxlarge);
+}
+
+  .gap_medium {
+    gap: var(--spacing-medium);
+}
+
+  .li-s_none {
+    list-style: none;
+}
+
   .bd_1px_solid {
     border: 1px solid;
 }
@@ -73,12 +117,12 @@
     box-shadow: var(--shadows-full);
 }
 
-  .ov_hidden {
-    overflow: hidden;
+  .mbe_4xsmall {
+    margin-block-end: var(--spacing-4xsmall);
 }
 
-  .d_flex {
-    display: flex;
+  .ov_hidden {
+    overflow: hidden;
 }
 
   .flex_1_0_auto {
@@ -93,18 +137,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;
 }
@@ -130,10 +166,6 @@
     background: var(--colors-background-default);
 }
 
-  .py_xsmall {
-    padding-block: var(--spacing-xsmall);
-}
-
   .px_medium {
     padding-inline: var(--spacing-medium);
 }
@@ -210,10 +242,6 @@
     color: var(--colors-text-default);
 }
 
-  .gap_medium {
-    gap: var(--spacing-medium);
-}
-
   .h_100\% {
     height: 100%;
 }
@@ -407,20 +435,32 @@
     padding-block: var(--spacing-small);
 }
 
-  .bd-t_1px_solid {
-    border-top: 1px solid;
-}
-
   .bg_surface\.default {
     background: var(--colors-surface-default);
 }
 
-  .c_icon\.strong {
-    color: var(--colors-icon-strong);
+  .bg_surface\.dangerSubtle {
+    background: var(--colors-surface-danger-subtle);
 }
 
-  .li-s_none {
-    list-style: none;
+  .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);
 }
 
   .d_grid {
@@ -435,22 +475,34 @@
     aspect-ratio: 1/1;
 }
 
-  .bd-c_stroke\.default {
-    border-color: var(--colors-stroke-default);
+  .bd-c_stroke\.subtle {
+    border-color: var(--colors-stroke-subtle);
 }
 
-  .ai_center {
-    align-items: center;
+  .flex-d_column-reverse {
+    flex-direction: column-reverse;
 }
 
-  .ai_flex-start {
-    align-items: flex-start;
+  .jc_space-between {
+    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;
 }
@@ -463,10 +515,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);
@@ -596,14 +644,14 @@
     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);
 }
@@ -926,6 +974,10 @@
     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;
@@ -1042,6 +1094,9 @@
   @media screen and (min-width: 29.75rem) {
     .mobileWide\:max-w_surface\.medium {
       max-width: var(--sizes-surface-medium);
+}
+    .mobileWide\:d_none {
+      display: none;
 }
 }
 
@@ -1157,8 +1212,59 @@
 }
 
   @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;
 }
 }