@aortl/admin-css 0.16.2 → 0.17.0

package/CHANGELOG.md

@@ -4,6 +4,23 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.17.0] - 2026-06-15
+
+### Added
+
+- `Separator` component / `.separator` class — a styled `<hr>` with a vertical modifier. (both)
+- `Avatar` and `AvatarGroup` / `.avatar` — image with a no-JS initials fallback, circle/square, `sm`/`md`/`lg`, plus `.indicator` auto-offsets for avatar anchors. (both)
+- Badge soft tinted variants (`soft` / `.badge-soft`) and a dismissible remove button (`onRemove`, `removeLabel` / `.badge-remove`). (both)
+- Alert trailing action slot (`action` / `Alert.Action` / `.alert-action`). (both)
+- In-field input icons — `icon` / `iconTrailing` on `Input`, `.input-icon` wrapper. (both)
+- Card media slot (`media` / `Card.Media` / `.card-media`) and scroll region (`scroll` on `Card.Container` / `.card-scroll`). (both)
+- BrandTile `lg` size, soft tint variants, and bordered image tiles. (both)
+
+### Changed
+
+- `.link` inside an `.alert` inherits the variant's content color instead of the link blue. (css)
+- `tfoot` rows are styled by default — semibold cells with a strong divider above the first footer row (previously unstyled). (css)
+
 ## [0.16.2] - 2026-06-11
 
 - Add a changelog following the Keep a Changelog format.
@@ -45,10 +62,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 - Make `primary` a high-contrast neutral and move blue to `info`. (both)
 - Use solid color fills for `Alert` and `Badge` status variants. (both)
 
-[Unreleased]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.16.2...HEAD
+[Unreleased]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.17.0...HEAD
 [0.16.1]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.16.0...v0.16.1
 [0.16.0]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.15.1...v0.16.0
 [0.15.1]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.15.0...v0.15.1
 [0.15.0]: https://github.com/Digital-Udvikling/admin-design-system/releases/tag/v0.15.0
 
+[0.17.0]: https://github.com/Digital-Udvikling/admin-design-system/compare/v0.16.2...v0.17.0
 [0.16.2]: https://github.com/Digital-Udvikling/admin-design-system/releases/tag/v0.16.2

package/dist/admin.css

@@ -25,6 +25,7 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --tracking-tight: -0.025em;
     --tracking-wide: 0.025em;
     --leading-tight: 1.25;
     --leading-snug: 1.375;
@@ -417,6 +418,9 @@
       max-width: 96rem;
     }
   }
+  .my-4 {
+    margin-block: calc(var(--spacing) * 4);
+  }
   .block {
     display: block;
   }
@@ -696,11 +700,21 @@
     row-gap: 0.25rem;
     align-items: center;
   }
+  .alert:has(> .alert-action) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    column-gap: 0.5rem;
+    row-gap: 0.25rem;
+    align-items: center;
+  }
+  .alert:has(> :is(i, svg):first-child):has(> .alert-action) {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
   .alert > :is(i, svg):first-child {
     font-size: 1rem;
     line-height: 1.25;
   }
-  .alert:has(> :is(i, svg):first-child):has(> .alert-title) {
+  .alert:has(> .alert-title):is(:has(> :is(i, svg):first-child), :has(> .alert-action)) {
     grid-template-rows: auto auto;
     align-items: start;
   }
@@ -708,9 +722,20 @@
     grid-row: 1 / -1;
   }
   .alert > :is(.alert-title, .alert-description) {
-    grid-column: 2;
     min-width: 0;
   }
+  .alert:has(> :is(i, svg):first-child) > :is(.alert-title, .alert-description) {
+    grid-column: 2;
+  }
+  .alert > .alert-action {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    white-space: nowrap;
+    grid-column: -2;
+    grid-row: 1 / -1;
+    justify-self: end;
+    align-self: center;
+  }
   .alert-info {
     border-color: var(--color-info);
     background-color: var(--color-info);
@@ -738,6 +763,22 @@
   .alert-description {
     opacity: 0.85;
   }
+  .alert .link {
+    color: currentcolor;
+    &:hover {
+      @media (hover: hover) {
+        color: currentcolor;
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        opacity: 85%;
+      }
+    }
+    &:focus-visible {
+      outline-color: currentcolor;
+    }
+  }
 }
 @layer components {
   .app-shell {
@@ -858,6 +899,74 @@
     background-color: var(--color-primary);
     color: var(--color-primary-content);
   }
+  .badge-soft.badge-info {
+    border-color: var(--color-info-muted);
+    background-color: var(--color-info-muted);
+    color: var(--color-info);
+  }
+  .badge-soft.badge-success {
+    border-color: var(--color-success-muted);
+    background-color: var(--color-success-muted);
+    color: var(--color-success);
+  }
+  .badge-soft.badge-warning {
+    border-color: var(--color-warning-muted);
+    background-color: var(--color-warning-muted);
+    color: var(--color-text);
+  }
+  .badge-soft.badge-danger {
+    border-color: var(--color-danger-muted);
+    background-color: var(--color-danger-muted);
+    color: var(--color-danger);
+  }
+  .badge-soft.badge-primary {
+    border-color: var(--color-primary-muted);
+    background-color: var(--color-primary-muted);
+    color: var(--color-text);
+  }
+  .badge-remove {
+    margin-right: calc(var(--spacing) * -1);
+    display: inline-flex;
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+    flex-shrink: 0;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border-radius: calc(infinity * 1px);
+    color: inherit;
+    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: 150ms;
+    transition-duration: 150ms;
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    &:focus-visible {
+      outline-offset: 1px;
+    }
+    &:focus-visible {
+      outline-color: var(--color-focus);
+    }
+  }
+  .badge-remove:hover {
+    background-color: currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, currentColor 15%, transparent);
+    }
+  }
+  .badge-sm .badge-remove {
+    margin-right: calc(var(--spacing) * -0.5);
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
+  .badge-lg .badge-remove {
+    margin-right: calc(var(--spacing) * -1.5);
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
+  }
   .badge-sm {
     height: calc(var(--spacing) * 4);
     gap: calc(var(--spacing) * 0.5);
@@ -891,6 +1000,106 @@
     -webkit-user-select: none;
     user-select: none;
   }
+  .brand-tile > :is(i, svg) {
+    font-size: 14px;
+  }
+  .brand-tile-lg {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+    border-radius: var(--radius-md);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .brand-tile-lg > :is(i, svg) {
+    font-size: 20px;
+  }
+  .brand-tile-soft {
+    background-color: var(--color-system-accent-muted);
+    color: var(--color-system-accent);
+  }
+  .brand-tile-info {
+    background-color: var(--color-info-muted);
+    color: var(--color-info);
+  }
+  .brand-tile-success {
+    background-color: var(--color-success-muted);
+    color: var(--color-success);
+  }
+  .brand-tile-danger {
+    background-color: var(--color-danger-muted);
+    color: var(--color-danger);
+  }
+  .brand-tile:has(> img) {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-border);
+    background-color: var(--color-surface);
+    padding: calc(var(--spacing) * 0.5);
+  }
+  .brand-tile > img {
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    object-fit: contain;
+  }
+}
+@layer components {
+  .avatar {
+    position: relative;
+    display: inline-flex;
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-radius: calc(infinity * 1px);
+    background-color: var(--color-surface-strong);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-leading: 1;
+    line-height: 1;
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+    color: var(--color-text-muted);
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .avatar > img {
+    position: absolute;
+    inset: calc(var(--spacing) * 0);
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .avatar-square {
+    border-radius: var(--radius-md);
+  }
+  .avatar-sm {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+    font-size: 0.625rem;
+  }
+  .avatar-lg {
+    width: calc(var(--spacing) * 10);
+    height: calc(var(--spacing) * 10);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .avatar-group {
+    display: inline-flex;
+    align-items: center;
+  }
+  .avatar-group > .avatar {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + 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);
+    --tw-ring-color: var(--color-surface);
+  }
+  .avatar-group > .avatar + .avatar {
+    margin-inline-start: calc(var(--spacing) * -2);
+  }
 }
 @layer components {
   .kbd {
@@ -954,6 +1163,18 @@
   .indicator:has(> .card) {
     --indicator-offset: 6px;
   }
+  .indicator:has(> .avatar) {
+    --indicator-offset: 5px;
+  }
+  .indicator:has(> .avatar-sm) {
+    --indicator-offset: 3px;
+  }
+  .indicator:has(> .avatar-lg) {
+    --indicator-offset: 6px;
+  }
+  .indicator:has(> .avatar-square) {
+    --indicator-offset: 2px;
+  }
   .indicator-item {
     position: absolute;
     z-index: 1;
@@ -1387,6 +1608,24 @@
     color: var(--color-success);
   }
 }
+@layer components {
+  .separator {
+    margin: calc(var(--spacing) * 0);
+    display: block;
+    height: 1px;
+    width: 100%;
+    flex-shrink: 0;
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: var(--color-border);
+  }
+  .separator-vertical {
+    height: auto;
+    width: 1px;
+    align-self: stretch;
+    min-height: 1lh;
+  }
+}
 @layer components {
   .btn {
     display: inline-flex;
@@ -1821,6 +2060,53 @@
     color: var(--color-text-muted);
   }
 }
+@layer components {
+  .input-icon {
+    position: relative;
+    display: inline-flex;
+    width: 100%;
+    align-items: center;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-text-muted);
+    --input-icon-inset: calc(var(--spacing) * 3);
+    --input-icon-pad: calc(var(--spacing) * 9);
+  }
+  .input-icon:has(> .input-sm) {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --input-icon-inset: calc(var(--spacing) * 2.5);
+    --input-icon-pad: calc(var(--spacing) * 8);
+  }
+  .input-icon:has(> .input-lg) {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --input-icon-inset: calc(var(--spacing) * 4);
+    --input-icon-pad: calc(var(--spacing) * 10);
+  }
+  .input-icon > :where(i, svg) {
+    pointer-events: none;
+    position: absolute;
+    top: calc(1 / 2 * 100%);
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .input-icon > :where(i, svg):first-child {
+    left: var(--input-icon-inset);
+  }
+  .input-icon > .input ~ :where(i, svg) {
+    right: var(--input-icon-inset);
+  }
+  .input-icon:has(> :where(i, svg):first-child) > .input {
+    padding-left: var(--input-icon-pad);
+  }
+  .input-icon:has(> .input ~ :where(i, svg)) > .input {
+    padding-right: var(--input-icon-pad);
+  }
+  .input-icon:has(> .input:disabled) > :where(i, svg) {
+    opacity: 50%;
+  }
+}
 @layer components {
   .textarea {
     display: block;
@@ -2570,6 +2856,55 @@
   .card-danger .card-title {
     color: var(--color-danger);
   }
+  .card-media {
+    display: block;
+    width: 100%;
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+  .card-media:first-child {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+  .card-media:last-child {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+  .card-media > :is(img, video) {
+    display: block;
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+  .card-scroll > .card-header {
+    flex-shrink: 0;
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+    border-color: var(--color-border);
+    padding-inline: calc(var(--spacing) * 5);
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .card-scroll > .card-body {
+    min-height: calc(var(--spacing) * 0);
+    flex: 1;
+    overflow-y: auto;
+  }
+  .card-scroll > .card-body:last-child {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+  .card-scroll > .card-actions {
+    flex-shrink: 0;
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+    border-color: var(--color-border);
+    padding-inline: calc(var(--spacing) * 5);
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .card-compact.card-scroll > :is(.card-header, .card-actions) {
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+  }
 }
 @layer components {
   .stat-card {
@@ -3953,6 +4288,15 @@
     white-space: nowrap;
     color: var(--color-text-muted);
   }
+  .table :where(tfoot :is(td, th)) {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .table :where(tfoot tr:first-child :is(td, th)) {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 2px;
+    border-top-color: var(--color-border-strong);
+  }
   .table :where(td), .table-cell {
     overflow-wrap: break-word;
   }
@@ -4650,6 +4994,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -4665,10 +5013,6 @@
   inherits: false;
   initial-value: 0;
 }
-@property --tw-tracking {
-  syntax: "*";
-  inherits: false;
-}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
@@ -4701,10 +5045,10 @@
       --tw-border-style: solid;
       --tw-outline-style: solid;
       --tw-duration: initial;
+      --tw-tracking: initial;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
-      --tw-tracking: initial;
     }
   }
 }