fokus-styles 2.6.2 → 2.7.0

package/dist/css/components.css

@@ -43,9 +43,26 @@
     --fs-control-height: 38px;
     --fs-control-height-sm: 30px;
     --fs-control-height-lg: 46px;
+    --fs-control-height-xs: 26px;
+    --fs-control-height-xl: 52px;
     --fs-control-padding-x: 12px;
     --fs-control-padding-x-sm: 8px;
     --fs-control-padding-x-lg: 16px;
+    --fs-control-padding-x-xs: 6px;
+    --fs-control-padding-x-xl: 20px;
+    --fs-control-border-color: var(--fs-color-border);
+    --fs-control-bg: var(--fs-color-surface);
+    --fs-control-hover-bg: var(--fs-color-subtle);
+    --fs-control-placeholder-color: var(--fs-color-muted);
+    --fs-control-focus-color: var(--fs-focus-color);
+    --fs-control-invalid-color: var(--fs-color-danger);
+    --fs-control-valid-color: var(--fs-color-success);
+    --fs-control-disabled-opacity: var(--fs-disabled-opacity);
+    --fs-control-radius: var(--fs-radius-sm);
+    --fs-control-touch-target: 44px;
+    --fs-control-transition: color var(--fs-transition-fast) var(--fs-ease-standard), background-color var(--fs-transition-fast) var(--fs-ease-standard), border-color var(--fs-transition-fast) var(--fs-ease-standard), box-shadow var(--fs-transition-fast) var(--fs-ease-standard);
+    --fs-control-option-gap: var(--fs-space-2);
+    --fs-control-addon-bg: var(--fs-color-subtle);
     --fs-focus-width: 2px;
     --fs-focus-offset: 2px;
     --fs-focus-color: var(--fs-color-primary);
@@ -108,6 +125,24 @@
     --fs-feedback-warning-bg: #fff9e6;
     --fs-feedback-danger-bg: #fff2f3;
     --fs-feedback-info-bg: #f2f2ff;
+    --fs-color-primary-bg-subtle: var(--fs-feedback-primary-bg);
+    --fs-color-primary-border-subtle: var(--fs-color-primary);
+    --fs-color-primary-text-emphasis: var(--fs-alert-primary-text);
+    --fs-color-secondary-bg-subtle: var(--fs-feedback-secondary-bg);
+    --fs-color-secondary-border-subtle: var(--fs-color-secondary);
+    --fs-color-secondary-text-emphasis: var(--fs-alert-secondary-text);
+    --fs-color-success-bg-subtle: var(--fs-feedback-success-bg);
+    --fs-color-success-border-subtle: var(--fs-color-success);
+    --fs-color-success-text-emphasis: var(--fs-alert-success-text);
+    --fs-color-warning-bg-subtle: var(--fs-feedback-warning-bg);
+    --fs-color-warning-border-subtle: var(--fs-color-warning);
+    --fs-color-warning-text-emphasis: var(--fs-alert-warning-text);
+    --fs-color-danger-bg-subtle: var(--fs-feedback-danger-bg);
+    --fs-color-danger-border-subtle: var(--fs-color-danger);
+    --fs-color-danger-text-emphasis: var(--fs-alert-danger-text);
+    --fs-color-info-bg-subtle: var(--fs-feedback-info-bg);
+    --fs-color-info-border-subtle: var(--fs-color-info);
+    --fs-color-info-text-emphasis: var(--fs-alert-info-text);
   }
   @supports (color: oklch(0% 0 0deg)) {
     :root {
@@ -330,7 +365,9 @@
     justify-content: center;
     gap: var(--fs-space-1);
     min-height: var(--fs-control-height);
-    padding: 0 var(--fs-control-padding-x);
+    min-block-size: var(--fs-control-height);
+    padding-block: 0;
+    padding-inline: var(--fs-control-padding-x);
     border: var(--fs-border-width) solid var(--fs-btn-border-color);
     border-radius: var(--fs-radius-sm);
     color: var(--fs-btn-color);
@@ -339,7 +376,8 @@
     font-weight: 500;
     text-decoration: none;
     cursor: pointer;
-    transition: color var(--fs-transition-fast) var(--fs-ease-standard), background-color var(--fs-transition-fast) var(--fs-ease-standard), border-color var(--fs-transition-fast) var(--fs-ease-standard), box-shadow var(--fs-transition-fast) var(--fs-ease-standard);
+    transition: var(--fs-control-transition);
+    white-space: nowrap;
   }
   .fs-btn:hover {
     --fs-btn-bg: var(--fs-btn-hover-bg, var(--fs-color-subtle));
@@ -354,10 +392,37 @@
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--fs-color-primary) 22%, transparent);
   }
   .fs-btn:disabled,
-  .fs-btn.is-disabled {
+  .fs-btn.is-disabled,
+  .fs-btn[aria-disabled=true] {
     opacity: var(--fs-disabled-opacity);
+    cursor: not-allowed;
+  }
+  .fs-btn[aria-disabled=true] {
+    pointer-events: none;
+  }
+  .fs-btn.is-loading,
+  .fs-btn[aria-busy=true] {
+    cursor: wait;
     pointer-events: none;
   }
+  .fs-btn.is-loading::after,
+  .fs-btn[aria-busy=true]::after {
+    width: 1em;
+    height: 1em;
+    border: 2px solid currentcolor;
+    border-inline-end-color: transparent;
+    border-radius: 50%;
+    content: "";
+    animation: fokus-spin 650ms linear infinite;
+  }
+  .fs-btn-icon {
+    display: inline-grid;
+    width: var(--fs-control-touch-target);
+    min-width: var(--fs-control-touch-target);
+    min-height: var(--fs-control-touch-target);
+    padding: 0;
+    place-items: center;
+  }
   .fs-btn-primary {
     --fs-btn-color: var(--fs-color-on-primary);
     --fs-btn-bg: var(--fs-color-primary);
@@ -462,11 +527,13 @@
   }
   .fs-btn-sm {
     min-height: var(--fs-control-height-sm);
+    min-block-size: var(--fs-control-height-sm);
     padding: 0 var(--fs-control-padding-x-sm);
     font-size: 0.75rem;
   }
   .fs-btn-lg {
     min-height: var(--fs-control-height-lg);
+    min-block-size: var(--fs-control-height-lg);
     padding: 0 var(--fs-control-padding-x-lg);
     font-size: 1rem;
   }
@@ -1162,6 +1229,89 @@
     pointer-events: none;
   }
 }
+@layer components {
+  .fs-menu {
+    --fs-menu-item-padding-block: 0.5rem;
+    --fs-menu-item-padding-inline: 0.75rem;
+    --fs-menu-item-radius: var(--fs-radius-sm);
+    --fs-menu-label-color: var(--fs-color-muted);
+    --fs-menu-nested-indent: 0.875rem;
+    min-inline-size: 12rem;
+  }
+  .fs-menu-label {
+    margin-block: 1rem 0.375rem;
+    padding-inline: var(--fs-menu-item-padding-inline);
+    color: var(--fs-menu-label-color);
+    font-size: 0.6875rem;
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+  .fs-menu-label:first-child {
+    margin-block-start: 0;
+  }
+  .fs-menu-list,
+  .fs-menu-list ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .fs-menu-list ul {
+    margin-block-start: 0.25rem;
+    padding-inline-start: var(--fs-menu-nested-indent);
+    border-inline-start: var(--fs-border-width) solid var(--fs-color-border-default);
+  }
+  .fs-menu-list a,
+  .fs-menu-list button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    inline-size: 100%;
+    min-block-size: 2.5rem;
+    padding-block: var(--fs-menu-item-padding-block);
+    padding-inline: var(--fs-menu-item-padding-inline);
+    border: 0;
+    border-radius: var(--fs-menu-item-radius);
+    color: var(--fs-color-text);
+    background: transparent;
+    font: inherit;
+    text-align: start;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .fs-menu-list a:hover,
+  .fs-menu-list a:focus-visible,
+  .fs-menu-list button:hover,
+  .fs-menu-list button:focus-visible {
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-subtle);
+    outline: none;
+  }
+  .fs-menu-list .is-active,
+  .fs-menu-list [aria-current=page] {
+    color: var(--fs-alert-primary-text);
+    background-color: var(--fs-color-primary-bg-subtle);
+    font-weight: 500;
+  }
+  .fs-menu-list .is-disabled,
+  .fs-menu-list [aria-disabled=true],
+  .fs-menu-list :disabled {
+    color: var(--fs-color-muted);
+    pointer-events: none;
+    opacity: 0.6;
+  }
+  .fs-menu-compact {
+    --fs-menu-item-padding-block: 0.375rem;
+    --fs-menu-item-padding-inline: 0.625rem;
+  }
+  .fs-menu-bordered {
+    padding: 0.375rem;
+    border: var(--fs-border-width) solid var(--fs-color-border-default);
+    border-radius: var(--fs-radius-md);
+    background-color: var(--fs-color-surface);
+    box-shadow: var(--fs-shadow-sm);
+  }
+}
 @layer components {
   .fs-combobox {
     position: relative;
@@ -1175,9 +1325,28 @@
 }
 @layer components {
   [data-theme=dark] .fs-form-control[type=date]::-webkit-calendar-picker-indicator,
-  [data-theme=dark] .fs-form-control[type=time]::-webkit-calendar-picker-indicator {
+  [data-theme=dark] .fs-form-control[type=time]::-webkit-calendar-picker-indicator,
+  [data-theme=dark] .fs-form-date::-webkit-calendar-picker-indicator,
+  [data-theme=dark] .fs-form-time::-webkit-calendar-picker-indicator {
     filter: invert(1);
   }
+  .fs-form-date,
+  .fs-form-time {
+    appearance: auto;
+    color-scheme: light;
+  }
+  [data-theme=dark] .fs-form-date,
+  [data-theme=dark] .fs-form-time,
+  [data-fs-theme=dark] .fs-form-date,
+  [data-fs-theme=dark] .fs-form-time,
+  [data-theme=dark] .fs-datepicker-panel,
+  [data-fs-theme=dark] .fs-datepicker-panel {
+    color-scheme: dark;
+  }
+  .fs-form-date::-webkit-calendar-picker-indicator,
+  .fs-form-time::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+  }
   .fs-datepicker {
     position: relative;
     display: inline-flex;
@@ -1193,6 +1362,7 @@
     background-color: var(--fs-color-surface);
     box-shadow: var(--fs-shadow-md);
     z-index: var(--fs-z-dropdown);
+    color-scheme: light;
   }
   .fs-datepicker-panel.is-open {
     display: block;
@@ -1290,6 +1460,25 @@
     pointer-events: none;
     opacity: 0.4;
   }
+  .fs-datepicker-day[aria-current=date] {
+    outline: var(--fs-border-width) solid var(--fs-color-primary);
+    outline-offset: -2px;
+  }
+  .fs-datepicker-title[aria-live=polite] {
+    min-inline-size: 8rem;
+    text-align: center;
+  }
+  @media (forced-colors: active) {
+    .fs-datepicker-panel {
+      border: 1px solid CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+    .fs-datepicker-day.is-selected {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
 }
 @layer components {
   .fs-datatable-toolbar {
@@ -1465,11 +1654,20 @@
     border-left: 5px solid transparent;
   }
   .fs-dropdown-menu {
+    --fs-dropdown-min-inline-size: 12rem;
+    --fs-dropdown-max-block-size: min(70vh, 28rem);
+    --fs-dropdown-offset: 0.25rem;
+    --fs-dropdown-padding-block: 0.375rem;
+    --fs-dropdown-item-padding-block: 0.5rem;
+    --fs-dropdown-item-padding-inline: 1rem;
     position: absolute;
     display: none;
-    min-width: 180px;
+    min-inline-size: var(--fs-dropdown-min-inline-size);
+    max-block-size: var(--fs-dropdown-max-block-size);
+    overflow-y: auto;
     margin: 0;
-    padding: 6px 0;
+    padding-block: var(--fs-dropdown-padding-block);
+    padding-inline: 0;
     border: var(--fs-border-width) solid var(--fs-color-border-default);
     border-radius: var(--fs-radius-md);
     color: var(--fs-color-text);
@@ -1477,6 +1675,28 @@
     box-shadow: var(--fs-shadow-md);
     z-index: var(--fs-z-dropdown);
   }
+  .fs-dropdown-menu[data-placement=top] {
+    transform-origin: bottom center;
+  }
+  .fs-dropdown-menu[data-placement=bottom] {
+    transform-origin: top center;
+  }
+  .fs-dropdown-menu[data-placement=left] {
+    transform-origin: right center;
+  }
+  .fs-dropdown-menu[data-placement=right] {
+    transform-origin: left center;
+  }
+  .fs-dropdown-menu.fs-dropdown-menu-sm {
+    --fs-dropdown-min-inline-size: 10rem;
+    --fs-dropdown-item-padding-block: 0.375rem;
+    --fs-dropdown-item-padding-inline: 0.75rem;
+  }
+  .fs-dropdown-menu.fs-dropdown-menu-lg {
+    --fs-dropdown-min-inline-size: 16rem;
+    --fs-dropdown-item-padding-block: 0.625rem;
+    --fs-dropdown-item-padding-inline: 1.25rem;
+  }
   .fs-dropdown-menu.is-open {
     display: block;
   }
@@ -1484,12 +1704,14 @@
     display: flex;
     align-items: center;
     width: 100%;
-    padding: 8px 16px;
+    min-block-size: 2.5rem;
+    padding-block: var(--fs-dropdown-item-padding-block);
+    padding-inline: var(--fs-dropdown-item-padding-inline);
     border: 0;
     color: var(--fs-color-text);
     background-color: var(--fs-color-surface-raised);
     font-size: 0.8125rem;
-    text-align: left;
+    text-align: start;
     text-decoration: none;
     cursor: pointer;
   }
@@ -1508,19 +1730,167 @@
     pointer-events: none;
     opacity: 0.6;
   }
+  .fs-dropdown-item[aria-disabled=true],
+  .fs-dropdown-item:disabled {
+    color: var(--fs-color-muted);
+    pointer-events: none;
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  .fs-dropdown-item .fs-icon,
+  .fs-dropdown-item > svg {
+    flex: 0 0 auto;
+  }
   .fs-dropdown-divider {
     height: 1px;
-    margin: 6px 0;
+    margin-block: 6px;
+    margin-inline: 0;
     border: none;
     background-color: var(--fs-color-border);
   }
   .fs-dropdown-header {
-    padding: 4px 16px;
+    padding-block: 4px;
+    padding-inline: var(--fs-dropdown-item-padding-inline);
     color: var(--fs-color-muted);
     font-size: 0.6875rem;
     font-weight: 500;
     text-transform: uppercase;
   }
+  .fs-dropdown-content {
+    padding-block: var(--fs-dropdown-padding-block);
+  }
+  .fs-dropdown-content > .fs-dropdown-item {
+    min-block-size: auto;
+  }
+  .fs-dropdown-menu.fs-dropdown-rich {
+    --fs-dropdown-rich-inline-size: 22rem;
+    inline-size: min(var(--fs-dropdown-rich-inline-size), 100vw - 2rem);
+    min-inline-size: 0;
+    max-inline-size: calc(100vw - 2rem);
+    padding-block: 0;
+    overflow: hidden;
+  }
+  .fs-dropdown-rich-header {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 1rem;
+  }
+  .fs-dropdown-rich-avatar {
+    display: inline-grid;
+    flex: 0 0 2.25rem;
+    width: 2.25rem;
+    height: 2.25rem;
+    place-items: center;
+    border-radius: 50%;
+    color: var(--fs-color-on-primary);
+    background: var(--fs-color-primary);
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+  .fs-dropdown-rich-heading {
+    display: grid;
+    min-inline-size: 0;
+    flex: 1 1 auto;
+    gap: 0.125rem;
+  }
+  .fs-dropdown-rich-title,
+  .fs-dropdown-rich-description,
+  .fs-dropdown-rich-item-title,
+  .fs-dropdown-rich-item-description {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .fs-dropdown-rich-title {
+    color: var(--fs-color-text);
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+  .fs-dropdown-rich-description,
+  .fs-dropdown-rich-item-description {
+    color: var(--fs-color-muted);
+    font-size: 0.6875rem;
+  }
+  .fs-dropdown-rich-status {
+    flex: 0 0 auto;
+  }
+  .fs-dropdown-rich-list {
+    display: grid;
+    gap: 0.25rem;
+    padding: 0.5rem;
+  }
+  .fs-dropdown-rich-list > .fs-dropdown-item {
+    min-block-size: 3.25rem;
+    gap: 0.75rem;
+    padding: 0.625rem 0.75rem;
+    border-radius: var(--fs-radius-sm);
+    background: transparent;
+  }
+  .fs-dropdown-rich-list > .fs-dropdown-item:hover,
+  .fs-dropdown-rich-list > .fs-dropdown-item:focus-visible {
+    background: var(--fs-color-subtle);
+  }
+  .fs-dropdown-rich-icon {
+    display: inline-grid;
+    flex: 0 0 2rem;
+    width: 2rem;
+    height: 2rem;
+    place-items: center;
+    border: 1px solid var(--fs-color-border-default);
+    border-radius: var(--fs-radius-sm);
+    color: var(--fs-color-primary);
+    background: var(--fs-color-surface);
+  }
+  .fs-dropdown-rich-icon > svg {
+    width: 1rem;
+    height: 1rem;
+    stroke: currentcolor;
+  }
+  .fs-dropdown-rich-copy {
+    display: grid;
+    min-inline-size: 0;
+    flex: 1 1 auto;
+    gap: 0.125rem;
+  }
+  .fs-dropdown-rich-item-title {
+    color: inherit;
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+  .fs-dropdown-rich-chevron {
+    flex: 0 0 auto;
+    color: var(--fs-color-muted);
+    font-size: 1rem;
+    line-height: 1;
+  }
+  .fs-dropdown-rich-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    color: var(--fs-color-muted);
+    background: var(--fs-color-subtle);
+    font-size: 0.6875rem;
+  }
+  .fs-dropdown-rich-footer a {
+    color: var(--fs-color-primary);
+    font-weight: 600;
+    text-decoration: none;
+  }
+  .fs-dropdown-rich-footer a:hover,
+  .fs-dropdown-rich-footer a:focus-visible {
+    text-decoration: underline;
+  }
+  .fs-dropdown-item.fs-dropdown-item-danger {
+    color: var(--fs-color-danger);
+  }
+  .fs-dropdown-item.fs-dropdown-item-danger:hover,
+  .fs-dropdown-item.fs-dropdown-item-danger:focus-visible {
+    color: var(--fs-color-on-danger);
+    background-color: var(--fs-color-danger);
+  }
 }
 @layer components {
   .fs-modal {
@@ -1739,6 +2109,31 @@
     padding-inline-start: var(--fs-tag-padding-inline-start);
     padding-inline-end: var(--fs-tag-padding-inline-end);
   }
+  .fs-tag-rounded {
+    --fs-badge-radius: 999px;
+    --fs-tag-padding-inline-start: 8px;
+    --fs-tag-padding-inline-end: 8px;
+  }
+  .fs-tag-addons {
+    --fs-tag-addon-padding-inline: 8px;
+    display: inline-flex;
+    align-items: stretch;
+    gap: 0;
+  }
+  .fs-tag-addons > .fs-tag {
+    --fs-tag-padding-inline-start: var(--fs-tag-addon-padding-inline);
+    --fs-tag-padding-inline-end: var(--fs-tag-addon-padding-inline);
+    min-inline-size: 0;
+    border-radius: 0;
+  }
+  .fs-tag-addons > .fs-tag:first-child {
+    border-start-start-radius: var(--fs-badge-radius);
+    border-end-start-radius: var(--fs-badge-radius);
+  }
+  .fs-tag-addons > .fs-tag:last-child {
+    border-start-end-radius: var(--fs-badge-radius);
+    border-end-end-radius: var(--fs-badge-radius);
+  }
   .fs-tag-label {
     min-width: 0;
   }
@@ -2093,8 +2488,42 @@
 @layer components {
   .fs-tabs {
     display: flex;
+    max-inline-size: 100%;
+    overflow-x: auto;
+    scrollbar-width: thin;
     border-bottom: var(--fs-border-width) solid var(--fs-color-border-default);
   }
+  .fs-tabs .fs-nav-link {
+    flex: 0 0 auto;
+  }
+  .fs-tabs-boxed {
+    border: var(--fs-border-width) solid var(--fs-color-border-default);
+    border-radius: var(--fs-radius-md);
+    padding: 0.25rem;
+  }
+  .fs-tabs-boxed .fs-nav-link,
+  .fs-tabs-toggle .fs-nav-link {
+    margin-block-end: 0;
+    border: 0;
+    border-radius: var(--fs-radius-sm);
+  }
+  .fs-tabs-boxed .fs-nav-link.is-active,
+  .fs-tabs-toggle .fs-nav-link.is-active {
+    color: var(--fs-color-text);
+    background-color: var(--fs-color-surface);
+    box-shadow: var(--fs-shadow-sm);
+  }
+  .fs-tabs-toggle {
+    gap: 0;
+    padding: 0.25rem;
+    border: 0;
+    border-radius: var(--fs-radius-md);
+    background-color: var(--fs-color-subtle);
+  }
+  .fs-tabs-toggle .fs-nav-link {
+    flex: 1 1 0;
+    justify-content: center;
+  }
   .fs-tabs .fs-nav-link {
     margin-bottom: -1px;
     border-bottom: 2px solid transparent;
@@ -2142,6 +2571,23 @@
     justify-content: center;
     text-align: center;
   }
+  .fs-tabs-vertical {
+    flex-direction: column;
+    align-items: stretch;
+    overflow-x: visible;
+    border-inline-start: var(--fs-border-width) solid var(--fs-color-border-default);
+    border-block-end: 0;
+  }
+  .fs-tabs-vertical .fs-nav-link {
+    justify-content: flex-start;
+    margin-block-end: 0;
+    margin-inline-start: -1px;
+    border-block-end: 0;
+    border-inline-start: 2px solid transparent;
+  }
+  .fs-tabs-vertical .fs-nav-link.is-active {
+    border-inline-start-color: var(--fs-color-primary);
+  }
   .fs-tabs-sm .fs-nav-link {
     padding: 6px 10px;
     font-size: 0.75rem;
@@ -2631,6 +3077,23 @@
     margin: 0;
     padding: 0;
     list-style: none;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .fs-pagination-centered {
+    justify-content: center;
+  }
+  .fs-pagination-right {
+    justify-content: flex-end;
+  }
+  .fs-pagination-list {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
   }
   .fs-pagination-scroll {
     max-width: 100%;
@@ -2644,18 +3107,20 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 32px;
-    height: 32px;
-    padding: 0 8px;
-    border: 1px solid var(--fs-color-border);
+    min-inline-size: 2rem;
+    min-block-size: 2rem;
+    padding-inline: 0.5rem;
+    border: var(--fs-border-width) solid var(--fs-color-border-default);
     border-radius: var(--fs-radius-sm);
     color: var(--fs-color-text);
     background-color: var(--fs-color-surface);
     text-decoration: none;
-    transition: background-color 0.15s ease-in-out;
+    transition: color var(--fs-transition-fast) var(--fs-ease-standard), background-color var(--fs-transition-fast) var(--fs-ease-standard), border-color var(--fs-transition-fast) var(--fs-ease-standard), box-shadow var(--fs-transition-fast) var(--fs-ease-standard);
   }
   .fs-page-link:hover {
+    color: var(--fs-color-primary);
     background-color: var(--fs-color-subtle);
+    border-color: var(--fs-color-primary);
   }
   .fs-page-link:focus-visible {
     outline: var(--fs-focus-width) solid var(--fs-color-primary);
@@ -2673,6 +3138,16 @@
     opacity: 0.6;
     pointer-events: none;
   }
+  .fs-page-item[aria-disabled=true] .fs-page-link,
+  .fs-page-link[aria-disabled=true] {
+    color: var(--fs-color-muted);
+    opacity: 0.6;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+  .fs-pagination-rounded .fs-page-link {
+    border-radius: 999px;
+  }
   .fs-pagination-bordered {
     gap: 0;
   }
@@ -2680,15 +3155,15 @@
     border-radius: 0;
   }
   .fs-pagination-bordered .fs-page-item:not(:first-child) .fs-page-link {
-    margin-left: -1px;
+    margin-inline-start: -1px;
   }
   .fs-pagination-bordered .fs-page-item:first-child .fs-page-link {
-    border-top-left-radius: var(--fs-radius-sm);
-    border-bottom-left-radius: var(--fs-radius-sm);
+    border-start-start-radius: var(--fs-radius-sm);
+    border-end-start-radius: var(--fs-radius-sm);
   }
   .fs-pagination-bordered .fs-page-item:last-child .fs-page-link {
-    border-top-right-radius: var(--fs-radius-sm);
-    border-bottom-right-radius: var(--fs-radius-sm);
+    border-start-end-radius: var(--fs-radius-sm);
+    border-end-end-radius: var(--fs-radius-sm);
   }
   .fs-pagination-bordered .fs-page-link:hover,
   .fs-pagination-bordered .fs-page-item.is-active .fs-page-link {
@@ -2696,15 +3171,15 @@
     z-index: 1;
   }
   .fs-pagination-sm .fs-page-link {
-    min-width: 26px;
-    height: 26px;
-    padding: 0 6px;
+    min-inline-size: 1.625rem;
+    min-block-size: 1.625rem;
+    padding-inline: 0.375rem;
     font-size: 0.6875rem;
   }
   .fs-pagination-lg .fs-page-link {
-    min-width: 40px;
-    height: 40px;
-    padding: 0 12px;
+    min-inline-size: 2.5rem;
+    min-block-size: 2.5rem;
+    padding-inline: 0.75rem;
     font-size: 0.8125rem;
   }
   .fs-page-link-text {
@@ -3506,6 +3981,10 @@
     border: 1px solid var(--fs-color-border);
     border-radius: var(--fs-radius-sm);
     overflow: hidden;
+    max-inline-size: 100%;
+  }
+  .fs-segmented-control-vertical {
+    flex-direction: column;
   }
   .fs-segmented-item {
     display: flex;
@@ -3530,6 +4009,7 @@
     align-items: center;
     justify-content: center;
     min-height: 38px;
+    min-block-size: var(--fs-control-touch-target);
     padding: 0 12px;
     color: var(--fs-color-text);
     background-color: var(--fs-color-surface);
@@ -3540,7 +4020,7 @@
     cursor: pointer;
     -webkit-user-select: none;
             user-select: none;
-    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
+    transition: var(--fs-control-transition);
   }
   .fs-segmented-label:hover {
     background-color: var(--fs-color-subtle);
@@ -3561,6 +4041,15 @@
     opacity: 0.4;
     pointer-events: none;
   }
+  .fs-segmented-input[aria-invalid=true] + .fs-segmented-label,
+  .fs-segmented-control.is-invalid {
+    outline: var(--fs-border-width) solid var(--fs-control-invalid-color);
+    outline-offset: var(--fs-focus-offset);
+  }
+  .fs-segmented-control-vertical .fs-segmented-item:not(:first-child) .fs-segmented-label {
+    border-block-start: 1px solid var(--fs-color-border);
+    border-inline-start: 0;
+  }
   .fs-segmented-control-sm .fs-segmented-label {
     min-height: 30px;
     padding: 0 8px;
@@ -4061,6 +4550,17 @@
   .fs-button-group-vertical > .fs-btn {
     width: 100%;
   }
+  .fs-button-group[role=group] {
+    isolation: isolate;
+  }
+  .fs-button-group > .fs-btn:focus-visible {
+    z-index: 2;
+  }
+  .fs-button-group > .fs-btn[aria-pressed=true] {
+    --fs-btn-bg: var(--fs-color-primary);
+    --fs-btn-color: var(--fs-color-on-primary);
+    --fs-btn-border-color: var(--fs-color-primary);
+  }
 }
 /* stylelint-disable declaration-block-single-line-max-declarations */
 @layer components {
@@ -4438,6 +4938,13 @@
     --fs-color-focus: var(--fs-color-primary);
     --fs-color-action-primary: var(--fs-color-primary);
     --fs-color-action-danger: var(--fs-color-danger);
+    --fs-control-bg: var(--fs-color-surface);
+    --fs-control-border-color: var(--fs-color-border);
+    --fs-control-hover-bg: var(--fs-color-subtle);
+    --fs-control-placeholder-color: var(--fs-color-muted);
+    --fs-control-invalid-color: var(--fs-color-danger);
+    --fs-control-valid-color: var(--fs-color-success);
+    --fs-control-addon-bg: var(--fs-color-subtle);
     --fs-shadow-sm: 0 1px 3px rgb(0 0 0 / 50%), 0 1px 2px rgb(0 0 0 / 40%);
     --fs-shadow-md: 0 6px 12px rgb(0 0 0 / 55%), 0 3px 6px rgb(0 0 0 / 45%);
     --fs-shadow-lg: 0 15px 30px rgb(0 0 0 / 60%), 0 6px 12px rgb(0 0 0 / 50%);