@threadlabs/looma 0.37.5 → 0.37.6

package/vue/chunks/UiSkeleton.js

@@ -0,0 +1,151 @@
+import { C as useReflectedProp, _ as nativeAttrs, a as checkHydratedRoot, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { h as vuePropInputs, i as checkPropInput, m as vPropValidity, t as BINDING_INPUTS_PROP } from "./props.js";
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock, unref, watchSyncEffect, withDirectives } from "vue";
+//#region .build/vue/UiSkeleton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"data-ui-skeleton-prop-animated",
+	"data-ui-skeleton-prop-height",
+	"data-ui-skeleton-prop-shape",
+	"data-ui-skeleton-prop-width",
+	"data-ui-skeleton-state"
+];
+//#endregion
+//#region .build/vue/UiSkeleton.vue
+var UiSkeleton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiSkeleton",
+	props: {
+		animated: { type: null },
+		height: { type: null },
+		shape: { type: null },
+		width: { type: null },
+		[BINDING_INPUTS_PROP]: { type: null }
+	},
+	setup(__props) {
+		const propValidityContract = { props: {
+			animated: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "animated" },
+				description: "Gently pulses the placeholder. Off by default, and always still when the reader requests reduced motion.",
+				default: false
+			},
+			height: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "height" },
+				description: "Block size as a CSS length. Empty reserves one line for text, a square for circles, or 8rem for rectangles. Set only width to keep a circle square.",
+				default: ""
+			},
+			shape: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "shape" },
+				description: "The content's silhouette. text reserves one inherited line box with a shorter bar inside it; circle matches a medium Avatar; rectangle reserves a media\n      area.",
+				values: [
+					"text",
+					"circle",
+					"rectangle"
+				],
+				default: "text"
+			},
+			width: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "width" },
+				description: "Inline size as a CSS length or percentage, constrained to the container. Empty fills the available width for text and rectangles, or matches a medium\n      Avatar's outer size for circles.",
+				default: ""
+			}
+		} };
+		const props = __props;
+		const inputTracking = vuePropInputs({
+			animated: false,
+			height: "",
+			shape: "text",
+			width: ""
+		}, {
+			animated: false,
+			height: "",
+			shape: "text",
+			width: ""
+		}, (name, value, source, values) => {
+			switch (name) {
+				case "animated": return checkPropInput(value, {
+					kind: "terminal",
+					name: "boolean"
+				}, true, true);
+				case "height": return checkPropInput(value, {
+					kind: "terminal",
+					name: "string"
+				}, true, true);
+				case "shape": return checkPropInput(value, {
+					kind: "terminal",
+					name: "keyword"
+				}, true, true);
+				case "width": return checkPropInput(value, {
+					kind: "terminal",
+					name: "string"
+				}, true, true);
+				default: return { ok: false };
+			}
+		}, () => {
+			checkedProps.value;
+		});
+		const propInputs = inputTracking.inputs;
+		const checkedProps = computed(() => {
+			inputTracking.version.value;
+			return {
+				animated: propInputs.value("animated", props["animated"], props[BINDING_INPUTS_PROP]),
+				height: propInputs.value("height", props["height"], props[BINDING_INPUTS_PROP]),
+				shape: propInputs.value("shape", props["shape"], props[BINDING_INPUTS_PROP]),
+				width: propInputs.value("width", props["width"], props[BINDING_INPUTS_PROP])
+			};
+		});
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		const reflectedProp = useReflectedProp();
+		checkHydratedRoot("span", "ui-skeleton");
+		/** The values the styles' :host() and :state() rules test. */
+		const hostState = computed(() => [
+			checkedProps.value.shape && "shape",
+			checkedProps.value.shape != null && `shape=${encodeURIComponent(checkedProps.value.shape)}`,
+			checkedProps.value.animated && "animated"
+		].filter(Boolean).join(" "));
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("span", mergeProps({
+				class: "ui-skeleton",
+				"aria-hidden": "true"
+			}, unref(nativeAttrs)(_ctx.$attrs), {
+				"data-hn": "",
+				style: {
+					"--ui-skeleton-width": checkedProps.value.width ?? void 0,
+					"--ui-skeleton-height": checkedProps.value.height ?? void 0
+				},
+				"data-ui-skeleton-prop-animated": unref(reflectedProp)("animated", "animated", checkedProps.value.animated, void 0, false),
+				"data-ui-skeleton-prop-height": unref(reflectedProp)("height", "height", checkedProps.value.height, void 0, false),
+				"data-ui-skeleton-prop-shape": unref(reflectedProp)("shape", "shape", checkedProps.value.shape, void 0, false),
+				"data-ui-skeleton-prop-width": unref(reflectedProp)("width", "width", checkedProps.value.width, void 0, false),
+				"data-ui-skeleton-state": hostState.value || void 0
+			}), null, 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...props }
+			}]]);
+		};
+	}
+}), [["__scopeId", "data-v-ee40410c"]]);
+//#endregion
+export { UiSkeleton_default as t };

package/vue/components.css

@@ -10401,6 +10401,77 @@ dialog:where([data-hn-ui-search-shell]) {
 }
 }
 
+/* Dimensions belong to this placeholder, never a nested or neighbouring one. */
+@property --ui-skeleton-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-skeleton-height {
+  syntax: "*";
+  inherits: false;
+}
+@keyframes ui-skeleton-pulse-ee40410c {
+50% {
+    opacity: 0.45;
+}
+}
+@scope (.ui-skeleton) to ([data-hn]) {
+:scope {
+    display: block !important;
+    position: relative;
+    box-sizing: border-box !important;
+    flex: none;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    inline-size: var(--ui-skeleton-width, 100%);
+    block-size: var(--ui-skeleton-height, 1lh);
+    margin: 0 !important;
+    font: inherit;
+}
+:scope::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: var(--ui-radius-sm);
+    background: color-mix(in srgb, var(--ui-text-primary) 16%, transparent);
+}
+:scope[data-ui-skeleton-state~="shape=text"]::before {
+    inset-block: 22%;
+}
+:scope[data-ui-skeleton-state~="shape=circle"] {
+    inline-size: var(--ui-skeleton-width, calc(2.5rem + 2 * var(--ui-border-width)));
+    block-size: var(--ui-skeleton-height, auto);
+    aspect-ratio: 1;
+}
+:scope[data-ui-skeleton-state~="shape=circle"]::before {
+    border-radius: var(--ui-radius-round);
+}
+:scope[data-ui-skeleton-state~="shape=rectangle"] {
+    block-size: var(--ui-skeleton-height, 8rem);
+}
+:scope[data-ui-skeleton-state~="shape=rectangle"]::before {
+    border-radius: var(--ui-radius-md);
+}
+:scope[data-ui-skeleton-state~="animated"]::before {
+    animation: ui-skeleton-pulse-ee40410c 1.6s ease-in-out infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+:scope[data-ui-skeleton-state~="animated"]::before {
+      animation: none;
+}
+}
+@media (forced-colors: active) {
+:scope::before {
+      background: CanvasText;
+      opacity: 0.2;
+      animation: none;
+}
+}
+:scope[hidden] {
+    display: none !important;
+}
+}
+
 @scope (.ui-slider) to ([data-hn]) {
 :scope {
     display: grid !important;

package/vue/index.d.ts

@@ -71,6 +71,7 @@ export { default as Section } from "./UiSection.js";
 export { default as Select } from "./UiSelect.js";
 export { default as Separator } from "./UiSeparator.js";
 export { default as Sidebar } from "./UiSidebar.js";
+export { default as Skeleton } from "./UiSkeleton.js";
 export { default as Slider } from "./UiSlider.js";
 export { default as Spinner } from "./UiSpinner.js";
 export { default as Stack } from "./UiStack.js";

package/vue/index.js

@@ -77,6 +77,7 @@ import { t as UiSection_default } from "./chunks/UiSection.js";
 import { t as UiSelect_default } from "./chunks/UiSelect.js";
 import { t as UiSeparator_default } from "./chunks/UiSeparator.js";
 import { t as UiSidebar_default } from "./chunks/UiSidebar.js";
+import { t as UiSkeleton_default } from "./chunks/UiSkeleton.js";
 import { t as UiSlider_default } from "./chunks/UiSlider.js";
 import { t as UiStatusMessage_default } from "./chunks/UiStatusMessage.js";
 import { t as UiSwitch_default } from "./chunks/UiSwitch.js";
@@ -89,4 +90,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, UiColorPicker_default as ColorPicker, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiCurveEditor_default as CurveEditor, UiCycleButton_default as CycleButton, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorBlockActions_default as EditorBlockActions, UiEditorChipEditor_default as EditorChipEditor, UiEditorCodeLanguage_default as EditorCodeLanguage, UiEditorFootnoteEditor_default as EditorFootnoteEditor, UiEditorImageToolbar_default as EditorImageToolbar, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorLinkCard_default as EditorLinkCard, UiEditorLinkForm_default as EditorLinkForm, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorMentionMenuItem_default as EditorMentionMenuItem, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorSlashMenuGroup_default as EditorSlashMenuGroup, UiEditorSlashMenuItem_default as EditorSlashMenuItem, UiEditorSurface_default as EditorSurface, 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, UiImage_default as Image, UiInput_default as Input, UiInputGroup_default as InputGroup, UiLightEditor_default as LightEditor, UiList_default as List, UiListItem_default as ListItem, UiListbox_default as Listbox, UiMenu_default as Menu, UiMenuGroup_default as MenuGroup, UiMenuItem_default as MenuItem, UiMeter_default as Meter, UiNavItem_default as NavItem, UiNumberInput_default as NumberInput, UiPageHeader_default as PageHeader, UiPagination_default as Pagination, 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, UiSlider_default as Slider, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwatch_default as Swatch, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTable_default as Table, UiTabs_default as Tabs, UiText_default as Text, UiTextarea_default as Textarea, UiToast_default as Toast, 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, UiColorPicker_default as ColorPicker, UiCombobox_default as Combobox, UiContainer_default as Container, UiContextMenu_default as ContextMenu, UiCover_default as Cover, UiCurveEditor_default as CurveEditor, UiCycleButton_default as CycleButton, UiDescriptionItem_default as DescriptionItem, UiDescriptionList_default as DescriptionList, UiDialog_default as Dialog, UiDisclosure_default as Disclosure, UiEditable_default as Editable, UiEditorBlockActions_default as EditorBlockActions, UiEditorChipEditor_default as EditorChipEditor, UiEditorCodeLanguage_default as EditorCodeLanguage, UiEditorFootnoteEditor_default as EditorFootnoteEditor, UiEditorImageToolbar_default as EditorImageToolbar, UiEditorInsertTableGrid_default as EditorInsertTableGrid, UiEditorLinkCard_default as EditorLinkCard, UiEditorLinkForm_default as EditorLinkForm, UiEditorMentionMenu_default as EditorMentionMenu, UiEditorMentionMenuItem_default as EditorMentionMenuItem, UiEditorSlashMenu_default as EditorSlashMenu, UiEditorSlashMenuGroup_default as EditorSlashMenuGroup, UiEditorSlashMenuItem_default as EditorSlashMenuItem, UiEditorSurface_default as EditorSurface, 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, UiImage_default as Image, UiInput_default as Input, UiInputGroup_default as InputGroup, UiLightEditor_default as LightEditor, UiList_default as List, UiListItem_default as ListItem, UiListbox_default as Listbox, UiMenu_default as Menu, UiMenuGroup_default as MenuGroup, UiMenuItem_default as MenuItem, UiMeter_default as Meter, UiNavItem_default as NavItem, UiNumberInput_default as NumberInput, UiPageHeader_default as PageHeader, UiPagination_default as Pagination, 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, UiSkeleton_default as Skeleton, UiSlider_default as Slider, UiSpinner_default as Spinner, UiStack_default as Stack, UiStatusMessage_default as StatusMessage, UiSwatch_default as Swatch, UiSwitch_default as Switch, UiSwitcher_default as Switcher, UiTable_default as Table, UiTabs_default as Tabs, UiText_default as Text, UiTextarea_default as Textarea, UiToast_default as Toast, UiToastRegion_default as ToastRegion, UiTooltip_default as Tooltip, UiTopBar_default as TopBar, UiTree_default as Tree, UiTreeItem_default as TreeItem, trackInputModality };