@master/internal-site 0.2.5 → 0.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/astro.mjs +9 -1
- package/package.json +9 -8
- package/src/benchmarks/BenchmarkChart.astro +8 -8
- package/src/benchmarks/BenchmarkDelta.astro +2 -3
- package/src/benchmarks/BenchmarkFigure.astro +1 -1
- package/src/benchmarks/BenchmarkMetricTable.astro +10 -10
- package/src/benchmarks/BenchmarkScrollRegion.svelte +2 -2
- package/src/benchmarks/BenchmarkStatus.astro +2 -3
- package/src/benchmarks/utils.ts +1 -9
- package/src/css/NamespaceUtilityTable.astro +11 -11
- package/src/css/ThemeNumberVariableTable.astro +14 -14
- package/src/demo/Demo.svelte +2 -2
- package/src/demo/DemoAsset.astro +3 -3
- package/src/demo/DemoBadge.svelte +3 -3
- package/src/demo/DemoContainer.svelte +2 -2
- package/src/demo/DemoControls.svelte +1 -1
- package/src/demo/DemoCopyButton.svelte +1 -1
- package/src/demo/DemoFeatureSupport.svelte +3 -4
- package/src/demo/DemoIndex.astro +1 -1
- package/src/demo/DemoMotion.svelte +2 -2
- package/src/demo/DemoSurface.svelte +2 -2
- package/src/demo/DemoTokenTable.astro +6 -6
- package/src/demo/DemoViewport.svelte +11 -11
- package/src/demo/foundations/FoundationDialog.astro +1 -1
- package/src/demo/foundations/FoundationMedia.astro +2 -2
- package/src/demo/foundations/FoundationShrink.astro +2 -2
- package/src/demo/foundations/Palette.svelte +1 -1
- package/src/demo/reference/document.ts +3 -2
- package/src/demo/specimens/background-attachment.json +3 -3
- package/src/demo/specimens/background-origin.json +9 -9
- package/src/demo/specimens/clip-path.json +3 -3
- package/src/demo/specimens/counter-set.json +8 -8
- package/src/demo/specimens/filter.json +6 -6
- package/src/demo/specimens/grid-auto-flow.json +3 -3
- package/src/demo/specimens/grid-template-areas.json +5 -5
- package/src/demo/specimens/grid-template-columns.json +6 -6
- package/src/demo/specimens/justify-content.json +8 -8
- package/src/demo/specimens/mask-image.json +3 -3
- package/src/demo/specimens/object-position.json +6 -6
- package/src/demo/specimens/place-content.json +4 -4
- package/src/demo/specimens/scroll-snap-stop.json +3 -3
- package/src/demo/specimens/shape-margin.json +5 -5
- package/src/demo/specimens/shape-outside.json +3 -3
- package/src/demo/specimens/transform-origin.json +3 -3
- package/src/docs-shell/common/locales.js +1 -1
- package/src/docs-shell/components/CodeCopyButton.astro +1 -1
- package/src/docs-shell/components/DocHeader.svelte +3 -3
- package/src/docs-shell/components/DocMenuButton.svelte +4 -5
- package/src/docs-shell/components/DocVersionSelect.svelte +2 -2
- package/src/docs-shell/components/DocumentCodeExampleView.astro +2 -2
- package/src/docs-shell/components/DocumentCodeTable.astro +5 -5
- package/src/docs-shell/components/DocumentCopyButton.svelte +1 -1
- package/src/docs-shell/components/DocumentFileTree.astro +2 -2
- package/src/docs-shell/components/DocumentFlow.astro +2 -2
- package/src/docs-shell/components/DocumentIllustration.astro +2 -2
- package/src/docs-shell/components/DocumentNamespaceTable.astro +6 -6
- package/src/docs-shell/components/DocumentParameters.astro +2 -2
- package/src/docs-shell/components/ExpandContent.svelte +1 -1
- package/src/docs-shell/components/LanguageButton.svelte +2 -2
- package/src/docs-shell/components/LanguageSelect.svelte +2 -2
- package/src/docs-shell/components/NotFound.astro +1 -1
- package/src/docs-shell/components/PageNavs.astro +4 -4
- package/src/docs-shell/components/SearchButton.svelte +1 -1
- package/src/docs-shell/components/SearchDialog.svelte +4 -1
- package/src/docs-shell/components/SearchDialogPanel.svelte +8 -8
- package/src/docs-shell/components/Segments.svelte +2 -1
- package/src/docs-shell/components/ThemeSelect.svelte +2 -2
- package/src/docs-shell/components/markdown/Table.astro +3 -3
- package/src/docs-shell/components/markdown/TableCell.astro +4 -0
- package/src/docs-shell/components/markdown/TableHead.astro +4 -0
- package/src/docs-shell/components/markdown/TableRow.astro +4 -0
- package/src/docs-shell/components/markdown-components.ts +6 -0
- package/src/docs-shell/contexts/search.ts +11 -1
- package/src/docs-shell/contexts/theme-mode.svelte.ts +1 -0
- package/src/docs-shell/data/legacy-design-routes.json +176 -0
- package/src/docs-shell/remark/markdown-components.js +2 -2
- package/src/docs-shell/utils/snackbar.ts +1 -1
- package/src/examples/article-transitions/page.astro +0 -1
- package/src/examples/components/ArticleTransitionScene.svelte +4 -4
- package/src/examples/components/ViewTransitionScene.svelte +1 -1
- package/src/examples/view-transitions/page.astro +0 -1
- package/src/layouts/Document.astro +1 -0
- package/src/scripts/atomic-class-authoring.ts +4 -1
- package/src/scripts/legacy-design-routes.ts +76 -0
- package/src/scripts/style-delivery.mjs +22 -2
- package/src/sections/document.astro +1 -1
- package/src/styles/docs-shell/documentation-search.css +6 -5
- package/src/styles/docs-shell/materials.css +10 -22
- package/src/styles/docs-shell/menu.css +8 -8
- package/src/styles/docs-shell/segments.css +2 -2
- package/src/styles/docs-shell/theme.css +2 -17
- package/src/styles/foundation.css +1 -0
- package/src/styles/site-contract.md +31 -0
- package/src/styles/system/badge-tones.css +4 -0
- package/src/styles/system/badge.ts +2 -0
- package/src/styles/system/browser.css +3 -6
- package/src/styles/system/button-feedback.css +6 -9
- package/src/styles/system/buttons.css +1 -51
- package/src/styles/system/checks.css +4 -18
- package/src/styles/system/controls.css +0 -1
- package/src/styles/system/dialog.css +3 -3
- package/src/styles/system/expand.css +3 -3
- package/src/styles/system/fields.css +7 -23
- package/src/styles/system/header-core.css +10 -10
- package/src/styles/system/kbd.css +1 -4
- package/src/styles/system/mixins.css +2 -2
- package/src/styles/system/pager.css +2 -13
- package/src/styles/system/range.css +1 -12
- package/src/styles/system/search-trigger.css +2 -2
- package/src/styles/system/segmented.css +1 -16
- package/src/styles/system/sheet.css +1 -8
- package/src/styles/system/sheet.ts +2 -0
- package/src/styles/system/sidebar.css +1 -1
- package/src/styles/system/specimens.css +5 -17
- package/src/styles/system/surfaces.css +0 -1
- package/src/styles/system/table-layout.css +12 -0
- package/src/styles/system/table.css +3 -23
- package/src/styles/system/table.ts +4 -0
- package/src/styles/system/tokens.css +48 -63
- package/src/styles/system/tooltip.css +2 -4
- package/src/styles/system/tray-layout.css +20 -0
- package/src/styles/system/tray.css +2 -20
- package/src/styles/system/tray.ts +3 -0
- package/src/demo/DemoScrollArea.svelte +0 -17
- package/src/examples/scene.css +0 -3
- package/src/styles/system/DESIGN.md +0 -128
- package/src/styles/system/menu.css +0 -14
- package/src/styles/system/scroll.css +0 -6
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
|
|
22
22
|
<div class="w-full"><DemoCopyGroup instruction={format === 'value' ? t('Choose a swatch to copy its original CSS color value.') : t('Choose a swatch to copy its CSS variable reference.')}>
|
|
23
23
|
<label class="w-fit ui-field" for={id}>{t('Copy as')}
|
|
24
|
-
<select {id} class="
|
|
24
|
+
<select {id} class="select select-raised" data-variant="raised" bind:value={format}>
|
|
25
25
|
<option value="value">{t('CSS value')}</option><option value="variable">{t('CSS variable')}</option>
|
|
26
26
|
</select>
|
|
27
27
|
</label>
|
|
@@ -9,13 +9,14 @@ import type { DemoScene, ReferenceDemoSection } from '@master/internal-site/demo
|
|
|
9
9
|
const frameFile = fileURLToPath(import.meta.resolve('@master/internal-site/demo/reference/frame.css'))
|
|
10
10
|
const materialFile = fileURLToPath(import.meta.resolve('@master/internal-site/styles/docs-shell/materials.css'))
|
|
11
11
|
const systemTokenFile = fileURLToPath(import.meta.resolve('@master/internal-site/styles/system/tokens.css'))
|
|
12
|
-
const readSystemButtons = () =>
|
|
12
|
+
const readSystemButtons = () => readFileSync(fileURLToPath(import.meta.resolve('@master/ui/components/button.css')), 'utf8')
|
|
13
|
+
const uiTheme = readFileSync(fileURLToPath(import.meta.resolve('@master/ui/theme.css')), 'utf8')
|
|
13
14
|
const systemButtons = readSystemButtons()
|
|
14
15
|
let materials = readFileSync(materialFile, 'utf8')
|
|
15
16
|
const readSystemTokens = () => readFileSync(systemTokenFile, 'utf8').replace(/\/\*[\s\S]*?\*\//g, '')
|
|
16
17
|
let systemTokens = readSystemTokens()
|
|
17
18
|
const frameCSS = readFileSync(frameFile, 'utf8')
|
|
18
|
-
const sharedManifest = () => compileManifestSync(`@mixin --light { &:where(.light, .light *) { @contents; } }\n@mixin --dark { &:where(.dark, .dark *) { @contents; } }\n${materials}`, { baseManifest: preset }).manifest
|
|
19
|
+
const sharedManifest = () => compileManifestSync(`@mixin --light { &:where(.light, .light *) { @contents; } }\n@mixin --dark { &:where(.dark, .dark *) { @contents; } }\n${uiTheme}\n${materials}`, { baseManifest: preset }).manifest
|
|
19
20
|
let shared = sharedManifest()
|
|
20
21
|
|
|
21
22
|
export function demoDocument(section: ReferenceDemoSection, scene: DemoScene, initialTheme?: 'light' | 'dark') {
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"id": "attach-to-scrollable-content",
|
|
5
5
|
"title": "Attach to scrollable content",
|
|
6
6
|
"html": [
|
|
7
|
-
"<!-- Scrollable content · local attachment -->\n<body class=\"min-h(720)\">\n <section id=\"target\" tabindex=\"0\" aria-label=\"Scrollable background specimen\"\n class=\"overflow-auto h(220) w-xs max-w-full p-md b(1) b-solid b-line-divider\n (background-attachment:local) (background-repeat:repeat-y) (background-position-x:50%) (background-position-y:0px)\n (background-size:
|
|
7
|
+
"<!-- Scrollable content · local attachment -->\n<body class=\"min-h(720)\">\n <section id=\"target\" tabindex=\"0\" aria-label=\"Scrollable background specimen\"\n class=\"overflow-auto h(220) w-xs max-w-full p-md b(1) b-solid b-line-divider\n (background-attachment:local) (background-repeat:repeat-y) (background-position-x:50%) (background-position-y:0px)\n (background-size:320px_200px) (background-image:url(/demo/landscape.svg))\"\n>\n <div class=\"flex flex-col items-start justify-between h(480)\">\n <p class=\"m(0) p-xs bg-surface-base fg-text-body\">Start of content</p>\n <p class=\"m(0) p-xs bg-surface-base fg-text-body\">End of content</p>\n </div>\n </section>\n <p class=\"mt-md font-sm fg-text-muted\">Scroll this page as well as the inner panel.</p>\n</body>"
|
|
8
8
|
],
|
|
9
9
|
"css": "",
|
|
10
10
|
"classes": [
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"(background-repeat:repeat-y)",
|
|
22
22
|
"(background-position-x:50%)",
|
|
23
23
|
"(background-position-y:0px)",
|
|
24
|
-
"(background-size:
|
|
24
|
+
"(background-size:320px_200px)",
|
|
25
25
|
"(background-image:url(/demo/landscape.svg))",
|
|
26
26
|
"flex",
|
|
27
27
|
"flex-col",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
],
|
|
39
39
|
"classLists": [
|
|
40
40
|
"min-h(720)",
|
|
41
|
-
"overflow-auto h(220) w-xs max-w-full p-md b(1) b-solid b-line-divider (background-attachment:local) (background-repeat:repeat-y) (background-position-x:50%) (background-position-y:0px) (background-size:
|
|
41
|
+
"overflow-auto h(220) w-xs max-w-full p-md b(1) b-solid b-line-divider (background-attachment:local) (background-repeat:repeat-y) (background-position-x:50%) (background-position-y:0px) (background-size:320px_200px) (background-image:url(/demo/landscape.svg))",
|
|
42
42
|
"flex flex-col items-start justify-between h(480)",
|
|
43
43
|
"m(0) p-xs bg-surface-base fg-text-body",
|
|
44
44
|
"m(0) p-xs bg-surface-base fg-text-body",
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
"id": "choose-the-background-positioning-area",
|
|
5
5
|
"title": "Choose the background positioning area",
|
|
6
6
|
"html": [
|
|
7
|
-
"<!-- Border origin · x 0, y 0 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50)
|
|
8
|
-
"<!-- Padding origin · x 8, y 8 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50)
|
|
9
|
-
"<!-- Content origin · x 32, y 32 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50)
|
|
7
|
+
"<!-- Border origin · x 0, y 0 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),_transparent))\n (background-clip:border-box) (background-repeat:no-repeat) (background-origin:border-box)\n (background-position:0_0) (background-size:80px_50px)\n (background-image:url(/demo/landscape.svg))\"\n></div>",
|
|
8
|
+
"<!-- Padding origin · x 8, y 8 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),_transparent))\n (background-clip:border-box) (background-repeat:no-repeat) (background-origin:padding-box)\n (background-position:0_0) (background-size:80px_50px)\n (background-image:url(/demo/landscape.svg))\"\n></div>",
|
|
9
|
+
"<!-- Content origin · x 32, y 32 -->\n<div id=\"target\" role=\"img\" aria-label=\"Geometric landscape\"\n class=\"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),_transparent))\n (background-clip:border-box) (background-repeat:no-repeat) (background-origin:content-box)\n (background-position:0_0) (background-size:80px_50px)\n (background-image:url(/demo/landscape.svg))\"\n></div>"
|
|
10
10
|
],
|
|
11
11
|
"css": "",
|
|
12
12
|
"classes": [
|
|
@@ -16,20 +16,20 @@
|
|
|
16
16
|
"p-lg",
|
|
17
17
|
"b(8)",
|
|
18
18
|
"b-dashed",
|
|
19
|
-
"(border-color:color-mix(var(--color-violet-50)
|
|
19
|
+
"(border-color:color-mix(var(--color-violet-50),_transparent))",
|
|
20
20
|
"(background-clip:border-box)",
|
|
21
21
|
"(background-repeat:no-repeat)",
|
|
22
22
|
"(background-origin:border-box)",
|
|
23
|
-
"(background-position:
|
|
24
|
-
"(background-size:
|
|
23
|
+
"(background-position:0_0)",
|
|
24
|
+
"(background-size:80px_50px)",
|
|
25
25
|
"(background-image:url(/demo/landscape.svg))",
|
|
26
26
|
"(background-origin:padding-box)",
|
|
27
27
|
"(background-origin:content-box)"
|
|
28
28
|
],
|
|
29
29
|
"classLists": [
|
|
30
|
-
"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50)
|
|
31
|
-
"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50)
|
|
32
|
-
"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50)
|
|
30
|
+
"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),_transparent)) (background-clip:border-box) (background-repeat:no-repeat) (background-origin:border-box) (background-position:0_0) (background-size:80px_50px) (background-image:url(/demo/landscape.svg))",
|
|
31
|
+
"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),_transparent)) (background-clip:border-box) (background-repeat:no-repeat) (background-origin:padding-box) (background-position:0_0) (background-size:80px_50px) (background-image:url(/demo/landscape.svg))",
|
|
32
|
+
"h(176) w(280) max-w-full p-lg b(8) b-dashed (border-color:color-mix(var(--color-violet-50),_transparent)) (background-clip:border-box) (background-repeat:no-repeat) (background-origin:content-box) (background-position:0_0) (background-size:80px_50px) (background-image:url(/demo/landscape.svg))"
|
|
33
33
|
],
|
|
34
34
|
"highlighted": []
|
|
35
35
|
}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"title": "Clip with an inset",
|
|
6
6
|
"html": [
|
|
7
7
|
"<!-- Unclipped · original border -->\n<div\n class=\"h(120) w(240) max-w-full\n outline(1) outline-solid outline-line-subtle bg-surface-base\">\n <div id=\"target\"\n class=\"grid (place-items:center) h(120) w(240)\n max-w-full b(2) b-solid b-blue-60 font-md\n bg-blue-10 fg-blue-80 (clip-path:none)\">\n Clipped panel\n </div>\n</div>",
|
|
8
|
-
"<!-- Inset · rounded paint boundary -->\n<div\n class=\"h(120) w(240) max-w-full\n outline(1) outline-solid outline-line-subtle bg-surface-base\">\n <div id=\"target\"\n class=\"grid (place-items:center) h(120) w(240)\n max-w-full b(2) b-solid b-blue-60 font-md\n bg-blue-10 fg-blue-80\n (clip-path:inset(
|
|
8
|
+
"<!-- Inset · rounded paint boundary -->\n<div\n class=\"h(120) w(240) max-w-full\n outline(1) outline-solid outline-line-subtle bg-surface-base\">\n <div id=\"target\"\n class=\"grid (place-items:center) h(120) w(240)\n max-w-full b(2) b-solid b-blue-60 font-md\n bg-blue-10 fg-blue-80\n (clip-path:inset(8px_24px_round_12px))\">\n Clipped panel\n </div>\n</div>"
|
|
9
9
|
],
|
|
10
10
|
"css": "",
|
|
11
11
|
"classes": [
|
|
@@ -25,13 +25,13 @@
|
|
|
25
25
|
"bg-blue-10",
|
|
26
26
|
"fg-blue-80",
|
|
27
27
|
"(clip-path:none)",
|
|
28
|
-
"(clip-path:inset(
|
|
28
|
+
"(clip-path:inset(8px_24px_round_12px))"
|
|
29
29
|
],
|
|
30
30
|
"classLists": [
|
|
31
31
|
"h(120) w(240) max-w-full outline(1) outline-solid outline-line-subtle bg-surface-base",
|
|
32
32
|
"grid (place-items:center) h(120) w(240) max-w-full b(2) b-solid b-blue-60 font-md bg-blue-10 fg-blue-80 (clip-path:none)",
|
|
33
33
|
"h(120) w(240) max-w-full outline(1) outline-solid outline-line-subtle bg-surface-base",
|
|
34
|
-
"grid (place-items:center) h(120) w(240) max-w-full b(2) b-solid b-blue-60 font-md bg-blue-10 fg-blue-80 (clip-path:inset(
|
|
34
|
+
"grid (place-items:center) h(120) w(240) max-w-full b(2) b-solid b-blue-60 font-md bg-blue-10 fg-blue-80 (clip-path:inset(8px_24px_round_12px))"
|
|
35
35
|
],
|
|
36
36
|
"highlighted": []
|
|
37
37
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"id": "set-a-counter-on-one-item",
|
|
5
5
|
"title": "Set a counter on one item",
|
|
6
6
|
"html": [
|
|
7
|
-
"<!-- Sequence · 1, 9, 10 -->\n<ol role=\"list\" class=\"m(0) p(0) font-md leading-lg (list-style:none) (counter-reset:
|
|
7
|
+
"<!-- Sequence · 1, 9, 10 -->\n<ol role=\"list\" class=\"m(0) p(0) font-md leading-lg (list-style:none) (counter-reset:step_0)\">\n <li class=\"mb-2xs (counter-increment:step_1) fg-text-blue::before\n (content:counter(step)'.\\00a0')::before\">Install dependencies</li>\n <li id=\"target\" value=\"9\" class=\"mb-2xs (counter-increment:step_1) (counter-set:step_9)\n fg-text-blue::before (content:counter(step)'.\\00a0')::before\">Deployment checklist</li>\n <li class=\"mb-2xs (counter-increment:step_1) fg-text-blue::before\n (content:counter(step)'.\\00a0')::before\">Verify production</li>\n</ol>"
|
|
8
8
|
],
|
|
9
9
|
"css": "",
|
|
10
10
|
"classes": [
|
|
@@ -13,18 +13,18 @@
|
|
|
13
13
|
"font-md",
|
|
14
14
|
"leading-lg",
|
|
15
15
|
"(list-style:none)",
|
|
16
|
-
"(counter-reset:
|
|
16
|
+
"(counter-reset:step_0)",
|
|
17
17
|
"mb-2xs",
|
|
18
|
-
"(counter-increment:
|
|
18
|
+
"(counter-increment:step_1)",
|
|
19
19
|
"fg-text-blue::before",
|
|
20
20
|
"(content:counter(step)'.\\00a0')::before",
|
|
21
|
-
"(counter-set:
|
|
21
|
+
"(counter-set:step_9)"
|
|
22
22
|
],
|
|
23
23
|
"classLists": [
|
|
24
|
-
"m(0) p(0) font-md leading-lg (list-style:none) (counter-reset:
|
|
25
|
-
"mb-2xs (counter-increment:
|
|
26
|
-
"mb-2xs (counter-increment:
|
|
27
|
-
"mb-2xs (counter-increment:
|
|
24
|
+
"m(0) p(0) font-md leading-lg (list-style:none) (counter-reset:step_0)",
|
|
25
|
+
"mb-2xs (counter-increment:step_1) fg-text-blue::before (content:counter(step)'.\\00a0')::before",
|
|
26
|
+
"mb-2xs (counter-increment:step_1) (counter-set:step_9) fg-text-blue::before (content:counter(step)'.\\00a0')::before",
|
|
27
|
+
"mb-2xs (counter-increment:step_1) fg-text-blue::before (content:counter(step)'.\\00a0')::before"
|
|
28
28
|
],
|
|
29
29
|
"highlighted": []
|
|
30
30
|
}
|
|
@@ -4,19 +4,19 @@
|
|
|
4
4
|
"id": "use-drop-shadow-for-transparent-images",
|
|
5
5
|
"title": "Use drop shadow for transparent images",
|
|
6
6
|
"html": [
|
|
7
|
-
"<!-- Drop shadow · follows the shapes -->\n<svg id=\"target\" role=\"img\"\n aria-label=\"Circle and diamond\"\n width=\"160\" height=\"120\" viewBox=\"0 0 160 120\"\n class=\"block m-md\n (filter:drop-shadow(
|
|
8
|
-
"<!-- Box shadow · follows the viewport box -->\n<svg id=\"target\" role=\"img\"\n aria-label=\"Circle and diamond\"\n width=\"160\" height=\"120\" viewBox=\"0 0 160 120\"\n class=\"block m-md (box-shadow:
|
|
7
|
+
"<!-- Drop shadow · follows the shapes -->\n<svg id=\"target\" role=\"img\"\n aria-label=\"Circle and diamond\"\n width=\"160\" height=\"120\" viewBox=\"0 0 160 120\"\n class=\"block m-md\n (filter:drop-shadow(0_4px_2px_#7c3aed))\">\n <circle cx=\"48\" cy=\"60\" r=\"28\" fill=\"#2563eb\" />\n <path d=\"M100 30 140 60 100 90 60 60Z\" fill=\"#7c3aed\" />\n</svg>",
|
|
8
|
+
"<!-- Box shadow · follows the viewport box -->\n<svg id=\"target\" role=\"img\"\n aria-label=\"Circle and diamond\"\n width=\"160\" height=\"120\" viewBox=\"0 0 160 120\"\n class=\"block m-md (box-shadow:0_4px_2px_#7c3aed)\">\n <circle cx=\"48\" cy=\"60\" r=\"28\" fill=\"#2563eb\" />\n <path d=\"M100 30 140 60 100 90 60 60Z\" fill=\"#7c3aed\" />\n</svg>"
|
|
9
9
|
],
|
|
10
10
|
"css": "",
|
|
11
11
|
"classes": [
|
|
12
12
|
"block",
|
|
13
13
|
"m-md",
|
|
14
|
-
"(filter:drop-shadow(
|
|
15
|
-
"(box-shadow:
|
|
14
|
+
"(filter:drop-shadow(0_4px_2px_#7c3aed))",
|
|
15
|
+
"(box-shadow:0_4px_2px_#7c3aed)"
|
|
16
16
|
],
|
|
17
17
|
"classLists": [
|
|
18
|
-
"block m-md (filter:drop-shadow(
|
|
19
|
-
"block m-md (box-shadow:
|
|
18
|
+
"block m-md (filter:drop-shadow(0_4px_2px_#7c3aed))",
|
|
19
|
+
"block m-md (box-shadow:0_4px_2px_#7c3aed)"
|
|
20
20
|
],
|
|
21
21
|
"highlighted": []
|
|
22
22
|
}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"title": "Fill gaps densely",
|
|
6
6
|
"html": [
|
|
7
7
|
"<div id=\"layout\" class=\"grid grid-cols(3) (grid-auto-flow:row) (grid-auto-rows:48px) gap-md (width:17.5rem) max-w-full\">\n <button id=\"target\" class=\"grid-col-span(2) p-sm\" type=\"button\" tabindex=\"0\">01</button>\n <button id=\"peer\" class=\"grid-col-span(2) p-sm\" type=\"button\" tabindex=\"0\">02</button>\n <button id=\"item-3\" class=\"p-sm\" type=\"button\" tabindex=\"0\">03</button>\n <button id=\"item-4\" class=\"p-sm\" type=\"button\" tabindex=\"0\">04</button>\n</div>",
|
|
8
|
-
"<div id=\"layout\" class=\"grid grid-cols(3) (grid-auto-flow:
|
|
8
|
+
"<div id=\"layout\" class=\"grid grid-cols(3) (grid-auto-flow:row_dense) (grid-auto-rows:48px) gap-md (width:17.5rem) max-w-full\">\n <button id=\"target\" class=\"grid-col-span(2) p-sm\" type=\"button\" tabindex=\"0\">01</button>\n <button id=\"peer\" class=\"grid-col-span(2) p-sm\" type=\"button\" tabindex=\"0\">02</button>\n <button id=\"item-3\" class=\"p-sm\" type=\"button\" tabindex=\"0\">03</button>\n <button id=\"item-4\" class=\"p-sm\" type=\"button\" tabindex=\"0\">04</button>\n</div>"
|
|
9
9
|
],
|
|
10
10
|
"css": "",
|
|
11
11
|
"classes": [
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"max-w-full",
|
|
19
19
|
"grid-col-span(2)",
|
|
20
20
|
"p-sm",
|
|
21
|
-
"(grid-auto-flow:
|
|
21
|
+
"(grid-auto-flow:row_dense)"
|
|
22
22
|
],
|
|
23
23
|
"classLists": [
|
|
24
24
|
"grid grid-cols(3) (grid-auto-flow:row) (grid-auto-rows:48px) gap-md (width:17.5rem) max-w-full",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"grid-col-span(2) p-sm",
|
|
27
27
|
"p-sm",
|
|
28
28
|
"p-sm",
|
|
29
|
-
"grid grid-cols(3) (grid-auto-flow:
|
|
29
|
+
"grid grid-cols(3) (grid-auto-flow:row_dense) (grid-auto-rows:48px) gap-md (width:17.5rem) max-w-full",
|
|
30
30
|
"grid-col-span(2) p-sm",
|
|
31
31
|
"grid-col-span(2) p-sm",
|
|
32
32
|
"p-sm",
|
|
@@ -4,27 +4,27 @@
|
|
|
4
4
|
"id": "apply-conditionally",
|
|
5
5
|
"title": "Apply conditionally",
|
|
6
6
|
"html": [
|
|
7
|
-
"<div id=\"layout\" class=\"grid (grid-template-areas:'head'|'nav'|'main') (grid-template-columns:1fr) (grid-template-rows:
|
|
7
|
+
"<div id=\"layout\" class=\"grid (grid-template-areas:'head'|'nav'|'main') (grid-template-columns:1fr) (grid-template-rows:48px_48px_96px) gap-md (width:17.5rem) max-w-full (grid-template-areas:'head\\20head'|'nav\\20main')@sm (grid-template-columns:80px_1fr)@sm (grid-template-rows:48px_96px)@sm\">\n <header id=\"target\" class=\"(grid-area:head) p-sm\">Header</header>\n <aside id=\"peer\" class=\"(grid-area:nav) p-sm\">Nav</aside>\n <section id=\"item-3\" class=\"(grid-area:main) p-sm\">Content</section>\n</div>"
|
|
8
8
|
],
|
|
9
9
|
"css": "",
|
|
10
10
|
"classes": [
|
|
11
11
|
"grid",
|
|
12
12
|
"(grid-template-areas:'head'|'nav'|'main')",
|
|
13
13
|
"(grid-template-columns:1fr)",
|
|
14
|
-
"(grid-template-rows:
|
|
14
|
+
"(grid-template-rows:48px_48px_96px)",
|
|
15
15
|
"gap-md",
|
|
16
16
|
"(width:17.5rem)",
|
|
17
17
|
"max-w-full",
|
|
18
18
|
"(grid-template-areas:'head\\20head'|'nav\\20main')@sm",
|
|
19
|
-
"(grid-template-columns:
|
|
20
|
-
"(grid-template-rows:
|
|
19
|
+
"(grid-template-columns:80px_1fr)@sm",
|
|
20
|
+
"(grid-template-rows:48px_96px)@sm",
|
|
21
21
|
"(grid-area:head)",
|
|
22
22
|
"p-sm",
|
|
23
23
|
"(grid-area:nav)",
|
|
24
24
|
"(grid-area:main)"
|
|
25
25
|
],
|
|
26
26
|
"classLists": [
|
|
27
|
-
"grid (grid-template-areas:'head'|'nav'|'main') (grid-template-columns:1fr) (grid-template-rows:
|
|
27
|
+
"grid (grid-template-areas:'head'|'nav'|'main') (grid-template-columns:1fr) (grid-template-rows:48px_48px_96px) gap-md (width:17.5rem) max-w-full (grid-template-areas:'head\\20head'|'nav\\20main')@sm (grid-template-columns:80px_1fr)@sm (grid-template-rows:48px_96px)@sm",
|
|
28
28
|
"(grid-area:head) p-sm",
|
|
29
29
|
"(grid-area:nav) p-sm",
|
|
30
30
|
"(grid-area:main) p-sm"
|
|
@@ -4,14 +4,14 @@
|
|
|
4
4
|
"id": "use-minmax",
|
|
5
5
|
"title": "Control a track’s minimum",
|
|
6
6
|
"html": [
|
|
7
|
-
"<div id=\"layout\" class=\"grid (grid-auto-rows:64px) (grid-template-columns:
|
|
8
|
-
"<div id=\"layout\" class=\"grid (grid-auto-rows:64px) (grid-template-columns:minmax(0,1fr)
|
|
7
|
+
"<div id=\"layout\" class=\"grid (grid-auto-rows:64px) (grid-template-columns:1fr_2fr) gap-md (width:17.5rem) max-w-full\">\n <div id=\"target\" class=\"overflow-clip p-sm\"><span class=\"block (width:12rem)\">192px content</span></div>\n <div id=\"peer\" class=\"p-sm\">2</div>\n</div>",
|
|
8
|
+
"<div id=\"layout\" class=\"grid (grid-auto-rows:64px) (grid-template-columns:minmax(0,1fr)_2fr) gap-md (width:17.5rem) max-w-full\">\n <div id=\"target\" class=\"overflow-clip p-sm\"><span class=\"block (width:12rem)\">192px content</span></div>\n <div id=\"peer\" class=\"p-sm\">2</div>\n</div>"
|
|
9
9
|
],
|
|
10
10
|
"css": "",
|
|
11
11
|
"classes": [
|
|
12
12
|
"grid",
|
|
13
13
|
"(grid-auto-rows:64px)",
|
|
14
|
-
"(grid-template-columns:
|
|
14
|
+
"(grid-template-columns:1fr_2fr)",
|
|
15
15
|
"gap-md",
|
|
16
16
|
"(width:17.5rem)",
|
|
17
17
|
"max-w-full",
|
|
@@ -19,14 +19,14 @@
|
|
|
19
19
|
"p-sm",
|
|
20
20
|
"block",
|
|
21
21
|
"(width:12rem)",
|
|
22
|
-
"(grid-template-columns:minmax(0,1fr)
|
|
22
|
+
"(grid-template-columns:minmax(0,1fr)_2fr)"
|
|
23
23
|
],
|
|
24
24
|
"classLists": [
|
|
25
|
-
"grid (grid-auto-rows:64px) (grid-template-columns:
|
|
25
|
+
"grid (grid-auto-rows:64px) (grid-template-columns:1fr_2fr) gap-md (width:17.5rem) max-w-full",
|
|
26
26
|
"overflow-clip p-sm",
|
|
27
27
|
"block (width:12rem)",
|
|
28
28
|
"p-sm",
|
|
29
|
-
"grid (grid-auto-rows:64px) (grid-template-columns:minmax(0,1fr)
|
|
29
|
+
"grid (grid-auto-rows:64px) (grid-template-columns:minmax(0,1fr)_2fr) gap-md (width:17.5rem) max-w-full",
|
|
30
30
|
"overflow-clip p-sm",
|
|
31
31
|
"block (width:12rem)",
|
|
32
32
|
"p-sm"
|
|
@@ -4,15 +4,15 @@
|
|
|
4
4
|
"id": "use-explicit-css-values",
|
|
5
5
|
"title": "Keep overflowing content reachable",
|
|
6
6
|
"html": [
|
|
7
|
-
"<div id=\"layout\" class=\"flex overflow-auto (justify-content:
|
|
8
|
-
"<div id=\"layout\" class=\"flex overflow-auto (justify-content:
|
|
9
|
-
"<div id=\"layout\" class=\"flex overflow-auto (justify-content:
|
|
7
|
+
"<div id=\"layout\" class=\"flex overflow-auto (justify-content:safe_center) (width:15rem) max-w-full\" tabindex=\"0\" role=\"region\" aria-label=\"Safe centered overflow\">\n <div id=\"target\" class=\"flex (flex:none) justify-between (height:4rem) (width:17.5rem) p-xs\"><span>Start</span><span>End</span></div>\n</div>",
|
|
8
|
+
"<div id=\"layout\" class=\"flex overflow-auto (justify-content:unsafe_center) (width:15rem) max-w-full\" tabindex=\"0\" role=\"region\" aria-label=\"Unsafe centered overflow\">\n <div id=\"target\" class=\"flex (flex:none) justify-between (height:4rem) (width:17.5rem) p-xs\"><span>Start</span><span>End</span></div>\n</div>",
|
|
9
|
+
"<div id=\"layout\" class=\"flex overflow-auto (justify-content:safe_center) (width:15rem) max-w-full\" tabindex=\"0\" role=\"region\" aria-label=\"Safe centered fitting content\">\n <div id=\"target\" class=\"flex (flex:none) justify-between (height:4rem) (width:12rem) p-xs\"><span>Start</span><span>End</span></div>\n</div>"
|
|
10
10
|
],
|
|
11
11
|
"css": "",
|
|
12
12
|
"classes": [
|
|
13
13
|
"flex",
|
|
14
14
|
"overflow-auto",
|
|
15
|
-
"(justify-content:
|
|
15
|
+
"(justify-content:safe_center)",
|
|
16
16
|
"(width:15rem)",
|
|
17
17
|
"max-w-full",
|
|
18
18
|
"(flex:none)",
|
|
@@ -20,15 +20,15 @@
|
|
|
20
20
|
"(height:4rem)",
|
|
21
21
|
"(width:17.5rem)",
|
|
22
22
|
"p-xs",
|
|
23
|
-
"(justify-content:
|
|
23
|
+
"(justify-content:unsafe_center)",
|
|
24
24
|
"(width:12rem)"
|
|
25
25
|
],
|
|
26
26
|
"classLists": [
|
|
27
|
-
"flex overflow-auto (justify-content:
|
|
27
|
+
"flex overflow-auto (justify-content:safe_center) (width:15rem) max-w-full",
|
|
28
28
|
"flex (flex:none) justify-between (height:4rem) (width:17.5rem) p-xs",
|
|
29
|
-
"flex overflow-auto (justify-content:
|
|
29
|
+
"flex overflow-auto (justify-content:unsafe_center) (width:15rem) max-w-full",
|
|
30
30
|
"flex (flex:none) justify-between (height:4rem) (width:17.5rem) p-xs",
|
|
31
|
-
"flex overflow-auto (justify-content:
|
|
31
|
+
"flex overflow-auto (justify-content:safe_center) (width:15rem) max-w-full",
|
|
32
32
|
"flex (flex:none) justify-between (height:4rem) (width:12rem) p-xs"
|
|
33
33
|
],
|
|
34
34
|
"highlighted": []
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"id": "fade-overflowing-media",
|
|
5
5
|
"title": "Fade overflowing media",
|
|
6
6
|
"html": [
|
|
7
|
-
"<!-- Scrollable list · fixed lower fade -->\n<div class=\"w(240) max-w-full\">\n <div class=\"outline(2):focus-within outline-solid:focus-within outline-blue:focus-within\n outline-offset(3):focus-within\">\n <div id=\"target\" role=\"region\" tabindex=\"0\"\n aria-label=\"Layer list\"\n aria-describedby=\"scroll-help\"\n class=\"overflow-auto h(160) bg-surface-base\n (mask-image:linear-gradient(
|
|
7
|
+
"<!-- Scrollable list · fixed lower fade -->\n<div class=\"w(240) max-w-full\">\n <div class=\"outline(2):focus-within outline-solid:focus-within outline-blue:focus-within\n outline-offset(3):focus-within\">\n <div id=\"target\" role=\"region\" tabindex=\"0\"\n aria-label=\"Layer list\"\n aria-describedby=\"scroll-help\"\n class=\"overflow-auto h(160) bg-surface-base\n (mask-image:linear-gradient(to_bottom,black_60%,transparent))\n (mask-mode:alpha) (outline:none):focus-visible\">\n <ol class=\"m(0) pb-3xl pl-lg pr-sm font-sm fg-text-body\">\n <li id=\"first-layer\" class=\"py-xs\">Outline</li>\n <li class=\"py-xs\">Surface</li>\n <li class=\"py-xs\">Foreground</li>\n <li class=\"py-xs\">Accent</li>\n <li class=\"py-xs\">Annotation</li>\n <li class=\"py-xs\">Selection</li>\n <li class=\"py-xs\">Focus</li>\n <li id=\"last-layer\" class=\"py-xs\">Export</li>\n </ol>\n </div>\n </div>\n <p id=\"scroll-help\" class=\"mb(0) mt-sm font-sm fg-text-body\">\n Eight layers. Scroll or follow the links below.\n </p>\n <nav aria-label=\"Layer navigation\"\n class=\"flex flex-wrap gap-md mt-sm font-sm\">\n <a href=\"#first-layer\">First layer</a>\n <a href=\"#last-layer\">Last layer</a>\n </nav>\n</div>"
|
|
8
8
|
],
|
|
9
9
|
"css": "",
|
|
10
10
|
"classes": [
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"overflow-auto",
|
|
18
18
|
"h(160)",
|
|
19
19
|
"bg-surface-base",
|
|
20
|
-
"(mask-image:linear-gradient(
|
|
20
|
+
"(mask-image:linear-gradient(to_bottom,black_60%,transparent))",
|
|
21
21
|
"(mask-mode:alpha)",
|
|
22
22
|
"(outline:none):focus-visible",
|
|
23
23
|
"m(0)",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"classLists": [
|
|
37
37
|
"w(240) max-w-full",
|
|
38
38
|
"outline(2):focus-within outline-solid:focus-within outline-blue:focus-within outline-offset(3):focus-within",
|
|
39
|
-
"overflow-auto h(160) bg-surface-base (mask-image:linear-gradient(
|
|
39
|
+
"overflow-auto h(160) bg-surface-base (mask-image:linear-gradient(to_bottom,black_60%,transparent)) (mask-mode:alpha) (outline:none):focus-visible",
|
|
40
40
|
"m(0) pb-3xl pl-lg pr-sm font-sm fg-text-body",
|
|
41
41
|
"py-xs",
|
|
42
42
|
"py-xs",
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
"id": "use-precise-positions",
|
|
5
5
|
"title": "Use precise positions",
|
|
6
6
|
"html": [
|
|
7
|
-
"<!-- 50% 25% · 12.5px top crop -->\n<img id=\"target\" src=\"/demo/landscape.svg\"\n width=\"320\" height=\"200\"\n alt=\"Blue and violet mountains beneath a yellow sun\"\n class=\"block h(100) w(240) max-w-full\n bg-surface-base object-cover\n (object-position:50
|
|
8
|
-
"<!-- Left 12px · top 8px -->\n<img id=\"target\" src=\"/demo/landscape.svg\"\n width=\"320\" height=\"200\"\n alt=\"Blue and violet mountains beneath a yellow sun\"\n class=\"block h(100) w(240) max-w-full\n bg-surface-base object-cover\n (object-position:
|
|
7
|
+
"<!-- 50% 25% · 12.5px top crop -->\n<img id=\"target\" src=\"/demo/landscape.svg\"\n width=\"320\" height=\"200\"\n alt=\"Blue and violet mountains beneath a yellow sun\"\n class=\"block h(100) w(240) max-w-full\n bg-surface-base object-cover\n (object-position:50%_25%)\" />",
|
|
8
|
+
"<!-- Left 12px · top 8px -->\n<img id=\"target\" src=\"/demo/landscape.svg\"\n width=\"320\" height=\"200\"\n alt=\"Blue and violet mountains beneath a yellow sun\"\n class=\"block h(100) w(240) max-w-full\n bg-surface-base object-cover\n (object-position:left_12px_top_8px)\" />"
|
|
9
9
|
],
|
|
10
10
|
"css": "",
|
|
11
11
|
"classes": [
|
|
@@ -15,12 +15,12 @@
|
|
|
15
15
|
"max-w-full",
|
|
16
16
|
"bg-surface-base",
|
|
17
17
|
"object-cover",
|
|
18
|
-
"(object-position:50
|
|
19
|
-
"(object-position:
|
|
18
|
+
"(object-position:50%_25%)",
|
|
19
|
+
"(object-position:left_12px_top_8px)"
|
|
20
20
|
],
|
|
21
21
|
"classLists": [
|
|
22
|
-
"block h(100) w(240) max-w-full bg-surface-base object-cover (object-position:50
|
|
23
|
-
"block h(100) w(240) max-w-full bg-surface-base object-cover (object-position:
|
|
22
|
+
"block h(100) w(240) max-w-full bg-surface-base object-cover (object-position:50%_25%)",
|
|
23
|
+
"block h(100) w(240) max-w-full bg-surface-base object-cover (object-position:left_12px_top_8px)"
|
|
24
24
|
],
|
|
25
25
|
"highlighted": []
|
|
26
26
|
}
|
|
@@ -4,13 +4,13 @@
|
|
|
4
4
|
"id": "use-separate-axis-values",
|
|
5
5
|
"title": "Use separate axis values",
|
|
6
6
|
"html": [
|
|
7
|
-
"<div id=\"layout\" class=\"grid (grid-template-columns:
|
|
7
|
+
"<div id=\"layout\" class=\"grid (grid-template-columns:5rem_5rem) (grid-template-rows:3rem_3rem) content-start justify-between gap-md (height:14rem) (width:17.5rem) max-w-full\">\n <div id=\"target\" class=\"p-sm\">01</div>\n <div id=\"peer\" class=\"p-sm\">02</div>\n <div id=\"item-3\" class=\"p-sm\">03</div>\n <div id=\"item-4\" class=\"p-sm\">04</div>\n</div>"
|
|
8
8
|
],
|
|
9
9
|
"css": "",
|
|
10
10
|
"classes": [
|
|
11
11
|
"grid",
|
|
12
|
-
"(grid-template-columns:
|
|
13
|
-
"(grid-template-rows:
|
|
12
|
+
"(grid-template-columns:5rem_5rem)",
|
|
13
|
+
"(grid-template-rows:3rem_3rem)",
|
|
14
14
|
"content-start",
|
|
15
15
|
"justify-between",
|
|
16
16
|
"gap-md",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"p-sm"
|
|
21
21
|
],
|
|
22
22
|
"classLists": [
|
|
23
|
-
"grid (grid-template-columns:
|
|
23
|
+
"grid (grid-template-columns:5rem_5rem) (grid-template-rows:3rem_3rem) content-start justify-between gap-md (height:14rem) (width:17.5rem) max-w-full",
|
|
24
24
|
"p-sm",
|
|
25
25
|
"p-sm",
|
|
26
26
|
"p-sm",
|
|
@@ -4,14 +4,14 @@
|
|
|
4
4
|
"id": "use-sparingly",
|
|
5
5
|
"title": "Use sparingly",
|
|
6
6
|
"html": [
|
|
7
|
-
"<div id=\"scrollport\" class=\"flex overflow-x-auto gap-md (scroll-snap-type:
|
|
7
|
+
"<div id=\"scrollport\" class=\"flex overflow-x-auto gap-md (scroll-snap-type:x_mandatory)\"\n tabindex=\"0\" aria-label=\"Horizontal panels\">\n <article id=\"panel-1\" class=\"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)\">Panel 1</article>\n <article id=\"panel-2\" class=\"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:always) (scroll-snap-align:start)\">Panel 2</article>\n <article id=\"panel-3\" class=\"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)\">Panel 3</article>\n <article id=\"panel-4\" class=\"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)\">Panel 4</article>\n <article id=\"panel-5\" class=\"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)\">Panel 5</article>\n <article id=\"panel-6\" class=\"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)\">Panel 6</article>\n</div>"
|
|
8
8
|
],
|
|
9
9
|
"css": "",
|
|
10
10
|
"classes": [
|
|
11
11
|
"flex",
|
|
12
12
|
"overflow-x-auto",
|
|
13
13
|
"gap-md",
|
|
14
|
-
"(scroll-snap-type:
|
|
14
|
+
"(scroll-snap-type:x_mandatory)",
|
|
15
15
|
"shrink(0)",
|
|
16
16
|
"(height:9rem)",
|
|
17
17
|
"(width:12rem)",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"(scroll-snap-stop:always)"
|
|
21
21
|
],
|
|
22
22
|
"classLists": [
|
|
23
|
-
"flex overflow-x-auto gap-md (scroll-snap-type:
|
|
23
|
+
"flex overflow-x-auto gap-md (scroll-snap-type:x_mandatory)",
|
|
24
24
|
"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)",
|
|
25
25
|
"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:always) (scroll-snap-align:start)",
|
|
26
26
|
"shrink(0) (height:9rem) (width:12rem) (scroll-snap-stop:normal) (scroll-snap-align:start)",
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
"id": "increase-margin-for-large-media",
|
|
5
5
|
"title": "Reserve room for a larger shape margin",
|
|
6
6
|
"html": [
|
|
7
|
-
"<!-- Margin md · 16px around the circle -->\n<article class=\"flow-root w(280) max-w-full font-sm\n (line-height:24px) fg-text-body\">\n <svg id=\"target\" role=\"img\" aria-label=\"Blue circle\"\n width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"\n class=\"(float:left) mb-xl mr-xl\n outline(1) outline-solid outline-line-subtle fill-blue-60\n shape-margin-md\n (shape-outside:circle(40px)
|
|
8
|
-
"<!-- Margin xl · 32px around the circle -->\n<article class=\"flow-root w(280) max-w-full font-sm\n (line-height:24px) fg-text-body\">\n <svg id=\"target\" role=\"img\" aria-label=\"Blue circle\"\n width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"\n class=\"(float:left) mb-xl mr-xl\n outline(1) outline-solid outline-line-subtle fill-blue-60\n shape-margin-xl\n (shape-outside:circle(40px)
|
|
7
|
+
"<!-- Margin md · 16px around the circle -->\n<article class=\"flow-root w(280) max-w-full font-sm\n (line-height:24px) fg-text-body\">\n <svg id=\"target\" role=\"img\" aria-label=\"Blue circle\"\n width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"\n class=\"(float:left) mb-xl mr-xl\n outline(1) outline-solid outline-line-subtle fill-blue-60\n shape-margin-md\n (shape-outside:circle(40px)_border-box)\">\n <circle cx=\"60\" cy=\"60\" r=\"40\" />\n </svg>\n <p class=\"m(0)\">\n A clear layout leaves room for both artwork and words.\n Follow the first lines as they pass the blue shape.\n Their starting positions change with the available space.\n Below the float, the paragraph returns to its full width.\n The artwork keeps the same size throughout the comparison.\n </p>\n</article>",
|
|
8
|
+
"<!-- Margin xl · 32px around the circle -->\n<article class=\"flow-root w(280) max-w-full font-sm\n (line-height:24px) fg-text-body\">\n <svg id=\"target\" role=\"img\" aria-label=\"Blue circle\"\n width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"\n class=\"(float:left) mb-xl mr-xl\n outline(1) outline-solid outline-line-subtle fill-blue-60\n shape-margin-xl\n (shape-outside:circle(40px)_border-box)\">\n <circle cx=\"60\" cy=\"60\" r=\"40\" />\n </svg>\n <p class=\"m(0)\">\n A clear layout leaves room for both artwork and words.\n Follow the first lines as they pass the blue shape.\n Their starting positions change with the available space.\n Below the float, the paragraph returns to its full width.\n The artwork keeps the same size throughout the comparison.\n </p>\n</article>"
|
|
9
9
|
],
|
|
10
10
|
"css": "",
|
|
11
11
|
"classes": [
|
|
@@ -23,16 +23,16 @@
|
|
|
23
23
|
"outline-line-subtle",
|
|
24
24
|
"fill-blue-60",
|
|
25
25
|
"shape-margin-md",
|
|
26
|
-
"(shape-outside:circle(40px)
|
|
26
|
+
"(shape-outside:circle(40px)_border-box)",
|
|
27
27
|
"m(0)",
|
|
28
28
|
"shape-margin-xl"
|
|
29
29
|
],
|
|
30
30
|
"classLists": [
|
|
31
31
|
"flow-root w(280) max-w-full font-sm (line-height:24px) fg-text-body",
|
|
32
|
-
"(float:left) mb-xl mr-xl outline(1) outline-solid outline-line-subtle fill-blue-60 shape-margin-md (shape-outside:circle(40px)
|
|
32
|
+
"(float:left) mb-xl mr-xl outline(1) outline-solid outline-line-subtle fill-blue-60 shape-margin-md (shape-outside:circle(40px)_border-box)",
|
|
33
33
|
"m(0)",
|
|
34
34
|
"flow-root w(280) max-w-full font-sm (line-height:24px) fg-text-body",
|
|
35
|
-
"(float:left) mb-xl mr-xl outline(1) outline-solid outline-line-subtle fill-blue-60 shape-margin-xl (shape-outside:circle(40px)
|
|
35
|
+
"(float:left) mb-xl mr-xl outline(1) outline-solid outline-line-subtle fill-blue-60 shape-margin-xl (shape-outside:circle(40px)_border-box)",
|
|
36
36
|
"m(0)"
|
|
37
37
|
],
|
|
38
38
|
"highlighted": []
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"title": "Wrap text around a circle",
|
|
6
6
|
"html": [
|
|
7
7
|
"<!-- Normal float · rectangular wrap -->\n<article class=\"flow-root w(280) max-w-full font-sm\n (line-height:24px) fg-text-body\">\n <svg id=\"target\" role=\"img\" aria-label=\"Blue circle\"\n width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"\n class=\"(float:left) outline(1) outline-solid outline-line-subtle\n fill-blue-60 (shape-outside:none)\">\n <circle cx=\"60\" cy=\"60\" r=\"48\" />\n </svg>\n <p class=\"m(0)\">\n A clear layout leaves room for both artwork and words.\n Follow the first lines as they pass the blue shape.\n Their starting positions change with the available space.\n Below the float, the paragraph returns to its full width.\n The artwork keeps the same size throughout the comparison.\n </p>\n</article>",
|
|
8
|
-
"<!-- Circle · text follows the curved boundary -->\n<article class=\"flow-root w(280) max-w-full font-sm\n (line-height:24px) fg-text-body\">\n <svg id=\"target\" role=\"img\" aria-label=\"Blue circle\"\n width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"\n class=\"(float:left) outline(1) outline-solid outline-line-subtle\n fill-blue-60\n (shape-outside:circle(48px)
|
|
8
|
+
"<!-- Circle · text follows the curved boundary -->\n<article class=\"flow-root w(280) max-w-full font-sm\n (line-height:24px) fg-text-body\">\n <svg id=\"target\" role=\"img\" aria-label=\"Blue circle\"\n width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"\n class=\"(float:left) outline(1) outline-solid outline-line-subtle\n fill-blue-60\n (shape-outside:circle(48px)_border-box)\">\n <circle cx=\"60\" cy=\"60\" r=\"48\" />\n </svg>\n <p class=\"m(0)\">\n A clear layout leaves room for both artwork and words.\n Follow the first lines as they pass the blue shape.\n Their starting positions change with the available space.\n Below the float, the paragraph returns to its full width.\n The artwork keeps the same size throughout the comparison.\n </p>\n</article>"
|
|
9
9
|
],
|
|
10
10
|
"css": "",
|
|
11
11
|
"classes": [
|
|
@@ -22,14 +22,14 @@
|
|
|
22
22
|
"fill-blue-60",
|
|
23
23
|
"(shape-outside:none)",
|
|
24
24
|
"m(0)",
|
|
25
|
-
"(shape-outside:circle(48px)
|
|
25
|
+
"(shape-outside:circle(48px)_border-box)"
|
|
26
26
|
],
|
|
27
27
|
"classLists": [
|
|
28
28
|
"flow-root w(280) max-w-full font-sm (line-height:24px) fg-text-body",
|
|
29
29
|
"(float:left) outline(1) outline-solid outline-line-subtle fill-blue-60 (shape-outside:none)",
|
|
30
30
|
"m(0)",
|
|
31
31
|
"flow-root w(280) max-w-full font-sm (line-height:24px) fg-text-body",
|
|
32
|
-
"(float:left) outline(1) outline-solid outline-line-subtle fill-blue-60 (shape-outside:circle(48px)
|
|
32
|
+
"(float:left) outline(1) outline-solid outline-line-subtle fill-blue-60 (shape-outside:circle(48px)_border-box)",
|
|
33
33
|
"m(0)"
|
|
34
34
|
],
|
|
35
35
|
"highlighted": []
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"title": "Set the pivot point",
|
|
6
6
|
"html": [
|
|
7
7
|
"<!-- Center · four edges move inward -->\n<div class=\"p-lg\">\n <div class=\"relative h(96) w(160) outline(1) outline-dashed outline-line-subtle\">\n <div id=\"target\"\n class=\"grid items-start (justify-items:center) h(96) w(160) p-sm\n b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10\n fg-blue-80 (transform:scale(.75))\n (transform-origin:center)\">\n Center pivot\n </div>\n <span aria-hidden=\"true\"\n class=\"absolute left(77) top(45) w(6) h(6) (border-radius:100%)\n bg-violet-60 pointer-none\"></span>\n </div>\n</div>",
|
|
8
|
-
"<!-- Top left · two edges stay fixed -->\n<div class=\"p-lg\">\n <div class=\"relative h(96) w(160) outline(1) outline-dashed outline-line-subtle\">\n <div id=\"target\"\n class=\"grid items-start (justify-items:center) h(96) w(160) p-sm\n b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10\n fg-blue-80 (transform:scale(.75))\n (transform-origin:
|
|
8
|
+
"<!-- Top left · two edges stay fixed -->\n<div class=\"p-lg\">\n <div class=\"relative h(96) w(160) outline(1) outline-dashed outline-line-subtle\">\n <div id=\"target\"\n class=\"grid items-start (justify-items:center) h(96) w(160) p-sm\n b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10\n fg-blue-80 (transform:scale(.75))\n (transform-origin:top_left)\">\n Corner pivot\n </div>\n <span aria-hidden=\"true\"\n class=\"absolute left(-3) top(-3) w(6) h(6) (border-radius:100%)\n bg-violet-60 pointer-none\"></span>\n </div>\n</div>"
|
|
9
9
|
],
|
|
10
10
|
"css": "",
|
|
11
11
|
"classes": [
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"(border-radius:100%)",
|
|
38
38
|
"bg-violet-60",
|
|
39
39
|
"pointer-none",
|
|
40
|
-
"(transform-origin:
|
|
40
|
+
"(transform-origin:top_left)",
|
|
41
41
|
"left(-3)",
|
|
42
42
|
"top(-3)"
|
|
43
43
|
],
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"absolute left(77) top(45) w(6) h(6) (border-radius:100%) bg-violet-60 pointer-none",
|
|
49
49
|
"p-lg",
|
|
50
50
|
"relative h(96) w(160) outline(1) outline-dashed outline-line-subtle",
|
|
51
|
-
"grid items-start (justify-items:center) h(96) w(160) p-sm b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10 fg-blue-80 (transform:scale(.75)) (transform-origin:
|
|
51
|
+
"grid items-start (justify-items:center) h(96) w(160) p-sm b(1) b-solid b-blue-60 r-sm font-sm bg-blue-10 fg-blue-80 (transform:scale(.75)) (transform-origin:top_left)",
|
|
52
52
|
"absolute left(-3) top(-3) w(6) h(6) (border-radius:100%) bg-violet-60 pointer-none"
|
|
53
53
|
],
|
|
54
54
|
"highlighted": []
|
|
@@ -5,7 +5,7 @@ export const hreflangOfLocale = { en: 'en', tw: 'zh-TW', ja: 'ja', ko: 'ko', cn:
|
|
|
5
5
|
export const nameOfLocale = { en: 'English', tw: '繁體中文（台灣）', ja: '日本語', ko: '한국어', cn: '简体中文' }
|
|
6
6
|
/** Only first-party page links inherit the reader's language across sites. */
|
|
7
7
|
export const localizableOrigins = {
|
|
8
|
-
'https://master.co': ['blog', 'brand'
|
|
8
|
+
'https://master.co': ['blog', 'brand'],
|
|
9
9
|
'https://css.master.co': ['guide', 'reference', 'benchmarks', 'roadmap'],
|
|
10
10
|
'https://rc.css.master.co': ['guide', 'reference', 'benchmarks', 'roadmap']
|
|
11
11
|
}
|
|
@@ -22,7 +22,7 @@ const label = name ? t('Copy {name}').replace('{name}', t(name)) : t('Copy code'
|
|
|
22
22
|
|
|
23
23
|
<span class:list={['ui-copy', className]}>
|
|
24
24
|
<span class="ui-copy-status" role="status"></span>
|
|
25
|
-
<button type="button" class="
|
|
25
|
+
<button type="button" class="btn btn-sm btn-quiet btn-square" data-variant="quiet" data-shape="icon" data-size="sm" aria-label={label} title={label} data-code-copy={name ?? ''} data-code-copy-text={text}>
|
|
26
26
|
<IconCopy size={16} stroke={1.5} aria-hidden="true" />
|
|
27
27
|
<IconCheck size={16} stroke={1.6} aria-hidden="true" class="ui-result-icon" />
|
|
28
28
|
</button>
|