@threadlabs/looma 0.22.13 → 0.23.0

package/vue/UiDescriptionList.vue

@@ -201,7 +201,7 @@ const hostState = computed(() =>
   --_ui-description-align: flex-start;
   --_ui-description-value-size: var(--ui-font-size-lg);
   --_ui-description-padding: var(--_tile-padding);
-  --_ui-description-border-width: 1px;
+  --_ui-description-border-width: var(--ui-border-width);
   --_ui-description-border-color: var(--ui-border-strong);
   --_gap: var(--ui-space-3);
   --_gap-compact: var(--ui-space-2);

package/vue/UiDialog.vue

@@ -377,7 +377,8 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   overflow: hidden;
   flex-direction: column;
   background: var(--ui-dialog-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
-  border: 1px solid var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-strong)));
+  border: var(--ui-border-width) solid
+    var(--ui-dialog-border, var(--ui-overlay-border, var(--ui-border-strong)));
   border-radius: var(--ui-dialog-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
   box-shadow: var(
     --ui-dialog-shadow,
@@ -488,8 +489,8 @@ header {
 }
 
 .close:focus-visible {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: 2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-focus-width);
 }
 
 /* A touch target, like Button on coarse pointers. */

package/vue/UiDisclosure.d.ts

@@ -1,9 +1,11 @@
 import type { PropType } from 'vue';
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
 type __VLS_Slots = {} & {
     summary?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_3) => any;
+    indicator?: (props: typeof __VLS_3) => any;
+} & {
+    default?: (props: typeof __VLS_5) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     density: {
@@ -14,6 +16,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    fill: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     headingLevel: {
         type: PropType<number | null>;
         default: number;
@@ -51,6 +57,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    fill: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     headingLevel: {
         type: PropType<number | null>;
         default: number;
@@ -80,6 +90,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly trigger: "keyboard" | "pointer" | "programmatic";
     }>) => any) | undefined;
 }>, {
+    fill: boolean | null;
     summary: string | null;
     name: string | null;
     open: boolean | null;

package/vue/UiDisclosure.vue

@@ -25,6 +25,14 @@ const propValidityContract = {
         'Disables the trigger and mutes its text, so the disclosure keeps its current state and the user cannot toggle it.',
       default: false,
     },
+    fill: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'fill' },
+      description:
+        'In a column with a bounded height, an open disclosure fills the remaining space and keeps its trigger visible. The content slot can contain a Scroll Area.\n      Closed items keep only their trigger height.',
+      default: false,
+    },
     headingLevel: {
       type: { kind: 'terminal', name: 'integer' },
       required: false,
@@ -65,6 +73,7 @@ const props = defineProps({
     default: 'comfortable',
   },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
+  fill: { type: null as unknown as PropType<boolean | null>, default: false },
   headingLevel: { type: null as unknown as PropType<number | null>, default: 0 },
   name: { type: null as unknown as PropType<string | null>, default: '' },
   open: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -73,6 +82,7 @@ const props = defineProps({
 const acceptedProps: Record<string, unknown> = {
   density: 'comfortable',
   disabled: false,
+  fill: false,
   headingLevel: 0,
   name: '',
   open: false,
@@ -93,6 +103,13 @@ const checkedProps = computed(() => ({
     'disabled',
     acceptedProps,
   ) as boolean,
+  fill: checkedProp<boolean>(
+    props['fill'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'fill',
+    acceptedProps,
+  ) as boolean,
   headingLevel: checkedProp<number>(
     props['headingLevel'],
     { kind: 'terminal', name: 'integer' },
@@ -249,6 +266,7 @@ const hostState = computed(() =>
     checkedProps.value.density != null
     && `density=${encodeURIComponent(checkedProps.value.density)}`,
     internalOpen.value && 'internalOpen',
+    checkedProps.value.fill && 'fill',
   ].filter(Boolean).join(' ')
 )
 
@@ -286,7 +304,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['density', 'disabled', 'headingLevel', 'name', 'open', 'summary'],
+  propNames: ['density', 'disabled', 'fill', 'headingLevel', 'name', 'open', 'summary'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { trigger: triggerElement, panel: panelElement },
@@ -301,6 +319,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
     :data-heading-level="reflectedProp('headingLevel', 'heading-level', checkedProps.headingLevel, undefined, false)"
     :data-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
     :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
@@ -318,7 +337,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
         ref="trigger"
       >
         <span class="summary"><slot name="summary">{{ checkedProps.summary }}</slot></span>
-        <span class="chevron" aria-hidden="true"></span>
+        <slot name="indicator"><span class="chevron" aria-hidden="true"></span></slot>
       </button>
     </div>
     <div class="panel" :id="guardedBinding4" ref="panel">
@@ -366,7 +385,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   display: block;
   inline-size: 100%;
   overflow: clip;
-  border-block-end: 1px solid var(--ui-border-divider);
+  border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
   color: var(--ui-text-primary);
 }
 
@@ -395,7 +414,8 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
 }
 .trigger:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+  box-shadow: inset 0 0 0 var(--ui-focus-width)
+    color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
 }
 .trigger:disabled {
   color: var(--ui-disabled-text);
@@ -434,6 +454,43 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   transform: rotate(225deg) translate(-1px, -1px);
 }
 
+/* A bounded accordion owns one flexible body, so its trigger never scrolls away. The
+ * normal content-sized layout and its animation remain unchanged when fill is omitted. */
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] {
+  display: flex;
+  flex-direction: column;
+  flex: none;
+  min-block-size: 0;
+  border-block-end: 0;
+  border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"][data-ui-disclosure-state~="internalOpen"] {
+  flex: 1;
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .heading {
+  flex: none;
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .trigger {
+  border-radius: 0;
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .panel {
+  display: flex;
+  flex: 1;
+  min-block-size: 0;
+  transition: none;
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .panel[hidden] {
+  flex: none;
+  block-size: 0;
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .panel-inner {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-block-size: 0;
+  padding: 0;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .panel,
   .chevron {

package/vue/UiEditable.vue

@@ -464,7 +464,7 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
   min-block-size: var(--ui-control-size-sm);
   margin: 0;
   padding: var(--ui-space-1) var(--ui-space-2);
-  border: 1px solid transparent;
+  border: var(--ui-border-width) solid transparent;
   border-radius: var(--ui-radius-md);
   font: inherit;
   line-height: var(--ui-line-height-md);
@@ -537,7 +537,7 @@ useComponentHost(() => import('../components/ui-editable/ui-editable.js'), {
 .actions button {
   min-block-size: var(--ui-control-size-sm);
   padding: 0 var(--ui-space-3);
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-md);
   background: var(--ui-surface-elevated);
   background-image: var(--ui-raised-highlight);

package/vue/UiEditorInsertTableGrid.vue

@@ -322,7 +322,7 @@ function uniqueKeys<T>(
 [data-component~="ui-editor-insert-table-grid"] {
   padding: var(--ui-space-3);
   background: var(--ui-surface);
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-md);
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
 }
@@ -371,8 +371,8 @@ function uniqueKeys<T>(
   width: 1.25rem;
   height: 1.25rem;
   padding: 0;
-  border: 1px solid var(--ui-control-border);
-  border-radius: 2px;
+  border: var(--ui-border-width) solid var(--ui-control-border);
+  border-radius: var(--ui-radius-sm);
   background: var(--ui-surface);
   cursor: pointer;
 }
@@ -383,8 +383,8 @@ function uniqueKeys<T>(
 }
 
 .cell:focus-visible {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: -2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: calc(-1 * var(--ui-focus-width));
 }
 
 .header {

package/vue/UiEditorMentionMenu.vue

@@ -408,7 +408,7 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
   overflow: hidden;
   flex-direction: column;
   background: var(--ui-surface);
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-dialog);
   box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
 }
@@ -420,7 +420,7 @@ useComponentHost(() => import('../components/ui-editor-mention-menu/ui-editor-me
   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-divider);
+  border-bottom: var(--ui-border-width) solid var(--ui-border-divider);
   font-size: var(--ui-font-size-xs);
   font-weight: var(--ui-font-semibold);
 }

package/vue/UiEditorSlashMenu.vue

@@ -359,7 +359,7 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
 
 [data-component~="ui-editor-slash-menu"] {
   background: var(--ui-surface);
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-dialog);
   box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
   overflow: hidden;
@@ -379,7 +379,7 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
   align-items: center;
   gap: var(--ui-space-2);
   padding: var(--ui-space-3) var(--ui-space-4);
-  border-bottom: 1px solid var(--ui-border-divider);
+  border-bottom: var(--ui-border-width) solid var(--ui-border-divider);
   font-size: var(--ui-font-size-xs);
   color: var(--ui-text-muted);
   font-weight: var(--ui-font-semibold);
@@ -463,7 +463,7 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
   width: 32px;
   height: 32px;
   background: var(--ui-surface-hover);
-  border: 1px solid var(--ui-border);
+  border: var(--ui-border-width) solid var(--ui-border);
   border-radius: var(--ui-radius-md);
   font-size: var(--ui-font-size-sm);
   font-weight: var(--ui-font-bold);
@@ -510,7 +510,7 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
 
 .footer {
   padding: var(--ui-space-2) var(--ui-space-3);
-  border-top: 1px solid var(--ui-border-divider);
+  border-top: var(--ui-border-width) solid var(--ui-border-divider);
   font-size: var(--ui-font-size-xs);
   color: var(--ui-text-muted);
 }
@@ -522,8 +522,8 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
   font-family: var(--ui-font-family-mono, ui-monospace, monospace);
   font-size: var(--ui-font-size-2xs);
   background: var(--ui-surface-hover);
-  border: 1px solid var(--ui-border);
-  border-radius: 3px;
+  border: var(--ui-border-width) solid var(--ui-border);
+  border-radius: var(--ui-radius-sm);
   padding: 0 3px;
   color: var(--ui-text-secondary);
 }

package/vue/UiEditorSlashMenuItem.vue

@@ -211,7 +211,7 @@ if (
   flex: 0 0 auto;
   color: var(--ui-text-secondary);
   background: var(--ui-surface-hover);
-  border: 1px solid var(--ui-border);
+  border: var(--ui-border-width) solid var(--ui-border);
   border-radius: var(--ui-radius-md);
 }
 

package/vue/UiEditorTableContextMenu.vue

@@ -552,7 +552,7 @@ function uniqueKeys<T>(
   max-height: min(28rem, calc(100vh - 24px));
   padding: var(--ui-space-2);
   background: var(--ui-surface);
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-lg);
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   display: flex;
@@ -619,7 +619,7 @@ function uniqueKeys<T>(
   width: 1rem;
   height: 1rem;
   border-radius: var(--ui-radius-round);
-  border: 1px solid var(--ui-border);
+  border: var(--ui-border-width) solid var(--ui-border);
   background: var(--_swatch, #fff);
   box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
   flex-shrink: 0;

package/vue/UiEditorTableOverlay.vue

@@ -695,7 +695,7 @@ function uniqueKeys<T>(
   width: 24px;
   height: 24px;
   padding: 0;
-  border: 1px solid var(--ui-affordance-near-color, var(--ui-border-strong));
+  border: var(--ui-border-width) solid var(--ui-affordance-near-color, var(--ui-border-strong));
   border-radius: var(--ui-radius-round);
   background: color-mix(in srgb, var(--ui-surface-elevated) 96%, transparent);
   color: var(--ui-affordance-near-color, var(--ui-text-secondary));
@@ -738,8 +738,8 @@ function uniqueKeys<T>(
 .handle:focus-visible,
 .selector:focus-visible,
 .cell-menu:focus-visible {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: 2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-focus-width);
 }
 
 .control.row {
@@ -772,13 +772,13 @@ function uniqueKeys<T>(
 }
 
 .control.row .line {
-  inset: -1px 0 auto;
-  height: 2px;
+  inset: calc(-0.5 * var(--ui-accent-line-width)) 0 auto;
+  height: var(--ui-accent-line-width);
 }
 
 .control.col .line {
-  inset: 0 auto 0 -1px;
-  width: 2px;
+  inset: 0 auto 0 calc(-0.5 * var(--ui-accent-line-width));
+  width: var(--ui-accent-line-width);
 }
 
 .control.active .line {
@@ -850,7 +850,7 @@ function uniqueKeys<T>(
   align-items: center;
   justify-content: center;
   padding: 0;
-  border: 1px solid transparent;
+  border: var(--ui-border-width) solid transparent;
   background: transparent;
   color: var(--ui-text-secondary);
   box-shadow: none;
@@ -967,19 +967,19 @@ function uniqueKeys<T>(
   position: absolute;
   z-index: 3;
   background: var(--ui-accent-solid);
-  box-shadow: 0 0 0 2px var(--ui-surface);
+  box-shadow: 0 0 0 var(--ui-border-width) var(--ui-surface);
   pointer-events: none;
 }
 
 .drop-indicator.row {
   left: 0;
   width: 100%;
-  height: 2px;
+  height: var(--ui-accent-line-width);
 }
 
 .drop-indicator.column {
   top: 0;
-  width: 2px;
+  width: var(--ui-accent-line-width);
   height: 100%;
 }
 

package/vue/UiEditorTableToolbar.vue

@@ -648,8 +648,8 @@ function uniqueKeys<T>(
   gap: var(--ui-space-1);
   padding: var(--ui-space-1);
   background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
-  border: 1px solid var(--ui-border-strong);
-  border-radius: calc(var(--ui-radius-md) + 2px);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
+  border-radius: calc(var(--ui-radius-md) + 2 * var(--ui-border-width));
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   backdrop-filter: blur(10px);
 }
@@ -739,7 +739,7 @@ function uniqueKeys<T>(
   max-width: min(17rem, calc(100vw - 24px));
   padding: var(--ui-space-1);
   background: var(--ui-surface);
-  border: 1px solid var(--ui-border-strong);
+  border: var(--ui-border-width) solid var(--ui-border-strong);
   border-radius: var(--ui-radius-md);
   box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
   display: flex;
@@ -754,7 +754,7 @@ function uniqueKeys<T>(
 .menu-section + .menu-section {
   margin-top: var(--ui-space-1);
   padding-top: var(--ui-space-1);
-  border-top: 1px solid var(--ui-border-divider);
+  border-top: var(--ui-border-width) solid var(--ui-border-divider);
 }
 
 .menu-heading {
@@ -788,7 +788,7 @@ function uniqueKeys<T>(
   width: 14px;
   height: 14px;
   flex: 0 0 14px;
-  border: 1px solid color-mix(in srgb, var(--ui-border) 80%, #000);
+  border: var(--ui-border-width) solid color-mix(in srgb, var(--ui-border) 80%, #000);
   border-radius: var(--ui-radius-round);
   background: var(--_swatch);
 }

package/vue/UiEditorToolbar.vue

@@ -146,7 +146,8 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     var(--ui-editor-toolbar-padding-inline, 12px);
   min-height: var(--ui-editor-toolbar-min-height, 48px);
   background: var(--ui-editor-toolbar-surface, var(--ui-surface));
-  border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
+  border-bottom: var(--ui-border-width) solid
+    var(--ui-editor-toolbar-border, var(--ui-border-divider));
 }
 
 /* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
@@ -221,7 +222,7 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%,
     transparent
   );
-  border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
+  border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
   border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
   box-shadow: var(
     --ui-editor-toolbar-floating-shadow,
@@ -238,7 +239,8 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     left: 0;
     right: 0;
     min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
-    border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-divider));
+    border-top: var(--ui-border-width) solid
+      var(--ui-editor-toolbar-border, var(--ui-border-divider));
     border-bottom: none;
     box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
   }
@@ -247,7 +249,7 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
     position: relative;
     inset: auto;
     min-height: auto;
-    border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
+    border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
     border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
     box-shadow: var(
       --ui-editor-toolbar-floating-shadow,

package/vue/UiFloatingActionButton.vue

@@ -203,8 +203,8 @@ const hostState = computed(() =>
 }
 
 [data-component~="ui-floating-action-button"]:focus-visible {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: 2px;
+  outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+  outline-offset: var(--ui-focus-width);
 }
 
 [data-component~="ui-floating-action-button"]:disabled {

package/vue/UiIcon.vue

@@ -160,6 +160,10 @@ const shapes = cycleCheckedComputed(() =>
       tag: 'path',
       d: 'M9 3v18',
     }, { tag: 'path', d: 'M15 3v18' }],
+    compass: [{
+      tag: 'path',
+      d: 'm16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z',
+    }, { tag: 'circle', cx: '12', cy: '12', r: '10' }],
     'credit-card': [{ tag: 'rect', width: '20', height: '14', x: '2', y: '5', rx: '2' }, {
       tag: 'line',
       x1: '2',
@@ -177,6 +181,10 @@ const shapes = cycleCheckedComputed(() =>
       tag: 'path',
       d: 'M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21',
     }, { tag: 'path', d: 'm5.082 11.09 8.828 8.828' }],
+    'external-link': [{ tag: 'path', d: 'M15 3h6v6' }, { tag: 'path', d: 'M10 14 21 3' }, {
+      tag: 'path',
+      d: 'M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6',
+    }],
     'file-text': [
       {
         tag: 'path',
@@ -230,6 +238,10 @@ const shapes = cycleCheckedComputed(() =>
       tag: 'path',
       d: 'm22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4',
     }],
+    history: [{ tag: 'path', d: 'M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8' }, {
+      tag: 'path',
+      d: 'M3 3v5h5',
+    }, { tag: 'path', d: 'M12 7v5l4 2' }],
     image: [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2', ry: '2' }, {
       tag: 'circle',
       cx: '9',
@@ -319,6 +331,10 @@ const shapes = cycleCheckedComputed(() =>
       tag: 'path',
       d: 'M3 9h18',
     }],
+    pencil: [{
+      tag: 'path',
+      d: 'M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z',
+    }, { tag: 'path', d: 'm15 5 4 4' }],
     pilcrow: [{ tag: 'path', d: 'M13 4v16' }, { tag: 'path', d: 'M17 4v16' }, {
       tag: 'path',
       d: 'M19 4H9.5a4.5 4.5 0 0 0 0 9H13',
@@ -344,6 +360,7 @@ const shapes = cycleCheckedComputed(() =>
       tag: 'path',
       d: 'M21 9H3',
     }, { tag: 'path', d: 'M21 15H3' }],
+    search: [{ tag: 'path', d: 'm21 21-4.34-4.34' }, { tag: 'circle', cx: '11', cy: '11', r: '8' }],
     settings: [{
       tag: 'path',
       d: 'M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915',
@@ -400,6 +417,20 @@ const shapes = cycleCheckedComputed(() =>
       tag: 'path',
       d: 'M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11',
     }],
+    unlink: [
+      {
+        tag: 'path',
+        d: 'm18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71',
+      },
+      {
+        tag: 'path',
+        d: 'm5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71',
+      },
+      { tag: 'line', x1: '8', x2: '8', y1: '2', y2: '5' },
+      { tag: 'line', x1: '2', x2: '5', y1: '8', y2: '8' },
+      { tag: 'line', x1: '16', x2: '16', y1: '19', y2: '22' },
+      { tag: 'line', x1: '19', x2: '22', y1: '16', y2: '16' },
+    ],
     'user-round': [{ tag: 'circle', cx: '12', cy: '8', r: '5' }, {
       tag: 'path',
       d: 'M20 21a8 8 0 0 0-16 0',

package/vue/UiIconButton.vue

@@ -459,7 +459,7 @@ function attribute(value: unknown): any {
   min-block-size: var(--ui-icon-button-size, var(--_size));
   padding: 0;
   margin: 0;
-  border: 1px solid transparent;
+  border: var(--ui-border-width) solid transparent;
   border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
   background-color: var(--ui-icon-button-surface, transparent);
   color: inherit;

package/vue/UiInput.vue

@@ -553,7 +553,11 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
   margin: 0;
   padding: var(--ui-space-2) var(--ui-space-3);
   appearance: none;
-  border: var(--ui-input-border-width, var(--_ui-default-input-border-width, 1px)) solid
+  padding-inline-start: var(--_ui-default-input-padding-inline-start, var(--ui-space-3));
+  border: var(
+    --ui-input-border-width,
+    var(--_ui-default-input-border-width, var(--ui-border-width))
+  ) solid
     var(
       --ui-input-border,
       var(--_ui-default-input-border, var(--ui-control-border, var(--ui-border-strong)))
@@ -656,7 +660,7 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
     var(
       --_ui-default-input-invalid-focus-shadow,
       var(--ui-control-inset),
-      0 0 0 3px color-mix(
+      0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
         in srgb,
         var(--ui-input-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
         transparent
@@ -677,9 +681,9 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
   [data-component~="ui-input"]:focus-visible {
     outline: var(
       --ui-input-focus-outline,
-      var(--_ui-default-input-focus-outline, 2px solid Highlight)
+      var(--_ui-default-input-focus-outline, var(--ui-focus-width) solid Highlight)
     );
-    outline-offset: 1px;
+    outline-offset: var(--ui-border-width);
   }
 }
 

package/vue/UiInputGroup.d.ts

@@ -14,13 +14,22 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    prefixKind: {
+        type: PropType<"text" | "icon" | null>;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: {
         type: PropType<boolean | null>;
         default: boolean;
     };
+    prefixKind: {
+        type: PropType<"text" | "icon" | null>;
+        default: string;
+    };
 }>> & Readonly<{}>, {
     disabled: boolean | null;
+    prefixKind: "text" | "icon" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;