diff --git a/scripts/docs-site/assets.mjs b/scripts/docs-site/assets.mjs index dce09c299..032316c36 100644 --- a/scripts/docs-site/assets.mjs +++ b/scripts/docs-site/assets.mjs @@ -31,7 +31,7 @@ ${designSystemCss} .oc-card-grid.oc-card-cols-1,.oc-card-group.oc-card-cols-1,.oc-card-grid.oc-card-cols-2,.oc-card-group.oc-card-cols-2,.oc-card-grid.oc-card-cols-3,.oc-card-group.oc-card-cols-3,.oc-card-grid.oc-card-cols-4,.oc-card-group.oc-card-cols-4{grid-template-columns:repeat(var(--oc-card-columns),minmax(0,1fr))} .oc-steps{counter-reset:step;list-style:none;padding-left:0!important;margin:28px 0 var(--oc-space-6) var(--oc-space-5)}.oc-step{counter-increment:step;border-left:2px solid var(--line);padding:0 0 var(--oc-space-5) 34px;position:relative}.oc-step:last-child{padding-bottom:0;border-image:linear-gradient(to bottom,var(--line) 0%,color-mix(in srgb,var(--line) 52%,transparent) 44%,transparent 92%) 1}.oc-step:before{content:counter(step);position:absolute;left:-13px;top:0;width:24px;height:24px;border-radius:var(--oc-radius-round);background:color-mix(in srgb,var(--line-strong) 78%,var(--paper) 22%);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong);display:grid;place-items:center;font-size:var(--oc-font-size-xs);font-weight:800}.oc-step h3{margin-top:0}.oc-step>p:first-of-type{margin-top:.2em}.oc-step .oc-code{max-width:100%;margin:14px 0 18px}.oc-step .oc-code:last-child{margin-bottom:0}.oc-callout{--callout-accent:var(--brand);--callout-surface:color-mix(in srgb,var(--paper) 86%,var(--callout-accent) 14%);position:relative;border:1px solid color-mix(in srgb,var(--line-strong) 74%,var(--callout-accent) 26%);border-left:3px solid var(--callout-accent);background:var(--callout-surface);border-radius:var(--oc-radius-surface);padding:14px var(--oc-space-4) 14px 42px;margin:20px 0;color:var(--text)}.oc-callout strong{display:block;color:var(--ink);font:760 var(--oc-font-size-base)/1.3 var(--oc-font-body);margin:0 0 var(--oc-space-1)}.oc-callout strong:before{content:"i";position:absolute;left:15px;top:15px;width:17px;height:17px;border:1px solid var(--callout-accent);border-radius:var(--oc-radius-round);display:grid;place-items:center;color:var(--callout-accent);font:800 11px/1 var(--oc-font-body)}.oc-callout p:last-child,.oc-callout ul:last-child,.oc-callout ol:last-child{margin-bottom:0}.oc-callout-tip{--callout-accent:var(--oc-status-success-fg)}.oc-callout-tip strong:before{content:"?"}.oc-callout-info,.oc-callout-note{--callout-accent:var(--oc-status-info-fg)}.oc-callout-warning{--callout-accent:var(--oc-status-warning-fg)}.oc-callout-warning strong:before{content:"!"}.oc-callout-check{--callout-accent:var(--oc-status-success-fg)}.oc-callout-check strong:before{content:"✓"}.oc-callout-say{--callout-accent:#c084fc}.oc-callout-say strong:before{content:">"}.oc-code{margin:18px 0;border:1px solid var(--code-border);border-radius:var(--oc-radius-surface);background:var(--code-block);box-shadow:var(--code-shadow);overflow:hidden}.oc-code figcaption{display:flex;align-items:center;min-height:34px;padding:6px var(--oc-space-2) 6px var(--oc-space-3);border-bottom:1px solid var(--code-border);background:color-mix(in srgb,var(--paper-2) 42%,transparent);color:var(--muted);font:760 var(--oc-font-size-xs)/1 var(--oc-font-body)}.oc-code pre{margin:0;border:0;border-radius:var(--oc-radius-inset);box-shadow:none;background:transparent}.oc-tabs,.oc-code-group{border:1px solid var(--line-strong);background:color-mix(in srgb,var(--paper) 78%,transparent);border-radius:var(--oc-radius-surface);margin:20px 0 28px;overflow:hidden}.oc-code-tabs{display:flex;gap:2px;padding:6px 7px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper-2) 74%,transparent)}.oc-code-tab{border:0;border-radius:var(--oc-radius-control);background:transparent;color:var(--muted);padding:6px 9px;font:760 var(--oc-font-size-xs)/1 var(--oc-font-body);cursor:pointer}.oc-code-tab:hover{color:var(--ink);background:color-mix(in srgb,var(--soft) 52%,transparent)}.oc-code-tab.active{color:var(--ink);background:var(--soft)}.oc-code-group .oc-code{display:none;margin:0;border:0;border-radius:var(--oc-radius-surface);box-shadow:none}.oc-code-group .oc-code.active{display:block}.oc-code-group .oc-code figcaption{display:none}.oc-tab{border-top:1px solid var(--line);padding:20px var(--oc-space-5)}.oc-tab:first-child{border-top:0}.oc-tab h3{margin:0 0 var(--oc-space-3);font-size:var(--oc-font-size-sm);color:var(--brand)}.oc-tab .oc-code{margin:0;max-width:100%}.oc-accordion-group{display:grid;gap:10px;margin:18px 0}.oc-accordion{border:1px solid var(--line-strong);background:var(--paper);border-radius:var(--oc-radius-surface);margin:0;padding:0 13px}.oc-accordion summary{cursor:pointer;color:var(--ink);font-weight:750;padding:var(--oc-space-3) 0}.oc-accordion summary::marker{color:var(--brand)}.oc-param,.oc-frame{border:1px solid var(--line-strong);background:color-mix(in srgb,var(--paper) 78%,transparent);border-radius:var(--oc-radius-surface);padding:13px 15px;margin:var(--oc-space-3) 0}.oc-frame{padding:10px}.oc-frame figcaption{padding:2px var(--oc-space-1) 10px;color:var(--muted);font-size:var(--oc-font-size-xs)}.oc-frame p{margin:0}.oc-frame img{display:block;margin:0 auto;border-radius:var(--oc-radius-control)}.oc-tooltip{position:relative;display:inline-flex;align-items:center;border-bottom:1px dotted color-mix(in srgb,var(--brand) 72%,var(--text));color:var(--ink);cursor:help}.oc-tooltip:focus{outline:2px solid var(--oc-focus-ring);outline-offset:3px;border-radius:var(--oc-radius-control)}.oc-tooltip[data-tip]:hover:after,.oc-tooltip[data-tip]:focus:after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);z-index:20;width:max-content;max-width:min(320px,calc(100vw - 40px));padding:var(--oc-space-2) 10px;border:1px solid var(--tooltip-border);border-radius:var(--oc-radius-control);background:var(--tooltip-bg);color:var(--tooltip-text);font:700 var(--oc-font-size-xs)/1.35 var(--oc-font-body);box-shadow:var(--shadow)}.oc-param header{display:flex;gap:var(--oc-space-2);align-items:center;flex-wrap:wrap;margin-bottom:var(--oc-space-2)}.oc-param header code{background:var(--code-inline);border-color:var(--code-border);color:var(--ink)}.oc-param-type,.oc-param-default,.oc-param-required{border:1px solid var(--line-strong);border-radius:var(--oc-radius-control);background:color-mix(in srgb,var(--soft) 70%,transparent);padding:1px 7px;font-size:var(--oc-font-size-xs);color:var(--muted)}.oc-param-type{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 34%,var(--line-strong));background:color-mix(in srgb,var(--brand) 12%,var(--paper))}.oc-param-default{color:var(--text);background:color-mix(in srgb,var(--paper-2) 82%,transparent)}.oc-param-required{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 42%,var(--line-strong));background:color-mix(in srgb,var(--brand) 10%,var(--paper))} .breadcrumbs{display:flex;align-items:center;gap:var(--oc-space-2);color:var(--muted);font:650 11.5px/1.4 var(--oc-font-mono);margin:0 0 var(--oc-space-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.breadcrumbs span{min-width:0;overflow:hidden;text-overflow:ellipsis}.breadcrumbs .breadcrumb-part{display:inline-flex;align-items:center;gap:var(--oc-space-2);flex:0 1 auto}.breadcrumbs .breadcrumb-separator{flex:0 0 auto}.breadcrumbs [aria-current="page"]{color:var(--text)}.page-status{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0 0}.page-status-badge{display:inline-flex;align-items:center;min-height:24px;max-width:100%;border:1px solid var(--line-strong);border-radius:var(--oc-radius-control);background:color-mix(in srgb,var(--paper) 76%,transparent);color:var(--muted);padding:var(--oc-space-1) 9px;font:760 var(--oc-font-size-xs)/1.25 var(--oc-font-body)}.page-status-beta,.page-status-status{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 38%,var(--line-strong));background:color-mix(in srgb,var(--soft) 68%,transparent)}.page-status-deprecated{color:var(--oc-status-warning-fg);border-color:color-mix(in srgb,var(--oc-status-warning-fg) 42%,var(--line-strong))}.page-tools{display:flex;align-items:center;gap:var(--oc-space-2);margin-top:var(--oc-space-4)}.page-tools a,.page-tools button,.page-feedback button,.oc-prompt button{border:1px solid var(--line-strong);background:color-mix(in srgb,var(--paper) 82%,transparent);color:var(--muted);border-radius:var(--oc-radius-control);padding:6px 9px;font:760 var(--oc-font-size-xs)/1 var(--oc-font-body);cursor:pointer}.page-tools a:hover,.page-tools button:hover,.page-feedback button:hover,.oc-prompt button:hover{border-color:var(--brand);color:var(--ink)}.oc-code figcaption{justify-content:space-between;gap:var(--oc-space-3)}.oc-code figcaption .oc-code-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:.08em}.oc-code figcaption button{position:relative;display:grid;place-items:center;flex:0 0 32px;width:32px;height:30px;padding:0;border:1px solid transparent;background:transparent;color:var(--muted);border-radius:var(--oc-radius-control);cursor:pointer}.oc-code figcaption button:before,.oc-code figcaption button:after{content:"";position:absolute;box-sizing:border-box;width:13px;height:13px;border:1.6px solid currentColor;border-radius:var(--oc-radius-inset);background:color-mix(in srgb,var(--paper-2) 42%,var(--code-block) 58%)}.oc-code figcaption button:before{left:7px;top:6px;opacity:.72}.oc-code figcaption button:after{left:11px;top:10px}.oc-code figcaption button:hover{border-color:color-mix(in srgb,var(--brand) 32%,var(--line-strong));background:color-mix(in srgb,var(--soft) 46%,transparent);color:var(--ink)}.oc-code figcaption button[data-copy-state="copied"]{color:var(--brand)}.oc-code figcaption button[data-copy-state="copied"]:before{content:"✓";position:static;width:auto;height:auto;border:0;background:transparent;font:900 var(--oc-font-size-base)/1 var(--oc-font-body)}.oc-code figcaption button[data-copy-state="copied"]:after,.oc-code figcaption button[data-copy-state="failed"]:after{content:none}.oc-code figcaption button[data-copy-state="failed"]{color:var(--oc-status-error-fg)}.oc-code figcaption button[data-copy-state="failed"]:before{content:"!";position:static;width:auto;height:auto;border:0;background:transparent;font:900 var(--oc-font-size-base)/1 var(--oc-font-body)}.doc pre code{display:block;min-width:max-content}.doc .oc-code pre code{white-space:pre}.doc .code-line,.oc-code .code-line{display:block;min-height:1.5em;line-height:1.5;padding:0 2px;border-left:2px solid transparent;white-space:pre}.doc .code-line:before{content:attr(data-line);display:none;width:2.4em;margin-right:1em;color:var(--muted);text-align:right;user-select:none}.doc .has-line-numbers .code-line:before{display:inline-block}.doc .code-line.is-highlighted{background:color-mix(in srgb,var(--brand) 14%,transparent);border-left-color:var(--brand)}.doc .code-line.is-dimmed{opacity:.46}.doc .code-line.is-added{background:color-mix(in srgb,var(--oc-diff-added) 13%,transparent);border-left-color:var(--oc-diff-added)}.doc .code-line.is-removed{background:color-mix(in srgb,var(--oc-diff-removed) 12%,transparent);border-left-color:var(--oc-diff-removed)}.doc .oc-code.is-wrapped pre,.doc .oc-code.is-wrapped code{white-space:pre-wrap;min-width:0}.doc .oc-code.is-wrapped .code-line{white-space:pre-wrap}.doc .oc-code.is-expandable pre{max-height:360px}.oc-badge{display:inline-flex;align-items:center;min-height:1.55em;padding:0 .5em;border:1px solid var(--line-strong);border-radius:0;background:var(--soft);color:var(--ink);font:760 .76em/1 var(--oc-font-body);vertical-align:middle}.oc-badge-orange{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 38%,var(--line-strong))}.oc-badge-green{color:var(--oc-status-success-fg);border-color:color-mix(in srgb,var(--oc-status-success-fg) 38%,var(--line-strong))}.oc-panel,.oc-prompt,.oc-mermaid{border:1px solid var(--line-strong);background:color-mix(in srgb,var(--paper) 86%,transparent);border-radius:var(--oc-radius-surface);margin:18px 0;padding:var(--oc-space-4)}.oc-panel>strong{display:block;color:var(--ink);font:760 var(--oc-font-size-base)/1.3 var(--oc-font-body);margin:0 0 var(--oc-space-2)}.oc-prompt header{display:flex;align-items:center;justify-content:space-between;gap:var(--oc-space-3);margin-bottom:10px}.oc-prompt strong{color:var(--ink);font:760 var(--oc-font-size-base)/1.3 var(--oc-font-body)}.oc-prompt p:last-child,.oc-panel p:last-child{margin-bottom:0}.oc-tile-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px;margin:18px 0}.oc-tile{display:flex;align-items:flex-start;gap:var(--oc-space-3);border:1px solid var(--line-strong);border-radius:var(--oc-radius-surface);padding:14px;color:var(--text);background:transparent}.oc-tile:hover{border-color:var(--brand);background:color-mix(in srgb,var(--soft) 28%,transparent)}.oc-tile strong{display:block;color:var(--ink);font:750 var(--oc-font-size-base)/1.3 var(--oc-font-body);margin:0 0 5px}.oc-tile p{margin:0;color:var(--muted);line-height:1.5}.oc-tile .oc-card-icon{flex:0 0 20px;width:20px;height:20px}.oc-mermaid{overflow:auto;display:grid;place-items:center;min-height:180px;padding:18px;color:var(--code-text);font:var(--oc-font-size-sm)/1.65 var(--oc-font-mono)}.oc-mermaid svg{display:block;max-width:100%;height:auto}.oc-mermaid pre{width:100%;margin:0}.oc-mermaid.is-rendered{background:color-mix(in srgb,var(--paper) 70%,transparent)}.oc-mermaid.is-error{display:block;place-items:normal;border-color:color-mix(in srgb,var(--oc-status-warning-fg) 42%,var(--line-strong))}.page-feedback{display:flex;align-items:center;gap:9px;border-top:1px solid var(--line);margin-top:42px;padding-top:18px;color:var(--muted);font-size:var(--oc-font-size-sm)}.page-feedback output{color:var(--brand);font-weight:760}.page-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:1px solid var(--line);margin-top:var(--oc-space-5);padding-top:18px}.page-nav a{border:1px solid var(--line-strong);background:var(--paper);border-radius:var(--oc-radius-surface);padding:13px;color:var(--text)}.page-nav a:hover{border-color:var(--brand)}.page-nav small{display:block;color:var(--muted);font-size:11px;text-transform:uppercase}.next{text-align:right} -.article-meta-row{display:flex;align-items:center;justify-content:space-between;gap:var(--oc-space-4);margin:0 0 var(--oc-space-3)}.article-meta-row .breadcrumbs{margin:0;min-width:0}.article-meta-row .page-tools{margin:0 0 0 auto}.page-actions{display:inline-flex;align-items:stretch;position:relative}.page-tools .page-actions-primary,.page-tools .page-actions-more summary{height:30px;min-height:30px;border:1px solid var(--line-strong);background:color-mix(in srgb,var(--paper) 82%,transparent);color:var(--muted);font:760 var(--oc-font-size-xs)/1 var(--oc-font-body);cursor:pointer}.page-tools .page-actions-primary{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border-right:1px solid var(--line-strong);border-radius:var(--oc-radius-control);margin-right:-1px;padding:0 9px}.page-tools .page-actions-primary .icon{width:15px;height:15px;min-width:15px}.page-tools .page-actions-more{position:relative}.page-tools .page-actions-more summary{display:grid;place-items:center;width:34px;border-radius:var(--oc-radius-control);padding:0;list-style:none}.page-tools .page-actions-more summary::-webkit-details-marker{display:none}.page-tools .page-actions-more summary::marker{content:""}.page-tools .page-actions-primary:hover,.page-tools .page-actions-more[open] summary,.page-tools .page-actions-more summary:hover{border-color:var(--brand);color:var(--ink)}.page-actions-chevron{display:grid;place-items:center;color:var(--muted)}.page-tools .page-actions-more summary .page-actions-chevron .icon{width:15px;height:15px;min-width:15px;transition:transform var(--oc-duration-fast) var(--oc-ease-out)}.page-tools .page-actions-more[open] .page-actions-chevron .icon{transform:rotate(180deg)}.page-tools .page-actions-more .page-actions-menu{position:absolute;top:calc(100% + 8px);left:auto;right:0;z-index:40;display:none;gap:var(--oc-space-1);min-width:260px;padding:var(--oc-space-2);border:1px solid var(--line-strong);border-radius:var(--oc-radius-surface);background:var(--paper);box-shadow:var(--shadow)}.page-tools .page-actions-more[open] .page-actions-menu{display:grid}.page-tools .page-action{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:9px;border:0;border-radius:var(--oc-radius-control);background:transparent;color:var(--text);text-align:left;text-decoration:none;cursor:pointer}.page-tools .page-action:hover{background:var(--soft);color:var(--ink)}.page-tools .page-action .icon{width:17px;height:17px}.page-tools .page-action strong{display:block;color:var(--ink);font:760 var(--oc-font-size-xs)/1.2 var(--oc-font-body)}.page-tools .page-action small{display:block;margin-top:3px;color:var(--muted);font:650 11px/1.25 var(--oc-font-body)}.page-tools .page-action-external{justify-self:end;color:var(--muted);font-size:var(--oc-font-size-xs)}.page-feedback-links{display:flex;align-items:center;gap:9px;margin-left:auto}.page-feedback-links a{border:1px solid var(--line-strong);background:color-mix(in srgb,var(--paper) 82%,transparent);color:var(--muted);border-radius:var(--oc-radius-control);padding:6px 9px;font:760 var(--oc-font-size-xs)/1 var(--oc-font-body)}.page-feedback-links a:hover{border-color:var(--brand);color:var(--ink)}@media(max-width:620px){.page-feedback-links{flex-basis:100%;margin:3px 0 0}} +.article-meta-row{display:flex;align-items:center;justify-content:space-between;gap:var(--oc-space-4);margin:0 0 var(--oc-space-3)}.article-meta-row .breadcrumbs{margin:0;min-width:0}.article-meta-row .page-tools{margin:0 0 0 auto}.page-actions{display:inline-flex;align-items:stretch;position:relative}.page-tools .page-actions-primary,.page-tools .page-actions-more summary{height:30px;min-height:30px;border:1px solid var(--line-strong);background:color-mix(in srgb,var(--paper) 82%,transparent);color:var(--muted);font:760 var(--oc-font-size-xs)/1 var(--oc-font-body);cursor:pointer}.page-tools .page-actions-primary{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border-right:1px solid var(--line-strong);border-radius:var(--oc-radius-control) 0 0 var(--oc-radius-control);margin-right:-1px;padding:0 9px}.page-tools .page-actions-primary .icon{width:15px;height:15px;min-width:15px}.page-tools .page-actions-more{position:relative}.page-tools .page-actions-more summary{display:grid;place-items:center;width:34px;border-radius:0 var(--oc-radius-control) var(--oc-radius-control) 0;padding:0;list-style:none}.page-tools .page-actions-more summary::-webkit-details-marker{display:none}.page-tools .page-actions-more summary::marker{content:""}.page-tools .page-actions-primary:hover,.page-tools .page-actions-more[open] summary,.page-tools .page-actions-more summary:hover{border-color:var(--brand);color:var(--ink)}.page-actions-chevron{display:grid;place-items:center;color:var(--muted)}.page-tools .page-actions-more summary .page-actions-chevron .icon{width:15px;height:15px;min-width:15px;transition:transform var(--oc-duration-fast) var(--oc-ease-out)}.page-tools .page-actions-more[open] .page-actions-chevron .icon{transform:rotate(180deg)}.page-tools .page-actions-more .page-actions-menu{position:absolute;top:calc(100% + 8px);left:auto;right:0;z-index:40;display:none;gap:var(--oc-space-1);min-width:260px;padding:var(--oc-space-2);border:1px solid var(--line-strong);border-radius:var(--oc-radius-surface);background:var(--paper);box-shadow:var(--shadow)}.page-tools .page-actions-more[open] .page-actions-menu{display:grid}.page-tools .page-action{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:9px;border:0;border-radius:var(--oc-radius-control);background:transparent;color:var(--text);text-align:left;text-decoration:none;cursor:pointer}.page-tools .page-action:hover{background:var(--soft);color:var(--ink)}.page-tools .page-action .icon{width:17px;height:17px}.page-tools .page-action strong{display:block;color:var(--ink);font:760 var(--oc-font-size-xs)/1.2 var(--oc-font-body)}.page-tools .page-action small{display:block;margin-top:3px;color:var(--muted);font:650 11px/1.25 var(--oc-font-body)}.page-tools .page-action-external{justify-self:end;color:var(--muted);font-size:var(--oc-font-size-xs)}.page-feedback-links{display:flex;align-items:center;gap:9px;margin-left:auto}.page-feedback-links a{border:1px solid var(--line-strong);background:color-mix(in srgb,var(--paper) 82%,transparent);color:var(--muted);border-radius:var(--oc-radius-control);padding:6px 9px;font:760 var(--oc-font-size-xs)/1 var(--oc-font-body)}.page-feedback-links a:hover{border-color:var(--brand);color:var(--ink)}@media(max-width:620px){.page-feedback-links{flex-basis:100%;margin:3px 0 0}} .doc .oc-code.is-expandable{position:relative}.doc .oc-code.is-expandable pre{max-height:360px;padding-bottom:44px}.doc .oc-code.is-expandable.is-expanded pre{max-height:none}.doc .oc-code.is-expandable:not(.is-expanded):after{content:"";position:absolute;left:0;right:0;bottom:39px;height:72px;background:linear-gradient(180deg,transparent,var(--code-block));pointer-events:none}.oc-code-expand{position:absolute;left:0;right:0;bottom:0;z-index:2;width:100%;min-height:40px;border:0;border-top:1px solid var(--code-border);background:color-mix(in srgb,var(--code-block) 88%,var(--paper-2) 12%);color:var(--brand);font:760 var(--oc-font-size-xs)/1 var(--oc-font-body);cursor:pointer}.oc-code-expand:hover,.oc-code-expand:focus-visible{color:var(--ink);background:color-mix(in srgb,var(--soft) 48%,var(--code-block));outline:0} .search-modal{position:fixed;inset:0;background:color-mix(in srgb,var(--oc-bg-page) 62%,transparent);display:none;z-index:90;padding:clamp(var(--oc-space-3),8vh,72px) 18px}.search-modal.open{display:block}.search-panel{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;width:min(820px,100%);max-height:min(640px,calc(100vh - 16vh));margin:0 auto;background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--oc-radius-surface);box-shadow:var(--shadow);overflow:hidden}.search-head{position:relative;padding:var(--oc-space-3);border-bottom:1px solid var(--line)}.search-head input{width:100%;border:1px solid var(--oc-input-border);border-radius:var(--oc-radius-control);padding:var(--oc-space-3) 44px var(--oc-space-3) var(--oc-space-3);background:var(--oc-input-bg);color:var(--text);outline:0}.search-head input:focus{border-color:color-mix(in srgb,var(--brand) 42%,var(--line-strong));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}.search-close{position:absolute;top:50%;right:22px;display:inline-grid;place-items:center;width:28px;height:28px;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);border-radius:var(--oc-radius-control);padding:0;cursor:pointer}.search-close:hover,.search-close:focus-visible{color:var(--ink);background:color-mix(in srgb,var(--paper-2) 72%,transparent);outline:0}.search-close .icon{width:17px;height:17px}.search-hints{grid-row:2;display:flex;flex-wrap:wrap;gap:var(--oc-space-2);padding:10px var(--oc-space-3);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper-2) 58%,transparent)}.search-modal.has-query .search-hints{display:none}.search-hints button{border:1px solid var(--line-strong);border-radius:var(--oc-radius-control);background:transparent;color:var(--muted);padding:6px 10px;font:730 var(--oc-font-size-xs)/1 var(--oc-font-body);cursor:pointer}.search-hints button:hover,.search-hints button:focus-visible{color:var(--ink);border-color:var(--brand);background:color-mix(in srgb,var(--soft) 42%,transparent);outline:0}.search-results{grid-row:3;position:relative;min-height:0;max-height:min(440px,calc(100vh - 260px));overflow:auto;padding:var(--oc-space-2) var(--oc-space-3) 22px;scrollbar-color:color-mix(in srgb,var(--muted) 62%,transparent) transparent}.search-results:after{content:"";position:sticky;left:0;right:0;bottom:-22px;display:block;height:26px;margin:0 -var(--oc-space-3) -22px;pointer-events:none;background:linear-gradient(180deg,transparent,var(--paper) 82%)}.search-results::-webkit-scrollbar{width:10px}.search-results::-webkit-scrollbar-track{background:transparent}.search-results::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 58%,transparent);border:3px solid transparent;border-radius:var(--oc-radius-round);background-clip:content-box}.search-results.is-loading{cursor:progress;display:grid;place-items:center}.search-results.is-loading:after{display:none}.search-state{margin:0;padding:var(--oc-space-3);color:var(--muted)}.search-loading{display:grid;place-items:center;gap:var(--oc-space-3);padding:36px 0;color:var(--muted);font-weight:720}.search-empty{min-height:260px;display:grid;place-content:center;justify-items:center;gap:10px;padding:34px;color:var(--muted);text-align:center}.search-empty-icon{display:grid;place-items:center;width:42px;height:42px;margin:0 0 var(--oc-space-1);border:1px solid color-mix(in srgb,var(--brand) 30%,var(--line-strong));border-radius:var(--oc-radius-round);background:color-mix(in srgb,var(--soft) 36%,transparent);color:color-mix(in srgb,var(--brand) 78%,var(--muted))}.search-empty-icon .icon{width:19px;height:19px;min-width:19px;max-width:19px;stroke-width:2.1}.search-empty strong{max-width:100%;overflow-wrap:anywhere;color:var(--ink);font:780 16px/1.35 var(--oc-font-body)}.search-empty p{max-width:420px;margin:0 auto;color:var(--text);font-size:var(--oc-font-size-sm)}.search-empty-kbd{display:inline-flex;align-items:center;gap:2px;height:20px;margin:0 .18em;padding:0 6px;border:1px solid var(--line-strong);border-radius:var(--oc-radius-control);background:color-mix(in srgb,var(--paper-2) 70%,transparent);color:var(--ink);vertical-align:-4px}.search-empty-kbd .icon{width:13px;height:13px;min-width:13px;max-width:13px;stroke-width:2.2}.search-spinner{display:inline-flex;width:42px;height:42px;flex:0 0 auto;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--brand) 36%,var(--line));border-radius:var(--oc-radius-round);background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.18),transparent 28%),color-mix(in srgb,var(--paper-2) 82%,var(--brand) 18%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 10px 32px color-mix(in srgb,var(--brand) 18%,transparent);transform-style:preserve-3d;animation:search-spinner-orbit 2.8s linear infinite}.search-spinner-emoji:before{content:"🦑";display:block;font-size:22px;line-height:1;transform:translateZ(8px);transform-style:preserve-3d;animation:search-spinner-emoji 2.8s steps(1,end) infinite,search-spinner-emoji-spin 2.8s linear infinite}.search-result{display:grid;grid-template-columns:minmax(0,1fr) 24px;grid-template-areas:"meta enter" "title enter" "snippet snippet";gap:5px 10px;border-bottom:1px solid var(--line);border-radius:var(--oc-radius-control);padding:var(--oc-space-3) 14px;color:var(--text);outline:0}.search-result:hover,.search-result:focus-visible,.search-result.active{border-radius:var(--oc-radius-control);background:color-mix(in srgb,var(--paper-2) 92%,transparent);color:var(--text)}.search-result.active{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--line-strong) 92%,transparent)}.search-result-meta{grid-area:meta;display:flex;min-width:0;gap:var(--oc-space-2);align-items:center;color:var(--muted);font:700 var(--oc-font-size-xs)/1 var(--oc-font-body)}.search-result-meta span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-result-meta span+span:before{content:"/";margin-right:var(--oc-space-2);color:var(--muted)}.search-result strong{grid-area:title;display:block;min-width:0;color:var(--ink);font:780 var(--oc-font-size-md)/1.35 var(--oc-font-body)}.search-result p{grid-area:snippet;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:.1em 0 0;color:var(--muted);font-size:var(--oc-font-size-sm)}.search-result mark{border-radius:var(--oc-radius-control);background:color-mix(in srgb,var(--brand) 28%,transparent);color:var(--ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 22%,transparent);box-decoration-break:clone;-webkit-box-decoration-break:clone}.search-result-enter{grid-area:enter;align-self:center;justify-self:end;display:grid;place-items:center;width:24px;height:24px;color:var(--muted);opacity:0}.search-result-enter .icon{width:17px;height:17px;min-width:17px;max-width:17px;stroke-width:2.1}.search-result.active .search-result-enter,.search-result:hover .search-result-enter{opacity:1}.search-molty{grid-row:4;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;border:0;border-top:1px solid var(--line);background:color-mix(in srgb,var(--paper-2) 60%,transparent);color:var(--text);padding:11px 14px;cursor:pointer;text-align:left}.search-molty:hover,.search-molty:focus-visible{background:color-mix(in srgb,var(--soft) 52%,var(--paper) 48%);outline:0}.search-molty img{width:28px;height:28px;border-radius:var(--oc-radius-round)}.search-molty span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-molty [hidden]{display:none}.search-molty strong{color:var(--brand);font-weight:800;background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 55%,white 45%),var(--brand));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:search-term-shimmer 1.7s ease-in-out infinite}.search-molty-shortcut{display:inline-flex;align-items:center;justify-content:flex-end;gap:2px;color:var(--muted);height:15px}.search-molty-shortcut .icon{width:15px;height:15px;min-width:15px;max-width:15px;stroke-width:2.2}.search-molty:hover .search-molty-shortcut,.search-molty:focus-visible .search-molty-shortcut{color:var(--ink)}@media(max-width:640px){.search-modal{padding:10px}.search-modal.open{display:grid;align-items:center}.search-panel{border-radius:var(--oc-radius-surface)}.search-head{padding:9px}.search-head input{font-size:16px;line-height:1.35;padding:11px 40px 11px 11px}.search-close{right:16px}.search-hints{flex-wrap:nowrap;overflow-x:auto;gap:7px;padding:var(--oc-space-2) 9px}.search-hints button{flex:0 0 auto}.search-results{max-height:min(340px,calc(100vh - 230px));padding:7px var(--oc-space-2) 20px}.search-results:after{margin:0 -var(--oc-space-2) -20px}.search-empty{min-height:220px;padding:22px 18px}.search-empty p{max-width:280px}.search-result{grid-template-columns:minmax(0,1fr);grid-template-areas:"meta" "title" "snippet";padding:11px 10px}.search-result-enter{display:none}.search-molty{gap:var(--oc-space-2);padding:10px 11px}.search-molty img{width:24px;height:24px}.search-molty-shortcut{display:none}}@keyframes search-term-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes search-spinner-orbit{0%{transform:rotateY(0deg)}12.49%{transform:rotateY(89deg)}12.5%{transform:rotateY(90deg)}25%{transform:rotateY(180deg)}37.49%{transform:rotateY(269deg)}37.5%{transform:rotateY(270deg)}50%{transform:rotateY(360deg)}62.49%{transform:rotateY(449deg)}62.5%{transform:rotateY(450deg)}75%{transform:rotateY(540deg)}87.49%{transform:rotateY(629deg)}87.5%{transform:rotateY(630deg)}100%{transform:rotateY(720deg)}}@keyframes search-spinner-emoji-spin{0%{transform:translateZ(8px) rotateY(0deg)}12.49%{transform:translateZ(8px) rotateY(-89deg)}12.5%{transform:translateZ(8px) rotateY(-90deg)}25%{transform:translateZ(8px) rotateY(-180deg)}37.49%{transform:translateZ(8px) rotateY(-269deg)}37.5%{transform:translateZ(8px) rotateY(-270deg)}50%{transform:translateZ(8px) rotateY(-360deg)}62.49%{transform:translateZ(8px) rotateY(-449deg)}62.5%{transform:translateZ(8px) rotateY(-450deg)}75%{transform:translateZ(8px) rotateY(-540deg)}87.49%{transform:translateZ(8px) rotateY(-629deg)}87.5%{transform:translateZ(8px) rotateY(-630deg)}100%{transform:translateZ(8px) rotateY(-720deg)}}@keyframes search-spinner-emoji{0%,12.49%{content:"🦑"}12.5%,37.49%{content:"🦞"}37.5%,62.49%{content:"🦐"}62.5%,87.49%{content:"🦀"}87.5%,100%{content:"🦑"}}@media(prefers-reduced-motion:reduce){.search-spinner,.search-spinner-emoji:before,.search-molty strong{animation:none}} .docs-chat{position:fixed;top:0;right:0;bottom:0;width:min(380px,calc(100vw - 28px));z-index:80;pointer-events:none}.docs-chat-launcher{position:absolute;right:18px;bottom:18px;height:46px;border:1px solid color-mix(in srgb,var(--brand) 48%,var(--line-strong));border-radius:var(--oc-radius-control);background:var(--paper);color:var(--ink);display:flex;align-items:center;gap:9px;padding:0 17px 0 var(--oc-space-2);font-weight:650;cursor:pointer;box-shadow:var(--oc-shadow-lg);pointer-events:auto;overflow:hidden;isolation:isolate;transition:transform var(--oc-duration-fast) var(--oc-ease-out),border-color var(--oc-duration-fast) var(--oc-ease-out),box-shadow var(--oc-duration-fast) var(--oc-ease-out)}.docs-chat.open .docs-chat-launcher{display:none}.docs-chat-launcher:after{content:none}.docs-chat-launcher:hover{border-color:var(--brand);color:var(--ink)}.docs-chat-launcher:hover:after{opacity:1}.docs-chat-avatar{display:block;width:32px;height:32px;border-radius:var(--oc-radius-round);object-fit:contain;flex:0 0 auto}.docs-chat-launcher .docs-chat-avatar{width:30px;height:30px}.docs-chat-title .docs-chat-avatar{width:34px;height:34px}.docs-chat-panel{position:absolute;inset:0;display:none;grid-template-rows:auto auto minmax(0,1fr) auto;background:color-mix(in srgb,var(--paper) 94%,var(--oc-bg-page) 6%);border-left:1px solid var(--line-strong);box-shadow:var(--oc-shadow-lg);overflow:hidden;pointer-events:auto}.docs-chat.open .docs-chat-panel{display:grid}.docs-chat-head{display:flex;align-items:center;justify-content:space-between;gap:var(--oc-space-3);min-height:64px;padding:14px 14px 13px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper-2) 88%,transparent)}.docs-chat-head p{margin:0 0 2px;color:var(--brand);font-size:var(--oc-font-size-xs);font-weight:850;text-transform:uppercase}.docs-chat-head h2{margin:0;color:var(--ink);font:760 18px/1.1 var(--oc-font-body)}.docs-chat-actions{display:flex;align-items:center;gap:7px}.docs-chat-icon{position:relative;display:grid;place-items:center;width:34px;height:34px;border:1px solid transparent;border-radius:var(--oc-radius-control);background:transparent;color:var(--muted);padding:0;line-height:1;cursor:pointer;transition:background var(--oc-duration-fast) var(--oc-ease-out),border-color var(--oc-duration-fast) var(--oc-ease-out),color var(--oc-duration-fast) var(--oc-ease-out)}.docs-chat-icon .icon{width:17px;height:17px}.docs-chat-icon:hover{border-color:color-mix(in srgb,var(--brand) 38%,var(--line-strong));background:color-mix(in srgb,var(--paper-2) 82%,transparent);color:var(--ink)}.docs-chat-icon:disabled{opacity:.35;cursor:not-allowed}.docs-chat-icon[data-copy-state="copied"]{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 44%,var(--line-strong));background:color-mix(in srgb,var(--soft) 70%,transparent)}.docs-chat-minimize{font-size:22px}.docs-chat-clear[hidden]{display:none}.docs-chat-auth{padding:14px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 92%,var(--oc-bg-page) 8%)}.docs-chat-auth[hidden]{display:none}.docs-chat-auth-card{border:1px solid var(--line-strong);border-radius:var(--oc-radius-surface);background:color-mix(in srgb,var(--paper-2) 86%,transparent);padding:14px}.docs-chat-auth-card p{margin:0 0 var(--oc-space-4);color:var(--text);font-size:var(--oc-font-size-base);line-height:1.45;text-wrap:balance}.docs-chat-auth-card strong{display:block;color:var(--ink);font:760 var(--oc-font-size-md)/1.25 var(--oc-font-body);margin-bottom:var(--oc-space-2)}.docs-chat-verify{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:40px;border:1px solid var(--brand);border-radius:var(--oc-radius-control);background:var(--brand);color:var(--on-brand)!important;font-weight:850;padding:0 14px;text-decoration:none!important}.docs-chat-github-icon{width:18px;height:18px;fill:currentColor;flex:0 0 auto}.docs-chat-verify:hover{background:var(--oc-accent-primary-hover);color:var(--on-brand)!important}.docs-chat-log{overflow:auto;padding:14px 14px var(--oc-space-4);display:flex;flex-direction:column;gap:10px}.docs-chat-message{max-width:94%;border:1px solid var(--line);border-radius:var(--oc-radius-surface);padding:10px var(--oc-space-3);overflow-wrap:break-word}.docs-chat-message p{margin:0 0 .7em}.docs-chat-message p:last-child{margin-bottom:0}.docs-chat-message a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;word-break:break-word}.docs-chat-message code{background:var(--code);border:1px solid var(--line-strong);border-radius:var(--oc-radius-inset);padding:.05em .32em;color:var(--code-text);font-size:.9em}.docs-chat-code{margin:.35em 0 .85em;border:1px solid var(--line-strong);border-radius:var(--oc-radius-surface);background:color-mix(in srgb,var(--code) 92%,var(--oc-bg-page) 8%);overflow:hidden;box-shadow:var(--oc-shadow-md)}.docs-chat-code-head{display:flex;align-items:center;min-height:28px;padding:5px 10px;border-bottom:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.docs-chat-code pre{margin:0;padding:var(--oc-space-3);overflow:auto;white-space:pre;line-height:1.55}.docs-chat-code code{display:block;background:transparent!important;border:0!important;border-radius:var(--oc-radius-inset)!important;padding:0!important;color:var(--code-text);font-size:var(--oc-font-size-xs)}.docs-chat-message.user{align-self:flex-end;background:var(--brand);border-color:var(--brand);color:var(--on-brand)}.docs-chat-message.assistant{align-self:flex-start;background:var(--paper-2);color:var(--text)}.docs-chat-message.thinking{padding:14px;min-height:42px;display:inline-flex;align-items:center}.docs-chat-thinking{display:inline-flex;gap:7px;align-items:flex-end;height:14px}.docs-chat-thinking span{width:7px;height:7px;border-radius:var(--oc-radius-round);background:var(--muted);animation:docs-chat-dot 1.25s var(--oc-ease-out) infinite;will-change:transform,opacity,background-color}.docs-chat-thinking span:nth-child(2){animation-delay:.18s}.docs-chat-thinking span:nth-child(3){animation-delay:.36s}@keyframes docs-chat-dot{0%,80%,100%{opacity:.3;transform:translateY(0) scale(.85);background:var(--muted)}40%{opacity:1;transform:translateY(-5px) scale(1);background:var(--brand)}}@media(prefers-reduced-motion:reduce){.docs-chat-thinking span{animation-duration:2.4s;animation-name:docs-chat-dot-fade}@keyframes docs-chat-dot-fade{0%,100%{opacity:.35}50%{opacity:1}}}.docs-chat-message.error{border-color:color-mix(in srgb,var(--oc-status-error-fg) 52%,var(--line-strong));color:var(--oc-status-error-fg);background:color-mix(in srgb,var(--oc-status-error-bg) 72%,var(--paper))}.docs-chat-form{display:grid;grid-template-columns:1fr auto;gap:10px;padding:var(--oc-space-3);border-top:1px solid var(--line);background:var(--paper)}.docs-chat-form[hidden]{display:none}.docs-chat-form textarea{resize:none;min-height:50px;max-height:160px;border:1px solid var(--oc-input-border);border-radius:var(--oc-radius-control);background:var(--oc-input-bg);color:var(--ink);padding:var(--oc-space-3) var(--oc-space-3);line-height:1.35}.docs-chat-form textarea:focus{outline:2px solid var(--oc-input-focus-ring);border-color:var(--oc-input-focus-border)}.docs-chat-form button{align-self:end;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--brand);border-radius:var(--oc-radius-control);background:var(--brand);color:var(--on-brand);font-weight:850;padding:0;cursor:pointer}.docs-chat-form button .icon{width:18px;height:18px}.docs-chat-form button:disabled{opacity:.55;cursor:wait} diff --git a/scripts/docs-site/smoke.mjs b/scripts/docs-site/smoke.mjs index 41f137a8a..b559367e4 100644 --- a/scripts/docs-site/smoke.mjs +++ b/scripts/docs-site/smoke.mjs @@ -692,11 +692,13 @@ if (!/\.oc-code figcaption button:before/.test(siteCss) if (!/\.article-meta-row\{display:flex;align-items:center;justify-content:space-between/.test(siteCss) || !/\.page-actions\{display:inline-flex;align-items:stretch;position:relative\}/.test(siteCss) || !/\.page-tools \.page-actions-primary\{display:inline-flex;align-items:center;gap:7px;white-space:nowrap/.test(siteCss) + || !/\.page-tools \.page-actions-primary\{[^}]*border-radius:var\(--oc-radius-control\) 0 0 var\(--oc-radius-control\);margin-right:-1px/.test(siteCss) || !/\.page-tools \.page-actions-more summary\{display:grid;place-items:center;width:34px/.test(siteCss) + || !/\.page-tools \.page-actions-more summary\{[^}]*border-radius:0 var\(--oc-radius-control\) var\(--oc-radius-control\) 0/.test(siteCss) || !/\.page-tools \.page-actions-more \.page-actions-menu\{position:absolute;top:calc\(100% \+ 8px\);left:auto;right:0;z-index:40;display:none/.test(siteCss) || !/\.page-tools \.page-actions-more\[open\] \.page-actions-menu\{display:grid\}/.test(siteCss) || !/\.page-tools \.page-action\{display:grid;grid-template-columns:18px minmax\(0,1fr\) auto/.test(siteCss)) { - throw new Error("assets: page action trigger should use the split pill button skin"); + throw new Error("assets: page action trigger should use the split button skin"); } if (!/\.page-tools \.page-actions-primary:hover,\.page-tools \.page-actions-more\[open\] summary,\.page-tools \.page-actions-more summary:hover\{border-color:var\(--brand\);color:var\(--ink\)\}/.test(siteCss) || !/\.page-tools \.page-action-external\{justify-self:end;color:var\(--muted\)/.test(siteCss) diff --git a/scripts/docs-site/visual-smoke.mjs b/scripts/docs-site/visual-smoke.mjs index 4341638e3..07fe715f9 100644 --- a/scripts/docs-site/visual-smoke.mjs +++ b/scripts/docs-site/visual-smoke.mjs @@ -214,26 +214,7 @@ async function checkDesktop() { } await page.setViewportSize({ width: 1440, height: 1000 }); await page.goto(`${base}/`, { waitUntil: "networkidle" }); - await expectVisible(page, ".page-tools [data-copy-page]", "copy page tool"); - const pageActionPrimary = await page.evaluate(() => { - const control = document.querySelector(".page-actions-primary"); - const label = control?.querySelector("[data-copy-feedback]"); - const controlRect = control?.getBoundingClientRect(); - const labelRect = label?.getBoundingClientRect(); - const iconRect = control?.querySelector(".icon")?.getBoundingClientRect(); - const style = control ? getComputedStyle(control) : null; - return { - whiteSpace: style?.whiteSpace, - controlHeight: controlRect?.height, - labelHeight: labelRect?.height, - sameLine: iconRect && labelRect ? Math.abs(iconRect.top - labelRect.top) < 4 : false, - }; - }); - if (pageActionPrimary.whiteSpace !== "nowrap" - || (pageActionPrimary.labelHeight ?? 0) > (pageActionPrimary.controlHeight ?? 0) - || !pageActionPrimary.sameLine) { - throw new Error(`page action primary wrapping failed: ${JSON.stringify(pageActionPrimary)}`); - } + await checkPageActions(page, "desktop dark"); await expectVisible(page, ".page-feedback [data-feedback-value='yes']", "page feedback"); const searchShortcut = await page.evaluate(() => { const key = document.querySelector(".search-shortcut"); @@ -700,6 +681,8 @@ async function checkMobile() { || discordOverflow.escaping.length) { throw new Error(`discord mobile overflow failed: ${JSON.stringify(discordOverflow)}`); } + await page.goto(`${base}/`, { waitUntil: "networkidle" }); + await checkPageActions(page, "mobile dark"); await page.close(); } @@ -808,9 +791,123 @@ async function checkLightMode() { if (skin.theme !== "light" || skin.codeText !== "#26262c" || skin.badgeRadius !== "0px" || skin.minCardWidth < 150) { throw new Error(`light visual skin failed: ${JSON.stringify(skin)}`); } + await page.goto(`${base}/`, { waitUntil: "networkidle" }); + await checkPageActions(page, "desktop light"); await page.close(); } +async function checkPageActions(page, label) { + await expectVisible(page, ".page-actions-primary", `${label} Copy page segment`); + await expectVisible(page, ".page-actions-more > summary", `${label} page actions menu segment`); + const closed = await page.evaluate(() => { + const control = document.querySelector(".page-actions"); + const primary = document.querySelector(".page-actions-primary"); + const summary = document.querySelector(".page-actions-more > summary"); + const copyLabel = primary?.querySelector("[data-copy-feedback]"); + const copyIcon = primary?.querySelector(".icon"); + if (!control || !primary || !summary || !copyLabel || !copyIcon) return null; + const controlRect = control.getBoundingClientRect(); + const primaryRect = primary.getBoundingClientRect(); + const summaryRect = summary.getBoundingClientRect(); + const labelRect = copyLabel.getBoundingClientRect(); + const iconRect = copyIcon.getBoundingClientRect(); + const controlStyle = getComputedStyle(control); + const primaryStyle = getComputedStyle(primary); + const summaryStyle = getComputedStyle(summary); + const radiusProbe = document.createElement("div"); + radiusProbe.style.borderRadius = "var(--oc-radius-control)"; + document.body.append(radiusProbe); + const controlRadius = getComputedStyle(radiusProbe).borderTopLeftRadius; + radiusProbe.remove(); + const primaryRightBorder = parseFloat(primaryStyle.borderRightWidth); + const summaryLeftBorder = parseFloat(summaryStyle.borderLeftWidth); + const seamDelta = summaryRect.left - primaryRect.right; + const atPrimaryCenter = document.elementFromPoint( + (primaryRect.left + primaryRect.right) / 2, + (primaryRect.top + primaryRect.bottom) / 2, + ); + const atSummaryCenter = document.elementFromPoint( + (summaryRect.left + summaryRect.right) / 2, + (summaryRect.top + summaryRect.bottom) / 2, + ); + return { + controlDisplay: controlStyle.display, + controlWrap: controlStyle.flexWrap, + controlHeight: controlRect.height, + primaryHeight: primaryRect.height, + summaryHeight: summaryRect.height, + topDelta: summaryRect.top - primaryRect.top, + bottomDelta: summaryRect.bottom - primaryRect.bottom, + seamDelta, + seamWidth: primaryRightBorder + summaryLeftBorder + seamDelta, + primaryRadii: [ + primaryStyle.borderTopLeftRadius, + primaryStyle.borderTopRightRadius, + primaryStyle.borderBottomRightRadius, + primaryStyle.borderBottomLeftRadius, + ], + summaryRadii: [ + summaryStyle.borderTopLeftRadius, + summaryStyle.borderTopRightRadius, + summaryStyle.borderBottomRightRadius, + summaryStyle.borderBottomLeftRadius, + ], + controlRadius, + whiteSpace: primaryStyle.whiteSpace, + labelHeight: labelRect.height, + sameLine: Math.abs(iconRect.top - labelRect.top) < 4, + distinctTargets: atPrimaryCenter?.closest(".page-actions-primary") === primary + && atSummaryCenter?.closest(".page-actions-more > summary") === summary, + }; + }); + const closeEnough = (value, expected) => Math.abs((value ?? Number.NaN) - expected) <= 0.5; + if (!closed + || closed.controlDisplay !== "flex" + || closed.controlWrap !== "nowrap" + || !closeEnough(closed.controlHeight, closed.primaryHeight) + || !closeEnough(closed.primaryHeight, closed.summaryHeight) + || !closeEnough(closed.topDelta, 0) + || !closeEnough(closed.bottomDelta, 0) + || closed.seamDelta > 0 + || closed.seamDelta < -1 + || !closeEnough(closed.seamWidth, 1) + || closed.primaryRadii.join(" ") !== `${closed.controlRadius} 0px 0px ${closed.controlRadius}` + || closed.summaryRadii.join(" ") !== `0px ${closed.controlRadius} ${closed.controlRadius} 0px` + || closed.whiteSpace !== "nowrap" + || closed.labelHeight > closed.primaryHeight + || !closed.sameLine + || !closed.distinctTargets) { + throw new Error(`${label} split page actions geometry failed: ${JSON.stringify(closed)}`); + } + + await page.locator(".page-actions-more > summary").click(); + const opened = await page.evaluate(() => { + const details = document.querySelector(".page-actions-more"); + const summary = details?.querySelector(":scope > summary"); + const menu = details?.querySelector(":scope > .page-actions-menu"); + const summaryRect = summary?.getBoundingClientRect(); + const menuRect = menu?.getBoundingClientRect(); + return { + open: details?.hasAttribute("open"), + display: menu ? getComputedStyle(menu).display : null, + rightDelta: summaryRect && menuRect ? menuRect.right - summaryRect.right : null, + topGap: summaryRect && menuRect ? menuRect.top - summaryRect.bottom : null, + inViewport: menuRect ? menuRect.left >= 0 && menuRect.right <= innerWidth : false, + }; + }); + if (!opened.open + || opened.display !== "grid" + || !closeEnough(opened.rightDelta, 0) + || !closeEnough(opened.topGap, 8) + || !opened.inViewport) { + throw new Error(`${label} page actions menu alignment failed: ${JSON.stringify(opened)}`); + } + await page.keyboard.press("Escape"); + if (await page.locator(".page-actions-more[open]").count()) { + throw new Error(`${label} page actions menu did not close on Escape`); + } +} + async function expectVisible(page, selector, label) { const visible = await page.locator(selector).first().isVisible(); if (!visible) throw new Error(`missing visible ${label}: ${selector}`);