@threadlabs/looma 0.23.6 → 0.23.8

package/vue/UiDisclosure.vue

@@ -57,6 +57,14 @@ const propValidityContract = {
         'Whether the disclosure is open initially or when set externally. The trigger toggles it from there, reporting each change as an open or close event.',
       default: false,
     },
+    requiredOpen: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'requiredopen' },
+      description:
+        'In a named exclusive group, keeps at least one member open. Clicking the last open trigger does not close it; opening another member transfers the open\n      state.',
+      default: false,
+    },
     summary: {
       type: { kind: 'terminal', name: 'string' },
       required: false,
@@ -65,6 +73,15 @@ const propValidityContract = {
         'The text of the trigger row that opens and closes the disclosure. It is the trigger button\'s accessible name, so name what the content is.',
       default: 'Details',
     },
+    variant: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'variant' },
+      description:
+        'Navigation shares icon columns, spacing, type, hover, and corners with Nav Item. Plain retains the standard disclosure treatment.',
+      values: ['plain', 'navigation'],
+      default: 'plain',
+    },
   },
 } as const
 const props = defineProps({
@@ -77,7 +94,9 @@ const props = defineProps({
   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 },
+  requiredOpen: { type: null as unknown as PropType<boolean | null>, default: false },
   summary: { type: null as unknown as PropType<string | null>, default: 'Details' },
+  variant: { type: null as unknown as PropType<'plain' | 'navigation' | null>, default: 'plain' },
 })
 const acceptedProps: Record<string, unknown> = {
   density: 'comfortable',
@@ -86,7 +105,9 @@ const acceptedProps: Record<string, unknown> = {
   headingLevel: 0,
   name: '',
   open: false,
+  requiredOpen: false,
   summary: 'Details',
+  variant: 'plain',
 }
 const checkedProps = computed(() => ({
   density: checkedProp<'comfortable' | 'compact'>(
@@ -131,6 +152,13 @@ const checkedProps = computed(() => ({
     'open',
     acceptedProps,
   ) as boolean,
+  requiredOpen: checkedProp<boolean>(
+    props['requiredOpen'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'requiredOpen',
+    acceptedProps,
+  ) as boolean,
   summary: checkedProp<string>(
     props['summary'],
     { kind: 'terminal', name: 'string' },
@@ -138,6 +166,13 @@ const checkedProps = computed(() => ({
     'summary',
     acceptedProps,
   ) as string,
+  variant: checkedProp<'plain' | 'navigation'>(
+    props['variant'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'variant',
+    acceptedProps,
+  ) as 'plain' | 'navigation',
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -199,6 +234,7 @@ const emit = defineEmits<{
 }>()
 
 const root = ref<HTMLElement | null>(null)
+const headingElement = useTemplateRef<HTMLElement>('heading')
 const triggerElement = useTemplateRef<HTMLElement>('trigger')
 const panelElement = useTemplateRef<HTMLElement>('panel')
 const internalOpen = ref(false)
@@ -267,6 +303,9 @@ const hostState = computed(() =>
     && `density=${encodeURIComponent(checkedProps.value.density)}`,
     internalOpen.value && 'internalOpen',
     checkedProps.value.fill && 'fill',
+    checkedProps.value.variant && 'variant',
+    checkedProps.value.variant != null
+    && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -304,10 +343,20 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['density', 'disabled', 'fill', 'headingLevel', 'name', 'open', 'summary'],
+  propNames: [
+    'density',
+    'disabled',
+    'fill',
+    'headingLevel',
+    'name',
+    'open',
+    'requiredOpen',
+    'summary',
+    'variant',
+  ],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
-  refs: { trigger: triggerElement, panel: panelElement },
+  refs: { heading: headingElement, trigger: triggerElement, panel: panelElement },
   state: { internalOpen, contentId, headingRole, headingAriaLevel },
 })
 </script>
@@ -323,11 +372,13 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
     :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)"
+    :data-required-open="reflectedProp('requiredOpen', 'required-open', checkedProps.requiredOpen, undefined, false)"
     :data-summary="reflectedProp('summary', 'summary', checkedProps.summary, undefined, false)"
+    :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-disclosure-state="hostState || undefined"
     ref="root"
   >
-    <div class="heading" :role="guarded" :aria-level="guardedBinding">
+    <div class="heading" :role="guarded" :aria-level="guardedBinding" ref="heading">
       <button
         class="trigger"
         type="button"
@@ -336,8 +387,11 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
         :disabled="checkedProps.disabled ?? undefined"
         ref="trigger"
       >
+        <span class="leading"><slot name="leading" /></span>
         <span class="summary"><slot name="summary">{{ checkedProps.summary }}</slot></span>
-        <slot name="indicator"><span class="chevron" aria-hidden="true"></span></slot>
+        <span class="indicator" aria-hidden="true"><slot name="indicator"><span
+              class="chevron"
+            ></span></slot></span>
       </button>
     </div>
     <div class="panel" :id="guardedBinding4" ref="panel">
@@ -390,8 +444,7 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
 }
 
 .trigger {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+  display: flex;
   gap: var(--ui-space-3);
   align-items: center;
   inline-size: 100%;
@@ -422,20 +475,42 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   cursor: not-allowed;
 }
 
+.summary {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.leading,
+.indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}
+.leading:empty {
+  display: none;
+}
+.indicator {
+  transition: transform var(--ui-motion-feedback) var(--ui-motion-feedback-ease);
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .indicator {
+  transform: rotate(180deg);
+}
+
 .chevron {
   inline-size: 0.5rem;
   block-size: 0.5rem;
   border-inline-end: 2px solid currentColor;
   border-block-end: 2px solid currentColor;
   transform: rotate(45deg) translate(-1px, -1px);
-  transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
 .panel {
   display: grid;
   grid-template-rows: 0fr;
-  transition: grid-template-rows var(--ui-motion-fast)
-    var(--ui-motion-ease-out, var(--ui-motion-ease));
+  transition:
+    grid-template-rows var(--ui-motion-reveal) var(--ui-motion-reveal-ease),
+    content-visibility var(--ui-motion-reveal) allow-discrete;
 }
 
 .panel-inner {
@@ -450,22 +525,22 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
 [data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .panel-inner {
   padding-block: 0 var(--ui-space-3);
 }
-[data-component~="ui-disclosure"][data-ui-disclosure-state~="internalOpen"] .chevron {
-  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;
+  flex: 0 0 var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size));
+  min-block-size: calc(
+    var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size)) + var(--ui-border-width)
+  );
+  transition: flex-grow var(--ui-motion-layout) var(--ui-motion-layout-ease);
   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;
+  flex-grow: 1;
 }
 [data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"] .heading {
   flex: none;
@@ -474,14 +549,8 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   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;
@@ -491,9 +560,48 @@ useComponentHost(() => import('../components/ui-disclosure/ui-disclosure.js'), {
   padding: 0;
 }
 
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"] .trigger {
+  gap: var(--ui-nav-gap);
+  padding-inline: var(--ui-nav-padding-inline);
+  min-block-size: var(--ui-nav-min-block-size);
+  padding-block: var(--ui-nav-padding-block);
+  border-radius: var(--ui-selection-radius);
+  font-size: var(--ui-font-size-md);
+  font-weight: var(--ui-font-normal);
+  color: var(--ui-text-secondary);
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"]
+  .trigger {
+  padding-inline: var(--ui-nav-compact-padding-inline);
+  padding-block: var(--ui-nav-compact-padding-block);
+  min-block-size: var(--ui-nav-compact-min-block-size);
+  font-size: var(--ui-font-size-sm);
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"]
+  .trigger:hover:not(:disabled) {
+  background: var(--ui-nav-hover-surface);
+  color: var(--ui-text-primary);
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="internalOpen"]
+  .trigger {
+  color: var(--ui-selection-text);
+}
+[data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"]
+  :is(.leading, .indicator) {
+  inline-size: var(--ui-nav-icon-size);
+  font-size: var(--ui-nav-icon-size);
+}
+@media (pointer: coarse) {
+  [data-component~="ui-disclosure"][data-ui-disclosure-state~="variant=navigation"][data-ui-disclosure-state~="density=compact"]
+    .trigger {
+    min-block-size: var(--ui-control-min-block-size);
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
+  [data-component~="ui-disclosure"][data-ui-disclosure-state~="fill"],
   .panel,
-  .chevron {
+  .indicator {
     transition: none;
   }
 }

package/vue/UiNavItem.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_15: {};
 type __VLS_Slots = {} & {
     leading?: (props: typeof __VLS_1) => any;
 } & {
@@ -7,11 +7,15 @@ type __VLS_Slots = {} & {
 } & {
     description?: (props: typeof __VLS_5) => any;
 } & {
-    leading?: (props: typeof __VLS_7) => any;
+    trailing?: (props: typeof __VLS_7) => any;
 } & {
-    default?: (props: typeof __VLS_9) => any;
+    leading?: (props: typeof __VLS_9) => any;
 } & {
-    description?: (props: typeof __VLS_11) => any;
+    default?: (props: typeof __VLS_11) => any;
+} & {
+    description?: (props: typeof __VLS_13) => any;
+} & {
+    trailing?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     as: {

package/vue/UiNavItem.vue

@@ -267,7 +267,8 @@ function attribute(value: unknown): any {
   ><span class="indicator" aria-hidden="true"></span>
     <span class="leading"><slot name="leading" /></span>
     <span class="content"><span class="label"><slot /></span>
-      <span class="description"><slot name="description" /></span></span></a>
+      <span class="description"><slot name="description" /></span></span>
+    <span class="trailing"><slot name="trailing" /></span></a>
   <button
     v-else
     data-component="ui-nav-item"
@@ -307,6 +308,7 @@ function attribute(value: unknown): any {
     <span class="leading"><slot name="leading" /></span>
     <span class="content"><span class="label"><slot /></span>
       <span class="description"><slot name="description" /></span></span>
+    <span class="trailing"><slot name="trailing" /></span>
   </button>
 </template>
 
@@ -340,13 +342,13 @@ function attribute(value: unknown): any {
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  gap: var(--ui-space-3);
+  gap: var(--ui-nav-gap);
   inline-size: var(--ui-nav-item-inline-size, 100%);
   min-inline-size: 0;
-  min-block-size: var(--ui-control-size, 2.5rem);
+  min-block-size: var(--ui-nav-min-block-size);
   margin: 0;
-  padding-block: var(--ui-space-2);
-  padding-inline: var(--ui-space-3);
+  padding-block: var(--ui-nav-padding-block);
+  padding-inline: var(--ui-nav-padding-inline);
   border: 0;
   border-radius: var(--ui-selection-radius);
   background: transparent;
@@ -363,7 +365,7 @@ function attribute(value: unknown): any {
 }
 
 [data-component~="ui-nav-item"]:hover:not([aria-current]) {
-  background: var(--ui-surface-hover);
+  background: var(--ui-nav-hover-surface);
   color: var(--ui-text-primary);
 }
 
@@ -412,12 +414,15 @@ function attribute(value: unknown): any {
   }
 }
 
-.leading {
+.leading,
+.trailing {
   display: inline-flex;
   flex: none;
   align-items: center;
+  justify-content: center;
+  inline-size: var(--ui-nav-icon-size);
   color: inherit;
-  font-size: var(--ui-font-size-lg);
+  font-size: var(--ui-nav-icon-size);
 }
 
 .content {
@@ -450,11 +455,10 @@ function attribute(value: unknown): any {
 }
 
 [data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"] {
-  min-block-size: var(--ui-control-size-sm);
-  padding-block: var(--ui-space-1);
-  padding-inline: var(--ui-space-2);
+  min-block-size: var(--ui-nav-compact-min-block-size);
+  padding-block: var(--ui-nav-compact-padding-block);
+  padding-inline: var(--ui-nav-compact-padding-inline);
 }
-[data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"] .leading,
 [data-component~="ui-nav-item"][data-ui-nav-item-state~="density=compact"] .label {
   font-size: var(--ui-font-size-sm);
 }
@@ -467,6 +471,7 @@ function attribute(value: unknown): any {
 
 /* An unused region takes no space. */
 .leading:empty,
+.trailing:empty,
 .description:empty {
   display: none;
 }

package/vue/UiSection.d.ts

@@ -35,7 +35,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     tone: "neutral" | "danger" | null;
-    variant: "card" | "plain" | "divided" | null;
+    variant: "plain" | "card" | "divided" | null;
     heading: string | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiSidebar.vue

@@ -224,6 +224,7 @@ const root = ref<HTMLElement | null>(null)
 const resizerElement = useTemplateRef<HTMLElement>('resizer')
 const internalCollapsed = ref(false)
 const drawer = ref(false)
+const resizing = ref(false)
 let guardedPrevious: any
 const guarded = computed(() => {
   if (
@@ -234,6 +235,7 @@ const guarded = computed(() => {
 })
 provide('html-next:ui-sidebar:internalCollapsed', internalCollapsed)
 provide('html-next:ui-sidebar:drawer', drawer)
+provide('html-next:ui-sidebar:resizing', resizing)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -257,6 +259,7 @@ const hostState = computed(() =>
     checkedProps.value.side && 'side',
     checkedProps.value.side != null && `side=${encodeURIComponent(checkedProps.value.side)}`,
     internalCollapsed.value && 'internalCollapsed',
+    resizing.value && 'resizing',
   ].filter(Boolean).join(' ')
 )
 
@@ -314,7 +317,7 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { resizer: resizerElement },
-  state: { internalCollapsed, drawer },
+  state: { internalCollapsed, drawer, resizing },
 })
 </script>
 
@@ -335,7 +338,7 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
     :data-ui-sidebar-state="hostState || undefined"
     ref="root"
   >
-    <div class="content"><slot /></div>
+    <div class="viewport"><div class="content"><slot /></div></div>
     <div
       class="resizer"
       role="separator"
@@ -369,10 +372,15 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
   syntax: "*";
   inherits: false;
 }
+@property --ui-sidebar-collapsed-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);
+  --_ui-sidebar-expanded-width: var(--_sidebar-width, var(--ui-sidebar-width, 280px));
 
   position: relative;
   box-sizing: border-box;
@@ -385,6 +393,9 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
   background: var(--ui-sidebar-surface, var(--ui-surface-default));
   border-inline-end: var(--ui-border-width) solid
     var(--ui-sidebar-border, var(--ui-border-divider));
+  transition:
+    inline-size var(--ui-motion-layout) var(--ui-motion-layout-ease),
+    visibility var(--ui-motion-layout);
 }
 
 [data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"] {
@@ -395,10 +406,17 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
 
 /* The panel's content scrolls, and each edge that hides content fades: the scroll fade every
    Looma scroller uses (see ui-scroll-area). */
-.content {
+.viewport {
   flex: 1;
   min-block-size: 0;
+  overflow: clip;
+}
+.content {
+  block-size: 100%;
+  inline-size: calc(var(--_ui-sidebar-expanded-width) - var(--ui-border-width));
+  min-block-size: 0;
   overflow: auto;
+  transition: transform var(--ui-motion-layout) var(--ui-motion-layout-ease);
   --_ui-scroll-fade-direction: to bottom;
   --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
   mask-image: linear-gradient(
@@ -423,7 +441,18 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
 
 /* Collapsed while docked. */
 [data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"]:not([popover]) {
-  display: none;
+  inline-size: var(--ui-sidebar-collapsed-width, 0px);
+  visibility: hidden;
+}
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="resizing"] {
+  transition: none;
+}
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"]:not([popover]) .content {
+  transform: translateX(-100%);
+}
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][data-ui-sidebar-state~="internalCollapsed"]:not([popover])
+  .content {
+  transform: translateX(100%);
 }
 
 .resizer {
@@ -506,9 +535,9 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
   transform: translateX(0);
   transition:
-    transform var(--ui-motion-base) var(--ui-motion-ease-out),
-    display var(--ui-motion-base) allow-discrete,
-    overlay var(--ui-motion-base) allow-discrete;
+    transform var(--ui-motion-reveal) var(--ui-motion-reveal-ease),
+    display var(--ui-motion-reveal) allow-discrete,
+    overlay var(--ui-motion-reveal) allow-discrete;
 }
 
 /* The author display above would otherwise override the UA rule that hides a closed popover. */
@@ -538,9 +567,14 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
 [data-component~="ui-sidebar"][popover]::backdrop {
   background: var(--_ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
 }
+[data-component~="ui-sidebar"][popover] .content {
+  inline-size: 100%;
+}
 
 @media (prefers-reduced-motion: reduce) {
-  [data-component~="ui-sidebar"][popover] {
+  [data-component~="ui-sidebar"],
+  [data-component~="ui-sidebar"][popover],
+  .content {
     transition: none;
   }
 }

package/vue/chunks/UiBadge.js

@@ -42,11 +42,12 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				},
 				required: false,
 				target: { attribute: "shape" },
-				description: "Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set\n      aria-hidden when the surrounding control already names that state.",
+				description: "Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set\n      aria-hidden when the surrounding control already names that state. square is a fixed rounded square for an icon or single glyph beside a heading; hide a\n      decorative icon when adjacent words name it.",
 				values: [
 					"pill",
 					"tag",
-					"dot"
+					"dot",
+					"square"
 				],
 				default: "pill"
 			},
@@ -57,7 +58,7 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				},
 				required: false,
 				target: { attribute: "size" },
-				description: "Scale. xs is a compact count beside small controls; md is the usual text badge.",
+				description: "Scale. xs is a compact count beside small controls; md is the usual text badge. A square is 24px at xs and 32px at md with default spacing.",
 				values: ["xs", "md"],
 				default: "md"
 			},
@@ -168,6 +169,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-84736a7c"]]);
+}), [["__scopeId", "data-v-470f6e28"]]);
 //#endregion
 export { UiBadge_default as t };