@mattilsynet/design 0.5.4 → 1.0.1

package/mtds/styles.json

@@ -1,35 +1,36 @@
 {
-  "alert": "_alert_1p6jx_1 _ds-alert_194o1_1",
-  "avatar": "_avatar_1p6jx_1 _ds-avatar_194o1_1",
-  "badge": "_badge_1p6jx_1",
-  "breadcrumbs": "_breadcrumbs_1p6jx_1 _ds-breadcrumbs_194o1_1",
-  "button": "_button_1p6jx_1 _ds-button_194o1_1",
-  "card": "_card_1p6jx_1",
-  "group": "_group_1p6jx_1",
-  "chip": "_chip_1p6jx_1 _ds-chip_194o1_1",
-  "details": "_details_1p6jx_1 _ds-details_194o1_1",
-  "dialog": "_dialog_1p6jx_1 _ds-dialog_194o1_1",
-  "divider": "_divider_1p6jx_1",
-  "errorsummary": "_errorsummary_1p6jx_1 _ds-error-summary_194o1_1",
-  "field": "_field_1p6jx_1 _ds-field_194o1_1",
-  "affixes": "_affixes_1p6jx_1 _ds-field-affixes_194o1_1",
-  "count": "_count_1p6jx_1",
-  "fieldset": "_fieldset_1p6jx_1 _ds-fieldset_194o1_1",
-  "heading": "_heading_1p6jx_1 _ds-heading_194o1_1",
-  "typostack": "_typostack_1p6jx_1",
-  "input": "_input_1p6jx_1 _ds-input_194o1_1",
-  "grid": "_grid_1p6jx_1",
-  "flex": "_flex_1p6jx_1",
-  "app": "_app_1p6jx_1",
-  "link": "_link_1p6jx_1",
-  "logo": "_logo_1p6jx_1",
-  "pagination": "_pagination_1p6jx_1 _ds-pagination_194o1_1",
-  "popover": "_popover_1p6jx_1",
-  "skeleton": "_skeleton_1p6jx_1 _ds-skeleton_194o1_1",
-  "spinner": "_spinner_1p6jx_1",
-  "table": "_table_1p6jx_1 _ds-table_194o1_1",
-  "tabs": "_tabs_1p6jx_1 _ds-tabs_194o1_1",
-  "tag": "_tag_1p6jx_1 _ds-tag_194o1_1",
-  "validation": "_validation_1p6jx_1 _ds-validation-message_194o1_1",
-  "body": "_body_1p6jx_141"
+  "alert": "_alert_1u2zm_1 _ds-alert_z5gp5_1",
+  "avatar": "_avatar_1u2zm_1 _ds-avatar_z5gp5_1",
+  "badge": "_badge_1u2zm_1",
+  "breadcrumbs": "_breadcrumbs_1u2zm_1 _ds-breadcrumbs_z5gp5_1",
+  "button": "_button_1u2zm_1 _ds-button_z5gp5_1",
+  "card": "_card_1u2zm_1",
+  "info": "_info_1u2zm_1",
+  "group": "_group_1u2zm_1",
+  "chip": "_chip_1u2zm_1 _ds-chip_z5gp5_1",
+  "details": "_details_1u2zm_1 _ds-details_z5gp5_1",
+  "dialog": "_dialog_1u2zm_1 _ds-dialog_z5gp5_1",
+  "divider": "_divider_1u2zm_1",
+  "errorsummary": "_errorsummary_1u2zm_1 _ds-error-summary_z5gp5_1",
+  "field": "_field_1u2zm_1 _ds-field_z5gp5_1",
+  "affixes": "_affixes_1u2zm_1 _ds-field-affixes_z5gp5_1",
+  "fieldset": "_fieldset_1u2zm_1 _ds-fieldset_z5gp5_1",
+  "helptext": "_helptext_1u2zm_1 _ds-focus_z5gp5_1",
+  "input": "_input_1u2zm_1 _ds-input_z5gp5_1",
+  "app": "_app_1u2zm_1",
+  "grid": "_grid_1u2zm_1",
+  "flex": "_flex_1u2zm_1",
+  "link": "_link_1u2zm_1",
+  "logo": "_logo_1u2zm_1",
+  "pagination": "_pagination_1u2zm_1 _ds-pagination_z5gp5_1",
+  "popover": "_popover_1u2zm_1",
+  "skeleton": "_skeleton_1u2zm_1 _ds-skeleton_z5gp5_1",
+  "spinner": "_spinner_1u2zm_1",
+  "table": "_table_1u2zm_1 _ds-table_z5gp5_1",
+  "tabs": "_tabs_1u2zm_1 _ds-tabs_z5gp5_1",
+  "tag": "_tag_1u2zm_1 _ds-tag_z5gp5_1",
+  "heading": "_heading_1u2zm_1 _ds-heading_z5gp5_1",
+  "prose": "_prose_1u2zm_1",
+  "validation": "_validation_1u2zm_1 _ds-validation-message_z5gp5_1",
+  "body": "_body_1u2zm_106"
 }

package/mtds/styles.module.css.js

@@ -1,76 +1,78 @@
-const _ = "_alert_1p6jx_1 _ds-alert_194o1_1", o = "_avatar_1p6jx_1 _ds-avatar_194o1_1", t = "_badge_1p6jx_1", s = "_breadcrumbs_1p6jx_1 _ds-breadcrumbs_194o1_1", a = "_button_1p6jx_1 _ds-button_194o1_1", n = "_card_1p6jx_1", p = "_group_1p6jx_1", d = "_chip_1p6jx_1 _ds-chip_194o1_1", e = "_details_1p6jx_1 _ds-details_194o1_1", i = "_dialog_1p6jx_1 _ds-dialog_194o1_1", c = "_divider_1p6jx_1", r = "_errorsummary_1p6jx_1 _ds-error-summary_194o1_1", l = "_field_1p6jx_1 _ds-field_194o1_1", x = "_affixes_1p6jx_1 _ds-field-affixes_194o1_1", j = "_count_1p6jx_1", g = "_fieldset_1p6jx_1 _ds-fieldset_194o1_1", b = "_heading_1p6jx_1 _ds-heading_194o1_1", u = "_typostack_1p6jx_1", f = "_input_1p6jx_1 _ds-input_194o1_1", v = "_grid_1p6jx_1", m = "_flex_1p6jx_1", h = "_app_1p6jx_1", y = "_link_1p6jx_1", k = "_logo_1p6jx_1", w = "_pagination_1p6jx_1 _ds-pagination_194o1_1", S = "_popover_1p6jx_1", q = "_skeleton_1p6jx_1 _ds-skeleton_194o1_1", z = "_spinner_1p6jx_1", A = "_table_1p6jx_1 _ds-table_194o1_1", B = "__scrollShadow_1p6jx_1", C = "_tabs_1p6jx_1 _ds-tabs_194o1_1", D = "_tag_1p6jx_1 _ds-tag_194o1_1", E = "__tooltip_1p6jx_1", F = "_validation_1p6jx_1 _ds-validation-message_194o1_1", G = "_body_1p6jx_141", H = {
+const _ = "_alert_1u2zm_1 _ds-alert_z5gp5_1", t = "_avatar_1u2zm_1 _ds-avatar_z5gp5_1", s = "_badge_1u2zm_1", o = "_breadcrumbs_1u2zm_1 _ds-breadcrumbs_z5gp5_1", a = "_button_1u2zm_1 _ds-button_z5gp5_1", e = "_card_1u2zm_1", n = "_info_1u2zm_1", d = "_group_1u2zm_1", i = "_chip_1u2zm_1 _ds-chip_z5gp5_1", p = "_details_1u2zm_1 _ds-details_z5gp5_1", r = "_dialog_1u2zm_1 _ds-dialog_z5gp5_1", u = "_divider_1u2zm_1", l = "_errorsummary_1u2zm_1 _ds-error-summary_z5gp5_1", z = "_field_1u2zm_1 _ds-field_z5gp5_1", c = "_affixes_1u2zm_1 _ds-field-affixes_z5gp5_1", g = "_fieldset_1u2zm_1 _ds-fieldset_z5gp5_1", m = "_helptext_1u2zm_1 _ds-focus_z5gp5_1", b = "_input_1u2zm_1 _ds-input_z5gp5_1", f = "_app_1u2zm_1", h = "_grid_1u2zm_1", v = "_flex_1u2zm_1", x = "_link_1u2zm_1", y = "_logo_1u2zm_1", k = "_pagination_1u2zm_1 _ds-pagination_z5gp5_1", w = "_popover_1u2zm_1", S = "_skeleton_1u2zm_1 _ds-skeleton_z5gp5_1", j = "_spinner_1u2zm_1", q = "_table_1u2zm_1 _ds-table_z5gp5_1", A = "__scrollShadow_1u2zm_1", B = "_tabs_1u2zm_1 _ds-tabs_z5gp5_1", C = "_tag_1u2zm_1 _ds-tag_z5gp5_1", D = "__tooltip_1u2zm_1", E = "_heading_1u2zm_1 _ds-heading_z5gp5_1", F = "_prose_1u2zm_1", G = "_validation_1u2zm_1 _ds-validation-message_z5gp5_1", H = "_body_1u2zm_106", I = {
   alert: _,
-  avatar: o,
-  badge: t,
-  breadcrumbs: s,
+  avatar: t,
+  badge: s,
+  breadcrumbs: o,
   button: a,
-  card: n,
-  group: p,
-  chip: d,
-  details: e,
-  dialog: i,
-  divider: c,
-  errorsummary: r,
-  field: l,
-  affixes: x,
-  count: j,
+  card: e,
+  info: n,
+  group: d,
+  chip: i,
+  details: p,
+  dialog: r,
+  divider: u,
+  errorsummary: l,
+  field: z,
+  affixes: c,
   fieldset: g,
-  heading: b,
-  typostack: u,
-  input: f,
-  grid: v,
-  flex: m,
-  app: h,
-  link: y,
-  logo: k,
-  pagination: w,
-  popover: S,
-  skeleton: q,
-  spinner: z,
-  table: A,
-  _scrollShadow: B,
-  tabs: C,
-  tag: D,
-  _tooltip: E,
-  validation: F,
-  body: G
+  helptext: m,
+  input: b,
+  app: f,
+  grid: h,
+  flex: v,
+  link: x,
+  logo: y,
+  pagination: k,
+  popover: w,
+  skeleton: S,
+  spinner: j,
+  table: q,
+  _scrollShadow: A,
+  tabs: B,
+  tag: C,
+  _tooltip: D,
+  heading: E,
+  prose: F,
+  validation: G,
+  body: H
 };
 export {
-  B as _scrollShadow,
-  E as _tooltip,
-  x as affixes,
+  A as _scrollShadow,
+  D as _tooltip,
+  c as affixes,
   _ as alert,
-  h as app,
-  o as avatar,
-  t as badge,
-  G as body,
-  s as breadcrumbs,
+  f as app,
+  t as avatar,
+  s as badge,
+  H as body,
+  o as breadcrumbs,
   a as button,
-  n as card,
-  d as chip,
-  j as count,
-  H as default,
-  e as details,
-  i as dialog,
-  c as divider,
-  r as errorsummary,
-  l as field,
+  e as card,
+  i as chip,
+  I as default,
+  p as details,
+  r as dialog,
+  u as divider,
+  l as errorsummary,
+  z as field,
   g as fieldset,
-  m as flex,
-  v as grid,
-  p as group,
-  b as heading,
-  f as input,
-  y as link,
-  k as logo,
-  w as pagination,
-  S as popover,
-  q as skeleton,
-  z as spinner,
-  A as table,
-  C as tabs,
-  D as tag,
-  u as typostack,
-  F as validation
+  v as flex,
+  h as grid,
+  d as group,
+  E as heading,
+  m as helptext,
+  n as info,
+  b as input,
+  x as link,
+  y as logo,
+  k as pagination,
+  w as popover,
+  F as prose,
+  S as skeleton,
+  j as spinner,
+  q as table,
+  B as tabs,
+  C as tag,
+  G as validation
 };
 //# sourceMappingURL=styles.module.css.js.map

package/mtds/styles.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styles.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/mtds/{heading/heading.js → typography/typography.js}

@@ -8,4 +8,4 @@ const l = i(function({ as: o, className: r, ...t }, m) {
 export {
   l as Heading
 };
-//# sourceMappingURL=heading.js.map
+//# sourceMappingURL=typography.js.map

package/mtds/typography/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","sources":["../../designsystem/typography/typography.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type HeadingProps<As extends React.ElementType = \"h2\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{\n\t\t\t\"data-size\"?: \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n\t\t}\n\t>;\n\ntype HeadingComponent = <As extends React.ElementType = \"h2\">(\n\tprops: HeadingProps<As>,\n) => JSX.Element;\n\nexport const Heading: HeadingComponent = forwardRef<null>(function Heading<\n\tAs extends React.ElementType = \"h2\",\n>({ as, className, ...rest }: HeadingProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"h2\";\n\n\treturn (\n\t\t<Tag className={clsx(styles.heading, className)} ref={ref} {...rest} />\n\t);\n}) as HeadingComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Heading","forwardRef","as","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAoBa,MAAAA,IAA4BC,EAAiB,SAExD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAqBC,GAA0B;AAIxE,SAAA,gBAAAC,EAHWJ,KAAM,MAGZ,EAAA,WAAWK,EAAKC,EAAO,SAASL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAEvE,CAAC;"}

package/mtds/{heading/heading.stories.d.ts → typography/typography.stories.d.ts}

@@ -8,6 +8,7 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Sizes: Story;
 export declare const React: Story;
 export declare const Center: Story;
-export declare const Stack: Story;
+export declare const Prose: Story;

package/mtds/utils.d.ts

@@ -18,14 +18,14 @@ export declare function useId(el: Element): string;
  * @param types A comma separated string of event types
  * @param listener An event listener function or listener object
  */
-export declare const on: (element: Node | Window, type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined) => void;
+export declare const on: (element: Node | Window, ...rest: Parameters<typeof Element.prototype.addEventListener>) => void;
 /**
  * off
  * @param element The Element to use as EventTarget
  * @param types A comma separated string of event types
  * @param listener An event listener function or listener object
  */
-export declare const off: (element: Node | Window, type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions | undefined) => void;
+export declare const off: (element: Node | Window, ...rest: Parameters<typeof Element.prototype.removeEventListener>) => void;
 export declare function anchorPosition(target: HTMLElement, anchor: HTMLElement | null | false, position?: string | number): boolean | void;
 /**
  * Speed up MutationObserver by debouncing and only running when page is visible

package/mtds/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../designsystem/utils.ts"],"sourcesContent":["export const IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';\nexport const QUICK_EVENT = { capture: true, passive: true };\n\n/**\n * attr\n * @description Utility to quickly get, set and remove attributes\n * @param el The Element to use as EventTarget\n * @param name The attribute name to get, set or remove, or a object to set multiple attributes\n * @param value A valid attribute value or null to remove attribute\n */\nexport function attr(\n\tel: Element,\n\tname: string,\n\tvalue?: string | null,\n): string | null {\n\tif (value === undefined) return el.getAttribute(name) ?? null; // Fallback to null only if el is undefined\n\tif (value === null) el.removeAttribute(name);\n\telse if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n\treturn null;\n}\n\n/**\n * useId\n * @return A generated unique ID\n */\nlet id = 0;\nconst UUID = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;\nexport function useId (el: Element) {\n  if (!el.id) el.id = `${UUID}${++id}`;\n\treturn el.id;\n};\n\n// Internal helper for on / off\nconst events = (\n\taction: \"add\" | \"remove\",\n\telement: Node | Window,\n\trest: Parameters<typeof Element.prototype.addEventListener>,\n): void => {\n\tfor (const type of rest[0].split(\",\")) {\n\t\trest[0] = type;\n\t\telement[`${action}EventListener`](...rest);\n\t}\n};\n\n/**\n * on\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const on = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.addEventListener>\n): void => events(\"add\", element, rest);\n\n/**\n * off\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const off = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.removeEventListener>\n): void => events(\"remove\", element, rest);\n\n\nconst TARGETS = new Map<Element, () => void>(); // Store current open poppers and their update functions\nconst SCROLLER = IS_BROWSER ? document.createElement('div') : null // Used to ensure we have scrollability under\nif (SCROLLER) attr(SCROLLER, 'style', 'position:absolute;padding:1px;top:0;left:0px');\n\nif (IS_BROWSER){\n\ton(window, 'load,resize,scroll', () => {\n\t\tfor (const [_, update] of TARGETS) update();\n\t}, QUICK_EVENT);}\n\t\n/**\n * anchorPosition\n * @param target The Element to position\n * @param anchor The Element to use as anchor\n */\nconst POSITION = { top: 0, right: 1, bottom: 2, left: 3 }; // Speed up by using a const map\n\nexport function anchorPosition (target: HTMLElement, anchor: HTMLElement | null | false, position?: string | number) {\n\tif (!anchor || !anchor.isConnected || !target.isConnected) return TARGETS.delete(target); // Stop watchning if anchor is removed from DOM\n\tif (!SCROLLER?.isConnected) document.body.append(SCROLLER || ''); // Ensure we have t´he scroller\n\tif (!TARGETS.has(target)) { // Setup new target or update position\n\t\tconst place = POSITION[position as keyof typeof POSITION] ?? POSITION.bottom; // Use CSS property to store position for more flexibility\n\t\treturn TARGETS.set(target, () => anchorPosition(target, anchor, place)).get(target)?.(); // Start watching if not already watching\n\t}\n\n  const { offsetWidth: targetW, offsetHeight: targetH } = target;\n  const { offsetWidth: anchorW, offsetHeight: anchorH } = anchor;\n  const { width, height, left, top } = anchor.getBoundingClientRect();\n\tconst anchorX = Math.round(left - (anchorW - width) / 2); // Correct for CSS transform scale\n  const anchorY = Math.round(top - (anchorH - height) / 2); // Correct for CSS transform scale\n\n\tconst hasSpaceLeft = anchorX - targetW > 0\n\tconst hasSpaceRight = anchorW + anchorW + targetW < window.innerWidth;\n\tconst hasSpaceOver = anchorY - targetH > 0\n\tconst hasSpaceUnder = anchorY + anchorH + targetH < window.innerHeight;\n\tconst positionRight = (position === POSITION.bottom && hasSpaceRight) || !hasSpaceLeft // Always position right when no hasSpaceLeft, as no OS scrolls further up than 0\n\tconst positionUnder = (position === POSITION.bottom && hasSpaceUnder) || !hasSpaceOver // Always position under when no hasSpaceOver, as no OS scrolls further up than 0\n\tconst centerX = Math.min(Math.max(10, anchorX - (targetW - anchorW) / 2), window.innerWidth - targetW - 10);\n\tconst centerY = Math.min(Math.max(10, anchorY - (targetH - anchorH) / 2), window.innerHeight - targetH - 10);\n\tconst isVertical = position === POSITION.top || position === POSITION.bottom;\n\n\ttarget.style.left = `${Math.round(isVertical ? centerX : (positionRight ? anchorX + anchorW : anchorX - targetW))}px`\n  target.style.top = `${Math.round(isVertical ? (positionUnder ? anchorY + anchorH : anchorY - targetH) : centerY)}px`\n  SCROLLER?.style.setProperty('translate', `${Math.round(window.scrollX + anchorX + anchorW + targetW + 30)} ${Math.round(window.scrollY + anchorY + anchorH + targetH + 30)}px`);\n}\n\n/**\n * Speed up MutationObserver by debouncing and only running when page is visible\n * @return new MutaionObserver\n */\nexport function createOptimizedMutationObserver(callback: MutationCallback) {\n  let queue = 0;\n\n\tconst onFrame = () => setTimeout(onTimer, 200); // Use both requestAnimationFrame and setTimeout to debounce and only run when visible\n\tconst onTimer = () => {\n\t\tcallback([], observer);\n\t\tqueue = 0;\n\t};\n  const observer = new MutationObserver(() => {\n    if (!queue) queue = requestAnimationFrame(onFrame);\n  });\n\n  return observer;\n}\n\ntype Mutator = { observer: MutationObserver, collections: Map<string, () => void> };\nconst MUTATORS = new WeakMap<Element, Mutator>();\nconst MUTATORS_CALLBACK = (element: Element) => {\n\tconst mutator = MUTATORS.get(element);\n\n\tif (!mutator || !element.isConnected) {\n\t\tmutator?.observer?.disconnect();\n\t\tMUTATORS.delete(element);\n\t} else for(const [, callback] of mutator.collections) callback();\n};\n\n/**\n * onMutation\n * @description Utility to quickly observe mutations on a specific class name\n * @param element The Element to use as EventTarget\n * @param className The class name to observe\n * @param callback The callback to run when mutations are detected or false to stop observing\n */\nexport const onMutation = (\n\telement: Element,\n\tclassName: string,\n\tcallback: ((collection: HTMLCollection) => void) | false\n) => {\n\tconst collection = element.getElementsByClassName(className);\n\tlet mutator = MUTATORS.get(element);\n\n\tif (!mutator) {\n\t\tmutator = { collections: new Map(), observer: createOptimizedMutationObserver(() => MUTATORS_CALLBACK(element)) };\n\t\tmutator.observer.observe(element, { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] });\n\t\tMUTATORS.set(element, mutator);\n\t}\n\tif (callback) mutator.collections.set(className, () => callback(collection));\n\telse mutator.collections.delete(className);\n}\n\nexport const isInputLike = (el: unknown): el is HTMLInputElement =>\n\tel instanceof HTMLElement && 'validity' in el && !(el instanceof HTMLButtonElement);\n\n// Make React support popover=\"\"target attribute\n// https://github.com/facebook/react/issues/27479\ntype Popover = \"\" | \"auto\" | \"manual\" | undefined;\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicAttributes {\n\t\t\tpopovertargetaction?: string;\n\t\t\tpopovertarget?: string;\n\t\t\tpopover?: Popover;\n\t\t}\n\t}\n\tnamespace React {\n\t\tinterface HTMLAttributes<T> {\n\t\t\tpopovertargetaction?: string;\n\t\t\tpopovertarget?: string;\n\t\t\tpopover?: Popover;\n\t\t}\n\t}\n}"],"names":["IS_BROWSER","QUICK_EVENT","attr","el","name","value","id","UUID","useId","events","action","element","rest","type","on","off","TARGETS","SCROLLER","_","update","POSITION","anchorPosition","target","anchor","position","_a","place","targetW","targetH","anchorW","anchorH","width","height","left","top","anchorX","anchorY","hasSpaceLeft","hasSpaceRight","hasSpaceOver","hasSpaceUnder","positionRight","positionUnder","centerX","centerY","isVertical","createOptimizedMutationObserver","callback","queue","onFrame","onTimer","observer","MUTATORS","MUTATORS_CALLBACK","mutator","onMutation","className","collection","isInputLike"],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../designsystem/utils.ts"],"sourcesContent":["export const IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined';\nexport const QUICK_EVENT = { capture: true, passive: true };\n\n/**\n * attr\n * @description Utility to quickly get, set and remove attributes\n * @param el The Element to use as EventTarget\n * @param name The attribute name to get, set or remove, or a object to set multiple attributes\n * @param value A valid attribute value or null to remove attribute\n */\nexport function attr(\n\tel: Element,\n\tname: string,\n\tvalue?: string | null,\n): string | null {\n\tif (value === undefined) return el.getAttribute(name) ?? null; // Fallback to null only if el is undefined\n\tif (value === null) el.removeAttribute(name);\n\telse if (el.getAttribute(name) !== value) el.setAttribute(name, value);\n\treturn null;\n}\n\n/**\n * useId\n * @return A generated unique ID\n */\nlet id = 0;\nconst UUID = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 5)}`;\nexport function useId (el: Element) {\n  if (!el.id) el.id = `${UUID}${++id}`;\n\treturn el.id;\n};\n\n// Internal helper for on / off\nconst events = (\n\taction: \"add\" | \"remove\",\n\telement: Node | Window,\n\trest: Parameters<typeof Element.prototype.addEventListener>,\n): void => {\n\tfor (const type of rest[0].split(\",\")) {\n\t\trest[0] = type;\n\t\telement[`${action}EventListener`](...rest);\n\t}\n};\n\n/**\n * on\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const on = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.addEventListener>\n): void => events(\"add\", element, rest);\n\n/**\n * off\n * @param element The Element to use as EventTarget\n * @param types A comma separated string of event types\n * @param listener An event listener function or listener object\n */\nexport const off = (\n\telement: Node | Window,\n\t...rest: Parameters<typeof Element.prototype.removeEventListener>\n): void => events(\"remove\", element, rest);\n\n\nconst TARGETS = new Map<Element, () => void>(); // Store current open poppers and their update functions\nconst SCROLLER = IS_BROWSER ? document.createElement('div') : null // Used to ensure we have scrollability under\nif (SCROLLER) attr(SCROLLER, 'style', 'position:absolute;padding:1px;top:0;left:0px');\n\nif (IS_BROWSER){\n\ton(window, 'load,resize,scroll', () => {\n\t\tfor (const [_, update] of TARGETS) update();\n\t}, QUICK_EVENT);}\n\t\n/**\n * anchorPosition\n * @param target The Element to position\n * @param anchor The Element to use as anchor\n */\nconst POSITION = { top: 0, right: 1, bottom: 2, left: 3 }; // Speed up by using a const map\n\nexport function anchorPosition (target: HTMLElement, anchor: HTMLElement | null | false, position?: string | number) {\n\tif (!anchor || !anchor.isConnected || !target.isConnected) return TARGETS.delete(target); // Stop watchning if anchor is removed from DOM\n\tif (!SCROLLER?.isConnected) document.body.append(SCROLLER || ''); // Ensure we have t´he scroller\n\tif (!TARGETS.has(target)) { // Setup new target or update position\n\t\tconst place = POSITION[position as keyof typeof POSITION] ?? POSITION.bottom; // Use CSS property to store position for more flexibility\n\t\treturn TARGETS.set(target, () => anchorPosition(target, anchor, place)).get(target)?.(); // Start watching if not already watching\n\t}\n\n  const { offsetWidth: targetW, offsetHeight: targetH } = target;\n  const { offsetWidth: anchorW, offsetHeight: anchorH } = anchor;\n  const { width, height, left, top } = anchor.getBoundingClientRect();\n\tconst anchorX = Math.round(left - (anchorW - width) / 2); // Correct for CSS transform scale\n  const anchorY = Math.round(top - (anchorH - height) / 2); // Correct for CSS transform scale\n\n\tconst hasSpaceLeft = anchorX - targetW > 0\n\tconst hasSpaceRight = anchorW + anchorW + targetW < window.innerWidth;\n\tconst hasSpaceOver = anchorY - targetH > 0\n\tconst hasSpaceUnder = anchorY + anchorH + targetH < window.innerHeight;\n\tconst positionRight = (position === POSITION.bottom && hasSpaceRight) || !hasSpaceLeft // Always position right when no hasSpaceLeft, as no OS scrolls further up than 0\n\tconst positionUnder = (position === POSITION.bottom && hasSpaceUnder) || !hasSpaceOver // Always position under when no hasSpaceOver, as no OS scrolls further up than 0\n\tconst centerX = Math.min(Math.max(10, anchorX - (targetW - anchorW) / 2), window.innerWidth - targetW - 10);\n\tconst centerY = Math.min(Math.max(10, anchorY - (targetH - anchorH) / 2), window.innerHeight - targetH - 10);\n\tconst isVertical = position === POSITION.top || position === POSITION.bottom;\n\n\ttarget.style.left = `${Math.round(isVertical ? centerX : (positionRight ? anchorX + anchorW : anchorX - targetW))}px`\n  target.style.top = `${Math.round(isVertical ? (positionUnder ? anchorY + anchorH : anchorY - targetH) : centerY)}px`\n  SCROLLER?.style.setProperty('translate', `${Math.round(window.scrollX + anchorX + anchorW + targetW + 30)} ${Math.round(window.scrollY + anchorY + anchorH + targetH + 30)}px`);\n}\n\n/**\n * Speed up MutationObserver by debouncing and only running when page is visible\n * @return new MutaionObserver\n */\nexport function createOptimizedMutationObserver(callback: MutationCallback) {\n  let queue = 0;\n\n\tconst onFrame = () => setTimeout(onTimer, 200); // Use both requestAnimationFrame and setTimeout to debounce and only run when visible\n\tconst onTimer = () => {\n\t\tcallback([], observer);\n\t\tqueue = 0;\n\t};\n  const observer = new MutationObserver(() => {\n    if (!queue) queue = requestAnimationFrame(onFrame);\n  });\n\n  return observer;\n}\n\ntype Mutator = { observer: MutationObserver, collections: Map<string, () => void> };\nconst MUTATORS = new WeakMap<Element, Mutator>();\nconst MUTATORS_CALLBACK = (element: Element) => {\n\tconst mutator = MUTATORS.get(element);\n\n\tif (!mutator || !element.isConnected) {\n\t\tmutator?.observer?.disconnect();\n\t\tMUTATORS.delete(element);\n\t} else for(const [, callback] of mutator.collections) callback();\n};\n\n/**\n * onMutation\n * @description Utility to quickly observe mutations on a specific class name\n * @param element The Element to use as EventTarget\n * @param className The class name to observe\n * @param callback The callback to run when mutations are detected or false to stop observing\n */\nexport const onMutation = (\n\telement: Element,\n\tclassName: string,\n\tcallback: ((collection: HTMLCollection) => void) | false\n) => {\n\tconst collection = element.getElementsByClassName(className);\n\tlet mutator = MUTATORS.get(element);\n\n\tif (!mutator) {\n\t\tmutator = { collections: new Map(), observer: createOptimizedMutationObserver(() => MUTATORS_CALLBACK(element)) };\n\t\tmutator.observer.observe(element, { childList: true, subtree: true, attributes: true, attributeFilter: ['class'] });\n\t\tMUTATORS.set(element, mutator);\n\t}\n\tif (callback) mutator.collections.set(className, () => callback(collection));\n\telse mutator.collections.delete(className);\n}\n\nexport const isInputLike = (el: unknown): el is HTMLInputElement =>\n\tel instanceof HTMLElement && 'validity' in el && !(el instanceof HTMLButtonElement);\n\n// Make React support popover attributes\n// https://github.com/facebook/react/issues/27479\ntype Popover = \"\" | \"auto\" | \"manual\" | undefined;\ndeclare global {\n\tnamespace React.JSX {\n\t\tinterface IntrinsicAttributes {\n\t\t\tpopovertargetaction?: string;\n\t\t\tpopovertarget?: string;\n\t\t\tpopover?: Popover;\n\t\t}\n\t}\n\tnamespace React {\n\t\tinterface HTMLAttributes<T> {\n\t\t\tpopovertargetaction?: string;\n\t\t\tpopovertarget?: string;\n\t\t\tpopover?: Popover;\n\t\t}\n\t}\n}"],"names":["IS_BROWSER","QUICK_EVENT","attr","el","name","value","id","UUID","useId","events","action","element","rest","type","on","off","TARGETS","SCROLLER","_","update","POSITION","anchorPosition","target","anchor","position","_a","place","targetW","targetH","anchorW","anchorH","width","height","left","top","anchorX","anchorY","hasSpaceLeft","hasSpaceRight","hasSpaceOver","hasSpaceUnder","positionRight","positionUnder","centerX","centerY","isVertical","createOptimizedMutationObserver","callback","queue","onFrame","onTimer","observer","MUTATORS","MUTATORS_CALLBACK","mutator","onMutation","className","collection","isInputLike"],"mappings":"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"}

package/mtds/validation/validation.stories.d.ts

@@ -6,3 +6,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const React: Story;
+export declare const Colors: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mattilsynet/design",
-	"version": "0.5.4",
+	"version": "1.0.1",
 	"type": "module",
 	"main": "./mtds/index.js",
 	"types": "./mtds/index.d.ts",
@@ -38,19 +38,18 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^1.9.4",
-		"@digdir/designsystemet-css": "^1.0.0-next.49",
-		"@digdir/designsystemet-theme": "^1.0.0-next.49",
+		"@digdir/designsystemet-css": "^1.0.2",
 		"@phosphor-icons/react": "^2.1.7",
-		"@storybook/addon-essentials": "^8.6.0",
-		"@storybook/addon-mdx-gfm": "^8.6.0",
-		"@storybook/addon-storysource": "^8.6.0",
-		"@storybook/blocks": "^8.6.0",
-		"@storybook/manager-api": "^8.6.0",
-		"@storybook/react": "^8.6.0",
-		"@storybook/react-vite": "^8.6.0",
-		"@storybook/theming": "^8.6.0",
+		"@storybook/addon-essentials": "^8.6.4",
+		"@storybook/addon-mdx-gfm": "^8.6.4",
+		"@storybook/addon-storysource": "^8.6.4",
+		"@storybook/blocks": "^8.6.4",
+		"@storybook/manager-api": "^8.6.4",
+		"@storybook/react": "^8.6.4",
+		"@storybook/react-vite": "^8.6.4",
+		"@storybook/theming": "^8.6.4",
 		"@tanstack/react-table": "^8.21.2",
-		"@types/node": "^22.13.5",
+		"@types/node": "^22.13.10",
 		"@types/react": "^19.0.10",
 		"@types/react-dom": "^19.0.4",
 		"@vitejs/plugin-react": "^4.3.4",
@@ -59,15 +58,16 @@
 		"postcss-nesting": "^13.0.1",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
-		"storybook": "^8.6.0",
-		"typescript": "^5.7.3",
-		"vite": "^6.2.0",
-		"vite-plugin-dts": "^4.5.0"
+		"storybook": "^8.6.4",
+		"typescript": "^5.8.2",
+		"vite": "^6.2.1",
+		"vite-plugin-dts": "^4.5.3"
 	},
 	"dependencies": {
-		"@u-elements/u-datalist": "0.1.3",
+		"@u-elements/u-datalist": "^0.1.3",
 		"@u-elements/u-details": "^0.1.0",
 		"@u-elements/u-tabs": "^0.0.8",
+		"@u-elements/u-tags": "^0.1.3",
 		"clsx": "^2.1.1"
 	}
 }

package/mtds/heading/heading.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"heading.js","sources":["../../designsystem/heading/heading.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type JSX, forwardRef } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type HeadingProps<As extends React.ElementType = \"h2\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{\n\t\t\t\"data-size\"?: \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n\t\t}\n\t>;\n\ntype HeadingComponent = <As extends React.ElementType = \"h2\">(\n\tprops: HeadingProps<As>,\n) => JSX.Element;\n\nexport const Heading: HeadingComponent = forwardRef<null>(function Heading<\n\tAs extends React.ElementType = \"h2\",\n>({ as, className, ...rest }: HeadingProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"h2\";\n\n\treturn (\n\t\t<Tag className={clsx(styles.heading, className)} ref={ref} {...rest} />\n\t);\n}) as HeadingComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Heading","forwardRef","as","className","rest","ref","jsx","clsx","styles"],"mappings":";;;;AAoBa,MAAAA,IAA4BC,EAAiB,SAExD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAK,GAAqBC,GAA0B;AAIxE,SAAA,gBAAAC,EAHWJ,KAAM,MAGZ,EAAA,WAAWK,EAAKC,EAAO,SAASL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAM,CAAA;AAEvE,CAAC;"}