@mond-design-system/react 6.0.0 → 6.1.1

package/dist/index.css

@@ -145,6 +145,15 @@
 }
 
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Button/Button.module.css?mds-scoped */
+.mds-hit-area__hitArea::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  width: max(100%, var(--mds-tap-min));
+  height: max(100%, var(--mds-tap-min));
+}
 .mds-Button__button {
   display: inline-flex;
   align-items: center;
@@ -235,18 +244,23 @@
 .mds-Button__variant-warning:hover:not(:disabled) {
   filter: brightness(0.94);
 }
-.mds-Button__button:disabled {
+.mds-Button__button:disabled,
+.mds-Button__button[aria-disabled=true] {
   background: var(--mds-action-disabled-bg);
   color: var(--mds-action-disabled-fg);
   border-color: transparent;
   cursor: not-allowed;
 }
+.mds-Button__button[aria-disabled=true] {
+  pointer-events: none;
+}
 .mds-Button__fullWidth {
   width: 100%;
 }
 .mds-Button__icon-only {
   padding: 0;
   border-radius: var(--mds-radius-pill);
+  position: relative;
 }
 .mds-Button__icon-only.mds-Button__size-sm {
   width: var(--mds-control-h-sm);
@@ -342,6 +356,14 @@ button.mds-Link__link {
 .mds-Link__size-xl {
   font-size: var(--mds-text-xl);
 }
+.mds-Link__hiddenNote {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
 
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Avatar/Avatar.module.css?mds-scoped */
 .mds-Avatar__avatar {
@@ -607,7 +629,17 @@ button.mds-Link__link {
 }
 
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/CountButton/CountButton.module.css?mds-scoped */
+.mds-hit-area__hitArea::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  width: max(100%, var(--mds-tap-min));
+  height: max(100%, var(--mds-tap-min));
+}
 .mds-CountButton__button {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: var(--mds-gap-hairline);
@@ -627,10 +659,14 @@ button.mds-Link__link {
 .mds-CountButton__button:active:not(:disabled) {
   background: var(--mds-surface-selected);
 }
-.mds-CountButton__button:disabled {
+.mds-CountButton__button:disabled,
+.mds-CountButton__button[aria-disabled=true] {
   cursor: default;
   opacity: 0.6;
 }
+.mds-CountButton__button[aria-disabled=true] {
+  pointer-events: none;
+}
 .mds-CountButton__tone-accent {
   color: var(--mds-accent);
 }
@@ -842,6 +878,9 @@ button.mds-Link__link {
   cursor: default;
   opacity: 0.5;
 }
+.mds-DateTimePicker__trigger[aria-invalid=true] {
+  border-color: var(--mds-status-danger);
+}
 .mds-DateTimePicker__hasValue {
   color: var(--mds-text-primary);
 }
@@ -898,6 +937,9 @@ button.mds-Link__link {
   min-height: calc(6 * var(--mds-tap-min));
   align-items: stretch;
 }
+.mds-DateTimePicker__week {
+  display: contents;
+}
 .mds-DateTimePicker__day {
   border: none;
   background: transparent;
@@ -1191,6 +1233,15 @@ button.mds-Link__link {
 }
 
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/PasswordInput/PasswordInput.module.css?mds-scoped */
+.mds-hit-area__hitArea::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  width: max(100%, var(--mds-tap-min));
+  height: max(100%, var(--mds-tap-min));
+}
 .mds-PasswordInput__wrap {
   position: relative;
   display: block;
@@ -1333,6 +1384,33 @@ button.mds-Link__link {
 .mds-Checkbox__box:disabled ~ .mds-Checkbox__label {
   color: var(--mds-action-disabled-fg);
 }
+@media (forced-colors: active) {
+  .mds-Checkbox__box:checked,
+  .mds-Checkbox__box:indeterminate {
+    background: SelectedItem;
+    border-color: SelectedItem;
+  }
+  .mds-Checkbox__box:checked::after {
+    border-color: SelectedItemText;
+  }
+  .mds-Checkbox__box:indeterminate::after {
+    border-top-color: SelectedItemText;
+  }
+  .mds-Checkbox__box:disabled {
+    border-color: GrayText;
+  }
+  .mds-Checkbox__box:disabled:checked,
+  .mds-Checkbox__box:disabled:indeterminate {
+    background: GrayText;
+    border-color: GrayText;
+  }
+  .mds-Checkbox__box:disabled:checked::after {
+    border-color: Canvas;
+  }
+  .mds-Checkbox__box:disabled:indeterminate::after {
+    border-top-color: Canvas;
+  }
+}
 
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Radio/Radio.module.css?mds-scoped */
 .mds-hit-area__hitArea::before {
@@ -1350,6 +1428,12 @@ button.mds-Link__link {
   gap: var(--mds-gap-tight);
   cursor: pointer;
 }
+.mds-Radio__size-sm {
+  --mds-check-size: var(--mds-check-size-sm);
+}
+.mds-Radio__size-lg {
+  --mds-check-size: var(--mds-check-size-lg);
+}
 .mds-Radio__root:has(.mds-Radio__dot:disabled) {
   cursor: not-allowed;
 }
@@ -1359,6 +1443,7 @@ button.mds-Link__link {
   margin: 0;
   width: var(--mds-check-size);
   height: var(--mds-check-size);
+  font-size: var(--mds-check-size);
   border: var(--mds-border-width) solid var(--mds-control-border);
   border-radius: var(--mds-radius-pill);
   background: var(--mds-surface-card);
@@ -1373,8 +1458,8 @@ button.mds-Link__link {
 }
 .mds-Radio__dot:checked::after {
   content: "";
-  width: 50%;
-  height: 50%;
+  width: 0.5em;
+  height: 0.5em;
   border-radius: var(--mds-radius-pill);
   background: var(--mds-action-bg);
 }
@@ -1392,6 +1477,20 @@ button.mds-Link__link {
 .mds-Radio__dot:disabled ~ .mds-Radio__label {
   color: var(--mds-action-disabled-fg);
 }
+@media (forced-colors: active) {
+  .mds-Radio__dot:checked {
+    border-color: SelectedItem;
+  }
+  .mds-Radio__dot:checked::after {
+    background: SelectedItem;
+  }
+  .mds-Radio__dot:disabled {
+    border-color: GrayText;
+  }
+  .mds-Radio__dot:disabled:checked::after {
+    background: GrayText;
+  }
+}
 
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Switch/Switch.module.css?mds-scoped */
 .mds-hit-area__hitArea::before {
@@ -1409,7 +1508,8 @@ button.mds-Link__link {
   gap: var(--mds-gap-tight);
   cursor: pointer;
 }
-.mds-Switch__root:has(.mds-Switch__track:disabled) {
+.mds-Switch__root:has(.mds-Switch__track:disabled),
+.mds-Switch__root:has(.mds-Switch__track[aria-disabled=true]) {
   cursor: not-allowed;
 }
 .mds-Switch__track {
@@ -1442,10 +1542,12 @@ button.mds-Link__link {
 .mds-Switch__track:checked::after {
   transform: translateY(-50%) translateX(calc(var(--mds-switch-w) - var(--mds-switch-knob) - 2 * var(--mds-switch-inset)));
 }
-.mds-Switch__track:disabled {
+.mds-Switch__track:disabled,
+.mds-Switch__track[aria-disabled=true] {
   background: var(--mds-action-disabled-bg);
 }
-.mds-Switch__track:disabled::after {
+.mds-Switch__track:disabled::after,
+.mds-Switch__track[aria-disabled=true]::after {
   background: var(--mds-action-disabled-fg);
 }
 .mds-Switch__trackWrap {
@@ -1465,9 +1567,33 @@ button.mds-Link__link {
   font: var(--mds-type-label);
   color: var(--mds-text-primary);
 }
-.mds-Switch__root:has(.mds-Switch__track:disabled) .mds-Switch__label {
+.mds-Switch__root:has(.mds-Switch__track:disabled) .mds-Switch__label,
+.mds-Switch__root:has(.mds-Switch__track[aria-disabled=true]) .mds-Switch__label {
   color: var(--mds-action-disabled-fg);
 }
+@media (forced-colors: active) {
+  .mds-Switch__track {
+    border: var(--mds-border-width) solid ButtonText;
+  }
+  .mds-Switch__track::after {
+    background: ButtonText;
+  }
+  .mds-Switch__track:checked {
+    background: SelectedItem;
+    border-color: SelectedItem;
+  }
+  .mds-Switch__track:checked::after {
+    background: SelectedItemText;
+  }
+  .mds-Switch__track:disabled,
+  .mds-Switch__track[aria-disabled=true] {
+    border-color: GrayText;
+  }
+  .mds-Switch__track:disabled::after,
+  .mds-Switch__track[aria-disabled=true]::after {
+    background: GrayText;
+  }
+}
 
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SegmentedControl/SegmentedControl.module.css?mds-scoped */
 .mds-SegmentedControl__group {
@@ -1549,6 +1675,16 @@ button.mds-Link__link {
   outline: var(--mds-focus-width) solid var(--mds-focus-ring-color);
   outline-offset: var(--mds-focus-offset);
 }
+@media (forced-colors: active) {
+  .mds-SegmentedControl__input:checked + .mds-SegmentedControl__face {
+    background: SelectedItem;
+    color: SelectedItemText;
+  }
+  .mds-SegmentedControl__input:disabled:checked + .mds-SegmentedControl__face {
+    background: GrayText;
+    color: Canvas;
+  }
+}
 
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Scroller/Scroller.module.css?mds-scoped */
 .mds-Scroller__scroller {
@@ -1574,7 +1710,7 @@ button.mds-Link__link {
   overflow-x: auto;
   overscroll-behavior-x: contain;
   scroll-snap-type: x proximity;
-  scroll-behavior: smooth;
+  scroll-behavior: var(--mds-scroll);
   scrollbar-width: none;
   padding: var(--mds-focus-offset);
   margin: calc(var(--mds-focus-offset) * -1);
@@ -2042,6 +2178,7 @@ th.mds-DataTable__actions {
   border: var(--mds-border-emphasis) solid var(--mds-accent);
 }
 .mds-Card__interactive {
+  min-height: var(--mds-tap-min);
   padding: 0;
   margin: 0;
   font: inherit;
@@ -2316,7 +2453,6 @@ th.mds-DataTable__actions {
   border-radius: var(--mds-radius-tag);
   box-shadow: var(--mds-elevation-floating);
   font: var(--mds-type-note);
-  pointer-events: none;
 }
 
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/ConfirmDialog/ConfirmDialog.module.css?mds-scoped */
@@ -2411,6 +2547,7 @@ th.mds-DataTable__actions {
   border-top: var(--mds-border-width) solid var(--mds-border-subtle);
 }
 .mds-TabBar__item {
+  position: relative;
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -2434,6 +2571,17 @@ th.mds-DataTable__actions {
 .mds-TabBar__active:hover {
   color: var(--mds-text-accent);
 }
+.mds-TabBar__active::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  translate: -50%;
+  width: var(--mds-tabbar-icon);
+  height: var(--mds-border-emphasis);
+  border-radius: var(--mds-radius-pill);
+  background: currentColor;
+}
 .mds-TabBar__icon {
   position: relative;
   display: inline-flex;
@@ -2482,6 +2630,11 @@ th.mds-DataTable__actions {
 .mds-TabBar__action:hover {
   background: var(--mds-accent-hover);
 }
+@media (forced-colors: active) {
+  .mds-TabBar__active::before {
+    background: SelectedItem;
+  }
+}
 
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SideNav/SideNav.module.css?mds-scoped */
 .mds-SideNav__nav {