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.
Files changed (64) hide show
  1. package/README.ja.md +17 -10
  2. package/README.ko.md +17 -10
  3. package/README.md +16 -9
  4. package/README.zh-TW.md +15 -9
  5. package/SKILL.md +96 -40
  6. package/assets/templates/platforms/claude-ai.json +1 -1
  7. package/assets/templates/platforms/claude-code.json +1 -1
  8. package/assets/templates/platforms/codex-cli.json +1 -1
  9. package/assets/templates/platforms/copilot.json +1 -1
  10. package/assets/templates/platforms/gemini-cli.json +1 -1
  11. package/bin/check-release.mjs +1 -1
  12. package/data/accordion-verification.csv +1 -1
  13. package/data/browser-verification.csv +906 -906
  14. package/data/conversion-verification.csv +1 -1
  15. package/data/db-columns.csv +40 -36
  16. package/data/design-audit-acknowledged.csv +1 -0
  17. package/data/design-audit.csv +1 -1
  18. package/data/intro-verification.csv +7 -7
  19. package/data/loop-verification.csv +5 -5
  20. package/data/node-properties.csv +4 -3
  21. package/data/node-property-verification.csv +81 -80
  22. package/data/node-type-notes.csv +1 -1
  23. package/data/node-types.csv +9 -9
  24. package/data/node-verification.csv +100 -100
  25. package/data/rest-routes.csv +1 -1
  26. package/data/style-properties.csv +1 -1
  27. package/data/style-state-verification.csv +48 -48
  28. package/data/style-states.csv +32 -32
  29. package/data/style-verification.csv +1 -1
  30. package/data/theme-zip-verification.csv +10 -10
  31. package/data/variants.csv +153 -0
  32. package/evals/accordion-is-not-broken/graders/criteria.md +1 -1
  33. package/evals/grid-child-placement/graders/criteria.md +3 -3
  34. package/package.json +1 -1
  35. package/references/data-model.md +7 -6
  36. package/references/design-system.md +28 -16
  37. package/references/interactions.md +1 -1
  38. package/references/responsive.md +6 -6
  39. package/references/styling.md +23 -14
  40. package/references/upgrading.md +182 -0
  41. package/references/vs-elementor-gutenberg.md +1 -1
  42. package/references/write-protocol.md +1 -1
  43. package/sites/_moksa.py +67 -62
  44. package/sites/moksa.json +219 -219
  45. package/tools/bootstrap_probe_theme.php +1 -1
  46. package/tools/build_page.py +17 -11
  47. package/tools/build_site.py +1 -1
  48. package/tools/capture_live.py +42 -6
  49. package/tools/data_upgrade.py +74 -0
  50. package/tools/extract_node_types.py +1 -1
  51. package/tools/from_elementor.py +3 -3
  52. package/tools/mo.py +10 -9
  53. package/tools/probe.py +1 -1
  54. package/tools/sweep_components.py +1 -1
  55. package/tools/sweep_interactions.py +3 -3
  56. package/tools/sweep_node_properties.py +1 -1
  57. package/tools/sweep_node_types.py +20 -0
  58. package/tools/sweep_style_properties.py +6 -7
  59. package/tools/sweep_style_states.py +2 -2
  60. package/tools/theme_export.php +2 -2
  61. package/tools/theme_zip_compare.php +2 -2
  62. package/tools/verify_browser.py +6 -5
  63. package/tools/verify_rwd.py +17 -15
  64. 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=M_EL_AccordionItem><dt tabindex=0 aria-expanded><dd>, and
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 customStyles correctly but ignores the breakpoint cascade.
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.17.2",
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",
@@ -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 / 206 columns):
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
- | `mosaic_element_classes`, `mosaic_sub_classes` | the built-in class system (151 classes, see `data/element-classes.csv`) |
22
- | `mosaic_utility_classes`, `mosaic_utility_sub_classes` | user-defined utility classes |
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 **element class** system: 151 built-in classes
88
- (`data/element-classes.csv`), each with its own CSS selectors, arranged in a parent
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 element class (`default_element_class` in `node-types.csv`) and
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
- ## Element classes: style every element of a kind, once
7
+ ## Variants: style every element of a kind, once
8
8
 
9
- The 151 rows in `data/element-classes.csv` are `elementClassMeta` records — Mosaic's
10
- built-in taxonomy of what an element *is* (Heading 2, Button, Section, Div, Body …),
11
- each carrying the CSS selectors that identify it.
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 element classes. You **commit a style for one that already exists**,
14
- using its meta ID as the record ID:
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
- "elementClass": [{
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,.M_EL_Text__Heading2{color:rgb(3, 33, 133);font-size:47px;letter-spacing:-1px}
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
- Two things learned the hard way:
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
- - **Only element-class metas are valid IDs.** Committing an `elementClass` with a
46
- fresh UUID is accepted with HTTP 200 and then silently dropped — the response's
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 elementClass` entry; its absence is the only signal.
49
- - Look up the meta ID in `data/element-classes.csv` by `name`. Several rows share a
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
- .M_EL3{padding-top:31px;background-color:var(--brand)}
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 element-class styles for the structural metas — Body, Text and its heading
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":".M_EL3",
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"}]}}}}]}}}];
@@ -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 `.M_EL<n>` class, **never off your
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="M_EL<n>"` in the delivered markup. Any tool
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
- "_": {"customStyles": "border-left:1px solid #ddd;"}, # 4-up: rule between cells
59
- "_m": {"customStyles": ""}, # 1-up: no rule wanted
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": {"customStyles": "border-left:0;"},
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="M_EL<n>"`, so a node that was never given an id is
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.
@@ -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 `customStyles`. If you need a child in a
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 `elementClass`, `utilityClasses`, `defaultClass` and
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="M_EL4 M_EL_Div">
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
- .M_EL4{padding-top:37px;background-color:rgb(11, 22, 33)}.M_EL4:HOVER{background-color:rgb(77, 88, 99)}
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){.M_EL4{padding-top:9px}}
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**, `.M_EL4`, not the `id` you set.
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 `M_EL<n>` number is assigned per element per document and is **not stable** — do
82
- not write selectors against it. The companion `M_EL_Div` / `M_EL_Text` / `M_EL_Button`
83
- class *is* stable and is the type's marker.
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 `.M_EL4:HOVER` — uppercase, exactly as
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. **Element classes** (`data/element-classes.csv`, 151 built in) carry the shared
121
- look; a node points at one through `style.elementClass`.
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` accepts raw CSS text and emits it verbatim into
167
- the rule: `"customStyles": "outline: 2px dashed rgb(7,8,9);"` compiled through
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