@miaixz/ui 0.5.0

package/dist/styles/components/input.css

@@ -0,0 +1,77 @@
+/**
+ * Input component
+ */
+
+.miaixz-input {
+  display: inline-flex;
+  gap: var(--miaixz-control-gap);
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding-block: 0;
+  cursor: text;
+}
+
+.miaixz-input:where(:hover:not(.miaixz-input-disabled)) {
+  border-color: var(--miaixz-color-border-strong);
+}
+
+.miaixz-input:focus-within {
+  outline: var(--miaixz-control-focus-width) solid var(--miaixz-color-focus);
+  outline-offset: var(--miaixz-control-focus-offset);
+  border-color: var(--miaixz-color-focus);
+}
+
+.miaixz-input-element {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  font: inherit;
+  line-height: inherit;
+  color: inherit;
+  outline: 0;
+  background: transparent;
+  border: 0;
+}
+
+.miaixz-input-element::placeholder {
+  color: var(--miaixz-color-text-muted);
+  opacity: 1;
+}
+
+.miaixz-input-adornment {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-input-adornment > svg {
+  width: var(--miaixz-icon-size-control);
+  height: var(--miaixz-icon-size-control);
+}
+
+.miaixz-input-invalid {
+  border-color: var(--miaixz-color-danger);
+}
+
+.miaixz-input-invalid:focus-within {
+  outline-color: var(--miaixz-color-danger);
+  border-color: var(--miaixz-color-danger);
+}
+
+.miaixz-input-disabled {
+  color: var(--miaixz-color-text-disabled);
+  cursor: not-allowed;
+  background: var(--miaixz-color-surface-secondary);
+}
+
+.miaixz-input-disabled .miaixz-input-element {
+  cursor: not-allowed;
+}
+
+.miaixz-input-readonly {
+  background: var(--miaixz-color-surface-secondary);
+}

package/dist/styles/components/list.css

@@ -0,0 +1,132 @@
+/**
+ * Miaixz structured list component
+ */
+
+:root {
+  --miaixz-list-item-height: var(--miaixz-density-list-item-height);
+  --miaixz-list-item-padding-inline: var(--miaixz-density-control-padding-inline);
+  --miaixz-list-item-padding-block: var(--miaixz-space-8);
+  --miaixz-list-item-gap: var(--miaixz-density-component-gap);
+  --miaixz-list-nested-indent: var(--miaixz-space-24);
+}
+
+.miaixz-list {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.miaixz-list-bordered {
+  overflow: hidden;
+  background: var(--miaixz-color-surface);
+  border: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+  border-radius: var(--miaixz-radius-panel);
+}
+
+.miaixz-list-item {
+  position: relative;
+  display: flex;
+  gap: var(--miaixz-list-item-gap);
+  align-items: center;
+  min-width: 0;
+  min-height: var(--miaixz-list-item-height);
+  padding: var(--miaixz-list-item-padding-block) var(--miaixz-list-item-padding-inline);
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-surface);
+  border-bottom: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+}
+
+.miaixz-list > .miaixz-list-item:where(:last-child) {
+  border-bottom: 0;
+}
+
+.miaixz-list-item-interactive {
+  cursor: pointer;
+  transition-timing-function: var(--miaixz-motion-interaction-easing);
+  transition-duration: var(--miaixz-motion-interaction-duration);
+  transition-property: color, background-color, border-color;
+}
+
+.miaixz-list-item-interactive:hover:not([aria-disabled="true"]) {
+  background: var(--miaixz-color-surface-hover);
+}
+
+.miaixz-list-item[data-selected="true"] {
+  background: var(--miaixz-color-surface-selected);
+}
+
+.miaixz-list-item[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: var(--miaixz-opacity-disabled);
+}
+
+.miaixz-list-icon {
+  flex: none;
+  width: var(--miaixz-icon-size-navigation);
+  height: var(--miaixz-icon-size-navigation);
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-list-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.miaixz-list-title {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--miaixz-text-body-size);
+  font-weight: var(--miaixz-font-weight-regular);
+  line-height: var(--miaixz-text-body-line-height);
+  color: var(--miaixz-color-text-primary);
+  white-space: nowrap;
+}
+
+.miaixz-list-description {
+  margin: var(--miaixz-space-2) 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--miaixz-text-caption-size);
+  line-height: var(--miaixz-text-caption-line-height);
+  color: var(--miaixz-color-text-secondary);
+  white-space: nowrap;
+}
+
+.miaixz-list-meta {
+  flex: none;
+  margin-inline-start: auto;
+  font-size: var(--miaixz-text-caption-size);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--miaixz-text-caption-line-height);
+  color: var(--miaixz-color-text-secondary);
+  white-space: nowrap;
+}
+
+.miaixz-list-actions {
+  display: flex;
+  flex: none;
+  gap: var(--miaixz-control-gap);
+  align-items: center;
+}
+
+.miaixz-list-nested {
+  padding-inline-start: var(--miaixz-list-nested-indent);
+}
+
+.miaixz-list-plain .miaixz-list-item {
+  padding-inline: 0;
+  background: transparent;
+}
+
+.miaixz-list-plain .miaixz-list-item-interactive:hover:not([aria-disabled="true"]) {
+  background: var(--miaixz-color-surface-hover);
+}
+
+@media (pointer: coarse) {
+  .miaixz-list-item {
+    min-height: max(var(--miaixz-list-item-height), var(--miaixz-control-min-target-size));
+  }
+}

package/dist/styles/components/loading-overlay.css

@@ -0,0 +1,24 @@
+/**
+ * Miaixz loading overlay component
+ */
+
+.miaixz-loading-overlay {
+  position: relative;
+  min-width: 0;
+}
+
+.miaixz-loading-overlay[data-loading="true"] > .miaixz-loading-overlay-content {
+  pointer-events: none;
+  user-select: none;
+}
+
+.miaixz-loading-overlay-surface {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: var(--miaixz-color-text-primary);
+  pointer-events: auto;
+  background: color-mix(in srgb, var(--miaixz-color-surface) 86%, transparent);
+  border-radius: inherit;
+}

package/dist/styles/components/menu.css

@@ -0,0 +1,6 @@
+.miaixz-menu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--miaixz-space-2);
+  outline: 0;
+}

package/dist/styles/components/multi-select.css

@@ -0,0 +1,68 @@
+.miaixz-multi-select-control {
+  flex-wrap: wrap;
+  height: auto;
+  min-height: var(--miaixz-density-control-height);
+  padding-block: var(--miaixz-space-4);
+}
+
+.miaixz-multi-select-tags {
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: var(--miaixz-space-4);
+  min-width: 0;
+}
+
+.miaixz-multi-select-tag {
+  display: inline-flex;
+  gap: var(--miaixz-space-2);
+  align-items: center;
+  max-width: 180px;
+  min-height: 28px;
+  padding-inline-start: var(--miaixz-space-8);
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-surface-secondary);
+  border-radius: var(--miaixz-radius-control);
+}
+
+.miaixz-multi-select-tag-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.miaixz-multi-select-tag-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  color: var(--miaixz-color-text-secondary);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--miaixz-radius-control);
+}
+
+.miaixz-multi-select-tag-remove:hover,
+.miaixz-multi-select-tag-remove:focus-visible {
+  color: var(--miaixz-color-text-primary);
+  outline: var(--miaixz-control-focus-width) solid var(--miaixz-color-focus);
+  outline-offset: calc(-1 * var(--miaixz-control-focus-width));
+}
+
+.miaixz-multi-select-count {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  min-height: 24px;
+  padding-inline: var(--miaixz-space-4);
+  font-size: var(--miaixz-text-caption-size);
+  line-height: var(--miaixz-text-caption-line-height);
+  color: var(--miaixz-color-text-secondary);
+  background: var(--miaixz-color-surface-secondary);
+  border-radius: var(--miaixz-radius-pill);
+}

package/dist/styles/components/navigation.css

@@ -0,0 +1,116 @@
+/**
+ * Miaixz navigation component
+ * Use aria-current="page" for the active destination.
+ */
+
+:root {
+  --miaixz-navigation-item-height: var(--miaixz-density-list-item-height);
+  --miaixz-navigation-item-padding-inline: var(--miaixz-density-control-padding-inline);
+  --miaixz-navigation-item-gap: var(--miaixz-control-gap);
+  --miaixz-navigation-group-gap: var(--miaixz-space-4);
+  --miaixz-navigation-indicator-size: var(--miaixz-border-width-strong);
+}
+
+.miaixz-navigation {
+  display: flex;
+  gap: var(--miaixz-navigation-group-gap);
+  min-width: 0;
+}
+
+.miaixz-navigation-vertical {
+  flex-direction: column;
+}
+
+.miaixz-navigation-horizontal {
+  align-items: center;
+  overflow: auto hidden;
+  scrollbar-width: none;
+}
+
+.miaixz-navigation-horizontal::-webkit-scrollbar {
+  display: none;
+}
+
+.miaixz-navigation-item {
+  position: relative;
+  display: flex;
+  gap: var(--miaixz-navigation-item-gap);
+  align-items: center;
+  min-width: 0;
+  min-height: var(--miaixz-navigation-item-height);
+  padding-inline: var(--miaixz-navigation-item-padding-inline);
+  font: inherit;
+  color: var(--miaixz-color-text-secondary);
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--miaixz-radius-control);
+  transition-timing-function: var(--miaixz-motion-interaction-easing);
+  transition-duration: var(--miaixz-motion-interaction-duration);
+  transition-property: color, background-color, box-shadow;
+}
+
+.miaixz-navigation-item:where(:hover:not([aria-disabled="true"])) {
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-surface-hover);
+}
+
+.miaixz-navigation-item[aria-current="page"] {
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-surface-selected);
+}
+
+.miaixz-navigation-vertical > .miaixz-navigation-item[aria-current="page"]::before {
+  position: absolute;
+  inset-block: var(--miaixz-space-8);
+  inset-inline-start: 0;
+  width: var(--miaixz-navigation-indicator-size);
+  content: "";
+  background: var(--miaixz-color-brand);
+  border-radius: var(--miaixz-radius-round);
+}
+
+.miaixz-navigation-horizontal > .miaixz-navigation-item {
+  flex: none;
+  border-radius: 0;
+}
+
+.miaixz-navigation-horizontal > .miaixz-navigation-item[aria-current="page"] {
+  background: transparent;
+  box-shadow: inset 0 calc(var(--miaixz-navigation-indicator-size) * -1) 0 var(--miaixz-color-brand);
+}
+
+.miaixz-navigation-icon {
+  flex: none;
+  width: var(--miaixz-icon-size-navigation);
+  height: var(--miaixz-icon-size-navigation);
+}
+
+.miaixz-navigation-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.miaixz-navigation-meta {
+  flex: none;
+  margin-inline-start: auto;
+  font-size: var(--miaixz-text-caption-size);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--miaixz-text-caption-line-height);
+  color: var(--miaixz-color-text-muted);
+}
+
+.miaixz-navigation-item[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: var(--miaixz-opacity-disabled);
+}
+
+@media (pointer: coarse) {
+  .miaixz-navigation-item {
+    min-height: max(var(--miaixz-navigation-item-height), var(--miaixz-control-min-target-size));
+  }
+}

package/dist/styles/components/page-layout.css

@@ -0,0 +1,279 @@
+.miaixz-shell {
+  display: grid;
+  grid-template:
+    "sidebar header" var(--miaixz-shell-header-height)
+    "sidebar main" minmax(0, 1fr) /
+    var(--miaixz-shell-sidebar-width) minmax(0, 1fr);
+  min-height: 100vh;
+  min-height: 100dvh;
+}
+
+.miaixz-shell-header {
+  position: sticky;
+  top: 0;
+  z-index: var(--miaixz-z-navigation);
+  display: flex;
+  grid-area: header;
+  align-items: center;
+  min-width: 0;
+  min-height: var(--miaixz-shell-header-height);
+  padding-inline: var(--miaixz-page-gutter);
+  background: var(--miaixz-color-surface);
+  border-bottom: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+}
+
+.miaixz-shell-sidebar {
+  position: sticky;
+  top: 0;
+  z-index: var(--miaixz-z-navigation);
+  grid-area: sidebar;
+  width: var(--miaixz-shell-sidebar-width);
+  height: 100vh;
+  height: 100dvh;
+  min-height: 0;
+  overflow: hidden auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  background: var(--miaixz-color-surface);
+  border-inline-end: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+}
+
+.miaixz-shell-main {
+  grid-area: main;
+  min-width: 0;
+  min-height: 0;
+}
+
+.miaixz-page {
+  width: min(100%, var(--miaixz-page-max-width));
+  padding: var(--miaixz-page-block-padding) var(--miaixz-page-gutter);
+  margin-inline: auto;
+}
+
+.miaixz-page-header {
+  display: flex;
+  gap: var(--miaixz-space-24);
+  align-items: flex-start;
+  justify-content: space-between;
+  min-width: 0;
+  margin-block-end: var(--miaixz-layout-section-gap);
+}
+
+.miaixz-page-header-content,
+.miaixz-page-toolbar-leading,
+.miaixz-layout-sidebar-main {
+  min-width: 0;
+}
+
+.miaixz-page-eyebrow {
+  margin-block-end: var(--miaixz-space-4);
+  font-size: var(--miaixz-text-caption-size);
+  line-height: var(--miaixz-text-caption-line-height);
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-page-title {
+  margin: 0;
+  font-size: var(--miaixz-text-page-title-size);
+  font-weight: var(--miaixz-font-weight-medium);
+  line-height: var(--miaixz-text-page-title-line-height);
+  color: var(--miaixz-color-text-primary);
+  letter-spacing: var(--miaixz-letter-spacing-tight);
+}
+
+.miaixz-page-description {
+  max-width: 72ch;
+  margin: var(--miaixz-space-4) 0 0;
+  font-size: var(--miaixz-text-body-size);
+  line-height: var(--miaixz-text-body-line-height);
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-page-actions,
+.miaixz-page-toolbar-actions {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  gap: var(--miaixz-space-8);
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.miaixz-page-body,
+.miaixz-layout-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--miaixz-layout-section-gap);
+  min-width: 0;
+}
+
+.miaixz-page-toolbar {
+  display: flex;
+  gap: var(--miaixz-space-16);
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  padding-block: var(--miaixz-space-12);
+}
+
+.miaixz-page-toolbar-sticky {
+  position: sticky;
+  top: var(--miaixz-layout-sticky-offset);
+  z-index: var(--miaixz-z-sticky);
+  padding-inline: var(--miaixz-space-12);
+  background: var(--miaixz-color-surface);
+  border: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+  border-radius: var(--miaixz-radius-panel);
+  box-shadow: var(--miaixz-shadow-low);
+}
+
+.miaixz-layout-cluster {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--miaixz-space-12);
+  align-items: center;
+  min-width: 0;
+}
+
+.miaixz-layout-cluster[data-justify="between"] {
+  justify-content: space-between;
+}
+
+.miaixz-layout-cluster[data-justify="end"] {
+  justify-content: flex-end;
+}
+
+.miaixz-layout-grid {
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(100%, var(--miaixz-layout-panel-min-width)), 1fr)
+  );
+  gap: var(--miaixz-layout-grid-gap);
+  min-width: 0;
+}
+
+.miaixz-layout-grid-wide {
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(100%, var(--miaixz-layout-panel-wide-min-width)), 1fr)
+  );
+}
+
+.miaixz-layout-split {
+  display: grid;
+  grid-template-columns: minmax(0, var(--miaixz-layout-split-primary-size)) minmax(
+      0,
+      var(--miaixz-layout-split-secondary-size)
+    );
+  gap: var(--miaixz-layout-grid-gap);
+  min-width: 0;
+}
+
+.miaixz-layout-split[data-ratio="primary"] {
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+}
+
+.miaixz-layout-split[data-ratio="secondary"] {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+}
+
+.miaixz-layout-sidebar-content {
+  display: grid;
+  grid-template-columns: minmax(220px, var(--miaixz-layout-local-sidebar-width)) minmax(0, 1fr);
+  gap: var(--miaixz-layout-grid-gap);
+  min-width: 0;
+}
+
+.miaixz-layout-scroll-region {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+}
+
+.miaixz-layout-sticky {
+  position: sticky;
+  top: var(--miaixz-layout-sticky-offset);
+  z-index: var(--miaixz-z-sticky);
+}
+
+.miaixz-layout-full-width {
+  width: 100%;
+  max-width: none;
+}
+
+@media (width <= 1023px) {
+  .miaixz-layout-sidebar-content {
+    grid-template-columns: 1fr;
+  }
+
+  .miaixz-layout-sidebar-content > .miaixz-layout-sticky {
+    position: static;
+  }
+}
+
+@media (width <= 767px) {
+  .miaixz-shell {
+    grid-template:
+      "header" var(--miaixz-shell-header-height)
+      "main" minmax(0, 1fr) /
+      minmax(0, 1fr);
+    padding-bottom: calc(
+      var(--miaixz-shell-mobile-navigation-height) + var(--miaixz-safe-area-bottom)
+    );
+  }
+
+  .miaixz-shell-header {
+    padding-inline: max(var(--miaixz-page-gutter), var(--miaixz-safe-area-inline-start))
+      max(var(--miaixz-page-gutter), var(--miaixz-safe-area-inline-end));
+    padding-top: var(--miaixz-safe-area-top);
+  }
+
+  .miaixz-shell-sidebar {
+    position: fixed;
+    inset: auto 0 0;
+    width: 100%;
+    height: calc(var(--miaixz-shell-mobile-navigation-height) + var(--miaixz-safe-area-bottom));
+    padding-inline: var(--miaixz-safe-area-inline-start) var(--miaixz-safe-area-inline-end);
+    padding-bottom: var(--miaixz-safe-area-bottom);
+    overflow: hidden;
+    border-inline-end: 0;
+    border-top: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+  }
+
+  .miaixz-page-header,
+  .miaixz-page-toolbar {
+    flex-direction: column;
+    gap: var(--miaixz-space-16);
+    align-items: stretch;
+  }
+
+  .miaixz-page-actions,
+  .miaixz-page-toolbar-actions {
+    justify-content: flex-start;
+  }
+
+  .miaixz-layout-split,
+  .miaixz-layout-split[data-ratio] {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media print {
+  .miaixz-shell {
+    display: block;
+  }
+
+  .miaixz-shell-header,
+  .miaixz-shell-sidebar {
+    display: none !important;
+  }
+
+  .miaixz-page {
+    width: 100%;
+    max-width: none;
+    padding: 0;
+  }
+}