gamv/ds2-core
1
0
Fork 0
Code Issues 13 Releases 10 Activity

do a clean up

Browse Source
This commit is contained in:
A McIlwraith
2026-07-09 16:33:40 -04:00
parent 2c2a45cb7b
commit 44b116860b
10 changed files with 178 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/assets/scaffolding-min.js vendored
View File

@@ -3372,10 +3372,10 @@ function init() {
scroller.addEventListener("scroll", updateScrollState); scroller.addEventListener("scroll", updateScrollState);
window.addEventListener("resize", updateScrollState); window.addEventListener("resize", updateScrollState);
updateScrollState(); updateScrollState();
ul.innerHTML = spacer !== true ? tablist : "".concat(tablist, "<li role=\"separator\" class=\"separator\"></li>"); ul.innerHTML = spacer !== true ? tablist : "".concat(tablist, "<li aria-hidden=\"true\" class=\"separator\"></li>");
requestAnimationFrame(updateScrollState); requestAnimationFrame(updateScrollState);
setTimeout(updateScrollState, 50); setTimeout(updateScrollState, 50);
ul.innerHTML = spacer !== true ? tablist : "".concat(tablist, "<li role=\"separator\" class=\"separator\"></li>"); ul.innerHTML = spacer !== true ? tablist : "".concat(tablist, "<li aria-hidden=\"true\" class=\"separator\"></li>");
// Tab ordering // Tab ordering
if (tabGroup.hasAttribute("order") || tabGroup.hasAttribute("data-order")) { if (tabGroup.hasAttribute("order") || tabGroup.hasAttribute("data-order")) {

44
public/assets/scaffolding.css
View File

@@ -613,7 +613,7 @@ color-samples color-sample notes {
padding-top: 0.5rem; padding-top: 0.5rem;
} }
tooltip { tooltip, tool-tip {
background: #fff; background: #fff;
border-radius: 0.5rem; border-radius: 0.5rem;
color: #000; color: #000;
@@ -647,7 +647,7 @@ tooltip {
will-change: filter; will-change: filter;
z-index: 10; z-index: 10;
} }
tooltip::before { tooltip::before, tool-tip::before {
clip-path: inset(50%); clip-path: inset(50%);
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
content: "; Has tooltip: "; content: "; Has tooltip: ";
@@ -658,7 +658,7 @@ tooltip::before {
position: absolute; position: absolute;
width: 1px; width: 1px;
} }
tooltip::after { tooltip::after, tool-tip::after {
background: #fff; background: #fff;
content: ""; content: "";
inset: 0; inset: 0;
@@ -671,11 +671,17 @@ tooltip:is([tip-position=top],
[tip-position=block-start], [tip-position=block-start],
:not([tip-position]), :not([tip-position]),
[tip-position=bottom], [tip-position=bottom],
[tip-position=block-end]), tool-tip:is([tip-position=top],
[tip-position=block-start],
:not([tip-position]),
[tip-position=bottom],
[tip-position=block-end]) { [tip-position=block-end]) {
text-align: center; text-align: center;
} }
tooltip:is([tip-position=top], tooltip:is([tip-position=top],
[tip-position=block-start], [tip-position=block-start],
:not([tip-position])), tool-tip:is([tip-position=top],
[tip-position=block-start],
:not([tip-position])) { :not([tip-position])) {
inset-inline-start: 50%; inset-inline-start: 50%;
inset-block-end: calc(100% + 0.75rem + 1rem); inset-block-end: calc(100% + 0.75rem + 1rem);
@@ -683,6 +689,8 @@ tooltip:is([tip-position=top],
} }
tooltip:is([tip-position=top], tooltip:is([tip-position=top],
[tip-position=block-start], [tip-position=block-start],
:not([tip-position]))::after, tool-tip:is([tip-position=top],
[tip-position=block-start],
:not([tip-position]))::after { :not([tip-position]))::after {
--tooltip-pointer: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom/100% 50% no-repeat; --tooltip-pointer: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom/100% 50% no-repeat;
inset-block-end: -1rem; inset-block-end: -1rem;
@@ -690,12 +698,14 @@ tooltip:is([tip-position=top],
border-block-end: 1rem solid transparent; border-block-end: 1rem solid transparent;
} }
tooltip:is([tip-position=right], tooltip:is([tip-position=right],
[tip-position=inline-end]), tool-tip:is([tip-position=right],
[tip-position=inline-end]) { [tip-position=inline-end]) {
inset-inline-start: calc(100% + 1.5rem + 1rem); inset-inline-start: calc(100% + 1.5rem + 1rem);
inset-block-end: 50%; inset-block-end: 50%;
--tooltip-y: 50%; --tooltip-y: 50%;
} }
tooltip:is([tip-position=right], tooltip:is([tip-position=right],
[tip-position=inline-end])::after, tool-tip:is([tip-position=right],
[tip-position=inline-end])::after { [tip-position=inline-end])::after {
--tooltip-pointer: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left/50% 100% no-repeat; --tooltip-pointer: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left/50% 100% no-repeat;
inset-inline-start: -1rem; inset-inline-start: -1rem;
@@ -703,12 +713,14 @@ tooltip:is([tip-position=right],
border-inline-start: 1rem solid transparent; border-inline-start: 1rem solid transparent;
} }
tooltip:is([tip-position=bottom], tooltip:is([tip-position=bottom],
[tip-position=block-end]), tool-tip:is([tip-position=bottom],
[tip-position=block-end]) { [tip-position=block-end]) {
inset-inline-start: 50%; inset-inline-start: 50%;
inset-block-start: calc(100% + 0.75rem + 1rem); inset-block-start: calc(100% + 0.75rem + 1rem);
--tooltip-x: calc(50% * -1); --tooltip-x: calc(50% * -1);
} }
tooltip:is([tip-position=bottom], tooltip:is([tip-position=bottom],
[tip-position=block-end])::after, tool-tip:is([tip-position=bottom],
[tip-position=block-end])::after { [tip-position=block-end])::after {
--tooltip-pointer: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top/100% 50% no-repeat; --tooltip-pointer: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top/100% 50% no-repeat;
inset-block-start: -1rem; inset-block-start: -1rem;
@@ -716,12 +728,14 @@ tooltip:is([tip-position=bottom],
border-block-start: 1rem solid transparent; border-block-start: 1rem solid transparent;
} }
tooltip:is([tip-position=left], tooltip:is([tip-position=left],
[tip-position=inline-start]), tool-tip:is([tip-position=left],
[tip-position=inline-start]) { [tip-position=inline-start]) {
inset-inline-end: calc(100% + 1.5rem + 1rem); inset-inline-end: calc(100% + 1.5rem + 1rem);
inset-block-end: 50%; inset-block-end: 50%;
--tooltip-y: 50%; --tooltip-y: 50%;
} }
tooltip:is([tip-position=left], tooltip:is([tip-position=left],
[tip-position=inline-start])::after, tool-tip:is([tip-position=left],
[tip-position=inline-start])::after { [tip-position=inline-start])::after {
--tooltip-pointer: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right/50% 100% no-repeat; --tooltip-pointer: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right/50% 100% no-repeat;
inset-inline-end: -1rem; inset-inline-end: -1rem;
@@ -729,21 +743,21 @@ tooltip:is([tip-position=left],
border-inline-end: 1rem solid transparent; border-inline-end: 1rem solid transparent;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
tooltip { tooltip, tool-tip {
background: #1f2127; background: #1f2127;
color: #fff; color: #fff;
-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5)); -webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5)); filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
} }
tooltip::after { tooltip::after, tool-tip::after {
background: #1f2127; background: #1f2127;
} }
} }
:has(> tool-tip) { :has(> tooltip), :has(> tool-tip) {
position: relative; position: relative;
} }
:has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip { :has(> tooltip):is(:hover, :focus-visible, :active) > tool-tip, :has(> tooltip):is(:hover, :focus-visible, :active) > tooltip, :has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip, :has(> tool-tip):is(:hover, :focus-visible, :active) > tooltip {
display: block; display: block;
opacity: 1; opacity: 1;
-webkit-transition-delay: 300ms; -webkit-transition-delay: 300ms;
@@ -751,16 +765,20 @@ tooltip:is([tip-position=left],
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
:has(> tool-tip:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) tool-tip { :has(> tool-tip:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) tool-tip,
:has(> tooltip:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) tooltip {
--tooltip-y: 3px; --tooltip-y: 3px;
} }
:has(> tool-tip:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) tool-tip { :has(> tool-tip:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) tool-tip,
:has(> tooltip:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) tooltip {
--tooltip-x: calc(-1 * -3px * -1); --tooltip-x: calc(-1 * -3px * -1);
} }
:has(> tool-tip:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) tool-tip { :has(> tool-tip:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) tool-tip,
:has(> tooltip:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) tooltip {
--tooltip-y: -3px; --tooltip-y: -3px;
} }
:has(> tool-tip:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) tool-tip { :has(> tool-tip:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) tool-tip,
:has(> tooltip:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) tooltip {
--tooltip-x: calc(-1 * 3px * -1); --tooltip-x: calc(-1 * 3px * -1);
} }
} }
@@ -1150,8 +1168,8 @@ body .container main article tabset, body .container main article .tab-group {
margin: 2rem 0 1rem 0; margin: 2rem 0 1rem 0;
} }
body .container main article tabset [role=tablist] li.selected, body .container main article .tab-group [role=tablist] li.selected { body .container main article tabset [role=tablist] li.selected, body .container main article .tab-group [role=tablist] li.selected {
background-color: var(--colour-green); background-color: var(--color-blue);
color: var(--colour-white); color: var(--color-white);
} }
body .container main article tabset > ul, body .container main article tabset > ul,
body .container main article tabset .tab-scroll > ul, body .container main article .tab-group > ul, body .container main article tabset .tab-scroll > ul, body .container main article .tab-group > ul,

13
public/patterns/core/tabs/index.html
View File

@@ -43,8 +43,8 @@
margin: 2rem 0 1rem 0; margin: 2rem 0 1rem 0;
} }
tabset [role=tablist] li.selected, .tab-group [role=tablist] li.selected { tabset [role=tablist] li.selected, .tab-group [role=tablist] li.selected {
background-color: var(--colour-green); background-color: var(--color-blue);
color: var(--colour-white); color: var(--color-white);
} }
tabset > ul, tabset > ul,
tabset .tab-scroll > ul, .tab-group > ul, tabset .tab-scroll > ul, .tab-group > ul,
@@ -244,9 +244,8 @@ $tab-notselected-text: #000 !default;
margin: 2rem 0 1rem 0; margin: 2rem 0 1rem 0;
[role="tablist"] li.selected { [role="tablist"] li.selected {
background-color: var(--colour-green); background-color: var(--color-blue);
color: var(--colour-white); color: var(--color-white);
} }
> ul, > ul,
@@ -677,12 +676,12 @@ export function init(container = document, spacer = true) {
window.addEventListener("resize", updateScrollState); window.addEventListener("resize", updateScrollState);
updateScrollState(); updateScrollState();
ul.innerHTML = spacer !== true ? tablist : `${tablist}<li role="separator" class="separator"></li>`; ul.innerHTML = spacer !== true ? tablist : `${tablist}<li aria-hidden="true" class="separator"></li>`;
requestAnimationFrame(updateScrollState); requestAnimationFrame(updateScrollState);
setTimeout(updateScrollState, 50); setTimeout(updateScrollState, 50);
ul.innerHTML = spacer !== true ? tablist : `${tablist}<li role="separator" class="separator"></li>`; ul.innerHTML = spacer !== true ? tablist : `${tablist}<li aria-hidden="true" class="separator"></li>`;
// Tab ordering // Tab ordering
if (tabGroup.hasAttribute("order") || tabGroup.hasAttribute("data-order")) { if (tabGroup.hasAttribute("order") || tabGroup.hasAttribute("data-order")) {

127
public/patterns/core/tooltip/index.html
View File

@@ -31,15 +31,57 @@
<p><a href="#">Link with a tool tip<span role="tooltip" inert="inert" tip-position="right">Tool tip content</span></a></p> <p><a href="#">Link with a tool tip<span role="tooltip" inert="inert" tip-position="right">Tool tip content</span></a></p>
<tabset id="tooltip"> <tabset id="tooltip">
<pre class="language-html" tab="html"><a href="#">Link with a tool tip<span role="tooltip" inert="inert" tip-position="right">Tool tip content</span></a></pre> <pre class="language-html" tab="html"><a href="#">Link with a tool tip<span role="tooltip" inert="inert" tip-position="right">Tool tip content</span></a></pre>
<pre class="language-pug" tab="pug">a(href="#") Link with a tool tip <pre class="language-pug" tab="pug">mixin tooltip(a)
span(role="tooltip" inert tip-position="right") Tool tip content</pre> -
const required = ['text']
const optional = ['tip-position', 'tip-align', 'inert', 'role' ].concat(required)
// function to strip unallowed options.
const allowed = (obj, whitelist) => {
const set = new Set(whitelist);
const result = {};
for (const [k, v] of Object.entries(obj)) {
if (set.has(k)) result[k] = v;
}
return result;
}
// default values
const defaults = {
"tip-position": "right",
inert: "inert",
role: "tooltip",
}
// unhyphenated to hypenated
const map = {
position: 'tip-position',
align: 'tip-align'
}
for (const [from, to] of Object.entries(map)) {
if (a[from] !== undefined) {
a[to] = a[from]
delete a[from]
}
}
// recheck for required and output if everything required is there.
if (a && required.some(key => !(key in a)))
p Missing keys: #{required.filter(key => !(key in a))}
else
-
text = a.text
a.text = undefined
a = allowed({...defaults, ...a}, optional)
tooltip&attributes(a)!= text</pre>
<pre class="language-css" tab="css">/* Position Options <pre class="language-css" tab="css">/* Position Options
- top / block-start - top / block-start
- right / inline-end - right / inline-end
- bottom / block-end - bottom / block-end
- left / inline-start - left / inline-start
*/ */
[role=tooltip] { tooltip, tool-tip {
background: #fff; background: #fff;
border-radius: 0.5rem; border-radius: 0.5rem;
color: #000; color: #000;
@@ -73,7 +115,7 @@
will-change: filter; will-change: filter;
z-index: 10; z-index: 10;
} }
[role=tooltip]::before { tooltip::before, tool-tip::before {
clip-path: inset(50%); clip-path: inset(50%);
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
content: "; Has tooltip: "; content: "; Has tooltip: ";
@@ -84,7 +126,7 @@
position: absolute; position: absolute;
width: 1px; width: 1px;
} }
[role=tooltip]::after { tooltip::after, tool-tip::after {
background: #fff; background: #fff;
content: ""; content: "";
inset: 0; inset: 0;
@@ -93,21 +135,29 @@
position: absolute; position: absolute;
z-index: -1; z-index: -1;
} }
[role=tooltip]:is([tip-position=top], tooltip:is([tip-position=top],
[tip-position=block-start],
:not([tip-position]),
[tip-position=bottom],
[tip-position=block-end]), tool-tip:is([tip-position=top],
[tip-position=block-start], [tip-position=block-start],
:not([tip-position]), :not([tip-position]),
[tip-position=bottom], [tip-position=bottom],
[tip-position=block-end]) { [tip-position=block-end]) {
text-align: center; text-align: center;
} }
[role=tooltip]:is([tip-position=top], tooltip:is([tip-position=top],
[tip-position=block-start],
:not([tip-position])), tool-tip:is([tip-position=top],
[tip-position=block-start], [tip-position=block-start],
:not([tip-position])) { :not([tip-position])) {
inset-inline-start: 50%; inset-inline-start: 50%;
inset-block-end: calc(100% + 0.75rem + 1rem); inset-block-end: calc(100% + 0.75rem + 1rem);
--tooltip-x: calc(50% * -1); --tooltip-x: calc(50% * -1);
} }
[role=tooltip]:is([tip-position=top], tooltip:is([tip-position=top],
[tip-position=block-start],
:not([tip-position]))::after, tool-tip:is([tip-position=top],
[tip-position=block-start], [tip-position=block-start],
:not([tip-position]))::after { :not([tip-position]))::after {
--tooltip-pointer: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom/100% 50% no-repeat; --tooltip-pointer: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom/100% 50% no-repeat;
@@ -115,39 +165,45 @@
-webkit-border-after: 1rem solid transparent; -webkit-border-after: 1rem solid transparent;
border-block-end: 1rem solid transparent; border-block-end: 1rem solid transparent;
} }
[role=tooltip]:is([tip-position=right], tooltip:is([tip-position=right],
[tip-position=inline-end]), tool-tip:is([tip-position=right],
[tip-position=inline-end]) { [tip-position=inline-end]) {
inset-inline-start: calc(100% + 1.5rem + 1rem); inset-inline-start: calc(100% + 1.5rem + 1rem);
inset-block-end: 50%; inset-block-end: 50%;
--tooltip-y: 50%; --tooltip-y: 50%;
} }
[role=tooltip]:is([tip-position=right], tooltip:is([tip-position=right],
[tip-position=inline-end])::after, tool-tip:is([tip-position=right],
[tip-position=inline-end])::after { [tip-position=inline-end])::after {
--tooltip-pointer: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left/50% 100% no-repeat; --tooltip-pointer: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left/50% 100% no-repeat;
inset-inline-start: -1rem; inset-inline-start: -1rem;
-webkit-border-start: 1rem solid transparent; -webkit-border-start: 1rem solid transparent;
border-inline-start: 1rem solid transparent; border-inline-start: 1rem solid transparent;
} }
[role=tooltip]:is([tip-position=bottom], tooltip:is([tip-position=bottom],
[tip-position=block-end]), tool-tip:is([tip-position=bottom],
[tip-position=block-end]) { [tip-position=block-end]) {
inset-inline-start: 50%; inset-inline-start: 50%;
inset-block-start: calc(100% + 0.75rem + 1rem); inset-block-start: calc(100% + 0.75rem + 1rem);
--tooltip-x: calc(50% * -1); --tooltip-x: calc(50% * -1);
} }
[role=tooltip]:is([tip-position=bottom], tooltip:is([tip-position=bottom],
[tip-position=block-end])::after, tool-tip:is([tip-position=bottom],
[tip-position=block-end])::after { [tip-position=block-end])::after {
--tooltip-pointer: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top/100% 50% no-repeat; --tooltip-pointer: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top/100% 50% no-repeat;
inset-block-start: -1rem; inset-block-start: -1rem;
-webkit-border-before: 1rem solid transparent; -webkit-border-before: 1rem solid transparent;
border-block-start: 1rem solid transparent; border-block-start: 1rem solid transparent;
} }
[role=tooltip]:is([tip-position=left], tooltip:is([tip-position=left],
[tip-position=inline-start]), tool-tip:is([tip-position=left],
[tip-position=inline-start]) { [tip-position=inline-start]) {
inset-inline-end: calc(100% + 1.5rem + 1rem); inset-inline-end: calc(100% + 1.5rem + 1rem);
inset-block-end: 50%; inset-block-end: 50%;
--tooltip-y: 50%; --tooltip-y: 50%;
} }
[role=tooltip]:is([tip-position=left], tooltip:is([tip-position=left],
[tip-position=inline-start])::after, tool-tip:is([tip-position=left],
[tip-position=inline-start])::after { [tip-position=inline-start])::after {
--tooltip-pointer: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right/50% 100% no-repeat; --tooltip-pointer: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right/50% 100% no-repeat;
inset-inline-end: -1rem; inset-inline-end: -1rem;
@@ -155,21 +211,21 @@
border-inline-end: 1rem solid transparent; border-inline-end: 1rem solid transparent;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
[role=tooltip] { tooltip, tool-tip {
background: #1f2127; background: #1f2127;
color: #fff; color: #fff;
-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5)); -webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5)); filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
} }
[role=tooltip]::after { tooltip::after, tool-tip::after {
background: #1f2127; background: #1f2127;
} }
} }
:has(> [role=tooltip]) { :has(> tooltip), :has(> tool-tip) {
position: relative; position: relative;
} }
:has(> [role=tooltip]):is(:hover, :focus-visible, :active) > [role=tooltip] { :has(> tooltip):is(:hover, :focus-visible, :active) > tool-tip, :has(> tooltip):is(:hover, :focus-visible, :active) > tooltip, :has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip, :has(> tool-tip):is(:hover, :focus-visible, :active) > tooltip {
display: block; display: block;
opacity: 1; opacity: 1;
-webkit-transition-delay: 300ms; -webkit-transition-delay: 300ms;
@@ -177,16 +233,20 @@
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
:has(> [role=tooltip]:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) [role=tooltip] { :has(> tool-tip:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) tool-tip,
:has(> tooltip:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) tooltip {
--tooltip-y: 3px; --tooltip-y: 3px;
} }
:has(> [role=tooltip]:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) [role=tooltip] { :has(> tool-tip:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) tool-tip,
:has(> tooltip:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) tooltip {
--tooltip-x: calc(-1 * -3px * -1); --tooltip-x: calc(-1 * -3px * -1);
} }
:has(> [role=tooltip]:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) [role=tooltip] { :has(> tool-tip:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) tool-tip,
:has(> tooltip:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) tooltip {
--tooltip-y: -3px; --tooltip-y: -3px;
} }
:has(> [role=tooltip]:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) [role=tooltip] { :has(> tool-tip:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) tool-tip,
:has(> tooltip:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) tooltip {
--tooltip-x: calc(-1 * 3px * -1); --tooltip-x: calc(-1 * 3px * -1);
} }
}</pre> }</pre>
@@ -221,7 +281,7 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000
*/ */
@mixin tooltip { @mixin tooltip {
[role="tooltip"] { tooltip, tool-tip {
background: $tooltip-light-background; background: $tooltip-light-background;
border-radius: $tooltip-border-radius; border-radius: $tooltip-border-radius;
color: $tooltip-light-foreground; color: $tooltip-light-foreground;
@@ -346,9 +406,10 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000
} }
} }
:has(> [role="tooltip"]) { :has(> tooltip), :has(> tool-tip) {
position: relative; position: relative;
&:is(:hover, :focus-visible, :active) > [role="tooltip"] { &:is(:hover, :focus-visible, :active) > tool-tip,
&:is(:hover, :focus-visible, :active) > tooltip {
display: block; display: block;
opacity: 1; opacity: 1;
transition-delay: 300ms; transition-delay: 300ms;
@@ -356,20 +417,20 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
:has(> tool-tip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))):not(:hover):not(:active) tool-tip,
:has(> [role="tooltip"]:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))):not(:hover):not(:active) [role="tooltip"] { :has(> tooltip:is([tip-position="top"], [tip-position="block-start"], :not([tip-position]))):not(:hover):not(:active) tooltip {
--tooltip-y: 3px; --tooltip-y: 3px;
} }
:has(> tool-tip:is([tip-position="right"], [tip-position="inline-end"])):not(:hover):not(:active) tool-tip,
:has(> [role="tooltip"]:is([tip-position="right"], [tip-position="inline-end"])):not(:hover):not(:active) [role="tooltip"] { :has(> tooltip:is([tip-position="right"], [tip-position="inline-end"])):not(:hover):not(:active) tooltip {
--tooltip-x: calc(-1 * -3px * -1); --tooltip-x: calc(-1 * -3px * -1);
} }
:has(> tool-tip:is([tip-position="bottom"], [tip-position="block-end"])):not(:hover):not(:active) tool-tip,
:has(> [role="tooltip"]:is([tip-position="bottom"], [tip-position="block-end"])):not(:hover):not(:active) [role="tooltip"] { :has(> tooltip:is([tip-position="bottom"], [tip-position="block-end"])):not(:hover):not(:active) tooltip {
--tooltip-y: -3px; --tooltip-y: -3px;
} }
:has(> tool-tip:is([tip-position="left"], [tip-position="inline-start"])):not(:hover):not(:active) tool-tip,
:has(> [role="tooltip"]:is([tip-position="left"], [tip-position="inline-start"])):not(:hover):not(:active) [role="tooltip"] { :has(> tooltip:is([tip-position="left"], [tip-position="inline-start"])):not(:hover):not(:active) tooltip {
--tooltip-x: calc(-1 * 3px * -1); --tooltip-x: calc(-1 * 3px * -1);
} }

4
src/pg/core/_colour-samples.pug
View File

@@ -216,7 +216,7 @@ mixin colour-samples(colors, theid)
- for ( var ii = 0; ii < colors[i].grad.l.length; ++ii ) { - for ( var ii = 0; ii < colors[i].grad.l.length; ++ii ) {
color-pill(data-hex= color( colors[i].grad.l[ii].c, "hex") data-rgb= color(colors[i].grad.l[ii].c, "rgb") data-token= "--" + colorpfx + "-" + colors[i].grad.l[ii].n) color-pill(data-hex= color( colors[i].grad.l[ii].c, "hex") data-rgb= color(colors[i].grad.l[ii].c, "rgb") data-token= "--" + colorpfx + "-" + colors[i].grad.l[ii].n)
span(style="background-color: " + colors[i].grad.l[ii].c ) span(style="background-color: " + colors[i].grad.l[ii].c )
tooltip.tooltip-tc.color-accessibility(role="tooltip" inert tip-position="bottom") div.tooltip-tc.color-accessibility(role="tooltip" inert tip-position="bottom")
+accessibility-info(color(colors[i].grad.l[ii].c, "rgb")) +accessibility-info(color(colors[i].grad.l[ii].c, "rgb"))
if colors[i].grad.l[ii].d if colors[i].grad.l[ii].d
span #{colors[i].grad.l[ii].d} span #{colors[i].grad.l[ii].d}
@@ -228,7 +228,7 @@ mixin colour-samples(colors, theid)
- for ( var ii = 0; ii < colors[i].grad.d.length; ++ii ) { - for ( var ii = 0; ii < colors[i].grad.d.length; ++ii ) {
color-pill(data-hex= color(colors[i].grad.d[ii].c, "hex") data-rgb= color(colors[i].grad.d[ii].c, "rgb") data-token= "--" + colorpfx + "-" + colors[i].grad.d[ii].n) color-pill(data-hex= color(colors[i].grad.d[ii].c, "hex") data-rgb= color(colors[i].grad.d[ii].c, "rgb") data-token= "--" + colorpfx + "-" + colors[i].grad.d[ii].n)
span(style="background-color: " + colors[i].grad.d[ii].c ) span(style="background-color: " + colors[i].grad.d[ii].c )
tooltip.tooltip-tc.color-accessibility(role="tooltip" inert tip-position="bottom") div.tooltip-tc.color-accessibility(role="tooltip" inert tip-position="bottom")
+accessibility-info(color(colors[i].grad.d[ii].c, "rgb")) +accessibility-info(color(colors[i].grad.d[ii].c, "rgb"))
if colors[i].grad.d[ii].d if colors[i].grad.d[ii].d
span #{colors[i].grad.d[ii].d} span #{colors[i].grad.d[ii].d}

2
src/pg/core/_master-index.pug
View File

@@ -76,12 +76,10 @@ html(lang= lang )
block header block header
div.container div.container
block body-top
main#main main#main
h1= site h1= site
each category in content each category in content
+show-content(category, "") +show-content(category, "")
block body-bottom
block footer block footer
script(src="assets/scaffolding-min.js") script(src="assets/scaffolding-min.js")

5
src/pg/patterns/core/tabs/_tabs.scss
View File

@@ -13,9 +13,8 @@ $tab-notselected-text: #000 !default;
margin: 2rem 0 1rem 0; margin: 2rem 0 1rem 0;
[role="tablist"] li.selected { [role="tablist"] li.selected {
background-color: var(--colour-green); background-color: var(--color-blue);
color: var(--colour-white); color: var(--color-white);
} }
> ul, > ul,

3
src/pg/patterns/core/tabs/index.pug
View File

@@ -53,5 +53,4 @@ block content
tabs.init(); tabs.init();
+h(4) +h(4)
pre.language-js pre.language-js
include _tabs.js include _tabs.js

4
src/pg/patterns/core/tabs/tabs.css
View File

@@ -2,8 +2,8 @@ tabset, .tab-group {
margin: 2rem 0 1rem 0; margin: 2rem 0 1rem 0;
} }
tabset [role=tablist] li.selected, .tab-group [role=tablist] li.selected { tabset [role=tablist] li.selected, .tab-group [role=tablist] li.selected {
background-color: var(--colour-green); background-color: var(--color-blue);
color: var(--colour-white); color: var(--color-white);
} }
tabset > ul, tabset > ul,
tabset .tab-scroll > ul, .tab-group > ul, tabset .tab-scroll > ul, .tab-group > ul,

58
src/pg/patterns/core/tooltip/tooltip.css
View File

@@ -4,7 +4,7 @@
- bottom / block-end - bottom / block-end
- left / inline-start - left / inline-start
*/ */
[role=tooltip] { tooltip, tool-tip {
background: #fff; background: #fff;
border-radius: 0.5rem; border-radius: 0.5rem;
color: #000; color: #000;
@@ -38,7 +38,7 @@
will-change: filter; will-change: filter;
z-index: 10; z-index: 10;
} }
[role=tooltip]::before { tooltip::before, tool-tip::before {
clip-path: inset(50%); clip-path: inset(50%);
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
content: "; Has tooltip: "; content: "; Has tooltip: ";
@@ -49,7 +49,7 @@
position: absolute; position: absolute;
width: 1px; width: 1px;
} }
[role=tooltip]::after { tooltip::after, tool-tip::after {
background: #fff; background: #fff;
content: ""; content: "";
inset: 0; inset: 0;
@@ -58,21 +58,29 @@
position: absolute; position: absolute;
z-index: -1; z-index: -1;
} }
[role=tooltip]:is([tip-position=top], tooltip:is([tip-position=top],
[tip-position=block-start],
:not([tip-position]),
[tip-position=bottom],
[tip-position=block-end]), tool-tip:is([tip-position=top],
[tip-position=block-start], [tip-position=block-start],
:not([tip-position]), :not([tip-position]),
[tip-position=bottom], [tip-position=bottom],
[tip-position=block-end]) { [tip-position=block-end]) {
text-align: center; text-align: center;
} }
[role=tooltip]:is([tip-position=top], tooltip:is([tip-position=top],
[tip-position=block-start],
:not([tip-position])), tool-tip:is([tip-position=top],
[tip-position=block-start], [tip-position=block-start],
:not([tip-position])) { :not([tip-position])) {
inset-inline-start: 50%; inset-inline-start: 50%;
inset-block-end: calc(100% + 0.75rem + 1rem); inset-block-end: calc(100% + 0.75rem + 1rem);
--tooltip-x: calc(50% * -1); --tooltip-x: calc(50% * -1);
} }
[role=tooltip]:is([tip-position=top], tooltip:is([tip-position=top],
[tip-position=block-start],
:not([tip-position]))::after, tool-tip:is([tip-position=top],
[tip-position=block-start], [tip-position=block-start],
:not([tip-position]))::after { :not([tip-position]))::after {
--tooltip-pointer: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom/100% 50% no-repeat; --tooltip-pointer: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom/100% 50% no-repeat;
@@ -80,39 +88,45 @@
-webkit-border-after: 1rem solid transparent; -webkit-border-after: 1rem solid transparent;
border-block-end: 1rem solid transparent; border-block-end: 1rem solid transparent;
} }
[role=tooltip]:is([tip-position=right], tooltip:is([tip-position=right],
[tip-position=inline-end]), tool-tip:is([tip-position=right],
[tip-position=inline-end]) { [tip-position=inline-end]) {
inset-inline-start: calc(100% + 1.5rem + 1rem); inset-inline-start: calc(100% + 1.5rem + 1rem);
inset-block-end: 50%; inset-block-end: 50%;
--tooltip-y: 50%; --tooltip-y: 50%;
} }
[role=tooltip]:is([tip-position=right], tooltip:is([tip-position=right],
[tip-position=inline-end])::after, tool-tip:is([tip-position=right],
[tip-position=inline-end])::after { [tip-position=inline-end])::after {
--tooltip-pointer: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left/50% 100% no-repeat; --tooltip-pointer: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left/50% 100% no-repeat;
inset-inline-start: -1rem; inset-inline-start: -1rem;
-webkit-border-start: 1rem solid transparent; -webkit-border-start: 1rem solid transparent;
border-inline-start: 1rem solid transparent; border-inline-start: 1rem solid transparent;
} }
[role=tooltip]:is([tip-position=bottom], tooltip:is([tip-position=bottom],
[tip-position=block-end]), tool-tip:is([tip-position=bottom],
[tip-position=block-end]) { [tip-position=block-end]) {
inset-inline-start: 50%; inset-inline-start: 50%;
inset-block-start: calc(100% + 0.75rem + 1rem); inset-block-start: calc(100% + 0.75rem + 1rem);
--tooltip-x: calc(50% * -1); --tooltip-x: calc(50% * -1);
} }
[role=tooltip]:is([tip-position=bottom], tooltip:is([tip-position=bottom],
[tip-position=block-end])::after, tool-tip:is([tip-position=bottom],
[tip-position=block-end])::after { [tip-position=block-end])::after {
--tooltip-pointer: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top/100% 50% no-repeat; --tooltip-pointer: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top/100% 50% no-repeat;
inset-block-start: -1rem; inset-block-start: -1rem;
-webkit-border-before: 1rem solid transparent; -webkit-border-before: 1rem solid transparent;
border-block-start: 1rem solid transparent; border-block-start: 1rem solid transparent;
} }
[role=tooltip]:is([tip-position=left], tooltip:is([tip-position=left],
[tip-position=inline-start]), tool-tip:is([tip-position=left],
[tip-position=inline-start]) { [tip-position=inline-start]) {
inset-inline-end: calc(100% + 1.5rem + 1rem); inset-inline-end: calc(100% + 1.5rem + 1rem);
inset-block-end: 50%; inset-block-end: 50%;
--tooltip-y: 50%; --tooltip-y: 50%;
} }
[role=tooltip]:is([tip-position=left], tooltip:is([tip-position=left],
[tip-position=inline-start])::after, tool-tip:is([tip-position=left],
[tip-position=inline-start])::after { [tip-position=inline-start])::after {
--tooltip-pointer: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right/50% 100% no-repeat; --tooltip-pointer: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right/50% 100% no-repeat;
inset-inline-end: -1rem; inset-inline-end: -1rem;
@@ -120,21 +134,21 @@
border-inline-end: 1rem solid transparent; border-inline-end: 1rem solid transparent;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
[role=tooltip] { tooltip, tool-tip {
background: #1f2127; background: #1f2127;
color: #fff; color: #fff;
-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5)); -webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5)); filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
} }
[role=tooltip]::after { tooltip::after, tool-tip::after {
background: #1f2127; background: #1f2127;
} }
} }
:has(> [role=tooltip]) { :has(> tooltip), :has(> tool-tip) {
position: relative; position: relative;
} }
:has(> [role=tooltip]):is(:hover, :focus-visible, :active) > [role=tooltip] { :has(> tooltip):is(:hover, :focus-visible, :active) > tool-tip, :has(> tooltip):is(:hover, :focus-visible, :active) > tooltip, :has(> tool-tip):is(:hover, :focus-visible, :active) > tool-tip, :has(> tool-tip):is(:hover, :focus-visible, :active) > tooltip {
display: block; display: block;
opacity: 1; opacity: 1;
-webkit-transition-delay: 300ms; -webkit-transition-delay: 300ms;
@@ -142,16 +156,20 @@
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
:has(> [role=tooltip]:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) [role=tooltip] { :has(> tool-tip:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) tool-tip,
:has(> tooltip:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) tooltip {
--tooltip-y: 3px; --tooltip-y: 3px;
} }
:has(> [role=tooltip]:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) [role=tooltip] { :has(> tool-tip:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) tool-tip,
:has(> tooltip:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) tooltip {
--tooltip-x: calc(-1 * -3px * -1); --tooltip-x: calc(-1 * -3px * -1);
} }
:has(> [role=tooltip]:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) [role=tooltip] { :has(> tool-tip:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) tool-tip,
:has(> tooltip:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) tooltip {
--tooltip-y: -3px; --tooltip-y: -3px;
} }
:has(> [role=tooltip]:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) [role=tooltip] { :has(> tool-tip:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) tool-tip,
:has(> tooltip:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) tooltip {
--tooltip-x: calc(-1 * 3px * -1); --tooltip-x: calc(-1 * 3px * -1);
} }
} }