@threadlabs/looma 0.11.0 → 0.11.2

package/vue/components.css

@@ -1,4 +1,60 @@
 
+/* The action row of a form or dialog. Tertiary actions (Back, Cancel, Discard) sit at the start
+       edge; secondary actions (Save as draft, Preview) sit just before the primary one, which ends the
+       row. The bar arranges its actions and leaves their look to them. */
+[data-component~="ui-action-bar"][data-v-f4ba10f3] {
+  --_gap: var(--ui-space-2);
+  display: block;
+  /* A size container sizes itself from its container, never its content. */
+  container-type: inline-size;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+.bar[data-v-f4ba10f3],
+.tertiary[data-v-f4ba10f3],
+.secondary[data-v-f4ba10f3],
+.primary[data-v-f4ba10f3] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ui-action-bar-gap, var(--_gap));
+}
+
+/* The tertiary group takes the spare space, pushing the rest to the end edge; without it, the
+   rest still ends the row. */
+.bar[data-v-f4ba10f3] {
+  justify-content: flex-end;
+}
+.tertiary[data-v-f4ba10f3] {
+  flex: 1 1 auto;
+}
+.tertiary[data-v-f4ba10f3]:empty,
+.secondary[data-v-f4ba10f3]:empty,
+.primary[data-v-f4ba10f3]:empty {
+  display: none;
+}
+
+/* A narrow container stacks the actions full width, primary on top: the row turned on its end,
+   read from its end edge. Container queries cannot read custom properties, so the width is fixed. */
+@container (inline-size < 24rem) {
+.bar[data-v-f4ba10f3],
+  .tertiary[data-v-f4ba10f3],
+  .secondary[data-v-f4ba10f3],
+  .primary[data-v-f4ba10f3] {
+    flex-direction: column-reverse;
+    flex-wrap: nowrap;
+    align-items: stretch;
+}
+.tertiary[data-v-f4ba10f3] {
+    flex: none;
+}
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-action-bar"][hidden][data-v-f4ba10f3] {
+  display: none;
+}
+
 [data-component~="ui-affordance-scope"][data-v-c9fe5e81] {
   display: contents;
   --ui-affordance-scope-engaged: 0;
@@ -3067,7 +3123,7 @@ svg[data-v-bcedd63e-s] {
   display: none;
 }
 
-[data-component~="ui-input"][data-v-f84acfe8] {
+[data-component~="ui-input"][data-v-12ffae5a] {
   box-sizing: border-box;
   display: inline-block;
   inline-size: 100%;
@@ -3076,9 +3132,9 @@ svg[data-v-bcedd63e-s] {
   margin: 0;
   padding: var(--ui-space-2) var(--ui-space-3);
   appearance: none;
-  border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+  border: 1px solid var(--ui-input-border, var(--ui-control-border, var(--ui-border-strong)));
   border-radius: var(--ui-input-radius, var(--ui-radius-md));
-  background: var(--ui-control-surface, var(--ui-surface-elevated));
+  background: var(--ui-input-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
   color: var(--ui-text-primary);
   font: inherit;
   line-height: var(--ui-line-height-md);
@@ -3090,19 +3146,22 @@ svg[data-v-bcedd63e-s] {
 }
 
 /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
-[data-component~="ui-input"][data-v-f84acfe8]::selection {
+[data-component~="ui-input"][data-v-12ffae5a]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-[data-component~="ui-input"][data-v-f84acfe8]::placeholder {
+[data-component~="ui-input"][data-v-12ffae5a]::placeholder {
   color: var(--ui-control-placeholder, var(--ui-text-secondary));
   opacity: 1;
 }
-[data-component~="ui-input"][data-v-f84acfe8]:hover:not(:focus):not(:disabled) {
-  border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+[data-component~="ui-input"][data-v-12ffae5a]:hover:not(:focus):not(:disabled) {
+  border-color: var(
+    --ui-input-border-hover,
+    var(--ui-control-border-hover, var(--ui-text-secondary))
+  );
 }
-[data-component~="ui-input"][data-v-f84acfe8]:focus-visible {
-  border-color: var(--ui-control-focus, var(--ui-accent-solid));
+[data-component~="ui-input"][data-v-12ffae5a]:focus-visible {
+  border-color: var(--ui-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
   outline: none;
   box-shadow: var(
     --ui-input-focus-shadow,
@@ -3112,16 +3171,16 @@ svg[data-v-bcedd63e-s] {
 }
 
 /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
-[data-component~="ui-input"][aria-invalid="true"][data-v-f84acfe8],
-[data-component~="ui-input"][data-v-f84acfe8]:is(:user-invalid, [data-user-invalid]) {
+[data-component~="ui-input"][aria-invalid="true"][data-v-12ffae5a],
+[data-component~="ui-input"][data-v-12ffae5a]:is(:user-invalid, [data-user-invalid]) {
   border-color: var(--ui-danger-solid);
 }
-[data-component~="ui-input"][data-v-f84acfe8]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+[data-component~="ui-input"][data-v-12ffae5a]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
   box-shadow:
     var(--ui-control-inset),
     0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
 }
-[data-component~="ui-input"][data-v-f84acfe8]:disabled {
+[data-component~="ui-input"][data-v-12ffae5a]:disabled {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   color: var(--ui-text-muted);
   box-shadow: none;
@@ -3132,14 +3191,84 @@ svg[data-v-bcedd63e-s] {
  * scroll vertically inside the field. Native inputs already center their single line. */
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-input"][hidden][data-v-f84acfe8] {
+[data-component~="ui-input"][hidden][data-v-12ffae5a] {
+  display: none;
+}
+
+/* An input with fixed text before or after it, such as a domain after a site's name
+       ("acme" + ".example.com") or slashes around a path. The group draws the field's border and
+       focus ring around the input and its affixes together; the input inside drops its own through
+       its custom properties, so it is still the one ui-input, with its form behaviour intact. The
+       affixes are plain text beside the input, so name the input with a label that says what the
+       whole value is. */
+[data-component~="ui-input-group"][data-v-0a135fc1] {
+  --ui-input-border: transparent;
+  --ui-input-border-hover: transparent;
+  --ui-input-focus-border: transparent;
+  --ui-input-shadow: none;
+  --ui-input-focus-shadow: none;
+  --ui-input-radius: 0;
+  --ui-input-surface: transparent;
+
+  display: flex;
+  align-items: stretch;
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: var(--ui-control-size-md);
+  border: 1px solid var(--ui-border-strong);
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-surface-elevated);
+  box-shadow: var(--ui-control-inset);
+  overflow: hidden;
+  transition:
+    border-color var(--ui-motion-fast) var(--ui-motion-ease),
+    box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+}
+[data-component~="ui-input-group"][data-v-0a135fc1]:hover:not(:focus-within) {
+  border-color: var(--ui-text-secondary);
+}
+[data-component~="ui-input-group"][data-v-0a135fc1]:focus-within {
+  border-color: var(--ui-accent-solid);
+  box-shadow:
+    var(--ui-control-inset),
+    var(--ui-control-focus-halo-shadow);
+}
+[data-component~="ui-input-group"][data-v-0a135fc1]:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
+  border-color: var(--ui-danger-solid);
+}
+[data-component~="ui-input-group"][data-ui-input-group-state~="disabled"][data-v-0a135fc1] {
+  background: var(--ui-surface-muted);
+  box-shadow: none;
+}
+.field[data-v-0a135fc1] {
+  display: flex;
+  flex: 1;
+  min-inline-size: 0;
+}
+.affix[data-v-0a135fc1] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  padding-inline: var(--ui-space-2);
+  color: var(--ui-text-secondary);
+  font-family: var(--ui-font-family-mono);
+  font-size: var(--ui-font-size-sm);
+  white-space: nowrap;
+}
+.affix[data-v-0a135fc1]:empty {
+  display: none;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-input-group"][hidden][data-v-0a135fc1] {
   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] {
+[data-component~="ui-list"][data-v-9e6cf63f] {
   display: flex;
   flex-direction: column;
   gap: var(--ui-list-gap, var(--ui-space-1));
@@ -3148,7 +3277,16 @@ svg[data-v-bcedd63e-s] {
   padding: 0;
   list-style: none;
 }
-[data-component~="ui-list"][data-ui-list-state~="layout=grid"][data-v-935b1197] {
+
+/* Compact passes its size to the items through private properties, which cross into each item. */
+[data-component~="ui-list"][data-ui-list-state~="density=compact"][data-v-9e6cf63f] {
+  --_ui-list-item-min-size: 0;
+  --_ui-list-item-padding-block: 0;
+  --_ui-list-item-padding-inline: 0;
+  --_ui-list-item-title-weight: var(--ui-font-normal);
+  gap: var(--ui-list-gap, var(--ui-space-2));
+}
+[data-component~="ui-list"][data-ui-list-state~="layout=grid"][data-v-9e6cf63f] {
   display: grid;
   grid-template-columns:
     repeat(auto-fill, minmax(min(100%, var(--ui-list-min-item-width, 14rem)), 1fr));
@@ -3156,7 +3294,7 @@ svg[data-v-bcedd63e-s] {
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-list"][hidden][data-v-935b1197] {
+[data-component~="ui-list"][hidden][data-v-9e6cf63f] {
   display: none;
 }
 
@@ -3169,95 +3307,101 @@ svg[data-v-bcedd63e-s] {
        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] {
+[data-component~="ui-list-item"][data-v-30896b18] {
   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));
+  min-block-size: var(--_ui-list-item-min-size, var(--ui-control-size, 2.5rem));
+  padding-block: var(
+    --ui-list-item-padding-block,
+    var(--_ui-list-item-padding-block, var(--ui-space-2))
+  );
+  padding-inline: var(
+    --ui-list-item-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] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-30896b18] {
   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) {
+[data-component~="ui-list-item"][data-v-30896b18]: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
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"][data-v-30896b18]: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] {
+[data-component~="ui-list-item"][data-ui-list-item-state~="current"][data-v-30896b18] {
   background: var(--ui-surface-hover);
 }
-[data-component~="ui-list-item"][data-v-d61daf46]:has(.title a[href]:focus-visible) {
+[data-component~="ui-list-item"][data-v-30896b18]:has(.title a[href]:focus-visible) {
   box-shadow: 0 0 0 2px var(--ui-focus-ring);
 }
-.leading[data-v-d61daf46],
-.trailing[data-v-d61daf46] {
+.leading[data-v-30896b18],
+.trailing[data-v-30896b18] {
   display: inline-flex;
   flex: none;
   align-items: center;
   gap: var(--ui-space-2);
 }
-.leading[data-v-d61daf46] {
+.leading[data-v-30896b18] {
   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] {
+.trailing[data-v-30896b18] {
   position: relative;
   z-index: 1;
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);
 }
-.content[data-v-d61daf46] {
+.content[data-v-30896b18] {
   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] {
+.title[data-v-30896b18],
+.description[data-v-30896b18] {
   display: block;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.title[data-v-d61daf46] {
+.title[data-v-30896b18] {
   font-size: var(--ui-font-size-md);
-  font-weight: var(--ui-font-medium);
+  font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
   line-height: var(--ui-line-height-tight);
 }
-.description[data-v-d61daf46] {
+.description[data-v-30896b18] {
   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] {
+.title > a[data-v-30896b18-s] {
   color: inherit;
   text-decoration: none;
 }
-.title > a[data-v-d61daf46-s]:focus-visible {
+.title > a[data-v-30896b18-s]:focus-visible {
   outline: none;
   box-shadow: none;
 }
-.title > a[href][data-v-d61daf46-s]::after {
+.title > a[href][data-v-30896b18-s]::after {
   position: absolute;
   inset: 0;
   border-radius: inherit;
@@ -3265,14 +3409,14 @@ svg[data-v-bcedd63e-s] {
 }
 
 /* An unused region takes no space. */
-.leading[data-v-d61daf46]:empty,
-.description[data-v-d61daf46]:empty,
-.trailing[data-v-d61daf46]:empty {
+.leading[data-v-30896b18]:empty,
+.description[data-v-30896b18]:empty,
+.trailing[data-v-30896b18]: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] {
+[data-component~="ui-list-item"][hidden][data-v-30896b18] {
   display: none;
 }
 

package/vue/index.d.ts

@@ -1,3 +1,4 @@
+export { default as ActionBar } from "./UiActionBar.js";
 export { default as AffordanceScope } from "./UiAffordanceScope.js";
 export { default as Avatar } from "./UiAvatar.js";
 export { default as AvatarGroup } from "./UiAvatarGroup.js";
@@ -31,6 +32,7 @@ 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 InputGroup } from "./UiInputGroup.js";
 export { default as List } from "./UiList.js";
 export { default as ListItem } from "./UiListItem.js";
 export { default as Menu } from "./UiMenu.js";

package/vue/index.js

@@ -1,3 +1,4 @@
+import { t as UiActionBar_default } from "./chunks/UiActionBar.js";
 import { t as UiAffordanceScope_default } from "./chunks/UiAffordanceScope.js";
 import { t as UiAvatar_default } from "./chunks/UiAvatar.js";
 import { t as UiAvatarGroup_default } from "./chunks/UiAvatarGroup.js";
@@ -32,6 +33,7 @@ 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 UiInputGroup_default } from "./chunks/UiInputGroup.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";
@@ -61,4 +63,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, 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, 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, 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 };