@threadlabs/looma 0.35.1 → 0.36.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 (52) hide show
  1. package/components/ui-button/ui-button.html +11 -4
  2. package/components/ui-color-picker/ui-color-picker.html +1 -1
  3. package/components/ui-combobox/ui-combobox.html +1 -1
  4. package/components/ui-curve-editor/ui-curve-editor.html +1 -0
  5. package/components/ui-curve-editor/ui-curve-editor.js +15 -6
  6. package/components/ui-input/ui-input.html +4 -1
  7. package/components/ui-light-editor/ui-light-editor.html +143 -19
  8. package/components/ui-light-editor/ui-light-editor.js +26 -9
  9. package/components/ui-select/ui-select.html +10 -6
  10. package/dist/index.js +1 -1
  11. package/docs/README.md +33 -7
  12. package/docs/card.js +1 -0
  13. package/docs/catalog.json +37 -3
  14. package/docs/customizer-render.mjs +26 -8
  15. package/docs/customizer.js +122 -18
  16. package/docs/fonts.mjs +45 -0
  17. package/docs/index.d.ts +2 -2
  18. package/docs/palette.mjs +67 -0
  19. package/docs/site.mjs +1 -1
  20. package/docs/theme-session.mjs +28 -9
  21. package/docs/theme.mjs +67 -27
  22. package/docs/value-editors.mjs +6 -4
  23. package/package.json +2 -2
  24. package/styles/ui-button.css +11 -4
  25. package/styles/ui-color-picker.css +1 -1
  26. package/styles/ui-combobox.css +2 -2
  27. package/styles/ui-input.css +4 -1
  28. package/styles/ui-light-editor.css +111 -16
  29. package/styles/ui-select.css +10 -6
  30. package/theme-system.css +14 -2
  31. package/tokens.css +10 -0
  32. package/vanilla/UiCurveEditor.d.ts +1 -0
  33. package/vanilla/UiCurveEditor.js +1 -1
  34. package/vanilla/UiLightEditor.d.ts +1 -0
  35. package/vanilla/UiLightEditor.js +2 -2
  36. package/vue/UiButton.vue +4 -2
  37. package/vue/UiColorPicker.vue +1 -1
  38. package/vue/UiCombobox.vue +2 -2
  39. package/vue/UiCurveEditor.d.ts +6 -0
  40. package/vue/UiCurveEditor.vue +2 -0
  41. package/vue/UiInput.vue +4 -1
  42. package/vue/UiLightEditor.d.ts +8 -0
  43. package/vue/UiLightEditor.vue +22 -3
  44. package/vue/UiSelect.vue +1 -1
  45. package/vue/chunks/UiButton.js +1 -1
  46. package/vue/chunks/UiColorPicker.js +1 -1
  47. package/vue/chunks/UiCombobox.js +1 -1
  48. package/vue/chunks/UiCurveEditor.js +5 -3
  49. package/vue/chunks/UiInput.js +1 -1
  50. package/vue/chunks/UiLightEditor.js +16 -6
  51. package/vue/chunks/UiSelect.js +1 -1
  52. package/vue/components.css +41 -14
package/vue/components.css CHANGED
@@ -1489,8 +1489,11 @@ svg,.arc {
1489
1489
  border-color: transparent;
1490
1490
  }
1491
1491
  @media (pointer: coarse) {
1492
- :scope:where([data-hn-ui-button]),:scope[data-ui-button-state~="size=sm"]:where([data-hn-ui-button]) {
1493
- min-block-size: var(--ui-control-min-block-size);
1492
+ :scope:where([data-hn-ui-button]) {
1493
+ min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
1494
+ }
1495
+ :scope[data-ui-button-state~="size=sm"]:where([data-hn-ui-button]) {
1496
+ min-block-size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
1494
1497
  }
1495
1498
  }
1496
1499
  html[data-ui-input-modality="touch"]
@@ -2304,7 +2307,10 @@ input:focus-visible:where([data-hn-ui-checkbox]) {
2304
2307
  :scope[data-ui-input-state~="size=sm"] {
2305
2308
  min-block-size: var(
2306
2309
  --ui-input-min-block-size,
2307
- var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size))
2310
+ var(
2311
+ --_ui-default-input-min-block-size,
2312
+ max(var(--ui-control-size-sm), var(--ui-control-min-block-size))
2313
+ )
2308
2314
  );
2309
2315
  }
2310
2316
  }
@@ -2491,7 +2497,7 @@ input[type="range"] {
2491
2497
  --_size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
2492
2498
  }
2493
2499
  :scope[data-ui-color-picker-state~="size=sm"] {
2494
- --_size: var(--ui-control-min-block-size);
2500
+ --_size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
2495
2501
  --_font: var(--ui-font-size-md);
2496
2502
  }
2497
2503
  }
@@ -3127,7 +3133,7 @@ button:where([data-hn-ui-combobox]) {
3127
3133
  /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
3128
3134
  body-size text: below 16px, iOS zooms the page into the focused field. */
3129
3135
  :scope[data-ui-combobox-state~="size=sm"]:where([data-hn-ui-combobox]) {
3130
- --_row: var(--ui-control-min-block-size);
3136
+ --_row: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
3131
3137
  }
3132
3138
  :scope[data-ui-combobox-state~="size=sm"] input:where([data-hn-ui-combobox]) {
3133
3139
  font-size: inherit;
@@ -3465,7 +3471,7 @@ button:where(:scope, :scope *):where([data-hn-ui-combobox]) {
3465
3471
  /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
3466
3472
  body-size text: below 16px, iOS zooms the page into the focused field. */
3467
3473
  :where(.ui-combobox)[data-ui-combobox-state~="size=sm"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
3468
- --_row: var(--ui-control-min-block-size);
3474
+ --_row: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
3469
3475
  }
3470
3476
  :where(.ui-combobox)[data-ui-combobox-state~="size=sm"]
3471
3477
  input:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-combobox"]))):where([data-hn-ui-combobox]) {
@@ -8651,10 +8657,18 @@ path:where([data-hn-ui-light-editor]) {
8651
8657
  cursor: grab;
8652
8658
  touch-action: none;
8653
8659
  }
8660
+ .source-glyph:where([data-hn-ui-light-editor]) {
8661
+ position: relative;
8662
+ z-index: 1;
8663
+ display: inline-flex !important;
8664
+ color: var(--ui-accent);
8665
+ font-size: var(--ui-font-size-lg);
8666
+ }
8654
8667
  .source:where([data-hn-ui-light-editor])::after {
8655
8668
  content: "";
8656
- inline-size: 1rem;
8657
- block-size: 1rem;
8669
+ position: absolute;
8670
+ inline-size: 2rem;
8671
+ block-size: 2rem;
8658
8672
  border: var(--ui-border-width) solid var(--ui-accent);
8659
8673
  border-radius: 50%;
8660
8674
  background: var(--ui-surface-raised);
@@ -8687,6 +8701,9 @@ path:where([data-hn-ui-light-editor]) {
8687
8701
  color: var(--ui-text-secondary);
8688
8702
  }
8689
8703
  @media (forced-colors: active) {
8704
+ .source-glyph:where([data-hn-ui-light-editor]) {
8705
+ color: CanvasText;
8706
+ }
8690
8707
  .source:where([data-hn-ui-light-editor])::after {
8691
8708
  background: Canvas;
8692
8709
  border-color: CanvasText;
@@ -10161,7 +10178,7 @@ dialog:where([data-hn-ui-search-shell]) {
10161
10178
  min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
10162
10179
  }
10163
10180
  :scope[data-ui-select-state~="size=sm"]:where([data-hn-ui-select]) {
10164
- min-block-size: var(--ui-control-min-block-size);
10181
+ min-block-size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
10165
10182
  font-size: inherit;
10166
10183
  }
10167
10184
  }
@@ -13590,7 +13607,9 @@ html[data-ui-input-modality="touch"]
13590
13607
  line-height: var(--ui-line-height-tight);
13591
13608
  padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-action-inset-md, var(--ui-space-3)) !important;
13592
13609
  background-image: var(--ui-surface-highlight, none);
13593
- box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))), var(--_tone-glow);
13610
+ box-shadow:
13611
+ var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
13612
+ var(--_tone-glow);
13594
13613
  cursor: pointer;
13595
13614
  transition:
13596
13615
  scale var(--ui-motion-press, var(--ui-motion-fast)) var(--ui-motion-ease),
@@ -13723,7 +13742,9 @@ html[data-ui-input-modality="touch"]
13723
13742
  background-color: var(--_tone);
13724
13743
  color: var(--_on-tone);
13725
13744
  background-image: var(--_tone-highlight);
13726
- box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))), var(--_tone-glow);
13745
+ box-shadow:
13746
+ var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
13747
+ var(--_tone-glow);
13727
13748
  }
13728
13749
 
13729
13750
  :is(:scope:where([data-component~="ui-button"])[data-appearance="solid"], :scope:where([data-component~="ui-button"])[data-appearance="danger"]):hover:not(:disabled, [aria-disabled="true"]) {
@@ -13893,8 +13914,11 @@ html[data-ui-input-modality="touch"]
13893
13914
 
13894
13915
  /* The size states outrank :host, so sm is named too, or a small button would stay small. */
13895
13916
  @media (pointer: coarse) {
13896
- :scope:where([data-component~="ui-button"]), :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=sm"] {
13897
- min-block-size: var(--ui-control-min-block-size);
13917
+ :scope:where([data-component~="ui-button"]) {
13918
+ min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
13919
+ }
13920
+ :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=sm"] {
13921
+ min-block-size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
13898
13922
  }
13899
13923
  }
13900
13924
 
@@ -16790,7 +16814,10 @@ html[data-ui-input-modality="touch"]
16790
16814
  }
16791
16815
 
16792
16816
  :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=sm"] {
16793
- min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size)));
16817
+ min-block-size: var(
16818
+ --ui-input-min-block-size,
16819
+ var(--_ui-default-input-min-block-size, max(var(--ui-control-size-sm), var(--ui-control-min-block-size)))
16820
+ );
16794
16821
  }
16795
16822
  }
16796
16823