@threadlabs/looma 0.12.6 → 0.13.0

package/vue/UiNavItem.vue

@@ -57,10 +57,24 @@ function attribute(value: unknown): any {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-nav-item-current-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-nav-item-indicator-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-nav-item-indicator-width {
+  syntax: "*";
+  inherits: false;
+}
+
 /* 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. */
+   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"] {
   --_indicator-width: var(--ui-nav-item-indicator-width, 3px);
   --_indicator-color: var(--ui-nav-item-indicator-color, var(--ui-accent));

package/vue/UiPopover.vue

@@ -83,6 +83,12 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-popover-viewport-gap {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-popover"] {
   box-sizing: border-box;
   max-inline-size: min(

package/vue/UiRadio.vue

@@ -92,7 +92,20 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-radio-gap {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-radio-size {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-radio"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-radio-size: var(--ui-radio-size);
+
   display: inline-flex;
   align-items: flex-start;
   gap: var(--ui-radio-gap, var(--ui-space-2));
@@ -126,8 +139,8 @@ useComponentHost(controllerModule.default, {
 
 input {
   flex: 0 0 auto;
-  inline-size: var(--ui-radio-size, 1.125rem);
-  block-size: var(--ui-radio-size, 1.125rem);
+  inline-size: var(--_ui-radio-size, 1.125rem);
+  block-size: var(--_ui-radio-size, 1.125rem);
   margin: 0.125em 0 0;
   accent-color: var(--ui-accent-solid);
   cursor: pointer;
@@ -139,7 +152,7 @@ input:focus-visible {
 }
 
 [data-component~="ui-radio"][data-ui-radio-state~="disabled"] {
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
 [data-component~="ui-radio"][data-ui-radio-state~="disabled"] input {

package/vue/UiReel.vue

@@ -33,7 +33,20 @@ const hostState = computed(() =>
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-reel-gap {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-reel-item-width {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-reel"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-reel-item-width: var(--ui-reel-item-width);
+
   --_reel-gap: var(--ui-space-4);
   --_reel-item-width: auto;
   display: flex;
@@ -77,7 +90,7 @@ const hostState = computed(() =>
 
 [data-component~="ui-reel"] > :slotted(*) {
   min-inline-size: 0;
-  flex: 0 0 var(--ui-reel-item-width, var(--_reel-item-width));
+  flex: 0 0 var(--_ui-reel-item-width, var(--_reel-item-width));
 }
 
 [data-component~="ui-reel"][data-ui-reel-state~="gap=xs"] {

package/vue/UiSearchResultRow.vue

@@ -41,6 +41,40 @@ const hostState = computed(() =>
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-search-result-row-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-result-row-gap {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-result-row-hover-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-result-row-min-height {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-result-row-padding-block {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-result-row-padding-inline {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-result-row-selected-bg {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-result-row-surface {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-search-result-row"] {
   appearance: none;
   inline-size: 100%;

package/vue/UiSearchShell.vue

@@ -76,23 +76,77 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-search-shell-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-shell-focus-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-shell-max-height {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-shell-max-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-shell-padding-top {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-shell-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-shell-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-shell-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-shell-viewport-gap {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-search-shell-z-index {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-search-shell"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-search-shell-z-index: var(--ui-search-shell-z-index);
+  --_ui-search-shell-padding-top: var(--ui-search-shell-padding-top);
+  --_ui-search-shell-viewport-gap: var(--ui-search-shell-viewport-gap);
+  --_ui-search-shell-max-width: var(--ui-search-shell-max-width);
+  --_ui-search-shell-max-height: var(--ui-search-shell-max-height);
+  --_ui-search-shell-surface: var(--ui-search-shell-surface);
+  --_ui-search-shell-border: var(--ui-search-shell-border);
+  --_ui-search-shell-radius: var(--ui-search-shell-radius);
+  --_ui-search-shell-shadow: var(--ui-search-shell-shadow);
+  --_ui-search-shell-focus-color: var(--ui-search-shell-focus-color);
+
   display: contents;
 }
 
 dialog {
   position: fixed;
   inset: 0;
-  z-index: var(--ui-search-shell-z-index, 400);
+  z-index: var(--_ui-search-shell-z-index, 400);
   box-sizing: border-box;
   inline-size: 100%;
   max-inline-size: none;
   block-size: 100%;
   max-block-size: none;
   margin: 0;
-  padding: var(--ui-search-shell-padding-top, 10vh)
-    var(--ui-search-shell-viewport-gap, var(--ui-space-4))
-    var(--ui-search-shell-viewport-gap, var(--ui-space-4));
+  padding: var(--_ui-search-shell-padding-top, 10vh)
+    var(--_ui-search-shell-viewport-gap, var(--ui-space-4))
+    var(--_ui-search-shell-viewport-gap, var(--ui-space-4));
   overflow: auto;
   border: 0;
   background: var(--ui-overlay-backdrop);
@@ -107,14 +161,14 @@ dialog::backdrop {
   position: relative;
   display: flex;
   flex-direction: column;
-  inline-size: min(100%, var(--ui-search-shell-max-width, 40rem));
-  max-block-size: var(--ui-search-shell-max-height, 80vh);
+  inline-size: min(100%, var(--_ui-search-shell-max-width, 40rem));
+  max-block-size: var(--_ui-search-shell-max-height, 80vh);
   margin-inline: auto;
   overflow: hidden;
-  background: var(--ui-search-shell-surface, var(--ui-surface-elevated));
-  border: 1px solid var(--ui-search-shell-border, var(--ui-border-default));
-  border-radius: var(--ui-search-shell-radius, var(--ui-radius-dialog));
-  box-shadow: var(--ui-search-shell-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)));
+  background: var(--_ui-search-shell-surface, var(--ui-surface-elevated));
+  border: 1px solid var(--_ui-search-shell-border, var(--ui-border-default));
+  border-radius: var(--_ui-search-shell-radius, var(--ui-radius-dialog));
+  box-shadow: var(--_ui-search-shell-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)));
 }
 
 .search {
@@ -127,8 +181,8 @@ dialog::backdrop {
 
 /* The search region shows where typing goes, whatever the author put in it. */
 .search:focus-within {
-  border-block-end-color: var(--ui-search-shell-focus-color, var(--ui-control-focus));
-  box-shadow: inset 0 -1px 0 var(--ui-search-shell-focus-color, var(--ui-control-focus));
+  border-block-end-color: var(--_ui-search-shell-focus-color, var(--ui-control-focus));
+  box-shadow: inset 0 -1px 0 var(--_ui-search-shell-focus-color, var(--ui-control-focus));
 }
 
 :slotted(input[slot="search"]) {

package/vue/UiSelect.vue

@@ -54,6 +54,20 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-select-focus-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-select-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-select-shadow {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-select"] {
   box-sizing: border-box;
   display: inline-block;
@@ -118,7 +132,7 @@ useComponentHost(controllerModule.default, {
 
 [data-component~="ui-select"]:disabled {
   background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   box-shadow: none;
   cursor: not-allowed;
 }

package/vue/UiSeparator.vue

@@ -17,7 +17,14 @@ withDefaults(
 </template>
 
 <style scoped>
-hr {
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-separator-color {
+  syntax: "*";
+  inherits: false;
+}
+
+/* The root is the hr, so the rules name :host; a bare hr matches only a descendant. */
+[data-component~="ui-separator"] {
   box-sizing: border-box;
   align-self: stretch;
   margin: 0;
@@ -25,7 +32,7 @@ hr {
   border-block-start: 1px solid var(--ui-separator-color, var(--ui-border-default));
 }
 
-hr[aria-orientation="vertical"] {
+[data-component~="ui-separator"][aria-orientation="vertical"] {
   block-size: auto;
   border-block-start: 0;
   border-inline-start: 1px solid var(--ui-separator-color, var(--ui-border-default));

package/vue/UiSidebar.vue

@@ -115,7 +115,28 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-sidebar-backdrop {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-sidebar-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-sidebar-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-sidebar-width {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-sidebar"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-sidebar-backdrop: var(--ui-sidebar-backdrop);
+
   position: relative;
   box-sizing: border-box;
   display: flex;
@@ -276,7 +297,7 @@ useComponentHost(controllerModule.default, {
 }
 
 [data-component~="ui-sidebar"][popover]::backdrop {
-  background: var(--ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
+  background: var(--_ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
 }
 
 @media (prefers-reduced-motion: reduce) {

package/vue/UiStack.vue

@@ -27,6 +27,12 @@ const hostState = computed(() =>
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-stack-gap {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-stack"] {
   --_layout-gap: var(--ui-space-4);
   display: flex;

package/vue/UiSwitch.vue

@@ -93,7 +93,25 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-switch-gap {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-switch-track-height {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-switch-track-width {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-switch"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-switch-track-width: var(--ui-switch-track-width);
+  --_ui-switch-track-height: var(--ui-switch-track-height);
+
   display: inline-flex;
   align-items: flex-start;
   gap: var(--ui-switch-gap, var(--ui-space-2));
@@ -130,8 +148,8 @@ input {
   -webkit-appearance: none;
   position: relative;
   flex: 0 0 auto;
-  width: var(--ui-switch-track-width, 2.5rem);
-  height: var(--ui-switch-track-height, 1.5rem);
+  width: var(--_ui-switch-track-width, 2.5rem);
+  height: var(--_ui-switch-track-height, 1.5rem);
   padding: 0;
   border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
   border-radius: 999px;
@@ -173,7 +191,7 @@ input:focus-visible {
 }
 
 [data-component~="ui-switch"][data-ui-switch-state~="disabled"] {
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
 [data-component~="ui-switch"][data-ui-switch-state~="disabled"] input {

package/vue/UiSwitcher.vue

@@ -31,7 +31,20 @@ const hostState = computed(() =>
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-switcher-gap {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-switcher-threshold {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-switcher"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-switcher-threshold: var(--ui-switcher-threshold);
+
   --_switcher-gap: var(--ui-space-4);
   display: flex;
   flex-wrap: wrap;
@@ -45,7 +58,7 @@ const hostState = computed(() =>
   min-inline-size: 0;
   flex-grow: 1;
   /* The large multiplier makes the basis flip as a group at the intrinsic threshold. */
-  flex-basis: calc((var(--ui-switcher-threshold, 30rem) - 100%) * 999);
+  flex-basis: calc((var(--_ui-switcher-threshold, 30rem) - 100%) * 999);
 }
 
 [data-component~="ui-switcher"][data-ui-switcher-state~="gap=xs"] {
@@ -64,13 +77,13 @@ const hostState = computed(() =>
   --_switcher-gap: var(--ui-space-6);
 }
 [data-component~="ui-switcher"][data-ui-switcher-state~="threshold=xs"] > :slotted(*) {
-  flex-basis: calc((var(--ui-switcher-threshold, 20rem) - 100%) * 999);
+  flex-basis: calc((var(--_ui-switcher-threshold, 20rem) - 100%) * 999);
 }
 [data-component~="ui-switcher"][data-ui-switcher-state~="threshold=md"] > :slotted(*) {
-  flex-basis: calc((var(--ui-switcher-threshold, 45rem) - 100%) * 999);
+  flex-basis: calc((var(--_ui-switcher-threshold, 45rem) - 100%) * 999);
 }
 [data-component~="ui-switcher"][data-ui-switcher-state~="threshold=lg"] > :slotted(*) {
-  flex-basis: calc((var(--ui-switcher-threshold, 60rem) - 100%) * 999);
+  flex-basis: calc((var(--_ui-switcher-threshold, 60rem) - 100%) * 999);
 }
 [data-component~="ui-switcher"][data-ui-switcher-state~="align=start"] {
   align-items: flex-start;

package/vue/UiTabs.vue

@@ -100,8 +100,27 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-tabs-tab-min-block-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-tabs-tab-padding-block {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-tabs-tab-padding-inline {
+  syntax: "*";
+  inherits: false;
+}
+
 /* Density resolves into the tab row's own values; the public tokens still override them. */
 [data-component~="ui-tabs"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-tabs-tab-min-block-size: var(--ui-tabs-tab-min-block-size);
+  --_ui-tabs-tab-padding-block: var(--ui-tabs-tab-padding-block);
+  --_ui-tabs-tab-padding-inline: var(--ui-tabs-tab-padding-inline);
+
   --_tab-min-block-size: var(--ui-control-size);
   --_tab-padding-block: var(--ui-space-2);
   --_tab-padding-inline: var(--ui-space-3);
@@ -137,10 +156,10 @@ useComponentHost(controllerModule.default, {
 }
 
 .list button {
-  min-block-size: var(--ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
+  min-block-size: var(--_ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
   margin: 0 0 -1px;
-  padding: var(--ui-tabs-tab-padding-block, var(--_tab-padding-block))
-    var(--ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
+  padding: var(--_ui-tabs-tab-padding-block, var(--_tab-padding-block))
+    var(--_ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
   border: 0;
   border-block-end: 2px solid transparent;
   background: transparent;

package/vue/UiTextarea.vue

@@ -58,6 +58,20 @@ useComponentHost(controllerModule.default, {
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-textarea-focus-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-textarea-shadow {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-textarea"] {
   box-sizing: border-box;
   display: inline-block;
@@ -120,7 +134,7 @@ useComponentHost(controllerModule.default, {
 
 [data-component~="ui-textarea"]:disabled {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-  color: var(--ui-text-muted);
+  color: var(--ui-disabled-text);
   box-shadow: none;
   cursor: not-allowed;
 }

package/vue/UiToastRegion.vue

@@ -132,7 +132,21 @@ defineExpose({
 </template>
 
 <style scoped>
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-toast-region-enter-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-toast-region-exit-duration {
+  syntax: "*";
+  inherits: false;
+}
+
 [data-component~="ui-toast-region"] {
+  /* Hooks do not inherit, so the parts below read them from the root. */
+  --_ui-toast-region-enter-duration: var(--ui-toast-region-enter-duration);
+  --_ui-toast-region-exit-duration: var(--ui-toast-region-exit-duration);
+
   position: fixed;
   top: calc(var(--ui-space-4) + env(safe-area-inset-top));
   right: auto;
@@ -175,13 +189,13 @@ defineExpose({
   background: var(--ui-surface-elevated);
   color: var(--ui-text-primary);
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
-  animation: ui-toast-enter var(--ui-toast-region-enter-duration, 0.32s)
+  animation: ui-toast-enter var(--_ui-toast-region-enter-duration, 0.32s)
     var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 
 /* Leaving slides on down and fades; the controller removes the toast when this ends. */
 .toast.closing {
-  animation: ui-toast-exit var(--ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
+  animation: ui-toast-exit var(--_ui-toast-region-exit-duration, 0.22s) var(--ui-motion-ease) both;
   pointer-events: none;
 }