@mond-design-system/react 4.6.1 → 4.8.0

package/dist/index.css

@@ -1224,6 +1224,9 @@ button.mds-Link__link {
 .mds-Checkbox__root:has(.mds-Checkbox__box:disabled) {
   cursor: not-allowed;
 }
+.mds-Checkbox__bare {
+  gap: 0;
+}
 .mds-Checkbox__box {
   appearance: none;
   flex: none;
@@ -1244,6 +1247,16 @@ button.mds-Link__link {
   background: var(--mds-action-bg);
   border-color: var(--mds-action-bg);
 }
+.mds-Checkbox__box:indeterminate {
+  background: var(--mds-action-bg);
+  border-color: var(--mds-action-bg);
+}
+.mds-Checkbox__box:indeterminate::after {
+  content: "";
+  width: 0.5em;
+  height: 0;
+  border-top: solid calc(var(--mds-border-width) * 2) var(--mds-action-fg);
+}
 .mds-Checkbox__box:checked::after {
   content: "";
   width: 0.32em;
@@ -1653,6 +1666,169 @@ button.mds-Link__link {
   color: var(--mds-text-secondary);
 }
 
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/DataTable/DataTable.module.css?mds-scoped */
+.mds-DataTable__root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mds-gap-tight);
+}
+.mds-DataTable__table {
+  width: 100%;
+  display: block;
+}
+.mds-DataTable__table colgroup {
+  display: none;
+}
+.mds-DataTable__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mds-gap-tight);
+}
+.mds-DataTable__row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mds-gap-hairline);
+  padding: var(--mds-pad-card);
+  background: var(--mds-surface-card);
+  border: var(--mds-border-width) solid var(--mds-border-subtle);
+  border-radius: var(--mds-radius-card);
+}
+.mds-DataTable__cell,
+.mds-DataTable__select,
+.mds-DataTable__actions {
+  display: block;
+  padding: 0;
+  font: var(--mds-type-body);
+  text-align: start;
+}
+.mds-DataTable__key {
+  display: block;
+  color: var(--mds-text-secondary);
+  font: var(--mds-type-label);
+}
+.mds-DataTable__lead {
+  font: var(--mds-type-subtitle);
+}
+.mds-DataTable__select {
+  order: -1;
+}
+.mds-DataTable__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mds-gap-tight);
+  margin-block-start: var(--mds-gap-hairline);
+}
+.mds-DataTable__selected {
+  background: var(--mds-surface-selected);
+}
+.mds-DataTable__muted {
+  color: var(--mds-text-secondary);
+}
+.mds-DataTable__empty {
+  padding: var(--mds-pad-card);
+  text-align: center;
+}
+.mds-DataTable__bulk {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--mds-gap-tight);
+  padding: var(--mds-pad-tight) var(--mds-pad-control);
+  background: var(--mds-surface-sunken);
+  border: var(--mds-border-width) solid var(--mds-border-subtle);
+  border-radius: var(--mds-radius-card);
+}
+.mds-DataTable__bulkActions {
+  display: flex;
+  gap: var(--mds-gap-tight);
+}
+.mds-DataTable__bulkActions > * {
+  flex: 1;
+}
+@media (min-width: 600px) {
+  .mds-DataTable__bulk {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .mds-DataTable__bulkActions > * {
+    flex: initial;
+  }
+}
+@media (min-width: 1024px) {
+  .mds-DataTable__table {
+    display: table;
+    border-collapse: collapse;
+    background: var(--mds-surface-card);
+    border: var(--mds-border-width) solid var(--mds-border-subtle);
+    border-radius: var(--mds-radius-card);
+    overflow: hidden;
+  }
+  .mds-DataTable__table colgroup {
+    display: table-column-group;
+  }
+  .mds-DataTable__root .mds-DataTable__head {
+    display: table-header-group;
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip-path: none;
+    white-space: normal;
+  }
+  .mds-DataTable__body {
+    display: table-row-group;
+  }
+  .mds-DataTable__row {
+    display: table-row;
+    padding: 0;
+    background: none;
+    border: none;
+    border-radius: 0;
+    border-bottom: var(--mds-border-width) solid var(--mds-border-subtle);
+  }
+  .mds-DataTable__body .mds-DataTable__row:last-child {
+    border-bottom: none;
+  }
+  .mds-DataTable__body .mds-DataTable__row:hover {
+    background: var(--mds-surface-sunken);
+  }
+  .mds-DataTable__body .mds-DataTable__selected {
+    background: var(--mds-surface-selected);
+  }
+  .mds-DataTable__cell,
+  .mds-DataTable__select,
+  .mds-DataTable__actions {
+    display: table-cell;
+    padding: var(--mds-pad-tight) var(--mds-pad-control);
+    vertical-align: middle;
+  }
+  .mds-DataTable__key {
+    display: none;
+  }
+  .mds-DataTable__lead {
+    font: var(--mds-type-body);
+  }
+  th.mds-DataTable__cell,
+  th.mds-DataTable__select,
+  th.mds-DataTable__actions {
+    color: var(--mds-text-secondary);
+    font: var(--mds-type-label);
+    white-space: nowrap;
+  }
+  .mds-DataTable__select {
+    order: 0;
+    width: var(--mds-tap-min);
+  }
+  .mds-DataTable__actions {
+    width: 0;
+    margin-block-start: 0;
+    white-space: nowrap;
+    text-align: end;
+  }
+}
+
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/EmptyState/EmptyState.module.css?mds-scoped */
 .mds-EmptyState__root {
   display: flex;
@@ -2163,6 +2339,75 @@ button.mds-Link__link {
   background: var(--mds-accent-hover);
 }
 
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SideNav/SideNav.module.css?mds-scoped */
+.mds-SideNav__nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mds-gap-tight);
+  width: var(--mds-sidebar-w);
+  flex: 0 0 var(--mds-sidebar-w);
+  padding: var(--mds-pad-page-y) var(--mds-pad-tight);
+  overflow-y: auto;
+}
+.mds-SideNav__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mds-gap-hairline);
+}
+.mds-SideNav__heading {
+  padding-inline: var(--mds-pad-control);
+  font: var(--mds-type-label);
+  color: var(--mds-text-muted);
+}
+.mds-SideNav__item {
+  display: flex;
+  align-items: center;
+  gap: var(--mds-gap-tight);
+  min-height: var(--mds-tap-min);
+  padding: var(--mds-pad-tight) var(--mds-pad-control);
+  border: none;
+  border-radius: var(--mds-radius-control);
+  background: none;
+  color: var(--mds-text-secondary);
+  font: var(--mds-type-label);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: var(--mds-transition-surface);
+}
+.mds-SideNav__item:hover {
+  background: var(--mds-surface-sunken);
+  color: var(--mds-text-primary);
+}
+.mds-SideNav__active,
+.mds-SideNav__active:hover {
+  background: var(--mds-surface-selected);
+  color: var(--mds-text-primary);
+  font-weight: var(--mds-weight-semibold);
+}
+.mds-SideNav__icon {
+  display: inline-flex;
+  flex: none;
+  --mds-icon-slot: var(--mds-icon-md);
+  width: var(--mds-icon-slot);
+  height: var(--mds-icon-slot);
+  font-size: var(--mds-icon-slot);
+}
+.mds-SideNav__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+.mds-SideNav__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.mds-SideNav__count {
+  flex: none;
+}
+
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/MediaPlaceholder/MediaPlaceholder.module.css?mds-scoped */
 .mds-MediaPlaceholder__media {
   position: relative;