@threadlabs/looma 0.34.0 → 0.35.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 (88) hide show
  1. package/components/ui-badge/ui-badge.html +11 -3
  2. package/components/ui-button/ui-button.html +29 -4
  3. package/components/ui-card/ui-card.html +15 -13
  4. package/components/ui-checkbox/ui-checkbox.html +4 -2
  5. package/components/ui-dialog/ui-dialog.html +2 -0
  6. package/components/ui-icon-button/ui-icon-button.html +22 -8
  7. package/components/ui-input/ui-input.html +2 -1
  8. package/components/ui-input-group/ui-input-group.html +4 -1
  9. package/components/ui-light-editor/ui-light-editor.html +45 -0
  10. package/components/ui-light-editor/ui-light-editor.js +53 -0
  11. package/components/ui-menu/ui-menu.html +2 -0
  12. package/components/ui-number-input/ui-number-input.html +2 -1
  13. package/components/ui-number-input/ui-number-input.js +6 -3
  14. package/components/ui-popover/ui-popover.html +2 -0
  15. package/components/ui-select/ui-select.html +9 -7
  16. package/components/ui-switch/ui-switch.html +3 -0
  17. package/components/ui-textarea/ui-textarea.html +2 -1
  18. package/dist/index.js +24 -23
  19. package/docs/README.md +26 -2
  20. package/docs/catalog.json +566 -44
  21. package/docs/customizer-render.mjs +24 -11
  22. package/docs/customizer.js +67 -17
  23. package/docs/index.d.ts +4 -1
  24. package/docs/index.mjs +1 -1
  25. package/docs/render.mjs +1 -1
  26. package/docs/site.mjs +30 -20
  27. package/docs/theme-session.mjs +4 -2
  28. package/docs/theme.mjs +59 -7
  29. package/package.json +2 -2
  30. package/styles/ui-badge.css +11 -6
  31. package/styles/ui-button.css +29 -4
  32. package/styles/ui-card.css +9 -9
  33. package/styles/ui-checkbox.css +4 -2
  34. package/styles/ui-dialog.css +4 -0
  35. package/styles/ui-icon-button.css +22 -8
  36. package/styles/ui-input-group.css +4 -1
  37. package/styles/ui-input.css +2 -1
  38. package/styles/ui-light-editor.css +28 -0
  39. package/styles/ui-menu.css +2 -0
  40. package/styles/ui-popover.css +2 -0
  41. package/styles/ui-select.css +9 -7
  42. package/styles/ui-switch.css +3 -0
  43. package/styles/ui-textarea.css +2 -1
  44. package/theme-light.css +1 -0
  45. package/theme-system.css +43 -7
  46. package/tokens.css +4 -0
  47. package/vanilla/UiCard.d.ts +2 -1
  48. package/vanilla/UiCard.js +12 -12
  49. package/vanilla/UiLightEditor.d.ts +29 -0
  50. package/vanilla/UiLightEditor.js +102 -0
  51. package/vanilla/UiNumberInput.js +27 -20
  52. package/vanilla/index.js +1 -0
  53. package/vue/UiBadge.vue +29 -4
  54. package/vue/UiButton.vue +33 -4
  55. package/vue/UiCard.d.ts +8 -2
  56. package/vue/UiCard.vue +41 -17
  57. package/vue/UiCheckbox.vue +4 -2
  58. package/vue/UiDialog.vue +4 -0
  59. package/vue/UiIconButton.vue +26 -11
  60. package/vue/UiInput.vue +2 -1
  61. package/vue/UiInputGroup.vue +4 -1
  62. package/vue/UiLightEditor.d.ts +75 -0
  63. package/vue/UiLightEditor.js +2 -0
  64. package/vue/UiLightEditor.vue +402 -0
  65. package/vue/UiMenu.vue +2 -0
  66. package/vue/UiNumberInput.vue +32 -3
  67. package/vue/UiPopover.vue +2 -0
  68. package/vue/UiSelect.vue +16 -10
  69. package/vue/UiSwitch.vue +3 -0
  70. package/vue/UiTextarea.vue +2 -1
  71. package/vue/chunks/UiBadge.js +1 -1
  72. package/vue/chunks/UiButton.js +1 -1
  73. package/vue/chunks/UiCard.js +33 -5
  74. package/vue/chunks/UiCheckbox.js +1 -1
  75. package/vue/chunks/UiDialog.js +1 -1
  76. package/vue/chunks/UiIconButton.js +1 -1
  77. package/vue/chunks/UiInput.js +1 -1
  78. package/vue/chunks/UiInputGroup.js +1 -1
  79. package/vue/chunks/UiLightEditor.js +347 -0
  80. package/vue/chunks/UiMenu.js +1 -1
  81. package/vue/chunks/UiNumberInput.js +21 -8
  82. package/vue/chunks/UiPopover.js +1 -1
  83. package/vue/chunks/UiSelect.js +1 -1
  84. package/vue/chunks/UiSwitch.js +1 -1
  85. package/vue/chunks/UiTextarea.js +1 -1
  86. package/vue/components.css +306 -66
  87. package/vue/index.d.ts +1 -0
  88. package/vue/index.js +2 -1
package/docs/README.md CHANGED
@@ -46,6 +46,10 @@ The generated values follow rules. Small and large control heights follow a rati
46
46
 
47
47
  Choose a coordinated palette to change related paper, ink and action seeds together without changing geometry or motion. Palette seeds remain available for precise edits; the light/dark range previews and resolved values explain readability adjustments.
48
48
 
49
+ The main customizer offers Material and Palette presets. **Refine material & light** opens a focused view with a movable light source, real component samples and bounded surface controls. **Refine palette** opens the coordinated light/dark ranges and their four color seeds. Both views edit the same theme as the main customizer. Returning to the overview, navigating to a component, or reloading keeps the result.
50
+
51
+ A refined preset keeps its name with “customized” beside it. **Restore material preset** resets only material and light; **Restore palette preset** resets only the palette. These family choices are recorded in the recipe's optional `presets` mapping. The `values` mapping remains the complete source of the generated theme; a preset is a named combination of those values.
52
+
49
53
  Number controls accept arithmetic such as `42px / 1.2` or `150ms * 2`, calculate on entry and show the result. Unit changes preserve the quantity. Sliders include exact entry, and curve handles support dragging and arrow keys alongside numeric coordinates.
50
54
 
51
55
  Lengths retain their CSS units, such as `rem`; times retain `ms` or `s`. The downloaded CSS includes the canonical shared recipe as well as your inputs. Import a downloaded JSON recipe to continue editing it. Keep hand-written CSS in a separate overrides file so regenerating the theme does not replace it.
@@ -54,7 +58,23 @@ Changes apply throughout the documentation and remain in this browser across nav
54
58
 
55
59
  Text offers body, display, heading, label, caption, eyebrow and code roles. Choose a heading's document level with `as` independently from its visual role. Button and IconButton keep appearance and tone independent, with four optional shortcuts: primary (solid accent), standard (solid neutral), quiet (ghost neutral) and destructive (solid danger). A named preset takes precedence over the separate choices; `preset="none"` preserves their existing defaults.
56
60
 
57
- Glassiness and surface separation govern floating surfaces and the Card glass variant. Popup purpose and measured size refine the shared treatment. Decorative material can transmit the scene; the content plane remains opaque and readable, with opaque fallbacks for reduced transparency and unsupported backdrop filtering.
61
+ ## Describe material and light
62
+
63
+ Light position is relative to each surface: horizontal and vertical positions run from 0 to 1, with 0.5, 0 at top centre. Drag the source, use its arrow keys (Shift moves faster), or enter exact percentages. Home returns it to top centre. Spread runs from a concentrated spot to broad illumination; strength controls its intensity. The source influences reflections, illuminated edges and the direction of depth shadows throughout the theme.
64
+
65
+ Finish controls how strongly a material catches a reflection, from matte to polished. Edge light catches its boundary; glow spills softly beyond it. Glassiness and surface separation govern the decorative material around floating content, scaled by popup purpose and rendered size. The content plane stays opaque. Reflection peaks are bounded for readable text, and reduced transparency disables the ornamental reflection and glow as well as backdrop blur.
66
+
67
+ Card keeps surface structure and decorative treatment independent:
68
+
69
+ ```html
70
+ <ui-card variant="elevated">Standard subtle lift</ui-card>
71
+ <ui-card variant="elevated" treatment="expressive">Lift with the theme's material</ui-card>
72
+ <ui-card treatment="expressive">Material treatment without added lift</ui-card>
73
+ ```
74
+
75
+ `treatment="standard"` is the default. Expressive treatment follows the theme: a matte theme stays opaque, while Bookish can use a light-catching frame. Card tones change colors without changing corners or adding a stripe. Solid neutral actions use quiet mode-appropriate surface fills with readable text, instead of inverted text-color fills.
76
+
77
+ To add a sample to the preview, search **Choose a component example**, select a result, then choose **Add to preview**. Existing component cards still link to the full reference.
58
78
 
59
79
  ## Use light, dark, or both
60
80
 
@@ -80,6 +100,8 @@ Use the public semantic color properties inside those regions. A floating surfac
80
100
 
81
101
  ## Add your components
82
102
 
103
+ Build your design-system components in HTML Next. Their definitions, description attributes, controllers and HTML examples are the source for the generated documentation and customizer cards. Use Looma’s public semantic properties to make your components respond to the same theme.
104
+
83
105
  Opt into source directories in `looma.docs.json`:
84
106
 
85
107
  ```json
@@ -131,7 +153,9 @@ description: Sam has finished the morning checklist.
131
153
 
132
154
  The example appears in both the reference and the customizer's selection list. Optional `.behavior.js` or `.behavior.ts` companions export a default setup function receiving the example root; return a cleanup function when needed. Add `preview: resizable` to expose the shared card's width control. Framework-specific `.snippet.html` and `.vue` companions provide literal source views.
133
155
 
134
- Discovery reads definitions and descriptions without executing their controllers. New resources under a selected root appear after the local server rebuilds. External components keep their own contracts and supported token hooks; discovery does not invent a Vue adapter or make arbitrary components respond to Looma's tokens.
156
+ Discovery reads definitions and descriptions without executing their controllers. New resources under a selected root appear after the local server rebuilds. External components keep their own contracts and supported token hooks; discovery does not make arbitrary components respond to Looma's tokens.
157
+
158
+ The planned HTML Next-only distribution will use the HTML Next Vite plugin or converter for Vue consumption. Author components and documentation examples in HTML Next; framework conversion belongs in the consuming application. The current package still includes Vue exports while that packaging migration is pending.
135
159
 
136
160
  ## Combine installed catalogs
137
161