@threadlabs/looma 0.12.3 → 0.12.5

package/vue/chunks/UiIcon.js

@@ -25,6 +25,12 @@ var _hoisted_4 = [
 	"height",
 	"rx"
 ];
+var _hoisted_5 = [
+	"x1",
+	"x2",
+	"y1",
+	"y2"
+];
 //#endregion
 //#region .build/vue/UiIcon.vue
 var UiIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -68,11 +74,18 @@ var UiIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 						width: shape.width,
 						height: shape.height,
 						rx: shape.rx
-					}, null, 8, _hoisted_4)) : createCommentVNode("v-if", true)
+					}, null, 8, _hoisted_4)) : createCommentVNode("v-if", true),
+					shape.tag === "line" ? (openBlock(), createElementBlock("line", {
+						key: 3,
+						x1: shape.x1,
+						x2: shape.x2,
+						y1: shape.y1,
+						y2: shape.y2
+					}, null, 8, _hoisted_5)) : createCommentVNode("v-if", true)
 				]);
 			}), 128))]))], 16);
 		};
 	}
-}), [["__scopeId", "data-v-3d48bd86"]]);
+}), [["__scopeId", "data-v-6c3d73c1"]]);
 //#endregion
 export { UiIcon_default as t };

package/vue/chunks/UiNavItem.js

@@ -0,0 +1,81 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { createBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, withCtx } from "vue";
+//#region .build/vue/UiNavItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "leading" };
+var _hoisted_2 = { class: "content" };
+var _hoisted_3 = { class: "label" };
+var _hoisted_4 = { class: "description" };
+//#endregion
+//#region .build/vue/UiNavItem.vue
+var UiNavItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiNavItem",
+	props: {
+		as: { default: "button" },
+		current: {
+			type: [Boolean, String],
+			default: false
+		},
+		href: {},
+		rel: {},
+		target: {}
+	},
+	setup(__props) {
+		function text(value) {
+			if (Array.isArray(value)) return value.map(text).join(" ");
+			return value === null || value === void 0 || typeof value === "object" ? "" : String(value);
+		}
+		function attribute(value) {
+			if (value === null || value === void 0 || value === false || typeof value === "object" && !Array.isArray(value)) return void 0;
+			return value === true ? "" : text(value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({ "data-component": "ui-nav-item" }, _ctx.$attrs, {
+				type: attribute({
+					true: "button",
+					false: null
+				}[`${!__props.href}`]),
+				href: __props.href,
+				target: __props.target,
+				rel: __props.rel,
+				"aria-current": typeof {
+					true: "page",
+					false: null,
+					page: "page",
+					step: "step",
+					location: "location"
+				}[`${__props.current}`] === "boolean" ? String({
+					true: "page",
+					false: null,
+					page: "page",
+					step: "step",
+					location: "location"
+				}[`${__props.current}`]) : attribute({
+					true: "page",
+					false: null,
+					page: "page",
+					step: "step",
+					location: "location"
+				}[`${__props.current}`])
+			}), {
+				default: withCtx(() => [
+					_cache[0] || (_cache[0] = createElementVNode("span", {
+						class: "indicator",
+						"aria-hidden": "true"
+					}, null, -1)),
+					createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "leading", {}, void 0, true)]),
+					createElementVNode("span", _hoisted_2, [createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "description", {}, void 0, true)])])
+				]),
+				_: 3
+			}, 16, [
+				"type",
+				"href",
+				"target",
+				"rel",
+				"aria-current"
+			]);
+		};
+	}
+}), [["__scopeId", "data-v-aa140273"]]);
+//#endregion
+export { UiNavItem_default as t };

package/vue/components.css

@@ -286,20 +286,20 @@
   display: none;
 }
 
-[data-component~="ui-icon"][data-v-3d48bd86] {
+[data-component~="ui-icon"][data-v-6c3d73c1] {
   display: inline-flex;
   flex: none;
   inline-size: var(--ui-icon-size, 1em);
   block-size: var(--ui-icon-size, 1em);
 }
-svg[data-v-3d48bd86] {
+svg[data-v-6c3d73c1] {
   inline-size: 100%;
   block-size: 100%;
   stroke-width: var(--ui-icon-stroke-width, 2);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-icon"][hidden][data-v-3d48bd86] {
+[data-component~="ui-icon"][hidden][data-v-6c3d73c1] {
   display: none;
 }
 
@@ -3610,6 +3610,118 @@ svg[data-v-c322b7ed-s] {
   display: none;
 }
 
+/* One destination in a side or rail navigation: an icon to find it by (leading), its name (the
+       default slot), and an optional line under it (description), such as the record a section
+       belongs to. Label and description are one line each and end in an ellipsis, so every item in a
+       navigation has the same height and the rail never grows sideways. */
+[data-component~="ui-nav-item"][data-v-aa140273] {
+  --_indicator-width: var(--ui-nav-item-indicator-width, 3px);
+  --_indicator-color: var(--ui-nav-item-indicator-color, var(--ui-accent));
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-3);
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: var(--ui-control-size, 2.5rem);
+  margin: 0;
+  padding-block: var(--ui-space-2);
+  padding-inline: var(--ui-space-3);
+  border: 0;
+  border-radius: var(--ui-radius-md);
+  background: transparent;
+  color: var(--ui-text-secondary);
+  font: inherit;
+  font-weight: var(--ui-font-medium);
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+  appearance: none;
+  transition:
+    background-color var(--ui-motion-fast) var(--ui-motion-ease),
+    color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+[data-component~="ui-nav-item"][data-v-aa140273]:hover:not([aria-current]) {
+  background: var(--ui-surface-hover);
+  color: var(--ui-text-primary);
+}
+
+/* The ring is an outline, drawn inside the item: forced colors keep an outline where they drop a
+   box shadow, and a scrolling rail cannot clip a ring that stays within the item. */
+[data-component~="ui-nav-item"][data-v-aa140273]:focus-visible {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: -2px;
+}
+[data-component~="ui-nav-item"][aria-current][data-v-aa140273] {
+  background: var(--ui-nav-item-current-surface, var(--ui-accent-soft));
+  color: var(--ui-accent-subtle-text, var(--ui-text-primary));
+  font-weight: var(--ui-font-semibold);
+}
+
+/* The bar on the start edge is a border, not a fill: forced colors replace backgrounds but keep a
+   border, so the current item stays marked in high contrast. Logical edges mirror it in a
+   right-to-left page. */
+.indicator[data-v-aa140273] {
+  position: absolute;
+  inset-block: var(--ui-space-2);
+  inset-inline-start: 0;
+  display: none;
+  border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
+  border-radius: var(--ui-radius-round);
+}
+[data-component~="ui-nav-item"][aria-current] .indicator[data-v-aa140273] {
+  display: block;
+}
+@media (forced-colors: active) {
+.indicator[data-v-aa140273] {
+    border-inline-start-color: Highlight;
+}
+}
+.leading[data-v-aa140273] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  color: inherit;
+  font-size: var(--ui-font-size-lg);
+}
+.content[data-v-aa140273] {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--ui-space-0-5, 2px);
+  min-inline-size: 0;
+}
+.label[data-v-aa140273],
+.description[data-v-aa140273] {
+  display: block;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.label[data-v-aa140273] {
+  font-size: var(--ui-font-size-md);
+  line-height: var(--ui-line-height-tight);
+}
+.description[data-v-aa140273] {
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-normal);
+  line-height: var(--ui-line-height-tight);
+}
+
+/* An unused region takes no space. */
+.leading[data-v-aa140273]:empty,
+.description[data-v-aa140273]:empty {
+  display: none;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-nav-item"][hidden][data-v-aa140273] {
+  display: none;
+}
+
 /* The top of a view: its title (the page's one h1), with an optional icon or mark before it, a
        short eyebrow above it, a line or two of description under it, and the view's own actions at
        the end. Every view titles itself the same way, at the same size. */

package/vue/index.d.ts

@@ -37,6 +37,7 @@ 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 NavItem } from "./UiNavItem.js";
 export { default as PageHeader } from "./UiPageHeader.js";
 export { default as Popover } from "./UiPopover.js";
 export { default as Radio } from "./UiRadio.js";

package/vue/index.js

@@ -38,6 +38,7 @@ 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 UiNavItem_default } from "./chunks/UiNavItem.js";
 import { t as UiPageHeader_default } from "./chunks/UiPageHeader.js";
 import { t as UiPopover_default } from "./chunks/UiPopover.js";
 import { t as UiRadio_default } from "./chunks/UiRadio.js";
@@ -63,4 +64,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 { UiActionBar_default as ActionBar, UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiBreadcrumbItem_default as BreadcrumbItem, UiBreadcrumbs_default as Breadcrumbs, UiButton_default as Button, UiCallout_default as Callout, UiCard_default as Card, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, 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, UiInputGroup_default as InputGroup, UiList_default as List, UiListItem_default as ListItem, UiMenu_default as Menu, UiMenuItem_default as MenuItem, UiPageHeader_default as PageHeader, 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, UiSection_default as Section, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTabs_default as Tabs, UiText_default as Text, 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 { UiActionBar_default as ActionBar, UiAffordanceScope_default as AffordanceScope, UiAvatar_default as Avatar, UiAvatarGroup_default as AvatarGroup, UiBadge_default as Badge, UiBreadcrumbItem_default as BreadcrumbItem, UiBreadcrumbs_default as Breadcrumbs, UiButton_default as Button, UiCallout_default as Callout, UiCard_default as Card, UiCheckbox_default as Checkbox, UiCluster_default as Cluster, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, 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, UiInputGroup_default as InputGroup, UiList_default as List, UiListItem_default as ListItem, UiMenu_default as Menu, UiMenuItem_default as MenuItem, UiNavItem_default as NavItem, UiPageHeader_default as PageHeader, 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, UiSection_default as Section, UiSelect_default as Select, UiSeparator_default as Separator, UiSidebar_default as Sidebar, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTabs_default as Tabs, UiText_default as Text, 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 };