@@ -1642,13 +1617,15 @@ const questions = [
controls()[0]?.focus();
};
- /* Screens 05 through 11 are reachable only from the configure hub, so
- both their CTA and their Back return there rather than to the DOM
- neighbor. The hub itself and the review screen keep the ordinary
- rule: Back on the hub is the font pair, Back on the review's error
- box is the icons screen. */
+ /* Motion, boundaries, corners, depth, and icons are reachable only
+ from the configure hub, so both their CTA and their Back return
+ there rather than to the DOM neighbor. Type scale (05) and layout
+ (07) sit on the linear path ahead of the hub and follow DOM order.
+ The hub itself and the review screen keep the ordinary rule: Back
+ on the hub is the layout screen (or type scale when layout is
+ skipped), Back on the review's error box is the icons screen. */
const HUB_SCREEN = '04b';
- const HUB_RETURNS = new Set(['05', '06', '07', '08', '09', '10', '11']);
+ const HUB_RETURNS = new Set(['06', '08', '09', '10', '11']);
const screenIndex = (id) => screens.findIndex((screen) => screen.dataset.screen === id);
form.onclick = (e) => {
diff --git a/picker/scripts/design-context.js b/picker/scripts/design-context.js
index f1fa89a9a..51f87a9ca 100644
--- a/picker/scripts/design-context.js
+++ b/picker/scripts/design-context.js
@@ -548,8 +548,6 @@ function renderDocument() {
const template = document.getElementById(`dcx-detail-${id}`);
template.innerHTML = `
${build(snapshot, name)}`;
}
- const masthead = $('[data-dcx-product]');
- if (masthead && name) masthead.textContent = `Design context — ${name}`;
if (name) document.title = `Design context — ${name}`;
}
diff --git a/picker/scripts/palette-picker.js b/picker/scripts/palette-picker.js
index 646bee9d1..48f89e26a 100644
--- a/picker/scripts/palette-picker.js
+++ b/picker/scripts/palette-picker.js
@@ -2224,7 +2224,7 @@ const paintStage = () => {
/* ============================================================
Screen 04b: the configure hub.
- Seven questions remain after the font pair, and every one of
+ Five questions remain after the layout screen, and every one of
them already holds an answer: sync() pre-fills each per-surface
field with its surface's default the moment the tile is checked,
and the flat radios ship with a default checked. The hub reads
@@ -2237,21 +2237,19 @@ const paintStage = () => {
const hubScreen = document.querySelector('.picker-screen[data-screen="04b"]');
/* Card target screen mapped to the radio group that screen answers. */
const HUB_GROUPS = {
- '05': 'type-scale',
'06': 'motion-energy',
- '07': 'layout-structure',
'08': 'boundary-style',
'09': 'corner-style',
'10': 'depth-style',
'11': 'icon-pack',
};
-/* Type scale and icon set render no per-surface fields, so they have
- no dataset.chosen. A change event on their group is the one signal
+/* The icon set renders no per-surface fields, so it has no
+ dataset.chosen. A change event on its group is the one signal
that a person picked rather than the markup default: programmatic
checks never fire it. */
const hubEdited = new Set();
document.addEventListener('change', ({ target }) => {
- if (target?.name === 'type-scale' || target?.name === 'icon-pack') hubEdited.add(target.name);
+ if (target?.name === 'icon-pack') hubEdited.add(target.name);
});
const hubSurfaceLabel = (mode) => modeInputs.find((input) => input.value === mode)?.dataset.surfaceLabel ?? mode;
@@ -2305,12 +2303,15 @@ function hubRow(surfaceLabel, valueTitle, group, value) {
dot.setAttribute('aria-hidden', 'true');
val.append(dot, valueTitle);
pill.append(label, val);
- const note = document.createElement('span');
- note.className = 'picker-hub-note';
- const why = value ? hubOptionDesc(group, value) : '';
- note.textContent = why;
- note.hidden = !why;
- entry.append(pill, note);
+ entry.append(pill);
+ if (group !== 'icon-pack') {
+ const note = document.createElement('span');
+ note.className = 'picker-hub-note';
+ const why = value ? hubOptionDesc(group, value) : '';
+ note.textContent = why;
+ note.hidden = !why;
+ entry.append(note);
+ }
return entry;
}
diff --git a/picker/styles/design-context.css b/picker/styles/design-context.css
index 322a79d65..c0478e8c0 100644
--- a/picker/styles/design-context.css
+++ b/picker/styles/design-context.css
@@ -35,65 +35,13 @@ body.is-locked { overflow: hidden; }
but the document has its own stacked layout below 920px. */
body.dcx-open .picker-shell { display: none; }
body.dcx-open .picker-width-gate { display: none; }
-body.dcx-open { background: linear-gradient(180deg, var(--ks-lacquer), var(--ks-lacquer-deep)); }
+body.dcx-open { overflow: hidden; background: linear-gradient(180deg, var(--ks-lacquer), var(--ks-lacquer-deep)); }
.dcx-shell {
- min-height: 100svh;
- background: linear-gradient(180deg, var(--ks-lacquer), var(--ks-lacquer-deep));
-}
-
-/* Masthead — the slot the prototype gave its site header, reduced to what
- the picker owes: the mark, what this page is, and that the answers are
- already on disk. */
-.dcx-masthead {
- display: flex;
- align-items: center;
- gap: 18px;
- padding: 18px clamp(14px, 2vw, 26px) 6px;
-}
-
-.dcx-masthead-brand {
- display: inline-flex;
- align-items: center;
- gap: 6px;
- color: var(--ks-kinpaku);
-}
-
-.dcx-masthead-brand svg { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; }
-
-.dcx-masthead-brand span {
- font-family: var(--ks-font-display);
- font-weight: 400;
- font-size: 1.02rem;
- letter-spacing: 0.15em;
- text-transform: uppercase;
- line-height: 1;
-}
-
-.dcx-masthead-title {
- flex: 1;
- min-width: 0;
+ height: 100svh;
+ max-height: 100svh;
overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-family: var(--ks-mono);
- font-size: 0.7rem;
- letter-spacing: 0.18em;
- text-transform: uppercase;
- color: var(--ks-text-muted);
-}
-
-.dcx-masthead-note {
- font-family: var(--ks-mono);
- font-size: 0.7rem;
- letter-spacing: 0.18em;
- text-transform: uppercase;
- color: var(--ks-text-faint);
- white-space: nowrap;
-}
-
-@media (max-width: 920px) {
- .dcx-masthead-note { display: none; }
+ background: linear-gradient(180deg, var(--ks-lacquer), var(--ks-lacquer-deep));
}
.dcx-expander code {
@@ -111,15 +59,16 @@ body.dcx-open { background: linear-gradient(180deg, var(--ks-lacquer), var(--ks-
============================================================ */
.dcx-shell {
--dcx-gap: clamp(10px, 0.9vw, 14px);
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
padding: var(--dcx-gap) clamp(14px, 2vw, 26px) clamp(16px, 2.2vw, 28px);
}
.dcx-grid {
position: relative;
- /* The prototype budgeted 130px for the site header; the picker's masthead
- is slimmer, so the grid keeps more of the viewport. */
- height: calc(100svh - 96px);
- min-height: 560px;
+ flex: 1 1 0;
+ min-height: 0;
display: grid;
grid-template-columns: repeat(18, minmax(0, 1fr));
grid-template-rows: repeat(12, minmax(0, 1fr));
diff --git a/picker/styles/picker.css b/picker/styles/picker.css
index 05333bc03..ab512e6ba 100644
--- a/picker/styles/picker.css
+++ b/picker/styles/picker.css
@@ -838,6 +838,28 @@ body.picker-page {
background: var(--ks-lacquer-raised);
}
+/* Tips on grips and tools sit outside their band's box. Grid paint order
+ otherwise buries them under the next swatch; the deck's stacked cards
+ can overlap the panel edge the same way. */
+.picker-band-item:has(.picker-band:is(:hover, :focus-within)),
+.picker-band-item:has(.picker-band[data-dragging]) {
+ position: relative;
+ z-index: 3;
+}
+
+.picker-band-item:has(.picker-band[data-dragging]) {
+ z-index: 6;
+}
+
+.picker-screen[data-screen="02"] .picker-palette-subgrid {
+ position: relative;
+ z-index: 2;
+}
+
+.picker-reset:is(:hover, :focus-visible) {
+ z-index: 5;
+}
+
.picker-band {
--band-color: var(--ks-graphite);
--band-ink: var(--ks-champagne);
@@ -7556,7 +7578,7 @@ body.picker-page {
/* ============================================================
Screen 04b: the configure hub. Three packed columns of cards;
- the tall per-surface cards (motion, layout) anchor the outer
+ the tall per-surface cards (motion, depth) anchor the outer
tracks. Sharp corners and hairline rules, the same vocabulary
as the option rows. Summaries are written by renderHub().
============================================================ */