@threadlabs/looma 0.28.7 → 0.28.9

package/vue/components.css

@@ -5123,6 +5123,353 @@ svg[data-v-4a58a364-s] {
 }
 }
 
+@property --ui-input-group-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-group-invalid-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-input-group-invalid-focus-shadow {
+  syntax: "*";
+  inherits: false;
+}
+/* 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. The action slot takes one button at the end, inside the border, for the one
+   thing the field is for ("Continue" after a site's address), so it reads as the field's action
+   and not the form's. */
+
+/* The frame takes its input's size, so a small group lines up with small buttons and fields. */
+
+/* The ring shows when the field's input would show its own: when it is focus-visible, which a
+   text input is for a pointer as well as a keyboard. A focused action button draws its own. */
+
+/* Forced colors drop box shadows, so the focus ring becomes an outline. */
+
+/* Fixed text is part of the value, but should not look editable. */
+
+/* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
+   small button sits inside it with the difference split evenly, and the field keeps its height. */
+
+/* Multiline text owns the first row; its action remains inside the same frame below it. */
+
+/* The same textarea keeps its full resizeable box. Its text reserves the action's live width,
+   so a translated label or pending indicator cannot cover what the person types. */
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-input-group) {
+:scope:where([data-v-8b90cc23]:scope) {
+    /* The group's own border and height stand for the input's, so the group is a lone Input's height.
+       Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
+    --_ui-default-input-border-width: 0;
+    --_ui-default-input-min-block-size: 0;
+    --_ui-default-input-border: transparent;
+    --_ui-default-input-border-hover: transparent;
+    --_ui-default-input-focus-border: transparent;
+    --_ui-default-input-invalid-border: transparent;
+    --_ui-default-input-invalid-focus-shadow: none;
+    --_ui-default-input-shadow: none;
+    --_ui-default-input-focus-shadow: none;
+    --_ui-default-input-focus-outline: none;
+    --_ui-default-input-radius: 0;
+    --_ui-default-input-surface: transparent;
+    --_ui-default-textarea-border-width: 0;
+    --_ui-default-textarea-border: transparent;
+    --_ui-default-textarea-border-hover: transparent;
+    --_ui-default-textarea-focus-border: transparent;
+    --_ui-default-textarea-invalid-border: transparent;
+    --_ui-default-textarea-invalid-focus-shadow: none;
+    --_ui-default-textarea-shadow: none;
+    --_ui-default-textarea-focus-shadow: none;
+    --_ui-default-textarea-focus-outline: none;
+    --_ui-default-textarea-radius: 0;
+    --_ui-default-textarea-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);
+    /* The frame reads the shared control tokens with a lone Input's fallbacks, so the two match. */
+    border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
+    border-radius: var(--ui-input-group-radius, var(--ui-field-radius, var(--ui-radius-md)));
+    background: var(--ui-control-surface, var(--ui-surface-elevated));
+    box-shadow: var(--ui-control-inset);
+    overflow: hidden;
+    /* A press anywhere in the frame focuses the input. */
+    cursor: text;
+    transition:
+      border-color var(--ui-motion-fast) var(--ui-motion-ease),
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+}
+:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="variant=subtle"]) {
+    border-color: var(--ui-border);
+    background: var(--ui-surface-muted);
+    box-shadow: none;
+}
+:scope:where([data-v-8b90cc23]:scope):is(:has(.field [data-ui-input-state~="size=sm"])) {
+    min-block-size: var(--ui-control-size-sm);
+}
+:scope:where([data-v-8b90cc23]:scope):is(:has(.field [data-ui-input-state~="size=lg"])) {
+    min-block-size: var(--ui-control-size-lg);
+}
+@media (pointer: coarse) {
+:scope:where([data-v-8b90cc23]:scope) {
+      min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+}
+:scope:where([data-v-8b90cc23]:scope):is(:has(.field [data-ui-input-state~="size=sm"])) {
+      min-block-size: var(--ui-control-min-block-size);
+}
+}
+:scope:where([data-v-8b90cc23]:scope):is(:hover:not(:has(:is(input, textarea):focus, :is(input, textarea):disabled, :is(input, textarea):read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid])))) {
+    border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+}
+:scope:where([data-v-8b90cc23]:scope):is(:has(.field :is(input, textarea):focus-visible)) {
+    border-color: var(--ui-control-focus, var(--ui-accent-solid));
+    box-shadow:
+      var(--ui-control-inset),
+      var(--ui-control-focus-halo-shadow);
+}
+:scope:where([data-v-8b90cc23]:scope):is(:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))) {
+    border-color: var(
+      --ui-input-group-invalid-border,
+      var(--ui-field-danger, var(--ui-danger-solid))
+    );
+}
+:scope:where([data-v-8b90cc23]:scope):is(:has(:is(input, textarea):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible)) {
+    box-shadow: var(
+      --ui-input-group-invalid-focus-shadow,
+      var(--ui-control-inset),
+      0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+        in srgb,
+        var(--ui-input-group-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+        transparent
+      )
+    );
+}
+@media (forced-colors: active) {
+:scope:where([data-v-8b90cc23]:scope):is(:has(:is(input, textarea):focus-visible)) {
+      outline: var(--ui-focus-width) solid Highlight;
+      outline-offset: var(--ui-border-width);
+}
+}
+:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="disabled"]),
+  :scope:where([data-v-8b90cc23]:scope):is(:has(:is(input, textarea):disabled)) {
+    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+    box-shadow: none;
+    cursor: not-allowed;
+}
+.field[data-v-8b90cc23] {
+    display: flex;
+    flex: 1;
+    min-inline-size: 0;
+}
+.affix[data-v-8b90cc23] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    padding-inline: var(--ui-space-2);
+    color: var(--ui-text-muted);
+    font-family: var(--ui-font-family-mono);
+    font-size: var(--ui-font-size-sm);
+    white-space: nowrap;
+}
+.affix[data-v-8b90cc23]:has([slot="prefix"]), .affix[data-v-8b90cc23]:has([slot="suffix"]) {
+    background: var(--ui-surface-muted);
+}
+.affix[data-v-8b90cc23]:has([slot="prefix"]) {
+    border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
+}
+.affix[data-v-8b90cc23]:has([slot="suffix"]) {
+    border-inline-start: var(--ui-border-width) solid var(--ui-border-divider);
+}
+:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="prefixKind=icon"]) {
+    --_ui-default-input-padding-inline-start: var(--ui-space-2);
+}
+:scope[data-ui-input-group-state~="prefixKind=icon"] .affix[data-v-8b90cc23]:first-child {
+    padding-inline-end: 0;
+    border-inline-end: 0;
+    background: transparent;
+}
+.action[data-v-8b90cc23] {
+    display: flex;
+    flex: none;
+    align-items: center;
+    padding-inline: var(--ui-space-1);
+}
+:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="multiline"]) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+}
+:scope[data-ui-input-group-state~="multiline"] .field[data-v-8b90cc23] {
+    grid-column: 2;
+}
+:scope[data-ui-input-group-state~="multiline"] .action[data-v-8b90cc23] {
+    grid-column: 1 / -1;
+    justify-content: end;
+    padding: var(--ui-space-2);
+    padding-block-start: 0;
+}
+:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]) {
+    --_ui-default-textarea-padding-inline-end: calc(
+      var(--_ui-input-group-action-inline-size, 7rem) + var(--ui-space-3)
+    );
+}
+:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
+    .field[data-v-8b90cc23] {
+    grid-row: 1;
+}
+:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
+    .action[data-v-8b90cc23] {
+    grid-column: 2;
+    grid-row: 1;
+    align-self: start;
+    justify-self: end;
+    padding: var(--ui-space-2);
+}
+.affix[data-v-8b90cc23]:empty, .action[data-v-8b90cc23]:empty {
+    display: none;
+}
+:scope:where([data-v-8b90cc23]:scope):is([hidden]) {
+    display: none;
+}
+}
+
+/* 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;
+}
+
+/* Slot wrappers own their line boxes even when an app makes buttons inherit body typography. */
+
+/* An unused region takes no space. */
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-search-result-row) {
+:scope:where([data-v-475aa1ba]:scope) {
+    appearance: none;
+    inline-size: 100%;
+    min-block-size: var(--ui-search-result-row-min-height, 56px);
+    margin: 0;
+    padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3));
+    padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4));
+    display: flex;
+    align-items: flex-start;
+    gap: var(--ui-search-result-row-gap, var(--ui-space-3));
+    background: var(--ui-search-result-row-surface, transparent);
+    border: var(--ui-border-width) solid var(--ui-search-result-row-border, transparent);
+    border-radius: var(--ui-selection-radius);
+    color: inherit;
+    cursor: pointer;
+    text-align: left;
+    transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
+}
+:scope:where([data-v-475aa1ba]:scope):is([data-ui-search-result-row-state~="density=compact"]) {
+    min-block-size: var(--ui-search-result-row-min-height, 3.125rem);
+    padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-1));
+    padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-2));
+    gap: var(--ui-search-result-row-gap, var(--ui-space-2));
+    align-items: center;
+    font-family: var(--ui-font-family-sans, sans-serif);
+}
+:scope[data-ui-search-result-row-state~="density=compact"] .title[data-v-475aa1ba] {
+    font-size: var(--ui-font-size-sm);
+    line-height: var(--ui-line-height);
+}
+:scope[data-ui-search-result-row-state~="density=compact"] .meta[data-v-475aa1ba] {
+    font-size: var(--ui-font-size-xs);
+    line-height: var(--ui-line-height);
+}
+:scope:where([data-v-475aa1ba]:scope):is(:hover:enabled) {
+    background: var(
+      --ui-search-result-row-hover-surface,
+      var(--_ui-selection-context-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%))
+    );
+}
+:scope:where([data-v-475aa1ba]:scope):is([data-ui-search-result-row-state~="selected"]) {
+    background: var(
+      --ui-search-result-row-selected-bg,
+      var(--_ui-selection-context-surface, var(--ui-selection-surface))
+    );
+    color: var(--_ui-selection-context-text, var(--ui-selection-text));
+}
+:scope:where([data-v-475aa1ba]:scope):is(:focus-visible) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: calc(-1 * var(--ui-focus-width));
+}
+:scope:where([data-v-475aa1ba]:scope):is(:disabled) {
+    background: var(--ui-disabled-surface);
+    color: var(--ui-disabled-text);
+    cursor: not-allowed;
+}
+.leading[data-v-475aa1ba], .trailing[data-v-475aa1ba] {
+    display: inline-flex;
+    align-items: flex-start;
+    flex-shrink: 0;
+}
+.content[data-v-475aa1ba] {
+    min-inline-size: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+.title[data-v-475aa1ba], .meta[data-v-475aa1ba], .excerpt[data-v-475aa1ba] {
+    display: block;
+    min-inline-size: 0;
+}
+.leading[data-v-475aa1ba]:empty, .meta[data-v-475aa1ba]:empty, .excerpt[data-v-475aa1ba]:empty, .trailing[data-v-475aa1ba]:empty {
+    display: none;
+}
+[slot="title"][data-v-475aa1ba-s],[slot="meta"][data-v-475aa1ba-s],[slot="excerpt"][data-v-475aa1ba-s] {
+    display: block;
+    margin: 0;
+}
+@media (forced-colors: active) {
+:scope:where([data-v-475aa1ba]:scope):is([data-ui-search-result-row-state~="selected"]:not(:focus-visible):not(:disabled)) {
+      outline: var(--ui-border-width) solid Highlight;
+      outline-offset: calc(-1 * var(--ui-border-width));
+}
+}
+:scope:where([data-v-475aa1ba]:scope):is([hidden]) {
+    display: none;
+}
+}
+
 /* The highlight and the initials circle share a tint; on the highlighted row the circle takes
        the surface and a fine accent ring, so the initials stay visible. */
 @scope (.ui-editor-mention-menu) {
@@ -6381,303 +6728,85 @@ svg[data-v-3d55b8dc-s] {
     background: transparent;
     touch-action: none;
 }
-.handle[data-v-73881051]::after {
-    content: "";
-    position: absolute;
-    inset: 8px;
-    background: var(--ui-surface);
-    border: var(--ui-border-width) solid var(--ui-focus-ring);
-    border-radius: var(--ui-radius-sm);
-}
-.handle[data-v-73881051]:focus-visible {
-    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-    border-radius: var(--ui-radius-sm);
-}
-.handle[data-corner="top-left"][data-v-73881051] {
-    top: -12px;
-    left: -12px;
-    cursor: nwse-resize;
-}
-.handle[data-corner="top-right"][data-v-73881051] {
-    top: -12px;
-    right: -12px;
-    cursor: nesw-resize;
-}
-.handle[data-corner="bottom-left"][data-v-73881051] {
-    bottom: -12px;
-    left: -12px;
-    cursor: nesw-resize;
-}
-.handle[data-corner="bottom-right"][data-v-73881051] {
-    bottom: -12px;
-    right: -12px;
-    cursor: nwse-resize;
-}
-.handles[hidden][data-v-73881051], :scope:where([data-v-73881051]:scope):is([hidden]) {
-    display: none;
-}
-@media (max-width: 767px) {
-:scope:where([data-v-73881051]:scope):is(:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])) {
-      float: none;
-      inline-size: 100%;
-      padding-inline: 0;
-}
-:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
-      .handles[data-v-73881051] {
-      display: none;
-}
-}
-@media (pointer: coarse) {
-.handle[data-v-73881051] {
-      inline-size: 44px;
-      block-size: 44px;
-}
-.handle[data-v-73881051]::after {
-      inset: 18px;
-}
-.handle[data-corner="top-left"][data-v-73881051] {
-      top: -22px;
-      left: -22px;
-}
-.handle[data-corner="top-right"][data-v-73881051] {
-      top: -22px;
-      right: -22px;
-}
-.handle[data-corner="bottom-left"][data-v-73881051] {
-      bottom: -22px;
-      left: -22px;
-}
-.handle[data-corner="bottom-right"][data-v-73881051] {
-      bottom: -22px;
-      right: -22px;
-}
-}
-@media (forced-colors: active) {
-:scope[data-ui-image-state~="selected"] .frame[data-v-73881051], .handle[data-v-73881051]:focus-visible {
-      outline-color: Highlight;
-}
-.handle[data-v-73881051]::after {
-      border-color: Highlight;
-      background: Canvas;
-}
-}
-}
-
-@property --ui-input-group-radius {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-group-invalid-border {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-group-invalid-focus-shadow {
-  syntax: "*";
-  inherits: false;
-}
-/* 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. The action slot takes one button at the end, inside the border, for the one
-   thing the field is for ("Continue" after a site's address), so it reads as the field's action
-   and not the form's. */
-
-/* The frame takes its input's size, so a small group lines up with small buttons and fields. */
-
-/* The ring shows when the field's input would show its own: when it is focus-visible, which a
-   text input is for a pointer as well as a keyboard. A focused action button draws its own. */
-
-/* Forced colors drop box shadows, so the focus ring becomes an outline. */
-
-/* Fixed text is part of the value, but should not look editable. */
-
-/* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
-   small button sits inside it with the difference split evenly, and the field keeps its height. */
-
-/* Multiline text owns the first row; its action remains inside the same frame below it. */
-
-/* The same textarea keeps its full resizeable box. Its text reserves the action's live width,
-   so a translated label or pending indicator cannot cover what the person types. */
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-input-group) {
-:scope:where([data-v-8b90cc23]:scope) {
-    /* The group's own border and height stand for the input's, so the group is a lone Input's height.
-       Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
-    --_ui-default-input-border-width: 0;
-    --_ui-default-input-min-block-size: 0;
-    --_ui-default-input-border: transparent;
-    --_ui-default-input-border-hover: transparent;
-    --_ui-default-input-focus-border: transparent;
-    --_ui-default-input-invalid-border: transparent;
-    --_ui-default-input-invalid-focus-shadow: none;
-    --_ui-default-input-shadow: none;
-    --_ui-default-input-focus-shadow: none;
-    --_ui-default-input-focus-outline: none;
-    --_ui-default-input-radius: 0;
-    --_ui-default-input-surface: transparent;
-    --_ui-default-textarea-border-width: 0;
-    --_ui-default-textarea-border: transparent;
-    --_ui-default-textarea-border-hover: transparent;
-    --_ui-default-textarea-focus-border: transparent;
-    --_ui-default-textarea-invalid-border: transparent;
-    --_ui-default-textarea-invalid-focus-shadow: none;
-    --_ui-default-textarea-shadow: none;
-    --_ui-default-textarea-focus-shadow: none;
-    --_ui-default-textarea-focus-outline: none;
-    --_ui-default-textarea-radius: 0;
-    --_ui-default-textarea-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);
-    /* The frame reads the shared control tokens with a lone Input's fallbacks, so the two match. */
-    border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
-    border-radius: var(--ui-input-group-radius, var(--ui-field-radius, var(--ui-radius-md)));
-    background: var(--ui-control-surface, var(--ui-surface-elevated));
-    box-shadow: var(--ui-control-inset);
-    overflow: hidden;
-    /* A press anywhere in the frame focuses the input. */
-    cursor: text;
-    transition:
-      border-color var(--ui-motion-fast) var(--ui-motion-ease),
-      box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
-}
-:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="variant=subtle"]) {
-    border-color: var(--ui-border);
-    background: var(--ui-surface-muted);
-    box-shadow: none;
-}
-:scope:where([data-v-8b90cc23]:scope):is(:has(.field [data-ui-input-state~="size=sm"])) {
-    min-block-size: var(--ui-control-size-sm);
-}
-:scope:where([data-v-8b90cc23]:scope):is(:has(.field [data-ui-input-state~="size=lg"])) {
-    min-block-size: var(--ui-control-size-lg);
-}
-@media (pointer: coarse) {
-:scope:where([data-v-8b90cc23]:scope) {
-      min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-}
-:scope:where([data-v-8b90cc23]:scope):is(:has(.field [data-ui-input-state~="size=sm"])) {
-      min-block-size: var(--ui-control-min-block-size);
-}
-}
-:scope:where([data-v-8b90cc23]:scope):is(:hover:not(:has(:is(input, textarea):focus, :is(input, textarea):disabled, :is(input, textarea):read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid])))) {
-    border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
-}
-:scope:where([data-v-8b90cc23]:scope):is(:has(.field :is(input, textarea):focus-visible)) {
-    border-color: var(--ui-control-focus, var(--ui-accent-solid));
-    box-shadow:
-      var(--ui-control-inset),
-      var(--ui-control-focus-halo-shadow);
-}
-:scope:where([data-v-8b90cc23]:scope):is(:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))) {
-    border-color: var(
-      --ui-input-group-invalid-border,
-      var(--ui-field-danger, var(--ui-danger-solid))
-    );
-}
-:scope:where([data-v-8b90cc23]:scope):is(:has(:is(input, textarea):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible)) {
-    box-shadow: var(
-      --ui-input-group-invalid-focus-shadow,
-      var(--ui-control-inset),
-      0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
-        in srgb,
-        var(--ui-input-group-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
-        transparent
-      )
-    );
+.handle[data-v-73881051]::after {
+    content: "";
+    position: absolute;
+    inset: 8px;
+    background: var(--ui-surface);
+    border: var(--ui-border-width) solid var(--ui-focus-ring);
+    border-radius: var(--ui-radius-sm);
 }
-@media (forced-colors: active) {
-:scope:where([data-v-8b90cc23]:scope):is(:has(:is(input, textarea):focus-visible)) {
-      outline: var(--ui-focus-width) solid Highlight;
-      outline-offset: var(--ui-border-width);
+.handle[data-v-73881051]:focus-visible {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    border-radius: var(--ui-radius-sm);
 }
+.handle[data-corner="top-left"][data-v-73881051] {
+    top: -12px;
+    left: -12px;
+    cursor: nwse-resize;
 }
-:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="disabled"]),
-  :scope:where([data-v-8b90cc23]:scope):is(:has(:is(input, textarea):disabled)) {
-    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-    box-shadow: none;
-    cursor: not-allowed;
+.handle[data-corner="top-right"][data-v-73881051] {
+    top: -12px;
+    right: -12px;
+    cursor: nesw-resize;
 }
-.field[data-v-8b90cc23] {
-    display: flex;
-    flex: 1;
-    min-inline-size: 0;
+.handle[data-corner="bottom-left"][data-v-73881051] {
+    bottom: -12px;
+    left: -12px;
+    cursor: nesw-resize;
 }
-.affix[data-v-8b90cc23] {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    padding-inline: var(--ui-space-2);
-    color: var(--ui-text-muted);
-    font-family: var(--ui-font-family-mono);
-    font-size: var(--ui-font-size-sm);
-    white-space: nowrap;
+.handle[data-corner="bottom-right"][data-v-73881051] {
+    bottom: -12px;
+    right: -12px;
+    cursor: nwse-resize;
 }
-.affix[data-v-8b90cc23]:has([slot="prefix"]), .affix[data-v-8b90cc23]:has([slot="suffix"]) {
-    background: var(--ui-surface-muted);
+.handles[hidden][data-v-73881051], :scope:where([data-v-73881051]:scope):is([hidden]) {
+    display: none;
 }
-.affix[data-v-8b90cc23]:has([slot="prefix"]) {
-    border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
+@media (max-width: 767px) {
+:scope:where([data-v-73881051]:scope):is(:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])) {
+      float: none;
+      inline-size: 100%;
+      padding-inline: 0;
 }
-.affix[data-v-8b90cc23]:has([slot="suffix"]) {
-    border-inline-start: var(--ui-border-width) solid var(--ui-border-divider);
+:scope:is(:scope[data-ui-image-state~="placement=wrap-left"], :scope[data-ui-image-state~="placement=wrap-right"])
+      .handles[data-v-73881051] {
+      display: none;
 }
-:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="prefixKind=icon"]) {
-    --_ui-default-input-padding-inline-start: var(--ui-space-2);
 }
-:scope[data-ui-input-group-state~="prefixKind=icon"] .affix[data-v-8b90cc23]:first-child {
-    padding-inline-end: 0;
-    border-inline-end: 0;
-    background: transparent;
+@media (pointer: coarse) {
+.handle[data-v-73881051] {
+      inline-size: 44px;
+      block-size: 44px;
 }
-.action[data-v-8b90cc23] {
-    display: flex;
-    flex: none;
-    align-items: center;
-    padding-inline: var(--ui-space-1);
+.handle[data-v-73881051]::after {
+      inset: 18px;
 }
-:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="multiline"]) {
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
+.handle[data-corner="top-left"][data-v-73881051] {
+      top: -22px;
+      left: -22px;
 }
-:scope[data-ui-input-group-state~="multiline"] .field[data-v-8b90cc23] {
-    grid-column: 2;
+.handle[data-corner="top-right"][data-v-73881051] {
+      top: -22px;
+      right: -22px;
 }
-:scope[data-ui-input-group-state~="multiline"] .action[data-v-8b90cc23] {
-    grid-column: 1 / -1;
-    justify-content: end;
-    padding: var(--ui-space-2);
-    padding-block-start: 0;
+.handle[data-corner="bottom-left"][data-v-73881051] {
+      bottom: -22px;
+      left: -22px;
 }
-:scope:where([data-v-8b90cc23]:scope):is([data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]) {
-    --_ui-default-textarea-padding-inline-end: calc(
-      var(--_ui-input-group-action-inline-size, 7rem) + var(--ui-space-3)
-    );
+.handle[data-corner="bottom-right"][data-v-73881051] {
+      bottom: -22px;
+      right: -22px;
 }
-:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
-    .field[data-v-8b90cc23] {
-    grid-row: 1;
 }
-:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
-    .action[data-v-8b90cc23] {
-    grid-column: 2;
-    grid-row: 1;
-    align-self: start;
-    justify-self: end;
-    padding: var(--ui-space-2);
+@media (forced-colors: active) {
+:scope[data-ui-image-state~="selected"] .frame[data-v-73881051], .handle[data-v-73881051]:focus-visible {
+      outline-color: Highlight;
 }
-.affix[data-v-8b90cc23]:empty, .action[data-v-8b90cc23]:empty {
-    display: none;
+.handle[data-v-73881051]::after {
+      border-color: Highlight;
+      background: Canvas;
 }
-:scope:where([data-v-8b90cc23]:scope):is([hidden]) {
-    display: none;
 }
 }
 
@@ -7675,135 +7804,6 @@ legend[data-v-49ebfb5d] + * {
 }
 }
 
-/* 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;
-}
-
-/* Slot wrappers own their line boxes even when an app makes buttons inherit body typography. */
-
-/* An unused region takes no space. */
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-search-result-row) {
-:scope:where([data-v-475aa1ba]:scope) {
-    appearance: none;
-    inline-size: 100%;
-    min-block-size: var(--ui-search-result-row-min-height, 56px);
-    margin: 0;
-    padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3));
-    padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4));
-    display: flex;
-    align-items: flex-start;
-    gap: var(--ui-search-result-row-gap, var(--ui-space-3));
-    background: var(--ui-search-result-row-surface, transparent);
-    border: var(--ui-border-width) solid var(--ui-search-result-row-border, transparent);
-    border-radius: var(--ui-selection-radius);
-    color: inherit;
-    cursor: pointer;
-    text-align: left;
-    transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
-}
-:scope:where([data-v-475aa1ba]:scope):is([data-ui-search-result-row-state~="density=compact"]) {
-    min-block-size: var(--ui-search-result-row-min-height, 3.125rem);
-    padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-1));
-    padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-2));
-    gap: var(--ui-search-result-row-gap, var(--ui-space-2));
-    align-items: center;
-    font-family: var(--ui-font-family-sans, sans-serif);
-}
-:scope[data-ui-search-result-row-state~="density=compact"] .title[data-v-475aa1ba] {
-    font-size: var(--ui-font-size-sm);
-    line-height: var(--ui-line-height);
-}
-:scope[data-ui-search-result-row-state~="density=compact"] .meta[data-v-475aa1ba] {
-    font-size: var(--ui-font-size-xs);
-    line-height: var(--ui-line-height);
-}
-:scope:where([data-v-475aa1ba]:scope):is(:hover:enabled) {
-    background: var(
-      --ui-search-result-row-hover-surface,
-      var(--_ui-selection-context-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%))
-    );
-}
-:scope:where([data-v-475aa1ba]:scope):is([data-ui-search-result-row-state~="selected"]) {
-    background: var(
-      --ui-search-result-row-selected-bg,
-      var(--_ui-selection-context-surface, var(--ui-selection-surface))
-    );
-    color: var(--_ui-selection-context-text, var(--ui-selection-text));
-}
-:scope:where([data-v-475aa1ba]:scope):is(:focus-visible) {
-    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-    outline-offset: calc(-1 * var(--ui-focus-width));
-}
-:scope:where([data-v-475aa1ba]:scope):is(:disabled) {
-    background: var(--ui-disabled-surface);
-    color: var(--ui-disabled-text);
-    cursor: not-allowed;
-}
-.leading[data-v-475aa1ba], .trailing[data-v-475aa1ba] {
-    display: inline-flex;
-    align-items: flex-start;
-    flex-shrink: 0;
-}
-.content[data-v-475aa1ba] {
-    min-inline-size: 0;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-.title[data-v-475aa1ba], .meta[data-v-475aa1ba], .excerpt[data-v-475aa1ba] {
-    display: block;
-    min-inline-size: 0;
-}
-.leading[data-v-475aa1ba]:empty, .meta[data-v-475aa1ba]:empty, .excerpt[data-v-475aa1ba]:empty, .trailing[data-v-475aa1ba]:empty {
-    display: none;
-}
-[slot="title"][data-v-475aa1ba-s],[slot="meta"][data-v-475aa1ba-s],[slot="excerpt"][data-v-475aa1ba-s] {
-    display: block;
-    margin: 0;
-}
-@media (forced-colors: active) {
-:scope:where([data-v-475aa1ba]:scope):is([data-ui-search-result-row-state~="selected"]:not(:focus-visible):not(:disabled)) {
-      outline: var(--ui-border-width) solid Highlight;
-      outline-offset: calc(-1 * var(--ui-border-width));
-}
-}
-:scope:where([data-v-475aa1ba]:scope):is([hidden]) {
-    display: none;
-}
-}
-
 /* This component's hooks style the element they are set on, and never a nested one. */
 @property --ui-search-shell-border {
   syntax: "*";