@norges-domstoler/dds-components 15.0.0 → 15.0.1

package/dist/index.d.mts

@@ -2360,7 +2360,7 @@ interface PopoverGroupProps {
     isOpen?: boolean;
     /** `id` til `<Popover />.` */
     popoverId?: string;
-    /** Barna til wrapperen: anchor-element som det første og `<Popover />` so det adnre.  */
+    /** Barna til wrapperen: anchor-element som det første og `<Popover />` som det andre.  */
     children: ReactNode;
 }
 declare const PopoverGroup: {
@@ -2559,7 +2559,9 @@ type SelectProps<Option = unknown, IsMulti extends boolean = false> = {
     className?: string;
     /** Inline styling. */
     style?: React.CSSProperties;
+    /** Custom element som vises for det valgte elementet. */
     customOptionElement?: (props: OptionProps<Option, IsMulti, GroupBase<Option>>) => JSX.Element;
+    /** Custom element som vises i listen over alternativer. */
     customSingleValueElement?: (props: SingleValueProps<Option, IsMulti, GroupBase<Option>>) => JSX.Element;
 } & Pick<HTMLAttributes<HTMLInputElement>, 'aria-required'> & WrappedReactSelectProps<Option, IsMulti, GroupBase<Option>>;
 type ForwardRefType<Option, IsMulti extends boolean> = React.ForwardedRef<SelectInstance<Option, IsMulti, GroupBase<Option>>>;
@@ -2973,10 +2975,7 @@ type TabProps = BaseComponentPropsWithChildren<HTMLButtonElement, {
     setFocus?: Dispatch<SetStateAction<number>>;
     /** Indeksen til `<Tab />`. **OBS!** settes automatisk av forelder.*/
     index?: number;
-    /**
-     * Bredden til `<Tab />`. Her er det støtte for de samme enhetene som du kan bruke i `grid-template-columns`.
-     * @default '1fr'
-     */
+    /** Bredden til `<Tab />`. Her er det støtte for de samme enhetene som du kan bruke i `grid-template-columns`. */
     width?: CSS.Properties['width'];
 } & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onKeyDown'>, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onKeyDown'>>;
 declare const Tab: react.ForwardRefExoticComponent<Pick<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onKeyDown" | "onClick">, "className" | "id"> & {
@@ -2990,10 +2989,7 @@ declare const Tab: react.ForwardRefExoticComponent<Pick<Omit<ButtonHTMLAttribute
     setFocus?: Dispatch<SetStateAction<number>> | undefined;
     /** Indeksen til `<Tab />`. **OBS!** settes automatisk av forelder.*/
     index?: number | undefined;
-    /**
-     * Bredden til `<Tab />`. Her er det støtte for de samme enhetene som du kan bruke i `grid-template-columns`.
-     * @default '1fr'
-     */
+    /** Bredden til `<Tab />`. Her er det støtte for de samme enhetene som du kan bruke i `grid-template-columns`. */
     width?: CSS.Properties['width'];
 } & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "onKeyDown" | "onClick"> & {
     children?: react.ReactNode;

package/dist/index.d.ts

@@ -2360,7 +2360,7 @@ interface PopoverGroupProps {
     isOpen?: boolean;
     /** `id` til `<Popover />.` */
     popoverId?: string;
-    /** Barna til wrapperen: anchor-element som det første og `<Popover />` so det adnre.  */
+    /** Barna til wrapperen: anchor-element som det første og `<Popover />` som det andre.  */
     children: ReactNode;
 }
 declare const PopoverGroup: {
@@ -2559,7 +2559,9 @@ type SelectProps<Option = unknown, IsMulti extends boolean = false> = {
     className?: string;
     /** Inline styling. */
     style?: React.CSSProperties;
+    /** Custom element som vises for det valgte elementet. */
     customOptionElement?: (props: OptionProps<Option, IsMulti, GroupBase<Option>>) => JSX.Element;
+    /** Custom element som vises i listen over alternativer. */
     customSingleValueElement?: (props: SingleValueProps<Option, IsMulti, GroupBase<Option>>) => JSX.Element;
 } & Pick<HTMLAttributes<HTMLInputElement>, 'aria-required'> & WrappedReactSelectProps<Option, IsMulti, GroupBase<Option>>;
 type ForwardRefType<Option, IsMulti extends boolean> = React.ForwardedRef<SelectInstance<Option, IsMulti, GroupBase<Option>>>;
@@ -2973,10 +2975,7 @@ type TabProps = BaseComponentPropsWithChildren<HTMLButtonElement, {
     setFocus?: Dispatch<SetStateAction<number>>;
     /** Indeksen til `<Tab />`. **OBS!** settes automatisk av forelder.*/
     index?: number;
-    /**
-     * Bredden til `<Tab />`. Her er det støtte for de samme enhetene som du kan bruke i `grid-template-columns`.
-     * @default '1fr'
-     */
+    /** Bredden til `<Tab />`. Her er det støtte for de samme enhetene som du kan bruke i `grid-template-columns`. */
     width?: CSS.Properties['width'];
 } & Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onKeyDown'>, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onKeyDown'>>;
 declare const Tab: react.ForwardRefExoticComponent<Pick<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onKeyDown" | "onClick">, "className" | "id"> & {
@@ -2990,10 +2989,7 @@ declare const Tab: react.ForwardRefExoticComponent<Pick<Omit<ButtonHTMLAttribute
     setFocus?: Dispatch<SetStateAction<number>> | undefined;
     /** Indeksen til `<Tab />`. **OBS!** settes automatisk av forelder.*/
     index?: number | undefined;
-    /**
-     * Bredden til `<Tab />`. Her er det støtte for de samme enhetene som du kan bruke i `grid-template-columns`.
-     * @default '1fr'
-     */
+    /** Bredden til `<Tab />`. Her er det støtte for de samme enhetene som du kan bruke i `grid-template-columns`. */
     width?: CSS.Properties['width'];
 } & Pick<ButtonHTMLAttributes<HTMLButtonElement>, "onKeyDown" | "onClick"> & {
     children?: react.ReactNode;

package/dist/index.js

@@ -5032,9 +5032,9 @@ var Bar = import_styled_components22.default.div.withConfig({
   color: ${navTokens3.color};
   background-color: ${navTokens3.backgroundColor};
   box-sizing: border-box;
-  z-index: 101;
+  z-index: 99;
 
-  position: fixed;
+  position: absolute;
   top: ${({ environmentBannerActive }) => environmentBannerActive ? import_development_utils.ENVIRONMENT_BANNER_HEIGHT : "0"};
   left: 0;
   right: 0;
@@ -9239,9 +9239,11 @@ var import_dds_design_tokens43 = require("@norges-domstoler/dds-design-tokens");
 var { border: border10, colors: colors23, spacing: spacing24 } = import_dds_design_tokens43.ddsBaseTokens;
 var bar = {
   backgroundColor: colors23.DdsColorNeutralsWhite,
-  itemGap: spacing24.SizesDdsSpacingX1,
+  itemGap: spacing24.SizesDdsSpacingX15,
   minHeight: "57px",
-  borderBottom: `${border10.BordersDdsBorderStyleLightStroke} solid ${border10.BordersDdsBorderStyleLightStrokeWeight}`
+  borderBottom: `${border10.BordersDdsBorderStyleLightStroke} solid ${border10.BordersDdsBorderStyleLightStrokeWeight}`,
+  paddingLeft: spacing24.SizesDdsSpacingX15,
+  paddingRight: spacing24.SizesDdsSpacingX15
 };
 var separator = {
   color: border10.BordersDdsBorderStyleLightStroke,
@@ -9264,6 +9266,8 @@ var Bar2 = import_styled_components61.default.div`
   align-items: center;
   min-height: ${bar2.minHeight};
   border-bottom: ${bar2.borderBottom};
+  padding-left: ${bar2.paddingLeft};
+  padding-right: ${bar2.paddingRight};
 
   ${({ $hasNavigation }) => $hasNavigation ? import_styled_components61.css`
           ${ContextMenuGroup} {
@@ -9440,7 +9444,7 @@ var InternalHeader = (props) => {
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Typography, { typographyType: "bodySans02", bold: true, as: "span", children: applicationName }),
         /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Typography, { typographyType: "bodySans02", as: "span", children: applicationDesc }),
-        /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(BarSeparator, {}),
+        (hasContextMenu || navigation2 !== null) && /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(BarSeparator, {}),
         navigation2,
         hasContextMenu && /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(ContextMenuGroup, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
@@ -14396,6 +14400,8 @@ var ToggleRadio = (0, import_react119.forwardRef)(
       name,
       onChange,
       checked,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
       icon: icon12,
       label: label3,
       htmlProps,
@@ -14420,7 +14426,9 @@ var ToggleRadio = (0, import_react119.forwardRef)(
           name: name != null ? name : group4.name,
           onChange: handleChange,
           value,
-          checked: calculateChecked(value, group4, checked)
+          checked: calculateChecked(value, group4, checked),
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(Content2, { $size: group4.size, $justIcon: !!icon12 && !label3, children: [