@threadlabs/looma 0.10.11 → 0.10.12

package/vue/chunks/UiListItem.js

@@ -0,0 +1,39 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+//#region .build/vue/UiListItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-current", "data-ui-list-item-state"];
+var _hoisted_2 = { class: "leading" };
+var _hoisted_3 = { class: "content" };
+var _hoisted_4 = { class: "title" };
+var _hoisted_5 = { class: "description" };
+var _hoisted_6 = { class: "trailing" };
+//#endregion
+//#region .build/vue/UiListItem.vue
+var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiListItem",
+	props: {
+		current: {
+			type: Boolean,
+			default: false
+		},
+		variant: { default: "row" }
+	},
+	setup(__props) {
+		const props = __props;
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.variant && `variant variant=${props.variant}`, props.current && "current"].filter(Boolean).join(" "));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", mergeProps({ "data-component": "ui-list-item" }, _ctx.$attrs, {
+				"aria-current": __props.current,
+				"data-ui-list-item-state": hostState.value || void 0
+			}), [
+				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "leading")]),
+				createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default")]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description")])]),
+				createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "trailing")])
+			], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-d61daf46"]]);
+//#endregion
+export { UiListItem_default as t };

package/vue/components.css

@@ -2945,6 +2945,146 @@ svg[data-v-bcedd63e-s] {
   display: none;
 }
 
+/* A list of items (ui-list-item). It owns the spacing between them, so a view never sets it. The
+       explicit list role keeps the list announced as one: some browsers drop it from a list with no
+       markers. */
+[data-component~="ui-list"][data-v-935b1197] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-list-gap, var(--ui-space-1));
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+[data-component~="ui-list"][data-ui-list-state~="layout=grid"][data-v-935b1197] {
+  display: grid;
+  grid-template-columns:
+    repeat(auto-fill, minmax(min(100%, var(--ui-list-min-item-width, 14rem)), 1fr));
+  gap: var(--ui-list-gap, var(--ui-space-3));
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-list"][hidden][data-v-935b1197] {
+  display: none;
+}
+
+/* One entry in a list: something to recognise (leading, usually an icon), its name (the default
+       slot), one line about it (description), and what it offers (trailing, such as a button or a
+       badge). The title and description are one line each and end in an ellipsis, so every item in a
+       list has the same height.
+
+       A link in the title is the whole item: its hit area stretches over the item, so the icon and the
+       padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
+       a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
+       stay their own. */
+[data-component~="ui-list-item"][data-v-d61daf46] {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--ui-list-item-gap, var(--ui-space-3));
+  min-inline-size: 0;
+  min-block-size: var(--ui-control-size, 2.5rem);
+  padding-block: var(--ui-list-item-padding-block, var(--ui-space-2));
+  padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-3));
+  border-radius: var(--ui-radius-md);
+  color: var(--ui-text-primary);
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    border-color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-d61daf46] {
+  padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
+  padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-lg);
+  background: var(--ui-surface-raised);
+}
+[data-component~="ui-list-item"][data-v-d61daf46]:has(.title a[href]:hover) {
+  background: var(--ui-surface-hover);
+}
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-d61daf46]:has(.title
+  a[href]:hover) {
+  border-color: var(--ui-border-strong);
+}
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-d61daf46] {
+  background: var(--ui-surface-hover);
+}
+[data-component~="ui-list-item"][data-v-d61daf46]:has(.title a[href]:focus-visible) {
+  box-shadow: 0 0 0 2px var(--ui-focus-ring);
+}
+.leading[data-v-d61daf46],
+.trailing[data-v-d61daf46] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--ui-space-2);
+}
+.leading[data-v-d61daf46] {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-list-item-icon-size, var(--ui-font-size-lg));
+}
+
+/* Trailing controls take their own clicks, above the title link's stretched hit area. */
+.trailing[data-v-d61daf46] {
+  position: relative;
+  z-index: 1;
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-sm);
+}
+.content[data-v-d61daf46] {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--ui-space-0-5, 2px);
+  min-inline-size: 0;
+}
+.title[data-v-d61daf46],
+.description[data-v-d61daf46] {
+  display: block;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.title[data-v-d61daf46] {
+  font-size: var(--ui-font-size-md);
+  font-weight: var(--ui-font-medium);
+  line-height: var(--ui-line-height-tight);
+}
+.description[data-v-d61daf46] {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height-tight);
+}
+.title > a[data-v-d61daf46-s] {
+  color: inherit;
+  text-decoration: none;
+}
+.title > a[data-v-d61daf46-s]:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+.title > a[href][data-v-d61daf46-s]::after {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  content: "";
+}
+
+/* An unused region takes no space. */
+.leading[data-v-d61daf46]:empty,
+.description[data-v-d61daf46]:empty,
+.trailing[data-v-d61daf46]:empty {
+  display: none;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-list-item"][hidden][data-v-d61daf46] {
+  display: none;
+}
+
 /* Compact sets the part tokens its items read, so nothing has to rescale a global. */
 [data-component~="ui-menu"][data-ui-menu-state~="density=compact"][data-v-ad1dce95] {
   --ui-menu-item-padding-block: var(--ui-space-1);

package/vue/index.d.ts

@@ -25,6 +25,8 @@ export { default as Grid } from "./UiGrid.js";
 export { default as Icon } from "./UiIcon.js";
 export { default as IconButton } from "./UiIconButton.js";
 export { default as Input } from "./UiInput.js";
+export { default as List } from "./UiList.js";
+export { default as ListItem } from "./UiListItem.js";
 export { default as Menu } from "./UiMenu.js";
 export { default as MenuItem } from "./UiMenuItem.js";
 export { default as Popover } from "./UiPopover.js";

package/vue/index.js

@@ -26,6 +26,8 @@ import { t as UiFormField_default } from "./chunks/UiFormField.js";
 import { t as UiGrid_default } from "./chunks/UiGrid.js";
 import { t as UiIconButton_default } from "./chunks/UiIconButton.js";
 import { t as UiInput_default } from "./chunks/UiInput.js";
+import { t as UiList_default } from "./chunks/UiList.js";
+import { t as UiListItem_default } from "./chunks/UiListItem.js";
 import { t as UiMenu_default } from "./chunks/UiMenu.js";
 import { t as UiMenuItem_default } from "./chunks/UiMenuItem.js";
 import { t as UiPopover_default } from "./chunks/UiPopover.js";
@@ -48,4 +50,4 @@ import { t as UiTopBar_default } from "./chunks/UiTopBar.js";
 import { t as UiTree_default } from "./chunks/UiTree.js";
 import { t as UiTreeItem_default } from "./chunks/UiTreeItem.js";
 import { trackInputModality } from "@threadlabs/looma/components/shared/input-modality.js";
-export { UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiButton_default as Button, UiCallout_default as Callout, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiInput_default as Input, UiMenu_default as Menu, UiMenuItem_default as MenuItem, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiStack_default as Stack, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTabs_default as Tabs, UiTextarea_default as Textarea, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };
+export { UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiButton_default as Button, UiCallout_default as Callout, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorTableContextMenu_default as EditorTableContextMenu, UiEditorTableOverlay_default as EditorTableOverlay, UiEditorTableToolbar_default as EditorTableToolbar, UiEditorToolbar_default as EditorToolbar, UiFloatingActionButton_default as FloatingActionButton, UiFormField_default as FormField, UiGrid_default as Grid, UiIcon_default as Icon, UiIconButton_default as IconButton, UiInput_default as Input, UiList_default as List, UiListItem_default as ListItem, UiMenu_default as Menu, UiMenuItem_default as MenuItem, UiPopover_default as Popover, UiRadio_default as Radio, UiRadioGroup_default as RadioGroup, UiReel_default as Reel, UiScrollArea_default as ScrollArea, UiSearchResultRow_default as SearchResultRow, UiSearchShell_default as SearchShell, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiStack_default as Stack, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTabs_default as Tabs, UiTextarea_default as Textarea, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };