@zeyos/zx 4.1.1 → 4.3.0

package/src/components/card/card.css

@@ -16,8 +16,8 @@
 .zx-card[data-variant="raised"] {
   border: 1px solid var(--zx-color-glass-border);
   background: var(--zx-color-glass-surface);
-  -webkit-backdrop-filter: blur(var(--zx-glass-blur)) saturate(var(--zx-glass-saturation));
-  backdrop-filter: blur(var(--zx-glass-blur)) saturate(var(--zx-glass-saturation));
+  -webkit-backdrop-filter: var(--zx-glass-filter-raised);
+  backdrop-filter: var(--zx-glass-filter-raised);
   box-shadow: var(--zx-glass-raised-shadow);
 }
 

package/src/components/card-view/card-view.css

@@ -0,0 +1,389 @@
+.zx-card-view {
+  --zx-card-view-min-card-width: 18rem;
+  --zx-card-view-column-basis: 0%;
+  inline-size: 100%;
+  min-inline-size: 0;
+  container-type: inline-size;
+}
+
+.zx-card-view__toolbar {
+  flex-wrap: wrap;
+}
+
+.zx-card-view__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+}
+
+.zx-card-view__sort[hidden] {
+  display: none;
+}
+
+.zx-card-view__sort select {
+  min-block-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  max-inline-size: min(18rem, 65vw);
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-sm);
+  background: var(--zx-color-bg-surface);
+  color: var(--zx-color-text);
+  padding-inline: var(--zx-space-2);
+  font: inherit;
+}
+
+.zx-card-view__sort select:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+
+.zx-card-view__content,
+.zx-card-view__group {
+  min-inline-size: 0;
+}
+
+.zx-card-view__group + .zx-card-view__group {
+  margin-block-start: var(--zx-space-6);
+}
+
+.zx-card-view__group-heading {
+  margin: 0 0 var(--zx-space-3);
+  color: var(--zx-color-text);
+  font-size: var(--zx-text-lg);
+  line-height: 1.35;
+}
+
+.zx-card-view__list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit,
+    minmax(min(100%, max(var(--zx-card-view-min-card-width),
+      calc(var(--zx-card-view-column-basis) - var(--zx-space-4)))), 1fr));
+  gap: var(--zx-space-4);
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.zx-record-card {
+  position: relative;
+  display: grid;
+  min-inline-size: 0;
+  overflow: hidden;
+  border-radius: var(--zx-radius-lg);
+  color: var(--zx-color-text);
+}
+
+.zx-record-card[data-variant="outlined"] {
+  border: 1px solid var(--zx-color-border);
+  background: var(--zx-color-bg-surface);
+}
+
+.zx-record-card[data-variant="raised"] {
+  border: 1px solid var(--zx-color-glass-border);
+  background: var(--zx-color-glass-surface);
+  -webkit-backdrop-filter: blur(var(--zx-glass-blur)) saturate(var(--zx-glass-saturation));
+  backdrop-filter: blur(var(--zx-glass-blur)) saturate(var(--zx-glass-saturation));
+  box-shadow: var(--zx-glass-raised-shadow);
+}
+
+.zx-record-card[data-variant="filled"] {
+  border: 1px solid var(--zx-color-border);
+  background: var(--zx-color-bg-muted);
+}
+
+.zx-record-card:hover {
+  border-color: var(--zx-color-border-strong);
+}
+
+.zx-record-card:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+
+.zx-record-card[aria-selected="true"] {
+  border-color: var(--zx-color-accent);
+  box-shadow: inset 0 0 0 1px var(--zx-color-accent);
+}
+
+.zx-record-card__preview {
+  position: relative;
+  display: grid;
+  place-items: center;
+  min-inline-size: 0;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-block-end: 1px solid var(--zx-color-border);
+  background: var(--zx-color-bg-muted);
+  color: var(--zx-color-text-placeholder);
+}
+
+.zx-record-card__preview > :not(.zx-record-card__preview-fallback) {
+  position: relative;
+  z-index: 1;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.zx-record-card__preview-image {
+  display: block;
+}
+
+.zx-record-card__preview-image[hidden] {
+  display: none;
+}
+
+.zx-record-card__preview-fallback {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+}
+
+.zx-record-card__body {
+  display: grid;
+  align-content: start;
+  gap: var(--zx-space-4);
+  min-inline-size: 0;
+  padding: var(--zx-space-4);
+}
+
+.zx-record-card__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--zx-space-3);
+  min-inline-size: 0;
+}
+
+.zx-record-card__selection {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  min-block-size: 1.5rem;
+  cursor: pointer;
+}
+
+.zx-record-card__selection input {
+  inline-size: 1rem;
+  block-size: 1rem;
+  margin: 0;
+  accent-color: var(--zx-color-accent);
+}
+
+.zx-record-card__selection input:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+
+.zx-record-card__titles {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+.zx-record-card__heading {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-size: var(--zx-text-lg);
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.zx-record-card__primary,
+.zx-record-card__title {
+  color: inherit;
+}
+
+.zx-record-card__primary {
+  text-decoration: none;
+}
+
+.zx-record-card__primary:hover {
+  color: var(--zx-color-accent-hover);
+  text-decoration: underline;
+}
+
+.zx-record-card__primary:focus-visible {
+  border-radius: var(--zx-radius-sm);
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+
+.zx-record-card__subtitle {
+  margin: var(--zx-space-1) 0 0;
+  overflow-wrap: anywhere;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-sm);
+  line-height: 1.45;
+}
+
+.zx-record-card__actions {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--zx-space-1);
+}
+
+.zx-record-card__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--zx-space-1);
+  min-block-size: calc(var(--zx-control-height) - var(--zx-space-1));
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-sm);
+  background: var(--zx-color-bg-surface);
+  color: var(--zx-color-text);
+  padding-inline: var(--zx-space-2);
+  font: inherit;
+  font-size: var(--zx-text-sm);
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.zx-record-card__action:hover:not(:disabled) {
+  border-color: var(--zx-color-border-strong);
+  background: var(--zx-color-bg-hover);
+}
+
+.zx-record-card__action:focus-visible {
+  outline: none;
+  box-shadow: var(--zx-focus-ring);
+}
+
+.zx-record-card__action:disabled {
+  color: var(--zx-color-text-placeholder);
+  cursor: not-allowed;
+}
+
+.zx-record-card__metadata {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--zx-space-3) var(--zx-space-4);
+  min-inline-size: 0;
+  margin: 0;
+}
+
+.zx-record-card__field {
+  display: grid;
+  align-content: start;
+  gap: var(--zx-space-1);
+  min-inline-size: 0;
+}
+
+.zx-record-card__label {
+  overflow: hidden;
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-weight: 600;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.zx-record-card__value {
+  min-inline-size: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--zx-color-text);
+  font-size: var(--zx-text-sm);
+  line-height: 1.45;
+}
+
+.zx-record-card__value > :is(img, svg, video) {
+  max-inline-size: 100%;
+}
+
+.zx-card-view__group-empty,
+.zx-card-view__empty {
+  color: var(--zx-color-text-muted);
+  text-align: center;
+}
+
+.zx-card-view__group-empty {
+  grid-column: 1 / -1;
+  border: 1px dashed var(--zx-color-border);
+  border-radius: var(--zx-radius-md);
+  padding: var(--zx-space-5);
+}
+
+.zx-card-view__empty {
+  display: grid;
+  place-items: center;
+  min-block-size: 10rem;
+  border: 1px dashed var(--zx-color-border);
+  border-radius: var(--zx-radius-lg);
+  padding: var(--zx-space-6);
+}
+
+.zx-card-view__skeleton {
+  align-content: start;
+  gap: var(--zx-space-3);
+  border: 1px solid var(--zx-color-border);
+  background: var(--zx-color-bg-surface);
+  padding: var(--zx-space-4);
+}
+
+.zx-card-view__skeleton-preview {
+  aspect-ratio: 16 / 9;
+  inline-size: calc(100% + var(--zx-space-4) + var(--zx-space-4));
+  margin: calc(-1 * var(--zx-space-4)) calc(-1 * var(--zx-space-4)) var(--zx-space-2);
+}
+
+.zx-card-view__skeleton-line {
+  block-size: .8rem;
+}
+
+.zx-card-view__skeleton-line:nth-child(3) {
+  inline-size: 72%;
+}
+
+.zx-card-view__skeleton-line:nth-child(4) {
+  inline-size: 48%;
+}
+
+@container (max-width: 28rem) {
+  .zx-card-view__sort-label {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+
+  .zx-record-card__metadata {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .zx-record-card__action-label {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .zx-record-card[data-variant="raised"] {
+    border-color: var(--zx-color-border);
+    background: var(--zx-color-bg-surface);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    box-shadow: var(--zx-overlay-shadow);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .zx-record-card,
+  .zx-record-card__action,
+  .zx-record-card__primary {
+    transition: border-color var(--zx-dur-fast) var(--zx-ease),
+      background var(--zx-dur-fast) var(--zx-ease),
+      color var(--zx-dur-fast) var(--zx-ease),
+      box-shadow var(--zx-dur-fast) var(--zx-ease);
+  }
+}