@ndla/primitives 0.0.7 → 0.0.8

package/dist/panda.buildinfo.json

@@ -439,11 +439,31 @@
       "textAlign]___[value:center]___[cond:& td, & th<___>&[data-align='center']",
       "textAlign]___[value:left]___[cond:& td, & th<___>&[data-align='left']",
       "textAlign]___[value:right]___[cond:& td, & th<___>&[data-align='right']",
-      "flexDirection]___[value:column]___[cond:_horizontal",
-      "flexDirection]___[value:row]___[cond:_vertical",
+      "paddingBlockStart]___[value:xsmall]___[cond:_horizontal",
+      "paddingInlineStart]___[value:xsmall]___[cond:_vertical",
+      "boxShadow]___[value:0 0 0 3px var(--shadow-color)]___[cond:_focusVisible",
+      "borderWidth]___[value:1px",
+      "padding]___[value:xsmall",
+      "outlineOffset]___[value:-3px]___[cond:_focusVisible",
+      "outlineColor]___[value:stroke.default]___[cond:_focusVisible",
       "overflow]___[value:auto",
       "marginBlockEnd]___[value:-1px]___[cond:_horizontal",
       "marginInlineEnd]___[value:-1px]___[cond:_vertical",
+      "flexDirection]___[value:column]___[cond:_horizontal",
+      "flexDirection]___[value:row]___[cond:_vertical",
+      "outline]___[value:4px solid",
+      "outlineColor]___[value:stroke.default",
+      "outlineOffset]___[value:-4px",
+      "height]___[value:var(--height)]___[cond:_peerFocusVisible",
+      "width]___[value:var(--width)]___[cond:_peerFocusVisible",
+      "borderTopRadius]___[value:xsmall]___[cond:_peerFocusVisible<___>_horizontal",
+      "borderRightRadius]___[value:xsmall]___[cond:_peerFocusVisible<___>_vertical",
+      "bottom]___[value:0]___[cond:_horizontal",
+      "height]___[value:2]___[cond:_horizontal",
+      "width]___[value:var(--width)]___[cond:_horizontal",
+      "height]___[value:var(--height)]___[cond:_vertical",
+      "left]___[value:0]___[cond:_vertical",
+      "width]___[value:2]___[cond:_vertical",
       "transitionProperty]___[value:color, background, border-color",
       "whiteSpace]___[value:nowrap",
       "color]___[value:text.strong]___[cond:_selected",
@@ -456,7 +476,6 @@
       "justifyContent]___[value:flex-start]___[cond:_vertical",
       "borderRadius]___[value:unset]___[cond:_focusVisible",
       "borderColor]___[value:transparent",
-      "borderWidth]___[value:1px",
       "borderTopRadius]___[value:xsmall]___[cond:_horizontal",
       "borderTopLeftRadius]___[value:xsmall]___[cond:_vertical",
       "borderBottomLeftRadius]___[value:xsmall]___[cond:_vertical",
@@ -464,12 +483,6 @@
       "borderColor]___[value:stroke.subtle]___[cond:_selected",
       "borderBottomColor]___[value:transparent]___[cond:_selected<___>_horizontal",
       "borderRightColor]___[value:transparent]___[cond:_selected<___>_vertical",
-      "outlineOffset]___[value:-3px]___[cond:_focusVisible",
-      "outlineColor]___[value:stroke.default]___[cond:_focusVisible",
-      "paddingBlockStart]___[value:xsmall]___[cond:_horizontal",
-      "paddingInlineStart]___[value:xsmall]___[cond:_vertical",
-      "boxShadow]___[value:0 0 0 3px var(--shadow-color)]___[cond:_focusVisible",
-      "padding]___[value:xsmall",
       "textStyle]___[value:body.medium",
       "textStyle]___[value:heading.medium",
       "boxShadow]___[value:medium",

package/dist/styles.css

@@ -736,16 +736,24 @@
     table-layout: fixed;
 }
 
+  .p_xsmall {
+    padding: var(--spacing-xsmall);
+}
+
   .overflow_auto {
     overflow: auto;
 }
 
-  .white-space_nowrap {
-    white-space: nowrap;
+  .ring_4px_solid {
+    outline: 4px solid;
 }
 
-  .p_xsmall {
-    padding: var(--spacing-xsmall);
+  .ring-offset_-4px {
+    outline-offset: -4px;
+}
+
+  .white-space_nowrap {
+    white-space: nowrap;
 }
 
   .shadow_medium {
@@ -1041,6 +1049,14 @@
     overflow-x: auto;
 }
 
+  .border-w_1px {
+    border-width: 1px;
+}
+
+  .ring-color_stroke\.default {
+    outline-color: var(--colors-stroke-default);
+}
+
   .transition-prop_color\,_background\,_border-color {
     --transition-prop: color, background, border-color;
     transition-property: color, background, border-color;
@@ -1050,10 +1066,6 @@
     border-color: transparent;
 }
 
-  .border-w_1px {
-    border-width: 1px;
-}
-
   .duration_slow {
     --transition-duration: var(--durations-slow);
     transition-duration: var(--durations-slow);
@@ -1369,6 +1381,14 @@
     padding-block: var(--spacing-3xsmall);
 }
 
+  .horizontal\:pt_xsmall[data-orientation=horizontal] {
+    padding-block-start: var(--spacing-xsmall);
+}
+
+  .vertical\:ps_xsmall[data-orientation=vertical] {
+    padding-inline-start: var(--spacing-xsmall);
+}
+
   .horizontal\:mb_-1px[data-orientation=horizontal] {
     margin-block-end: -1px;
 }
@@ -1377,6 +1397,22 @@
     margin-inline-end: -1px;
 }
 
+  .horizontal\:h_2[data-orientation=horizontal] {
+    height: var(--sizes-2);
+}
+
+  .horizontal\:w_var\(--width\)[data-orientation=horizontal] {
+    width: var(--width);
+}
+
+  .vertical\:h_var\(--height\)[data-orientation=vertical] {
+    height: var(--height);
+}
+
+  .vertical\:w_2[data-orientation=vertical] {
+    width: var(--sizes-2);
+}
+
   .selected\:text_text\.strong:is([aria-selected=true], [data-selected]) {
     color: var(--colors-text-strong);
 }
@@ -1398,14 +1434,6 @@
     background: var(--colors-surface-default);
 }
 
-  .horizontal\:pt_xsmall[data-orientation=horizontal] {
-    padding-block-start: var(--spacing-xsmall);
-}
-
-  .vertical\:ps_xsmall[data-orientation=vertical] {
-    padding-inline-start: var(--spacing-xsmall);
-}
-
   .closed\:transition-prop_background\,_border-color\,_border\,_border-radius:is([closed], [data-closed], [data-state="closed"]) {
     --transition-prop: background, border-color, border, border-radius;
     transition-property: background, border-color, border, border-radius;
@@ -1499,6 +1527,14 @@
     flex-direction: row;
 }
 
+  .horizontal\:bottom_0[data-orientation=horizontal] {
+    bottom: 0;
+}
+
+  .vertical\:left_0[data-orientation=vertical] {
+    left: 0;
+}
+
   .disabled\:border_stroke\.default:is(:disabled, [disabled], [data-disabled]) {
     border-color: var(--colors-stroke-default);
 }
@@ -1605,16 +1641,24 @@
     outline-offset: 0px;
 }
 
-  .focusVisible\:rounded_unset:is(:focus-visible, [data-focus-visible]) {
-    border-radius: unset;
+  .focusVisible\:shadow_0_0_0_3px_var\(--shadow-color\):is(:focus-visible, [data-focus-visible]) {
+    box-shadow: 0 0 0 3px var(--shadow-color);
 }
 
   .focusVisible\:ring-offset_-3px:is(:focus-visible, [data-focus-visible]) {
     outline-offset: -3px;
 }
 
-  .focusVisible\:shadow_0_0_0_3px_var\(--shadow-color\):is(:focus-visible, [data-focus-visible]) {
-    box-shadow: 0 0 0 3px var(--shadow-color);
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:h_var\(--height\) {
+    height: var(--height);
+}
+
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:w_var\(--width\) {
+    width: var(--width);
+}
+
+  .focusVisible\:rounded_unset:is(:focus-visible, [data-focus-visible]) {
+    border-radius: unset;
 }
 
   .focus\:ring-color_stroke\.default:is(:focus, [data-focus]) {
@@ -1869,6 +1913,16 @@
     text-align: right;
 }
 
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:horizontal\:rounded-t_xsmall[data-orientation=horizontal] {
+    border-top-left-radius: var(--radii-xsmall);
+    border-top-right-radius: var(--radii-xsmall);
+}
+
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:vertical\:rounded-r_xsmall[data-orientation=vertical] {
+    border-top-right-radius: var(--radii-xsmall);
+    border-bottom-right-radius: var(--radii-xsmall);
+}
+
   .disabled\:hover\:text_text\.subtle:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
     color: var(--colors-text-subtle);
 }

package/es/Tabs.js

@@ -6,13 +6,13 @@
  *
  */
 
-import { tabsAnatomy } from "@ark-ui/anatomy";
 import { Tabs } from "@ark-ui/react";
 import { cx, sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "./createStyleContext";
 import { jsx as _jsx } from "react/jsx-runtime";
 const tabsRecipe = sva({
-  slots: tabsAnatomy.keys(),
+  // TODO: anatomy keys do not work here.
+  slots: ["content", "list", "root", "indicator", "trigger"],
   base: {
     root: {
       position: "relative",

package/lib/Tabs.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabsTrigger = exports.TabsRoot = exports.TabsList = exports.TabsIndicator = exports.TabsContent = void 0;
-var _anatomy = require("@ark-ui/anatomy");
 var _react = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _createStyleContext = require("./createStyleContext");
@@ -18,7 +17,8 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 
 const tabsRecipe = (0, _css.sva)({
-  slots: _anatomy.tabsAnatomy.keys(),
+  // TODO: anatomy keys do not work here.
+  slots: ["content", "list", "root", "indicator", "trigger"],
   base: {
     root: {
       position: "relative",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Primitive components for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -34,7 +34,7 @@
     "@ndla/util": "^4.0.4"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.4",
+    "@ndla/preset-panda": "^0.0.5",
     "@pandacss/dev": "^0.40.1"
   },
   "peerDependencies": {
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4d43efa927c3f403d61a252efd8f06647073c076"
+  "gitHead": "dd4b2b6ce225256191f8245096e5514a80588a57"
 }