@threadlabs/looma 0.18.0 → 0.18.1

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 (17) hide show
  1. package/components/ui-button/ui-button.html +1 -1
  2. package/components/ui-icon-button/ui-icon-button.html +10 -0
  3. package/components/ui-menu/ui-menu.js +14 -2
  4. package/components/ui-menu-item/ui-menu-item.html +3 -0
  5. package/components/ui-popover/ui-popover.js +13 -2
  6. package/dist/index.js +1 -1
  7. package/package.json +1 -1
  8. package/styles/ui-button.css +1 -1
  9. package/styles/ui-icon-button.css +10 -0
  10. package/styles/ui-menu-item.css +3 -0
  11. package/vue/UiButton.vue +1 -1
  12. package/vue/UiIconButton.vue +13 -0
  13. package/vue/UiMenuItem.vue +3 -0
  14. package/vue/chunks/UiButton.js +1 -1
  15. package/vue/chunks/UiIconButton.js +1 -1
  16. package/vue/chunks/UiMenuItem.js +1 -1
  17. package/vue/components.css +106 -91
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threadlabs/looma",
3
- "version": "0.18.0",
3
+ "version": "0.18.1",
4
4
  "type": "module",
5
5
  "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
6
6
  "license": "MIT",
package/styles/ui-button.css CHANGED
@@ -250,7 +250,7 @@
250
250
  border-color: transparent;
251
251
  }
252
252
 
253
- :scope[data-ui-button-state~="variant=ghost"]:active:not(:disabled, [aria-disabled="true"]) {
253
+ :scope[data-ui-button-state~="variant=ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
254
254
  background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 16%));
255
255
  border-color: transparent;
256
256
  box-shadow: var(--ui-pressed);
package/styles/ui-icon-button.css CHANGED
@@ -3,6 +3,10 @@
3
3
  syntax: "*";
4
4
  inherits: false;
5
5
  }
6
+ @property --ui-icon-button-active-surface {
7
+ syntax: "*";
8
+ inherits: false;
9
+ }
6
10
  @property --ui-icon-button-border {
7
11
  syntax: "*";
8
12
  inherits: false;
@@ -247,6 +251,12 @@
247
251
  background-color: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
248
252
  }
249
253
 
254
+ :scope[data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
255
+ background-color: var(--ui-icon-button-active-surface, color-mix(in srgb, currentColor 16%, transparent));
256
+ color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
257
+ box-shadow: var(--ui-pressed);
258
+ }
259
+
250
260
  :scope:active:enabled:not([aria-disabled="true"]) {
251
261
  transform: scale(var(--ui-icon-button-active-scale, 0.96));
252
262
  }
package/styles/ui-menu-item.css CHANGED
@@ -46,6 +46,9 @@
46
46
  }
47
47
 
48
48
  .label {
49
+ display: flex;
50
+ align-items: center;
51
+ gap: var(--ui-space-2);
49
52
  flex: 1;
50
53
  min-inline-size: 0;
51
54
  }
package/vue/UiButton.vue CHANGED
@@ -362,7 +362,7 @@ function attribute(value: unknown): any {
362
362
  border-color: transparent;
363
363
  }
364
364
 
365
- [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:active:not(:disabled, [aria-disabled="true"]) {
365
+ [data-component~="ui-button"][data-ui-button-state~="variant=ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
366
366
  background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 16%));
367
367
  border-color: transparent;
368
368
  box-shadow: var(--ui-pressed);
package/vue/UiIconButton.vue CHANGED
@@ -90,6 +90,10 @@ function attribute(value: unknown): any {
90
90
  syntax: "*";
91
91
  inherits: false;
92
92
  }
93
+ @property --ui-icon-button-active-surface {
94
+ syntax: "*";
95
+ inherits: false;
96
+ }
93
97
  @property --ui-icon-button-border {
94
98
  syntax: "*";
95
99
  inherits: false;
@@ -340,6 +344,15 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
340
344
  background-color: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
341
345
  }
342
346
 
347
+ [data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
348
+ background-color: var(
349
+ --ui-icon-button-active-surface,
350
+ color-mix(in srgb, currentColor 16%, transparent)
351
+ );
352
+ color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
353
+ box-shadow: var(--ui-pressed);
354
+ }
355
+
343
356
  [data-component~="ui-icon-button"]:active:enabled:not([aria-disabled="true"]) {
344
357
  transform: scale(var(--ui-icon-button-active-scale, 0.96));
345
358
  }
package/vue/UiMenuItem.vue CHANGED
@@ -185,6 +185,9 @@ function attribute(value: unknown): any {
185
185
  }
186
186
 
187
187
  .label {
188
+ display: flex;
189
+ align-items: center;
190
+ gap: var(--ui-space-2);
188
191
  flex: 1;
189
192
  min-inline-size: 0;
190
193
  }
package/vue/chunks/UiButton.js CHANGED
@@ -139,6 +139,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
139
139
  }), [__props.loading || __props.pending ? (openBlock(), createElementBlock("span", _hoisted_4, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_3));
140
140
  };
141
141
  }
142
- }), [["__scopeId", "data-v-a89a1895"]]);
142
+ }), [["__scopeId", "data-v-720dbd9f"]]);
143
143
  //#endregion
144
144
  export { UiButton_default as t };
package/vue/chunks/UiIconButton.js CHANGED
@@ -95,6 +95,6 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
95
95
  })) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1);
96
96
  };
97
97
  }
98
- }), [["__scopeId", "data-v-ae1ec9d2"]]);
98
+ }), [["__scopeId", "data-v-9828be81"]]);
99
99
  //#endregion
100
100
  export { UiIconButton_default as t };
package/vue/chunks/UiMenuItem.js CHANGED
@@ -144,6 +144,6 @@ var UiMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
144
144
  ], 16, _hoisted_4));
145
145
  };
146
146
  }
147
- }), [["__scopeId", "data-v-6b7f9bed"]]);
147
+ }), [["__scopeId", "data-v-6d5ac848"]]);
148
148
  //#endregion
149
149
  export { UiMenuItem_default as t };