@threadlabs/looma 0.11.0 → 0.11.2

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 (71) hide show
  1. package/components/ui-action-bar/ui-action-bar.html +72 -0
  2. package/components/ui-input/ui-input.html +4 -4
  3. package/components/ui-input-group/ui-input-group.html +86 -0
  4. package/components/ui-list/ui-list.html +12 -0
  5. package/components/ui-list-item/ui-list-item.html +4 -4
  6. package/dist/index.js +1 -1
  7. package/package.json +1 -1
  8. package/styles/ui-action-bar.css +77 -0
  9. package/styles/ui-input-group.css +87 -0
  10. package/styles/ui-input.css +4 -4
  11. package/styles/ui-list-item.css +4 -4
  12. package/styles/ui-list.css +11 -0
  13. package/vanilla/UiActionBar.d.ts +13 -0
  14. package/vanilla/UiActionBar.js +59 -0
  15. package/vanilla/UiInputGroup.d.ts +14 -0
  16. package/vanilla/UiInputGroup.js +53 -0
  17. package/vanilla/UiList.d.ts +1 -0
  18. package/vanilla/UiList.js +3 -1
  19. package/vanilla/index.js +2 -0
  20. package/vue/UiActionBar.d.ts +19 -0
  21. package/vue/UiActionBar.js +2 -0
  22. package/vue/UiActionBar.vue +77 -0
  23. package/vue/UiCombobox.d.ts +1 -1
  24. package/vue/UiInput.vue +7 -4
  25. package/vue/UiInputGroup.d.ts +22 -0
  26. package/vue/UiInputGroup.js +2 -0
  27. package/vue/UiInputGroup.vue +113 -0
  28. package/vue/UiList.d.ts +2 -0
  29. package/vue/UiList.vue +12 -0
  30. package/vue/UiListItem.vue +10 -4
  31. package/vue/UiRadioGroup.d.ts +1 -1
  32. package/vue/chunks/UiActionBar.js +24 -0
  33. package/vue/chunks/UiAffordanceScope.js +1 -1
  34. package/vue/chunks/UiAvatar.js +1 -1
  35. package/vue/chunks/UiAvatarGroup.js +1 -1
  36. package/vue/chunks/UiCheckbox.js +1 -1
  37. package/vue/chunks/UiCombobox.js +1 -1
  38. package/vue/chunks/UiContextMenu.js +1 -1
  39. package/vue/chunks/UiDialog.js +1 -1
  40. package/vue/chunks/UiDisclosure.js +1 -1
  41. package/vue/chunks/UiEditable.js +1 -1
  42. package/vue/chunks/UiEditorInsertTableGrid.js +1 -1
  43. package/vue/chunks/UiEditorMentionMenu.js +1 -1
  44. package/vue/chunks/UiEditorSlashMenu.js +1 -1
  45. package/vue/chunks/UiEditorTableContextMenu.js +1 -1
  46. package/vue/chunks/UiEditorTableOverlay.js +1 -1
  47. package/vue/chunks/UiEditorTableToolbar.js +1 -1
  48. package/vue/chunks/UiFormField.js +1 -1
  49. package/vue/chunks/UiIcon.js +1 -1
  50. package/vue/chunks/UiIconButton.js +1 -1
  51. package/vue/chunks/UiInput.js +2 -2
  52. package/vue/chunks/UiInputGroup.js +31 -0
  53. package/vue/chunks/UiList.js +6 -3
  54. package/vue/chunks/UiListItem.js +1 -1
  55. package/vue/chunks/UiMenu.js +1 -1
  56. package/vue/chunks/UiPopover.js +1 -1
  57. package/vue/chunks/UiRadio.js +1 -1
  58. package/vue/chunks/UiRadioGroup.js +1 -1
  59. package/vue/chunks/UiSearchShell.js +1 -1
  60. package/vue/chunks/UiSelect.js +1 -1
  61. package/vue/chunks/UiSidebar.js +1 -1
  62. package/vue/chunks/UiSwitch.js +1 -1
  63. package/vue/chunks/UiTabs.js +1 -1
  64. package/vue/chunks/UiTextarea.js +1 -1
  65. package/vue/chunks/UiToastRegion.js +1 -1
  66. package/vue/chunks/UiTooltip.js +1 -1
  67. package/vue/chunks/UiTree.js +1 -1
  68. package/vue/chunks/UiTreeItem.js +1 -1
  69. package/vue/components.css +187 -43
  70. package/vue/index.d.ts +2 -0
  71. package/vue/index.js +3 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threadlabs/looma",
3
- "version": "0.11.0",
3
+ "version": "0.11.2",
4
4
  "type": "module",
5
5
  "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
6
6
  "license": "MIT",
@@ -0,0 +1,77 @@
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
+ @scope ([data-component~="ui-action-bar"]) to ([data-component], [data-slotted]) {
3
+ /* The action row of a form or dialog. Tertiary actions (Back, Cancel, Discard) sit at the start
4
+ edge; secondary actions (Save as draft, Preview) sit just before the primary one, which ends the
5
+ row. The bar arranges its actions and leaves their look to them. */
6
+ :scope {
7
+ --_gap: var(--ui-space-2);
8
+ display: block;
9
+ /* A size container sizes itself from its container, never its content. */
10
+ container-type: inline-size;
11
+ inline-size: 100%;
12
+ min-inline-size: 0;
13
+ }
14
+
15
+ .bar,
16
+ .tertiary,
17
+ .secondary,
18
+ .primary {
19
+ display: flex;
20
+ flex-wrap: wrap;
21
+ align-items: center;
22
+ gap: var(--ui-action-bar-gap, var(--_gap));
23
+ }
24
+
25
+ /* The tertiary group takes the spare space, pushing the rest to the end edge; without it, the
26
+ rest still ends the row. */
27
+ .bar {
28
+ justify-content: flex-end;
29
+ }
30
+
31
+ .tertiary {
32
+ flex: 1 1 auto;
33
+ }
34
+
35
+ .tertiary:empty,
36
+ .secondary:empty,
37
+ .primary:empty {
38
+ display: none;
39
+ }
40
+
41
+ /* A narrow container stacks the actions full width, primary on top: the row turned on its end,
42
+ read from its end edge. Container queries cannot read custom properties, so the width is fixed. */
43
+ @container (inline-size < 24rem) {
44
+ .bar,
45
+ .tertiary,
46
+ .secondary,
47
+ .primary {
48
+ flex-direction: column-reverse;
49
+ flex-wrap: nowrap;
50
+ align-items: stretch;
51
+ }
52
+
53
+ .tertiary {
54
+ flex: none;
55
+ }
56
+ }
57
+
58
+ /* A component that sets its display still honours the hidden attribute on its root. */
59
+ :scope[hidden] {
60
+ display: none;
61
+ }
62
+ }
63
+ @scope ([data-component~="ui-action-bar"]) to ([data-component]) {
64
+ /* The action row of a form or dialog. Tertiary actions (Back, Cancel, Discard) sit at the start
65
+ edge; secondary actions (Save as draft, Preview) sit just before the primary one, which ends the
66
+ row. The bar arranges its actions and leaves their look to them. */
67
+
68
+ /* The tertiary group takes the spare space, pushing the rest to the end edge; without it, the
69
+ rest still ends the row. */
70
+
71
+ /* A narrow container stacks the actions full width, primary on top: the row turned on its end,
72
+ read from its end edge. Container queries cannot read custom properties, so the width is fixed. */
73
+ @container (inline-size < 24rem) {
74
+ }
75
+
76
+ /* A component that sets its display still honours the hidden attribute on its root. */
77
+ }
@@ -0,0 +1,87 @@
1
+ /* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
2
+ @scope ([data-component~="ui-input-group"]) to ([data-component], [data-slotted]) {
3
+ /* An input with fixed text before or after it, such as a domain after a site's name
4
+ ("acme" + ".example.com") or slashes around a path. The group draws the field's border and
5
+ focus ring around the input and its affixes together; the input inside drops its own through
6
+ its custom properties, so it is still the one ui-input, with its form behaviour intact. The
7
+ affixes are plain text beside the input, so name the input with a label that says what the
8
+ whole value is. */
9
+ :scope {
10
+ --ui-input-border: transparent;
11
+ --ui-input-border-hover: transparent;
12
+ --ui-input-focus-border: transparent;
13
+ --ui-input-shadow: none;
14
+ --ui-input-focus-shadow: none;
15
+ --ui-input-radius: 0;
16
+ --ui-input-surface: transparent;
17
+
18
+ display: flex;
19
+ align-items: stretch;
20
+ box-sizing: border-box;
21
+ inline-size: 100%;
22
+ min-inline-size: 0;
23
+ min-block-size: var(--ui-control-size-md);
24
+ border: 1px solid var(--ui-border-strong);
25
+ border-radius: var(--ui-radius-md);
26
+ background: var(--ui-surface-elevated);
27
+ box-shadow: var(--ui-control-inset);
28
+ overflow: hidden;
29
+ transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
30
+ }
31
+
32
+ :scope:hover:not(:focus-within) {
33
+ border-color: var(--ui-text-secondary);
34
+ }
35
+
36
+ :scope:focus-within {
37
+ border-color: var(--ui-accent-solid);
38
+ box-shadow:
39
+ var(--ui-control-inset),
40
+ var(--ui-control-focus-halo-shadow);
41
+ }
42
+
43
+ :scope:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
44
+ border-color: var(--ui-danger-solid);
45
+ }
46
+
47
+ :scope[data-ui-input-group-state~="disabled"] {
48
+ background: var(--ui-surface-muted);
49
+ box-shadow: none;
50
+ }
51
+
52
+ .field {
53
+ display: flex;
54
+ flex: 1;
55
+ min-inline-size: 0;
56
+ }
57
+
58
+ .affix {
59
+ display: inline-flex;
60
+ flex: none;
61
+ align-items: center;
62
+ padding-inline: var(--ui-space-2);
63
+ color: var(--ui-text-secondary);
64
+ font-family: var(--ui-font-family-mono);
65
+ font-size: var(--ui-font-size-sm);
66
+ white-space: nowrap;
67
+ }
68
+
69
+ .affix:empty {
70
+ display: none;
71
+ }
72
+
73
+ /* A component that sets its display still honours the hidden attribute on its root. */
74
+ :scope[hidden] {
75
+ display: none;
76
+ }
77
+ }
78
+ @scope ([data-component~="ui-input-group"]) to ([data-component]) {
79
+ /* An input with fixed text before or after it, such as a domain after a site's name
80
+ ("acme" + ".example.com") or slashes around a path. The group draws the field's border and
81
+ focus ring around the input and its affixes together; the input inside drops its own through
82
+ its custom properties, so it is still the one ui-input, with its form behaviour intact. The
83
+ affixes are plain text beside the input, so name the input with a label that says what the
84
+ whole value is. */
85
+
86
+ /* A component that sets its display still honours the hidden attribute on its root. */
87
+ }
@@ -9,9 +9,9 @@
9
9
  margin: 0;
10
10
  padding: var(--ui-space-2) var(--ui-space-3);
11
11
  appearance: none;
12
- border: 1px solid var(--ui-control-border, var(--ui-border-strong));
12
+ border: 1px solid var(--ui-input-border, var(--ui-control-border, var(--ui-border-strong)));
13
13
  border-radius: var(--ui-input-radius, var(--ui-radius-md));
14
- background: var(--ui-control-surface, var(--ui-surface-elevated));
14
+ background: var(--ui-input-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
15
15
  color: var(--ui-text-primary);
16
16
  font: inherit;
17
17
  line-height: var(--ui-line-height-md);
@@ -34,11 +34,11 @@
34
34
  }
35
35
 
36
36
  :scope:hover:not(:focus):not(:disabled) {
37
- border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
37
+ border-color: var(--ui-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)));
38
38
  }
39
39
 
40
40
  :scope:focus-visible {
41
- border-color: var(--ui-control-focus, var(--ui-accent-solid));
41
+ border-color: var(--ui-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
42
42
  outline: none;
43
43
  box-shadow: var(--ui-input-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow));
44
44
  }
@@ -16,9 +16,9 @@
16
16
  align-items: center;
17
17
  gap: var(--ui-list-item-gap, var(--ui-space-3));
18
18
  min-inline-size: 0;
19
- min-block-size: var(--ui-control-size, 2.5rem);
20
- padding-block: var(--ui-list-item-padding-block, var(--ui-space-2));
21
- padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-3));
19
+ min-block-size: var(--_ui-list-item-min-size, var(--ui-control-size, 2.5rem));
20
+ padding-block: var(--ui-list-item-padding-block, var(--_ui-list-item-padding-block, var(--ui-space-2)));
21
+ padding-inline: var(--ui-list-item-padding-inline, var(--_ui-list-item-padding-inline, var(--ui-space-3)));
22
22
  border-radius: var(--ui-radius-md);
23
23
  color: var(--ui-text-primary);
24
24
  transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);
@@ -88,7 +88,7 @@
88
88
 
89
89
  .title {
90
90
  font-size: var(--ui-font-size-md);
91
- font-weight: var(--ui-font-medium);
91
+ font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
92
92
  line-height: var(--ui-line-height-tight);
93
93
  }
94
94
 
@@ -13,6 +13,15 @@
13
13
  list-style: none;
14
14
  }
15
15
 
16
+ /* Compact passes its size to the items through private properties, which cross into each item. */
17
+ :scope[data-ui-list-state~="density=compact"] {
18
+ --_ui-list-item-min-size: 0;
19
+ --_ui-list-item-padding-block: 0;
20
+ --_ui-list-item-padding-inline: 0;
21
+ --_ui-list-item-title-weight: var(--ui-font-normal);
22
+ gap: var(--ui-list-gap, var(--ui-space-2));
23
+ }
24
+
16
25
  :scope[data-ui-list-state~="layout=grid"] {
17
26
  display: grid;
18
27
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ui-list-min-item-width, 14rem)), 1fr));
@@ -29,5 +38,7 @@
29
38
  explicit list role keeps the list announced as one: some browsers drop it from a list with no
30
39
  markers. */
31
40
 
41
+ /* Compact passes its size to the items through private properties, which cross into each item. */
42
+
32
43
  /* A component that sets its display still honours the hidden attribute on its root. */
33
44
  }
@@ -0,0 +1,13 @@
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
+ export interface UiActionBarEventMap {
3
+ }
4
+ export interface UiActionBarElement extends HTMLDivElement {
5
+ addEventListener<K extends keyof UiActionBarEventMap>(type: K, listener: (this: UiActionBarElement, event: UiActionBarEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
6
+ removeEventListener<K extends keyof UiActionBarEventMap>(type: K, listener: (this: UiActionBarElement, event: UiActionBarEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
7
+ }
8
+ export interface UiActionBarProps {
9
+ attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
10
+ children?: readonly (string | Node)[];
11
+ slots?: Readonly<Record<string, readonly (string | Node)[]>>;
12
+ }
13
+ export declare function createUiActionBar(props?: UiActionBarProps): UiActionBarElement;
@@ -0,0 +1,59 @@
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
+ import "../styles/ui-action-bar.css";
3
+
4
+ export function createUiActionBar(options = {}) {
5
+ const { attributes = {}, children = [], slots = {}, as } = options;
6
+ const projected = [];
7
+ const element = document.createElement("div");
8
+ for (const [name, value] of Object.entries(attributes)) {
9
+ if (value === null || value === undefined || value === false) continue;
10
+ element.setAttribute(name, value === true ? "" : String(value));
11
+ }
12
+ element.setAttribute("data-component", "ui-action-bar");
13
+ const element0 = document.createElement("div");
14
+ element0.setAttribute("class", "bar");
15
+ const element1 = document.createElement("span");
16
+ element1.setAttribute("class", "tertiary");
17
+ if (slots["tertiary"] ?? [].length > 0) {
18
+ for (const child of slots["tertiary"] ?? []) {
19
+ const node = typeof child === "string" ? document.createTextNode(child) : child;
20
+ projected.push([node, "tertiary"]);
21
+ element1.append(node);
22
+ }
23
+ } else {
24
+ }
25
+ element0.append(element1);
26
+ const element2 = document.createElement("span");
27
+ element2.setAttribute("class", "secondary");
28
+ if (slots["secondary"] ?? [].length > 0) {
29
+ for (const child of slots["secondary"] ?? []) {
30
+ const node = typeof child === "string" ? document.createTextNode(child) : child;
31
+ projected.push([node, "secondary"]);
32
+ element2.append(node);
33
+ }
34
+ } else {
35
+ }
36
+ if (children.length > 0) {
37
+ for (const child of children) {
38
+ const node = typeof child === "string" ? document.createTextNode(child) : child;
39
+ projected.push([node, ""]);
40
+ element2.append(node);
41
+ }
42
+ } else {
43
+ }
44
+ element0.append(element2);
45
+ const element3 = document.createElement("span");
46
+ element3.setAttribute("class", "primary");
47
+ if (slots["primary"] ?? [].length > 0) {
48
+ for (const child of slots["primary"] ?? []) {
49
+ const node = typeof child === "string" ? document.createTextNode(child) : child;
50
+ projected.push([node, "primary"]);
51
+ element3.append(node);
52
+ }
53
+ } else {
54
+ }
55
+ element0.append(element3);
56
+ element.append(element0);
57
+ return element;
58
+ }
59
+
@@ -0,0 +1,14 @@
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
+ export interface UiInputGroupEventMap {
3
+ }
4
+ export interface UiInputGroupElement extends HTMLDivElement {
5
+ addEventListener<K extends keyof UiInputGroupEventMap>(type: K, listener: (this: UiInputGroupElement, event: UiInputGroupEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
6
+ removeEventListener<K extends keyof UiInputGroupEventMap>(type: K, listener: (this: UiInputGroupElement, event: UiInputGroupEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
7
+ }
8
+ export interface UiInputGroupProps {
9
+ disabled?: boolean | null;
10
+ attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
11
+ children?: readonly (string | Node)[];
12
+ slots?: Readonly<Record<string, readonly (string | Node)[]>>;
13
+ }
14
+ export declare function createUiInputGroup(props?: UiInputGroupProps): UiInputGroupElement;
@@ -0,0 +1,53 @@
1
+ // Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
2
+ import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
3
+ import "../styles/ui-input-group.css";
4
+
5
+ export function createUiInputGroup(options = {}) {
6
+ const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
7
+ const projected = [];
8
+ const prop0 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
9
+ const element = document.createElement("div");
10
+ for (const [name, value] of Object.entries(attributes)) {
11
+ if (value === null || value === undefined || value === false) continue;
12
+ element.setAttribute(name, value === true ? "" : String(value));
13
+ }
14
+ element.setAttribute("data-component", "ui-input-group");
15
+ const element0 = document.createElement("span");
16
+ element0.setAttribute("class", "affix");
17
+ if (slots["prefix"] ?? [].length > 0) {
18
+ for (const child of slots["prefix"] ?? []) {
19
+ const node = typeof child === "string" ? document.createTextNode(child) : child;
20
+ projected.push([node, "prefix"]);
21
+ element0.append(node);
22
+ }
23
+ } else {
24
+ }
25
+ element.append(element0);
26
+ const element1 = document.createElement("span");
27
+ element1.setAttribute("class", "field");
28
+ if (children.length > 0) {
29
+ for (const child of children) {
30
+ const node = typeof child === "string" ? document.createTextNode(child) : child;
31
+ projected.push([node, ""]);
32
+ element1.append(node);
33
+ }
34
+ } else {
35
+ }
36
+ element.append(element1);
37
+ const element2 = document.createElement("span");
38
+ element2.setAttribute("class", "affix");
39
+ if (slots["suffix"] ?? [].length > 0) {
40
+ for (const child of slots["suffix"] ?? []) {
41
+ const node = typeof child === "string" ? document.createTextNode(child) : child;
42
+ projected.push([node, "suffix"]);
43
+ element2.append(node);
44
+ }
45
+ } else {
46
+ }
47
+ element.append(element2);
48
+ manageGeneratedProps(element, [
49
+ { name: "disabled", attribute: "data-disabled", value: componentProps["disabled"], default: false, type: "boolean", required: false },
50
+ ]);
51
+ return element;
52
+ }
53
+
@@ -6,6 +6,7 @@ export interface UiListElement extends HTMLUListElement {
6
6
  removeEventListener<K extends keyof UiListEventMap>(type: K, listener: (this: UiListElement, event: UiListEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
7
7
  }
8
8
  export interface UiListProps {
9
+ density?: "comfortable" | "compact" | null;
9
10
  layout?: "rows" | "grid" | null;
10
11
  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
11
12
  children?: readonly (string | Node)[];
package/vanilla/UiList.js CHANGED
@@ -5,7 +5,8 @@ import "../styles/ui-list.css";
5
5
  export function createUiList(options = {}) {
6
6
  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
7
7
  const projected = [];
8
- const prop0 = componentProps["layout"] === undefined ? "rows" : componentProps["layout"];
8
+ const prop0 = componentProps["density"] === undefined ? "comfortable" : componentProps["density"];
9
+ const prop1 = componentProps["layout"] === undefined ? "rows" : componentProps["layout"];
9
10
  const element = document.createElement("ul");
10
11
  for (const [name, value] of Object.entries(attributes)) {
11
12
  if (value === null || value === undefined || value === false) continue;
@@ -22,6 +23,7 @@ export function createUiList(options = {}) {
22
23
  } else {
23
24
  }
24
25
  manageGeneratedProps(element, [
26
+ { name: "density", attribute: "data-density", value: componentProps["density"], default: "comfortable", type: ["comfortable","compact"], required: false },
25
27
  { name: "layout", attribute: "data-layout", value: componentProps["layout"], default: "rows", type: ["rows","grid"], required: false },
26
28
  ]);
27
29
  return element;
package/vanilla/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ export * from "./UiActionBar.js";
1
2
  export * from "./UiAffordanceScope.js";
2
3
  export * from "./UiAvatar.js";
3
4
  export * from "./UiAvatarGroup.js";
@@ -31,6 +32,7 @@ export * from "./UiGrid.js";
31
32
  export * from "./UiIcon.js";
32
33
  export * from "./UiIconButton.js";
33
34
  export * from "./UiInput.js";
35
+ export * from "./UiInputGroup.js";
34
36
  export * from "./UiList.js";
35
37
  export * from "./UiListItem.js";
36
38
  export * from "./UiMenu.js";
@@ -0,0 +1,19 @@
1
+ declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
2
+ type __VLS_Slots = {} & {
3
+ tertiary?: (props: typeof __VLS_1) => any;
4
+ } & {
5
+ secondary?: (props: typeof __VLS_3) => any;
6
+ } & {
7
+ default?: (props: typeof __VLS_5) => any;
8
+ } & {
9
+ primary?: (props: typeof __VLS_7) => any;
10
+ };
11
+ declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
12
+ declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
13
+ declare const _default: typeof __VLS_export;
14
+ export default _default;
15
+ type __VLS_WithSlots<T, S> = T & {
16
+ new (): {
17
+ $slots: S;
18
+ };
19
+ };
@@ -0,0 +1,2 @@
1
+ import { t as UiActionBar_default } from "./chunks/UiActionBar.js";
2
+ export { UiActionBar_default as default };
@@ -0,0 +1,77 @@
1
+ <!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
2
+ <script setup lang="ts">
3
+ defineOptions({ inheritAttrs: false })
4
+ </script>
5
+
6
+ <template>
7
+ <div data-component="ui-action-bar" v-bind="$attrs">
8
+ <div class="bar">
9
+ <span class="tertiary"><slot name="tertiary" /></span>
10
+ <span class="secondary"><slot name="secondary" />
11
+ <slot /></span>
12
+ <span class="primary"><slot name="primary" /></span>
13
+ </div>
14
+ </div>
15
+ </template>
16
+
17
+ <style scoped>
18
+ /* The action row of a form or dialog. Tertiary actions (Back, Cancel, Discard) sit at the start
19
+ edge; secondary actions (Save as draft, Preview) sit just before the primary one, which ends the
20
+ row. The bar arranges its actions and leaves their look to them. */
21
+ [data-component~="ui-action-bar"] {
22
+ --_gap: var(--ui-space-2);
23
+ display: block;
24
+ /* A size container sizes itself from its container, never its content. */
25
+ container-type: inline-size;
26
+ inline-size: 100%;
27
+ min-inline-size: 0;
28
+ }
29
+
30
+ .bar,
31
+ .tertiary,
32
+ .secondary,
33
+ .primary {
34
+ display: flex;
35
+ flex-wrap: wrap;
36
+ align-items: center;
37
+ gap: var(--ui-action-bar-gap, var(--_gap));
38
+ }
39
+
40
+ /* The tertiary group takes the spare space, pushing the rest to the end edge; without it, the
41
+ rest still ends the row. */
42
+ .bar {
43
+ justify-content: flex-end;
44
+ }
45
+
46
+ .tertiary {
47
+ flex: 1 1 auto;
48
+ }
49
+
50
+ .tertiary:empty,
51
+ .secondary:empty,
52
+ .primary:empty {
53
+ display: none;
54
+ }
55
+
56
+ /* A narrow container stacks the actions full width, primary on top: the row turned on its end,
57
+ read from its end edge. Container queries cannot read custom properties, so the width is fixed. */
58
+ @container (inline-size < 24rem) {
59
+ .bar,
60
+ .tertiary,
61
+ .secondary,
62
+ .primary {
63
+ flex-direction: column-reverse;
64
+ flex-wrap: nowrap;
65
+ align-items: stretch;
66
+ }
67
+
68
+ .tertiary {
69
+ flex: none;
70
+ }
71
+ }
72
+
73
+ /* A component that sets its display still honours the hidden attribute on its root. */
74
+ [data-component~="ui-action-bar"][hidden] {
75
+ display: none;
76
+ }
77
+ </style>
@@ -234,8 +234,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
234
234
  readonly trigger: "keyboard" | "pointer" | "programmatic";
235
235
  }) => any) | undefined;
236
236
  }>, {
237
- name: string;
238
237
  label: string;
238
+ name: string;
239
239
  disabled: boolean;
240
240
  size: "sm" | "md";
241
241
  required: boolean;
package/vue/UiInput.vue CHANGED
@@ -64,9 +64,9 @@ useComponentHost(controllerModule.default, {
64
64
  margin: 0;
65
65
  padding: var(--ui-space-2) var(--ui-space-3);
66
66
  appearance: none;
67
- border: 1px solid var(--ui-control-border, var(--ui-border-strong));
67
+ border: 1px solid var(--ui-input-border, var(--ui-control-border, var(--ui-border-strong)));
68
68
  border-radius: var(--ui-input-radius, var(--ui-radius-md));
69
- background: var(--ui-control-surface, var(--ui-surface-elevated));
69
+ background: var(--ui-input-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
70
70
  color: var(--ui-text-primary);
71
71
  font: inherit;
72
72
  line-height: var(--ui-line-height-md);
@@ -89,11 +89,14 @@ useComponentHost(controllerModule.default, {
89
89
  }
90
90
 
91
91
  [data-component~="ui-input"]:hover:not(:focus):not(:disabled) {
92
- border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
92
+ border-color: var(
93
+ --ui-input-border-hover,
94
+ var(--ui-control-border-hover, var(--ui-text-secondary))
95
+ );
93
96
  }
94
97
 
95
98
  [data-component~="ui-input"]:focus-visible {
96
- border-color: var(--ui-control-focus, var(--ui-accent-solid));
99
+ border-color: var(--ui-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
97
100
  outline: none;
98
101
  box-shadow: var(
99
102
  --ui-input-focus-shadow,
@@ -0,0 +1,22 @@
1
+ type __VLS_Props = {
2
+ disabled?: boolean;
3
+ };
4
+ declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
5
+ type __VLS_Slots = {} & {
6
+ prefix?: (props: typeof __VLS_1) => any;
7
+ } & {
8
+ default?: (props: typeof __VLS_3) => any;
9
+ } & {
10
+ suffix?: (props: typeof __VLS_5) => any;
11
+ };
12
+ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
13
+ disabled: boolean;
14
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
15
+ declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
16
+ declare const _default: typeof __VLS_export;
17
+ export default _default;
18
+ type __VLS_WithSlots<T, S> = T & {
19
+ new (): {
20
+ $slots: S;
21
+ };
22
+ };
@@ -0,0 +1,2 @@
1
+ import { t as UiInputGroup_default } from "./chunks/UiInputGroup.js";
2
+ export { UiInputGroup_default as default };