@threadlabs/looma 0.5.2 → 0.6.0-rc.2

package/vue/UiDisclosure.vue

@@ -15,11 +15,13 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
+    density?: 'comfortable' | 'compact'
     disabled?: boolean
     open?: boolean
     summary?: string
   }>(),
   {
+    density: 'comfortable',
     disabled: false,
     open: false,
     summary: 'Details',
@@ -51,6 +53,7 @@ const contentId = ref('')
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    props.density && `density density=${props.density}`,
     internalOpen.value && 'internalOpen',
   ].filter(Boolean).join(' ')
 )
@@ -213,6 +216,19 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
+/* Density resolves into the summary row's own values; the public tokens still override them. */
+[data-component~="ui-disclosure"] {
+  --_trigger-min-block-size: var(--ui-control-size);
+  --_trigger-padding-block: var(--ui-space-2);
+  --_trigger-padding-inline: var(--ui-space-3);
+}
+
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="density=compact"] {
+  --_trigger-min-block-size: var(--ui-control-size-sm);
+  --_trigger-padding-block: var(--ui-space-1);
+  --_trigger-padding-inline: var(--ui-space-2);
+}
+
 /* An accordion row, not a field: no enclosing box, just a divider, so it never reads as a
  * select or combobox. Stacked disclosures share their dividers. */
 [data-component~="ui-disclosure"] {
@@ -229,16 +245,17 @@ onBeforeUnmount(() => {
   gap: var(--ui-space-3);
   align-items: center;
   inline-size: 100%;
-  min-block-size: 2.5rem;
-  padding: var(--ui-space-2) var(--ui-space-3);
+  min-block-size: var(--ui-disclosure-trigger-min-block-size, var(--_trigger-min-block-size));
+  padding: var(--ui-disclosure-trigger-padding-block, var(--_trigger-padding-block))
+    var(--ui-disclosure-trigger-padding-inline, var(--_trigger-padding-inline));
   border: 0;
   background: transparent;
   color: inherit;
   font: inherit;
-  font-weight: var(--ui-font-semibold, 600);
+  font-weight: var(--ui-font-semibold);
   text-align: start;
   cursor: pointer;
-  border-radius: var(--ui-radius-1);
+  border-radius: var(--ui-radius-sm);
   transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
 

package/vue/UiEditable.vue

@@ -277,11 +277,11 @@ onBeforeUnmount(() => {
 .input {
   grid-area: 1 / 1;
   box-sizing: border-box;
-  min-block-size: var(--ui-control-size-sm, 2rem);
+  min-block-size: var(--ui-control-size-sm);
   margin: 0;
   padding: var(--ui-space-1) var(--ui-space-2);
   border: 1px solid transparent;
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
   font: inherit;
   line-height: var(--ui-line-height-md);
   color: inherit;
@@ -351,13 +351,13 @@ onBeforeUnmount(() => {
 }
 
 .actions button {
-  min-block-size: var(--ui-control-size-sm, 2rem);
+  min-block-size: var(--ui-control-size-sm);
   padding: 0 var(--ui-space-3);
   border: 1px solid var(--ui-border-strong);
-  border-radius: var(--ui-radius-2);
+  border-radius: var(--ui-radius-md);
   background: var(--ui-surface-elevated);
-  background-image: var(--ui-raised-highlight, none);
-  box-shadow: var(--ui-raised, none);
+  background-image: var(--ui-raised-highlight);
+  box-shadow: var(--ui-raised);
   color: inherit;
   font: inherit;
   font-size: var(--ui-font-size-sm);

package/vue/UiEditorInsertTableGrid.vue

@@ -205,17 +205,17 @@ onBeforeUnmount(() => {
 
 <style scoped>
 [data-component~="ui-editor-insert-table-grid"] {
-  padding: var(--ui-space-3, 12px);
-  background: var(--ui-surface, #fff);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-md, 6px);
+  padding: var(--ui-space-3);
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-md);
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
 }
 
 .hint {
-  margin: 0 0 var(--ui-space-2, 8px);
-  font-size: var(--ui-text-sm, 0.875rem);
-  color: var(--ui-text-muted, #6b7280);
+  margin: 0 0 var(--ui-space-2);
+  font-size: var(--ui-font-size-sm);
+  color: var(--ui-text-muted);
 }
 
 .grid {
@@ -223,39 +223,39 @@ onBeforeUnmount(() => {
   grid-template-columns: repeat(var(--ui-editor-table-grid-cols, 8), 1.25rem);
   grid-template-rows: repeat(var(--ui-editor-table-grid-rows, 8), 1.25rem);
   gap: 2px;
-  margin-bottom: var(--ui-space-2, 8px);
+  margin-bottom: var(--ui-space-2);
 }
 
 .cell {
   width: 1.25rem;
   height: 1.25rem;
   padding: 0;
-  border: 1px solid var(--ui-border, #e5e7eb);
+  border: 1px solid var(--ui-border);
   border-radius: 2px;
-  background: var(--ui-surface, #fff);
+  background: var(--ui-surface);
   cursor: pointer;
 }
 
 .cell.selected {
-  background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
-  border-color: var(--ui-accent-solid, var(--ui-accent, #0066cc));
+  background: var(--ui-accent-solid, var(--ui-accent));
+  border-color: var(--ui-accent-solid, var(--ui-accent));
 }
 
 .header {
   display: block;
-  margin-bottom: var(--ui-space-2, 8px);
-  font-size: var(--ui-text-sm, 0.875rem);
+  margin-bottom: var(--ui-space-2);
+  font-size: var(--ui-font-size-sm);
   cursor: pointer;
 }
 
 [data-component~="ui-editor-insert-table-grid"] .insert {
   width: 100%;
-  padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-sm, 4px);
-  background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
-  color: var(--ui-accent-contrast, #fff);
-  font-size: var(--ui-text-sm, 0.875rem);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-sm);
+  background: var(--ui-accent-solid, var(--ui-accent));
+  color: var(--ui-accent-contrast);
+  font-size: var(--ui-font-size-sm);
   cursor: pointer;
 }
 

package/vue/UiEditorMentionMenu.vue

@@ -218,9 +218,9 @@ onBeforeUnmount(() => {
   display: flex;
   overflow: hidden;
   flex-direction: column;
-  background: var(--ui-surface, #fff);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-xl, 1rem);
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-dialog);
   box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
 }
 
@@ -228,25 +228,25 @@ onBeforeUnmount(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--ui-space-3, 12px);
-  padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
-  color: var(--ui-text-secondary, #4b5563);
-  border-bottom: 1px solid var(--ui-border, #e5e7eb);
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  font-weight: var(--ui-font-semibold, 600);
+  gap: var(--ui-space-3);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  color: var(--ui-text-secondary);
+  border-bottom: 1px solid var(--ui-border);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-semibold);
 }
 
 .hint {
   overflow: hidden;
-  color: var(--ui-text-muted, #6b7280);
-  font-weight: var(--ui-font-normal, 400);
+  color: var(--ui-text-muted);
+  font-weight: var(--ui-font-normal);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .list {
   max-height: 280px;
-  padding: var(--ui-space-1, 4px) 0;
+  padding: var(--ui-space-1) 0;
   margin: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -257,8 +257,8 @@ onBeforeUnmount(() => {
   display: flex;
   align-items: center;
   min-height: 44px;
-  padding: var(--ui-space-1-5, 6px) var(--ui-space-3, 12px);
-  gap: var(--ui-space-3, 12px);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  gap: var(--ui-space-3);
   cursor: pointer;
 }
 
@@ -273,11 +273,11 @@ onBeforeUnmount(() => {
   width: 32px;
   height: 32px;
   flex: 0 0 auto;
-  color: var(--ui-accent-active, var(--ui-accent-solid, #2563eb));
-  background: var(--ui-accent-soft, var(--ui-accent-subtle, #eff6ff));
+  color: var(--ui-accent-active, var(--ui-accent-solid));
+  background: var(--ui-accent-soft, var(--ui-accent-subtle));
   border-radius: 999px;
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  font-weight: var(--ui-font-semibold, 600);
+  font-size: var(--ui-font-size-xs);
+  font-weight: var(--ui-font-semibold);
 }
 
 .body {
@@ -294,26 +294,26 @@ onBeforeUnmount(() => {
 }
 
 .label {
-  color: var(--ui-text-primary, #111827);
-  font-size: var(--ui-font-size-sm, 0.875rem);
-  font-weight: var(--ui-font-medium, 500);
+  color: var(--ui-text-primary);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-medium);
 }
 
 .detail,
 .loading {
-  color: var(--ui-text-muted, #6b7280);
-  font-size: var(--ui-font-size-xs, 0.75rem);
+  color: var(--ui-text-muted);
+  font-size: var(--ui-font-size-xs);
 }
 
 .loading {
   min-height: 44px;
-  padding: var(--ui-space-3, 12px);
+  padding: var(--ui-space-3);
 }
 
 @media (max-width: 767px) {
   [data-component~="ui-editor-mention-menu"] {
     border-bottom: 0;
-    border-radius: var(--ui-radius-xl, 1rem) var(--ui-radius-xl, 1rem) 0 0;
+    border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
   }
 
   .list {

package/vue/UiEditorSlashMenu.vue

@@ -191,9 +191,9 @@ onBeforeUnmount(() => {
 }
 
 [data-component~="ui-editor-slash-menu"] {
-  background: var(--ui-surface, #fff);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-xl, 1rem);
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-dialog);
   box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
   overflow: hidden;
   display: flex;
@@ -202,7 +202,7 @@ onBeforeUnmount(() => {
 
 @media (max-width: 767px) {
   [data-component~="ui-editor-slash-menu"] {
-    border-radius: var(--ui-radius-xl, 1rem) var(--ui-radius-xl, 1rem) 0 0;
+    border-radius: var(--ui-radius-dialog) var(--ui-radius-dialog) 0 0;
     border-bottom: none;
   }
 }
@@ -210,12 +210,12 @@ onBeforeUnmount(() => {
 .header {
   display: none;
   align-items: center;
-  gap: var(--ui-space-2, 8px);
-  padding: var(--ui-space-3, 12px) var(--ui-space-4, 16px);
-  border-bottom: 1px solid var(--ui-border, #e5e7eb);
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  color: var(--ui-text-muted, #6b7280);
-  font-weight: var(--ui-font-semibold, 600);
+  gap: var(--ui-space-2);
+  padding: var(--ui-space-3) var(--ui-space-4);
+  border-bottom: 1px solid var(--ui-border);
+  font-size: var(--ui-font-size-xs);
+  color: var(--ui-text-muted);
+  font-weight: var(--ui-font-semibold);
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
@@ -227,12 +227,12 @@ onBeforeUnmount(() => {
 }
 
 .header-query {
-  background: var(--ui-surface-hover, #f3f4f6);
-  border-radius: var(--ui-radius-sm, 4px);
+  background: var(--ui-surface-hover);
+  border-radius: var(--ui-radius-sm);
   padding: 0.1em 0.4em;
   font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  color: var(--ui-accent, #3b82f6);
+  font-size: var(--ui-font-size-xs);
+  color: var(--ui-accent);
   text-transform: none;
   letter-spacing: 0;
 }
@@ -240,7 +240,7 @@ onBeforeUnmount(() => {
 .list {
   list-style: none;
   margin: 0;
-  padding: var(--ui-space-1, 4px) 0;
+  padding: var(--ui-space-1) 0;
   overflow-y: auto;
   max-height: 280px;
   overscroll-behavior: contain;
@@ -249,15 +249,15 @@ onBeforeUnmount(() => {
 @media (max-width: 767px) {
   .list {
     max-height: calc(60dvh - 80px);
-    padding: var(--ui-space-1, 4px) 0 var(--ui-space-2, 8px);
+    padding: var(--ui-space-1) 0 var(--ui-space-2);
   }
 }
 
 .item {
   display: flex;
   align-items: center;
-  gap: var(--ui-space-3, 12px);
-  padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
+  gap: var(--ui-space-3);
+  padding: var(--ui-space-2) var(--ui-space-3);
   min-height: 44px;
   cursor: pointer;
   transition: background-color 120ms ease;
@@ -273,21 +273,21 @@ onBeforeUnmount(() => {
   justify-content: center;
   width: 32px;
   height: 32px;
-  background: var(--ui-surface-hover, #f3f4f6);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-md, 6px);
-  font-size: var(--ui-font-size-sm, 0.875rem);
-  font-weight: var(--ui-font-bold, 700);
-  color: var(--ui-text-secondary, #4b5563);
+  background: var(--ui-surface-hover);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-md);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-bold);
+  color: var(--ui-text-secondary);
   font-family: var(--ui-font-family-mono, ui-monospace, monospace);
   flex-shrink: 0;
   line-height: 1;
 }
 
 .item.active .icon {
-  background: var(--ui-accent, #3b82f6);
-  border-color: var(--ui-accent, #3b82f6);
-  color: var(--ui-accent-contrast, #fff);
+  background: var(--ui-accent);
+  border-color: var(--ui-accent);
+  color: var(--ui-accent-contrast);
 }
 
 .icon {
@@ -303,17 +303,17 @@ onBeforeUnmount(() => {
 }
 
 .title {
-  font-size: var(--ui-font-size-sm, 0.875rem);
-  font-weight: var(--ui-font-medium, 500);
-  color: var(--ui-text, #111827);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-medium);
+  color: var(--ui-text);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .description {
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  color: var(--ui-text-muted, #6b7280);
+  font-size: var(--ui-font-size-xs);
+  color: var(--ui-text-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -321,10 +321,10 @@ onBeforeUnmount(() => {
 
 .footer {
   display: none;
-  padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
-  border-top: 1px solid var(--ui-border, #e5e7eb);
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  color: var(--ui-text-muted, #6b7280);
+  padding: var(--ui-space-2) var(--ui-space-3);
+  border-top: 1px solid var(--ui-border);
+  font-size: var(--ui-font-size-xs);
+  color: var(--ui-text-muted);
 }
 
 @media (min-width: 768px) {
@@ -339,11 +339,11 @@ onBeforeUnmount(() => {
   justify-content: center;
   font-family: var(--ui-font-family-mono, ui-monospace, monospace);
   font-size: 10px;
-  background: var(--ui-surface-hover, #f3f4f6);
-  border: 1px solid var(--ui-border, #e5e7eb);
+  background: var(--ui-surface-hover);
+  border: 1px solid var(--ui-border);
   border-radius: 3px;
   padding: 0 3px;
-  color: var(--ui-text-secondary, #4b5563);
+  color: var(--ui-text-secondary);
 }
 
 [data-component~="ui-editor-slash-menu"][hidden] {

package/vue/UiEditorTableContextMenu.vue

@@ -251,10 +251,10 @@ onBeforeUnmount(() => {
   min-width: 14rem;
   max-width: min(17rem, calc(100vw - 24px));
   max-height: min(28rem, calc(100vh - 24px));
-  padding: var(--ui-space-1-5, 6px);
-  background: var(--ui-surface, #fff);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-lg, 10px);
+  padding: var(--ui-space-2);
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-lg);
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   display: flex;
   flex-direction: column;
@@ -273,17 +273,17 @@ onBeforeUnmount(() => {
 [data-component~="ui-editor-table-context-menu"] button {
   display: flex;
   align-items: center;
-  gap: var(--ui-space-2, 8px);
+  gap: var(--ui-space-2);
   width: 100%;
   text-align: left;
   min-height: 32px;
-  padding: var(--ui-space-1-5, 6px) var(--ui-space-2, 8px);
+  padding: var(--ui-space-2) var(--ui-space-2);
   border: none;
-  border-radius: var(--ui-radius-sm, 4px);
+  border-radius: var(--ui-radius-sm);
   background: none;
-  font-size: var(--ui-font-size-sm, 0.875rem);
+  font-size: var(--ui-font-size-sm);
   cursor: pointer;
-  color: var(--ui-text, #111);
+  color: var(--ui-text);
 }
 
 [data-component~="ui-editor-table-context-menu"] button {
@@ -292,7 +292,7 @@ onBeforeUnmount(() => {
 }
 
 [data-component~="ui-editor-table-context-menu"] button:hover:not(:disabled) {
-  background: var(--ui-surface-hover, #f3f4f6);
+  background: var(--ui-surface-hover);
 }
 
 [data-component~="ui-editor-table-context-menu"] button.selected {
@@ -300,7 +300,7 @@ onBeforeUnmount(() => {
 }
 
 [data-component~="ui-editor-table-context-menu"] button.danger {
-  color: var(--ui-danger, #dc2626);
+  color: var(--ui-danger);
 }
 
 .swatches {
@@ -312,7 +312,7 @@ onBeforeUnmount(() => {
 .swatch-button {
   display: inline-flex;
   align-items: center;
-  gap: var(--ui-space-2, 8px);
+  gap: var(--ui-space-2);
 }
 
 .swatch {
@@ -320,7 +320,7 @@ onBeforeUnmount(() => {
   width: 1rem;
   height: 1rem;
   border-radius: 999px;
-  border: 1px solid var(--ui-border, #d1d5db);
+  border: 1px solid var(--ui-border);
   background: var(--ui-editor-table-context-swatch, #fff);
   box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
   flex-shrink: 0;
@@ -332,11 +332,11 @@ onBeforeUnmount(() => {
     linear-gradient(
       135deg,
       transparent calc(50% - 1px),
-      var(--ui-text-muted, #6b7280) calc(50% - 1px),
-      var(--ui-text-muted, #6b7280) calc(50% + 1px),
+      var(--ui-text-muted) calc(50% - 1px),
+      var(--ui-text-muted) calc(50% + 1px),
       transparent calc(50% + 1px)
     ),
-    var(--ui-surface, #fff);
+    var(--ui-surface);
 }
 
 .swatch-label {
@@ -345,18 +345,18 @@ onBeforeUnmount(() => {
 }
 
 .heading {
-  padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
+  padding: var(--ui-space-1) var(--ui-space-2);
   font-size: 0.6875rem;
   font-weight: 700;
   letter-spacing: 0.05em;
   text-transform: uppercase;
-  color: var(--ui-text-muted, #6b7280);
+  color: var(--ui-text-muted);
 }
 
 .sep {
   height: 1px;
-  background: var(--ui-border, #e5e7eb);
-  margin: var(--ui-space-1, 4px) 0;
+  background: var(--ui-border);
+  margin: var(--ui-space-1) 0;
 }
 
 [data-component~="ui-editor-table-context-menu"][hidden] {