@dbcdk/react-components 0.0.82 → 0.0.84

package/dist/components/__stories__/story-components/Flex.d.ts

@@ -0,0 +1,2 @@
+import type { JSX } from 'react';
+export declare function Flex(): JSX.Element;

package/dist/components/__stories__/story-components/Flex.js

@@ -0,0 +1,177 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyButton } from '../../../components/copy-button/CopyButton';
+import { Headline } from '../../../components/headline/Headline';
+import styles from './Flex.module.css';
+const BOXES = ['A', 'B', 'C'];
+const GROUPS = [
+    {
+        key: 'display',
+        title: 'Display',
+        description: (_jsxs(_Fragment, { children: ["Start med ", _jsx("code", { className: styles.code, children: "dbc-flex" }), " eller", ' ', _jsx("code", { className: styles.code, children: "dbc-inline-flex" }), " for at aktivere flex layout."] })),
+        helpers: [
+            { className: 'dbc-flex', description: 'Opretter en flex-container på blokniveau.' },
+            { className: 'dbc-inline-flex', description: 'Opretter en flex-container på inline-niveau.' },
+            {
+                className: 'dbc-flex-center',
+                description: 'Shortcut der både sætter display:flex og centrerer indhold vandret og lodret.',
+            },
+        ],
+    },
+    {
+        key: 'direction',
+        title: 'Retning',
+        description: 'Bestemmer om elementer lægges vandret eller lodret.',
+        helpers: [
+            { className: 'dbc-flex-row', description: 'Placerer elementer i en række.' },
+            { className: 'dbc-flex-column', description: 'Placerer elementer i en kolonne.' },
+        ],
+    },
+    {
+        key: 'wrap',
+        title: 'Wrap',
+        description: 'Styrer om elementer må bryde over på flere linjer.',
+        helpers: [
+            { className: 'dbc-flex-wrap', description: 'Tillader linjeskift når der ikke er plads.' },
+            { className: 'dbc-flex-nowrap', description: 'Holder alle elementer på samme linje.' },
+        ],
+    },
+    {
+        key: 'justify',
+        title: 'Justify',
+        description: 'Fordeler elementer langs hovedaksen.',
+        helpers: [
+            { className: 'dbc-justify-start', description: 'Pakker elementer mod starten.' },
+            { className: 'dbc-justify-center', description: 'Centrerer elementer.' },
+            { className: 'dbc-justify-end', description: 'Pakker elementer mod slutningen.' },
+            { className: 'dbc-justify-between', description: 'Lægger plads mellem elementerne.' },
+            { className: 'dbc-justify-around', description: 'Giver plads omkring hvert element.' },
+            { className: 'dbc-justify-evenly', description: 'Fordeler pladsen helt jævnt.' },
+        ],
+    },
+    {
+        key: 'items',
+        title: 'Align Items',
+        description: 'Justerer alle elementer på tværs af hovedaksen.',
+        helpers: [
+            { className: 'dbc-items-start', description: 'Justerer alle elementer mod starten.' },
+            { className: 'dbc-items-center', description: 'Centrerer alle elementer.' },
+            { className: 'dbc-items-end', description: 'Justerer alle elementer mod slutningen.' },
+            { className: 'dbc-items-stretch', description: 'Lader elementer strække sig i højden.' },
+        ],
+    },
+    {
+        key: 'self',
+        title: 'Align Self',
+        description: 'Overstyrer ét barns placering i forhold til resten af rækken.',
+        helpers: [
+            { className: 'dbc-self-start', description: 'Justerer det enkelte element mod starten.' },
+            { className: 'dbc-self-center', description: 'Centrerer det enkelte element.' },
+            { className: 'dbc-self-end', description: 'Justerer det enkelte element mod slutningen.' },
+            { className: 'dbc-self-stretch', description: 'Lader det enkelte element strække sig.' },
+        ],
+    },
+    {
+        key: 'gap',
+        title: 'Gap',
+        description: 'Bruger de samme spacing tokens som spacing-hjælperne.',
+        helpers: [
+            {
+                className: 'dbc-gap-xxs',
+                description: 'Mindste afstand. Brug til fx chips inde i en inputboks.',
+            },
+            {
+                className: 'dbc-gap-xs',
+                description: 'Meget tæt afstand. Brug til fx ikon + label eller label + inputfelt.',
+            },
+            {
+                className: 'dbc-gap-sm',
+                description: 'Standard tæt afstand. Brug til fx sideordnede knapper eller handlinger i en toolbar.',
+            },
+            {
+                className: 'dbc-gap-md',
+                description: 'Moderat afstand. Brug til elementer, der hører til samme sektion, men ikke direkte sammen.',
+            },
+            {
+                className: 'dbc-gap-lg',
+                description: 'Større afstand. Brug til adskillelse af logisk forskellige grupper inden for samme visning.',
+            },
+            {
+                className: 'dbc-gap-xl',
+                description: 'Størst afstand. Brug til overordnede layoutområder eller markante sektionsskift.',
+            },
+        ],
+    },
+    {
+        key: 'behavior',
+        title: 'Flex adfærd',
+        description: 'Styrer hvordan det enkelte barn vokser eller krymper.',
+        helpers: [
+            { className: 'dbc-flex-grow', description: 'Lader elementet tage ledig plads.' },
+            { className: 'dbc-flex-shrink', description: 'Tillader elementet at krympe.' },
+        ],
+    },
+];
+function HelperCode({ children }) {
+    return _jsx("code", { className: styles.code, children: children });
+}
+function DemoBoxes() {
+    return (_jsx(_Fragment, { children: BOXES.map((label, index) => (_jsx("div", { className: `${styles.demoBox} ${index === 1 ? styles.tallBox : ''}`, "data-label": label, children: label }, label))) }));
+}
+function DefaultPreview({ className, baseClassName = 'dbc-flex', }) {
+    return (_jsx("div", { className: `${styles.demoSurface} ${baseClassName} ${className}`, children: _jsx(DemoBoxes, {}) }));
+}
+function InlinePreview({ className }) {
+    return (_jsxs("div", { className: styles.inlineRow, children: [_jsx("span", { className: styles.inlineLabel, children: "F\u00F8r" }), _jsx("span", { className: `${styles.inlineSurface} ${className}`, children: _jsx(DemoBoxes, {}) }), _jsx("span", { className: styles.inlineLabel, children: "Efter" })] }));
+}
+function SelfPreview({ className }) {
+    return (_jsx("div", { className: `${styles.demoSurface} ${styles.tallSurface} dbc-flex dbc-gap-xs dbc-items-stretch`, children: BOXES.map((label, index) => (_jsx("div", { className: `${styles.demoBox} ${index === 1 ? className : ''}`, "data-label": label, children: label }, label))) }));
+}
+function FlexGrowPreview() {
+    return (_jsxs("div", { className: `${styles.demoSurface} ${styles.growSurface} dbc-flex dbc-gap-xs`, children: [_jsx("div", { className: styles.growSideBox, children: "A" }), _jsx("div", { className: `${styles.flexBehaviorBox} ${styles.growMainBox} dbc-flex-grow`, children: "B" }), _jsx("div", { className: styles.growSideBox, children: "C" })] }));
+}
+function FlexShrinkPreview() {
+    return (_jsxs("div", { className: `${styles.demoSurface} ${styles.shrinkSurface} dbc-flex dbc-gap-xs`, children: [_jsx("div", { className: styles.fixedBox, children: "A" }), _jsx("div", { className: `${styles.shrinkBox} dbc-flex-shrink`, children: "B" }), _jsx("div", { className: styles.fixedBox, children: "C" })] }));
+}
+function CenterPreview({ className }) {
+    return (_jsx("div", { className: `${styles.centerSurface} ${className}`, children: _jsx("div", { className: styles.demoBox, children: "Center" }) }));
+}
+function WrapPreview({ className }) {
+    return (_jsxs("div", { className: `${styles.demoSurface} ${styles.wrapSurface} dbc-flex dbc-gap-xs ${className}`, children: [_jsx("div", { className: styles.wideBox, children: "Alpha" }), _jsx("div", { className: styles.wideBox, children: "Beta" }), _jsx("div", { className: styles.wideBox, children: "Gamma" })] }));
+}
+function JustifyPreview({ className }) {
+    return (_jsx("div", { className: `${styles.demoSurface} dbc-flex ${className}`, children: _jsx(DemoBoxes, {}) }));
+}
+function ItemsPreview({ className }) {
+    return (_jsxs("div", { className: `${styles.demoSurface} ${styles.tallSurface} dbc-flex dbc-gap-xs ${className}`, children: [_jsx("div", { className: `${styles.demoBox} ${styles.shortBox}`, children: "A" }), _jsx("div", { className: `${styles.demoBox} ${styles.midBox}`, children: "B" }), _jsx("div", { className: `${styles.demoBox} ${styles.tallBox}`, children: "C" })] }));
+}
+function Preview({ className, groupKey }) {
+    if (className === 'dbc-inline-flex')
+        return _jsx(InlinePreview, { className: className });
+    if (className === 'dbc-flex-center')
+        return _jsx(CenterPreview, { className: className });
+    if (groupKey === 'wrap')
+        return _jsx(WrapPreview, { className: className });
+    if (groupKey === 'justify')
+        return _jsx(JustifyPreview, { className: className });
+    if (groupKey === 'items')
+        return _jsx(ItemsPreview, { className: className });
+    if (groupKey === 'self')
+        return _jsx(SelfPreview, { className: className });
+    if (className === 'dbc-flex-grow')
+        return _jsx(FlexGrowPreview, {});
+    if (className === 'dbc-flex-shrink')
+        return _jsx(FlexShrinkPreview, {});
+    if (groupKey === 'gap') {
+        return _jsx(DefaultPreview, { className: className, baseClassName: "dbc-flex" });
+    }
+    return _jsx(DefaultPreview, { className: className });
+}
+function HelperCard({ helper, groupKey }) {
+    return (_jsxs("article", { className: styles.card, children: [_jsxs("div", { className: styles.cardHeader, children: [_jsxs("div", { className: styles.classNameRow, children: [_jsx(HelperCode, { children: helper.className }), _jsx(CopyButton, { text: helper.className, variant: "inline", size: "sm" })] }), _jsx("p", { className: styles.cardDescription, children: helper.description })] }), _jsx(Preview, { className: helper.className, groupKey: groupKey })] }));
+}
+function Group({ group }) {
+    return (_jsxs("section", { className: styles.section, children: [_jsx(Headline, { marker: true, severity: "info", disableMargin: true, size: 2, children: group.title }), _jsx("p", { className: styles.paragraph, children: group.description }), _jsx("div", { className: styles.grid, children: group.helpers.map(helper => (_jsx(HelperCard, { helper: helper, groupKey: group.key }, helper.className))) })] }));
+}
+export function Flex() {
+    return (_jsxs("div", { className: styles.container, children: [_jsx("header", { className: styles.header, children: _jsx(Headline, { disableMargin: true, children: "Flex-hj\u00E6lpere" }) }), _jsxs("section", { className: styles.intro, children: [_jsx("h2", { className: styles.h2, children: "Baggrund" }), _jsx("p", { className: styles.paragraph, children: "Biblioteket stiller et s\u00E6t flex-hj\u00E6lpeklasser til r\u00E5dighed, s\u00E5 du kan sammens\u00E6tte layout direkte i markup uden at oprette lokale CSS-filer til trivielle regler. Form\u00E5l er bl.a.:" }), _jsxs("ul", { className: styles.list, children: [_jsx("li", { children: "At hj\u00E6lpe med at sikre konsistent layout p\u00E5 tv\u00E6rs af sider og DBC-apps." }), _jsxs("li", { children: ["Undg\u00E5 CSS-filer, der kun indeholder trivielle regler som", ' ', _jsx(HelperCode, { children: "display: flex" }), ", ", _jsx(HelperCode, { children: "gap" }), " eller", ' ', _jsx(HelperCode, { children: "align-items" }), "."] }), _jsx("li", { children: "Mindre boilerplate og f\u00E6rre one-off-overrides p\u00E5 tv\u00E6rs af features." }), _jsx("li", { children: "Et f\u00E6lles, dokumenteret sprog for layoutkomposition, der holder sig inden for design-systemet." }), _jsxs("li", { children: ["Semantiske afstandsrelationer \u2014 ", _jsx(HelperCode, { children: "dbc-gap-sm" }), " frem for r\u00E5 pixelv\u00E6rdier i feature-kode."] })] }), _jsx("p", { className: styles.paragraph, children: "CSS-moduler har stadig en vigtig plads til komponent-specifik eller kompleks styling \u2014 pointen er blot, at de ikke beh\u00F8ver v\u00E6re standardl\u00F8sningen til rutinelayout." }), _jsx("h2", { className: styles.h2, children: "Navngivningskonvention" }), _jsx("p", { className: styles.paragraph, children: "Flex-hj\u00E6lperne er sm\u00E5 utility-klasser, som kan kombineres direkte i markup." }), _jsx("div", { className: styles.example, children: _jsx(HelperCode, { children: "dbc-flex dbc-flex-row dbc-gap-sm dbc-items-center" }) }), _jsxs("ul", { className: styles.list, children: [_jsxs("li", { children: ["Brug ", _jsx(HelperCode, { children: "dbc-flex" }), " eller ", _jsx(HelperCode, { children: "dbc-inline-flex" }), ' ', "som base."] }), _jsx("li", { children: "Tilf\u00F8j derefter helpers for retning, justering, gap og evt. flex-adf\u00E6rd p\u00E5 b\u00F8rnene." }), _jsxs("li", { children: [_jsx(HelperCode, { children: "dbc-gap-*" }), " f\u00F8lger spacing tokens: ", _jsx(HelperCode, { children: "xxs" }), ",", ' ', _jsx(HelperCode, { children: "xs" }), ", ", _jsx(HelperCode, { children: "sm" }), ", ", _jsx(HelperCode, { children: "md" }), ",", ' ', _jsx(HelperCode, { children: "lg" }), " og ", _jsx(HelperCode, { children: "xl" }), "."] })] })] }), GROUPS.map(group => (_jsx(Group, { group: group }, group.title)))] }));
+}

package/dist/components/__stories__/story-components/Flex.module.css

@@ -0,0 +1,317 @@
+.container {
+  margin-inline: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 1.5rem;
+  color: var(--color-text);
+}
+
+.header {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.intro {
+  display: grid;
+  gap: 1rem;
+}
+
+.section {
+  display: grid;
+  gap: 1rem;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 1rem;
+}
+
+.card {
+  display: grid;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 0.75rem;
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xs);
+}
+
+.cardHeader {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.classNameRow {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  flex-wrap: wrap;
+}
+
+.cardDescription,
+.paragraph {
+  margin: 0;
+  color: var(--color-text-secondary, #374151);
+}
+
+.h2 {
+  margin: 0;
+  margin-top: 0.75rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: #27272a;
+}
+
+.h2:first-child {
+  margin-top: 0;
+}
+
+.example {
+  margin-top: 0.25rem;
+}
+
+.list {
+  margin: 0.25rem 0 0 1rem;
+  display: grid;
+  gap: 0.5rem;
+}
+
+.code {
+  border-radius: var(--border-radius-default);
+  background: var(--color-bg-default);
+  padding: 0 var(--spacing-xs);
+  line-height: 1.5;
+  font-size: 12px;
+  font-family: var(--font-family-mono, monospace);
+  color: var(--color-text-secondary);
+  box-shadow: var(--shadow-xs);
+}
+
+.demoSurface {
+  min-height: 88px;
+  width: 100%;
+  padding: 0.75rem;
+  border-radius: 0.75rem;
+  border: 1px dashed var(--color-border-strong, var(--color-border));
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.35), transparent),
+    repeating-linear-gradient(
+      90deg,
+      var(--color-bg-default) 0,
+      var(--color-bg-default) 24px,
+      transparent 24px,
+      transparent 48px
+    ),
+    var(--color-background);
+  background-size:
+    auto,
+    auto 100%,
+    auto;
+}
+
+.tallSurface {
+  min-height: 140px;
+}
+
+.centerSurface {
+  min-height: 120px;
+  padding: 0.75rem;
+  border-radius: 0.75rem;
+  border: 1px dashed var(--color-border-strong, var(--color-border));
+  background:
+    radial-gradient(circle at center, var(--color-bg-info) 0, transparent 70%),
+    repeating-linear-gradient(
+      90deg,
+      var(--color-bg-default) 0,
+      var(--color-bg-default) 24px,
+      transparent 24px,
+      transparent 48px
+    ),
+    var(--color-background);
+}
+
+.inlineRow {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.inlineSurface {
+  padding: 0.5rem;
+  border-radius: 0.75rem;
+  border: 1px dashed var(--color-border-strong, var(--color-border));
+  background:
+    repeating-linear-gradient(
+      90deg,
+      var(--color-bg-default) 0,
+      var(--color-bg-default) 24px,
+      transparent 24px,
+      transparent 48px
+    ),
+    var(--color-background);
+}
+
+.inlineLabel {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary, #374151);
+}
+
+.demoBox,
+.fixedBox,
+.flexBehaviorBox {
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.625rem;
+  background: var(--color-status-info-bg, var(--color-bg-selected));
+  color: var(--color-fg-default);
+  border: 1px solid var(--color-status-info-border, var(--color-border-selected));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  position: relative;
+  z-index: 1;
+}
+
+.tallBox {
+  min-height: 3.75rem;
+}
+
+.fixedBox {
+  width: 4.5rem;
+  flex: none;
+  background: var(--color-status-warning-bg, var(--opac-bg-default));
+  border-color: var(--color-status-warning-border, var(--color-border-default));
+}
+
+.flexBehaviorBox {
+  width: 4.5rem;
+  min-width: 0;
+  background: var(--color-bg-selected, var(--opac-bg-default));
+  border-color: var(--color-border-selected, var(--color-border-default));
+}
+
+.fixedBehaviorBox {
+  width: 4rem;
+  flex: none;
+  min-height: 2.75rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.625rem;
+  background: var(--color-status-warning-bg, var(--opac-bg-default));
+  color: var(--color-fg-default);
+  border: 1px solid var(--color-status-warning-border, var(--color-border-default));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  position: relative;
+  z-index: 1;
+}
+
+.growSurface {
+  max-width: 320px;
+}
+
+.shrinkSurface {
+  max-width: 208px;
+}
+
+.growSideBox {
+  width: 3rem;
+  flex: none;
+  min-height: 2.75rem;
+  padding: 0.5rem;
+  border-radius: 0.625rem;
+  background: var(--color-status-warning-bg, var(--opac-bg-default));
+  color: var(--color-fg-default);
+  border: 1px solid var(--color-status-warning-border, var(--color-border-default));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  position: relative;
+  z-index: 1;
+}
+
+.growMainBox {
+  width: 4rem;
+  min-width: 4rem;
+}
+
+.shrinkBox {
+  width: 8rem;
+  min-width: 0;
+  min-height: 2.75rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.625rem;
+  background: var(--color-bg-selected, var(--opac-bg-default));
+  color: var(--color-fg-default);
+  border: 1px solid var(--color-border-selected, var(--color-border-default));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  position: relative;
+  z-index: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.wrapSurface {
+  max-width: 220px;
+}
+
+.wideBox {
+  min-width: 5rem;
+  min-height: 2.75rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.625rem;
+  background: var(--color-status-info-bg, var(--color-bg-selected));
+  color: var(--color-fg-default);
+  border: 1px solid var(--color-status-info-border, var(--color-border-selected));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  position: relative;
+  z-index: 1;
+}
+
+.shortBox,
+.midBox {
+  min-width: 2.75rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.625rem;
+  background: var(--color-status-info-bg, var(--color-bg-selected));
+  color: var(--color-fg-default);
+  border: 1px solid var(--color-status-info-border, var(--color-border-selected));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  position: relative;
+  z-index: 1;
+}
+
+.shortBox {
+  min-height: 2.25rem;
+}
+
+.midBox {
+  min-height: 3.25rem;
+}
+
+@media (max-width: 640px) {
+  .container {
+    padding: 1rem;
+  }
+
+  .card {
+    padding: 0.875rem;
+  }
+}

package/dist/components/forms/input/Input.d.ts

@@ -16,6 +16,7 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size
     buttonIcon?: React.ReactNode;
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+    tooltipOpenOnFocus?: boolean;
     modified?: boolean;
     /**
      * Custom content to render inside the input field, before the input element (e.g. chips)

package/dist/components/forms/input/Input.js

@@ -18,7 +18,7 @@ function mergeRefs(...refs) {
         }
     };
 }
-export const Input = forwardRef(function Input({ label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = false, required, tooltip, tooltipPlacement = 'right', modified = false, icon, autoFocus, minWidth, width, maxWidth, inputSize = 'md', variant = 'outlined', onClear, onButtonClick, buttonLabel, buttonIcon, id, style, className, fieldClassName, inputClassName, startAdornment, endAdornment, ...inputProps }, ref) {
+export const Input = forwardRef(function Input({ label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = false, required, tooltip, tooltipPlacement = 'right', modified = false, icon, autoFocus, minWidth, width, maxWidth, inputSize = 'md', variant = 'outlined', onClear, onButtonClick, buttonLabel, buttonIcon, id, tooltipOpenOnFocus = true, style, className, fieldClassName, inputClassName, startAdornment, endAdornment, ...inputProps }, ref) {
     const inputRef = useRef(null);
     const reactId = useId();
     const inputId = id !== null && id !== void 0 ? id : `input-${reactId}`;
@@ -43,6 +43,8 @@ export const Input = forwardRef(function Input({ label, error, helpText, orienta
         content: tooltip,
         placement: tooltipPlacement,
         offset: 8,
+        delayOpenMs: 0,
+        focusOpenMode: tooltipOpenOnFocus ? 'any' : 'focus-visible',
     });
     const trailingButtonVariant = variant === 'outlined' || variant === 'standalone' ? 'outlined' : 'default';
     return (_jsx(InputContainer, { label: label, htmlFor: inputId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: _jsxs("div", { style: rootStyle, className: [

package/dist/components/forms/input/Input.module.css

@@ -191,7 +191,11 @@
 
 .modified {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
-  border-color: color-mix(in srgb, var(--color-status-warning-border) 45%, var(--color-border-default));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 45%,
+    var(--color-border-default)
+  );
   border-left-color: var(--color-status-warning-border);
   border-left-width: 4px;
 }
@@ -199,14 +203,22 @@
 /* Hover should stay warm, not switch back to the normal border */
 .modified:hover:not([aria-disabled='true']) {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(in srgb, var(--color-status-warning-border) 60%, var(--color-border-default));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 60%,
+    var(--color-border-default)
+  );
   border-left-color: var(--color-status-warning-border);
 }
 
 /* Focus should also stay warm and readable */
 .modified:focus-within:not([aria-disabled='true']) {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(in srgb, var(--color-status-warning-border) 75%, var(--color-border-default));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 75%,
+    var(--color-border-default)
+  );
   border-left-color: var(--color-status-warning-border);
   box-shadow: inset 0 0 0 1px
     color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
@@ -235,11 +247,19 @@
 }
 
 .subtle.modified:hover:not([aria-disabled='true']) {
-  background-color: color-mix(in srgb, var(--color-status-warning-bg) 36%, var(--color-bg-toolbar-hover));
+  background-color: color-mix(
+    in srgb,
+    var(--color-status-warning-bg) 36%,
+    var(--color-bg-toolbar-hover)
+  );
 }
 
 .subtle.modified:focus-within:not([aria-disabled='true']) {
-  border-color: color-mix(in srgb, var(--color-status-warning-border) 75%, var(--color-border-default));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 75%,
+    var(--color-border-default)
+  );
   border-left-color: var(--color-status-warning-border);
   box-shadow: inset 0 0 0 1px
     color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));

package/dist/components/forms/select/Select.module.css

@@ -1,19 +1,32 @@
 .triggerModified {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
-  border-color: color-mix(in srgb, var(--color-status-warning-border) 45%, var(--color-border-default));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 45%,
+    var(--color-border-default)
+  );
   border-left-color: var(--color-status-warning-border);
   border-left-width: 4px;
 }
 
 .triggerModified:hover:not([disabled]) {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(in srgb, var(--color-status-warning-border) 60%, var(--color-border-default));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 60%,
+    var(--color-border-default)
+  );
   border-left-color: var(--color-status-warning-border);
 }
 
 .triggerModified:focus-visible {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(in srgb, var(--color-status-warning-border) 75%, var(--color-border-default));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 75%,
+    var(--color-border-default)
+  );
   border-left-color: var(--color-status-warning-border);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
+  box-shadow: inset 0 0 0 1px
+    color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));
 }

package/dist/components/forms/text-area/Textarea.js

@@ -38,6 +38,8 @@ className, ...rest }) {
         content: tooltipEnabled ? tooltip : null,
         placement: tooltipPlacement,
         offset: 8,
+        delayOpenMs: 0,
+        focusOpenMode: 'any',
     });
     return (_jsx(InputContainer, { modified: modified, label: label, htmlFor: textareaId, error: error, helpText: helpText, helpTextAddition: showCount ? `${value === null || value === void 0 ? void 0 : value.length} tegn i denne boks` : undefined, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: _jsx("div", { className: [styles.container, modified ? styles.modified : ''].filter(Boolean).join(' '), children: _jsx("div", { ...(tooltipEnabled ? triggerProps : {}), children: inputField }) }) }));
 };

package/dist/components/forms/text-area/Textarea.module.css

@@ -4,20 +4,32 @@
 
 .container.modified textarea {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 22%, var(--color-bg-surface));
-  border-color: color-mix(in srgb, var(--color-status-warning-border) 45%, var(--color-border-default));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 45%,
+    var(--color-border-default)
+  );
   border-left-color: var(--color-status-warning-border);
   border-left-width: 4px;
 }
 
 .container.modified textarea:hover {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(in srgb, var(--color-status-warning-border) 60%, var(--color-border-default));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 60%,
+    var(--color-border-default)
+  );
   border-left-color: var(--color-status-warning-border);
 }
 
 .container.modified textarea:focus-visible {
   background-color: color-mix(in srgb, var(--color-status-warning-bg) 28%, var(--color-bg-surface));
-  border-color: color-mix(in srgb, var(--color-status-warning-border) 75%, var(--color-border-default));
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 75%,
+    var(--color-border-default)
+  );
   border-left-color: var(--color-status-warning-border);
   box-shadow: inset 0 0 0 1px
     color-mix(in srgb, var(--color-status-warning-border) 55%, var(--color-border-default));

package/dist/components/json-viewer/JsonViewer.module.css

@@ -7,7 +7,11 @@
   --json-pane-subtle: color-mix(in oklab, var(--color-fg-inverse) 44%, transparent);
   --json-pane-hover: color-mix(in oklab, var(--color-fg-inverse) 8%, transparent);
   --json-pane-selected: color-mix(in oklab, var(--color-brand) 24%, transparent);
-  --json-pane-highlight: color-mix(in oklab, var(--color-brand) 68%, var(--color-syntax-accent) 32%);
+  --json-pane-highlight: color-mix(
+    in oklab,
+    var(--color-brand) 68%,
+    var(--color-syntax-accent) 32%
+  );
   --color-highlight-bg: color-mix(in oklab, var(--json-pane-highlight) 58%, transparent);
   --color-highlight-fg: var(--color-fg-inverse);
   --json-pane-key: color-mix(in oklab, var(--color-fg-inverse) 88%, var(--color-syntax-accent) 12%);

package/dist/components/overlay/tooltip/useTooltipTrigger.d.ts

@@ -9,6 +9,7 @@ type UseTooltipOptions = {
     defaultOpen?: boolean;
     delayOpenMs?: number;
     delayCloseMs?: number;
+    focusOpenMode?: 'focus-visible' | 'any' | 'off';
 };
 export declare function useTooltipTrigger(options: UseTooltipOptions): {
     id: string;

package/dist/components/overlay/tooltip/useTooltipTrigger.js

@@ -5,7 +5,7 @@ export function useTooltipTrigger(options) {
     const ctx = useContext(TooltipContext);
     if (!ctx)
         throw new Error('useTooltipTrigger must be used within <TooltipProvider>.');
-    const { content, placement = 'top', offset = 8, open, defaultOpen = false, delayOpenMs = 150, delayCloseMs = 50, } = options;
+    const { content, placement = 'top', offset = 8, open, defaultOpen = false, delayOpenMs = 150, delayCloseMs = 50, focusOpenMode = 'focus-visible', } = options;
     const id = useId();
     const triggerElRef = useRef(null);
     const isControlled = open !== undefined;
@@ -88,8 +88,11 @@ export function useTooltipTrigger(options) {
     };
     const onFocus = (e) => {
         clearTimers();
-        // Only show for keyboard focus — skip pointer clicks and programmatic focus returns (e.g. from modal close)
-        if (!isControlled && e.currentTarget.matches(':focus-visible'))
+        if (focusOpenMode === 'off')
+            return;
+        const shouldOpen = focusOpenMode === 'any' || e.currentTarget.matches(':focus-visible');
+        // By default we only show for keyboard focus. Callers can opt into opening on any focus.
+        if (!isControlled && shouldOpen)
             setTimeout(() => {
                 setOpen(true);
             }, MOTION_MS.tooltipOpen);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.82",
+  "version": "0.0.84",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",