@mond-design-system/react 3.0.3 → 4.0.0

package/dist/index.css

@@ -245,11 +245,46 @@
   width: var(--mds-control-h-sm);
 }
 .mds-Button__icon-only.mds-Button__size-md {
-  width: var(--mds-control-h-md);
+  width: var(--mds-icon-btn-size);
+  height: var(--mds-icon-btn-size);
 }
 .mds-Button__icon-only.mds-Button__size-lg {
   width: var(--mds-control-h-lg);
 }
+.mds-Button__on-media.mds-Button__variant-ghost,
+.mds-Button__on-media.mds-Button__variant-secondary {
+  color: var(--mds-text-on-media);
+}
+.mds-Button__on-media.mds-Button__variant-secondary {
+  border-color: var(--mds-on-media-border);
+}
+.mds-Button__on-media.mds-Button__variant-ghost:hover:not(:disabled),
+.mds-Button__on-media.mds-Button__variant-secondary:hover:not(:disabled) {
+  background: var(--mds-on-media-surface-hover);
+  color: var(--mds-text-on-media);
+}
+.mds-Button__on-media.mds-Button__variant-secondary:hover:not(:disabled) {
+  border-color: var(--mds-text-on-media);
+}
+.mds-Button__on-media.mds-Button__variant-ghost:active:not(:disabled),
+.mds-Button__on-media.mds-Button__variant-secondary:active:not(:disabled) {
+  background: var(--mds-on-media-surface-active);
+}
+.mds-Button__on-media:focus-visible {
+  outline-color: var(--mds-on-media-focus-ring);
+}
+.mds-Button__on-media.mds-Button__variant-ghost:disabled,
+.mds-Button__on-media.mds-Button__variant-secondary:disabled {
+  background: none;
+  border-color: var(--mds-on-media-border);
+  color: var(--mds-on-media-dim);
+}
+.mds-Button__button.mds-Button__shape-rect {
+  border-radius: var(--mds-radius-control);
+}
+.mds-Button__button.mds-Button__shape-pill {
+  border-radius: var(--mds-radius-pill);
+}
 
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Link/Link.module.css?mds-scoped */
 .mds-Link__link {
@@ -682,11 +717,11 @@ button.mds-Link__link {
   pointer-events: none;
 }
 
-/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Overlay/Overlay.module.css?mds-scoped */
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/internal/Overlay.module.css?mds-scoped */
 .mds-Overlay__scrim {
   position: fixed;
   inset: 0;
-  height: var(--mds-vvh, 100dvh);
+  height: var(--mds-vvh);
   display: flex;
   background: var(--mds-scrim);
   opacity: 0;
@@ -706,6 +741,12 @@ button.mds-Link__link {
   align-items: flex-end;
   justify-content: center;
 }
+.mds-Overlay__variant-lightbox {
+  z-index: var(--mds-z-modal);
+  align-items: stretch;
+  justify-content: stretch;
+  background: var(--mds-scrim-strong);
+}
 
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Sheet/Sheet.module.css?mds-scoped */
 .mds-Sheet__panel {
@@ -878,6 +919,15 @@ button.mds-Link__link {
 }
 
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Tag/Tag.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-Tag__tag {
   display: inline-flex;
   align-items: center;
@@ -908,6 +958,7 @@ button.mds-Link__link {
   background: transparent;
   color: inherit;
   cursor: pointer;
+  position: relative;
 }
 .mds-Tag__remove:hover {
   background: var(--mds-surface-sunken);
@@ -931,6 +982,19 @@ button.mds-Link__link {
   align-self: stretch;
 }
 
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/VisuallyHidden/VisuallyHidden.module.css?mds-scoped */
+.mds-VisuallyHidden__hidden {
+  position: absolute;
+  width: var(--mds-hidden-size);
+  height: var(--mds-hidden-size);
+  margin: calc(-1 * var(--mds-hidden-size));
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Skeleton/Skeleton.module.css?mds-scoped */
 .mds-Skeleton__skeleton {
   display: block;
@@ -1131,6 +1195,15 @@ button.mds-Link__link {
 }
 
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Checkbox/Checkbox.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-Checkbox__root {
   display: inline-flex;
   align-items: center;
@@ -1183,7 +1256,9 @@ button.mds-Link__link {
 .mds-Checkbox__box:disabled ~ .mds-Checkbox__label {
   color: var(--mds-action-disabled-fg);
 }
-.mds-Checkbox__box::before {
+
+/* 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 {
   content: "";
   position: absolute;
   top: 50%;
@@ -1192,8 +1267,6 @@ button.mds-Link__link {
   width: max(100%, var(--mds-tap-min));
   height: max(100%, var(--mds-tap-min));
 }
-
-/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Radio/Radio.module.css?mds-scoped */
 .mds-Radio__root {
   display: inline-flex;
   align-items: center;
@@ -1242,7 +1315,9 @@ button.mds-Link__link {
 .mds-Radio__dot:disabled ~ .mds-Radio__label {
   color: var(--mds-action-disabled-fg);
 }
-.mds-Radio__dot::before {
+
+/* 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 {
   content: "";
   position: absolute;
   top: 50%;
@@ -1251,8 +1326,6 @@ button.mds-Link__link {
   width: max(100%, var(--mds-tap-min));
   height: max(100%, var(--mds-tap-min));
 }
-
-/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Switch/Switch.module.css?mds-scoped */
 .mds-Switch__root {
   display: inline-flex;
   align-items: center;
@@ -1270,9 +1343,9 @@ button.mds-Link__link {
   height: var(--mds-switch-h);
   border-radius: var(--mds-radius-pill);
   background: var(--mds-border-strong);
-  position: relative;
   cursor: inherit;
   transition: background-color var(--mds-transition-control);
+  position: relative;
 }
 .mds-Switch__track::after {
   content: "";
@@ -1318,15 +1391,6 @@ button.mds-Link__link {
 .mds-Switch__root:has(.mds-Switch__track:disabled) .mds-Switch__label {
   color: var(--mds-action-disabled-fg);
 }
-.mds-Switch__track::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-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SegmentedControl/SegmentedControl.module.css?mds-scoped */
 .mds-SegmentedControl__group {
@@ -1394,6 +1458,15 @@ button.mds-Link__link {
 }
 
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/SearchField/SearchField.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-SearchField__wrap {
   position: relative;
   display: inline-flex;
@@ -1586,6 +1659,15 @@ button.mds-Link__link {
 }
 
 /* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Toast/Toast.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-Toast__viewport {
   position: fixed;
   bottom: calc(var(--mds-toast-inset) + var(--mds-safe-bottom));
@@ -1642,6 +1724,7 @@ button.mds-Link__link {
   background: transparent;
   color: var(--mds-text-secondary);
   cursor: pointer;
+  position: relative;
 }
 .mds-Toast__close:hover {
   background: var(--mds-surface-sunken);
@@ -2013,4 +2096,404 @@ button.mds-Link__link {
 .mds-TabBar__action:hover {
   background: var(--mds-accent-hover);
 }
+
+/* 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;
+  display: block;
+  overflow: hidden;
+  aspect-ratio: var(--media-aspect, 16 / 9);
+  border-radius: var(--mds-radius-media);
+  background: var(--mds-surface-sunken);
+}
+.mds-MediaPlaceholder__fill {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mds-gap-tight);
+  color: var(--mds-text-muted);
+  background-image:
+    repeating-linear-gradient(
+      45deg,
+      transparent 0 var(--mds-media-hatch),
+      var(--mds-border-strong) var(--mds-media-hatch) calc(var(--mds-media-hatch) + var(--mds-border-width)));
+  transition: filter var(--mds-transition-reveal);
+}
+.mds-MediaPlaceholder__image {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: filter var(--mds-transition-reveal);
+}
+.mds-MediaPlaceholder__caption {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  padding: var(--mds-pad-tight);
+  background: var(--mds-scrim);
+}
+.mds-MediaPlaceholder__cover {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mds-gap-tight);
+  padding: var(--mds-pad-card);
+  text-align: center;
+}
+.mds-MediaPlaceholder__blurred .mds-MediaPlaceholder__fill,
+.mds-MediaPlaceholder__blurred .mds-MediaPlaceholder__image {
+  filter: blur(var(--mds-blur-media));
+  transform: scale(1.1);
+}
+
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/ImageCarousel/ImageCarousel.module.css?mds-scoped */
+.mds-ImageCarousel__carousel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mds-gap-tight);
+}
+.mds-ImageCarousel__viewport {
+  position: relative;
+  touch-action: pan-y;
+  user-select: none;
+}
+.mds-ImageCarousel__slide {
+  overflow: hidden;
+  border-radius: var(--mds-radius-media);
+}
+.mds-ImageCarousel__viewport .mds-ImageCarousel__step,
+.mds-ImageCarousel__viewport .mds-ImageCarousel__zoom {
+  position: absolute;
+  z-index: var(--mds-z-raised);
+  background: var(--mds-surface-card);
+}
+.mds-ImageCarousel__viewport .mds-ImageCarousel__step {
+  top: 50%;
+  transform: translateY(-50%);
+}
+.mds-ImageCarousel__viewport .mds-ImageCarousel__prev {
+  inset-inline-start: var(--mds-media-inset);
+}
+.mds-ImageCarousel__viewport .mds-ImageCarousel__next {
+  inset-inline-end: var(--mds-media-inset);
+}
+.mds-ImageCarousel__viewport .mds-ImageCarousel__step:disabled {
+  visibility: hidden;
+}
+.mds-ImageCarousel__viewport .mds-ImageCarousel__zoom {
+  inset-inline-start: var(--mds-media-inset);
+  inset-block-end: var(--mds-media-inset);
+}
+.mds-ImageCarousel__counter {
+  position: absolute;
+  inset-inline-end: var(--mds-media-inset);
+  inset-block-end: var(--mds-media-inset);
+  z-index: var(--mds-z-raised);
+  padding: var(--mds-pad-count-y) var(--mds-pad-count-x);
+  border-radius: var(--mds-radius-pill);
+  background: var(--mds-scrim);
+  color: var(--mds-text-on-media);
+}
+.mds-ImageCarousel__thumbs {
+  display: flex;
+  gap: var(--mds-gap-hairline);
+}
+.mds-ImageCarousel__thumb {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0;
+  border: var(--mds-border-width) solid transparent;
+  border-radius: var(--mds-radius-media);
+  background: var(--mds-surface-sunken);
+  cursor: pointer;
+  transition: var(--mds-transition-control);
+}
+.mds-ImageCarousel__thumb:hover {
+  border-color: var(--mds-border-subtle);
+}
+.mds-ImageCarousel__thumb[aria-current=true] {
+  border-color: var(--mds-border-strong);
+}
+.mds-ImageCarousel__more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1 / 1;
+}
+.mds-ImageCarousel__dots {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.mds-ImageCarousel__dot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--mds-tap-min);
+  min-height: var(--mds-tap-min);
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+.mds-ImageCarousel__dot::after {
+  content: "";
+  width: var(--mds-dot);
+  height: var(--mds-dot);
+  border-radius: var(--mds-radius-pill);
+  background: var(--mds-border-subtle);
+  transition: var(--mds-transition-control);
+}
+.mds-ImageCarousel__dot[aria-current=true]::after {
+  background: var(--mds-accent);
+}
+
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/UploadProgress/UploadProgress.module.css?mds-scoped */
+.mds-UploadProgress__upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mds-gap-tight);
+}
+.mds-UploadProgress__head {
+  display: flex;
+  align-items: center;
+  gap: var(--mds-gap-tight);
+  min-width: 0;
+}
+.mds-UploadProgress__preview {
+  flex: none;
+  width: var(--mds-upload-thumb);
+  height: var(--mds-upload-thumb);
+  overflow: hidden;
+  border-radius: var(--mds-radius-media);
+  background: var(--mds-surface-sunken);
+}
+.mds-UploadProgress__preview > * {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.mds-UploadProgress__mark {
+  --mds-icon-slot: var(--mds-icon-sm);
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--mds-icon-slot);
+  height: var(--mds-icon-slot);
+  font-size: var(--mds-icon-slot);
+}
+.mds-UploadProgress__name {
+  flex: 1;
+  min-width: 0;
+}
+.mds-UploadProgress__foot {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mds-gap-tight);
+}
+.mds-UploadProgress__status-done .mds-UploadProgress__mark {
+  color: var(--mds-status-success);
+}
+.mds-UploadProgress__status-error .mds-UploadProgress__mark {
+  color: var(--mds-status-danger);
+}
+
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Lightbox/Lightbox.module.css?mds-scoped */
+.mds-Lightbox__panel {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.mds-Lightbox__bar {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--mds-gap-tight);
+  padding: var(--mds-pad-tight);
+  padding-top: calc(var(--mds-pad-tight) + var(--mds-safe-top));
+}
+.mds-Lightbox__surface {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  touch-action: none;
+  user-select: none;
+}
+.mds-Lightbox__image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  transform-origin: center;
+  transform: translate(var(--pan-x), var(--pan-y)) scale(var(--zoom));
+  will-change: transform;
+}
+.mds-Lightbox__caption {
+  padding: var(--mds-pad-tight) var(--mds-pad-card);
+  padding-bottom: calc(var(--mds-pad-card) + var(--mds-safe-bottom));
+  text-align: center;
+}
+
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/VideoPlayer/VideoPlayer.module.css?mds-scoped */
+.mds-VideoPlayer__player {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mds-gap-tight);
+}
+.mds-VideoPlayer__frame {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--mds-radius-media);
+  background: var(--mds-surface-media);
+}
+.mds-VideoPlayer__media {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: contain;
+  transition: var(--mds-transition-reveal);
+}
+.mds-VideoPlayer__covered .mds-VideoPlayer__media {
+  filter: blur(var(--mds-blur-media));
+  transform: scale(1.1);
+}
+.mds-VideoPlayer__start {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  padding: 0;
+  background: var(--mds-scrim);
+  color: var(--mds-text-on-media);
+  cursor: pointer;
+}
+.mds-VideoPlayer__startGlyph {
+  display: flex;
+  width: var(--mds-icon-btn-size);
+  height: var(--mds-icon-btn-size);
+  align-items: center;
+  justify-content: center;
+  border: var(--mds-border-width) solid var(--mds-on-media-border);
+  border-radius: var(--mds-radius-pill);
+  background: var(--mds-on-media-surface-hover);
+}
+.mds-VideoPlayer__startGlyph svg {
+  width: var(--mds-icon-md);
+  height: var(--mds-icon-md);
+}
+.mds-VideoPlayer__cover {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mds-pad-card);
+  text-align: center;
+}
+.mds-VideoPlayer__controls {
+  display: flex;
+  align-items: center;
+  gap: var(--mds-gap-tight);
+}
+.mds-VideoPlayer__scrub {
+  flex: 1 1 auto;
+  min-width: 0;
+  accent-color: var(--mds-accent);
+  cursor: pointer;
+}
+.mds-VideoPlayer__scrub:focus-visible {
+  border-radius: var(--mds-radius-pill);
+}
+.mds-VideoPlayer__time {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.mds-VideoPlayer__chapters {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mds-gap-hairline);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.mds-VideoPlayer__chapter {
+  width: 100%;
+  justify-content: flex-start;
+  gap: var(--mds-gap-tight);
+  text-align: start;
+}
+.mds-VideoPlayer__chapterAt {
+  font-variant-numeric: tabular-nums;
+  color: var(--mds-text-muted);
+}
+.mds-VideoPlayer__player:fullscreen {
+  justify-content: center;
+  padding: var(--mds-pad-tight);
+  background: var(--mds-surface-page);
+}
+.mds-VideoPlayer__player:fullscreen .mds-VideoPlayer__frame {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+.mds-VideoPlayer__player:fullscreen .mds-VideoPlayer__media {
+  max-height: 100%;
+  aspect-ratio: auto;
+}
+.mds-VideoPlayer__player:fullscreen .mds-VideoPlayer__chapters {
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* mds-css:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Breadcrumb/Breadcrumb.module.css?mds-scoped */
+.mds-Breadcrumb__crumbs {
+  min-width: 0;
+}
+.mds-Breadcrumb__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--mds-gap-hairline);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.mds-Breadcrumb__item {
+  display: flex;
+  align-items: center;
+  gap: var(--mds-gap-hairline);
+  min-width: 0;
+}
+.mds-Breadcrumb__separator {
+  flex: none;
+  width: var(--mds-icon-sm);
+  height: var(--mds-icon-sm);
+  color: var(--mds-text-muted);
+}
+.mds-Breadcrumb__link {
+  display: flex;
+  align-items: center;
+  color: var(--mds-text-secondary);
+}
+.mds-Breadcrumb__link:hover {
+  color: var(--mds-text-primary);
+}
 /*# sourceMappingURL=index.css.map */