fokus-styles 2.0.0 → 2.4.0

package/dist/css/fokus.css

@@ -48,12 +48,28 @@
     --fs-control-padding-x-lg: 16px;
     --fs-focus-width: 2px;
     --fs-focus-offset: 2px;
+    --fs-focus-color: var(--fs-color-primary);
+    --fs-focus-ring-size: 3px;
+    --fs-focus-ring-color: color-mix(in srgb, var(--fs-focus-color) 22%, transparent);
     --fs-focus-ring-alpha: 22%;
     --fs-transition-fast: 150ms;
     --fs-transition-normal: 220ms;
+    --fs-motion-duration-fast: var(--fs-transition-fast);
+    --fs-motion-duration-normal: var(--fs-transition-normal);
+    --fs-motion-ease-standard: var(--fs-ease-standard);
     --fs-ease-standard: cubic-bezier(0.2, 0, 0, 1);
     --fs-border-width: 1px;
     --fs-disabled-opacity: 0.5;
+    --fs-safe-area-top: env(safe-area-inset-top, 0px);
+    --fs-safe-area-right: env(safe-area-inset-right, 0px);
+    --fs-safe-area-bottom: env(safe-area-inset-bottom, 0px);
+    --fs-safe-area-left: env(safe-area-inset-left, 0px);
+    --fs-component-control-height: var(--fs-control-height);
+    --fs-component-overlay-backdrop: rgb(0 0 0 / 55%);
+    --fs-component-panel-radius: var(--fs-radius-md);
+    --fs-component-panel-shadow: var(--fs-shadow-lg);
+    --fs-contrast-border-width: var(--fs-border-width);
+    --fs-contrast-focus-width: var(--fs-focus-width);
     --fs-cq-sm: 320px;
     --fs-cq-md: 480px;
     --fs-cq-lg: 640px;
@@ -132,6 +148,14 @@
       --fs-feedback-info-bg: oklch(96.4918490239% 0.0173174767 286.0707018324deg);
     }
   }
+  @media (prefers-contrast: more) {
+    :root {
+      --fs-contrast-border-width: 2px;
+      --fs-contrast-focus-width: 3px;
+      --fs-focus-width: var(--fs-contrast-focus-width);
+      --fs-border-width: var(--fs-contrast-border-width);
+    }
+  }
 }
 @layer tokens {
   :root {
@@ -243,6 +267,59 @@
     }
   }
 }
+/* stylelint-disable property-no-deprecated, selector-not-notation */
+@layer reset {
+  :focus-visible {
+    outline: var(--fs-focus-width) solid var(--fs-focus-color);
+    outline-offset: var(--fs-focus-offset);
+  }
+  @media (forced-colors: active) {
+    :focus-visible {
+      outline: 2px solid CanvasText;
+      outline-offset: 2px;
+    }
+    button,
+    [role=button],
+    input,
+    select,
+    textarea,
+    .fs-btn {
+      border-color: ButtonText;
+      forced-color-adjust: auto;
+    }
+    .fs-u-focus-ring:focus-visible {
+      outline: 3px solid Highlight;
+    }
+  }
+}
+@layer utilities {
+  .fs-u-visually-hidden:not(:focus):not(:focus-within),
+  .fs-u-visually-hidden-focusable:not(:focus):not(:focus-within) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip-path: inset(50%) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+  }
+  .fs-skip-link {
+    position: fixed;
+    z-index: 1000;
+    inset-block-start: var(--fs-space-2);
+    inset-inline-start: var(--fs-space-2);
+    transform: translateY(-200%);
+    padding: var(--fs-space-2) var(--fs-space-3);
+    color: var(--fs-color-on-primary);
+    background: var(--fs-color-primary);
+    border-radius: var(--fs-radius-sm);
+  }
+  .fs-skip-link:focus {
+    transform: translateY(0);
+  }
+}
 @layer layout {
   .fs-cluster {
     display: flex;
@@ -338,6 +415,73 @@
   .fs-col-fluid {
     width: 100%;
   }
+  .fs-row-cols-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .fs-row-cols-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .fs-row-cols-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .fs-row-cols-3 > * {
+    flex: 0 0 auto;
+    width: 33.3333333333%;
+  }
+  .fs-row-cols-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .fs-row-cols-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .fs-row-cols-6 > * {
+    flex: 0 0 auto;
+    width: 16.6666666667%;
+  }
+  .fs-order-0 {
+    order: 0;
+  }
+  .fs-order-1 {
+    order: 1;
+  }
+  .fs-order-2 {
+    order: 2;
+  }
+  .fs-order-3 {
+    order: 3;
+  }
+  .fs-order-4 {
+    order: 4;
+  }
+  .fs-order-5 {
+    order: 5;
+  }
+  .fs-order-6 {
+    order: 6;
+  }
+  .fs-order-7 {
+    order: 7;
+  }
+  .fs-order-8 {
+    order: 8;
+  }
+  .fs-order-9 {
+    order: 9;
+  }
+  .fs-order-10 {
+    order: 10;
+  }
+  .fs-order-11 {
+    order: 11;
+  }
+  .fs-order-12 {
+    order: 12;
+  }
   .fs-col {
     flex: 1 0 0%;
   }
@@ -394,6 +538,73 @@
     width: 100%;
   }
   @media (min-width: 640px) {
+    .fs-row-cols-sm-auto > * {
+      flex: 0 0 auto;
+      width: auto;
+    }
+    .fs-row-cols-sm-1 > * {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+    .fs-row-cols-sm-2 > * {
+      flex: 0 0 auto;
+      width: 50%;
+    }
+    .fs-row-cols-sm-3 > * {
+      flex: 0 0 auto;
+      width: 33.3333333333%;
+    }
+    .fs-row-cols-sm-4 > * {
+      flex: 0 0 auto;
+      width: 25%;
+    }
+    .fs-row-cols-sm-5 > * {
+      flex: 0 0 auto;
+      width: 20%;
+    }
+    .fs-row-cols-sm-6 > * {
+      flex: 0 0 auto;
+      width: 16.6666666667%;
+    }
+    .fs-order-sm-0 {
+      order: 0;
+    }
+    .fs-order-sm-1 {
+      order: 1;
+    }
+    .fs-order-sm-2 {
+      order: 2;
+    }
+    .fs-order-sm-3 {
+      order: 3;
+    }
+    .fs-order-sm-4 {
+      order: 4;
+    }
+    .fs-order-sm-5 {
+      order: 5;
+    }
+    .fs-order-sm-6 {
+      order: 6;
+    }
+    .fs-order-sm-7 {
+      order: 7;
+    }
+    .fs-order-sm-8 {
+      order: 8;
+    }
+    .fs-order-sm-9 {
+      order: 9;
+    }
+    .fs-order-sm-10 {
+      order: 10;
+    }
+    .fs-order-sm-11 {
+      order: 11;
+    }
+    .fs-order-sm-12 {
+      order: 12;
+    }
     .fs-col-sm {
       flex: 1 0 0%;
     }
@@ -451,6 +662,73 @@
     }
   }
   @media (min-width: 768px) {
+    .fs-row-cols-md-auto > * {
+      flex: 0 0 auto;
+      width: auto;
+    }
+    .fs-row-cols-md-1 > * {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+    .fs-row-cols-md-2 > * {
+      flex: 0 0 auto;
+      width: 50%;
+    }
+    .fs-row-cols-md-3 > * {
+      flex: 0 0 auto;
+      width: 33.3333333333%;
+    }
+    .fs-row-cols-md-4 > * {
+      flex: 0 0 auto;
+      width: 25%;
+    }
+    .fs-row-cols-md-5 > * {
+      flex: 0 0 auto;
+      width: 20%;
+    }
+    .fs-row-cols-md-6 > * {
+      flex: 0 0 auto;
+      width: 16.6666666667%;
+    }
+    .fs-order-md-0 {
+      order: 0;
+    }
+    .fs-order-md-1 {
+      order: 1;
+    }
+    .fs-order-md-2 {
+      order: 2;
+    }
+    .fs-order-md-3 {
+      order: 3;
+    }
+    .fs-order-md-4 {
+      order: 4;
+    }
+    .fs-order-md-5 {
+      order: 5;
+    }
+    .fs-order-md-6 {
+      order: 6;
+    }
+    .fs-order-md-7 {
+      order: 7;
+    }
+    .fs-order-md-8 {
+      order: 8;
+    }
+    .fs-order-md-9 {
+      order: 9;
+    }
+    .fs-order-md-10 {
+      order: 10;
+    }
+    .fs-order-md-11 {
+      order: 11;
+    }
+    .fs-order-md-12 {
+      order: 12;
+    }
     .fs-col-md {
       flex: 1 0 0%;
     }
@@ -508,6 +786,73 @@
     }
   }
   @media (min-width: 1024px) {
+    .fs-row-cols-lg-auto > * {
+      flex: 0 0 auto;
+      width: auto;
+    }
+    .fs-row-cols-lg-1 > * {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+    .fs-row-cols-lg-2 > * {
+      flex: 0 0 auto;
+      width: 50%;
+    }
+    .fs-row-cols-lg-3 > * {
+      flex: 0 0 auto;
+      width: 33.3333333333%;
+    }
+    .fs-row-cols-lg-4 > * {
+      flex: 0 0 auto;
+      width: 25%;
+    }
+    .fs-row-cols-lg-5 > * {
+      flex: 0 0 auto;
+      width: 20%;
+    }
+    .fs-row-cols-lg-6 > * {
+      flex: 0 0 auto;
+      width: 16.6666666667%;
+    }
+    .fs-order-lg-0 {
+      order: 0;
+    }
+    .fs-order-lg-1 {
+      order: 1;
+    }
+    .fs-order-lg-2 {
+      order: 2;
+    }
+    .fs-order-lg-3 {
+      order: 3;
+    }
+    .fs-order-lg-4 {
+      order: 4;
+    }
+    .fs-order-lg-5 {
+      order: 5;
+    }
+    .fs-order-lg-6 {
+      order: 6;
+    }
+    .fs-order-lg-7 {
+      order: 7;
+    }
+    .fs-order-lg-8 {
+      order: 8;
+    }
+    .fs-order-lg-9 {
+      order: 9;
+    }
+    .fs-order-lg-10 {
+      order: 10;
+    }
+    .fs-order-lg-11 {
+      order: 11;
+    }
+    .fs-order-lg-12 {
+      order: 12;
+    }
     .fs-col-lg {
       flex: 1 0 0%;
     }
@@ -565,6 +910,73 @@
     }
   }
   @media (min-width: 1280px) {
+    .fs-row-cols-xl-auto > * {
+      flex: 0 0 auto;
+      width: auto;
+    }
+    .fs-row-cols-xl-1 > * {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+    .fs-row-cols-xl-2 > * {
+      flex: 0 0 auto;
+      width: 50%;
+    }
+    .fs-row-cols-xl-3 > * {
+      flex: 0 0 auto;
+      width: 33.3333333333%;
+    }
+    .fs-row-cols-xl-4 > * {
+      flex: 0 0 auto;
+      width: 25%;
+    }
+    .fs-row-cols-xl-5 > * {
+      flex: 0 0 auto;
+      width: 20%;
+    }
+    .fs-row-cols-xl-6 > * {
+      flex: 0 0 auto;
+      width: 16.6666666667%;
+    }
+    .fs-order-xl-0 {
+      order: 0;
+    }
+    .fs-order-xl-1 {
+      order: 1;
+    }
+    .fs-order-xl-2 {
+      order: 2;
+    }
+    .fs-order-xl-3 {
+      order: 3;
+    }
+    .fs-order-xl-4 {
+      order: 4;
+    }
+    .fs-order-xl-5 {
+      order: 5;
+    }
+    .fs-order-xl-6 {
+      order: 6;
+    }
+    .fs-order-xl-7 {
+      order: 7;
+    }
+    .fs-order-xl-8 {
+      order: 8;
+    }
+    .fs-order-xl-9 {
+      order: 9;
+    }
+    .fs-order-xl-10 {
+      order: 10;
+    }
+    .fs-order-xl-11 {
+      order: 11;
+    }
+    .fs-order-xl-12 {
+      order: 12;
+    }
     .fs-col-xl {
       flex: 1 0 0%;
     }
@@ -622,6 +1034,73 @@
     }
   }
   @media (min-width: 1536px) {
+    .fs-row-cols-xxl-auto > * {
+      flex: 0 0 auto;
+      width: auto;
+    }
+    .fs-row-cols-xxl-1 > * {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+    .fs-row-cols-xxl-2 > * {
+      flex: 0 0 auto;
+      width: 50%;
+    }
+    .fs-row-cols-xxl-3 > * {
+      flex: 0 0 auto;
+      width: 33.3333333333%;
+    }
+    .fs-row-cols-xxl-4 > * {
+      flex: 0 0 auto;
+      width: 25%;
+    }
+    .fs-row-cols-xxl-5 > * {
+      flex: 0 0 auto;
+      width: 20%;
+    }
+    .fs-row-cols-xxl-6 > * {
+      flex: 0 0 auto;
+      width: 16.6666666667%;
+    }
+    .fs-order-xxl-0 {
+      order: 0;
+    }
+    .fs-order-xxl-1 {
+      order: 1;
+    }
+    .fs-order-xxl-2 {
+      order: 2;
+    }
+    .fs-order-xxl-3 {
+      order: 3;
+    }
+    .fs-order-xxl-4 {
+      order: 4;
+    }
+    .fs-order-xxl-5 {
+      order: 5;
+    }
+    .fs-order-xxl-6 {
+      order: 6;
+    }
+    .fs-order-xxl-7 {
+      order: 7;
+    }
+    .fs-order-xxl-8 {
+      order: 8;
+    }
+    .fs-order-xxl-9 {
+      order: 9;
+    }
+    .fs-order-xxl-10 {
+      order: 10;
+    }
+    .fs-order-xxl-11 {
+      order: 11;
+    }
+    .fs-order-xxl-12 {
+      order: 12;
+    }
     .fs-col-xxl {
       flex: 1 0 0%;
     }
@@ -679,6 +1158,73 @@
     }
   }
   @media (min-width: 1920px) {
+    .fs-row-cols-xxxl-auto > * {
+      flex: 0 0 auto;
+      width: auto;
+    }
+    .fs-row-cols-xxxl-1 > * {
+      flex: 0 0 auto;
+      width: 100%;
+    }
+    .fs-row-cols-xxxl-2 > * {
+      flex: 0 0 auto;
+      width: 50%;
+    }
+    .fs-row-cols-xxxl-3 > * {
+      flex: 0 0 auto;
+      width: 33.3333333333%;
+    }
+    .fs-row-cols-xxxl-4 > * {
+      flex: 0 0 auto;
+      width: 25%;
+    }
+    .fs-row-cols-xxxl-5 > * {
+      flex: 0 0 auto;
+      width: 20%;
+    }
+    .fs-row-cols-xxxl-6 > * {
+      flex: 0 0 auto;
+      width: 16.6666666667%;
+    }
+    .fs-order-xxxl-0 {
+      order: 0;
+    }
+    .fs-order-xxxl-1 {
+      order: 1;
+    }
+    .fs-order-xxxl-2 {
+      order: 2;
+    }
+    .fs-order-xxxl-3 {
+      order: 3;
+    }
+    .fs-order-xxxl-4 {
+      order: 4;
+    }
+    .fs-order-xxxl-5 {
+      order: 5;
+    }
+    .fs-order-xxxl-6 {
+      order: 6;
+    }
+    .fs-order-xxxl-7 {
+      order: 7;
+    }
+    .fs-order-xxxl-8 {
+      order: 8;
+    }
+    .fs-order-xxxl-9 {
+      order: 9;
+    }
+    .fs-order-xxxl-10 {
+      order: 10;
+    }
+    .fs-order-xxxl-11 {
+      order: 11;
+    }
+    .fs-order-xxxl-12 {
+      order: 12;
+    }
     .fs-col-xxxl {
       flex: 1 0 0%;
     }
@@ -909,6 +1455,30 @@
     background-color: var(--fs-color-subtle);
     cursor: default;
   }
+  .fs-floating-label {
+    position: relative;
+  }
+  .fs-floating-label > .fs-form-control {
+    height: 56px;
+    padding-top: 20px;
+  }
+  .fs-floating-label > .fs-form-label {
+    position: absolute;
+    z-index: 1;
+    top: 8px;
+    left: 8px;
+    color: var(--fs-color-muted);
+    font-size: 0.6875rem;
+    pointer-events: none;
+  }
+  .fs-form-control[aria-invalid=true],
+  .fs-was-validated .fs-form-control:invalid {
+    border-color: var(--fs-color-danger);
+  }
+  .fs-form-control[aria-invalid=false],
+  .fs-was-validated .fs-form-control:valid {
+    border-color: var(--fs-color-success);
+  }
   .fs-form-control-sm {
     height: var(--fs-control-height-sm);
     font-size: 0.6875rem;
@@ -2155,6 +2725,23 @@
   .fs-table-responsive {
     overflow-x: auto;
   }
+  .fs-table-caption {
+    caption-side: top;
+    padding: var(--fs-space-2) 0;
+    color: var(--fs-color-muted);
+    text-align: start;
+  }
+  .fs-table-empty {
+    padding: var(--fs-space-5);
+    color: var(--fs-color-muted);
+    text-align: center;
+  }
+  @media (width < 640px) {
+    .fs-table-priority th:nth-child(n+4),
+    .fs-table-priority td:nth-child(n+4) {
+      display: none;
+    }
+  }
 }
 @layer components {
   .fs-navbar {
@@ -2181,6 +2768,47 @@
     padding: 0;
     list-style: none;
   }
+  .fs-navbar-toggler {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+    padding: 8px;
+    color: var(--fs-color-text);
+    background: transparent;
+    border: 1px solid var(--fs-color-border);
+    border-radius: var(--fs-radius-sm);
+    cursor: pointer;
+  }
+  .fs-navbar-collapse {
+    flex-basis: 100%;
+    width: 100%;
+  }
+  .fs-navbar-collapse:not(.is-open) {
+    display: none;
+  }
+  .fs-navbar-collapse.is-open .fs-navbar-nav {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  @media (width >= 768px) {
+    .fs-navbar-toggler {
+      display: none;
+    }
+    .fs-navbar-collapse,
+    .fs-navbar-collapse:not(.is-open),
+    .fs-navbar-collapse[hidden] {
+      display: flex;
+      flex: 1 1 auto;
+      align-items: center;
+      justify-content: flex-end;
+      width: auto;
+    }
+    .fs-navbar-collapse .fs-navbar-nav {
+      flex-direction: row;
+    }
+  }
   .fs-nav-link {
     display: inline-flex;
     align-items: center;
@@ -2594,6 +3222,13 @@
   .fs-modal-dialog.fs-modal-lg {
     max-width: 720px;
   }
+  .fs-modal-dialog.fs-modal-xl {
+    max-width: 1140px;
+  }
+  .fs-modal-dialog.fs-modal-fullscreen {
+    max-width: none;
+    height: 100%;
+  }
   .fs-modal-content {
     display: flex;
     flex-direction: column;
@@ -2620,6 +3255,28 @@
     padding: 20px;
     overflow-y: auto;
   }
+  .fs-modal-scrollable .fs-modal-content {
+    overflow: hidden;
+  }
+  .fs-modal-scrollable .fs-modal-body {
+    overflow-y: auto;
+  }
+  @media (width < 640px) {
+    .fs-modal {
+      align-items: flex-end;
+      padding: 0;
+    }
+    .fs-modal-dialog,
+    .fs-modal-dialog.fs-modal-sm,
+    .fs-modal-dialog.fs-modal-lg,
+    .fs-modal-dialog.fs-modal-xl {
+      max-width: none;
+    }
+    .fs-modal-content {
+      max-height: calc(100dvh - var(--fs-safe-area-top));
+      border-radius: var(--fs-radius-md) var(--fs-radius-md) 0 0;
+    }
+  }
   .fs-modal-footer {
     display: flex;
     align-items: center;
@@ -2983,6 +3640,22 @@
     padding: 16px 20px;
     border-top: 1px solid var(--fs-color-border);
   }
+  .fs-offcanvas-responsive {
+    width: min(100%, 420px);
+  }
+  @media (width >= 1024px) {
+    .fs-offcanvas-lg {
+      position: static;
+      width: auto;
+      height: auto;
+      visibility: visible;
+      transform: none;
+      box-shadow: none;
+    }
+    .fs-offcanvas-lg + .fs-offcanvas-backdrop {
+      display: none;
+    }
+  }
   @media (prefers-reduced-motion: reduce) {
     .fs-offcanvas,
     .fs-offcanvas-backdrop {
@@ -3011,6 +3684,16 @@
     border-bottom-right-radius: var(--fs-radius-md);
     border-bottom-left-radius: var(--fs-radius-md);
   }
+  .fs-accordion-flush .fs-accordion-item {
+    border-inline: 0;
+    border-radius: 0;
+  }
+  .fs-accordion-flush .fs-accordion-item:first-child {
+    border-block-start: 0;
+  }
+  .fs-accordion-always-open .fs-accordion-button[aria-expanded=true]::after {
+    transform: rotate(-135deg);
+  }
   .fs-accordion-header {
     margin: 0;
   }
@@ -3059,6 +3742,11 @@
     border-top: 1px solid var(--fs-color-border);
     background-color: var(--fs-color-surface-raised);
   }
+  @media (prefers-reduced-motion: reduce) {
+    .fs-accordion-button::after {
+      transition: none;
+    }
+  }
 }
 @layer components {
   .fs-tabs {
@@ -3320,6 +4008,14 @@
     padding: 0;
     list-style: none;
   }
+  .fs-pagination-scroll {
+    max-width: 100%;
+    overflow-x: auto;
+    padding-block: 2px;
+  }
+  .fs-pagination-scroll .fs-pagination {
+    width: max-content;
+  }
   .fs-page-link {
     display: inline-flex;
     align-items: center;
@@ -3548,6 +4244,9 @@
     --fs-progress-bar-bg: var(--fs-color-info);
     --fs-progress-color: #ffffff;
   }
+  .fs-spinner[data-fs-loading=false] {
+    display: none;
+  }
   .fs-progress-sm {
     --fs-progress-height: 4px;
   }
@@ -4273,6 +4972,22 @@
   .fs-skeleton-rect {
     border-radius: var(--fs-radius-md);
   }
+  .fs-skeleton-card {
+    display: grid;
+    gap: var(--fs-space-3);
+    min-height: 10rem;
+    padding: var(--fs-space-4);
+    border-radius: var(--fs-radius-md);
+  }
+  .fs-skeleton-table {
+    height: 1.25rem;
+    margin-block-end: var(--fs-space-2);
+  }
+  .fs-skeleton-avatar {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+  }
   @keyframes fokus-skeleton-pulse {
     0%, 100% {
       opacity: 1;
@@ -4593,71 +5308,345 @@
     flex: 1 1 auto;
     min-width: 0;
   }
-  .fs-tile-title {
-    margin: 0;
-    color: var(--fs-color-text);
-    font-size: 0.8125rem;
-    font-weight: 500;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  .fs-tile-title {
+    margin: 0;
+    color: var(--fs-color-text);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .fs-tile-subtitle {
+    margin: 0;
+    color: var(--fs-color-muted);
+    font-size: 0.75rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .fs-tile-actions {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 8px;
+  }
+  .fs-tile-actions-bottom {
+    flex-wrap: wrap;
+  }
+  .fs-tile-actions-bottom .fs-tile-actions {
+    flex-basis: 100%;
+    justify-content: flex-end;
+    margin-top: 4px;
+  }
+  .fs-tile-clickable {
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  }
+  .fs-tile-clickable:hover,
+  .fs-tile-clickable:focus-within {
+    border-color: var(--fs-color-primary);
+    box-shadow: var(--fs-shadow-sm);
+  }
+  .fs-tile-sm {
+    gap: 8px;
+    padding: 8px;
+  }
+  .fs-tile-sm .fs-tile-icon {
+    width: 32px;
+    height: 32px;
+    font-size: 0.8125rem;
+  }
+  .fs-tile-sm .fs-tile-title {
+    font-size: 0.75rem;
+  }
+  .fs-tile-sm .fs-tile-subtitle {
+    font-size: 0.6875rem;
+  }
+  .fs-tile-lg {
+    gap: 16px;
+    padding: 16px;
+  }
+  .fs-tile-lg .fs-tile-icon {
+    width: 48px;
+    height: 48px;
+    font-size: 1.25rem;
+  }
+  .fs-tile-lg .fs-tile-title {
+    font-size: 1rem;
+  }
+}
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-avatar {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    overflow: hidden;
+    color: var(--fs-color-on-primary);
+    font-weight: 600;
+    background: var(--fs-color-primary);
+    border-radius: 50%;
+    object-fit: cover;
+  }
+  .fs-avatar-sm {
+    width: 2rem;
+    height: 2rem;
+    font-size: 0.8125rem;
+  }
+  .fs-avatar-lg {
+    width: 3.5rem;
+    height: 3.5rem;
+    font-size: 1.25rem;
+  }
+  .fs-avatar-square {
+    border-radius: var(--fs-radius-md);
+  }
+  .fs-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-button-group {
+    display: inline-flex;
+    vertical-align: middle;
+  }
+  .fs-button-group > .fs-btn {
+    border-radius: 0;
+  }
+  .fs-button-group > .fs-btn:first-child {
+    border-start-start-radius: var(--fs-radius-sm);
+    border-end-start-radius: var(--fs-radius-sm);
+  }
+  .fs-button-group > .fs-btn:last-child {
+    border-start-end-radius: var(--fs-radius-sm);
+    border-end-end-radius: var(--fs-radius-sm);
+  }
+  .fs-button-group > .fs-btn + .fs-btn {
+    margin-inline-start: -1px;
+  }
+  .fs-button-group-vertical {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .fs-button-group-vertical > .fs-btn {
+    width: 100%;
+  }
+}
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-close {
+    display: inline-grid;
+    width: 2rem;
+    height: 2rem;
+    place-items: center;
+    padding: 0;
+    color: currentcolor;
+    font-size: 1.5rem;
+    line-height: 1;
+    background: transparent;
+    border: 0;
+    border-radius: 50%;
+    cursor: pointer;
+    opacity: 0.72;
+  }
+  .fs-close::before {
+    content: "×";
+  }
+  .fs-close:hover {
+    opacity: 1;
+    background: var(--fs-color-subtle);
+  }
+  .fs-close:focus-visible {
+    outline: var(--fs-focus-width) solid var(--fs-focus-color);
+    outline-offset: var(--fs-focus-offset);
+  }
+}
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-list-group {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    border: 1px solid var(--fs-color-border);
+    border-radius: var(--fs-radius-md);
+  }
+  .fs-list-group-item {
+    position: relative;
+    display: block;
+    padding: var(--fs-space-3) var(--fs-space-4);
+    color: var(--fs-color-text);
+    background: var(--fs-color-surface);
+    border-block-end: 1px solid var(--fs-color-border);
+  }
+  .fs-list-group-item:last-child {
+    border-block-end: 0;
+  }
+  button.fs-list-group-item, a.fs-list-group-item {
+    width: 100%;
+    text-align: start;
+    cursor: pointer;
+  }
+  .fs-list-group-item:hover {
+    background: var(--fs-color-subtle);
+  }
+  .fs-list-group-item.is-active {
+    color: var(--fs-color-on-primary);
+    background: var(--fs-color-primary);
+  }
+}
+@layer components {
+  .fs-code {
+    padding: 0.125em 0.35em;
+    color: var(--fs-color-danger);
+    background: var(--fs-color-subtle);
+    border-radius: var(--fs-radius-sm);
+  }
+  .fs-pre {
+    display: block;
+    max-width: 100%;
+    padding: var(--fs-space-4);
+    overflow: auto;
+    color: var(--fs-color-text);
+    background: var(--fs-color-subtle);
+    border: 1px solid var(--fs-color-border);
+    border-radius: var(--fs-radius-md);
+  }
+}
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-ratio {
+    position: relative;
+    width: 100%;
+  }
+  .fs-ratio::before {
+    display: block;
+    padding-top: var(--fs-ratio, 56.25%);
+    content: "";
+  }
+  .fs-ratio > * {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .fs-ratio-1x1 {
+    --fs-ratio: 100%;
   }
-  .fs-tile-subtitle {
-    margin: 0;
-    color: var(--fs-color-muted);
-    font-size: 0.75rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  .fs-ratio-4x3 {
+    --fs-ratio: 75%;
   }
-  .fs-tile-actions {
-    display: flex;
-    flex-shrink: 0;
+  .fs-ratio-16x9 {
+    --fs-ratio: 56.25%;
+  }
+  .fs-ratio-21x9 {
+    --fs-ratio: 42.857%;
+  }
+}
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-icon-link {
+    display: inline-flex;
+    gap: 0.5em;
     align-items: center;
-    gap: 8px;
   }
-  .fs-tile-actions-bottom {
-    flex-wrap: wrap;
+  .fs-icon-link svg {
+    width: 1em;
+    height: 1em;
+    flex: 0 0 auto;
   }
-  .fs-tile-actions-bottom .fs-tile-actions {
-    flex-basis: 100%;
-    justify-content: flex-end;
-    margin-top: 4px;
+  .fs-icon-link:hover svg {
+    transform: translateX(0.15em);
   }
-  .fs-tile-clickable {
-    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  @media (prefers-reduced-motion: reduce) {
+    .fs-icon-link svg {
+      transition: none;
+    }
   }
-  .fs-tile-clickable:hover,
-  .fs-tile-clickable:focus-within {
-    border-color: var(--fs-color-primary);
-    box-shadow: var(--fs-shadow-sm);
+}
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-placeholder {
+    display: inline-block;
+    min-height: 1em;
+    vertical-align: middle;
+    cursor: wait;
+    background: currentcolor;
+    opacity: 0.18;
   }
-  .fs-tile-sm {
-    gap: 8px;
-    padding: 8px;
+  .fs-placeholder-glow {
+    animation: fs-placeholder-glow 1.5s ease-in-out infinite;
   }
-  .fs-tile-sm .fs-tile-icon {
-    width: 32px;
-    height: 32px;
-    font-size: 0.8125rem;
+  .fs-placeholder-wave {
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent), currentcolor;
+    background-size: 200% 100%;
+    animation: fs-placeholder-wave 1.5s linear infinite;
   }
-  .fs-tile-sm .fs-tile-title {
-    font-size: 0.75rem;
+  .fs-placeholder-btn {
+    width: 6rem;
+    height: 2.5rem;
+    border-radius: var(--fs-radius-sm);
   }
-  .fs-tile-sm .fs-tile-subtitle {
-    font-size: 0.6875rem;
+  @keyframes fs-placeholder-glow {
+    50% {
+      opacity: 0.08;
+    }
   }
-  .fs-tile-lg {
-    gap: 16px;
-    padding: 16px;
+  @keyframes fs-placeholder-wave {
+    to {
+      background-position: -200% 0;
+    }
   }
-  .fs-tile-lg .fs-tile-icon {
-    width: 48px;
-    height: 48px;
-    font-size: 1.25rem;
+  @media (prefers-reduced-motion: reduce) {
+    .fs-placeholder-glow, .fs-placeholder-wave {
+      animation: none;
+    }
   }
-  .fs-tile-lg .fs-tile-title {
-    font-size: 1rem;
+}
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  .fs-progress {
+    display: flex;
+    height: 0.75rem;
+    overflow: hidden;
+    background: var(--fs-color-subtle);
+    border-radius: 999px;
+  }
+  .fs-progress-bar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--fs-color-on-primary);
+    background: var(--fs-color-primary);
+    transition: width var(--fs-motion-duration-normal) var(--fs-motion-ease-standard);
+  }
+  .fs-progress-bar-striped {
+    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%);
+    background-size: 1rem 1rem;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .fs-progress-bar {
+      transition: none;
+    }
+  }
+}
+/* stylelint-disable declaration-block-single-line-max-declarations */
+@layer components {
+  [data-fs-scrollspy] .is-active {
+    color: var(--fs-color-primary);
+    font-weight: 600;
+  }
+  .fs-scrollspy-nav {
+    position: sticky;
+    inset-block-start: var(--fs-space-4);
   }
 }
 @layer utilities {
@@ -8029,6 +9018,291 @@
   .fs-u-invisible {
     visibility: hidden;
   }
+  .fs-u-visually-hidden,
+  .fs-u-visually-hidden-focusable {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    padding: 0 !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    clip-path: inset(50%) !important;
+    white-space: nowrap !important;
+    border: 0 !important;
+  }
+  .fs-u-visually-hidden-focusable:focus,
+  .fs-u-visually-hidden-focusable:focus-within {
+    position: static !important;
+    width: auto !important;
+    height: auto !important;
+    margin: 0 !important;
+    overflow: visible !important;
+    clip-path: none !important;
+    white-space: normal !important;
+  }
+}
+@layer utilities {
+  .fs-u-focus-ring:focus-visible {
+    outline: var(--fs-focus-width) solid var(--fs-focus-color);
+    outline-offset: var(--fs-focus-offset);
+    box-shadow: 0 0 0 var(--fs-focus-ring-size) var(--fs-focus-ring-color);
+  }
+  .fs-u-disabled,
+  .fs-u-disabled[aria-disabled=true] {
+    cursor: not-allowed;
+    opacity: var(--fs-disabled-opacity);
+    pointer-events: none;
+  }
+  @media print {
+    .fs-u-print-hidden {
+      display: none !important;
+    }
+    .fs-u-print-visible {
+      display: block !important;
+    }
+  }
+}
+@layer utilities {
+  .fs-u-color-primary {
+    color: var(--fs-color-primary, oklch(53.5630074284% 0.2132145174 261.6264320248deg)) !important;
+  }
+  .fs-u-bg-primary {
+    background-color: var(--fs-color-primary, oklch(53.5630074284% 0.2132145174 261.6264320248deg)) !important;
+  }
+  .fs-u-color-secondary {
+    color: var(--fs-color-secondary, oklch(55.4391007662% 0.040717043 257.4166191214deg)) !important;
+  }
+  .fs-u-bg-secondary {
+    background-color: var(--fs-color-secondary, oklch(55.4391007662% 0.040717043 257.4166191214deg)) !important;
+  }
+  .fs-u-color-success {
+    color: var(--fs-color-success, oklch(75.151587899% 0.2146126169 148.125846236deg)) !important;
+  }
+  .fs-u-bg-success {
+    background-color: var(--fs-color-success, oklch(75.151587899% 0.2146126169 148.125846236deg)) !important;
+  }
+  .fs-u-color-warning {
+    color: var(--fs-color-warning, oklch(81.9510815663% 0.1562613975 78.6575213966deg)) !important;
+  }
+  .fs-u-bg-warning {
+    background-color: var(--fs-color-warning, oklch(81.9510815663% 0.1562613975 78.6575213966deg)) !important;
+  }
+  .fs-u-color-danger {
+    color: var(--fs-color-danger, oklch(55.9653139301% 0.1897270855 25.2407937498deg)) !important;
+  }
+  .fs-u-bg-danger {
+    background-color: var(--fs-color-danger, oklch(55.9653139301% 0.1897270855 25.2407937498deg)) !important;
+  }
+  .fs-u-color-info {
+    color: var(--fs-color-info, oklch(53.3359780029% 0.1620131129 280.2231949375deg)) !important;
+  }
+  .fs-u-bg-info {
+    background-color: var(--fs-color-info, oklch(53.3359780029% 0.1620131129 280.2231949375deg)) !important;
+  }
+  .fs-u-m-0 {
+    margin: 0 !important;
+  }
+  .fs-u-mx-0 {
+    margin-inline: 0 !important;
+  }
+  .fs-u-my-0 {
+    margin-block: 0 !important;
+  }
+  .fs-u-p-0 {
+    padding: 0 !important;
+  }
+  .fs-u-px-0 {
+    padding-inline: 0 !important;
+  }
+  .fs-u-py-0 {
+    padding-block: 0 !important;
+  }
+  .fs-u-m-1 {
+    margin: 0.25rem !important;
+  }
+  .fs-u-mx-1 {
+    margin-inline: 0.25rem !important;
+  }
+  .fs-u-my-1 {
+    margin-block: 0.25rem !important;
+  }
+  .fs-u-p-1 {
+    padding: 0.25rem !important;
+  }
+  .fs-u-px-1 {
+    padding-inline: 0.25rem !important;
+  }
+  .fs-u-py-1 {
+    padding-block: 0.25rem !important;
+  }
+  .fs-u-m-2 {
+    margin: 0.5rem !important;
+  }
+  .fs-u-mx-2 {
+    margin-inline: 0.5rem !important;
+  }
+  .fs-u-my-2 {
+    margin-block: 0.5rem !important;
+  }
+  .fs-u-p-2 {
+    padding: 0.5rem !important;
+  }
+  .fs-u-px-2 {
+    padding-inline: 0.5rem !important;
+  }
+  .fs-u-py-2 {
+    padding-block: 0.5rem !important;
+  }
+  .fs-u-m-3 {
+    margin: 1rem !important;
+  }
+  .fs-u-mx-3 {
+    margin-inline: 1rem !important;
+  }
+  .fs-u-my-3 {
+    margin-block: 1rem !important;
+  }
+  .fs-u-p-3 {
+    padding: 1rem !important;
+  }
+  .fs-u-px-3 {
+    padding-inline: 1rem !important;
+  }
+  .fs-u-py-3 {
+    padding-block: 1rem !important;
+  }
+  .fs-u-m-4 {
+    margin: 1.5rem !important;
+  }
+  .fs-u-mx-4 {
+    margin-inline: 1.5rem !important;
+  }
+  .fs-u-my-4 {
+    margin-block: 1.5rem !important;
+  }
+  .fs-u-p-4 {
+    padding: 1.5rem !important;
+  }
+  .fs-u-px-4 {
+    padding-inline: 1.5rem !important;
+  }
+  .fs-u-py-4 {
+    padding-block: 1.5rem !important;
+  }
+  .fs-u-m-5 {
+    margin: 3rem !important;
+  }
+  .fs-u-mx-5 {
+    margin-inline: 3rem !important;
+  }
+  .fs-u-my-5 {
+    margin-block: 3rem !important;
+  }
+  .fs-u-p-5 {
+    padding: 3rem !important;
+  }
+  .fs-u-px-5 {
+    padding-inline: 3rem !important;
+  }
+  .fs-u-py-5 {
+    padding-block: 3rem !important;
+  }
+  .fs-u-w-25 {
+    width: 25% !important;
+  }
+  .fs-u-h-25 {
+    height: 25% !important;
+  }
+  .fs-u-w-50 {
+    width: 50% !important;
+  }
+  .fs-u-h-50 {
+    height: 50% !important;
+  }
+  .fs-u-w-75 {
+    width: 75% !important;
+  }
+  .fs-u-h-75 {
+    height: 75% !important;
+  }
+  .fs-u-w-100 {
+    width: 100% !important;
+  }
+  .fs-u-h-100 {
+    height: 100% !important;
+  }
+  .fs-u-w-auto {
+    width: auto !important;
+  }
+  .fs-u-h-auto {
+    height: auto !important;
+  }
+  @media (min-width: 640px) {
+    .fs-u-d-sm-flex {
+      display: flex !important;
+    }
+    .fs-u-d-sm-none {
+      display: none !important;
+    }
+    .fs-u-text-sm-start {
+      text-align: start !important;
+    }
+  }
+  @media (min-width: 768px) {
+    .fs-u-d-md-flex {
+      display: flex !important;
+    }
+    .fs-u-d-md-none {
+      display: none !important;
+    }
+    .fs-u-text-md-start {
+      text-align: start !important;
+    }
+  }
+  @media (min-width: 1024px) {
+    .fs-u-d-lg-flex {
+      display: flex !important;
+    }
+    .fs-u-d-lg-none {
+      display: none !important;
+    }
+    .fs-u-text-lg-start {
+      text-align: start !important;
+    }
+  }
+  @media (min-width: 1280px) {
+    .fs-u-d-xl-flex {
+      display: flex !important;
+    }
+    .fs-u-d-xl-none {
+      display: none !important;
+    }
+    .fs-u-text-xl-start {
+      text-align: start !important;
+    }
+  }
+  @media (min-width: 1536px) {
+    .fs-u-d-xxl-flex {
+      display: flex !important;
+    }
+    .fs-u-d-xxl-none {
+      display: none !important;
+    }
+    .fs-u-text-xxl-start {
+      text-align: start !important;
+    }
+  }
+  @media (min-width: 1920px) {
+    .fs-u-d-xxxl-flex {
+      display: flex !important;
+    }
+    .fs-u-d-xxxl-none {
+      display: none !important;
+    }
+    .fs-u-text-xxxl-start {
+      text-align: start !important;
+    }
+  }
 }
 @layer tokens {
   [data-fs-brand=violet] {
@@ -8125,7 +9399,8 @@
   }
 }
 @layer tokens {
-  [data-theme=dark] {
+  [data-theme=dark],
+  [data-fs-theme=dark] {
     --fs-color-text: #f1f3f4;
     --fs-color-muted: #bdc1c6;
     --fs-color-border: #3c4043;
@@ -8172,7 +9447,8 @@
     --fs-feedback-info-bg: rgb(35.0058091619, 49.6887857769, 78.5757788254);
   }
   @supports (color: oklch(0% 0 0deg)) {
-    [data-theme=dark] {
+    [data-theme=dark],
+    [data-fs-theme=dark] {
       --fs-color-text: oklch(96.2913383165% 0.002529697 228.7848682695deg);
       --fs-color-muted: oklch(80.9268110646% 0.0083071608 253.8653061211deg);
       --fs-color-border: oklch(36.8827622528% 0.0074489239 240.018838067deg);
@@ -8216,5 +9492,37 @@
       --fs-feedback-info-bg: oklch(31.7574919059% 0.0556228738 263.0598185246deg);
     }
   }
+  @media (prefers-color-scheme: dark) {
+    [data-fs-theme=auto] {
+      --fs-color-text: #f1f3f4;
+      --fs-color-muted: #bdc1c6;
+      --fs-color-border: #3c4043;
+      --fs-color-surface: #202124;
+      --fs-color-subtle: #2b2c2f;
+      --fs-color-bg-surface: var(--fs-color-surface);
+      --fs-color-bg-subtle: var(--fs-color-subtle);
+      --fs-color-surface-raised: var(--fs-color-surface);
+      --fs-color-surface-interactive: var(--fs-color-subtle);
+      --fs-color-text-primary: var(--fs-color-text);
+      --fs-color-text-muted: var(--fs-color-muted);
+      --fs-color-border-default: var(--fs-color-border);
+      --fs-color-focus: var(--fs-color-primary);
+      --fs-tooltip-bg: #f8fafc;
+      --fs-tooltip-text: #1e293b;
+    }
+  }
+  @media (forced-colors: active) {
+    :root,
+    [data-theme=dark],
+    [data-fs-theme=light],
+    [data-fs-theme=dark],
+    [data-fs-theme=auto] {
+      --fs-color-border: CanvasText;
+      --fs-color-text: CanvasText;
+      --fs-color-surface: Canvas;
+      --fs-color-subtle: Canvas;
+      --fs-focus-color: Highlight;
+    }
+  }
 }
 /*# sourceMappingURL=fokus.css.map */