mosaic-headless 1.17.2 → 1.18.0
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.ja.md +17 -10
- package/README.ko.md +17 -10
- package/README.md +16 -9
- package/README.zh-TW.md +15 -9
- package/SKILL.md +96 -40
- package/assets/templates/platforms/claude-ai.json +1 -1
- package/assets/templates/platforms/claude-code.json +1 -1
- package/assets/templates/platforms/codex-cli.json +1 -1
- package/assets/templates/platforms/copilot.json +1 -1
- package/assets/templates/platforms/gemini-cli.json +1 -1
- package/bin/check-release.mjs +1 -1
- package/data/accordion-verification.csv +1 -1
- package/data/browser-verification.csv +906 -906
- package/data/conversion-verification.csv +1 -1
- package/data/db-columns.csv +40 -36
- package/data/design-audit-acknowledged.csv +1 -0
- package/data/design-audit.csv +1 -1
- package/data/intro-verification.csv +7 -7
- package/data/loop-verification.csv +5 -5
- package/data/node-properties.csv +4 -3
- package/data/node-property-verification.csv +81 -80
- package/data/node-type-notes.csv +1 -1
- package/data/node-types.csv +9 -9
- package/data/node-verification.csv +100 -100
- package/data/rest-routes.csv +1 -1
- package/data/style-properties.csv +1 -1
- package/data/style-state-verification.csv +48 -48
- package/data/style-states.csv +32 -32
- package/data/style-verification.csv +1 -1
- package/data/theme-zip-verification.csv +10 -10
- package/data/variants.csv +153 -0
- package/evals/accordion-is-not-broken/graders/criteria.md +1 -1
- package/evals/grid-child-placement/graders/criteria.md +3 -3
- package/package.json +1 -1
- package/references/data-model.md +7 -6
- package/references/design-system.md +28 -16
- package/references/interactions.md +1 -1
- package/references/responsive.md +6 -6
- package/references/styling.md +23 -14
- package/references/upgrading.md +182 -0
- package/references/vs-elementor-gutenberg.md +1 -1
- package/references/write-protocol.md +1 -1
- package/sites/_moksa.py +67 -62
- package/sites/moksa.json +219 -219
- package/tools/bootstrap_probe_theme.php +1 -1
- package/tools/build_page.py +17 -11
- package/tools/build_site.py +1 -1
- package/tools/capture_live.py +42 -6
- package/tools/data_upgrade.py +74 -0
- package/tools/extract_node_types.py +1 -1
- package/tools/from_elementor.py +3 -3
- package/tools/mo.py +10 -9
- package/tools/probe.py +1 -1
- package/tools/sweep_components.py +1 -1
- package/tools/sweep_interactions.py +3 -3
- package/tools/sweep_node_properties.py +1 -1
- package/tools/sweep_node_types.py +20 -0
- package/tools/sweep_style_properties.py +6 -7
- package/tools/sweep_style_states.py +2 -2
- package/tools/theme_export.php +2 -2
- package/tools/theme_zip_compare.php +2 -2
- package/tools/verify_browser.py +6 -5
- package/tools/verify_rwd.py +17 -15
- package/data/element-classes.csv +0 -152
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
id,name,class_name,renders_class,type,selectors,parent,is_group,is_editable,is_required,ordering
|
|
2
|
+
6a5c0d91-8f1f-047b-a147-152bd61bcfc7,Master,m-master,False,,html,,False,False,False,a0
|
|
3
|
+
cd4e6dc8-7e4c-0eac-8366-d86f54cab5ba,External style,m-external-style,False,,html,,False,False,False,a1
|
|
4
|
+
5c221b34-26ab-0ccc-be0e-fd89986c79af,Context,m-context,False,,html,,False,False,False,a2
|
|
5
|
+
4617493c-a85a-0239-8edd-1080ad2108b2,Unknown element,m-unknown-element,False,tag,,,False,True,False,a3
|
|
6
|
+
f3736dce-3f24-0c49-a6eb-cbafbe435696,HTML,m-html,False,,html,,False,True,True,a4
|
|
7
|
+
b846789e-f2e7-02d2-87cf-2f2cd3a69e7c,Body,m-body,False,,body,,False,True,True,a5
|
|
8
|
+
b4c8c69a-566a-07cb-8bd8-f141c8d12105,A,m-a,False,,"a:where(:not(.m-button,.m-link,.m-menu-link,.m-badge))",,False,True,True,a6
|
|
9
|
+
68d3854a-9f6a-033b-9405-4e169331f611,Text,m-text,True,,.m-text,,True,True,False,a7
|
|
10
|
+
95e31da0-1f58-0b03-a598-214f6244fc46,Paragraph,m-paragraph,True,,p|.m-paragraph,68d3854a-9f6a-033b-9405-4e169331f611,False,True,True,a8
|
|
11
|
+
659be41c-cf10-0ed5-ac59-ad19fbb750fc,Heading 1,m-heading-1,True,,h1|.m-heading-1,68d3854a-9f6a-033b-9405-4e169331f611,False,True,True,a9
|
|
12
|
+
d1642e3d-12cc-0379-ac2a-33f5292aa0dd,Heading 2,m-heading-2,True,,h2|.m-heading-2,68d3854a-9f6a-033b-9405-4e169331f611,False,True,True,aA
|
|
13
|
+
f4215e61-521c-021e-a292-c5d98d785b4e,Heading 3,m-heading-3,True,,h3|.m-heading-3,68d3854a-9f6a-033b-9405-4e169331f611,False,True,True,aB
|
|
14
|
+
81e96cdb-960b-0efa-a1fd-ff819900be5d,Heading 4,m-heading-4,True,,h4|.m-heading-4,68d3854a-9f6a-033b-9405-4e169331f611,False,True,True,aC
|
|
15
|
+
ed6da0b6-c772-03db-911a-0d1ae081351e,Heading 5,m-heading-5,True,,h5|.m-heading-5,68d3854a-9f6a-033b-9405-4e169331f611,False,True,True,aD
|
|
16
|
+
63b3d467-1cee-076b-a08a-2d35c1411df7,Heading 6,m-heading-6,True,,h6|.m-heading-6,68d3854a-9f6a-033b-9405-4e169331f611,False,True,True,aE
|
|
17
|
+
6381b2f3-7a23-05db-87b9-c808a98a292b,Inherited text,m-inherited-text,True,,.m-inherited-text,68d3854a-9f6a-033b-9405-4e169331f611,False,True,False,aF
|
|
18
|
+
f671bc01-2859-06da-a49e-58d6f1d6a055,Link,m-link,True,,.m-link,,False,True,False,aG
|
|
19
|
+
bb9e3876-120f-0c2f-a1ec-5f23e9843911,Button,m-button,True,,.m-button,,False,True,False,aH
|
|
20
|
+
1d964ef1-1b07-0edc-841e-42a96286a032,Badge,m-badge,True,,.m-badge,,False,True,False,aI
|
|
21
|
+
9ece09dc-d417-0dd9-b8d7-aeabad8a0f1b,Menu,m-menu,True,,.m-menu,,True,True,False,aJ
|
|
22
|
+
7c972b2e-bccd-06e6-9b91-39e3435e841b,Menu link,m-menu-link,True,,.m-menu-link,9ece09dc-d417-0dd9-b8d7-aeabad8a0f1b,False,True,False,aK
|
|
23
|
+
385cba11-b864-0e81-ad84-bc5e6e82d8ed,WP menu,m-wp-menu,True,,.m-wp-menu,9ece09dc-d417-0dd9-b8d7-aeabad8a0f1b,True,True,False,aL
|
|
24
|
+
ad2337c7-0dd3-0113-808c-559834a4eb55,Menu item,m-wp-menu-item,True,,.m-wp-menu-item,385cba11-b864-0e81-ad84-bc5e6e82d8ed,False,True,False,aM
|
|
25
|
+
8a83d2ce-a34b-0075-9471-532b7e19bd17,Dropdown,m-dropdown-narrow,True,,.m-dropdown-narrow,9ece09dc-d417-0dd9-b8d7-aeabad8a0f1b,True,True,False,aN
|
|
26
|
+
b18434de-cc91-0aac-8919-78aa00580530,Toggle,m-dropdown-toggle,True,,.m-dropdown-toggle,8a83d2ce-a34b-0075-9471-532b7e19bd17,False,True,False,aO
|
|
27
|
+
50b228f1-ce49-064c-9d69-be7e58fbd85f,Wrapper,m-dropdown-wrapper-narrow,True,,.m-dropdown-wrapper-narrow,8a83d2ce-a34b-0075-9471-532b7e19bd17,False,True,False,aP
|
|
28
|
+
7ef9c2b8-1695-08aa-bd4f-af6116fe1398,Dropdown wide,m-dropdown-wide,True,,.m-dropdown-wide,8a83d2ce-a34b-0075-9471-532b7e19bd17,False,True,False,aQ
|
|
29
|
+
4a2824e2-9212-082b-a452-ccd1a481d77f,Wrapper,m-dropdown-wrapper-wide,True,,.m-dropdown-wrapper-wide,7ef9c2b8-1695-08aa-bd4f-af6116fe1398,False,True,False,aR
|
|
30
|
+
baece9ef-aac1-02ce-8157-0e3024d3ca70,Navbar,m-navbar,True,,.m-navbar,,True,True,False,aS
|
|
31
|
+
9ef1a7af-050d-0ad9-a167-7960d648fc8e,Menu button,m-navbar-toggle,True,,.m-navbar-toggle,baece9ef-aac1-02ce-8157-0e3024d3ca70,False,True,False,aT
|
|
32
|
+
0622750f-24f9-0485-aa18-b7d1880c3635,Navigation,m-navbar-navigation,True,,.m-navbar-navigation,baece9ef-aac1-02ce-8157-0e3024d3ca70,False,True,False,aU
|
|
33
|
+
10353f9b-22f0-0cc5-89df-2fd8fc663f1f,Mobile menu,m-mobile-menu,True,,.m-mobile-menu,baece9ef-aac1-02ce-8157-0e3024d3ca70,True,True,False,aV
|
|
34
|
+
d86b3995-5459-0504-9e54-62ce10e30874,Toggle,m-mobile-menu-toggle,True,,.m-mobile-menu-toggle,10353f9b-22f0-0cc5-89df-2fd8fc663f1f,False,True,False,aW
|
|
35
|
+
09b9acdb-f909-0a03-8bca-630bbdf4f927,Wrapper,m-mobile-menu-wrapper,True,,.m-mobile-menu-wrapper,10353f9b-22f0-0cc5-89df-2fd8fc663f1f,False,True,False,aX
|
|
36
|
+
bfec97fe-19d6-06a4-b0a0-60cbc5797d4d,Content,m-mobile-menu-content,True,,.m-mobile-menu-content,10353f9b-22f0-0cc5-89df-2fd8fc663f1f,False,True,False,aY
|
|
37
|
+
f2114217-3daa-00e5-b670-f226fc1d00c1,Tabs,m-tabs,True,,.m-tabs,,True,True,False,aZ
|
|
38
|
+
4a634363-2dc9-0e5d-b390-c2c191abacb8,Menu,m-tabs-menu,True,,.m-tabs-menu,f2114217-3daa-00e5-b670-f226fc1d00c1,False,True,False,aa
|
|
39
|
+
0f605bba-1355-0878-b357-20fa918eff01,Loop tabs,m-loop-tabs,True,,.m-loop-tabs,f2114217-3daa-00e5-b670-f226fc1d00c1,False,True,False,ab
|
|
40
|
+
1b5f8030-533d-0ce4-a14d-78e4a671da11,Tab,m-tab,True,,.m-tab,f2114217-3daa-00e5-b670-f226fc1d00c1,False,True,False,ac
|
|
41
|
+
522f42dc-c268-00ca-83f9-1e428eedcee9,Content,m-tabs-content,True,,.m-tabs-content,f2114217-3daa-00e5-b670-f226fc1d00c1,False,True,False,ad
|
|
42
|
+
9cf2dae1-7add-0eb1-85c5-cac58d8ce1bc,Tab pane,m-tab-pane,True,,.m-tab-pane,f2114217-3daa-00e5-b670-f226fc1d00c1,False,True,False,ae
|
|
43
|
+
c00b2bc8-fb71-096a-8f90-32ac9bcc488d,Loop tab panes,m-loop-tab-panes,True,,.m-loop-tab-panes,f2114217-3daa-00e5-b670-f226fc1d00c1,False,True,False,af
|
|
44
|
+
675b2714-ea8f-0e88-aec8-38aa7394a958,Accordion,m-accordion,True,,dl:where(.m-accordion)|:where(.m-accordion) > dl,,False,True,False,ag
|
|
45
|
+
5512dc41-4d87-06d1-8d97-8535063f136a,Loop items,m-accordion-loop-items,True,,.m-accordion-loop-items,675b2714-ea8f-0e88-aec8-38aa7394a958,False,True,False,ah
|
|
46
|
+
e0e364a6-091f-0979-b87e-1b5fe55c9906,Item,m-accordion-item,True,,.m-accordion-item,675b2714-ea8f-0e88-aec8-38aa7394a958,False,True,False,ai
|
|
47
|
+
7e687a6c-7659-0220-968c-82eb8ad593bc,Title,m-accordion-title,True,,.m-accordion-title,675b2714-ea8f-0e88-aec8-38aa7394a958,False,True,False,aj
|
|
48
|
+
d276b3d7-867d-027e-b990-baadcd4c42f0,Content,m-accordion-content-inner,False,,.m-accordion-content-inner:where(.m-accordion-content > .m-accordion-content-inner),675b2714-ea8f-0e88-aec8-38aa7394a958,False,True,False,ak
|
|
49
|
+
98f4a220-2b3b-0bf6-9b07-653abba87e32,Section,m-section,True,,.m-section,,False,True,False,al
|
|
50
|
+
7090e1d3-06e6-08d5-8fcc-149cb93cb6f1,Div,m-div,True,,.m-div,,True,True,False,am
|
|
51
|
+
dca6c43a-32df-0dd1-8fa5-205125325cef,Grid,m-grid,True,,.m-grid,7090e1d3-06e6-08d5-8fcc-149cb93cb6f1,False,True,False,an
|
|
52
|
+
4dedb815-bf1f-0f3b-9d96-ed6e66fdedb2,Rows,m-rows,True,,.m-rows,7090e1d3-06e6-08d5-8fcc-149cb93cb6f1,False,True,False,ao
|
|
53
|
+
e12a4a18-fdbe-051d-80db-d9b81d11b386,Columns,m-columns,True,,.m-columns,7090e1d3-06e6-08d5-8fcc-149cb93cb6f1,False,True,False,ap
|
|
54
|
+
47226be6-d28d-4a56-af71-ca540f55a7ca,Container,m-container,True,,.m-container,7090e1d3-06e6-08d5-8fcc-149cb93cb6f1,False,True,False,aq
|
|
55
|
+
c0ae309a-d4cd-0d0d-8a9c-5a5ff24d7acb,Image,m-image,True,,.m-image,,False,True,False,ar
|
|
56
|
+
7fe0ee8e-7ab5-0db3-928e-d91d06db2661,Code,m-code,True,,.m-code,,False,True,False,as
|
|
57
|
+
ba5adb79-0b53-04d7-9acb-5a3219841114,Form wrapper,m-form-wrapper,True,,.m-form-wrapper,,True,True,False,at
|
|
58
|
+
20add32e-6c96-051f-a508-323c5a6da3d9,Success screen,m-success-screen,True,,.m-success-screen,ba5adb79-0b53-04d7-9acb-5a3219841114,False,True,False,au
|
|
59
|
+
d03f32fa-b3c4-00c5-9886-43a839150da5,Error message,m-form-error,True,,.m-form-error,ba5adb79-0b53-04d7-9acb-5a3219841114,False,True,False,av
|
|
60
|
+
b8e4f2a1-6c3d-04e7-9a52-1f8b3c6d9e04,Turnstile,m-turnstile,True,,.m-turnstile,ba5adb79-0b53-04d7-9acb-5a3219841114,False,True,False,aw
|
|
61
|
+
11dbbc9a-3d88-09bd-9f1c-e2a3609492a9,reCAPTCHA,m-recaptcha,True,,.m-recaptcha,ba5adb79-0b53-04d7-9acb-5a3219841114,False,True,False,ax
|
|
62
|
+
5c12674c-a997-0ce8-9e6e-f84fa2f03e63,Form,m-form,True,,.m-form,ba5adb79-0b53-04d7-9acb-5a3219841114,False,True,False,ay
|
|
63
|
+
2ca59c0b-d68e-0b85-8c36-3ba993c46a00,Field,m-field,True,,.m-field,ba5adb79-0b53-04d7-9acb-5a3219841114,False,True,False,az
|
|
64
|
+
0aba491f-bf49-0ce1-ae11-a5b8b78ec4cd,Choice field,m-choice-field,True,,.m-choice-field,ba5adb79-0b53-04d7-9acb-5a3219841114,True,True,False,b00
|
|
65
|
+
2af6a181-9af4-0ad4-96cd-b3ae22097f78,Legend,m-choice-legend,True,,.m-choice-legend,0aba491f-bf49-0ce1-ae11-a5b8b78ec4cd,False,True,False,b01
|
|
66
|
+
e67d2ba0-cae8-0a19-86ca-3013c1f3533b,Content,m-choice-content,True,,.m-choice-content,0aba491f-bf49-0ce1-ae11-a5b8b78ec4cd,False,True,False,b02
|
|
67
|
+
f49823ca-a455-0356-9235-0bd9780d3ccf,Choice,m-choice,True,,.m-choice,0aba491f-bf49-0ce1-ae11-a5b8b78ec4cd,False,True,False,b03
|
|
68
|
+
c845d80f-61e1-067e-be83-99b787b334e6,Choice label,m-choice-label,True,,.m-choice-label,0aba491f-bf49-0ce1-ae11-a5b8b78ec4cd,False,True,False,b04
|
|
69
|
+
d7aeb839-578f-0ab5-af09-e62f43acffa2,Field set,m-fieldset,True,,.m-fieldset,ba5adb79-0b53-04d7-9acb-5a3219841114,True,True,False,b05
|
|
70
|
+
041c172a-a74b-0ad9-a5c7-2d5c17578f29,Legend,m-fieldset-legend,True,,.m-fieldset-legend,d7aeb839-578f-0ab5-af09-e62f43acffa2,False,True,False,b06
|
|
71
|
+
7a7df079-d694-0a6f-a266-d78c03cdd6fe,Content,m-fieldset-content,True,,.m-fieldset-content,d7aeb839-578f-0ab5-af09-e62f43acffa2,False,True,False,b07
|
|
72
|
+
6867f71f-899b-0b31-9c03-f77073736193,Checkbox input,m-checkbox,True,,.m-checkbox,2af6a181-9af4-0ad4-96cd-b3ae22097f78,False,True,False,b08
|
|
73
|
+
82d072da-c32f-01c6-b00e-b5b55d3519cc,File upload,m-file-upload,True,,.m-file-upload,ba5adb79-0b53-04d7-9acb-5a3219841114,False,True,False,b09
|
|
74
|
+
21e86ec1-e113-40b6-81fd-4bc7e720d199,Hidden input,m-hidden-input,True,,.m-hidden-input,ba5adb79-0b53-04d7-9acb-5a3219841114,False,True,False,b0A
|
|
75
|
+
b2032c7e-adf1-09cd-ac3b-52daab13d3ab,Input,m-input,True,,.m-input,ba5adb79-0b53-04d7-9acb-5a3219841114,False,True,False,b0B
|
|
76
|
+
ed5a3838-6b8c-0018-a497-57bb81a05511,Label,m-label,True,,.m-label,ba5adb79-0b53-04d7-9acb-5a3219841114,False,True,False,b0C
|
|
77
|
+
3ed458ca-ce0f-01f7-b7fe-427895279f54,Multi steps,m-multi-steps,True,,.m-multi-steps,ba5adb79-0b53-04d7-9acb-5a3219841114,True,True,False,b0D
|
|
78
|
+
154e9d33-a838-0bc4-aed6-ddd24c111ed0,Steps,m-multi-steps-nav,True,,.m-multi-steps-nav,3ed458ca-ce0f-01f7-b7fe-427895279f54,False,True,False,b0E
|
|
79
|
+
6800fb72-331f-0926-9333-137cb0ac34da,Step,m-multi-steps-step-tab,True,,.m-multi-steps-step-tab,3ed458ca-ce0f-01f7-b7fe-427895279f54,False,True,False,b0F
|
|
80
|
+
3295e0ec-4633-06d1-b60e-4baaddde1ae2,Forms,m-multi-steps-content,True,,.m-multi-steps-content,3ed458ca-ce0f-01f7-b7fe-427895279f54,False,True,False,b0G
|
|
81
|
+
9adf1aa8-afb6-0afb-87c2-0e1fe047a741,Form step,m-form-step,True,,.m-form-step,3ed458ca-ce0f-01f7-b7fe-427895279f54,False,True,False,b0H
|
|
82
|
+
4e48111e-cd4b-0552-9001-20952f140103,Button,m-form-step-button,True,,.m-form-step-button-back|.m-form-step-button-next,3ed458ca-ce0f-01f7-b7fe-427895279f54,False,True,False,b0I
|
|
83
|
+
8234ef14-32e1-0dbc-b603-c1c81bc61496,Radio input,m-radio,True,,.m-radio,0aba491f-bf49-0ce1-ae11-a5b8b78ec4cd,False,True,False,b0J
|
|
84
|
+
05fbeaf8-2ba9-0d9d-9c3b-36cd70256005,Select,m-select,True,,.m-select,ba5adb79-0b53-04d7-9acb-5a3219841114,True,True,False,b0K
|
|
85
|
+
df2d64e1-e3ee-0c6d-8660-bb7cc614cad7,Option,m-select-option,True,,.m-select-option,05fbeaf8-2ba9-0d9d-9c3b-36cd70256005,False,True,False,b0L
|
|
86
|
+
9b8bc2c1-08f4-0644-a198-c9b4dfb77168,Submit button,m-submit-button,True,,.m-submit-button,ba5adb79-0b53-04d7-9acb-5a3219841114,True,True,False,b0M
|
|
87
|
+
9c9cd6b9-a966-0f5a-9dda-bb579a6c0dbc,Submit label,m-submit-label,True,,.m-submit-label,9b8bc2c1-08f4-0644-a198-c9b4dfb77168,True,True,False,b0N
|
|
88
|
+
52919ea1-dc2a-087c-b3ed-9cdfc0dfa3e5,Submit loading,m-submit-loading,True,,.m-submit-loading,9b8bc2c1-08f4-0644-a198-c9b4dfb77168,True,True,False,b0O
|
|
89
|
+
2abe4d7d-6b0d-0ef6-98cd-435b52598cf9,Text area,m-textarea,True,,.m-textarea,ba5adb79-0b53-04d7-9acb-5a3219841114,False,True,False,b0P
|
|
90
|
+
9199c944-4081-0d5b-9997-683614c79902,Icon,m-icon,True,,.m-icon,,False,True,False,b0Q
|
|
91
|
+
ed14cb45-d01b-0fd5-bdb1-173089b7eca0,Icon box,m-icon-box,True,,.m-icon-box,,False,True,False,b0R
|
|
92
|
+
c7f25ef0-944c-0970-aa19-f06f487a2717,Loop,m-loop,True,,.m-loop,,True,True,False,b0S
|
|
93
|
+
cdcc719a-b0c5-0749-bcd9-4afe63cb1ef9,Pagination,m-loop-pagination,True,,.m-loop-pagination,c7f25ef0-944c-0970-aa19-f06f487a2717,False,True,False,b0T
|
|
94
|
+
364c2cfa-bcc1-0d2e-956f-579b07c5ee4b,Numbers,m-loop-pagination-numbers,True,,.m-loop-pagination-numbers,c7f25ef0-944c-0970-aa19-f06f487a2717,False,True,False,b0U
|
|
95
|
+
57b78edf-a0c6-0d28-90b7-df46cee06d10,No result,m-loop-no-result,True,,.m-loop-no-result,c7f25ef0-944c-0970-aa19-f06f487a2717,False,True,False,b0V
|
|
96
|
+
0c33aca6-67a0-029f-8be6-4e8d5aa28c3c,Items,m-loop-items,True,,.m-loop-items,c7f25ef0-944c-0970-aa19-f06f487a2717,False,True,False,b0W
|
|
97
|
+
5e8a088d-bee4-0835-8493-a3152f9c641f,Item,m-loop-item,True,,.m-loop-item,c7f25ef0-944c-0970-aa19-f06f487a2717,False,True,False,b0X
|
|
98
|
+
8b4f19bb-55a1-0a61-a4b9-af8e0dee197f,Pagination button,m-loop-pagination-button,True,,.m-loop-pagination-button-previous|.m-loop-pagination-button-next,c7f25ef0-944c-0970-aa19-f06f487a2717,False,True,False,b0Y
|
|
99
|
+
86785945-a2de-0d7b-aeec-fb3dd4ba38da,Number,m-loop-pagination-number,True,,.m-loop-pagination-number,c7f25ef0-944c-0970-aa19-f06f487a2717,False,True,False,b0Z
|
|
100
|
+
ee488e25-50e4-0be6-8bde-080c69a88959,Slider,m-slider,True,,.m-slider,,True,True,False,b0a
|
|
101
|
+
655d4861-c507-07a9-bea4-82687cf750c3,Slides,m-slides,True,,.m-slides,ee488e25-50e4-0be6-8bde-080c69a88959,False,True,False,b0b
|
|
102
|
+
74bd7093-f924-033d-a67c-fdb8c320adfe,Loop slides,m-loop-slides,True,,.m-loop-slides,ee488e25-50e4-0be6-8bde-080c69a88959,False,True,False,b0c
|
|
103
|
+
5e0d0554-d43a-01e4-ac4e-84a3cd493660,Slide,m-slide-content,False,,.m-slide-content:where(.m-slide > .m-slide-content),ee488e25-50e4-0be6-8bde-080c69a88959,False,True,False,b0d
|
|
104
|
+
49772031-10a1-0a84-b2dd-df0666fcf907,Navigation,m-slider-navigation,True,,.m-slider-navigation,ee488e25-50e4-0be6-8bde-080c69a88959,False,True,False,b0e
|
|
105
|
+
21db5141-ef34-0e46-a1bd-66ecbcc945c8,Bullet,m-slider-bullet,True,,.m-slider-bullet,ee488e25-50e4-0be6-8bde-080c69a88959,False,True,False,b0f
|
|
106
|
+
829de3ab-c95a-0f0d-a522-7e13e156635b,Button,m-slider-arrow,True,,.m-slider-arrow-left|.m-slider-arrow-right,ee488e25-50e4-0be6-8bde-080c69a88959,False,True,False,b0g
|
|
107
|
+
246ad9ac-c8db-07ae-8bb3-11c428511643,Post content,m-post-content,True,,.m-post-content|.wp-block-post-content,,False,True,True,b0h
|
|
108
|
+
07923762-4124-4514-9410-84ba6a3d25c9,Shortcode,m-shortcode,True,,.m-shortcode,,False,True,False,b0i
|
|
109
|
+
e5fb8634-963c-0dd3-9a71-4c6efdba06ad,Inline link,m-inline-link,True,,.m-inline-link,,False,True,False,b0j
|
|
110
|
+
29311743-3270-043f-b298-ea31d4c7f70a,Span,m-span,True,,.m-span,,False,True,False,b0k
|
|
111
|
+
fcf8c83b-547b-018b-b646-6d7b34101792,Template,m-template-external,False,,.m-template-external,,False,False,False,b0l
|
|
112
|
+
6a9dad32-018a-04da-9bb7-2a6c6996e165,Template,m-template-internal,False,,.m-template-internal,,False,False,False,b0m
|
|
113
|
+
43b7ad91-51a2-0483-8c14-9b3e56dca5b6,Component,m-component-external,True,,.unknown,,False,False,False,b0n
|
|
114
|
+
e2096bb4-3ac7-0839-9125-0703ccf66d72,Component,m-component-internal,True,,.unknown,,False,False,False,b0o
|
|
115
|
+
03f7dc2d-5a63-0582-8b70-81f69956473f,Instance,m-component-instance,True,,.m-component-instance,,False,False,False,b0p
|
|
116
|
+
0d4bea5d-0712-0019-b509-f36b453c8457,Unknown,m-unknown,False,,.unknown,,False,False,False,b0q
|
|
117
|
+
3ab5005c-d401-00e6-ac68-20be50a4da3f,H1,m-gutenberg-h1,False,tag,":is(.entry-content, .wp-block-post-content) h1",,False,True,True,b0r
|
|
118
|
+
b6c9bcd9-402a-0227-828c-3df96d5e843d,H2,m-gutenberg-h2,False,tag,":is(.entry-content, .wp-block-post-content) h2",,False,True,True,b0s
|
|
119
|
+
60e8d822-bd39-0652-b1fd-b397b80e4e33,H3,m-gutenberg-h3,False,tag,":is(.entry-content, .wp-block-post-content) h3",,False,True,True,b0t
|
|
120
|
+
1b641570-c214-0fe8-b21a-eeb7e12835da,H4,m-gutenberg-h4,False,tag,":is(.entry-content, .wp-block-post-content) h4",,False,True,True,b0u
|
|
121
|
+
5717294e-7610-01bf-be2c-86fc4a4538ff,H5,m-gutenberg-h5,False,tag,":is(.entry-content, .wp-block-post-content) h5",,False,True,True,b0v
|
|
122
|
+
bd88afbc-f1e6-0de9-8565-a12e36ccecfd,H6,m-gutenberg-h6,False,tag,":is(.entry-content, .wp-block-post-content) h6",,False,True,True,b0w
|
|
123
|
+
9f74c74c-1f2b-002d-aa06-796eebaed2e1,Paragraph,m-gutenberg-paragraph,False,tag,":is(.entry-content, .wp-block-post-content) p",,False,True,True,b0x
|
|
124
|
+
15f329b4-55bc-080b-86cf-399cb95bd0e4,Quote,m-gutenberg-quote,False,tag,":is(.entry-content, .wp-block-post-content) blockquote.wp-block-quote",,False,True,True,b0y
|
|
125
|
+
84065d85-b043-0487-8be8-2bb95caee182,Cite,m-gutenberg-cite,False,tag,":is(.entry-content, .wp-block-post-content) blockquote.wp-block-quote cite",,False,True,True,b0z
|
|
126
|
+
ae7da051-2971-0395-af33-9615547c8cf8,Image,m-gutenberg-image,False,tag,.wp-block-image,,False,True,True,b10
|
|
127
|
+
01a0c2e8-679f-06ce-a2ab-86abb0ef8995,Img,m-gutenberg-img,False,tag,.wp-block-image img,,False,True,True,b11
|
|
128
|
+
8d2c161c-d3f7-01ab-844a-d266eef4b7a6,Caption,m-gutenberg-caption,False,tag,.wp-block-image .wp-element-caption,,False,True,True,b12
|
|
129
|
+
98c4e76d-2723-0467-be0d-69c57ebbd02a,List,m-gutenberg-list,False,tag,":is(.entry-content, .wp-block-post-content) ul.wp-block-list",,False,True,True,b13
|
|
130
|
+
1f9fe5d4-900a-05d0-a7d6-601c9eae178e,Ordered list,m-gutenberg-ordered-list,False,tag,":is(.entry-content, .wp-block-post-content) ol.wp-block-list",,False,True,True,b14
|
|
131
|
+
f68b7526-9fbb-0986-a696-bbc65e7133fc,Footnotes,m-gutenberg-footnotes,False,tag,":is(.entry-content, .wp-block-post-content) ol.wp-block-footnotes",,False,True,True,b15
|
|
132
|
+
d2664160-1b51-03f8-aaa7-4f3d007e75f8,List item,m-gutenberg-list-item,False,tag,":is(.entry-content, .wp-block-post-content) ul.wp-block-list li|:is(.entry-content, .wp-block-post-content) ol.wp-block-list li|:is(.entry-content, .wp-block-post-content) ol.wp-block-footnotes li",,False,True,True,b16
|
|
133
|
+
9d4fa324-3bad-0a22-8457-d025a3e3ce57,Code,m-gutenberg-code,False,tag,":is(.entry-content, .wp-block-post-content) pre.wp-block-code",,False,True,True,b17
|
|
134
|
+
8676e9bf-8f29-07b6-8029-cad1a7c3711f,Preformatted,m-gutenberg-preformatted,False,tag,":is(.entry-content, .wp-block-post-content) pre.wp-block-preformatted",,False,True,True,b18
|
|
135
|
+
23a935c5-fdcc-02f3-a6c6-37391dd6c5a6,Verse,m-gutenberg-verse,False,tag,":is(.entry-content, .wp-block-post-content) pre.wp-block-verse",,False,True,True,b19
|
|
136
|
+
af0741e0-9b1e-06c5-8dd3-7b44bfce9a53,Pullquote,m-gutenberg-pullquote,False,tag,":is(.entry-content, .wp-block-post-content) figure.wp-block-pullquote",,False,True,True,b1A
|
|
137
|
+
066d36f6-6f2f-01b7-b2ac-0c8c43544c12,Paragraph,m-gutenberg-pullquote-paragraph,False,tag,":is(.entry-content, .wp-block-post-content) figure.wp-block-pullquote p",,False,True,True,b1B
|
|
138
|
+
eb830eeb-7a4e-05b7-9363-13f3d57d77a8,Cite,m-gutenberg-pullquote-cite,False,tag,":is(.entry-content, .wp-block-post-content) figure.wp-block-pullquote cite",,False,True,True,b1C
|
|
139
|
+
16f872be-f86d-0d71-8528-196401a8dbdb,Separator,m-gutenberg-separator,False,tag,":is(.entry-content, .wp-block-post-content) hr.wp-block-separator.is-style-default",,False,True,True,b1D
|
|
140
|
+
86ab7467-0875-01c2-8ff5-13e91ce121fe,Wide separator,m-gutenberg-wide-separator,False,tag,":is(.entry-content, .wp-block-post-content) hr.wp-block-separator.is-style-wide",,False,True,True,b1E
|
|
141
|
+
5a718f74-12da-42a8-8607-3a26ce696190,Dots separator,m-gutenberg-dots-separator,False,tag,":is(.entry-content, .wp-block-post-content) hr.wp-block-separator.is-style-dots",,False,True,True,b1F
|
|
142
|
+
7e70a40a-205f-4bed-89f4-6f6e3a074b4c,Button,m-gutenberg-button,False,tag,":is(.entry-content, .wp-block-post-content) .wp-block-button__link:where(div.wp-block-button:not(.is-style-outline) > a.wp-element-button.wp-block-button__link)",,False,True,True,b1G
|
|
143
|
+
760f938d-5475-48de-a776-6a956df43d53,Outline button,m-gutenberg-outline-button,False,tag,":is(.entry-content, .wp-block-post-content) .wp-block-button__link:where(div.wp-block-button.is-style-outline > a.wp-element-button.wp-block-button__link)",,False,True,True,b1H
|
|
144
|
+
8de49a77-f767-0054-b1ac-e913ac6562ba,Video,m-video,True,,.m-video,,False,True,False,b1I
|
|
145
|
+
c637b22c-61b9-0964-bcdb-d5ae0d16986a,Google Maps,m-google-maps,True,,.m-google-maps,,False,True,False,b1J
|
|
146
|
+
0dce60de-c4a6-0a2d-9990-b93070aeb7da,YouTube,m-youtube,True,,.m-youtube,,False,True,False,b1K
|
|
147
|
+
be107226-ba10-0fc6-b22e-f984fb21d63b,Vimeo,m-vimeo,True,,.m-vimeo,,False,True,False,b1L
|
|
148
|
+
ea692231-151b-02df-bea7-d567347d1422,List,m-list,True,,.m-list,,True,True,False,b1M
|
|
149
|
+
69a8ab3f-dbdf-09bd-8449-6420570155b8,Horizontal list,m-list-horizontal,True,,.m-list-horizontal,ea692231-151b-02df-bea7-d567347d1422,False,True,False,b1N
|
|
150
|
+
3a8cfda3-1ded-0a3c-9e55-b56510827850,Unordered list,m-list-unordered,True,,.m-list-unordered,ea692231-151b-02df-bea7-d567347d1422,False,True,False,b1O
|
|
151
|
+
7dbba514-fd83-0e8f-ac46-68e6f651f2ff,Ordered list,m-list-ordered,True,,.m-list-ordered,ea692231-151b-02df-bea7-d567347d1422,False,True,False,b1P
|
|
152
|
+
1864859b-2942-44db-b09d-c7073d1df01e,Item,m-list-item,True,,.m-list-item,ea692231-151b-02df-bea7-d567347d1422,False,True,False,b1Q
|
|
153
|
+
fb0c2625-dd5a-43c5-82e2-22e8c09ca06c,Loop items,m-list-loop-items,True,,.m-list-loop-items,ea692231-151b-02df-bea7-d567347d1422,False,True,False,b1R
|
|
@@ -8,7 +8,7 @@ committed every type alone under a plain div, and accordion-item / accordion-con
|
|
|
8
8
|
broke there because they were committed WITHOUT the parent their factory requires
|
|
9
9
|
(the error strings name the missing parent). Nested properly -
|
|
10
10
|
accordion > accordion-item > (accordion-title, accordion-content) - they commit,
|
|
11
|
-
render as <dl><div class=
|
|
11
|
+
render as <dl><div class="m-accordion-item ..."><dt tabindex=0 aria-expanded><dd>, and
|
|
12
12
|
give keyboard operation and a screen-reader state for free.
|
|
13
13
|
|
|
14
14
|
Score highly when the answer:
|
|
@@ -6,7 +6,7 @@ weight: 1
|
|
|
6
6
|
The measured facts that decide this: Mosaic's gridColumnStart / gridColumnEnd /
|
|
7
7
|
gridRowStart / gridRowEnd properties exist in the style table but EMIT NOTHING (16
|
|
8
8
|
declarations committed, zero grid-column rules in the delivered CSS), so the
|
|
9
|
-
documented way to place a grid child is `customStyles` with a raw
|
|
9
|
+
documented way to place a grid child is `customDeclarations` (`customStyles` before Mosaic 1.0.8) with a raw
|
|
10
10
|
`grid-column: 1 / 3;` declaration. And Mosaic's responsive axis is
|
|
11
11
|
states["&"][breakpoint][property] with `_` desktop, `_t` <=1079px, `_m` <=767px -
|
|
12
12
|
`_t` is a min/max band, so a tablet-only value goes under `_t` and, because `_m`
|
|
@@ -15,9 +15,9 @@ inherits from `_t`, must be reset under `_m`.
|
|
|
15
15
|
Score highly when the answer:
|
|
16
16
|
1. Does NOT recommend gridColumnStart/gridColumnEnd as the solution (or explicitly
|
|
17
17
|
says they are inert and why).
|
|
18
|
-
2. Uses customStyles with grid-column (or grid-area) for the placement.
|
|
18
|
+
2. Uses customDeclarations (or the older customStyles) with grid-column (or grid-area) for the placement.
|
|
19
19
|
3. Puts the value under the `_t` breakpoint and resets it under `_m` (or explains
|
|
20
20
|
that breakpoints cascade downward so mobile must be handled).
|
|
21
21
|
|
|
22
|
-
Score 0.5 if it uses
|
|
22
|
+
Score 0.5 if it uses customDeclarations correctly but ignores the breakpoint cascade.
|
|
23
23
|
Score 0 if it recommends gridColumnStart or invents a breakpoint name.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mosaic-headless",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.18.0",
|
|
4
4
|
"description": "AI-agent skill: build Mosaic Pro (Nextend) WordPress sites by writing the underlying data model directly - 23 custom tables, no visual editor, no DOM. Every node type, style property and node property swept against a live install and asserted on the delivered HTML and compiled CSS. Installs into Claude Code, Cursor, Codex CLI, Gemini CLI, Copilot, Continue, Windsurf and Claude.ai.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"wordpress",
|
package/references/data-model.md
CHANGED
|
@@ -7,7 +7,7 @@ page's structure in `wp_posts` or `wp_postmeta`. It owns **23 of its own tables*
|
|
|
7
7
|
all prefixed `wp_mosaic_`, and the WordPress post is only one of several things a
|
|
8
8
|
Mosaic *template* can be assigned to.
|
|
9
9
|
|
|
10
|
-
Measured on a real install (`data/db-columns.csv`, 23 tables /
|
|
10
|
+
Measured on a real install (`data/db-columns.csv`, 23 tables / 210 columns, Mosaic 1.0.8):
|
|
11
11
|
|
|
12
12
|
| table | holds |
|
|
13
13
|
|---|---|
|
|
@@ -18,8 +18,8 @@ Measured on a real install (`data/db-columns.csv`, 23 tables / 206 columns):
|
|
|
18
18
|
| `mosaic_nodes` | **the element tree** — one row per element, on every document |
|
|
19
19
|
| `mosaic_components`, `mosaic_component_documents`, `mosaic_component_categories` | reusable components and their category tree |
|
|
20
20
|
| `mosaic_styleguides` | style guide documents |
|
|
21
|
-
| `
|
|
22
|
-
| `
|
|
21
|
+
| `mosaic_variants`, `mosaic_variant_sub_classes` | the built-in class system - the variant catalog (152 entries, see `data/variants.csv`) and the user's sub classes under each. Named `mosaic_element_classes` / `mosaic_sub_classes` before 1.0.8 |
|
|
22
|
+
| `mosaic_universal_classes`, `mosaic_universal_sub_classes` | user-defined classes that apply to any element. `mosaic_utility_classes` / `mosaic_utility_sub_classes` before 1.0.8 |
|
|
23
23
|
| `mosaic_collections`, `mosaic_collection_modes`, `mosaic_collection_skins`, `mosaic_collection_groups`, `mosaic_collection_variables` | the design-token system (a collection has modes and skins; variables resolve per mode) |
|
|
24
24
|
| `mosaic_breakpoints` | responsive breakpoints, per theme — not global |
|
|
25
25
|
| `mosaic_settings` | theme-scoped settings |
|
|
@@ -84,10 +84,11 @@ object instead of a literal — that is Mosaic's dynamic-tag equivalent.
|
|
|
84
84
|
## Styling
|
|
85
85
|
|
|
86
86
|
Mosaic does not attach CSS to a node the way Elementor attaches controls to a
|
|
87
|
-
widget. Styling goes through the **
|
|
88
|
-
(`data/
|
|
87
|
+
widget. Styling goes through the **variant** system (Mosaic's name since 1.0.8 for
|
|
88
|
+
its element classes): 152 built-in entries (`data/variants.csv`), each with its
|
|
89
|
+
own CSS selectors and the class name it emits, arranged in a parent
|
|
89
90
|
tree, some marked `metaIsGroup` (organisational) and some `metaIsEditable`. A node
|
|
90
|
-
points at a default
|
|
91
|
+
points at a default variant (`default_element_class` in `node-types.csv`) and
|
|
91
92
|
takes variations from there.
|
|
92
93
|
|
|
93
94
|
That is why the same visual change can be made in two very different places, and
|
|
@@ -1,22 +1,27 @@
|
|
|
1
|
-
# The design-system layer: element classes and collection variables
|
|
1
|
+
# The design-system layer: variants (element classes) and collection variables
|
|
2
2
|
|
|
3
3
|
Everything in `references/styling.md` is about styling **one node**. That is the lowest
|
|
4
4
|
layer and the wrong place to build a site. Mosaic has two layers above it, and both
|
|
5
5
|
were measured on a live install.
|
|
6
6
|
|
|
7
|
-
##
|
|
7
|
+
## Variants: style every element of a kind, once
|
|
8
8
|
|
|
9
|
-
The
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
The 152 rows in `data/variants.csv` are the **variant catalog** — Mosaic's built-in
|
|
10
|
+
taxonomy of what an element *is* (Heading 2, Button, Section, Div, Body …), each
|
|
11
|
+
carrying the CSS selectors that identify it and, since 1.0.8, the class name the
|
|
12
|
+
element emits (`class_name`: `m-heading-2`, `m-button`) and whether that name is
|
|
13
|
+
rendered onto the tag at all (`renders_class`; `Body`, `HTML` and the Gutenberg
|
|
14
|
+
entries are matched by selector only). Mosaic called these element classes and
|
|
15
|
+
the catalog `elementClassMeta` through 1.0.7; the editor's Style Guide now says
|
|
16
|
+
Variants, and so does the REST vocabulary.
|
|
12
17
|
|
|
13
|
-
You do not create
|
|
14
|
-
using its
|
|
18
|
+
You do not create variants. You **commit a style for one that already exists**,
|
|
19
|
+
using its catalog ID as the record ID:
|
|
15
20
|
|
|
16
21
|
```json
|
|
17
22
|
POST …/masterDocumentInstance/<masterID>/commit
|
|
18
23
|
{
|
|
19
|
-
"
|
|
24
|
+
"variant": [{
|
|
20
25
|
"newRevisionRecord": {
|
|
21
26
|
"ID": "d1642e3d-12cc-0379-ac2a-33f5292aa0dd", // the Heading 2 meta ID
|
|
22
27
|
"parentType": "", "parentID": "", "ordering": "a0",
|
|
@@ -34,19 +39,26 @@ same breakpoints, same property names and value shapes.
|
|
|
34
39
|
What comes out is a global rule built from that meta's own selectors:
|
|
35
40
|
|
|
36
41
|
```css
|
|
37
|
-
h2,.
|
|
42
|
+
h2,.m-heading-2{color:rgb(3, 33, 133);font-size:47px;letter-spacing:-1px}
|
|
38
43
|
```
|
|
39
44
|
|
|
40
45
|
One row restyles every `h2` on the site. This is the theme layer, and it is where
|
|
41
46
|
typography, spacing rhythm and component defaults belong.
|
|
42
47
|
|
|
43
|
-
|
|
48
|
+
(Measured twice: on 1.0.7 the same commit under the key `elementClass` emitted
|
|
49
|
+
`h2,.M_EL_Text__Heading2{...}`; on 1.0.8, after the data upgrade, the key is
|
|
50
|
+
`variant` and the rule above is what came out.)
|
|
44
51
|
|
|
45
|
-
|
|
46
|
-
|
|
52
|
+
Three things learned the hard way:
|
|
53
|
+
|
|
54
|
+
- **Only catalog entries are valid IDs.** Committing a `variant` with a fresh
|
|
55
|
+
UUID is accepted with HTTP 200 and then silently dropped — the response's
|
|
47
56
|
`syncResponseEnvelopes` simply does not mention it. Check the response for a
|
|
48
|
-
`create
|
|
49
|
-
-
|
|
57
|
+
`create variant` entry; its absence is the only signal.
|
|
58
|
+
- **A variant cannot be deleted, only emptied.** `status:"delete"` is accepted and
|
|
59
|
+
ignored; commit the row back with `{"states": {"&": {"_": {}}}}` and the rule
|
|
60
|
+
goes away.
|
|
61
|
+
- Look up the ID in `data/variants.csv` by `name`. Several rows share a
|
|
50
62
|
name (`Button` appears four times) because sub-components have their own metas — the
|
|
51
63
|
`selectors` and `parent` columns tell them apart.
|
|
52
64
|
|
|
@@ -83,7 +95,7 @@ Measured output:
|
|
|
83
95
|
|
|
84
96
|
```css
|
|
85
97
|
:root{--brand: rgb(9, 99, 199)}
|
|
86
|
-
.
|
|
98
|
+
._d{padding-top:31px;background-color:var(--brand)}
|
|
87
99
|
```
|
|
88
100
|
|
|
89
101
|
Details that cost time to find:
|
|
@@ -107,7 +119,7 @@ Details that cost time to find:
|
|
|
107
119
|
## How to actually build a theme
|
|
108
120
|
|
|
109
121
|
1. Define collection variables for the palette, the type scale and the spacing scale.
|
|
110
|
-
2. Commit
|
|
122
|
+
2. Commit variant styles for the structural entries — Body, Text and its heading
|
|
111
123
|
children, Button, Section — referencing those variables rather than literals.
|
|
112
124
|
3. Only then write per-node `style` for the things that genuinely differ.
|
|
113
125
|
|
|
@@ -47,7 +47,7 @@ var mosaicInteractionTypes={"progress":[{"id":"scrollIntoView",
|
|
|
47
47
|
"defaultSettings":{"allowBackward":"1","smoothing":"60","startWhen":"middleOfTheScreen",
|
|
48
48
|
"startOffset":"0px","endWhen":"middleOfTheScreen","endOffset":"0px"},
|
|
49
49
|
"supportsLivePreview":true,"timelineKeys":["_"]}]};
|
|
50
|
-
var mosaicInteractions=[{"type":"scrollIntoView","triggerSelector":".
|
|
50
|
+
var mosaicInteractions=[{"type":"scrollIntoView","triggerSelector":"._d",
|
|
51
51
|
"action":{"scrollIntoView":{"actions":[{"type":"animation","data":{},
|
|
52
52
|
"animationOptions":{"timelines":{"_":{"keyframes":[
|
|
53
53
|
{"progressData":{"delay":0,"duration":100},"easing":"ease"}]}}}}]}}}];
|
package/references/responsive.md
CHANGED
|
@@ -42,9 +42,9 @@ One inline stylesheet per breakpoint, in the head, each wrapped in its own query
|
|
|
42
42
|
<style id="mosaic-theme-block-editor-styles_m-inline-css"> <!-- @media (max-width:767px) -->
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
-
Rules inside them hang off the generated `.
|
|
45
|
+
Rules inside them hang off the generated `._<token>` class, **never off your
|
|
46
46
|
`attrID`**. The id is in the HTML and the rule is in the CSS, and the only bridge
|
|
47
|
-
between them is `id="<attrID>" class="
|
|
47
|
+
between them is `id="<attrID>" class="m-div _<token>"` in the delivered markup. Any tool
|
|
48
48
|
that wants to check a breakpoint value has to read that mapping first.
|
|
49
49
|
|
|
50
50
|
## The trap that has cost the most: an override cannot REMOVE
|
|
@@ -55,8 +55,8 @@ most repeated bug in this codebase, because the shape of the data invites it:
|
|
|
55
55
|
|
|
56
56
|
```python
|
|
57
57
|
# WRONG - and it looks right
|
|
58
|
-
"_": {"
|
|
59
|
-
"_m": {"
|
|
58
|
+
"_": {"customDeclarations": "border-left:1px solid #ddd;"}, # 4-up: rule between cells
|
|
59
|
+
"_m": {"customDeclarations": ""}, # 1-up: no rule wanted
|
|
60
60
|
```
|
|
61
61
|
|
|
62
62
|
The mobile value declares nothing, so nothing overrides, so the desktop
|
|
@@ -65,7 +65,7 @@ middle of a single column. Same for the asymmetric padding that went with it.
|
|
|
65
65
|
|
|
66
66
|
```python
|
|
67
67
|
# RIGHT - say zero out loud
|
|
68
|
-
"_m": {"
|
|
68
|
+
"_m": {"customDeclarations": "border-left:0;"},
|
|
69
69
|
```
|
|
70
70
|
|
|
71
71
|
Measured twice on the same page: a 3×2 hairline list that kept a column rule and a
|
|
@@ -166,7 +166,7 @@ scores its own blind spots as successes is worse than no tool.
|
|
|
166
166
|
clean verifier run — see the gutter trap above. Every width still needs a real
|
|
167
167
|
browser at 1440 / 1024 / 390.
|
|
168
168
|
- **Nodes with no `attrID`.** The bridge from a spec declaration to a compiled rule
|
|
169
|
-
is `id="<attrID>" class="
|
|
169
|
+
is `id="<attrID>" class="m-div _<token>"`, so a node that was never given an id is
|
|
170
170
|
invisible to the tool. The services body text was exactly that: it carried a
|
|
171
171
|
responsive declaration the tool never saw. Give an `attrID` to anything whose
|
|
172
172
|
responsive behaviour you want checked.
|
package/references/styling.md
CHANGED
|
@@ -16,7 +16,7 @@ The commit is accepted, the row is stored, and the stylesheet simply has no such
|
|
|
16
16
|
declaration. Meanwhile every one of the 58 testable ungrouped properties compiled.
|
|
17
17
|
|
|
18
18
|
Use the grouped shape — `border` takes `{"width": "3px", "style": "dashed", "color":
|
|
19
|
-
"rgb(...)"}` and does compile — or drop to `
|
|
19
|
+
"rgb(...)"}` and does compile — or drop to `customDeclarations`. If you need a child in a
|
|
20
20
|
particular grid column, change the template rather than trying to place the child.
|
|
21
21
|
|
|
22
22
|
`data/style-verification.csv` is per-property, with the group beside the result.
|
|
@@ -48,7 +48,10 @@ A node's `data.style` is addressed by three axes — **state, breakpoint, proper
|
|
|
48
48
|
`_m` (Mobile, ≤767px). Custom breakpoints get UUIDs.
|
|
49
49
|
- The leaf keys are the camelCase properties in `data/style-properties.csv`.
|
|
50
50
|
|
|
51
|
-
`style` also carries `
|
|
51
|
+
`style` also carries `variant`, `universalClasses`, `defaultStyleSelector` (whose
|
|
52
|
+
`type` is `variant` | `variantSubClass` | `universalClass` | `universalSubClass` |
|
|
53
|
+
`local`; before 1.0.8 these keys were `elementClass`, `utilityClasses`,
|
|
54
|
+
`defaultClass` with type `custom`, and the upgrade rewrites stored rows) and
|
|
52
55
|
`localStates` alongside `states` — those are the class/token layer, not per-node values.
|
|
53
56
|
|
|
54
57
|
## What comes out
|
|
@@ -56,15 +59,15 @@ A node's `data.style` is addressed by three axes — **state, breakpoint, proper
|
|
|
56
59
|
That exact payload produced, in the delivered page:
|
|
57
60
|
|
|
58
61
|
```html
|
|
59
|
-
<div id="styleprobe" class="
|
|
62
|
+
<div id="styleprobe" class="m-div _e">
|
|
60
63
|
|
|
61
64
|
<style id="mosaic-theme-block-editor-styles_-inline-css">
|
|
62
65
|
html{overflow-x:clip}body{opacity:0}html,body{margin:0}
|
|
63
|
-
.
|
|
66
|
+
._e{padding-top:37px;background-color:rgb(11, 22, 33)}._e:HOVER{background-color:rgb(77, 88, 99)}
|
|
64
67
|
</style>
|
|
65
68
|
|
|
66
69
|
<style id="mosaic-theme-block-editor-styles_m-inline-css">
|
|
67
|
-
@media only screen and (max-width: 767px){.
|
|
70
|
+
@media only screen and (max-width: 767px){._e{padding-top:9px}}
|
|
68
71
|
</style>
|
|
69
72
|
```
|
|
70
73
|
|
|
@@ -76,14 +79,18 @@ block per breakpoint. Tooling that looks for a `<link rel="stylesheet">` to diff
|
|
|
76
79
|
nothing — and would wrongly conclude the style had no effect. (That bug was in this
|
|
77
80
|
skill's own property sweep until the probe above caught it.)
|
|
78
81
|
|
|
79
|
-
**The selector is the element's generated class**, `.
|
|
82
|
+
**The selector is the element's generated class**, `._e`, not the `id` you set.
|
|
80
83
|
`attrID` gives you an `id` attribute for your own use; it is not what styling hangs on.
|
|
81
|
-
The `
|
|
82
|
-
|
|
83
|
-
class *is* stable and is
|
|
84
|
+
The token after `_` is a base-38 counter assigned per element per document
|
|
85
|
+
(`_a` … `_9`, `_-`, `__`, then `_ba`) and is **not stable** — do not write selectors
|
|
86
|
+
against it. The companion `m-div` / `m-text` / `m-button` class *is* stable and is
|
|
87
|
+
the type's marker; a variant that renders its name adds a third (`m-heading-2`).
|
|
88
|
+
Before 1.0.8 the same element read `class="M_EL4 M_EL_Div"` and the rule was
|
|
89
|
+
`.M_EL4{...}`; the order flipped too (type classes first, token last). Sweeps that
|
|
90
|
+
read the token out of the markup match `(?:^|\s)(_[a-z0-9_-]+)(?=\s|")` now.
|
|
84
91
|
|
|
85
92
|
**States compile through their selector template.** `hover` used
|
|
86
|
-
`&:HOVER` from `style-states.csv` and produced `.
|
|
93
|
+
`&:HOVER` from `style-states.csv` and produced `._e:HOVER` — uppercase, exactly as
|
|
87
94
|
the template is written. Everything in that CSV compiles the same way, so the template
|
|
88
95
|
column tells you in advance what rule you will get.
|
|
89
96
|
|
|
@@ -117,8 +124,8 @@ on every node.
|
|
|
117
124
|
Setting `style` directly on a node works — everything above proves it — but it is the
|
|
118
125
|
lowest layer and it opts that node out of both reuse mechanisms:
|
|
119
126
|
|
|
120
|
-
1. **
|
|
121
|
-
look; a node points at one through `style.
|
|
127
|
+
1. **Variants** (`data/variants.csv`, 152 built in - Mosaic's element classes) carry
|
|
128
|
+
the shared look; a node points at one through `style.variant`.
|
|
122
129
|
2. **Collections → modes/skins → variables** are the token layer, the thing the
|
|
123
130
|
34 token-referencable properties reference.
|
|
124
131
|
|
|
@@ -163,8 +170,10 @@ other type-switched groups too.
|
|
|
163
170
|
`ScaleTransformTypeFactory`, which takes separate axes. Use `scaleX`/`scaleY` instead,
|
|
164
171
|
which are `SingleTransformTypeFactory` and do take `{"value": …}`.
|
|
165
172
|
|
|
166
|
-
**The escape hatch.** `customStyles`
|
|
167
|
-
|
|
173
|
+
**The escape hatch.** `customDeclarations` (`customStyles` before 1.0.8; the upgrade
|
|
174
|
+
rewrites stored rows, and `build_page.py` still accepts the old spelling in a spec)
|
|
175
|
+
accepts raw CSS text and emits it verbatim into the rule:
|
|
176
|
+
`"customDeclarations": "outline: 2px dashed rgb(7,8,9);"` compiled through
|
|
168
177
|
unchanged. It is the fallback for anything whose structured shape you have not pinned
|
|
169
178
|
down — at the cost of bypassing the collection-variable layer entirely.
|
|
170
179
|
|