@aortl/admin-css 0.16.0 → 0.16.2

package/dist/admin.scoped.css

@@ -724,6 +724,8 @@
       outline-color: var(--color-focus);
     }
     list-style: none;
+    overflow-wrap: break-word;
+    min-width: 0;
   }
 :scope._ao-accordion-summary::-webkit-details-marker, :scope ._ao-accordion-summary::-webkit-details-marker {
     display: none;
@@ -754,6 +756,7 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     color: var(--color-text);
+    overflow-wrap: break-word;
   }
 :scope._ao-accordion-item::details-content, :scope ._ao-accordion-item::details-content {
     opacity: 0;
@@ -1205,6 +1208,7 @@
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
     color: var(--color-text-muted);
+    overflow-wrap: break-word;
   }
 :scope._ao-breadcrumbs > ol, :scope ._ao-breadcrumbs > ol {
     margin: calc(var(--spacing) * 0);
@@ -1700,6 +1704,7 @@
     &:focus-visible {
       outline-color: var(--color-focus);
     }
+    overflow-wrap: break-word;
   }
 :scope._ao-link > :is(i, svg), :scope ._ao-link > :is(i, svg) {
     flex-shrink: 0;
@@ -2094,6 +2099,8 @@
     cursor: pointer;
     align-items: center;
     gap: calc(var(--spacing) * 2);
+    overflow-wrap: break-word;
+    min-width: 0;
   }
 :scope label:has(> ._ao-checkbox:disabled), :scope label:has(> ._ao-checkbox[data-disabled]) {
     cursor: not-allowed;
@@ -2201,6 +2208,8 @@
     cursor: pointer;
     align-items: center;
     gap: calc(var(--spacing) * 2);
+    overflow-wrap: break-word;
+    min-width: 0;
   }
 :scope label:has(> ._ao-radio:disabled), :scope label:has(> ._ao-radio[data-disabled]) {
     cursor: not-allowed;
@@ -2299,6 +2308,8 @@
     cursor: pointer;
     align-items: center;
     gap: calc(var(--spacing) * 3);
+    overflow-wrap: break-word;
+    min-width: 0;
   }
 :scope label:has(> ._ao-switch:disabled), :scope label:has(> ._ao-switch[data-disabled]) {
     cursor: not-allowed;
@@ -2472,6 +2483,8 @@
     outline-style: none;
     -webkit-user-select: none;
     user-select: none;
+    overflow-wrap: break-word;
+    min-width: 0;
   }
 :scope._ao-select-item[data-highlighted], :scope ._ao-select-item[data-highlighted] {
     background-color: var(--color-surface-muted);
@@ -2515,6 +2528,8 @@
     color: var(--color-text);
     --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    overflow-wrap: break-word;
+    min-width: 0;
   }
 :scope._ao-card-body, :scope ._ao-card-body {
     display: flex;
@@ -2532,6 +2547,7 @@
     line-height: var(--leading-tight);
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
+    min-width: 0;
   }
 :scope._ao-card-header, :scope ._ao-card-header {
     display: flex;
@@ -2668,6 +2684,7 @@
     width: calc(100% - 2rem);
     max-width: 32rem;
     max-height: calc(100dvh - 2rem);
+    overflow-wrap: break-word;
     opacity: 1;
     transform: translateY(0) scale(1);
     transition: display 150ms allow-discrete, overlay 150ms allow-discrete, opacity 150ms ease-out, transform 150ms ease-out;
@@ -2714,6 +2731,7 @@
     line-height: var(--leading-tight);
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
+    min-width: 0;
   }
 :scope._ao-dialog-description, :scope ._ao-dialog-description {
     margin-top: calc(var(--spacing) * -2);
@@ -2795,6 +2813,7 @@
     display: flex;
     flex-direction: column;
     gap: calc(var(--spacing) * 1.5);
+    overflow-wrap: break-word;
   }
 :scope._ao-field-row, :scope ._ao-field-row {
     flex-direction: row;
@@ -3183,6 +3202,8 @@
     &:disabled {
       opacity: 50%;
     }
+    overflow-wrap: break-word;
+    min-width: 0;
   }
 :scope._ao-menu-item[aria-disabled="true"], :scope ._ao-menu-item[aria-disabled="true"] {
     cursor: not-allowed;
@@ -3963,6 +3984,9 @@
     white-space: nowrap;
     color: var(--color-text-muted);
   }
+:scope._ao-table :where(td), :scope ._ao-table :where(td), :scope._ao-table-cell, :scope ._ao-table-cell {
+    overflow-wrap: break-word;
+  }
 :scope._ao-table > :last-child > tr:last-child :where(td), :scope ._ao-table > :last-child > tr:last-child :where(td), :scope._ao-table > :last-child > tr:last-child ._ao-table-cell, :scope ._ao-table > :last-child > tr:last-child ._ao-table-cell {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 0px;
@@ -4162,6 +4186,7 @@
     --tw-leading: var(--leading-normal);
     line-height: var(--leading-normal);
     color: var(--color-text);
+    overflow-wrap: break-word;
   }
 :scope._ao-prose :where(p, ul, ol, blockquote, pre, table, figure), :scope ._ao-prose :where(p, ul, ol, blockquote, pre, table, figure) {
     margin-block: calc(var(--spacing) * 3);
@@ -4614,8 +4639,4 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-:scope._ao-select-all, :scope ._ao-select-all {
-    -webkit-user-select: all;
-    user-select: all;
-  }
 }

package/dist/admin.scoped.min.css

@@ -132,12 +132,12 @@
 :scope._ao-accordion-summary, :scope ._ao-accordion-summary{cursor:pointer;align-items:center;gap:calc(var(--spacing) * 2);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-text);-webkit-user-select:none;user-select:none;display:flex}
 @media (hover:hover){:scope._ao-accordion-summary:hover, :scope ._ao-accordion-summary:hover{background-color:var(--color-surface-muted)}}
 :scope._ao-accordion-summary:focus-visible, :scope ._ao-accordion-summary:focus-visible{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--color-focus)}
-:scope._ao-accordion-summary, :scope ._ao-accordion-summary{list-style:none}
+:scope._ao-accordion-summary, :scope ._ao-accordion-summary{overflow-wrap:break-word;min-width:0;list-style:none}
 :scope._ao-accordion-summary::-webkit-details-marker, :scope ._ao-accordion-summary::-webkit-details-marker{display:none}
 :scope._ao-accordion-summary>:is(i,svg), :scope ._ao-accordion-summary>:is(i,svg){flex-shrink:0}
 :scope._ao-accordion-summary:after, :scope ._ao-accordion-summary:after{content:"";border-bottom:2px solid;border-right:2px solid;flex-shrink:0;width:.5rem;height:.5rem;margin-left:auto;transition:transform .15s;transform:rotate(45deg)}
 :scope._ao-accordion-item[open]>._ao-accordion-summary:after, :scope ._ao-accordion-item[open]>._ao-accordion-summary:after{transform:rotate(-135deg)}
-:scope._ao-accordion-content, :scope ._ao-accordion-content{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text)}
+:scope._ao-accordion-content, :scope ._ao-accordion-content{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text);overflow-wrap:break-word}
 :scope._ao-accordion-item::details-content, :scope ._ao-accordion-item::details-content{opacity:0;content-visibility:visible;height:0;transition:opacity .2s,height .2s;overflow:clip}
 :scope._ao-accordion-item[open]::details-content, :scope ._ao-accordion-item[open]::details-content{opacity:1;height:auto}
 :scope._ao-alert, :scope ._ao-alert{gap:calc(var(--spacing) * 1);border-radius:var(--radius-md);border-style:var(--tw-border-style);width:100%;padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text);overflow-wrap:break-word;border-width:1px;flex-direction:column;display:flex}
@@ -221,7 +221,7 @@
 :scope._ao-progress:indeterminate::-moz-progress-bar, :scope ._ao-progress:indeterminate::-moz-progress-bar{background-color:#0000}
 @media (prefers-reduced-motion:reduce){:scope._ao-progress:indeterminate, :scope ._ao-progress:indeterminate{animation-duration:3s}}
 @keyframes progress-indeterminate{0%{background-position:100% 0}to{background-position:0 0}}
-:scope._ao-breadcrumbs, :scope ._ao-breadcrumbs{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text-muted)}
+:scope._ao-breadcrumbs, :scope ._ao-breadcrumbs{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text-muted);overflow-wrap:break-word}
 :scope._ao-breadcrumbs>ol, :scope ._ao-breadcrumbs>ol{margin:calc(var(--spacing) * 0);align-items:center;gap:calc(var(--spacing) * 1.5);padding:calc(var(--spacing) * 0);flex-wrap:wrap;list-style-type:none;display:inline-flex}
 :scope._ao-breadcrumb-item, :scope ._ao-breadcrumb-item{align-items:center;gap:calc(var(--spacing) * 1.5);color:var(--color-text-muted);text-decoration-line:none;display:inline-flex}
 @media (hover:hover){:scope._ao-breadcrumb-item:hover, :scope ._ao-breadcrumb-item:hover{color:var(--color-text)}}
@@ -312,6 +312,7 @@
 :scope._ao-link, :scope ._ao-link{align-items:center;gap:calc(var(--spacing) * 1);border-radius:var(--radius-sm);color:var(--color-link);text-underline-offset:2px;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;text-decoration-line:underline;transition-duration:.15s;display:inline-flex}
 @media (hover:hover){:scope._ao-link:hover, :scope ._ao-link:hover{color:var(--color-link-hover)}}
 :scope._ao-link:focus-visible, :scope ._ao-link:focus-visible{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--color-focus)}
+:scope._ao-link, :scope ._ao-link{overflow-wrap:break-word}
 :scope._ao-link>:is(i,svg), :scope ._ao-link>:is(i,svg){flex-shrink:0}
 :scope._ao-link-external, :scope ._ao-link-external{--link-external-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 7 7 17'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E")}
 :scope._ao-link-external:after, :scope ._ao-link-external:after{content:"";width:.85em;height:.85em;-webkit-mask:var(--link-external-arrow) center / contain no-repeat;-webkit-mask:var(--link-external-arrow) center / contain no-repeat;-webkit-mask:var(--link-external-arrow) center / contain no-repeat;mask:var(--link-external-arrow) center / contain no-repeat;background-color:currentColor;flex:none}
@@ -382,7 +383,7 @@
 :scope input._ao-checkbox:checked, :scope input._ao-checkbox:indeterminate{border-color:var(--color-primary);background-color:var(--color-primary)}
 @media (hover:hover){:scope:is(input._ao-checkbox:checked,input._ao-checkbox:indeterminate):hover, :scope :is(input._ao-checkbox:checked,input._ao-checkbox:indeterminate):hover{background-color:var(--color-primary-hover)}}
 :scope input._ao-checkbox:checked:after, :scope input._ao-checkbox:indeterminate:after{content:"";width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3);background-color:var(--color-primary-content);-webkit-mask:var(--checkbox-check) center / contain no-repeat;-webkit-mask:var(--checkbox-check) center / contain no-repeat;-webkit-mask:var(--checkbox-check) center / contain no-repeat;mask:var(--checkbox-check) center / contain no-repeat}
-:scope label:has(>._ao-checkbox){cursor:pointer;align-items:center;gap:calc(var(--spacing) * 2);display:inline-flex}
+:scope label:has(>._ao-checkbox){cursor:pointer;align-items:center;gap:calc(var(--spacing) * 2);overflow-wrap:break-word;min-width:0;display:inline-flex}
 :scope label:has(>._ao-checkbox:disabled), :scope label:has(>._ao-checkbox[data-disabled]){cursor:not-allowed;opacity:.6}
 :scope._ao-radio, :scope ._ao-radio{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4);cursor:pointer;border-style:var(--tw-border-style);background-color:var(--color-surface);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;border-width:1px;border-radius:3.40282e38px;flex-shrink:0;justify-content:center;align-items:center;transition-duration:.15s;display:inline-flex}
 :scope._ao-radio:focus-visible, :scope ._ao-radio:focus-visible{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--color-focus)}
@@ -400,7 +401,7 @@
 :scope input._ao-radio:checked:after{content:"";width:calc(var(--spacing) * 1.5);height:calc(var(--spacing) * 1.5);background-color:var(--color-primary-content);border-radius:3.40282e38px}
 :scope._ao-radio-group, :scope ._ao-radio-group{gap:calc(var(--spacing) * 4);flex-wrap:wrap;display:inline-flex}
 :scope._ao-radio-group-vertical, :scope ._ao-radio-group-vertical{align-items:flex-start;gap:calc(var(--spacing) * 2);flex-direction:column}
-:scope label:has(>._ao-radio){cursor:pointer;align-items:center;gap:calc(var(--spacing) * 2);display:inline-flex}
+:scope label:has(>._ao-radio){cursor:pointer;align-items:center;gap:calc(var(--spacing) * 2);overflow-wrap:break-word;min-width:0;display:inline-flex}
 :scope label:has(>._ao-radio:disabled), :scope label:has(>._ao-radio[data-disabled]){cursor:not-allowed;opacity:.6}
 :scope._ao-switch, :scope ._ao-switch{height:calc(var(--spacing) * 5);width:calc(var(--spacing) * 9);cursor:pointer;border-style:var(--tw-border-style);padding:calc(var(--spacing) * .5);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;border-width:1px;border-color:#0000;border-radius:3.40282e38px;flex-shrink:0;align-items:center;transition-duration:.15s;display:inline-flex;position:relative}
 :scope._ao-switch:focus-visible, :scope ._ao-switch:focus-visible{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--color-focus)}
@@ -414,7 +415,7 @@
 :scope input._ao-switch:checked{background-color:var(--color-primary)}
 :scope input._ao-switch:before{content:"";width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4);background-color:var(--color-paper);--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;border-radius:3.40282e38px;transition-duration:.15s}
 :scope input._ao-switch:checked:before{--tw-translate-x:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}
-:scope label:has(>._ao-switch){cursor:pointer;align-items:center;gap:calc(var(--spacing) * 3);display:inline-flex}
+:scope label:has(>._ao-switch){cursor:pointer;align-items:center;gap:calc(var(--spacing) * 3);overflow-wrap:break-word;min-width:0;display:inline-flex}
 :scope label:has(>._ao-switch:disabled), :scope label:has(>._ao-switch[data-disabled]){cursor:not-allowed;opacity:.6}
 :scope._ao-select, :scope ._ao-select{cursor:pointer;justify-content:space-between;align-items:center;gap:calc(var(--spacing) * 2);border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface);width:100%;padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);text-align:left;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:1;color:var(--color-text);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;-webkit-user-select:none;user-select:none;line-height:1;transition-duration:.15s;display:inline-flex}
 @media (hover:hover){:scope._ao-select:hover, :scope ._ao-select:hover{border-color:var(--color-border-strong)}}
@@ -437,15 +438,15 @@
 :scope._ao-select-popup, :scope ._ao-select-popup{max-height:calc(var(--spacing) * 72);min-width:var(--anchor-width);border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface);padding-block:calc(var(--spacing) * 1);color:var(--color-text);--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);transition-property:opacity,transform;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.1s;--tw-outline-style:none;outline-style:none;transition-duration:.1s;overflow:auto}
 :scope._ao-select-popup[data-starting-style], :scope ._ao-select-popup[data-starting-style], :scope._ao-select-popup[data-ending-style], :scope ._ao-select-popup[data-ending-style]{opacity:0}
 :scope._ao-select-popup[data-starting-style], :scope ._ao-select-popup[data-starting-style]{--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}
-:scope._ao-select-item, :scope ._ao-select-item{cursor:pointer;align-items:center;gap:calc(var(--spacing) * 2);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-outline-style:none;-webkit-user-select:none;user-select:none;outline-style:none;display:flex}
+:scope._ao-select-item, :scope ._ao-select-item{cursor:pointer;align-items:center;gap:calc(var(--spacing) * 2);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-outline-style:none;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;outline-style:none;min-width:0;display:flex}
 :scope._ao-select-item[data-highlighted], :scope ._ao-select-item[data-highlighted]{background-color:var(--color-surface-muted)}
 :scope._ao-select-item[data-selected], :scope ._ao-select-item[data-selected]{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}
 :scope._ao-select-item[data-disabled], :scope ._ao-select-item[data-disabled]{cursor:not-allowed;opacity:.5}
 :scope._ao-select-item-indicator, :scope ._ao-select-item-indicator{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4);color:var(--color-primary);justify-content:center;align-items:center;margin-left:auto;display:inline-flex}
 :scope._ao-select-group-label, :scope ._ao-select-group-label{padding-inline:calc(var(--spacing) * 3);padding-top:calc(var(--spacing) * 2);padding-bottom:calc(var(--spacing) * 1);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide);color:var(--color-text-muted);text-transform:uppercase}
-:scope._ao-card, :scope ._ao-card{border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface-muted);color:var(--color-text);--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);flex-direction:column;display:flex}
+:scope._ao-card, :scope ._ao-card{border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface-muted);color:var(--color-text);--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);overflow-wrap:break-word;flex-direction:column;min-width:0;display:flex}
 :scope._ao-card-body, :scope ._ao-card-body{gap:calc(var(--spacing) * 3);padding:calc(var(--spacing) * 5);flex-direction:column;display:flex}
-:scope._ao-card-title, :scope ._ao-card-title{align-items:center;gap:calc(var(--spacing) * 2);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);display:flex}
+:scope._ao-card-title, :scope ._ao-card-title{align-items:center;gap:calc(var(--spacing) * 2);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);min-width:0;display:flex}
 :scope._ao-card-header, :scope ._ao-card-header{align-items:center;gap:calc(var(--spacing) * 2);display:flex}
 :scope._ao-card-toolbar, :scope ._ao-card-toolbar{margin-top:calc(var(--spacing) * -.5);align-items:center;gap:calc(var(--spacing) * 1);margin-left:auto;display:flex}
 :scope._ao-card-toolbar :is(i,svg), :scope ._ao-card-toolbar :is(i,svg){font-size:1.25rem}
@@ -473,14 +474,14 @@
 :scope._ao-card-info ._ao-stat-card-value, :scope ._ao-card-info ._ao-stat-card-value{color:var(--color-info)}
 :scope._ao-card-success ._ao-stat-card-value, :scope ._ao-card-success ._ao-stat-card-value{color:var(--color-success)}
 :scope._ao-card-danger ._ao-stat-card-value, :scope ._ao-card-danger ._ao-stat-card-value{color:var(--color-danger)}
-:scope._ao-dialog, :scope ._ao-dialog{border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface);padding:calc(var(--spacing) * 0);color:var(--color-text);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);opacity:1;width:calc(100% - 2rem);max-width:32rem;max-height:calc(100dvh - 2rem);transition:display .15s allow-discrete, overlay .15s allow-discrete, opacity .15s ease-out, transform .15s ease-out;flex-direction:column;margin:auto;transform:translateY(0)scale(1)}
+:scope._ao-dialog, :scope ._ao-dialog{border-radius:var(--radius-xl);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-surface);padding:calc(var(--spacing) * 0);color:var(--color-text);--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);overflow-wrap:break-word;opacity:1;width:calc(100% - 2rem);max-width:32rem;max-height:calc(100dvh - 2rem);transition:display .15s allow-discrete, overlay .15s allow-discrete, opacity .15s ease-out, transform .15s ease-out;flex-direction:column;margin:auto;transform:translateY(0)scale(1)}
 :scope._ao-dialog[open], :scope ._ao-dialog[open]{display:flex}
 :scope._ao-dialog::backdrop, :scope ._ao-dialog::backdrop{background:var(--color-scrim);transition:display .15s allow-discrete, overlay .15s allow-discrete, background .15s ease-out}
 @starting-style{:scope._ao-dialog[open], :scope ._ao-dialog[open]{opacity:0;transform:translateY(-.5rem)scale(.98)}:scope._ao-dialog[open]::backdrop, :scope ._ao-dialog[open]::backdrop{background:0 0}}
 :scope._ao-dialog-sm, :scope ._ao-dialog-sm{max-width:24rem}
 :scope._ao-dialog-lg, :scope ._ao-dialog-lg{max-width:48rem}
 :scope._ao-dialog-header, :scope ._ao-dialog-header{align-items:flex-start;gap:calc(var(--spacing) * 3);padding-inline:calc(var(--spacing) * 5);padding-top:calc(var(--spacing) * 5);padding-bottom:calc(var(--spacing) * 3);display:flex}
-:scope._ao-dialog-title, :scope ._ao-dialog-title{margin:calc(var(--spacing) * 0);align-items:center;gap:calc(var(--spacing) * 2);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);flex:1;display:flex}
+:scope._ao-dialog-title, :scope ._ao-dialog-title{margin:calc(var(--spacing) * 0);align-items:center;gap:calc(var(--spacing) * 2);font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);flex:1;min-width:0;display:flex}
 :scope._ao-dialog-description, :scope ._ao-dialog-description{margin-top:calc(var(--spacing) * -2);margin-bottom:calc(var(--spacing) * 3);padding-inline:calc(var(--spacing) * 5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text-muted)}
 :scope._ao-dialog-body, :scope ._ao-dialog-body{min-height:calc(var(--spacing) * 0);gap:calc(var(--spacing) * 3);padding-inline:calc(var(--spacing) * 5);padding-block:calc(var(--spacing) * 3);flex-direction:column;flex:1;display:flex;overflow-y:auto}
 :scope._ao-dialog>form, :scope ._ao-dialog>form{min-height:calc(var(--spacing) * 0);flex-direction:column;flex:1;display:flex}
@@ -488,7 +489,7 @@
 :scope._ao-dialog-close, :scope ._ao-dialog-close{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7);cursor:pointer;border-radius:var(--radius-md);color:var(--color-text-muted);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.15s;background-color:#0000;flex-shrink:0;justify-content:center;align-items:center;transition-duration:.15s;display:inline-flex}
 @media (hover:hover){:scope._ao-dialog-close:hover, :scope ._ao-dialog-close:hover{background-color:var(--color-surface-strong);color:var(--color-text)}}
 :scope._ao-dialog-close:focus-visible, :scope ._ao-dialog-close:focus-visible{outline-style:var(--tw-outline-style);outline-offset:2px;outline-width:2px;outline-color:var(--color-focus)}
-:scope._ao-field, :scope ._ao-field{gap:calc(var(--spacing) * 1.5);flex-direction:column;display:flex}
+:scope._ao-field, :scope ._ao-field{gap:calc(var(--spacing) * 1.5);overflow-wrap:break-word;flex-direction:column;display:flex}
 :scope._ao-field-row, :scope ._ao-field-row{align-items:center;gap:calc(var(--spacing) * 3);flex-direction:row}
 :scope._ao-field-label, :scope ._ao-field-label{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:1;--tw-font-weight:var(--font-weight-medium);line-height:1;font-weight:var(--font-weight-medium);color:var(--color-text)}
 :scope._ao-field-label[data-required]:after, :scope ._ao-field-label[data-required]:after{content:" *";color:var(--color-danger)}
@@ -550,7 +551,9 @@
 :scope._ao-menu-item, :scope ._ao-menu-item{cursor:pointer;align-items:center;gap:calc(var(--spacing) * 2);border-style:var(--tw-border-style);width:100%;padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);text-align:left;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:1;color:var(--color-text);-webkit-user-select:none;user-select:none;background-color:#0000;border-width:0;line-height:1;text-decoration-line:none;display:flex}
 @media (hover:hover){:scope._ao-menu-item:hover, :scope ._ao-menu-item:hover{background-color:var(--color-surface-muted)}}
 :scope._ao-menu-item:focus-visible, :scope ._ao-menu-item:focus-visible{background-color:var(--color-surface-muted);--tw-outline-style:none;outline-style:none}
-:scope._ao-menu-item:disabled, :scope ._ao-menu-item:disabled, :scope._ao-menu-item[aria-disabled=true], :scope ._ao-menu-item[aria-disabled=true]{cursor:not-allowed;opacity:.5}
+:scope._ao-menu-item:disabled, :scope ._ao-menu-item:disabled{cursor:not-allowed;opacity:.5}
+:scope._ao-menu-item, :scope ._ao-menu-item{overflow-wrap:break-word;min-width:0}
+:scope._ao-menu-item[aria-disabled=true], :scope ._ao-menu-item[aria-disabled=true]{cursor:not-allowed;opacity:.5}
 :scope._ao-menu-trigger>:is(i,svg), :scope ._ao-menu-trigger>:is(i,svg), :scope._ao-menu-item>:is(i,svg), :scope ._ao-menu-item>:is(i,svg){flex-shrink:0}
 :scope._ao-menu-separator, :scope ._ao-menu-separator{margin-block:calc(var(--spacing) * 1);border-style:var(--tw-border-style);background-color:var(--color-border);border-width:0;height:1px}
 :scope._ao-menu-group, :scope ._ao-menu-group{flex-direction:column;display:flex}
@@ -645,6 +648,7 @@
 :scope._ao-table, :scope ._ao-table{border-collapse:collapse;width:100%;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-text)}
 :scope._ao-table :where(th,td), :scope ._ao-table :where(th,td), :scope._ao-table-cell, :scope ._ao-table-cell, :scope._ao-table-header-cell, :scope ._ao-table-header-cell{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);text-align:left;vertical-align:middle}
 :scope._ao-table :where(thead th), :scope ._ao-table :where(thead th), :scope._ao-table-header-cell, :scope ._ao-table-header-cell{border-bottom-color:var(--color-border-strong);background-color:var(--color-surface-muted);--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);white-space:nowrap;color:var(--color-text-muted)}
+:scope._ao-table :where(td), :scope ._ao-table :where(td), :scope._ao-table-cell, :scope ._ao-table-cell{overflow-wrap:break-word}
 :scope._ao-table>:last-child>tr:last-child :where(td), :scope ._ao-table>:last-child>tr:last-child :where(td), :scope._ao-table>:last-child>tr:last-child ._ao-table-cell, :scope ._ao-table>:last-child>tr:last-child ._ao-table-cell{border-bottom-style:var(--tw-border-style);border-bottom-width:0}
 :scope._ao-table :where(th,td)[data-align=right], :scope ._ao-table :where(th,td)[data-align=right]{text-align:right}
 :scope._ao-table :where(th,td)[data-align=center], :scope ._ao-table :where(th,td)[data-align=center]{text-align:center}
@@ -678,7 +682,7 @@
 :scope._ao-tooltip-wrap:hover>._ao-tooltip, :scope ._ao-tooltip-wrap:hover>._ao-tooltip, :scope._ao-tooltip-wrap:focus-within>._ao-tooltip, :scope ._ao-tooltip-wrap:focus-within>._ao-tooltip{visibility:visible;opacity:1;transition:opacity .15s ease-out .2s,visibility 0s linear .2s}
 :scope._ao-code-block, :scope ._ao-code-block{border-radius:var(--radius-lg);background-color:var(--color-code-surface);padding:calc(var(--spacing) * 3);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-code-text);white-space:pre-wrap;word-wrap:break-word;overflow:auto}
 :scope._ao-code-block-nowrap, :scope ._ao-code-block-nowrap{white-space:pre;word-wrap:normal}
-:scope._ao-prose, :scope ._ao-prose{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:var(--leading-normal);line-height:var(--leading-normal);color:var(--color-text)}
+:scope._ao-prose, :scope ._ao-prose{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-leading:var(--leading-normal);line-height:var(--leading-normal);color:var(--color-text);overflow-wrap:break-word}
 :scope._ao-prose :where(p,ul,ol,blockquote,pre,table,figure), :scope ._ao-prose :where(p,ul,ol,blockquote,pre,table,figure){margin-block:calc(var(--spacing) * 3)}
 :scope._ao-prose>:first-child, :scope ._ao-prose>:first-child{margin-top:0}
 :scope._ao-prose>:last-child, :scope ._ao-prose>:last-child{margin-bottom:0}
@@ -764,5 +768,4 @@
 :scope._ao-text-right, :scope ._ao-text-right{text-align:right}
 :scope._ao-tabular-nums, :scope ._ao-tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}
 :scope._ao-ring, :scope ._ao-ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}
-:scope._ao-select-all, :scope ._ao-select-all{-webkit-user-select:all;user-select:all}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aortl/admin-css",
-  "version": "0.16.0",
+  "version": "0.16.2",
   "description": "Pre-built CSS design system. Drop in via <link> and use semantic class names.",
   "keywords": [
     "components",
@@ -19,7 +19,8 @@
   "files": [
     "dist",
     "src",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "type": "module",
   "sideEffects": [

package/src/components/accordion.css

@@ -28,20 +28,20 @@
            hover:bg-surface-muted
            focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
     list-style: none;
+    /* Let a long label break and shrink instead of widening the row. */
+    overflow-wrap: break-word;
+    min-width: 0;
   }
 
   .accordion-summary::-webkit-details-marker {
     display: none;
   }
 
-  /* Keep a leading icon at its intrinsic size; the chevron is the `::after`
-     below, which is already `flex-shrink: 0`. */
   .accordion-summary > :is(i, svg) {
     flex-shrink: 0;
   }
 
-  /* Chevron — pushed to the end with margin-left: auto so any number of
-     leading items (label, optional icon) sit together on the start side. */
+  /* Chevron */
   .accordion-summary::after {
     content: "";
     width: 0.5rem;
@@ -60,14 +60,11 @@
 
   .accordion-content {
     @apply px-4 py-3 text-sm text-text border-t border-border;
+    overflow-wrap: break-word;
   }
 
-  /* Smooth open/close via ::details-content. With interpolate-size enabled
-     on the parent, the height auto ↔ 0 transition animates instead of
-     snapping. content-visibility is pinned to visible so the closed content
-     still contributes to intrinsic width — without this, a shrink-to-fit
-     parent reflows narrower on close. Browsers without ::details-content
-     degrade to the native instant toggle. */
+  /* content-visibility stays visible so the closed content still contributes
+     intrinsic width — without it a shrink-to-fit parent reflows narrower on close. */
   .accordion-item::details-content {
     opacity: 0;
     height: 0;

package/src/components/alert.css

@@ -1,19 +1,13 @@
 @layer components {
   .alert {
     @apply flex flex-col gap-1 w-full px-3 py-2 rounded-md border text-sm text-text;
-    /* Inherited by the title, description, and any bare-text body so long
-       words/URLs break instead of overflowing the (often grid-tracked) body. */
     overflow-wrap: break-word;
   }
 
-  /* Leading icon as a direct child switches the layout to a two-column grid:
-     icon spans all rows on the left, title/description stack on the right.
-     No wrapper needed — works with `<i class="ti …">`, `@tabler/icons-react`,
-     or any other inline SVG. */
+  /* A leading icon switches the layout to a two-column grid: icon left, text right. */
   .alert:has(> :is(i, svg):first-child) {
     display: grid;
-    /* `minmax(0, 1fr)` (not the default `minmax(auto, 1fr)`) lets the text
-       column shrink below its longest word so the body wraps. */
+    /* `minmax(0, 1fr)` lets the text column shrink below its longest word. */
     grid-template-columns: auto minmax(0, 1fr);
     column-gap: 0.5rem;
     row-gap: 0.25rem;
@@ -25,10 +19,7 @@
     line-height: 1.25;
   }
 
-  /* With a title/description, declare two explicit rows so the icon can span
-     them (`grid-row: 1 / -1` only resolves correctly against an explicit grid)
-     and force the text parts into column 2 so the description doesn't wrap
-     under the icon. */
+  /* Explicit rows — the icon's `grid-row: 1 / -1` only resolves against an explicit grid. */
   .alert:has(> :is(i, svg):first-child):has(> .alert-title) {
     grid-template-rows: auto auto;
     align-items: start;
@@ -38,20 +29,14 @@
     grid-row: 1 / -1;
   }
 
-  /* Grid items default to `min-width: auto` and won't shrink below their
-     longest word; `min-width: 0` lets the title/description wrap inside the
-     text column. */
+  /* Grid items default to `min-width: auto` and won't shrink below their longest word. */
   .alert > :is(.alert-title, .alert-description) {
     grid-column: 2;
     min-width: 0;
   }
 
-  /* Solid status fill — the variant color carries the signal, and the title,
-     leading icon, and body all sit on top in the matching `-content` color
-     (white on the colored accents, black on bright yellow). Title/icon inherit
-     that content color from the root, so no per-variant text rule is needed.
-     The description drops to 85% opacity to read as secondary text without
-     introducing a second hue. */
+  /* Solid status fills. Title and icon inherit the `-content` color from the
+     root, so no per-variant text rule is needed. */
   .alert-info {
     @apply bg-info border-info text-info-content;
   }

package/src/components/app-shell.css

@@ -1,8 +1,6 @@
 @layer components {
-  /* Layout container — CSS grid with named areas. Sidebar/footer slots are
-     optional; modifier classes adjust the template. The sidebar column uses
-     `auto` so the .sidebar's own width drives it — collapse/peek modes change
-     the sidebar's intrinsic width instead of recomputing the grid here. */
+  /* The sidebar column is `auto` so the .sidebar's own width drives it —
+     collapse/peek modes change the sidebar's intrinsic width, not this grid. */
   .app-shell {
     --app-shell-sidebar-w: 240px;
     --app-shell-sidebar-w-collapsed: 56px;

package/src/components/badge.css

@@ -12,11 +12,7 @@
     flex-shrink: 0;
   }
 
-  /* Variants — solid status fills, matching the alert palette so danger/
-     success/etc. stay coherent across status indicators and chips in tables.
-     Each sits on the full-strength status color with the matching `-content`
-     text (white on the colored accents, black on bright yellow). The bare
-     `.badge` (no modifier) renders the neutral look, folded into the base. */
+  /* Variants — solid status fills matching the alert palette; bare `.badge` is the neutral look. */
   .badge-info {
     @apply bg-info text-info-content border-info;
   }

package/src/components/breadcrumbs.css

@@ -1,6 +1,7 @@
 @layer components {
   .breadcrumbs {
     @apply text-sm text-text-muted;
+    overflow-wrap: break-word;
   }
 
   .breadcrumbs > ol {
@@ -14,15 +15,11 @@
            focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
   }
 
-  /* `aria-current` on the last item promotes it to body text weight. Non-links
-     stay non-interactive — same selector matches both <a aria-current> and
-     <span aria-current>. */
   .breadcrumb-item[aria-current="page"] {
     @apply text-text font-medium pointer-events-none;
   }
 
-  /* Slash separator. Use `<span class="breadcrumb-separator">` between items;
-     swap content via a child icon when you want a chevron instead. */
+  /* An empty separator renders a slash; a child icon replaces it. */
   .breadcrumb-separator {
     @apply inline-flex items-center text-text-muted/60 select-none;
   }
@@ -36,9 +33,7 @@
     height: 0.875rem;
   }
 
-  /* Setting a width on a flex item doesn't stop it from shrinking, so pin the
-     shrink factor too — keeps crumb and separator icons from squishing when a
-     long label tightens the row. */
+  /* A width alone doesn't stop a flex item from shrinking. */
   .breadcrumb-item > :is(i, svg),
   .breadcrumb-separator > :is(i, svg) {
     flex-shrink: 0;

package/src/components/button-group.css

@@ -7,11 +7,8 @@
     @apply rounded-none relative focus-visible:z-10;
   }
 
-  /* Split-button support: a <details class="menu"> child sits in the strip
-     alongside .btn children, with its .menu-trigger getting the same edge
-     treatment as the buttons around it. inline-flex on the details makes
-     the <summary> stretch vertically to match sibling .btn heights, so an
-     icon-only trigger doesn't end up shorter than its neighbours. */
+  /* Split buttons: a <details class="menu"> sits in the strip; inline-flex
+     stretches its <summary> to match sibling .btn heights. */
   .btn-group > .menu {
     @apply relative focus-visible:z-10;
     display: inline-flex;
@@ -21,10 +18,7 @@
     @apply rounded-none;
   }
 
-  /* Horizontal-only: overlap left edges, round outer left/right corners,
-     and paint the seam between adjacent items as a left-side divider.
-     Scoped with :not(.btn-group-vertical) so vertical groups (which share
-     the .btn-group class) don't inherit horizontal edge treatment. */
+  /* Horizontal-only — vertical groups also carry .btn-group, hence the :not() scope. */
   .btn-group:not(.btn-group-vertical) > .btn:not(:first-child),
   .btn-group:not(.btn-group-vertical) > .menu:not(:first-child) {
     @apply -ml-px;
@@ -40,11 +34,8 @@
     @apply rounded-r-lg;
   }
 
-  /* Divider between adjacent items so same-coloured siblings (e.g. a
-     split button) read as separate actions. currentColor + color-mix
-     means the divider works across every .btn variant — light on
-     coloured buttons, dark on ghost/secondary — without per-variant
-     rules. */
+  /* Seam divider — color-mix on currentColor adapts to every .btn variant
+     without per-variant rules. */
   .btn-group:not(.btn-group-vertical) > .btn:not(:first-child),
   .btn-group:not(.btn-group-vertical) > .menu:not(:first-child) > .menu-trigger {
     border-left-color: color-mix(in oklab, currentColor 25%, transparent);
@@ -78,11 +69,8 @@
     border-top-color: color-mix(in oklab, currentColor 25%, transparent);
   }
 
-  /* Full width — the group stretches across its container instead of
-     shrinking to its content. Horizontal groups split the row evenly so
-     every item is the same width regardless of label length; vertical
-     groups already stretch their items to the group's width, so widening
-     the group is enough. Mirrors the `fullWidth` treatment on tabs. */
+  /* Full width — horizontal items split the row evenly; vertical items
+     already stretch, so widening the group is enough. */
   .btn-group-full-width:not(.btn-group-vertical) {
     @apply flex w-full;
   }

package/src/components/button.css

@@ -10,16 +10,12 @@
            disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none;
   }
 
-  /* Keep leading/trailing icons at their intrinsic size — a flex item defaults
-     to `flex-shrink: 1`, so a narrow flex container would otherwise squish the
-     glyph horizontally before wrapping or truncating the label. */
+  /* Don't let a narrow container squish the glyph before the label wraps. */
   .btn > :is(i, svg) {
     flex-shrink: 0;
   }
 
-  /* Variants — the bare `.btn` (no modifier) is the low-emphasis default, so
-     most admin buttons need no variant class. The colored variants reset the
-     border to transparent since the base now carries a visible one. */
+  /* Variants — bare `.btn` is the low-emphasis default; most buttons need no variant class. */
   .btn-primary {
     @apply bg-primary text-primary-content border-transparent hover:bg-primary-hover;
   }
@@ -28,11 +24,7 @@
     @apply bg-transparent text-text border-transparent hover:bg-surface-muted;
   }
 
-  /* Muted — fills with the page background (`surface`) so it sits flush
-     instead of reading as a raised control, mirroring `card-muted`. The
-     default `.btn` is one step up (`surface-muted`); hover lifts the muted
-     button to that resting fill. For de-emphasised actions that should
-     recede into the page. */
+  /* Fills with the page background so it sits flush instead of raised — mirrors `card-muted`. */
   .btn-muted {
     @apply bg-surface hover:bg-surface-muted;
   }
@@ -50,14 +42,11 @@
     @apply text-base px-5 py-2.5 gap-2.5;
   }
 
-  /* Modifiers */
   .btn-full-width {
     @apply w-full;
   }
 
-  /* Icon-only — equalises padding so the button reads as a square. The React
-     wrapper adds this automatically when `.btn` has an icon but no text
-     children; vanilla callers add it themselves. Pair with `aria-label`. */
+  /* Icon-only — equalises padding so the button reads as a square. Pair with `aria-label`. */
   .btn-square {
     @apply px-2;
   }
@@ -70,11 +59,8 @@
     @apply px-2.5;
   }
 
-  /* Loading state — paints a spinner via ::before, so no extra markup is
-     required. Sized in `em` so it tracks btn-sm / btn-lg. Pair with the
-     `disabled` attribute (or the React wrapper, which sets it for you) for
-     keyboard a11y; the visual disable lives here so vanilla still feels right
-     without it. */
+  /* Spinner via ::before, `em`-sized so it tracks btn-sm / btn-lg. Pair with
+     the `disabled` attribute for keyboard a11y. */
   .btn-loading {
     @apply opacity-50 cursor-not-allowed pointer-events-none;
   }
@@ -91,9 +77,7 @@
     animation: spinner-spin 0.6s linear infinite;
   }
 
-  /* Suppress a leading icon while loading so we don't show two glyphs.
-     Trailing icons stay visible — they may convey structural meaning
-     (e.g. a dropdown chevron on a split-button trigger). */
+  /* Hide the leading icon while loading; trailing icons (e.g. a dropdown chevron) stay. */
   .btn-loading > :is(i, svg):first-child {
     display: none;
   }