dibk-designsystemet 1.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/base.css","../src/overrides.css","../src/components/Logo/Logo.css","../src/components/Header/Header.css","../src/components/Search/Search.css","../src/components/MegaMenu/MegaMenu.css","../src/components/IconLinkList/IconLinkList.css","../src/components/MenuSection/MenuSection.css","../src/components/Footer/Footer.css","../src/components/SectionHeader/SectionHeader.css","../src/components/FeedbackWidget/FeedbackWidget.css","../src/components/AppShell/AppShell.css","../src/components/AccountMenu/AccountMenu.css","../src/components/CopyButton/CopyButton.css","../src/components/CodeBlock/CodeBlock.css"],"sourcesContent":["/* DIBK brand tokens that are NOT derivable from the Designsystemet accent: the\n pale surface fills and the brand ink. Single source of truth - components and\n overrides reference these custom properties, never the raw hex. (The navy\n accent, by contrast, comes from the generated theme as\n --ds-color-accent-base-default.) */\n:root {\n --dibk-color-ink: #202020;\n /* Warm grey for meta text (dates, counts, secondary labels). */\n --dibk-color-meta: #6b6560;\n /* Subtle warm-grey divider/border. */\n --dibk-color-hairline: #d7d4d1;\n /* Hover/focus ring on the search widget. */\n --dibk-color-ring: #4899e0;\n --dibk-surface-blue: #ebf4fa;\n --dibk-surface-blue-hover: #dceaf5;\n --dibk-surface-green: #f1fae3;\n --dibk-surface-orange: #faf0de;\n --dibk-surface-grey: #f4f4f4;\n --dibk-surface-pink: #f5f0f0;\n\n /* DIBK info-circle glyph: the brand \"i\" (a navy disc with a stylised white \"i\").\n Two-tone, so it's a full-colour image meant for background-image (not a\n single-colour mask). Reusable: the Alert info override references it, and\n anything else can too. */\n --dibk-icon-info: url(\"data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2060%2060%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%2730%27%20r%3D%2719%27%20fill%3D%27white%27/%3E%3Cpath%20d%3D%27M30%200C13.4325%200%200%2013.4325%200%2030C0%2046.5675%2013.4325%2060%2030%2060C46.5675%2060%2060%2046.5675%2060%2030C60%2013.4325%2046.5675%200%2030%200ZM24.9175%2040.025C26.3275%2035.5525%2028.9975%2030.195%2029.47%2028.84C30.1525%2026.8725%2028.9425%2026%2025.12%2029.3625L24.27%2027.7625C28.63%2023.02%2037.6075%2021.9475%2034.5525%2029.295C32.645%2033.8825%2031.28%2036.98%2030.5%2039.37C29.3625%2042.8525%2032.235%2041.44%2035.0475%2038.8425C35.43%2039.4675%2035.555%2039.67%2035.9375%2040.39C29.6925%2046.335%2022.76%2046.86%2024.9175%2040.025ZM36.7725%2019.6025C35.4425%2020.735%2033.4725%2020.71%2032.37%2019.5475C31.2675%2018.385%2031.4525%2016.5275%2032.78%2015.395C34.11%2014.2625%2036.08%2014.29%2037.1825%2015.45C38.28%2016.615%2038.1%2018.4725%2036.7725%2019.6025Z%27%20fill%3D%27%23003045%27/%3E%3C/svg%3E\");\n\n /* Page container: the single source of truth for content width + side gutters.\n DibkHeader, DibkFooter and DibkAppShell's content all reference these, so the\n header bar, page content and footer line up edge-to-edge. */\n --dibk-container-max: 1400px;\n /* Side gutter, fluid: tracks viewport width so the same token gives roomy\n gutters on desktop and tight ones on phones. Header, content and footer all\n read it, so all three keep aligned edges at every width. clamp keys off vw,\n which is correct here because the container is the top-level page frame and\n is never nested; a nested container would want a container query instead. */\n --dibk-container-pad: clamp(1.25rem, 6vw, 6rem);\n}\n\n/* DIBK base: applies the brand font and body ink to the page. Designsystemet only\n sets the font on its own components, so without this an app's plain text falls\n back to the browser serif. :where() keeps specificity at 0 so apps can override. */\n:where(body) {\n margin: 0;\n font-family: var(--ds-font-family, system-ui, sans-serif);\n color: var(--ds-color-neutral-text-default, #202020);\n}\n\n/* Visually hidden, still read by screen readers (for text accompanying\n purely visual glyphs like the login padlock). */\n.dibk-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n","/* DIBK tailoring of Designsystemet components. These rules are intentionally\n unlayered so they win over Designsystemet's @layer ds styles without needing\n high specificity. Keep this list small and justified. */\n\n/* Global weight reduction (one notch down). Designsystemet components and our own\n read these tokens, so this is the single lever for \"lighter everywhere\". Tuned for\n Poppins, which renders heavier than most fonts at a given numeric weight. */\n:root {\n --ds-font-weight-regular: 300;\n --ds-font-weight-medium: 400;\n --ds-font-weight-semibold: 500;\n}\n\n/* Bold text has no Designsystemet weight token; remap the element defaults to the\n same one-notch-down reduction (browser bold is 700). */\nstrong,\nb {\n font-weight: 600;\n}\n\n/* Page titles are 32px; Designsystemet's heading-lg is 2.25rem, DIBK's is 2rem.\n Fixed value, so it does not scale with DS density size-modes -\n acceptable since headings never sit in data-size regions in DIBK apps. The theme\n declares the token on `:root, [data-size]`, and Heading carries data-size on the\n element itself, so the override must match [data-size] too or the element-level\n declaration wins. */\n:root,\n[data-size] {\n --ds-heading-lg-font-size: 2rem;\n}\n\n/* Tighter tracking. Designsystemet has no single letter-spacing token, so we remap\n the per-size ones. Poppins is a touch wide/airy at brand sizes; this tightens it.\n The body value is kept milder than the headings for legibility at reading sizes. */\n:root {\n --ds-body-xs-letter-spacing: -0.01em;\n --ds-body-sm-letter-spacing: -0.01em;\n --ds-body-md-letter-spacing: -0.01em;\n --ds-body-lg-letter-spacing: -0.01em;\n --ds-body-xl-letter-spacing: -0.01em;\n --ds-body-long-xs-letter-spacing: -0.01em;\n --ds-body-long-sm-letter-spacing: -0.01em;\n --ds-body-long-md-letter-spacing: -0.01em;\n --ds-body-long-lg-letter-spacing: -0.01em;\n --ds-body-long-xl-letter-spacing: -0.01em;\n --ds-body-short-xs-letter-spacing: -0.01em;\n --ds-body-short-sm-letter-spacing: -0.01em;\n --ds-body-short-md-letter-spacing: -0.01em;\n --ds-body-short-lg-letter-spacing: -0.01em;\n --ds-body-short-xl-letter-spacing: -0.01em;\n --ds-heading-2xs-letter-spacing: -0.037em;\n --ds-heading-xs-letter-spacing: -0.037em;\n --ds-heading-sm-letter-spacing: -0.037em;\n --ds-heading-md-letter-spacing: -0.037em;\n --ds-heading-lg-letter-spacing: -0.037em;\n --ds-heading-xl-letter-spacing: -0.037em;\n --ds-heading-2xl-letter-spacing: -0.037em;\n}\n\n/* DIBK callouts are flat pale panels - no border (Designsystemet Alert adds a\n colored 1px border). The pale fill + square corners come from the theme. */\n.ds-alert {\n border: none;\n}\n/* DIBK info callouts use the brand info-circle (navy disc + white \"i\"), not\n Designsystemet's flat monochrome square-\"i\". It's two-tone, so it can't come\n from DS's single-color mask: render the --dibk-icon-info image as a background\n and switch the mask off. The selector mirrors DS's own icon pseudo, plus\n [data-color=info] so it wins on specificity (and unlayered, so it beats @layer\n ds). */\n.ds-alert[data-color=\"info\"]:not(:has(> :is(h1, h2, h3, h4, h5, h6):first-child))::before,\n.ds-alert[data-color=\"info\"] > :is(h1, h2, h3, h4, h5, h6):first-child::before {\n background: center / contain no-repeat var(--dibk-icon-info);\n -webkit-mask: none;\n mask: none;\n}\n\n/* DIBK cards are flat colored panels with NO border. There is no bordered\n \"default\" card - every card is a flat panel.\n The background is chosen with `data-dibk-color` (white when omitted). We use a\n dedicated attribute rather than Designsystemet's `data-color` on purpose:\n `data-color` would re-map the whole color family for the card's contents, turning\n buttons and headings blue/green. DIBK keeps those navy, so we colour only the\n background. Usage:\n <Card>…</Card> // white\n <Card data-dibk-color=\"blue\">…</Card>\n <Card data-dibk-color=\"green\">…</Card>\n <Card data-dibk-color=\"orange\">…</Card>\n <Card data-dibk-color=\"grey\">…</Card>\n <Card data-dibk-color=\"pink\">…</Card> */\n.ds-card {\n --dsc-card-border-width: 0;\n --dsc-card-block-border-width: 0;\n background: #fff; /* white (default) */\n}\n.ds-card[data-dibk-color=\"blue\"] {\n background: var(--dibk-surface-blue);\n}\n.ds-card[data-dibk-color=\"green\"] {\n background: var(--dibk-surface-green);\n}\n.ds-card[data-dibk-color=\"orange\"] {\n background: var(--dibk-surface-orange);\n}\n.ds-card[data-dibk-color=\"grey\"] {\n background: var(--dibk-surface-grey);\n}\n.ds-card[data-dibk-color=\"pink\"] {\n background: var(--dibk-surface-pink);\n}\n\n/* DIBK accordion (Details): flat pale-blue panels, navy bold header, chevron on the\n RIGHT, a gap between items, no border. Designsystemet defaults to white panels\n with hairline rules and the chevron on the left. */\n.ds-details {\n --dsc-details-background: var(--dibk-surface-blue);\n --dsc-details-summary-background: var(--dibk-surface-blue);\n --dsc-details-summary-background--hover: var(--dibk-surface-blue-hover);\n --dsc-details-summary-background--open: var(--dibk-surface-blue);\n --dsc-details-summary-color: var(--ds-color-accent-base-default, #003045);\n --dsc-details-padding: var(--ds-size-4) var(--ds-size-5);\n border: none;\n}\n/* DS collapses adjacent items; DIBK shows a gap between them. */\n.ds-details + .ds-details {\n margin-top: 0.5rem;\n}\n.ds-details > :is(summary, u-summary) {\n justify-content: space-between;\n font-weight: var(--ds-font-weight-semibold);\n}\n/* Move the chevron from the left (default) to the right, and animate its rotate so\n it turns smoothly with the panel instead of snapping (DS rotates it 180deg on\n open but sets no transition). */\n.ds-details > :is(summary, u-summary)::before {\n order: 1;\n transition: rotate 0.2s ease;\n}\n/* Quicker, subtler panel expand/contract than DS's 0.4s default (the chevron\n turn above matches it). */\n.ds-details::details-content,\n.ds-details::part(details-content) {\n transition-duration: 0.2s;\n}\n/* Browsers without `interpolate-size` (Firefox) can't animate height to auto,\n so DS's transition above snaps there. Give them the same motion by animating\n the content grid row 0fr -> 1fr instead, which interpolates wherever\n ::details-content exists. Assumes a single content element after the summary\n (what Details.Content renders). Chromium/Safari keep the native height path. */\n@supports not (interpolate-size: allow-keywords) {\n /* minmax(0, …) rather than bare fr: a bare fr track is minmax(auto, fr), and\n the auto minimum floors the track at the content's margins mid-transition. */\n .ds-details::details-content {\n block-size: auto;\n display: grid;\n grid-template-rows: minmax(0, 0fr);\n transition:\n content-visibility 0.2s allow-discrete,\n grid-template-rows 0.2s;\n }\n .ds-details[open]::details-content {\n grid-template-rows: minmax(0, 1fr);\n }\n /* The row can only collapse if its item may shrink below its content size. */\n .ds-details > :not(summary, u-summary) {\n min-block-size: 0;\n }\n}\n\n/* DIBK buttons: square, weight 500, a navy border on both fill and outline\n variants, and the signature hover INVERT (primary navy<->white, secondary\n transparent<->navy). DS drives its\n hover off --dsc-button-* custom properties, so we remap those rather than fight\n state selectors - no !important, no specificity escalation. */\n.ds-button {\n font-weight: var(--ds-font-weight-semibold); /* 500 in the DIBK weight remap */\n transition: background-color 0.2s, color 0.2s, border-color 0.2s;\n}\n.ds-button[data-variant=\"primary\"] {\n --dsc-button-border-color: var(--ds-color-accent-base-default);\n --dsc-button-background--hover: var(--ds-color-accent-base-contrast-default);\n --dsc-button-color--hover: var(--ds-color-accent-base-default);\n}\n.ds-button[data-variant=\"secondary\"] {\n --dsc-button-border-color: var(--ds-color-accent-base-default);\n --dsc-button-color: var(--ds-color-accent-base-default);\n --dsc-button-background--hover: var(--ds-color-accent-base-default);\n --dsc-button-color--hover: var(--ds-color-accent-base-contrast-default);\n}\n.ds-button[data-variant=\"tertiary\"] {\n --dsc-button-color: var(--ds-color-accent-base-default);\n}\n\n/* Pagination buttons are tertiary `.ds-button`s, so the tertiary color override\n leaks navy text onto the ACTIVE page (DS fills it navy via aria-current) ->\n navy-on-navy, invisible - the same trap as the toggle group below. Re-assert\n the contrast colour for the current page (wins over the tertiary rule by\n specificity, and over @layer ds by being unlayered). */\n.ds-pagination .ds-button[aria-current=\"true\"] {\n --dsc-button-color: var(--ds-color-accent-base-contrast-default);\n}\n/* On phones, compact the pagination so 5 pages + ellipsis + prev/next clear a\n narrow column without wrapping: tighter inter-button gap, narrower buttons\n (height/tap target unchanged), and the DS ellipsis cell trimmed from its\n reserved --ds-size-12 (~3rem) to match. Apps that also want to drop the\n prev/next TEXT on phones hide their own label span (the chevrons and\n aria-labels are the DS's and remain). */\n@media (max-width: 36rem) {\n .ds-pagination {\n --dsc-pagination-gap: 0.125rem;\n }\n .ds-pagination .ds-button {\n min-inline-size: 2.25rem;\n --dsc-button-padding-inline: 0.25rem;\n }\n .ds-pagination li:empty::before {\n min-inline-size: 1.5rem;\n }\n}\n\n/* ToggleGroup items are internally tertiary `.ds-button`s, so the tertiary\n color override above leaks into them: it forces navy text on the ACTIVE item\n (which has a navy fill) -> navy-on-navy, invisible, and overrides the muted\n color DS gives inactive items. Re-assert DS's own toggle-group text colors\n (these win over the tertiary rule by specificity, and over @layer ds by being\n unlayered): muted for inactive, base-contrast for the checked item. */\n:is(.ds-toggle-group, .ds-togglegroup) label {\n --dsc-button-color: var(--ds-color-text-subtle);\n}\n:is(.ds-toggle-group, .ds-togglegroup) label:has(input:checked) {\n --dsc-button-color: var(--ds-color-base-contrast-default);\n}\n/* A disabled toggle item keeps the normal pointer. DS sets `cursor: not-allowed`,\n which some Linux cursor themes render as an empty glyph (the pointer appears to\n vanish on hover). The 30% dim already signals the disabled state. */\n:is(.ds-toggle-group, .ds-togglegroup) label[aria-disabled=\"true\"] {\n cursor: default;\n}\n/* Same empty-glyph problem on disabled fields (e.g. the faceted filter's\n zero-count checkboxes). DS dims them and sets `cursor: not-allowed` on every\n child; keep the dim, drop the vanishing cursor. */\n.ds-field:has(:disabled:not(option), [aria-disabled=\"true\"]) > * {\n cursor: default;\n}\n\n/* Tabs: the DIBK active state is navy + semibold (same language as the subnav\n and mega-menu), not DS's neutral. The underline indicator inherits the\n selected color via DS's own ::after rule, so remapping the token is enough. */\n.ds-tabs {\n --dsc-tabs-tab-color--selected: var(--ds-color-accent-base-default);\n}\n.ds-tabs [role=\"tab\"][aria-selected=\"true\"] {\n font-weight: var(--ds-font-weight-semibold);\n}\n",".dibk-logo {\n display: block;\n color: var(--ds-color-accent-base-default, #003045);\n}\n\n/* Full lockup: aspect ratio ~490:106. Height drives the size. */\n.dibk-logo--full {\n height: 38px;\n width: auto;\n}\n\n.dibk-logo--mark {\n height: 48px;\n width: auto;\n}\n",".dibk-header {\n width: 100%;\n background: var(--dibk-surface-blue, #ebf4fa);\n color: var(--ds-color-accent-base-default, #003045);\n}\n\n.dibk-header__inner {\n display: flex;\n align-items: center;\n gap: 24px;\n box-sizing: border-box;\n min-height: 72px;\n max-width: var(--dibk-container-max, 1400px);\n margin: 0 auto;\n padding: 12px var(--dibk-container-pad, 2rem);\n}\n\n.dibk-header__brand {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n color: inherit;\n}\n\n.dibk-header__actions {\n display: flex;\n align-items: center;\n gap: 32px;\n margin-left: auto;\n}\n\n/* Shortcuts reuse the flat .dibk-header__btn look (matching Søk/Meny); as links\n they'd carry a default underline, so suppress it (hover underline still\n applies via .dibk-header__btn:hover). They also live in the menu, so collapse\n them when space is tight. */\n.dibk-header__shortcut {\n text-decoration: none;\n}\n\n/* Both logo lockups render in the brand link; the full wordmark shows by default\n and the roofline mark stays hidden until tier 2 swaps them. Two-class selectors\n throughout so these beat the base .dibk-logo / .dibk-header__btn display rules\n regardless of stylesheet order. */\n.dibk-logo.dibk-header__logo--mark {\n display: none;\n}\n\n/* The header collapses in two tiers as width drops. The breakpoints are literal\n rem values (custom properties can't be used in @media conditions); treat these\n two as the header's documented collapse scale. The brand mark always stays in\n the bar - the title truncates with an ellipsis rather than the logo being\n dropped for room.\n\n Tier 1 (<= 72rem): drop the shortcut links first - they duplicate menu entries,\n and the full lockup + title + shortcuts + toggle stop fitting around here. */\n@media (max-width: 72rem) {\n .dibk-header__shortcut.dibk-header__btn {\n display: none;\n }\n}\n\n/* Tier 2 (<= 48rem): compact brand + toggles - the full wordmark gives way to the\n roofline mark so the app title beside it has room, and the menu/search toggles\n drop their text label to the icon alone (the buttons keep an aria-label). */\n@media (max-width: 48rem) {\n .dibk-logo.dibk-header__logo--full {\n display: none;\n }\n .dibk-logo.dibk-header__logo--mark {\n display: block;\n height: 36px;\n }\n .dibk-header__btn-label {\n display: none;\n }\n}\n\n/* The toggles are Designsystemet tertiary Buttons; these rules strip DS's button\n chrome back to a flat DIBK text+icon toggle (unlayered, so they win over\n @layer ds). */\n.dibk-header__btn {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n min-block-size: auto;\n padding: 0;\n border: 0;\n border-radius: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n font-size: 1.125rem; /* 18px */\n font-weight: var(--ds-font-weight-medium);\n /* DS Button resets tracking to normal; restore the DIBK body tightening. */\n letter-spacing: -0.01em;\n cursor: pointer;\n}\n\n.dibk-header__btn:hover {\n background: transparent;\n text-decoration: underline;\n}\n\n.dibk-header__btn:focus-visible {\n outline: 2px solid var(--ds-color-accent-base-default, #003045);\n outline-offset: 4px;\n}\n\n/* Lukk X glyph (the toggle's open state): 24x24, 2px bars at +/-45deg; the\n whole glyph spins half a turn on hover, 300ms. */\n.dibk-xglyph {\n position: relative;\n display: block;\n width: 24px;\n height: 24px;\n transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.dibk-xglyph__bar {\n position: absolute;\n top: calc(50% - 1px);\n left: 0;\n display: block;\n width: 100%;\n height: 2px;\n background: currentColor;\n}\n\n.dibk-xglyph__bar--a {\n transform: rotate(45deg);\n}\n\n.dibk-xglyph__bar--b {\n transform: rotate(-45deg);\n}\n\n.dibk-header__btn:hover .dibk-xglyph {\n transform: rotate(180deg);\n}\n\n/* Meny burger: on hover the outer bars travel through the centre bar and swap\n places (300ms; 12px = the top-to-bottom bar distance). */\n.dibk-burger {\n display: block;\n}\n\n.dibk-burger__bar--top,\n.dibk-burger__bar--bottom {\n transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.dibk-header__btn:hover .dibk-burger__bar--top {\n transform: translateY(12px);\n}\n\n.dibk-header__btn:hover .dibk-burger__bar--bottom {\n transform: translateY(-12px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .dibk-burger__bar--top,\n .dibk-burger__bar--bottom,\n .dibk-xglyph {\n transition: none;\n }\n}\n","/* DIBK search widget: a transparent padded panel\n that turns white with a 3px ring on hover/focus (220ms); inside it a flat,\n underline-only field with an inline magnifier, and an optional hint line.\n The field is a Designsystemet Search (grid + Search.Input + Search.Clear +\n Search.Button); the rules below strip DS's box chrome. Scoped to the DIBK\n class and unlayered, so they win over @layer ds without !important. */\n\n.dibk-search {\n display: block;\n padding: var(--ds-size-4) var(--ds-size-5);\n transition:\n background-color 220ms ease,\n box-shadow 220ms ease;\n}\n\n.dibk-search:hover,\n.dibk-search:focus-within {\n background: var(--ds-color-neutral-background-default, #fff);\n box-shadow: inset 0 0 0 3px var(--dibk-color-ring, #4899e0);\n}\n\n.dibk-search__field {\n border-bottom: 2px solid var(--ds-color-accent-base-default, #003045);\n border-radius: 0;\n color: var(--ds-color-accent-base-default, #003045);\n}\n\n/* Designsystemet paints its own magnifier on the Search container whenever the\n field is an input[type=search], and pads the input's inline-start to make room\n for it. This widget supplies its own magnifier in the submit button and runs the\n input flush to the edge, so DS's icon would sit on top of the placeholder.\n Suppress it on both pseudo-elements: DS used ::before up to 1.15 and ::after\n from 1.20, and the container has no other generated content. */\n.dibk-search__field::before,\n.dibk-search__field::after {\n content: none;\n}\n\n/* Hide the clear button while the field is empty, so there is no × offering to\n clear nothing. Designsystemet did this itself up to 1.15 and dropped the rule\n in 1.20. The widget always renders a placeholder, so :placeholder-shown is a\n reliable stand-in for \"the field is empty\". */\n.dibk-search__field:has(input:placeholder-shown) button[type=\"reset\"] {\n display: none;\n}\n\n.dibk-search__field input {\n border: 0;\n border-radius: 0;\n background: transparent;\n box-shadow: none;\n /* No outline in any state (DS draws one on hover/focus): the panel ring and\n the underline are this widget's hover/focus affordance. */\n outline: none;\n padding: 8px 0;\n color: var(--ds-color-accent-base-default, #003045);\n font: inherit;\n font-size: 1.5rem;\n font-weight: var(--ds-font-weight-semibold);\n /* Ellipsize a placeholder too long for the field (e.g. on a phone) instead of\n letting it cut off mid-word. Applies to the placeholder via the input. */\n text-overflow: ellipsis;\n}\n\n.dibk-search__field input::placeholder {\n color: var(--ds-color-accent-base-default, #003045);\n opacity: 1;\n}\n\n.dibk-search__field input:focus::placeholder {\n opacity: 0.45;\n}\n\n.dibk-search__field button {\n border: 0;\n border-radius: 0;\n background: transparent;\n color: var(--ds-color-accent-base-default, #003045);\n}\n\n.dibk-search__hint {\n margin-top: var(--ds-size-3);\n font-size: 1.125rem;\n}\n\n@media (max-width: 48rem) {\n .dibk-search__field input {\n font-size: 1.25rem;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .dibk-search {\n transition: none;\n }\n}\n","/* Full-width disclosure panel in document flow below the header: opening pushes\n the page content down, the header stays visible. Same\n pale blue as the header, so the open panel and the bar read as one surface. */\n.dibk-megamenu {\n background: var(--dibk-surface-blue);\n color: var(--ds-color-accent-base-default, #003045);\n /* Fill the viewport below the 72px header even with sparse content, so the\n page never peeks out under the open menu. The content below stays in flow\n and is reachable by scrolling. */\n min-height: calc(100dvh - 72px);\n}\n\n/* Same container geometry as the rest of the app (header, content, footer), so\n the menu's text aligns with the page content below it. Vertical padding\n is 32px top, 100px bottom. */\n.dibk-megamenu__inner {\n box-sizing: border-box;\n max-width: var(--dibk-container-max, 1400px);\n margin: 0 auto;\n padding: 32px var(--dibk-container-pad, 2rem) 100px;\n}\n\n/* The search widget itself is a DibkSearch; only its width and placement are\n owned here. The negative margin counters the widget's panel padding so the\n field's left edge aligns with the menu content below. */\n.dibk-megamenu__search {\n max-width: 660px;\n margin-inline-start: calc(-1 * var(--ds-size-5));\n margin-block-end: 80px;\n}\n\n/* Layout helpers for menu content (the two-column section layout: two equal\n tracks 20px apart, 48px between stacked sections). The caller renders\n these wrappers around DibkMenuSection blocks; the panel itself imposes no\n layout on its children. */\n.dibk-megamenu__columns {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n column-gap: 20px;\n}\n\n.dibk-megamenu__column {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: 48px;\n}\n\n@media (max-width: 48rem) {\n .dibk-megamenu__columns {\n grid-template-columns: minmax(0, 1fr);\n row-gap: 48px;\n }\n}\n\n/* The shell's flat-list menu fallback (menuItems without sections) renders a\n two-column DibkIconLinkList directly in the panel. The panel spans the full\n 1400px shell, where free-growing 1fr tracks would drift the columns far\n apart, so cap them here; minmax lets them shrink on narrow viewports. */\n.dibk-megamenu__inner > .dibk-iconlinklist[data-columns=\"2\"] {\n grid-template-columns: repeat(2, minmax(0, 26rem));\n}\n\n/* This selector outweighs the list's own narrow-viewport collapse, so restate\n it (same breakpoint as IconLinkList.css). */\n@media (max-width: 36rem) {\n .dibk-megamenu__inner > .dibk-iconlinklist[data-columns=\"2\"] {\n grid-template-columns: minmax(0, 1fr);\n }\n}\n\n/* Opening: a quick fade + slight rise of the panel content, just softening the\n snap. Only paint properties animate - the panel sits in document flow, so\n animating its box would shove the page around. Closing stays instant: the\n page content un-hides the moment the menu closes, and a lingering panel\n would push it down. */\n@media (prefers-reduced-motion: no-preference) {\n .dibk-megamenu__inner {\n transition: opacity 0.18s ease-out, translate 0.18s ease-out;\n }\n\n @starting-style {\n .dibk-megamenu__inner {\n opacity: 0;\n translate: 0 -6px;\n }\n }\n}\n\n.dibk-megamenu :focus-visible {\n outline: 2px solid var(--ds-color-accent-base-default, #003045);\n outline-offset: 4px;\n}\n",".dibk-iconlinklist {\n list-style: none;\n margin: 0;\n padding: 0;\n display: grid;\n gap: 1rem 2rem;\n}\n\n/* Equal fluid tracks: the list fills its container. A context where\n free-growing columns would drift too far\n apart caps the tracks itself (see the mega-menu's flat-list fallback). */\n.dibk-iconlinklist[data-columns=\"1\"] {\n grid-template-columns: minmax(0, 1fr);\n}\n\n.dibk-iconlinklist[data-columns=\"2\"] {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n.dibk-iconlinklist[data-columns=\"3\"] {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n\n.dibk-iconlinklist__item {\n display: grid;\n grid-template-columns: auto 1fr;\n align-items: start;\n gap: 0.75rem;\n}\n\n.dibk-iconlinklist__icon {\n flex: none;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--ds-color-accent-base-default, #003045);\n line-height: 0;\n}\n\n.dibk-iconlinklist__icon :where(svg, img) {\n width: 1.75rem;\n height: 1.75rem;\n}\n\n.dibk-iconlinklist__body {\n min-width: 0;\n}\n\n/* DIBK navigation links: chevron BEFORE the label (a 20px glyph + 12px gap,\n giving a 32px text indent), ink, medium weight, no\n underline at rest (underline on hover), relaxed 1.625 leading. This is distinct\n from prose/inline links, which are navy + bold + underlined. */\n.dibk-iconlinklist__link {\n display: inline-flex;\n align-items: flex-start;\n gap: 12px;\n color: var(--dibk-color-ink, #202020);\n font-size: 1.25rem;\n line-height: 1.625;\n font-weight: var(--ds-font-weight-medium);\n text-decoration: none;\n text-underline-offset: 0.15em;\n}\n\n.dibk-iconlinklist__link:hover,\n.dibk-iconlinklist__link:focus-visible {\n text-decoration: underline;\n}\n\n.dibk-iconlinklist__chevron {\n flex: none;\n /* Optically centre the 20px glyph on the first text line, so it stays put\n when a long label wraps. */\n margin-top: calc((1.625em - 20px) / 2);\n}\n\n/* Padlock on login-gated items. */\n.dibk-iconlinklist__lock {\n flex: none;\n align-self: center;\n line-height: 0;\n color: var(--ds-color-accent-base-default, #003045);\n}\n.dibk-iconlinklist__lock svg {\n width: 1.1rem;\n height: 1.1rem;\n}\n\n.dibk-iconlinklist__description {\n margin: 0.25rem 0 0;\n color: var(--dibk-color-ink, #202020);\n font-size: 1rem;\n line-height: 1.5;\n font-weight: var(--ds-font-weight-regular);\n}\n\n@media (max-width: 62rem) {\n .dibk-iconlinklist[data-columns=\"3\"] {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (max-width: 36rem) {\n .dibk-iconlinklist[data-columns=\"2\"],\n .dibk-iconlinklist[data-columns=\"3\"] {\n grid-template-columns: 1fr;\n }\n}\n","/* Menu section anatomy: 40px icon + 24px semibold\n navy title on one row (16px apart), then the link list indented 32px with a\n 20px gap below the title row. */\n\n.dibk-menusection__header {\n display: flex;\n align-items: center;\n gap: 16px;\n margin: 0 0 20px;\n color: var(--ds-color-accent-base-default, #003045);\n font-size: var(--ds-font-size-6); /* 24px */\n font-weight: var(--ds-font-weight-semibold);\n line-height: 1.333;\n}\n\n.dibk-menusection__icon {\n flex: none;\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.dibk-menusection__icon :where(svg, img) {\n width: 100%;\n height: 100%;\n}\n\n.dibk-menusection__titlelink {\n color: inherit;\n text-decoration: none;\n}\n\n.dibk-menusection__titlelink:hover,\n.dibk-menusection__titlelink:focus-visible {\n text-decoration: underline;\n}\n\n.dibk-menusection__body {\n padding-left: 32px;\n}\n\n/* Section links stack on bare line boxes (no extra gap between rows). */\n.dibk-menusection__body .dibk-iconlinklist {\n row-gap: 0;\n}\n",".dibk-footer {\n background-color: var(--ds-color-accent-base-default, #003045);\n color: #ffffff;\n width: 100%;\n}\n\n.dibk-footer__inner {\n box-sizing: border-box;\n max-width: var(--dibk-container-max, 1400px);\n margin: 0 auto;\n padding: 3rem var(--dibk-container-pad, 2rem);\n}\n\n/* App-specific content: bold intro lines and underlined links. */\n.dibk-footer__content {\n font-size: 1.125rem;\n line-height: 1.5;\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.dibk-footer__content p {\n margin: 0;\n}\n\n.dibk-footer__content a {\n color: #ffffff;\n text-decoration: underline;\n}\n\n.dibk-footer__bottom {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: 1.5rem 2rem;\n margin-top: 2.5rem;\n}\n\n.dibk-footer__links {\n display: flex;\n flex-wrap: wrap;\n gap: 1.5rem;\n}\n\n.dibk-footer__link {\n color: #ffffff;\n font-size: 1rem;\n line-height: 1.4;\n text-decoration: underline;\n}\n\n.dibk-footer__brand {\n display: inline-flex;\n align-items: center;\n gap: 0.75rem;\n color: #ffffff;\n}\n\n/* Descendant selector beats .dibk-logo's own navy `color`, so the mark inherits\n white on the navy footer via currentColor. */\n.dibk-footer__brand .dibk-logo.dibk-footer__mark {\n height: 2.25rem;\n width: auto;\n flex: none;\n color: #ffffff;\n}\n\n.dibk-footer__wordmark {\n font-size: 1rem;\n line-height: 1.2;\n font-weight: var(--ds-font-weight-semibold);\n}\n\n/* Content area drops to a single flow on narrow viewports; the bottom bar\n already wraps via flex-wrap, so no extra rule is needed there. */\n@media (max-width: 36rem) {\n .dibk-footer__inner {\n padding: 2rem var(--dibk-container-pad, 2rem);\n }\n}\n",".dibk-sectionheader {\n border-bottom: 1px solid #d7d4d1;\n padding-bottom: 1rem;\n}\n\n.dibk-sectionheader__row {\n display: flex;\n align-items: center;\n gap: 1.25rem;\n}\n\n.dibk-sectionheader__icon {\n flex: none;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--ds-color-accent-base-default, #003045);\n line-height: 0;\n}\n\n.dibk-sectionheader__icon :where(svg, img) {\n width: 4rem;\n height: 4rem;\n}\n\n.dibk-sectionheader__title {\n margin: 0;\n color: var(--ds-color-accent-base-default, #003045);\n font-size: 2rem;\n line-height: 1.38;\n font-weight: var(--ds-font-weight-semibold);\n}\n\n.dibk-sectionheader__description {\n margin: 0.75rem 0 0;\n color: var(--ds-color-accent-base-default, #003045);\n font-size: 1.25rem;\n line-height: 1.5;\n font-weight: var(--ds-font-weight-regular);\n}\n\n@media (max-width: 36rem) {\n .dibk-sectionheader__icon :where(svg, img) {\n width: 3rem;\n height: 3rem;\n }\n\n .dibk-sectionheader__title {\n font-size: 1.625rem;\n }\n}\n",".dibk-feedback {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: 1rem 1.5rem;\n padding: 1.25rem 2rem;\n background-color: var(--dibk-surface-grey);\n}\n\n.dibk-feedback__question {\n margin: 0;\n color: var(--ds-color-accent-base-default, #003045);\n font-size: 1.125rem;\n line-height: 1.5;\n font-weight: var(--ds-font-weight-semibold);\n}\n\n.dibk-feedback__actions {\n display: flex;\n gap: 0.75rem;\n}\n\n/* The Ja/Nei buttons are Designsystemet Buttons (primary/secondary). Colour,\n border, focus ring and radius come from the theme; only the wider DIBK padding\n is nudged here. */\n.dibk-feedback__btn {\n padding-inline: 2rem;\n}\n",".dibk-appshell {\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n}\n.dibk-appshell__main {\n flex: 1;\n width: 100%;\n}\n/* The skip-link target is programmatically focusable (tabindex -1); suppress the\n focus ring so jumping to content doesn't paint an outline around the page. */\n.dibk-appshell__main:focus {\n outline: none;\n}\n\n/* Skip link (WCAG 2.4.1): off-screen until it receives keyboard focus, then it\n drops into the top-left as a navy panel. Fixed to the viewport (not the\n document) so it appears at the top-left at any scroll position, instead of\n being stranded at the document top. Mouse users never see it. */\n.dibk-skiplink {\n position: fixed;\n left: 1rem;\n top: -4rem;\n z-index: 100;\n padding: 0.5rem 1rem;\n background: var(--ds-color-accent-base-default);\n color: var(--ds-color-accent-contrast-default, #fff);\n text-decoration: none;\n transition: top 0.15s ease-in;\n}\n.dibk-skiplink:focus {\n top: 1rem;\n}\n\n/* The canonical page container: same width + side gutters as the header bar.\n border-box like the header/footer inners, so all three compute the same\n content edges. */\n.dibk-appshell__container {\n box-sizing: border-box;\n max-width: var(--dibk-container-max, 1400px);\n margin: 0 auto;\n padding: 2rem var(--dibk-container-pad, 2rem) 4rem;\n}\n\n/* App title beside the logo. A toolbar title never wraps: it stays one line at\n the fixed token size and truncates with an ellipsis when space is tight (the\n header collapse tiers below free up room before that happens). min-width: 0\n lets it shrink past its content width as a flex child of the header row, so\n the ellipsis can engage. */\n.dibk-appshell__title {\n display: inline-flex;\n align-items: center;\n min-width: 0;\n /* Extra breathing room off the logo, on top of the header row's 24px gap. */\n margin-left: 0.5rem;\n font-size: var(--ds-font-size-5);\n font-weight: var(--ds-font-weight-medium);\n color: var(--ds-color-accent-base-default);\n}\n.dibk-appshell__titletext {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dibk-appshell__menuheading {\n margin-block-end: var(--ds-size-6);\n}\n","/* Identity block in the account dropdown, aligned with the DS dropdown's own\n heading/item padding. */\n.dibk-account__id {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--ds-size-2);\n padding: 0 var(--ds-size-4) var(--ds-size-2);\n}\n\n/* Login row below the mega-menu links. */\n.dibk-menu-login {\n margin-top: var(--ds-size-10);\n}\n","/* Square navy \"Kopier\" button (tertiary outline that fills on hover); flips to a\n green \"✓ Kopiert!\" confirmation. Sizes off the DS scale, colours off tokens. */\n.dibk-copybtn {\n appearance: none;\n display: inline-flex;\n align-items: center;\n gap: var(--ds-size-2);\n flex: none;\n font: inherit;\n font-size: var(--ds-font-size-2);\n font-weight: var(--ds-font-weight-medium);\n line-height: 1;\n color: var(--ds-color-accent-base-default);\n background: transparent;\n border: 1px solid var(--ds-color-accent-base-default);\n border-radius: 0;\n padding: var(--ds-size-2) var(--ds-size-3);\n cursor: pointer;\n transition:\n background-color 0.18s ease,\n color 0.18s ease,\n border-color 0.18s ease;\n}\n.dibk-copybtn:hover {\n background: var(--ds-color-accent-base-default);\n color: var(--ds-color-neutral-background-default);\n}\n.dibk-copybtn:focus-visible {\n outline: 2px solid var(--ds-color-accent-base-default);\n outline-offset: 3px;\n}\n.dibk-copybtn[data-done=\"1\"] {\n color: var(--ds-color-success-text-subtle);\n border-color: var(--ds-color-success-text-subtle);\n background: transparent;\n}\n.dibk-copybtn__ico {\n display: inline-flex;\n font-size: 0.85em;\n}\n.dibk-copybtn__ico:empty {\n display: none;\n}\n\n/* Icon-only variant: muted at rest, navy on hover, green ✓ after a copy. The\n 44px-ish hit area comes from padding, not glyph size. */\n.dibk-copyiconbtn {\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n padding: var(--ds-size-1);\n border: 0;\n border-radius: 0;\n background: transparent;\n color: var(--ds-color-text-subtle);\n cursor: pointer;\n transition: color 0.18s ease;\n}\n.dibk-copyiconbtn:hover {\n color: var(--ds-color-accent-base-default);\n}\n.dibk-copyiconbtn:focus-visible {\n outline: 2px solid var(--ds-color-accent-base-default);\n outline-offset: 2px;\n}\n.dibk-copyiconbtn[data-done=\"1\"] {\n color: var(--ds-color-text-subtle);\n}\n/* The ✓ inherits the button's font-size (set inline from the `size` prop), so\n it scales with the clipboard glyph it replaces. */\n.dibk-copyiconbtn__done {\n font-size: inherit;\n line-height: 1;\n}\n","/* Labelled code block: grey panel, hairline label bar, monospace pre. Wraps long\n lines (URLs, JSON) rather than only scrolling. */\n.dibk-code {\n border: 1px solid var(--dibk-color-hairline);\n background: var(--dibk-surface-grey);\n}\n.dibk-code__bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ds-size-3);\n padding: var(--ds-size-2) var(--ds-size-2) var(--ds-size-2) var(--ds-size-4);\n border-bottom: 1px solid var(--dibk-color-hairline);\n}\n.dibk-code__label {\n font-size: var(--ds-font-size-1);\n text-transform: uppercase;\n letter-spacing: 0.06em;\n font-weight: var(--ds-font-weight-semibold);\n color: var(--dibk-color-meta);\n}\n.dibk-code__pre {\n margin: 0;\n padding: var(--ds-size-4) var(--ds-size-4);\n overflow-x: auto;\n}\n.dibk-code__pre code {\n font-family: ui-monospace, \"SF Mono\", \"Cascadia Mono\", monospace;\n font-size: var(--ds-font-size-3);\n line-height: 1.6;\n color: var(--dibk-color-ink);\n white-space: pre-wrap;\n word-break: break-word;\n}\n"],"mappings":"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","names":[]}
@@ -0,0 +1,280 @@
1
+ export * from '@digdir/designsystemet-react';
2
+ import * as react from 'react';
3
+ import { SVGProps, ComponentPropsWithoutRef, ReactNode, ElementType } from 'react';
4
+
5
+ interface DibkLogoProps extends SVGProps<SVGSVGElement> {
6
+ /** "full" = roofline mark + wordmark; "mark" = roofline only. */
7
+ variant?: "full" | "mark";
8
+ }
9
+ /**
10
+ * DIBK brand mark. `full` renders the roofline mark + "Direktoratet for
11
+ * byggkvalitet" wordmark; `mark` renders the roofline only. Color is inherited
12
+ * via currentColor (navy by default; set color to recolor, e.g. white on navy).
13
+ */
14
+ declare const DibkLogo: react.ForwardRefExoticComponent<Omit<DibkLogoProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
15
+
16
+ /** A highlighted shortcut shown in the top bar beside the menu toggle. */
17
+ interface DibkHeaderShortcut {
18
+ label: string;
19
+ href: string;
20
+ }
21
+ interface DibkHeaderProps extends ComponentPropsWithoutRef<"header"> {
22
+ /** Whether the mega-menu is open (controls the Meny toggle state). */
23
+ menuOpen?: boolean;
24
+ onMenuToggle?: () => void;
25
+ /** id of the menu panel the Meny toggle controls (wired to aria-controls). */
26
+ menuPanelId?: string;
27
+ onSearchToggle?: () => void;
28
+ /**
29
+ * Render the "Søk" button. Defaults to true. Set false in apps whose search
30
+ * lives elsewhere (e.g. a page hero) so the header shows only "Meny".
31
+ */
32
+ search?: boolean;
33
+ /**
34
+ * Highlighted shortcut links rendered before Søk/Meny. On narrow viewports
35
+ * they collapse; reach them through the menu instead.
36
+ */
37
+ shortcuts?: DibkHeaderShortcut[];
38
+ /**
39
+ * Account/login control rendered rightmost in the bar, after Søk/Meny. Unlike
40
+ * shortcuts it does not collapse on narrow viewports, so sign-in state stays
41
+ * visible. The app owns the content (login button, avatar dropdown, ...).
42
+ */
43
+ account?: ReactNode;
44
+ /** Optional brand link target (logo href). */
45
+ homeHref?: string;
46
+ /**
47
+ * Component used to render the brand and shortcut links (receives `href`).
48
+ * Pass a router Link adapter for client-side navigation; defaults to `a`.
49
+ */
50
+ linkComponent?: ElementType;
51
+ }
52
+ /**
53
+ * DIBK top bar: roofline logo (linking home) on the left; an optional "Søk"
54
+ * button and the "Meny" (hamburger) toggle on the right. The toggle is a
55
+ * disclosure control for the menu panel: it swaps to
56
+ * "Lukk" + X while open and announces state via aria-expanded/aria-controls.
57
+ * Search and menu state are owned by the caller.
58
+ */
59
+ declare const DibkHeader: react.ForwardRefExoticComponent<DibkHeaderProps & react.RefAttributes<HTMLElement>>;
60
+
61
+ interface DibkMegaMenuProps extends ComponentPropsWithoutRef<"div"> {
62
+ open: boolean;
63
+ onClose: () => void;
64
+ /** Render the built-in search field (default true). Set false in apps whose
65
+ * search lives elsewhere, mirroring DibkHeader's `search`. */
66
+ search?: boolean;
67
+ /** Placeholder for the built-in search field (default "Søk"). */
68
+ searchPlaceholder?: string;
69
+ /** Fired when the built-in search field is submitted. */
70
+ onSearchSubmit?: (query: string) => void;
71
+ /** Optional hint line inside the search widget, under the field
72
+ * (e.g. "Søk etter f.eks. rekkverk eller bruksendring"). */
73
+ searchHint?: ReactNode;
74
+ }
75
+ /**
76
+ * DIBK navigation panel: a full-width disclosure that expands in document flow
77
+ * below the header: the page content is pushed down and the header stays
78
+ * visible. The header's Meny button owns the open state and
79
+ * references the panel via aria-expanded/aria-controls; this component renders
80
+ * the panel content: an optional large underline search field, then `children`
81
+ * (the caller owns the content layout). Escape closes the panel and hands
82
+ * focus back to the toggle.
83
+ */
84
+ declare const DibkMegaMenu: react.ForwardRefExoticComponent<DibkMegaMenuProps & react.RefAttributes<HTMLDivElement>>;
85
+
86
+ interface DibkIconLinkItem {
87
+ label: string;
88
+ href: string;
89
+ icon?: ReactNode;
90
+ description?: ReactNode;
91
+ /** Mark the item login-gated: renders a padlock after the label (with screen-reader text). */
92
+ locked?: boolean;
93
+ }
94
+ interface DibkIconLinkListProps extends ComponentPropsWithoutRef<"ul"> {
95
+ items: DibkIconLinkItem[];
96
+ /** Number of columns the list flows into. */
97
+ columns?: 1 | 2 | 3;
98
+ /** Render the chevron before each label (default true). Drop it where the
99
+ * list reads as a panel of shortcuts rather than a navigation list. */
100
+ chevron?: boolean;
101
+ /**
102
+ * Component used to render the item links (receives `href`). Pass a router
103
+ * Link adapter for client-side navigation; defaults to `a`.
104
+ */
105
+ linkComponent?: ElementType;
106
+ }
107
+ declare const DibkIconLinkList: react.ForwardRefExoticComponent<DibkIconLinkListProps & react.RefAttributes<HTMLUListElement>>;
108
+
109
+ interface DibkMenuSectionProps extends Omit<ComponentPropsWithoutRef<"section">, "title"> {
110
+ /** Section heading (24px semibold navy beside a 40px icon). */
111
+ title: ReactNode;
112
+ /** Make the title itself a link (section titles point at landing pages). */
113
+ href?: string;
114
+ /** 40x40 illustration beside the title. */
115
+ icon?: ReactNode;
116
+ /** The section's links. */
117
+ items: DibkIconLinkItem[];
118
+ /**
119
+ * Component used to render the links (receives `href`). Pass a router Link
120
+ * adapter for client-side navigation; defaults to `a`.
121
+ */
122
+ linkComponent?: ElementType;
123
+ }
124
+ /**
125
+ * One section of the DIBK menu panel: an optional 40px
126
+ * icon + a title row, then an indented chevron-link list. Stack sections
127
+ * inside `.dibk-megamenu__column` wrappers for the two-column menu layout.
128
+ */
129
+ declare const DibkMenuSection: react.ForwardRefExoticComponent<DibkMenuSectionProps & react.RefAttributes<HTMLElement>>;
130
+
131
+ interface DibkSearchProps extends Omit<ComponentPropsWithoutRef<"form">, "onSubmit" | "onChange"> {
132
+ /** Placeholder text; also the input's accessible name. */
133
+ placeholder?: string;
134
+ /** Optional hint line under the field (e.g. example searches). */
135
+ hint?: ReactNode;
136
+ /** Controlled value. Omit (with onValueChange) for uncontrolled use. */
137
+ value?: string;
138
+ onValueChange?: (value: string) => void;
139
+ /** Fired with the query when the form submits (Enter or the magnifier). */
140
+ onSearch?: (query: string) => void;
141
+ /** Fired when the clear button empties the field. */
142
+ onClear?: () => void;
143
+ inputId?: string;
144
+ }
145
+ /**
146
+ * The DIBK search widget: an underline-only field with an inline
147
+ * magnifier, sitting in a quiet panel that turns white with a ring on
148
+ * hover/focus. Wraps Designsystemet's `Search` and renders its own `<form>`
149
+ * (DS `Search` is a plain div; Enter-to-submit needs a real form).
150
+ */
151
+ declare const DibkSearch: react.ForwardRefExoticComponent<DibkSearchProps & react.RefAttributes<HTMLFormElement>>;
152
+
153
+ interface DibkFooterProps extends ComponentPropsWithoutRef<"footer"> {
154
+ /** Optional app-specific content shown above the static bottom bar. */
155
+ children?: ReactNode;
156
+ }
157
+ /**
158
+ * The DIBK footer: an optional app-specific content area on top, then a static
159
+ * bottom bar carrying the standard legal links (left) and the brand mark (right).
160
+ */
161
+ declare const DibkFooter: react.ForwardRefExoticComponent<DibkFooterProps & react.RefAttributes<HTMLElement>>;
162
+
163
+ interface DibkSectionHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
164
+ title: ReactNode;
165
+ /** Large two-tone icon shown above/beside the title. */
166
+ icon?: ReactNode;
167
+ description?: ReactNode;
168
+ }
169
+ declare const DibkSectionHeader: react.ForwardRefExoticComponent<DibkSectionHeaderProps & react.RefAttributes<HTMLDivElement>>;
170
+
171
+ interface DibkFeedbackWidgetProps extends ComponentPropsWithoutRef<"div"> {
172
+ /** Defaults to "Fant du det du lette etter?". */
173
+ question?: string;
174
+ onAnswer?: (answer: "ja" | "nei") => void;
175
+ }
176
+ declare const DibkFeedbackWidget: react.ForwardRefExoticComponent<DibkFeedbackWidgetProps & react.RefAttributes<HTMLDivElement>>;
177
+
178
+ /** One menu section: title (+ optional icon/landing link) and its links. */
179
+ type DibkMenuColumnSection = Pick<DibkMenuSectionProps, "title" | "href" | "icon" | "items">;
180
+ interface DibkAppShellProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
181
+ /** App name shown beside the logo, with a subtle divider. */
182
+ title?: ReactNode;
183
+ /** Logo link target. */
184
+ homeHref?: string;
185
+ /** Render the header's "Søk" button (default true). */
186
+ search?: boolean;
187
+ /** Called when the header's Søk toggle is clicked. */
188
+ onSearchToggle?: () => void;
189
+ /** Highlighted shortcut links shown in the top bar beside the menu toggle. */
190
+ shortcuts?: DibkHeaderShortcut[];
191
+ /** Account/login control shown in the top bar (see DibkHeader's `account`). */
192
+ account?: ReactNode;
193
+ /** Mega-menu heading (default "Meny"). Visually hidden when `menuColumns` is
194
+ * used (the section titles carry the visual structure instead). */
195
+ menuHeading?: string;
196
+ /** Mega-menu navigation links, as a flat list under the menu heading. Ignored
197
+ * when `menuColumns` is provided. */
198
+ menuItems?: DibkIconLinkItem[];
199
+ /** Two-column menu layout: each column a stack of titled sections.
200
+ * Takes precedence over `menuItems`. */
201
+ menuColumns?: [DibkMenuColumnSection[], DibkMenuColumnSection[]];
202
+ /** Optional content below the menu links (e.g. an account/login row). */
203
+ menuExtra?: ReactNode;
204
+ /** Optional app-specific content shown above the footer's static bottom bar. */
205
+ footerContent?: ReactNode;
206
+ /**
207
+ * Component used for the header's brand/shortcut links and the menu items
208
+ * (receives `href`). Pass a router Link adapter for client-side navigation;
209
+ * defaults to `a`.
210
+ */
211
+ linkComponent?: ElementType;
212
+ }
213
+ /**
214
+ * The DIBK page frame: header (logo + app title + menu toggle), mega-menu,
215
+ * the routed content in the canonical container, and the footer. Owns the
216
+ * menu open/close state. The content sits in a `--dibk-container-max` container
217
+ * so it lines up edge-to-edge with the header and footer - apps don't manage
218
+ * their own page width.
219
+ */
220
+ declare const DibkAppShell: react.ForwardRefExoticComponent<DibkAppShellProps & react.RefAttributes<HTMLDivElement>>;
221
+
222
+ interface DibkAccountMenuProps extends Omit<ComponentPropsWithoutRef<"button">, "name" | "value"> {
223
+ /** The signed-in user's display name (drives the initials, heading and aria-label). */
224
+ name: string;
225
+ email?: string;
226
+ /** Role shown as a small tag under the email (e.g. "Redaktør"). */
227
+ roleLabel?: ReactNode;
228
+ /** Renders a "Logg ut" item that calls this. */
229
+ onLogout?: () => void;
230
+ /** Extra Dropdown.Item entries, listed before Logg ut. */
231
+ children?: ReactNode;
232
+ }
233
+ /** Header account control for a signed-in user: an initials avatar that opens a
234
+ small account dropdown (name, email, role, Logg ut). Designed for the app
235
+ shell's `account` slot; the app decides *whether* the user is signed in and
236
+ what the fields are - this component only renders them. */
237
+ declare const DibkAccountMenu: react.ForwardRefExoticComponent<DibkAccountMenuProps & react.RefAttributes<HTMLButtonElement>>;
238
+ interface DibkMenuLoginProps extends ComponentPropsWithoutRef<"button"> {
239
+ }
240
+ /** "Logg inn" row for the mega-menu's `menuExtra` slot, the anonymous counterpart
241
+ to DibkAccountMenu. The app renders it only for signed-out visitors and wires
242
+ the click to its sign-in flow. */
243
+ declare const DibkMenuLogin: react.ForwardRefExoticComponent<DibkMenuLoginProps & react.RefAttributes<HTMLButtonElement>>;
244
+
245
+ interface DibkCopyButtonProps extends ComponentPropsWithoutRef<"button"> {
246
+ /** The text placed on the clipboard. */
247
+ value: string;
248
+ /** Accessible name for the button ("Kopier" when omitted). */
249
+ ariaLabel?: string;
250
+ }
251
+ /** A square navy "Kopier" button that flips to "✓ Kopiert!" for ~1.7s after a copy. */
252
+ declare const DibkCopyButton: react.ForwardRefExoticComponent<DibkCopyButtonProps & react.RefAttributes<HTMLButtonElement>>;
253
+ interface DibkCopyIconButtonProps extends ComponentPropsWithoutRef<"button"> {
254
+ /** The text placed on the clipboard. */
255
+ value: string;
256
+ /** Accessible name for the button. */
257
+ ariaLabel?: string;
258
+ /** Glyph size in px; the hit area comes from padding, not the glyph. */
259
+ size?: number;
260
+ }
261
+ /** Quiet icon-only sibling of DibkCopyButton: a muted clipboard glyph that turns
262
+ into a green ✓ after copying. For places where a full button would shout
263
+ (e.g. beside body text). */
264
+ declare const DibkCopyIconButton: react.ForwardRefExoticComponent<DibkCopyIconButtonProps & react.RefAttributes<HTMLButtonElement>>;
265
+
266
+ interface DibkCodeBlockProps extends ComponentPropsWithoutRef<"div"> {
267
+ /** Label shown in the bar above the code. */
268
+ label: string;
269
+ /** The value the Kopier button copies (and shows, unless `display` is set). */
270
+ value: string;
271
+ /** Text to show when it should differ from the copied value. */
272
+ display?: string;
273
+ /** Toggles the Kopier button; turn off for illustrative blocks that shouldn't be pasted. */
274
+ copyable?: boolean;
275
+ }
276
+ /** A labelled code block: a label bar over a monospace `<pre>`, with an optional
277
+ Kopier button. Wraps long lines (URLs, JSON) rather than only scrolling. */
278
+ declare const DibkCodeBlock: react.ForwardRefExoticComponent<DibkCodeBlockProps & react.RefAttributes<HTMLDivElement>>;
279
+
280
+ export { DibkAccountMenu, type DibkAccountMenuProps, DibkAppShell, type DibkAppShellProps, DibkCodeBlock, type DibkCodeBlockProps, DibkCopyButton, type DibkCopyButtonProps, DibkCopyIconButton, type DibkCopyIconButtonProps, DibkFeedbackWidget, type DibkFeedbackWidgetProps, DibkFooter, type DibkFooterProps, DibkHeader, type DibkHeaderProps, type DibkHeaderShortcut, type DibkIconLinkItem, DibkIconLinkList, type DibkIconLinkListProps, DibkLogo, type DibkLogoProps, DibkMegaMenu, type DibkMegaMenuProps, type DibkMenuColumnSection, DibkMenuLogin, type DibkMenuLoginProps, DibkMenuSection, type DibkMenuSectionProps, DibkSearch, type DibkSearchProps, DibkSectionHeader, type DibkSectionHeaderProps };