@ndla/primitives 1.0.23-alpha.0 → 1.0.25-alpha.0

package/dist/panda.buildinfo.json

@@ -73,12 +73,12 @@
       "counterReset]___[value:level4 var(--start, 0)]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > ol:not([data-variant='letters'])<___>&[data-count='true']",
       "counterIncrement]___[value:level4]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > ol:not([data-variant='letters'])<___>& > li",
       "content]___[value:counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. ']___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > ol:not([data-variant='letters'])<___>& > li<___>_marker",
-      "paddingInlineStart]___[value:small",
+      "paddingInlineStart]___[value:medium",
       "content]___[value:counter(level1, upper-alpha) '. ']___[cond:& > li<___>_marker",
-      "content]___[value:counter(level1, lower-alpha) '. ']___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>_marker",
-      "content]___[value:counter(level1, lower-roman) '. ']___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>& > ol[data-variant='letters'] > li<___>_marker",
+      "paddingInlineStart]___[value:small]___[cond:& > li<___>& > ol[data-variant='letters']",
+      "content]___[value:counter(level1, lower-alpha) '. ']___[cond:& > li<___>& > ol[data-variant='letters']<___>& > li<___>_marker",
+      "content]___[value:counter(level1, lower-roman) '. ']___[cond:& > li<___>& > ol[data-variant='letters']<___>& > li<___>& > ol[data-variant='letters'] > li<___>_marker",
       "listStyle]___[value:revert",
-      "paddingInlineStart]___[value:medium",
       "color]___[value:icon.strong]___[cond:& li<___>_marker",
       "fontWeight]___[value:bold]___[cond:& dt",
       "marginInlineStart]___[value:medium]___[cond:& dd",
@@ -342,6 +342,8 @@
       "left]___[value:auto",
       "marginBlock]___[value:xsmall",
       "paddingInlineEnd]___[value:medium",
+      "paddingInlineEnd]___[value:0]___[cond:tabletDown",
+      "paddingInlineStart]___[value:0]___[cond:tabletDown",
       "paddingInlineStart]___[value:0",
       "paddingInlineEnd]___[value:0",
       "gap]___[value:small",
@@ -375,6 +377,7 @@
       "background]___[value:surface.brand.2.bold",
       "background]___[value:surface.brand.2",
       "background]___[value:surface.brand.1",
+      "background]___[value:surface.brand.1.moderate",
       "background]___[value:surface.infoSubtle",
       "flexWrap]___[value:wrap",
       "alignItems]___[value:flex-end",
@@ -619,7 +622,6 @@
       "zIndex]___[value:var(--z-index)",
       "transitionDuration]___[value:slow",
       "transitionProperty]___[value:translate, scale, opacity, height",
-      "background]___[value:surface.brand.1.moderate",
       "background]___[value:surface.brand.1.strong",
       "paddingInlineEnd]___[value:xxlarge",
       "top]___[value:xxsmall",
@@ -675,6 +677,10 @@
       "--background-hover]___[value:colors.surface.brand.2.moderate",
       "--background-current]___[value:colors.surface.brand.2.bold",
       "--border-hover]___[value:colors.surface.brand.2.strong",
+      "--background-hover]___[value:colors.surface.action.myNdla.hover",
+      "--background-current]___[value:colors.surface.action.myNdla.current",
+      "--border-hover]___[value:colors.stroke.subtle",
+      "--color-current-hover]___[value:colors.text.default",
       "borderBlockColor]___[value:stroke.subtle",
       "borderBlockColor]___[value:var(--border-hover)]___[cond:_hover",
       "borderBlockColor]___[value:var(--border-hover)]___[cond:_highlighted",

package/dist/styles.css

@@ -158,18 +158,14 @@
     margin-inline: var(--spacing-small);
 }
 
-  .ps_small {
-    padding-inline-start: var(--spacing-small);
+  .ps_medium {
+    padding-inline-start: var(--spacing-medium);
 }
 
   .li-s_revert {
     list-style: revert;
 }
 
-  .ps_medium {
-    padding-inline-start: var(--spacing-medium);
-}
-
   .px_xsmall {
     padding-inline: var(--spacing-xsmall);
 }
@@ -633,6 +629,10 @@
     background: var(--colors-surface-brand-1);
 }
 
+  .bg_surface\.brand\.1\.moderate {
+    background: var(--colors-surface-brand-1-moderate);
+}
+
   .bg_surface\.infoSubtle {
     background: var(--colors-surface-info-subtle);
 }
@@ -893,10 +893,6 @@
     z-index: var(--z-index);
 }
 
-  .bg_surface\.brand\.1\.moderate {
-    background: var(--colors-surface-brand-1-moderate);
-}
-
   .bg_surface\.brand\.1\.strong {
     background: var(--colors-surface-brand-1-strong);
 }
@@ -989,6 +985,22 @@
     --border-hover: var(--colors-surface-brand-2-strong);
 }
 
+  .\--background-hover_colors\.surface\.action\.myNdla\.hover {
+    --background-hover: var(--colors-surface-action-my-ndla-hover);
+}
+
+  .\--background-current_colors\.surface\.action\.myNdla\.current {
+    --background-current: var(--colors-surface-action-my-ndla-current);
+}
+
+  .\--border-hover_colors\.stroke\.subtle {
+    --border-hover: var(--colors-stroke-subtle);
+}
+
+  .\--color-current-hover_colors\.text\.default {
+    --color-current-hover: var(--colors-text-default);
+}
+
   .bd-y-c_stroke\.subtle {
     border-block-color: var(--colors-stroke-subtle);
 }
@@ -2364,6 +2376,10 @@
     counter-reset: level2;
 }
 
+  .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]\]\:ps_small > li > ol[data-variant='letters'] {
+    padding-inline-start: var(--spacing-small);
+}
+
   .\[\&_li\]\:marker\:c_icon\.strong li::marker {
     color: var(--colors-icon-strong);
 }
@@ -2686,10 +2702,6 @@
     --shadow-color: var(--color-current-hover);
 }
 
-  .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:marker\:content_counter\(level1\,_lower-alpha\)_\'\._\' > li > ol[data-variant='letters'] > li::marker {
-    content: counter(level1, lower-alpha) '. ';
-}
-
   .disabled\:checked\:hover\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled='true']):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     border-color: var(--colors-stroke-disabled);
 }
@@ -2722,8 +2734,8 @@
     content: counter(level1, decimal) '.' counter(level2, decimal) '. ';
 }
 
-  .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:marker\:content_counter\(level1\,_lower-roman\)_\'\._\' > li > ol[data-variant='letters'] > li > ol[data-variant='letters'] > li::marker {
-    content: counter(level1, lower-roman) '. ';
+  .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]\]\:\[\&_\>_li\]\:marker\:content_counter\(level1\,_lower-alpha\)_\'\._\' > li > ol[data-variant='letters'] > li::marker {
+    content: counter(level1, lower-alpha) '. ';
 }
 
   .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&\[data-count\=\'true\'\]\]\:counter-reset_level3_var\(--start\,_0\) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters'])[data-count='true'] {
@@ -2738,6 +2750,10 @@
     counter-reset: level4;
 }
 
+  .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]\]\:\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:marker\:content_counter\(level1\,_lower-roman\)_\'\._\' > li > ol[data-variant='letters'] > li > ol[data-variant='letters'] > li::marker {
+    content: counter(level1, lower-roman) '. ';
+}
+
   .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&\[data-count\=\'true\'\]\]\:counter-reset_level4_var\(--start\,_0\) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > ol:not([data-variant='letters'])[data-count='true'] {
     counter-reset: level4 var(--start, 0);
 }
@@ -2817,6 +2833,12 @@
 }
     .tabletDown\:min-h_100\% {
       min-height: 100%;
+}
+    .tabletDown\:pe_0 {
+      padding-inline-end: 0;
+}
+    .tabletDown\:ps_0 {
+      padding-inline-start: 0;
 }
 }
 

package/es/ArticleLists.js

@@ -78,19 +78,22 @@ const orderedListRecipe = cva({
         "&[data-count='true']": {
           counterReset: "level1 var(--start, 0)"
         },
-        paddingInlineStart: "small",
+        paddingInlineStart: "medium",
         "& > li": {
           counterIncrement: "level1",
           _marker: {
             content: "counter(level1, upper-alpha) '. '"
           },
-          "& > ol[data-variant='letters'] > li": {
-            _marker: {
-              content: "counter(level1, lower-alpha) '. '"
-            },
-            "& > ol[data-variant='letters'] > li": {
+          "& > ol[data-variant='letters']": {
+            paddingInlineStart: "small",
+            "& > li": {
               _marker: {
-                content: "counter(level1, lower-roman) '. '"
+                content: "counter(level1, lower-alpha) '. '"
+              },
+              "& > ol[data-variant='letters'] > li": {
+                _marker: {
+                  content: "counter(level1, lower-roman) '. '"
+                }
               }
             }
           }

package/es/Figure.js

@@ -81,13 +81,19 @@ const figureRecipe = cva({
     float: "left",
     size: ["medium", "small", "xsmall"],
     css: {
-      paddingInlineEnd: "medium"
+      paddingInlineEnd: "medium",
+      tabletDown: {
+        paddingInlineEnd: "0"
+      }
     }
   }, {
     float: "right",
     size: ["medium", "small", "xsmall"],
     css: {
-      paddingInlineStart: "medium"
+      paddingInlineStart: "medium",
+      tabletDown: {
+        paddingInlineStart: "0"
+      }
     }
   }, {
     float: ["left", "right"],

package/es/Hero.js

@@ -72,9 +72,9 @@ const heroRecipe = sva({
           background: "surface.brand.1"
         }
       },
-      brand1Subtle: {
+      brand1Moderate: {
         background: {
-          background: "surface.brand.1.subtle"
+          background: "surface.brand.1.moderate"
         }
       },
       neutral: {

package/es/ListItem/ListItem.js

@@ -122,6 +122,14 @@ export const listItemRecipe = sva({
           "--border-hover": "colors.surface.brand.2.strong",
           "--color-current-hover": "colors.text.onAction"
         }
+      },
+      brand3: {
+        root: {
+          "--background-hover": "colors.surface.action.myNdla.hover",
+          "--background-current": "colors.surface.action.myNdla.current",
+          "--border-hover": "colors.stroke.subtle",
+          "--color-current-hover": "colors.text.default"
+        }
       }
     },
     variant: {

package/es/index.js

@@ -17,6 +17,7 @@ export { CheckboxRoot, CheckboxIndicator, CheckboxLabel, CheckboxControl, Checkb
 export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, ComboboxList } from "./Combobox";
 export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody } from "./Dialog";
 export { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
+export { ErrorMessageRoot, ErrorMessageContent, ErrorMessageActions, ErrorMessageDescription, ErrorMessageTitle } from "./ErrorMessage/ErrorMessage";
 export { FieldRoot, FieldsetRoot } from "./Field";
 export { FieldErrorMessage, FieldsetErrorText } from "./FieldErrorMessage";
 export { FieldHelper, FieldsetHelper } from "./FieldHelper";

package/lib/ArticleLists.d.ts

@@ -65,19 +65,22 @@ declare const orderedListRecipe: import("@ndla/styled-system/types").RecipeRunti
             "&[data-count='true']": {
                 counterReset: "level1 var(--start, 0)";
             };
-            paddingInlineStart: "small";
+            paddingInlineStart: "medium";
             "& > li": {
                 counterIncrement: "level1";
                 _marker: {
                     content: "counter(level1, upper-alpha) '. '";
                 };
-                "& > ol[data-variant='letters'] > li": {
-                    _marker: {
-                        content: "counter(level1, lower-alpha) '. '";
-                    };
-                    "& > ol[data-variant='letters'] > li": {
+                "& > ol[data-variant='letters']": {
+                    paddingInlineStart: "small";
+                    "& > li": {
                         _marker: {
-                            content: "counter(level1, lower-roman) '. '";
+                            content: "counter(level1, lower-alpha) '. '";
+                        };
+                        "& > ol[data-variant='letters'] > li": {
+                            _marker: {
+                                content: "counter(level1, lower-roman) '. '";
+                            };
                         };
                     };
                 };

package/lib/ArticleLists.js

@@ -84,19 +84,22 @@ const orderedListRecipe = (0, _css.cva)({
         "&[data-count='true']": {
           counterReset: "level1 var(--start, 0)"
         },
-        paddingInlineStart: "small",
+        paddingInlineStart: "medium",
         "& > li": {
           counterIncrement: "level1",
           _marker: {
             content: "counter(level1, upper-alpha) '. '"
           },
-          "& > ol[data-variant='letters'] > li": {
-            _marker: {
-              content: "counter(level1, lower-alpha) '. '"
-            },
-            "& > ol[data-variant='letters'] > li": {
+          "& > ol[data-variant='letters']": {
+            paddingInlineStart: "small",
+            "& > li": {
               _marker: {
-                content: "counter(level1, lower-roman) '. '"
+                content: "counter(level1, lower-alpha) '. '"
+              },
+              "& > ol[data-variant='letters'] > li": {
+                _marker: {
+                  content: "counter(level1, lower-roman) '. '"
+                }
               }
             }
           }

package/lib/Figure.js

@@ -87,13 +87,19 @@ const figureRecipe = (0, _css.cva)({
     float: "left",
     size: ["medium", "small", "xsmall"],
     css: {
-      paddingInlineEnd: "medium"
+      paddingInlineEnd: "medium",
+      tabletDown: {
+        paddingInlineEnd: "0"
+      }
     }
   }, {
     float: "right",
     size: ["medium", "small", "xsmall"],
     css: {
-      paddingInlineStart: "medium"
+      paddingInlineStart: "medium",
+      tabletDown: {
+        paddingInlineStart: "0"
+      }
     }
   }, {
     float: ["left", "right"],

package/lib/Hero.d.ts

@@ -43,9 +43,9 @@ declare const heroRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeF
                 background: "surface.brand.1";
             };
         };
-        brand1Subtle: {
+        brand1Moderate: {
             background: {
-                background: "surface.brand.1.subtle";
+                background: "surface.brand.1.moderate";
             };
         };
         neutral: {
@@ -62,7 +62,7 @@ export declare const Hero: import("react").ForwardRefExoticComponent<Omit<import
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & {
     absolute?: boolean | undefined;
-    variant?: "primary" | "neutral" | "brand1" | "brand2" | "brand2Bold" | "brand1Subtle" | undefined;
+    variant?: "primary" | "neutral" | "brand1" | "brand2" | "brand2Bold" | "brand1Moderate" | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export type HeroBackgroundProps = HTMLArkProps<"div"> & JsxStyleProps;
 export declare const HeroBackground: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {

package/lib/Hero.js

@@ -78,9 +78,9 @@ const heroRecipe = (0, _css.sva)({
           background: "surface.brand.1"
         }
       },
-      brand1Subtle: {
+      brand1Moderate: {
         background: {
-          background: "surface.brand.1.subtle"
+          background: "surface.brand.1.moderate"
         }
       },
       neutral: {

package/lib/ListItem/ListItem.d.ts

@@ -75,6 +75,14 @@ export declare const listItemRecipe: import("@ndla/styled-system/types").SlotRec
                 "--color-current-hover": "colors.text.onAction";
             };
         };
+        brand3: {
+            root: {
+                "--background-hover": "colors.surface.action.myNdla.hover";
+                "--background-current": "colors.surface.action.myNdla.current";
+                "--border-hover": "colors.stroke.subtle";
+                "--color-current-hover": "colors.text.default";
+            };
+        };
     };
     variant: {
         standalone: {

package/lib/ListItem/ListItem.js

@@ -128,6 +128,14 @@ const listItemRecipe = exports.listItemRecipe = (0, _css.sva)({
           "--border-hover": "colors.surface.brand.2.strong",
           "--color-current-hover": "colors.text.onAction"
         }
+      },
+      brand3: {
+        root: {
+          "--background-hover": "colors.surface.action.myNdla.hover",
+          "--background-current": "colors.surface.action.myNdla.current",
+          "--border-hover": "colors.stroke.subtle",
+          "--color-current-hover": "colors.text.default"
+        }
       }
     },
     variant: {

package/lib/index.d.ts

@@ -26,6 +26,7 @@ export type { DialogVariantProps, DialogRootProps } from "./Dialog";
 export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody, } from "./Dialog";
 export type { ExpandableBoxProps, ExpandableBoxSummaryProps } from "./ExpandableBox";
 export { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
+export { ErrorMessageRoot, ErrorMessageContent, ErrorMessageActions, ErrorMessageDescription, ErrorMessageTitle, } from "./ErrorMessage/ErrorMessage";
 export { FieldRoot, FieldsetRoot } from "./Field";
 export { FieldErrorMessage, FieldsetErrorText } from "./FieldErrorMessage";
 export { FieldHelper, FieldsetHelper } from "./FieldHelper";

package/lib/index.js

@@ -273,6 +273,36 @@ Object.defineProperty(exports, "DialogTrigger", {
     return _Dialog.DialogTrigger;
   }
 });
+Object.defineProperty(exports, "ErrorMessageActions", {
+  enumerable: true,
+  get: function () {
+    return _ErrorMessage.ErrorMessageActions;
+  }
+});
+Object.defineProperty(exports, "ErrorMessageContent", {
+  enumerable: true,
+  get: function () {
+    return _ErrorMessage.ErrorMessageContent;
+  }
+});
+Object.defineProperty(exports, "ErrorMessageDescription", {
+  enumerable: true,
+  get: function () {
+    return _ErrorMessage.ErrorMessageDescription;
+  }
+});
+Object.defineProperty(exports, "ErrorMessageRoot", {
+  enumerable: true,
+  get: function () {
+    return _ErrorMessage.ErrorMessageRoot;
+  }
+});
+Object.defineProperty(exports, "ErrorMessageTitle", {
+  enumerable: true,
+  get: function () {
+    return _ErrorMessage.ErrorMessageTitle;
+  }
+});
 Object.defineProperty(exports, "ExpandableBox", {
   enumerable: true,
   get: function () {
@@ -1196,6 +1226,7 @@ var _Checkbox = require("./Checkbox");
 var _Combobox = require("./Combobox");
 var _Dialog = require("./Dialog");
 var _ExpandableBox = require("./ExpandableBox");
+var _ErrorMessage = require("./ErrorMessage/ErrorMessage");
 var _Field = require("./Field");
 var _FieldErrorMessage = require("./FieldErrorMessage");
 var _FieldHelper = require("./FieldHelper");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.23-alpha.0",
+  "version": "1.0.25-alpha.0",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -28,12 +28,12 @@
     "lib"
   ],
   "dependencies": {
-    "@ark-ui/react": "^3.11.0",
-    "@ndla/styled-system": "^0.0.19",
+    "@ark-ui/react": "^3.11.1",
+    "@ndla/styled-system": "^0.0.21",
     "@ndla/util": "^4.1.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.27",
+    "@ndla/preset-panda": "^0.0.29",
     "@pandacss/dev": "^0.46.0"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8b76ecf3764730339a324ead4dcbe26c26d6d60f"
+  "gitHead": "d97a2f9c0e8bc60c499000bb27c8fe4441740381"
 }