@ecomconsult/consentkit 0.3.5 → 0.5.0

package/src/ck-ui.js

@@ -169,21 +169,35 @@
     /* Palette tokens live in a second, generated stylesheet (see buildThemeCss).
        They must NOT be inline host styles: an inline value outbeats every :host
        rule, which would make the dark media query and the forced-mode class dead. */
+    /* font-FAMILY only, never the `font` shorthand: theme.font:'inherit' must
+       take the host page's typeface without also taking its size, weight and
+       line-height, which are what hold the fixed geometry together. */
     ':host{',
-    'font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;',
+    'font-family:var(--ck-font);',
     'font-size:15px;line-height:1.5;color:var(--ck-ink);',
     '-webkit-font-smoothing:antialiased}',
 
     '.ck-hidden{display:none !important}',
 
     'button{font:inherit;color:inherit;margin:0;cursor:pointer}',
-    'a{color:var(--ck-accent)}',
+    /* --ck-link, not --ck-accent: every accent-coloured TEXT on the card goes
+       through the same >= 4.5:1 rule the filled buttons' labels do. A brand
+       accent picked to be legible as a BUTTON FILL (white text on it) can be
+       far too pale to read as text ON the card — a yellow accent gives a
+       perfectly good button and an invisible «Подробнее». --ck-accent stays
+       the raw brand colour and is still what paints backgrounds (the switch)
+       and the focus ring, which are non-text and answer to 3:1, not 4.5. */
+    'a{color:var(--ck-link)}',
+    /* «Подробнее» as a settings-opening button must read as the link it
+       replaces, not as a third action button. */
+    '.ck-linkbtn{background:none;border:0;padding:0;font:inherit;font-size:inherit;',
+    'color:var(--ck-link);text-decoration:underline;cursor:pointer}',
     ':focus-visible{outline:2px solid var(--ck-accent);outline-offset:2px;border-radius:4px}',
 
     /* ---- banner ---- */
     '.ck-scrim{position:fixed;inset:0;background:rgba(16,20,30,.28);z-index:2147483000;pointer-events:none}',
     '.ck-banner{position:fixed;z-index:2147483001;background:var(--ck-bg);color:var(--ck-ink);',
-    'border:1px solid var(--ck-line);border-radius:var(--ck-radius);pointer-events:auto}',
+    'border:1px solid var(--ck-line);border-radius:var(--ck-radius-card);pointer-events:auto}',
     '.ck-banner--bar{left:16px;right:16px;padding:18px 20px;',
     'display:flex;gap:20px;align-items:center;flex-wrap:wrap}',
     '.ck-banner--bar.ck-pos-bottom{bottom:16px}',
@@ -191,22 +205,29 @@
     '.ck-banner--modal{top:50%;left:50%;transform:translate(-50%,-50%);',
     'width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;padding:24px}',
 
-    /* box: compact card, corner-anchored, no scrim */
-    '.ck-banner--box{width:min(360px,calc(100vw - 32px));max-height:calc(100vh - 32px);',
-    'overflow:auto;padding:20px;display:block}',
+    /* box: the SPEC V1.6 reference card — max 540 wide, 24px padding, corner
+       anchored, no scrim. */
+    '.ck-banner--box{width:min(540px,calc(100vw - 32px));max-height:calc(100vh - 32px);',
+    'overflow:auto;padding:24px;display:block}',
     '.ck-banner--box.ck-pos-bottom-right{bottom:16px;right:16px}',
     '.ck-banner--box.ck-pos-bottom-left{bottom:16px;left:16px}',
     /* Vertical layouts: the copy ends with the "learn more" link, so the gap
        below it has to clear a text baseline, not just a block edge — 16px
        reads as attached to the buttons. */
     '.ck-banner.ck-banner--box p,.ck-banner.ck-banner--modal p{margin-bottom:22px}',
-    /* both filled buttons share one equal row; outline spans the width below */
-    '.ck-banner--box .ck-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}',
-    '.ck-banner--box .ck-btn{min-width:0;width:100%}',
-    '.ck-banner--box .ck-btn--outline{grid-column:1 / -1}',
+    /* Reference row: three equal buttons, 8px gap, wrapping to a column under
+       560px (the media query below). Keyed off the ROLE classes, never the
+       variant ones — since 0.5.0 `settings` may itself be filled. */
+    '.ck-banner--box .ck-actions{display:flex;gap:8px;flex-wrap:wrap}',
+    '.ck-banner--box .ck-btn{min-width:0;flex:1 1 0}',
     '.ck-banner__body{flex:1 1 320px;min-width:0}',
     '.ck-banner h2{margin:0 0 6px;font-size:17px;font-weight:600;letter-spacing:-.01em}',
     '.ck-banner p{margin:0;color:var(--ck-muted);font-size:14px}',
+    /* Box overrides sit AFTER the generic .ck-banner rules on purpose: the two
+       selectors have equal specificity, so source order is what decides, and
+       placing these with the rest of the box block silently lost. The SPEC
+       V1.6 reference calls for a 20/700 heading here. */
+    '.ck-banner--box h2{font-size:20px;font-weight:700;margin:0 0 8px}',
     '.ck-banner--modal p{margin-bottom:20px}',
     '.ck-banner__more{white-space:nowrap}',
 
@@ -215,9 +236,27 @@
     '.ck-banner--modal .ck-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}',
     '.ck-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;',
     'min-width:150px;min-height:44px;padding:11px 18px;font-size:14px;font-weight:600;line-height:1.2;',
-    'border-radius:var(--ck-radius);border:1px solid transparent;background:transparent;flex:1 1 auto}',
+    'border-radius:var(--ck-radius-btn);border:1px solid transparent;background:transparent;flex:1 1 auto}',
+    /* Role classes read their own resolved tokens, so filled/outline is a VALUE
+       change, not a class swap — a theme.buttons edit restyles in place and
+       needs no remount. box-sizing:border-box is global, so borderWidth:2 does
+       not change the outer size: the equal-buttons invariant survives it. */
+    '.ck-btn--accept{background:var(--ck-accept-bg);color:var(--ck-accept-fg);',
+    'border-color:var(--ck-accept-bd);border-width:var(--ck-accept-bw)}',
+    '.ck-btn--reject{background:var(--ck-reject-bg);color:var(--ck-reject-fg);',
+    'border-color:var(--ck-reject-bd);border-width:var(--ck-reject-bw)}',
+    '.ck-btn--settings{background:var(--ck-settings-bg);color:var(--ck-settings-fg);',
+    'border-color:var(--ck-settings-bd);border-width:var(--ck-settings-bw)}',
+    /* Kept for the preferences panel's own footer, which is not themable. */
     '.ck-btn--filled{background:var(--ck-accent);border-color:var(--ck-accent);color:var(--ck-on-accent)}',
-    '.ck-btn--outline{background:transparent;border-color:var(--ck-accent);color:var(--ck-accent)}',
+    /* Live, not a fallback: these paint the preferences panel's own Accept
+       all / Reject all. Transparent fill means the LABEL sits on the card, so
+       it takes --ck-link like every other accent-coloured text; the BORDER is
+       non-text and answers to 3:1, so it keeps the raw accent. The footer's
+       background is --ck-soft rather than --ck-bg, but soft is a 5% ink mix of
+       the card — the ratio difference is well inside the noise, and a second
+       link token per background would break «один код — одни числа». */
+    '.ck-btn--outline{background:transparent;border-color:var(--ck-accent);color:var(--ck-link)}',
     '.ck-btn--ghost{min-width:0;border-color:var(--ck-line);color:var(--ck-ink);font-weight:500}',
 
     /* ---- panel ---- */
@@ -225,19 +264,12 @@
     '.ck-panel{position:fixed;z-index:2147483003;top:50%;left:50%;transform:translate(-50%,-50%);',
     'width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 48px);',
     'display:flex;flex-direction:column;background:var(--ck-bg);color:var(--ck-ink);',
-    'border:1px solid var(--ck-line);border-radius:var(--ck-radius);overflow:hidden}',
+    'border:1px solid var(--ck-line);border-radius:var(--ck-radius-card);overflow:hidden}',
     '.ck-panel__head{display:flex;align-items:flex-start;gap:16px;padding:22px 24px 14px;',
     'border-bottom:1px solid var(--ck-line)}',
-    /* min-width:0 so a wide logo shrinks rather than shoving the close button
-       off. Scoped to :has(.ck-brand) — applying it unconditionally changes the
-       header block's flex sizing (480px -> 518px) on unbranded panels too, which
-       would break byte-for-byte backward compatibility. Browsers without :has()
-       simply keep today's sizing; the logo is width-capped at 160px regardless,
-       so the close button still has room. */
-    '.ck-panel__head>div:first-child:has(.ck-brand){flex:1 1 auto;min-width:0}',
     '.ck-panel__head h2{margin:0 0 4px;font-size:18px;font-weight:600;letter-spacing:-.01em}',
     '.ck-panel__head p{margin:0;font-size:14px;color:var(--ck-muted)}',
-    '.ck-x{flex:none;width:36px;height:36px;border-radius:var(--ck-radius);border:1px solid var(--ck-line);',
+    '.ck-x{flex:none;width:36px;height:36px;border-radius:var(--ck-radius-btn);border:1px solid var(--ck-line);',
     'background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--ck-muted)}',
     '.ck-panel__body{overflow:auto;padding:6px 24px 10px;-webkit-overflow-scrolling:touch}',
     '.ck-panel__foot{display:flex;gap:10px;flex-wrap:wrap;padding:16px 24px;',
@@ -265,13 +297,13 @@
 
     /* ---- cookie table ---- */
     '.ck-det{margin-top:12px}',
-    '.ck-det>summary{cursor:pointer;font-size:13px;color:var(--ck-accent);',
+    '.ck-det>summary{cursor:pointer;font-size:13px;color:var(--ck-link);',
     'list-style:none;display:inline-flex;align-items:center;gap:6px;padding:2px 0}',
     '.ck-det>summary::-webkit-details-marker{display:none}',
     '.ck-det>summary::before{content:"";width:0;height:0;border:4px solid transparent;',
     'border-left-color:currentColor;border-right:0}',
     '.ck-det[open]>summary::before{transform:rotate(90deg)}',
-    '.ck-tablewrap{margin-top:8px;overflow-x:auto;border:1px solid var(--ck-line);border-radius:var(--ck-radius)}',
+    '.ck-tablewrap{margin-top:8px;overflow-x:auto;border:1px solid var(--ck-line);border-radius:var(--ck-radius-card)}',
     'table{border-collapse:collapse;width:100%;font-size:13px;min-width:420px}',
     'th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--ck-line);vertical-align:top}',
     'thead th{background:var(--ck-soft);font-weight:600;font-size:12px;color:var(--ck-muted);white-space:nowrap}',
@@ -279,62 +311,9 @@
     'td.ck-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}',
     '.ck-empty{margin:8px 0 0;font-size:13px;color:var(--ck-muted)}',
 
-    /* ---- branding: logo + powered-by ----
-       The logo sits inline with the title in a flex row. That was chosen over a
-       separate band above the heading because .ck-banner--bar is a single
-       vertically-centred flex row: a stacked logo adds a height band there and
-       nowhere else, so bar/box/modal would drift apart. Inline keeps one rule
-       for all three layouts and leaves existing margins untouched — .ck-brand
-       carries the whole gap, h2 keeps its own margin. */
-    '.ck-brand{display:flex;align-items:center;gap:10px;margin:0 0 8px}',
-    /* Attribution foot of the banner: logo + credit on one muted line below
-       the buttons. flex-basis 100% keeps it on its own row in the bar layout,
-       where the actions sit beside the text.
-
-       The mark is desaturated here rather than shipped as a second grey asset:
-       an agency logo in full brand colour reads as a second call to action
-       competing with the consent buttons. grayscale() flattens the hue and the
-       opacity lifts it off pure black, so it sits at signature weight in both
-       themes without the integrator preparing anything. */
-    '.ck-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;',
-    'margin:14px 0 0}',
-    '.ck-foot .ck-brand__logo,.ck-foot .ck-brand__logo svg{',
-    'filter:grayscale(1);opacity:.55}',
-    '.ck-foot .ck-brand__link:hover .ck-brand__logo,',
-    '.ck-foot .ck-brand__link:focus-visible .ck-brand__logo{opacity:.8}',
-    '.ck-foot .ck-brand{margin:0}',
-    /* Beats the flex:1 1 100% the standalone .ck-powered carries (it needs a
-       full row of its own when there is no logo beside it). */
-    '.ck-foot p.ck-powered,.ck-banner .ck-foot p.ck-powered{margin:0;flex:0 1 auto}',
-    /* In the panel the foot shares a flex row with the action buttons, so it
-       claims a row of its own below them. */
-    '.ck-panel__foot .ck-foot{flex:1 1 100%;margin:2px 0 0}',
-    '.ck-brand__logo{display:block;width:auto;max-width:160px;height:var(--ck-logo-h,24px);',
-    'flex:none;object-fit:contain}',
-    '.ck-brand__logo svg{display:block;width:auto;height:100%;max-width:160px}',
-    '.ck-brand a.ck-brand__link{display:inline-flex;align-items:center;text-decoration:none;flex:none}',
-    /* Dark-variant swap is CSS-driven, mirroring buildThemeCss()'s cascade
-       exactly (same three selectors, same :not(.ck-mode-light) guard). Reading
-       the theme in JS would desync in auto mode and would not follow a live
-       system theme flip. */
-    '.ck-brand__dark{display:none}',
-    '.ck-brand__has-dark .ck-brand__light{display:block}',
-
-    /* ---- powered-by ----
-       Deliberately quiet: muted colour, 12px, normal weight, and it comes after
-       the action row in DOM order. It must not compete with the consent buttons. */
-    /* .ck-banner p sets font-size:14px at equal specificity and appears later in
-       this sheet, so it would win over a bare .ck-powered. Qualifying the
-       selector keeps the attribution smaller than the button text (14px) without
-       reaching for !important. */
-    '.ck-powered,.ck-banner p.ck-powered{margin:12px 0 0;font-size:12px;line-height:1.4;',
-    'color:var(--ck-muted);flex:1 1 100%;font-weight:400}',
-    '.ck-powered a{color:var(--ck-muted);text-decoration:underline}',
-    '.ck-panel__foot .ck-powered{margin:0;align-self:center}',
-
     /* ---- floating button ---- */
     '.ck-fab{position:fixed;left:16px;bottom:16px;z-index:2147482999;width:48px;height:48px;',
-    'border-radius:50%;border:1px solid var(--ck-line);background:var(--ck-bg);color:var(--ck-accent);',
+    'border-radius:50%;border:1px solid var(--ck-line);background:var(--ck-bg);color:var(--ck-link);',
     'display:inline-flex;align-items:center;justify-content:center;padding:0}',
     '.ck-fab svg{width:24px;height:24px;display:block}',
 
@@ -342,15 +321,13 @@
     '.ck-banner--bar{left:8px;right:8px;bottom:8px;padding:16px}',
     '.ck-actions{width:100%}.ck-btn{min-width:0;flex:1 1 100%}',
     '.ck-banner.ck-banner--bar p{margin-bottom:22px}',
-    /* Narrow bar stacks into a column, so the foot — which lives at the end of
-       the text block for the wide side-by-side layout — would sit between the
-       question and the buttons answering it. Lift it out of the text block and
-       order it last. */
     '.ck-banner--bar{flex-direction:column;align-items:stretch}',
     '.ck-banner--bar .ck-banner__body{display:contents}',
     '.ck-banner--bar .ck-banner__body>*{order:1}',
     '.ck-banner--bar .ck-actions{order:2}',
-    '.ck-banner--bar .ck-foot{order:3;margin-top:14px}}',
+    /* Reference: the box's button row becomes a column under 560px. */
+    '.ck-banner--box .ck-actions{flex-direction:column}',
+    '.ck-banner--box .ck-btn{flex:1 1 auto;width:100%}}',
 
     '@media (prefers-reduced-motion: no-preference){',
     '.ck-btn,.ck-x,.ck-fab,.ck-switch,.ck-switch::after{transition:background-color .16s ease,border-color .16s ease,color .16s ease,left .16s ease,right .16s ease}}'
@@ -376,350 +353,55 @@
     return (typeof window !== 'undefined' && window.ConsentKit) || null;
   }
 
-  /* -------------------------------------------------------------- branding */
-
-  /* Restraint is the design rule here, not a matter of taste.
-
-     A consent banner is shown to every visitor of the site that installs it,
-     and it asks them a legal question. An agency logo, agency colours and an
-     attribution line all at once make it read as the agency's dialogue rather
-     than the site's own — visitors trust it less, and the banner competes with
-     the page it sits on.
-
-     So: everything in `branding` is off unless asked for, and the recommended
-     shape is one small logo (16–20px) OR one attribution line — with
-     theme.accent left matching the HOST SITE, never the agency's colour.
-     Nothing here may outweigh the consent buttons. */
-
-  /* SVG sanitiser.
-
-     branding.logo may be a raw SVG string coming from a server-rendered config
-     or a WordPress admin field. That is untrusted input, so it never reaches
-     innerHTML: `<svg onload=...>` executes on insertion, and so do SMIL
-     `<animate onbegin=...>` and `<foreignObject><img onerror=...>`.
-
-     Approach chosen: parse inert, then REBUILD rather than strip-and-adopt.
-     DOMParser with 'image/svg+xml' yields a detached, non-live document where
-     nothing runs. We then walk that tree and construct a brand-new tree with
-     createElementNS, copying across only allowlisted tags and attributes.
-
-     Rebuilding is what makes this safe rather than merely careful. The rejected
-     alternative — importNode/appendChild the parsed tree after deleting bad
-     attributes — arms every inline handler at the moment of adoption, so a
-     single missed attribute name is live code. Here an attribute we do not
-     recognise is simply never written, so the failure mode is a missing
-     decoration, not script execution. Allowlists (closed) beat blocklists
-     (open-ended) for the same reason.
-
-     Deliberately excluded, each for a concrete reason:
-       script                       - obvious
-       foreignObject                - escape hatch back into full HTML
-       use, image                   - can reference/fetch external documents
-       a                            - javascript: navigation inside the logo
-       style                        - CSS escapes, and it would leak out of the
-                                      logo into our own shadow-root styling
-       animate/set/animateTransform - SMIL takes an attributeName and can drive
-                                      arbitrary attributes, plus on* timing events
-
-     Anything unexpected bails to null (no logo) rather than partially rendering. */
-
-  var SVG_NS = 'http://www.w3.org/2000/svg';
-
-  var SVG_TAGS = {
-    svg: 1, g: 1, path: 1, circle: 1, ellipse: 1, rect: 1, line: 1,
-    polyline: 1, polygon: 1, defs: 1, title: 1, desc: 1,
-    lineargradient: 1, radialgradient: 1, stop: 1, clippath: 1, mask: 1
-  };
+  /* ------------------------------------------------- branding (optional file) */
 
-  // Presentation/geometry only. No href/xlink:href in any form, no on* events.
-  var SVG_ATTRS = {
-    viewbox: 'viewBox', preserveaspectratio: 'preserveAspectRatio',
-    xmlns: 'xmlns', version: 'version',
-    d: 'd', fill: 'fill', 'fill-rule': 'fill-rule', 'fill-opacity': 'fill-opacity',
-    'clip-rule': 'clip-rule', 'clip-path': 'clip-path', mask: 'mask',
-    stroke: 'stroke', 'stroke-width': 'stroke-width', 'stroke-linecap': 'stroke-linecap',
-    'stroke-linejoin': 'stroke-linejoin', 'stroke-dasharray': 'stroke-dasharray',
-    'stroke-dashoffset': 'stroke-dashoffset', 'stroke-opacity': 'stroke-opacity',
-    'stroke-miterlimit': 'stroke-miterlimit',
-    opacity: 'opacity', transform: 'transform',
-    x: 'x', y: 'y', x1: 'x1', y1: 'y1', x2: 'x2', y2: 'y2',
-    cx: 'cx', cy: 'cy', r: 'r', rx: 'rx', ry: 'ry',
-    width: 'width', height: 'height', points: 'points',
-    offset: 'offset', 'stop-color': 'stop-color', 'stop-opacity': 'stop-opacity',
-    gradientunits: 'gradientUnits', gradienttransform: 'gradientTransform',
-    spreadmethod: 'spreadMethod', clippathunits: 'clipPathUnits',
-    maskunits: 'maskUnits', maskcontentunits: 'maskContentUnits',
-    id: 'id', 'class': 'class'
-  };
+  /* Branding lives in src/ck-ui-branding.js and is OPTIONAL. Everything below
+     asks for the extension and does nothing when it is absent, so a build
+     without that file draws no logo, no attribution line and no branding CSS —
+     and errors nowhere. See that file's header for the load-order contract.
 
-  /* Every sanitised logo gets a unique id namespace.
-
-     buildBrandLogo() runs twice per mount (banner + panel head), and doubles
-     again when logoDark is set — so one shadow root can hold four copies of the
-     same asset. A gradient/clipPath/mask id like "g" would then appear four
-     times, and url(#g) resolves to the FIRST match in the tree: the dark logo
-     would silently paint with the light logo's gradient stops. Prefixing every
-     id per instance, and rewriting the url(#…) references in the same pass,
-     keeps each copy self-contained. */
-  var svgSeq = 0;
-
-  // url(#localRef) and plain values only — no url(http…), no javascript:.
-  // `prefix` namespaces id definitions and their url(#…) references together.
-  function safeAttrValue(name, value, prefix) {
-    var v = String(value == null ? '' : value);
-    // Strip nothing; reject outright. Control chars are how javascript: is hidden.
-    var probe = v.replace(/[\u0000-\u0020\u007f-\u00a0]/g, '').toLowerCase();
-    if (probe.indexOf('javascript:') !== -1) return null;
-    if (probe.indexOf('data:text') !== -1) return null;
-    if (probe.indexOf('&#') !== -1) return null;
-    // Any url() must be a same-document fragment reference.
-    if (probe.indexOf('url(') !== -1 && !/^url\(#[a-z0-9_.:-]+\)$/i.test(probe)) return null;
-    if (name === 'id') {
-      if (!/^[a-zA-Z][\w.:-]*$/.test(v)) return null;
-      return prefix + v;
-    }
-    // Rewrite a reference so it points at THIS instance's namespaced definition.
-    var m = /^url\(#([\w.:-]+)\)$/.exec(v);
-    if (m) return 'url(#' + prefix + m[1] + ')';
-    return v;
-  }
-
-  function rebuildSvgNode(src, out, depth, prefix) {
-    if (depth > 24) return false;                       // pathological nesting
-    var kids = src.childNodes;
-    for (var i = 0; i < kids.length; i++) {
-      var n = kids[i];
-      if (n.nodeType === 3) {                           // text (only inside title/desc)
-        var pt = out.nodeName.toLowerCase();
-        if (pt === 'title' || pt === 'desc') out.appendChild(document.createTextNode(n.nodeValue));
-        continue;
-      }
-      if (n.nodeType !== 1) continue;                   // drop comments, CDATA, PIs
-      var tag = String(n.nodeName || '').toLowerCase();
-      if (!Object.prototype.hasOwnProperty.call(SVG_TAGS, tag)) return false;  // bail, don't skip
-      var fresh = document.createElementNS(SVG_NS, n.nodeName);
-      var attrs = n.attributes || [];
-      for (var a = 0; a < attrs.length; a++) {
-        var an = String(attrs[a].name || '').toLowerCase();
-        if (/^on/i.test(an)) return false;              // event handler present -> reject whole logo
-        if (an === 'href' || an === 'xlink:href' || an.indexOf('xlink') === 0) return false;
-        if (!Object.prototype.hasOwnProperty.call(SVG_ATTRS, an)) continue;    // unknown -> just omit
-        var val = safeAttrValue(an, attrs[a].value, prefix);
-        if (val === null) continue;
-        try { fresh.setAttribute(SVG_ATTRS[an], val); } catch (e) { /* ignore */ }
-      }
-      if (!rebuildSvgNode(n, fresh, depth + 1, prefix)) return false;
-      out.appendChild(fresh);
-    }
-    return true;
-  }
-
-  // Raw SVG string -> freshly built, safe <svg> element, or null.
-  function sanitizeSvg(markup) {
-    var s = str(markup);
-    if (!s || s.length > 512 * 1024) return null;
-    if (!/^\s*<svg[\s>]/i.test(s)) return null;         // must be an SVG root
-    var doc;
-    try {
-      doc = new DOMParser().parseFromString(s, 'image/svg+xml');
-    } catch (e) { return null; }
-    if (!doc) return null;
-    if (doc.getElementsByTagName('parsererror').length) return null;
-    var srcRoot = doc.documentElement;
-    if (!srcRoot || String(srcRoot.nodeName).toLowerCase() !== 'svg') return null;
-
-    // Unique per sanitised instance, so four copies of one asset never collide.
-    var prefix = 'ck' + (++svgSeq) + '-';
-
-    var svg = document.createElementNS(SVG_NS, 'svg');
-    var ra = srcRoot.attributes || [];
-    for (var i = 0; i < ra.length; i++) {
-      var an = String(ra[i].name || '').toLowerCase();
-      if (/^on/i.test(an)) return null;
-      if (an.indexOf('xlink') === 0 || an === 'href') return null;
-      if (!Object.prototype.hasOwnProperty.call(SVG_ATTRS, an)) continue;
-      var val = safeAttrValue(an, ra[i].value, prefix);
-      if (val === null) continue;
-      try { svg.setAttribute(SVG_ATTRS[an], val); } catch (e) {}
-    }
-    if (!rebuildSvgNode(srcRoot, svg, 0, prefix)) return null;
-    return svg;
-  }
-
-  /* Image-source logos.
-     Only http(s) and image data: URIs. data:text/html is a navigation/XSS
-     vector via <img>-adjacent contexts, and any other scheme is rejected.
-
-     NOTE FOR INTEGRATORS: an https:// logo is an external network request that
-     fires BEFORE the visitor has consented to anything. It leaks IP, User-Agent
-     and Referer to whoever hosts the file. ConsentKit therefore recommends an
-     inline SVG string or a data: URI, both of which are entirely local. An
-     external URL still works — it is the integrator's call, made knowingly —
-     and we send referrerpolicy=no-referrer to reduce what leaks. */
-  function safeImgSrc(value) {
-    var v = str(value);
-    if (!v) return null;
-    if (/^https?:\/\//i.test(v)) return v;
-    if (/^data:image\/(svg\+xml|png|jpe?g|webp|gif|avif)[;,]/i.test(v)) return v;
-    return null;
-  }
-
-  // Default 18px and a 32px ceiling: the logo is a signature, not a header.
-  // Anything taller starts competing with the banner title.
-  function clampLogoHeight(v) {
-    var n = (typeof v === 'number') ? v : parseFloat(v);
-    if (!isFinite(n)) return 18;
-    if (n < 14) return 14;
-    if (n > 32) return 32;
-    return Math.round(n);
-  }
-
-  // Only http(s) links are made clickable; javascript:/data: never become hrefs.
-  function safeLinkUrl(value) {
-    var v = str(value);
-    if (!v) return null;
-    return /^https?:\/\//i.test(v) ? v : null;
-  }
-
-  function brandingCfg(cfg) {
-    var b = cfg && cfg.branding;
-    return (b && typeof b === 'object' && !Array.isArray(b)) ? b : null;
+     The extension is handed `host` on every DOM-producing call: ck-ui owns el()
+     and the localised strings (T is reassigned per mount), so passing them in
+     keeps one dictionary and one set of helpers rather than two copies. */
+  function brandingExt() {
+    var ck = api();
+    var ext = ck && ck._uiExtensions;
+    var b = ext && ext.branding;
+    return (b && typeof b === 'object') ? b : null;
   }
 
-  // One logo node (inline SVG or <img>), already sanitised. null when unusable.
-  function buildLogoNode(source, alt, decorative) {
-    if (!source) return null;
-    var node = null;
-    var s = str(source);
-    if (!s) return null;
-
-    if (/^\s*</.test(s)) {
-      node = sanitizeSvg(s);                       // raw markup -> rebuilt SVG
-      if (node) node.classList.add('ck-brand__logo');
-    } else {
-      var src = safeImgSrc(s);
-      if (!src) return null;
-      node = el('img', 'ck-brand__logo');
-      node.setAttribute('referrerpolicy', 'no-referrer');
-      node.setAttribute('decoding', 'async');
-      node.src = src;
-      node.alt = decorative ? '' : (alt || '');
-    }
-    // The SVG carries no accessible name of its own; the wrapper supplies one
-    // (or hides it, when a sibling already names the logo).
-    if (node && node.nodeName.toLowerCase() === 'svg') {
-      node.setAttribute('aria-hidden', 'true');
-      node.setAttribute('focusable', 'false');
-    }
-    return node;
+  function extHost() {
+    return { el: el, str: str, T: T };
   }
 
-  /* Logo block for a banner/panel header.
-
-     Dark theme: branding.logoDark, when supplied, is rendered as a second node
-     and swapped purely in CSS. When it is absent the single main logo shows in
-     both themes — which is why the shipped ECOM Consult asset (wordmark
-     fill="white", built for dark backgrounds) belongs in logoDark, with a
-     dark-ink variant in logo. An <img>/data: logo cannot be recoloured by our
-     CSS at all, so two assets are the only route there; an inline SVG could in
-     principle inherit currentColor, but only if the asset is authored that way. */
   function buildBrandLogo(cfg) {
-    var b = brandingCfg(cfg);
-    if (!b) return null;
-
-    var alt = str(b.logoAlt) || '';
-    var main = buildLogoNode(b.logo, alt, false);
-    if (!main) return null;                        // no valid logo -> render nothing
-
-    var dark = buildLogoNode(b.logoDark, alt, false);
-
-    var wrap = el('div', 'ck-brand');
-    if (dark) {
-      wrap.classList.add('ck-brand__has-dark');
-      main.classList.add('ck-brand__light');
-      dark.classList.add('ck-brand__dark');
-    }
+    var b = brandingExt();
+    return (b && typeof b.buildBrandLogo === 'function') ? b.buildBrandLogo(cfg, extHost()) : null;
+  }
 
-    var link = safeLinkUrl(b.logoUrl);
-    var host_ = wrap;
-    if (link) {
-      var a = el('a', 'ck-brand__link');
-      a.href = link;
-      a.target = '_blank';
-      a.rel = 'noopener noreferrer';
-      // Links are focusable by nature; the accessible name comes from logoAlt.
-      a.setAttribute('aria-label', alt || 'ConsentKit');
-      host_ = a;
-      wrap.appendChild(a);
-    }
-    host_.appendChild(main);
-    if (dark) host_.appendChild(dark);
-
-    // A non-linked logo must not be a tab stop. The <svg>/<img> is aria-hidden
-    // or alt="", so a visually-hidden-free text alternative is supplied here
-    // for the image case only when it is not already announced by the <img> alt.
-    if (!link && alt && main.nodeName.toLowerCase() === 'svg') {
-      wrap.setAttribute('role', 'img');
-      wrap.setAttribute('aria-label', alt);
-    }
-    return wrap;
+  function buildPoweredBy(cfg) {
+    var b = brandingExt();
+    return (b && typeof b.buildPoweredBy === 'function') ? b.buildPoweredBy(cfg, extHost()) : null;
   }
 
-  // Per-mount CSS for logo height + the dark/light swap. Mirrors buildThemeCss.
   function buildBrandCss(cfg) {
-    var b = brandingCfg(cfg);
-    if (!b) return '';
-    var h = clampLogoHeight(b.logoHeight);
-    var out = [':host{--ck-logo-h:' + h + 'px}'];
-
-    var theme = (cfg && cfg.theme) || {};
-    var mode = theme.mode;
-    if (mode !== 'light' && mode !== 'dark') mode = 'auto';
-
-    // Same cascade shape as buildThemeCss so the logo always agrees with the
-    // palette: auto mode follows prefers-color-scheme but a forced .ck-mode-light
-    // still wins, and .ck-mode-dark forces the dark asset outright.
-    function swap(prefix) {
-      return prefix + ' .ck-brand__has-dark .ck-brand__light{display:none}\n' +
-             prefix + ' .ck-brand__has-dark .ck-brand__dark{display:block}';
-    }
-    if (mode === 'auto') {
-      out.push('@media (prefers-color-scheme: dark){\n' +
-        swap(':host(:not(.ck-mode-light))') + '\n}');
-    }
-    out.push(swap(':host(.ck-mode-dark)'));
-    return out.join('\n');
+    var b = brandingExt();
+    return (b && typeof b.buildBrandCss === 'function') ? (b.buildBrandCss(cfg) || '') : '';
   }
 
-  /* Powered-by line. true -> localised default; object -> caller's text/url.
-     Rendered after the actions in DOM order and styled quiet on purpose. */
-  function buildPoweredBy(cfg) {
-    var b = brandingCfg(cfg);
-    if (!b) return null;
-    var pb = b.poweredBy;
-    if (!pb) return null;                          // false/undefined -> nothing
-
-    var text, url = null;
-    if (pb === true) {
-      text = T.poweredBy;                          // en fallback guaranteed by STR_KEYS
-    } else if (typeof pb === 'object' && !Array.isArray(pb)) {
-      text = str(pb.text) || T.poweredBy;
-      url = safeLinkUrl(pb.url);
-    } else {
-      return null;
-    }
+  /* Static branding rules, appended to the base sheet at mount. Empty string
+     when the extension is absent — no dead .ck-brand CSS in the build. */
+  function brandingCss() {
+    var b = brandingExt();
+    return (b && typeof b.css === 'function') ? ('\n' + b.css()) : '';
+  }
 
-    var p = el('p', 'ck-powered');
-    if (url) {
-      var a = el('a', null, text);
-      a.href = url;
-      a.target = '_blank';
-      a.rel = 'noopener noreferrer';
-      p.appendChild(a);
-    } else {
-      p.appendChild(document.createTextNode(text));
-    }
-    return p;
+  /* Structural: branding produces DOM, so a config that gains a logo must
+     remount. '-' whenever there is no branding at all, which keeps an
+     unbranded page's signature identical to what it was before the split. */
+  function brandSignature(cfg) {
+    var b = brandingExt();
+    return (b && typeof b.brandSignature === 'function') ? b.brandSignature(cfg) : '-';
   }
 
   function safeState() {
@@ -779,20 +461,138 @@
   /* ----------------------------------------------------------------- theme */
 
   // Built-in palettes. Dark values are picked for >= 4.5:1 text contrast.
-  var LIGHT_RADIUS = '10px';
+  // Card backgrounds follow SPEC V1.6 §1: light #ffffff, dark #1c1c1e. The dark
+  // card is a NEUTRAL grey, so line/soft/muted below are neutral too — the old
+  // blue-tinted #333C4F/#232B3A were derived from the old blue-tinted #1A202D
+  // and would read as a colour cast against #1c1c1e.
+  var DEFAULT_RADIUS = { card: 16, button: 8 };
+  var RADIUS_MIN = 0, RADIUS_MAX = 32;
+  var SYSTEM_FONT = 'system-ui,-apple-system,"Segoe UI",Roboto,sans-serif';
+
   var LIGHT = {
-    bg: '#fff', ink: '#1B2437', accent: '#2B50D8', onAccent: '#fff',
+    bg: '#ffffff', ink: '#1B2437', accent: '#2B50D8', onAccent: '#ffffff',
     muted: '#5b6478', line: '#dfe3ea', soft: '#f4f6f9'
   };
   var DARK = {
-    bg: '#1A202D', ink: '#E6EAF4', accent: '#7B96F0', onAccent: '#12182A',
-    muted: '#A6B0C6', line: '#333C4F', soft: '#232B3A'
+    bg: '#1c1c1e', ink: '#E9E9EB', accent: '#7B96F0', onAccent: '#12182A',
+    muted: '#A0A0A8', line: '#3A3A3C', soft: '#2C2C2E'
   };
 
   function str(v) {
     return (typeof v === 'string' && v.trim()) ? v.trim() : null;
   }
 
+  /* ------------------------------------------------------------- contrast */
+
+  /* WCAG 2.1 relative luminance and contrast ratio. Pure, hex-only: everything
+     that reaches them has already passed sanitizeCssValue(), and a value that
+     is not a hex triple (a colour name, an rgb() string, a color-mix()) simply
+     cannot be measured here — those return null and every caller then leaves
+     the colour exactly as the author wrote it rather than guessing. Silently
+     "fixing" a colour we cannot read would be worse than not fixing it. */
+
+  // '#abc' | '#aabbcc' | '#aabbccdd' -> [r,g,b] 0..255, or null.
+  function parseHex(hex) {
+    var s = str(hex);
+    if (!s || s.charAt(0) !== '#') return null;
+    s = s.slice(1);
+    if (s.length === 3 || s.length === 4) {
+      s = s.charAt(0) + s.charAt(0) + s.charAt(1) + s.charAt(1) + s.charAt(2) + s.charAt(2);
+    } else if (s.length === 6 || s.length === 8) {
+      s = s.slice(0, 6);
+    } else {
+      return null;
+    }
+    if (!/^[0-9a-fA-F]{6}$/.test(s)) return null;
+    return [
+      parseInt(s.slice(0, 2), 16),
+      parseInt(s.slice(2, 4), 16),
+      parseInt(s.slice(4, 6), 16)
+    ];
+  }
+
+  function toHex(rgb) {
+    var out = '#';
+    for (var i = 0; i < 3; i++) {
+      var v = Math.round(rgb[i]);
+      if (v < 0) v = 0; else if (v > 255) v = 255;
+      out += (v + 0x100).toString(16).slice(1);
+    }
+    return out;
+  }
+
+  // WCAG 2.1: L = 0.2126R + 0.7152G + 0.0722B over linearised channels.
+  function relativeLuminance(hex) {
+    var rgb = parseHex(hex);
+    if (!rgb) return null;
+    var lin = [];
+    for (var i = 0; i < 3; i++) {
+      var c = rgb[i] / 255;
+      lin.push(c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+    }
+    return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
+  }
+
+  // (L1 + 0.05) / (L2 + 0.05), lighter first. null when either side is unreadable.
+  function contrastRatio(a, b) {
+    var la = relativeLuminance(a);
+    var lb = relativeLuminance(b);
+    if (la === null || lb === null) return null;
+    var hi = la > lb ? la : lb;
+    var lo = la > lb ? lb : la;
+    return (hi + 0.05) / (lo + 0.05);
+  }
+
+  var WHITE = '#ffffff';
+  var NEAR_BLACK = '#161616';   // SPEC §1: white or #161616, whichever contrasts more
+
+  /* SPEC §1, the TEXT rule: keep the author's fg when it clears `min` against
+     bg; otherwise swap to white or #161616 — whichever wins. Unreadable input
+     (a colour name, rgb(), a missing value) is returned untouched with
+     adjusted:false: the author sees their own colour, not a silent rewrite. */
+  function ensureContrast(fg, bg, min) {
+    var floor = typeof min === 'number' && min > 0 ? min : 4.5;
+    var have = contrastRatio(fg, bg);
+    if (have === null) return { color: fg, adjusted: false, ratio: have };
+    if (have >= floor) return { color: fg, adjusted: false, ratio: have };
+    var rw = contrastRatio(WHITE, bg);
+    var rb = contrastRatio(NEAR_BLACK, bg);
+    var pick = (rw !== null && rb !== null && rw >= rb) ? WHITE : NEAR_BLACK;
+    return { color: pick, adjusted: true, ratio: contrastRatio(pick, bg) };
+  }
+
+  /* SPEC §1, the BORDER rule: an outline button's border must clear >= 3:1
+     against the CARD background, so the button is visible as a button at all.
+     Stepwise rather than a jump to black/white: a brand colour that is only
+     slightly too pale should stay recognisably the brand colour. Direction is
+     chosen by which way there is room to move — away from the card. */
+  function stepToContrast(color, bg, min) {
+    var floor = typeof min === 'number' && min > 0 ? min : 3;
+    var have = contrastRatio(color, bg);
+    if (have === null) return { color: color, adjusted: false, ratio: have };
+    if (have >= floor) return { color: color, adjusted: false, ratio: have };
+
+    var rgb = parseHex(color);
+    var bgLum = relativeLuminance(bg);
+    // Light card -> darken the border; dark card -> lighten it.
+    var darken = bgLum > 0.5;
+    var cur = [rgb[0], rgb[1], rgb[2]];
+    // 5% steps of the remaining range; 40 steps always reaches pure black/white.
+    for (var i = 0; i < 40; i++) {
+      for (var c = 0; c < 3; c++) {
+        cur[c] = darken ? cur[c] - (cur[c] * 0.06) - 2 : cur[c] + ((255 - cur[c]) * 0.06) + 2;
+        if (cur[c] < 0) cur[c] = 0; else if (cur[c] > 255) cur[c] = 255;
+      }
+      var next = toHex(cur);
+      var r = contrastRatio(next, bg);
+      if (r !== null && r >= floor) return { color: next, adjusted: true, ratio: r };
+    }
+    var last = toHex(cur);
+    return { color: last, adjusted: true, ratio: contrastRatio(last, bg) };
+  }
+
+  /* ------------------------------------------------------- config grammar */
+
   /* Config values are interpolated into the TEXT of a generated stylesheet, so
      an unvalidated value can close the declaration and open rules of its own
      ("10px;}.ck-btn--filled{display:none" hides "Reject all"). config.theme is
@@ -803,10 +603,11 @@
      fit — a broken colour is a cosmetic bug, an injected rule is a defacement
      and can strip the reject button, which is a consent-validity problem.
 
-     Sanitising happens at the entry points in buildThemeCss (the eight
-     config reads), not in tokenBlock(): by the time values reach derive() and
-     color-mix() they are already clean, and the built-in constants and
-     generated color-mix() strings must not be re-validated by this grammar. */
+     Sanitising happens at the entry points (the config reads in
+     resolveButtonStyles and buildThemeCss), not in tokenBlock(): by the time
+     values reach derive() and color-mix() they are already clean, and the
+     built-in constants and generated color-mix()/hex strings must not be
+     re-validated by this grammar. */
   var RE_CSS = {
     // #RGB / #RRGGBB / #RRGGBBAA (and #RGBA), rgb()/rgba()/hsl()/hsla() with
     // numbers, commas, spaces, %, decimals and slashes, or a bare colour name.
@@ -825,8 +626,179 @@
     return v;
   }
 
+  // theme.radius: {card,button} in px, clamped 0..32. A bare string or number
+  // is the pre-0.5.0 form and still works: it sets the CARD radius, the button
+  // keeps its own default. Anything unreadable falls back to the default.
+  function clampRadius(v, fallback) {
+    var n;
+    if (typeof v === 'number') n = v;
+    else if (typeof v === 'string' && /^\d+(\.\d+)?(px)?$/.test(v.trim())) n = parseFloat(v);
+    else return fallback;
+    if (!isFinite(n)) return fallback;
+    if (n < RADIUS_MIN) n = RADIUS_MIN;
+    if (n > RADIUS_MAX) n = RADIUS_MAX;
+    return Math.round(n);
+  }
+
+  function resolveRadius(theme) {
+    var r = theme && theme.radius;
+    if (r && typeof r === 'object') {
+      return {
+        card: clampRadius(r.card, DEFAULT_RADIUS.card),
+        button: clampRadius(r.button, DEFAULT_RADIUS.button)
+      };
+    }
+    // Legacy scalar ('10px'): card only.
+    if (typeof r === 'string' || typeof r === 'number') {
+      return { card: clampRadius(r, DEFAULT_RADIUS.card), button: DEFAULT_RADIUS.button };
+    }
+    return { card: DEFAULT_RADIUS.card, button: DEFAULT_RADIUS.button };
+  }
+
+  // theme.font: 'system' keeps the pre-0.5.0 stack; anything else (including the
+  // default) inherits the host page's family. Sizes stay explicit either way —
+  // this is font-FAMILY, deliberately not the `font` shorthand, which would drag
+  // in the page's size, weight and line-height and break the fixed geometry.
+  function resolveFont(theme) {
+    return (theme && theme.font === 'system') ? SYSTEM_FONT : 'inherit';
+  }
+
+  /* --------------------------------------------------- button resolution */
+
+  var BTN_ROLES = ['accept', 'reject', 'settings'];
+  var DEFAULT_VARIANT = { accept: 'filled', reject: 'filled', settings: 'outline' };
+
+  var warnedVariant = false;
+  // Debug-only, once per page: a config error worth surfacing to whoever is
+  // looking, but never console noise on a visitor's production page. Checked
+  // lazily because ck-debug.js loads AFTER this file and flips `active` later.
+  function warnVariantMismatch() {
+    if (warnedVariant) return;
+    var dbg = (typeof window !== 'undefined') && window.__ckDebug;
+    if (!dbg || dbg.active !== true) return;
+    warnedVariant = true;
+    try {
+      console.warn('[ConsentKit] theme.buttons.accept.variant and .reject.variant differ. ' +
+        'Accept and reject must look identical (equal-buttons invariant, SPEC §1) — ' +
+        'accept\'s variant is used for both.');
+    } catch (e) { /* noop */ }
+  }
+
+  /* Resolve the three buttons for ONE mode into concrete, contrast-checked
+     colours. Pure: takes the theme object and 'light'|'dark', returns plain
+     data. This is the single source of truth the generated stylesheet, the
+     debug panel and (per SPEC §3) the cabinet all read — "один код — одни
+     числа": nothing recomputes these numbers a second time.
+
+     `palette` is optional and lets buildThemeCss pass the ALREADY-RESOLVED
+     accent/card colours for the mode, so a theme.dark.accent is honoured. */
+  function resolveButtonStyles(theme, mode, palette) {
+    var t = (theme && typeof theme === 'object') ? theme : {};
+    var base = mode === 'dark' ? DARK : LIGHT;
+    var pal = (palette && typeof palette === 'object') ? palette : {};
+
+    var cardBg = sanitizeCssValue('color', pal.bg, base.bg);
+    var accent = sanitizeCssValue('color', pal.accent, base.accent);
+    // theme.dark.onAccent stays meaningful: it is the GIVEN fg for filled
+    // buttons in that mode. The >= 4.5 rule may still override it.
+    var onAccent = sanitizeCssValue('color', pal.onAccent, base.onAccent);
+
+    var cfg = (t.buttons && typeof t.buttons === 'object') ? t.buttons : {};
+
+    // Equal-buttons invariant (SPEC §1): accept and reject share size and
+    // weight, so they must share the variant too. When they disagree, accept
+    // wins — silently for a visitor, loudly in debug mode.
+    function variantOf(role) {
+      var c = cfg[role];
+      var v = c && c.variant;
+      return (v === 'filled' || v === 'outline') ? v : DEFAULT_VARIANT[role];
+    }
+    var acceptVariant = variantOf('accept');
+    var rejectVariant = variantOf('reject');
+    if (acceptVariant !== rejectVariant) warnVariantMismatch();
+
+    var variants = {
+      accept: acceptVariant,
+      reject: acceptVariant,          // invariant: always accept's
+      settings: variantOf('settings')
+    };
+
+    /* The accent as TEXT on the card. Same >= 4.5 rule, same function, one
+       number: links, «Подробнее», the cookie-table summary and the floating
+       button's icon all read the token this produces, so none of them can
+       drift from what the debug panel and the cabinet quote. Note the
+       measurement is against cardBg — an accent that is fine inside a filled
+       button can still be unreadable on the card behind it. */
+    var linkRes = ensureContrast(accent, cardBg, 4.5);
+
+    var out = {
+      mode: mode,
+      cardBg: cardBg,
+      accent: accent,
+      link: {
+        color: linkRes.color,
+        ratio: linkRes.ratio,
+        adjusted: linkRes.adjusted,
+        against: cardBg
+      },
+      buttons: {}
+    };
+
+    for (var i = 0; i < BTN_ROLES.length; i++) {
+      var role = BTN_ROLES[i];
+      var c = (cfg[role] && typeof cfg[role] === 'object') ? cfg[role] : {};
+      var variant = variants[role];
+
+      var bw = (c.borderWidth === 2 || c.borderWidth === '2') ? 2 : 1;
+      var rec;
+
+      if (variant === 'filled') {
+        // bg: author's, else the accent. fg: author's, else onAccent for the
+        // default accent fill, then checked against the resolved bg.
+        var bg = sanitizeCssValue('color', c.bg, accent);
+        var wantFg = sanitizeCssValue('color', c.fg, onAccent);
+        var fgRes = ensureContrast(wantFg, bg, 4.5);
+        var bd = sanitizeCssValue('color', c.border, bg);
+        rec = {
+          variant: 'filled',
+          bg: bg,
+          fg: fgRes.color,
+          border: bd,
+          borderWidth: bw,
+          ratio: fgRes.ratio,
+          adjusted: fgRes.adjusted,
+          against: bg
+        };
+      } else {
+        // outline: transparent fill, so everything is measured against the CARD.
+        // border >= 3:1 with the card (stepped), text = the border colour with
+        // the >= 4.5 rule against the card.
+        var wantBd = sanitizeCssValue('color', c.border, accent);
+        var bdRes = stepToContrast(wantBd, cardBg, 3);
+        var wantTx = str(c.fg) ? sanitizeCssValue('color', c.fg, bdRes.color) : bdRes.color;
+        var txRes = ensureContrast(wantTx, cardBg, 4.5);
+        rec = {
+          variant: 'outline',
+          bg: sanitizeCssValue('color', c.bg, 'transparent'),
+          fg: txRes.color,
+          border: bdRes.color,
+          borderWidth: bw,
+          ratio: txRes.ratio,
+          adjusted: txRes.adjusted || bdRes.adjusted,
+          borderRatio: bdRes.ratio,
+          borderAdjusted: bdRes.adjusted,
+          against: cardBg
+        };
+      }
+      out.buttons[role] = rec;
+    }
+    return out;
+  }
+
+  /* ------------------------------------------------------------- stylesheet */
+
   // One :host{} block of custom properties for a resolved palette.
-  function tokenBlock(sel, p, radius) {
+  function tokenBlock(sel, p, extra) {
     var d = [
       '--ck-bg:' + p.bg,
       '--ck-ink:' + p.ink,
@@ -836,7 +808,28 @@
       '--ck-line:' + p.line,
       '--ck-soft:' + p.soft
     ];
-    if (radius) d.push('--ck-radius:' + radius);
+    // Per-button tokens: the ROLE classes in the static sheet read these, so a
+    // filled/outline change is a value change and never a class swap. That is
+    // what keeps a theme.buttons edit on the applyTheme()-only path — no
+    // remount, and signature() need not know about buttons at all.
+    // Resolved by resolveButtonStyles alongside the buttons, threaded in the
+    // same way as __buttons: one pass per mode, so the light and dark blocks
+    // each carry their own contrast-checked link colour.
+    if (p.__link) d.push('--ck-link:' + p.__link.color);
+    var btns = p.__buttons;
+    if (btns) {
+      for (var i = 0; i < BTN_ROLES.length; i++) {
+        var role = BTN_ROLES[i];
+        var b = btns[role];
+        d.push('--ck-' + role + '-bg:' + b.bg);
+        d.push('--ck-' + role + '-fg:' + b.fg);
+        d.push('--ck-' + role + '-bd:' + b.border);
+        d.push('--ck-' + role + '-bw:' + b.borderWidth + 'px');
+      }
+    }
+    if (extra) {
+      for (var k = 0; k < extra.length; k++) d.push(extra[k]);
+    }
     return sel + '{' + d.join(';') + '}';
   }
 
@@ -858,11 +851,9 @@
   function buildThemeCss(cfg) {
     var theme = (cfg && cfg.theme) || {};
     var dk = (theme.dark && typeof theme.dark === 'object') ? theme.dark : {};
-    // Every value below is interpolated into stylesheet text — see
-    // sanitizeCssValue(). A rejected value falls back to the token default, so
-    // derive()'s "bg !== base.bg" check collapses to exactly the built-in
-    // palette rather than a half-substituted one.
-    var radius = sanitizeCssValue('length', theme.radius, LIGHT_RADIUS);
+
+    var radius = resolveRadius(theme);
+    var font = resolveFont(theme);
 
     // Light: config overrides on top of the built-in light palette.
     var light = derive(LIGHT,
@@ -872,17 +863,37 @@
 
     // Dark: theme.dark overrides on top of the built-in dark palette.
     // A light-only theme.accent deliberately does NOT carry into dark — the
-    // default #2B50D8 on #1A202D is ~2.5:1 and would fail AA.
+    // default #2B50D8 on #1c1c1e is ~2.4:1 and would fail AA.
     var dark = derive(DARK,
       sanitizeCssValue('color', dk.bg, DARK.bg),
       sanitizeCssValue('color', dk.ink, DARK.ink));
     if (str(dk.accent)) dark.accent = sanitizeCssValue('color', dk.accent, DARK.accent);
     if (str(dk.onAccent)) dark.onAccent = sanitizeCssValue('color', dk.onAccent, DARK.onAccent);
 
+    // Buttons are resolved per mode against that mode's real card colour, so a
+    // custom dark card changes the outline border the same way a custom light
+    // one does.
+    var lightBtn = resolveButtonStyles(theme, 'light', light);
+    var darkBtn = resolveButtonStyles(theme, 'dark', dark);
+    light.__buttons = lightBtn.buttons;
+    dark.__buttons = darkBtn.buttons;
+    light.__link = lightBtn.link;
+    dark.__link = darkBtn.link;
+
     var mode = theme.mode;
     if (mode !== 'light' && mode !== 'dark') mode = 'auto';
 
-    var out = [tokenBlock(':host', light, radius)];
+    // Geometry and family are mode-independent, so they ride on the base block.
+    var rootExtra = [
+      '--ck-radius-card:' + radius.card + 'px',
+      '--ck-radius-btn:' + radius.button + 'px',
+      // Kept as an alias so any integrator CSS (and older builds' rules) that
+      // reads --ck-radius still lands on the card radius.
+      '--ck-radius:' + radius.card + 'px',
+      '--ck-font:' + font
+    ];
+
+    var out = [tokenBlock(':host', light, rootExtra)];
     if (mode === 'auto') {
       // forced-light class must still beat a dark system preference
       out.push('@media (prefers-color-scheme: dark){' +
@@ -901,7 +912,8 @@
       ':host(.ck-mode-dark){--ck-muted:' + DARK.muted + ';--ck-line:' + DARK.line +
       ';--ck-soft:' + DARK.soft + '}}');
 
-    return { css: out.join('\n'), mode: mode };
+    return { css: out.join('\n'), mode: mode, radius: radius, font: font,
+             light: lightBtn, dark: darkBtn };
   }
 
   function applyTheme(cfg) {
@@ -1002,6 +1014,33 @@
     return wrap;
   }
 
+  /* SPEC V1.6 §2 — what «Подробнее» does.
+
+     Before 0.5.0 the link was rendered with href="#" and NO click handler: it
+     did nothing but jump to the top of the page. There are now three honest
+     outcomes, and the default depends on whether a policy address exists —
+     'settings' without one, 'policy' with one, so an integrator who only
+     supplies a URL gets the link they obviously meant. This is why
+     detailsAction must NOT carry a default in the core's DEFAULT_CONFIG: a
+     merged concrete value would make the URL-sensitive default unreachable.
+
+     'policy' with no usable URL degrades to 'settings' rather than rendering a
+     dead link. Only http(s) is accepted — javascript: and data: URLs in a
+     link the visitor is invited to click are an XSS vector, and a relative
+     path cannot be validated here without a base. */
+  function resolveDetails(cfg) {
+    var texts = (cfg && cfg.texts && typeof cfg.texts === 'object') ? cfg.texts : {};
+    var url = str(texts.policyUrl);
+    if (url && !/^https?:\/\//i.test(url)) url = null;
+
+    var action = texts.detailsAction;
+    if (action !== 'policy' && action !== 'settings' && action !== 'hide') {
+      action = url ? 'policy' : 'settings';
+    }
+    if (action === 'policy' && !url) action = 'settings';
+    return { kind: action, href: action === 'policy' ? url : null };
+  }
+
   // Unknown type -> bar/bottom. Known type with an unrecognized position ->
   // that type's own default (bar: bottom, box: bottom-left — the side away
   // from the chat widgets and scroll-to-top buttons most sites put on the right).
@@ -1036,10 +1075,26 @@
     body.appendChild(h);
 
     var p = el('p');
-    p.appendChild(document.createTextNode(T.bannerText + ' '));
-    var link = el('a', 'ck-banner__more', T.more);
-    link.href = '#';
-    p.appendChild(link);
+    var det = resolveDetails(cfg);
+    if (det.kind === 'hide') {
+      p.appendChild(document.createTextNode(T.bannerText));
+    } else {
+      p.appendChild(document.createTextNode(T.bannerText + ' '));
+      if (det.kind === 'policy') {
+        var link = el('a', 'ck-banner__more', T.more);
+        link.href = det.href;
+        link.target = '_blank';
+        link.rel = 'noopener';          // never hand the policy page window.opener
+        p.appendChild(link);
+      } else {
+        // A control that changes what is on screen is a button, not a link:
+        // screen readers announce it correctly and it needs no href to fake.
+        var more = el('button', 'ck-banner__more ck-linkbtn', T.more);
+        more.type = 'button';
+        more.addEventListener('click', function () { openPanel(more); });
+        p.appendChild(more);
+      }
+    }
     body.appendChild(p);
 
     var pb = buildPoweredBy(cfg);
@@ -1061,11 +1116,11 @@
     b.appendChild(body);
 
     var actions = el('div', 'ck-actions');
-    var accept = el('button', 'ck-btn ck-btn--filled', T.acceptAll);
+    var accept = el('button', 'ck-btn ck-btn--accept', T.acceptAll);
     accept.type = 'button';
-    var reject = el('button', 'ck-btn ck-btn--filled', T.rejectAll);
+    var reject = el('button', 'ck-btn ck-btn--reject', T.rejectAll);
     reject.type = 'button';
-    var custom = el('button', 'ck-btn ck-btn--outline', T.customize);
+    var custom = el('button', 'ck-btn ck-btn--settings', T.customize);
     custom.type = 'button';
 
     accept.addEventListener('click', function () { doAcceptAll(); });
@@ -1289,25 +1344,9 @@
   // Structural inputs: a change to any of these needs a rebuild, not a restyle.
   // Branding belongs here because it produces DOM, not just styling: mount() is
   // one-shot, so a config that gains a logo after the first ck:init would
-  // otherwise take the applyTheme()-only path and never render it.
-  function brandSignature(cfg) {
-    var b = brandingCfg(cfg);
-    if (!b) return '-';
-    var pb = b.poweredBy;
-    var pbSig = (pb && typeof pb === 'object')
-      ? 'o:' + String(pb.text || '') + ':' + String(pb.url || '')
-      : String(!!pb);
-    // Logos are hashed by length + head so a long data: URI does not bloat the key.
-    function tag(v) {
-      var s = str(v);
-      return s ? (s.length + ':' + s.slice(0, 32)) : '-';
-    }
-    return [
-      tag(b.logo), tag(b.logoDark), String(b.logoAlt || ''),
-      String(clampLogoHeight(b.logoHeight)), String(b.logoUrl || ''), pbSig
-    ].join('~');
-  }
-
+  // otherwise take the applyTheme()-only path and never render it. The signature
+  // itself is computed by the branding extension (and is '-' without it), so an
+  // unbranded page's signature is byte-identical to what it was before the split.
   function signature(cfg) {
     var c = cfg || {};
     var lay = resolveLayout(c);
@@ -1316,6 +1355,10 @@
       String(c.language || 'auto'),
       lay.type, String(lay.position),
       Array.isArray(table) ? table.length : 0,
+      // Structural: link / button / nothing are three different DOM shapes,
+      // and mount() is one-shot. Buttons and colours are deliberately NOT
+      // here — they are token values and restyle in place.
+      resolveDetails(c).kind,
       brandSignature(c)
     ].join('|');
   }
@@ -1347,7 +1390,10 @@
     root.innerHTML = '';
 
     var style = document.createElement('style');
-    style.textContent = CSS;
+    // Base sheet plus the branding rules, when the branding file is loaded.
+    // Without it brandingCss() is '' and the shadow root carries no .ck-brand,
+    // .ck-foot or .ck-powered rules at all.
+    style.textContent = CSS + brandingCss();
     root.appendChild(style);
 
     switches = {};
@@ -1369,6 +1415,33 @@
 
   /* ---------------------------------------------------------------- events */
 
+  /* ------------------------------------------------------- pure exports */
+
+  /* SPEC V1.6 §1: the cabinet's theme editor must show the same numbers the
+     banner actually paints — «один код — одни числа». Published BEFORE the
+     SSR guard below on purpose: these are pure functions with no DOM in them,
+     so they are reachable (and testable in node) on a page or in a process
+     that never renders anything.
+
+     Not a stable public API — the underscore says so — but the theme editor
+     and the debug panel are both expected to read it rather than reimplement
+     the arithmetic and drift. */
+  (function () {
+    var ck = api();
+    if (!ck) return;
+    ck._contrast = {
+      relativeLuminance: relativeLuminance,
+      contrastRatio: contrastRatio,
+      ensureContrast: ensureContrast,
+      stepToContrast: stepToContrast,
+      resolveButtonStyles: resolveButtonStyles,
+      resolveRadius: resolveRadius,
+      resolveFont: resolveFont,
+      resolveDetails: resolveDetails,
+      buildThemeCss: buildThemeCss
+    };
+  })();
+
   // SSR-safe: with no DOM there is nothing to render or listen to, so importing
   // this file in Node is a no-op rather than a throw (mirrors the core).
   if (typeof document === 'undefined') return;