@smwb/ui-css 1.0.3 → 1.0.4

package/dist/ui.css

@@ -512,107 +512,107 @@
   padding: 0 8px;
   font-size: 0.75rem;
 }
-.smwb-chip.smwb-chip_color-primary.smwb-filled {
+.smwb-chip.smwb-chip_color-primary:not(.smwb-chip.smwb-disabled).smwb-filled {
   background-color: var(--smui-primaryColor);
   color: var(--smui-onPrimaryColor);
 }
-.smwb-chip.smwb-chip_color-primary.smwb-filled:hover {
+.smwb-chip.smwb-chip_color-primary:not(.smwb-chip.smwb-disabled).smwb-filled:hover {
   background-color: var(--smui-primaryColor);
   filter: brightness(0.94);
 }
-.smwb-chip.smwb-chip_color-primary.smwb-filled:active {
+.smwb-chip.smwb-chip_color-primary:not(.smwb-chip.smwb-disabled).smwb-filled:active {
   background-color: var(--smui-primaryColor);
   filter: brightness(0.88);
 }
-.smwb-chip.smwb-chip_color-primary.smwb-outlined {
+.smwb-chip.smwb-chip_color-primary:not(.smwb-chip.smwb-disabled).smwb-outlined {
   color: var(--smui-primaryColor);
-  border: 1px solid var(--smui-primaryColor);
-  background: transparent;
+  border-color: var(--smui-primaryColor);
 }
-.smwb-chip.smwb-chip_color-secondary.smwb-filled {
+.smwb-chip.smwb-chip_color-secondary:not(.smwb-chip.smwb-disabled).smwb-filled {
   background-color: var(--smui-secondaryColor);
   color: var(--smui-onSecondaryColor);
 }
-.smwb-chip.smwb-chip_color-secondary.smwb-filled:hover {
+.smwb-chip.smwb-chip_color-secondary:not(.smwb-chip.smwb-disabled).smwb-filled:hover {
   background-color: var(--smui-secondaryColor);
   filter: brightness(0.94);
 }
-.smwb-chip.smwb-chip_color-secondary.smwb-filled:active {
+.smwb-chip.smwb-chip_color-secondary:not(.smwb-chip.smwb-disabled).smwb-filled:active {
   background-color: var(--smui-secondaryColor);
   filter: brightness(0.88);
 }
-.smwb-chip.smwb-chip_color-secondary.smwb-outlined {
+.smwb-chip.smwb-chip_color-secondary:not(.smwb-chip.smwb-disabled).smwb-outlined {
   color: var(--smui-secondaryColor);
-  border: 1px solid var(--smui-secondaryColor);
-  background: transparent;
+  border-color: var(--smui-secondaryColor);
 }
-.smwb-chip.smwb-chip_color-error.smwb-filled {
+.smwb-chip.smwb-chip_color-error:not(.smwb-chip.smwb-disabled).smwb-filled {
   background-color: var(--smui-errorColor);
   color: var(--smui-onErrorColor);
 }
-.smwb-chip.smwb-chip_color-error.smwb-filled:hover {
+.smwb-chip.smwb-chip_color-error:not(.smwb-chip.smwb-disabled).smwb-filled:hover {
   background-color: var(--smui-errorColor);
   filter: brightness(0.94);
 }
-.smwb-chip.smwb-chip_color-error.smwb-filled:active {
+.smwb-chip.smwb-chip_color-error:not(.smwb-chip.smwb-disabled).smwb-filled:active {
   background-color: var(--smui-errorColor);
   filter: brightness(0.88);
 }
-.smwb-chip.smwb-chip_color-error.smwb-outlined {
+.smwb-chip.smwb-chip_color-error:not(.smwb-chip.smwb-disabled).smwb-outlined {
   color: var(--smui-errorColor);
-  border: 1px solid var(--smui-errorColor);
-  background: transparent;
+  border-color: var(--smui-errorColor);
 }
-.smwb-chip.smwb-chip_color-success.smwb-filled {
+.smwb-chip.smwb-chip_color-success:not(.smwb-chip.smwb-disabled).smwb-filled {
   background-color: var(--smui-successColor);
   color: var(--smui-onSuccessColor);
 }
-.smwb-chip.smwb-chip_color-success.smwb-filled:hover {
+.smwb-chip.smwb-chip_color-success:not(.smwb-chip.smwb-disabled).smwb-filled:hover {
   background-color: var(--smui-successColor);
   filter: brightness(0.94);
 }
-.smwb-chip.smwb-chip_color-success.smwb-filled:active {
+.smwb-chip.smwb-chip_color-success:not(.smwb-chip.smwb-disabled).smwb-filled:active {
   background-color: var(--smui-successColor);
   filter: brightness(0.88);
 }
-.smwb-chip.smwb-chip_color-success.smwb-outlined {
+.smwb-chip.smwb-chip_color-success:not(.smwb-chip.smwb-disabled).smwb-outlined {
   color: var(--smui-successColor);
-  border: 1px solid var(--smui-successColor);
-  background: transparent;
+  border-color: var(--smui-successColor);
 }
-.smwb-chip.smwb-chip_color-warning.smwb-filled {
+.smwb-chip.smwb-chip_color-warning:not(.smwb-chip.smwb-disabled).smwb-filled {
   background-color: var(--smui-warningColor);
   color: var(--smui-onWarningColor);
 }
-.smwb-chip.smwb-chip_color-warning.smwb-filled:hover {
+.smwb-chip.smwb-chip_color-warning:not(.smwb-chip.smwb-disabled).smwb-filled:hover {
   background-color: var(--smui-warningColor);
   filter: brightness(0.94);
 }
-.smwb-chip.smwb-chip_color-warning.smwb-filled:active {
+.smwb-chip.smwb-chip_color-warning:not(.smwb-chip.smwb-disabled).smwb-filled:active {
   background-color: var(--smui-warningColor);
   filter: brightness(0.88);
 }
-.smwb-chip.smwb-chip_color-warning.smwb-outlined {
+.smwb-chip.smwb-chip_color-warning:not(.smwb-chip.smwb-disabled).smwb-outlined {
   color: var(--smui-warningColor);
-  border: 1px solid var(--smui-warningColor);
-  background: transparent;
+  border-color: var(--smui-warningColor);
 }
-.smwb-chip.smwb-chip_color-info.smwb-filled {
+.smwb-chip.smwb-chip_color-info:not(.smwb-chip.smwb-disabled).smwb-filled {
   background-color: var(--smui-infoColor);
   color: var(--smui-onInfoColor);
 }
-.smwb-chip.smwb-chip_color-info.smwb-filled:hover {
+.smwb-chip.smwb-chip_color-info:not(.smwb-chip.smwb-disabled).smwb-filled:hover {
   background-color: var(--smui-infoColor);
   filter: brightness(0.94);
 }
-.smwb-chip.smwb-chip_color-info.smwb-filled:active {
+.smwb-chip.smwb-chip_color-info:not(.smwb-chip.smwb-disabled).smwb-filled:active {
   background-color: var(--smui-infoColor);
   filter: brightness(0.88);
 }
-.smwb-chip.smwb-chip_color-info.smwb-outlined {
+.smwb-chip.smwb-chip_color-info:not(.smwb-chip.smwb-disabled).smwb-outlined {
   color: var(--smui-infoColor);
-  border: 1px solid var(--smui-infoColor);
-  background: transparent;
+  border-color: var(--smui-infoColor);
+}
+.smwb-chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
 }
 .smwb-fab {
   box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
@@ -961,6 +961,7 @@
   .smwb-modal.smwb-fullscreen {
     width: 100%;
     height: 100%;
+    max-height: none;
     border-radius: 0;
   }
 }
@@ -981,6 +982,31 @@
 .smwb-scrollbar::-webkit-scrollbar-track {
   background-color: transparent;
 }
+.smwb-confirm-dialog__body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 280px;
+}
+.smwb-save-asset-dialog__body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 280px;
+}
+.smwb-save-asset-dialog__preview {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: var(--smui-surfaceVariant);
+}
+.smwb-save-asset-dialog__preview img {
+  max-width: 100%;
+  max-height: 200px;
+  object-fit: contain;
+}
 .smwb-indicator_circular {
   display: inline-block;
   position: relative;
@@ -2040,6 +2066,12 @@
   margin: 0 8px;
   border-right: 1px solid var(--smui-menuDividerColor);
 }
+.smwb-overflow-menu {
+  display: inline-flex;
+}
+.smwb-overflow-menu__item--danger:not(.smwb-menu__item--disabled) {
+  color: var(--smui-errorColor);
+}
 .smwb-tabs {
   display: flex;
   width: 100%;
@@ -2418,6 +2450,50 @@
   white-space: nowrap;
   opacity: 0.7;
 }
+.smwb-value-slider {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.smwb-value-slider__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 24px;
+}
+.smwb-value-slider__label {
+  font-size: 0.875rem;
+  color: var(--smui-onSurfaceColor);
+}
+.smwb-value-slider__spacer {
+  flex: 1 1 auto;
+}
+.smwb-value-slider__readout {
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+  color: var(--smui-onSurfaceColor);
+  opacity: 0.85;
+}
+.smwb-value-slider__reset {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border: none;
+  background: transparent;
+  color: var(--smui-onSurfaceColor);
+  cursor: pointer;
+  border-radius: 50%;
+  opacity: 0.7;
+}
+.smwb-value-slider__reset:hover {
+  opacity: 1;
+  background-color: var(--smui-onSurfaceHover);
+}
+.smwb-value-slider__reset:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
 .smwb-select-field {
   display: flex;
   align-items: center;
@@ -2817,6 +2893,121 @@
   margin: 0 auto;
   object-fit: cover;
 }
+.smwb-lazy-image {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+.smwb-lazy-image__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.smwb-lazy-image__fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--smui-onSurfaceColor);
+  background-color: var(--smui-surfaceVariant);
+}
+.smwb-thumb-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  overflow: visible;
+  outline: none;
+}
+.smwb-thumb-card--interactive {
+  cursor: pointer;
+}
+.smwb-thumb-card--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.smwb-thumb-card__media {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: var(--smui-surfaceVariant);
+}
+.smwb-thumb-card--selected .smwb-thumb-card__media {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 1px;
+}
+.smwb-thumb-card--interactive:focus-visible .smwb-thumb-card__media {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 1px;
+}
+.smwb-thumb-card__slot {
+  position: absolute;
+  top: 4px;
+  display: flex;
+  gap: 4px;
+  z-index: 1;
+}
+.smwb-thumb-card__slot--start {
+  left: 4px;
+}
+.smwb-thumb-card__slot--end {
+  right: 4px;
+}
+.smwb-thumb-card__caption {
+  margin-top: 4px;
+  font-size: 0.8125rem;
+  color: var(--smui-onSurfaceColor);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.smwb-thumb-card__preview {
+  z-index: 1000;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+  background-color: var(--smui-surfaceBackground);
+  pointer-events: none;
+}
+.smwb-thumb-card__preview img {
+  display: block;
+  max-width: 320px;
+  max-height: 320px;
+  object-fit: contain;
+}
+.smwb-asset-grid {
+  position: relative;
+  overflow-y: auto;
+  width: 100%;
+}
+.smwb-asset-grid__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+  color: var(--smui-onSurfaceColor);
+  opacity: 0.7;
+}
+.smwb-asset-grid__skeleton {
+  border-radius: 8px;
+  background-color: var(--smui-surfaceVariant);
+  animation: smwb-asset-grid-pulse 1.4s ease-in-out infinite;
+}
+@keyframes smwb-asset-grid-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
 .smwb-grid {
   display: flex;
   flex-wrap: wrap;
@@ -3902,6 +4093,164 @@
 .smwb-scrollbar::-webkit-scrollbar-track {
   background-color: transparent;
 }
+.smwb-floating-window {
+  background-color: var(--smui-surfaceBackground);
+  color: var(--smui-onSurfaceColor);
+  position: fixed;
+  z-index: 150;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: 12px;
+  box-shadow: rgba(0, 0, 0, 0.14) 0px 8px 10px -5px, rgba(0, 0, 0, 0.14) 0px 1px 14px 1px, rgba(0, 0, 0, 0.14) 0px 6px 22px 4px;
+  opacity: 0;
+  transition: opacity 0.12s ease-in-out;
+}
+.smwb-floating-window.smwb-floating-window_entered {
+  opacity: 1;
+}
+.smwb-floating-window__header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  height: 36px;
+  padding: 0 12px;
+  border-bottom: 1px solid var(--smui-dividerColor);
+  touch-action: none;
+  user-select: none;
+  cursor: move;
+}
+.smwb-floating-window__header:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: -2px;
+}
+.smwb-floating-window__grip {
+  display: inline-flex;
+  align-items: center;
+  color: var(--smui-onSurfaceVariant);
+  flex-shrink: 0;
+  cursor: move;
+}
+.smwb-floating-window__grip:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+.smwb-floating-window__title {
+  font-family: var(--smui-fontFamily);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.5;
+  color: var(--smui-onSurfaceColor);
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.smwb-floating-window__actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+  margin-left: auto;
+  cursor: default;
+}
+.smwb-floating-window__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--smui-onSurfaceVariant);
+  cursor: pointer;
+}
+.smwb-floating-window__action:hover {
+  background-color: var(--smui-onSurfaceHover);
+  color: var(--smui-onSurfaceColor);
+}
+.smwb-floating-window__action:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: -2px;
+}
+.smwb-floating-window__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  padding: 12px;
+}
+.smwb-floating-window.smwb-collapsed {
+  height: auto;
+}
+.smwb-floating-window__resize {
+  position: absolute;
+  touch-action: none;
+  user-select: none;
+  z-index: 1;
+}
+.smwb-floating-window__resize:focus-visible {
+  outline: 2px solid var(--smui-primaryColor);
+  outline-offset: -2px;
+}
+.smwb-floating-window__resize_n,
+.smwb-floating-window__resize_s {
+  left: 6px;
+  right: 6px;
+  height: 6px;
+  cursor: ns-resize;
+}
+.smwb-floating-window__resize_e,
+.smwb-floating-window__resize_w {
+  top: 6px;
+  bottom: 6px;
+  width: 6px;
+  cursor: ew-resize;
+}
+.smwb-floating-window__resize_n {
+  top: 0;
+}
+.smwb-floating-window__resize_s {
+  bottom: 0;
+}
+.smwb-floating-window__resize_e {
+  right: 0;
+}
+.smwb-floating-window__resize_w {
+  left: 0;
+}
+.smwb-floating-window__resize_ne,
+.smwb-floating-window__resize_nw,
+.smwb-floating-window__resize_se,
+.smwb-floating-window__resize_sw {
+  width: 12px;
+  height: 12px;
+}
+.smwb-floating-window__resize_ne {
+  top: 0;
+  right: 0;
+  cursor: nesw-resize;
+}
+.smwb-floating-window__resize_nw {
+  top: 0;
+  left: 0;
+  cursor: nwse-resize;
+}
+.smwb-floating-window__resize_se {
+  bottom: 0;
+  right: 0;
+  cursor: nwse-resize;
+}
+.smwb-floating-window__resize_sw {
+  bottom: 0;
+  left: 0;
+  cursor: nesw-resize;
+}
 .smwb-badge {
   border-radius: 10px;
   z-index: 2;
@@ -4862,7 +5211,8 @@
   text-align: left;
   font-weight: 500;
 }
-.smwb-table__cell.smwb-head-cell.smwb-sortable {
+.smwb-table__cell.smwb-head-cell.smwb-sortable,
+.smwb-table__cell.smwb-head-cell.smwb-head-cell_sortable {
   cursor: pointer;
 }
 .smwb-table__cell.smwb-head-cell .smwb-head-cell__content {
@@ -4886,16 +5236,20 @@
 }
 .smwb-table__cell.smwb-head-cell .smwb-head-cell__icon {
   flex-shrink: 0;
-  display: none;
-  transition: all 0.15s ease-in-out;
-  fill: var(--smui-primaryTextColor);
+  transition: opacity 0.15s ease-in-out;
+  opacity: 0.4;
+}
+.smwb-table__cell.smwb-head-cell.smwb-head-cell_sorted .smwb-head-cell__icon,
+.smwb-table__cell.smwb-head-cell.smwb-head-cell_sortable:hover .smwb-head-cell__icon,
+.smwb-table__cell.smwb-head-cell .smwb-head-cell__content:focus-visible .smwb-head-cell__icon {
+  opacity: 1;
 }
 .smwb-table__cell.smwb-head-cell.smwb-sorted_asc .smwb-head-cell__icon {
-  display: inline-flex;
+  opacity: 1;
   transform: rotate(0);
 }
 .smwb-table__cell.smwb-head-cell.smwb-sorted_desc .smwb-head-cell__icon {
-  display: inline-flex;
+  opacity: 1;
   transform: rotate(180deg);
 }
 .smwb-table__head .smwb-table__row {
@@ -5037,6 +5391,10 @@
   align-items: center;
   justify-content: center;
 }
+.smwb-icon__wrapper .smwb-icon__svg {
+  display: block;
+  flex-shrink: 0;
+}
 .smwb-icon__wrapper.smwb-icon_color-primary {
   color: var(--smui-primaryColor);
 }
@@ -5409,12 +5767,17 @@
   display: inline-flex;
   align-items: center;
   gap: 10px;
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+.smwb-tree__node__label > .smwb-icon__wrapper {
+  flex: none;
 }
 .smwb-tree__node__content {
   display: flex;
   align-items: center;
   gap: 10px;
-  height: 40px;
+  min-height: 40px;
   cursor: pointer;
   user-select: none;
 }
@@ -6620,6 +6983,9 @@
 /*-------------------
      Sheet
 --------------------*/
+/*-------------------
+  Floating window
+--------------------*/
 /*-------------------
     Tooltip
 --------------------*/
@@ -6758,6 +7124,7 @@
   --smui-chipsOutlinedBorder: #79747e;
   --smui-chipsHoverBg: color-mix(in srgb, #1c1b1f 8%, transparent);
   --smui-chipsActiveBg: color-mix(in srgb, #1c1b1f 12%, transparent);
+  --smui-chipsSelectedBg: #e8def8;
   --smui-menuTextColor: #1c1b1f;
   --smui-menuDividerColor: rgba(0, 0, 0, 0.12);
   --smui-menuDisabledTextColor: color-mix(in srgb, #1c1b1f 38%, transparent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smwb/ui-css",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Prebuilt aggregate stylesheet for the @smwb design system (compiled from @smwb/ui-styles). Framework-agnostic — shared by the React and SolidJS libraries.",
   "license": "MIT",
   "sideEffects": [
@@ -19,7 +19,7 @@
     "build": "lessc -rp=/ ../styles/less/components.less ./dist/ui.css"
   },
   "devDependencies": {
-    "@smwb/ui-styles": "^1.0.5",
+    "@smwb/ui-styles": "^1.4.3",
     "less": "^4.6.4"
   },
   "homepage": "https://sourcecraft.dev/elfenmail/ui",