@smwb/ui-styles 1.0.0

package/less/components/chat/chat.less

@@ -0,0 +1,623 @@
+@import "./chat.variables.less";
+
+.smwb-chat {
+  position: relative;
+
+  &_bottom-right {
+    --smwb-chat-anchor-x: flex-end;
+    --smwb-chat-anchor-y: flex-end;
+  }
+
+  &_bottom-left {
+    --smwb-chat-anchor-x: flex-start;
+    --smwb-chat-anchor-y: flex-end;
+  }
+
+  &_top-right {
+    --smwb-chat-anchor-x: flex-end;
+    --smwb-chat-anchor-y: flex-start;
+  }
+
+  &_top-left {
+    --smwb-chat-anchor-x: flex-start;
+    --smwb-chat-anchor-y: flex-start;
+  }
+
+  &__trigger.smwb-fab {
+    position: fixed;
+    z-index: @chatShellZ;
+  }
+
+  &_bottom-right &__trigger.smwb-fab {
+    inset-inline-end: @chatTriggerOffset;
+    inset-block-end: @chatTriggerOffset;
+    inset-inline-start: auto;
+    inset-block-start: auto;
+  }
+
+  &_bottom-left &__trigger.smwb-fab {
+    inset-inline-start: @chatTriggerOffset;
+    inset-block-end: @chatTriggerOffset;
+    inset-inline-end: auto;
+    inset-block-start: auto;
+  }
+
+  &_top-right &__trigger.smwb-fab {
+    inset-inline-end: @chatTriggerOffset;
+    inset-block-start: @chatTriggerOffset;
+    inset-inline-start: auto;
+    inset-block-end: auto;
+  }
+
+  &_top-left &__trigger.smwb-fab {
+    inset-inline-start: @chatTriggerOffset;
+    inset-block-start: @chatTriggerOffset;
+    inset-inline-end: auto;
+    inset-block-end: auto;
+  }
+}
+
+.smwb-chat-shell {
+  position: fixed;
+  z-index: @chatShellZ;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background-color: var(--smui-surfaceBackground);
+  border: 1px solid var(--smui-dividerColor);
+  border-radius: @chatRadius;
+  color: var(--smui-onSurfaceColor);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  overflow: hidden;
+
+  &.smwb-chat-dropzone_active {
+    outline: 2px dashed var(--smui-primaryColor);
+    outline-offset: -2px;
+    background-color: var(--smui-primaryContainer);
+  }
+
+  &_bottom-right {
+    inset-inline-end: @chatTriggerOffset;
+    inset-block-end: calc(@chatTriggerOffset + 56px + @smui-space-md);
+  }
+
+  &_bottom-left {
+    inset-inline-start: @chatTriggerOffset;
+    inset-block-end: calc(@chatTriggerOffset + 56px + @smui-space-md);
+  }
+
+  &_top-right {
+    inset-inline-end: @chatTriggerOffset;
+    inset-block-start: calc(@chatTriggerOffset + 56px + @smui-space-md);
+  }
+
+  &_top-left {
+    inset-inline-start: @chatTriggerOffset;
+    inset-block-start: calc(@chatTriggerOffset + 56px + @smui-space-md);
+  }
+
+  &_floating {
+    width: min(@chatFloatingWidth, calc(100vw - @chatTriggerOffset * 2));
+    height: min(@chatFloatingHeight, calc(100vh - 120px));
+  }
+
+  &_fullHeight {
+    width: @chatDockedWidth;
+    max-width: 100vw;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    height: auto;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  &_fullHeight&_bottom-right,
+  &_fullHeight&_top-right {
+    inset-inline-end: 0;
+    inset-inline-start: auto;
+    border-inline-end: 0;
+  }
+
+  &_fullHeight&_bottom-left,
+  &_fullHeight&_top-left {
+    inset-inline-start: 0;
+    inset-inline-end: auto;
+    border-inline-start: 0;
+  }
+
+  &_fullscreen {
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+    border: 0;
+  }
+
+  &__header {
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--smui-dividerColor);
+  }
+
+  &__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__footer {
+    flex-shrink: 0;
+    border-top: 1px solid var(--smui-dividerColor);
+    padding: @chatPadding;
+  }
+}
+
+.smwb-chat-composer {
+  &__input {
+    min-height: 24px;
+    resize: none;
+    overflow: hidden;
+    line-height: 1.5;
+  }
+
+  &_attach-only {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.smwb-chat-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  min-width: 0;
+  padding: @smui-space-xs;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  border-radius: 50%;
+  color: var(--smui-onSurfaceColor);
+  cursor: pointer;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+  &:hover:not(&_disabled) {
+    background-color: var(--smui-onSurfaceHover);
+  }
+
+  &:active:not(&_disabled) {
+    background-color: var(--smui-onSurfaceActive);
+  }
+
+  &[aria-pressed="true"] {
+    background-color: var(--smui-onSurfaceHover);
+    color: var(--smui-primaryColor);
+  }
+
+  &_primary:not(&_disabled) {
+    color: var(--smui-primaryColor);
+  }
+
+  &_disabled {
+    color: var(--smui-onSurfaceVariant);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &_edge-start {
+    margin-left: -12px;
+  }
+
+  &_edge-end {
+    margin-right: -12px;
+  }
+}
+
+.smwb-chat-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: @chatGap;
+  padding: @chatPadding;
+
+  &__main {
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
+  &__title {
+    font-weight: 500;
+  }
+
+  &__subtitle {
+    color: var(--smui-onSurfaceVariant);
+    font-size: 0.875rem;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: @smui-space-xs;
+    flex-shrink: 0;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+}
+
+.smwb-chat-messages {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: @chatGap;
+  padding: @chatPadding;
+  -webkit-overflow-scrolling: touch;
+
+  &__sentinel {
+    width: 100%;
+    height: 1px;
+    flex-shrink: 0;
+  }
+
+  &__skeletons {
+    display: flex;
+    flex-direction: column;
+    gap: @chatGap;
+    width: 100%;
+  }
+}
+
+.smwb-chat-message-skeleton {
+  pointer-events: none;
+
+  &__bubble {
+    display: flex;
+    flex-direction: column;
+    gap: @smui-space-xs;
+    width: 100%;
+    padding: @smui-space-sm @smui-space-md;
+  }
+}
+
+.smwb-chat-message {
+  display: flex;
+  align-items: flex-end;
+  gap: @chatGap;
+  max-width: 100%;
+
+  &_start {
+    justify-content: flex-start;
+  }
+
+  &_end {
+    justify-content: flex-end;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: @smui-space-xxs;
+    max-width: min(100%, 320px);
+  }
+
+  &_end &__content {
+    align-items: flex-end;
+  }
+
+  &__author,
+  &__time {
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  &__meta {
+    display: inline-flex;
+    align-items: center;
+    gap: @smui-space-xxs;
+    max-width: 100%;
+  }
+
+  &_end &__meta {
+    justify-content: flex-end;
+  }
+
+  &__status {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    line-height: 1;
+    color: var(--smui-onSurfaceVariant);
+  }
+
+  &__status_read {
+    color: var(--smui-primaryColor);
+  }
+
+  &__status_pending .material-symbols-outlined {
+    animation: smwb-chat-message-status-spin 1s linear infinite;
+  }
+
+  @keyframes smwb-chat-message-status-spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  &__bubble {
+    padding: @smui-space-sm @smui-space-md;
+    border-radius: @smui-radius-md;
+    word-break: break-word;
+  }
+
+  &__bubble_incoming {
+    background-color: var(--smui-surfaceVariant);
+    color: var(--smui-onSurfaceColor);
+  }
+
+  &__bubble_outgoing {
+    background-color: var(--smui-primaryColor);
+    color: var(--smui-onPrimaryColor);
+  }
+
+  &__avatar {
+    flex-shrink: 0;
+  }
+}
+
+.smwb-chat-message-system {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  color: var(--smui-onSurfaceVariant);
+  padding: @smui-space-xs 0;
+}
+
+.smwb-chat-message-item_custom {
+  display: flex;
+  justify-content: center;
+}
+
+.smwb-chat-attachments {
+  display: flex;
+  flex-direction: column;
+  gap: @smui-space-xs;
+  margin-top: @smui-space-xs;
+}
+
+.smwb-chat-attachments__file {
+  color: inherit;
+  text-decoration: underline;
+  word-break: break-all;
+}
+
+.smwb-chat-attachment-image {
+  display: block;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  border-radius: @smui-radius-sm;
+  overflow: hidden;
+  max-width: 220px;
+
+  &__img {
+    display: block;
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+  }
+
+  &__overlay {
+    position: fixed;
+    inset: 0;
+    z-index: @chatShellZ + 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: @chatPadding;
+    background-color: rgba(0, 0, 0, 0.72);
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+
+    &_enter-active,
+    &_enter-done {
+      opacity: 1;
+    }
+  }
+
+  &__overlay-img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+}
+
+.smwb-chat_embedded {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+}
+
+.smwb-chat-shell_embedded {
+  position: relative;
+  inset: auto;
+  z-index: auto;
+  width: 100%;
+  height: 100%;
+  max-height: none;
+  box-shadow: none;
+  border-radius: 0;
+  border: 0;
+}
+
+.smwb-chat-shell_overlay-context {
+  position: absolute;
+}
+
+.smwb-chat-overlay-layout {
+  position: relative;
+  height: 100%;
+  min-height: 0;
+  width: 100%;
+  isolation: isolate;
+
+  &__content {
+    height: 100%;
+    min-height: 0;
+    overflow: auto;
+  }
+}
+
+.smwb-chat_overlay-context {
+  position: absolute;
+  inset: 0;
+  z-index: @chatShellZ;
+  pointer-events: none;
+
+  .smwb-chat-shell,
+  .smwb-chat__trigger.smwb-fab {
+    pointer-events: auto;
+  }
+
+  .smwb-chat-shell_fullHeight {
+    width: var(--smwb-chat-overlay-w, @chatDockedWidth);
+    max-width: 100%;
+    inset-block: 0;
+    height: auto;
+    border-radius: 0;
+    box-shadow: 0 0 24px rgba(0, 0, 0, 0.12);
+  }
+
+  .smwb-chat-shell_fullHeight.smwb-chat-shell_bottom-right,
+  .smwb-chat-shell_fullHeight.smwb-chat-shell_top-right {
+    inset-inline-end: 0;
+    inset-inline-start: auto;
+    border-inline-end: 0;
+  }
+
+  .smwb-chat-shell_fullHeight.smwb-chat-shell_bottom-left,
+  .smwb-chat-shell_fullHeight.smwb-chat-shell_top-left {
+    inset-inline-start: 0;
+    inset-inline-end: auto;
+    border-inline-start: 0;
+  }
+
+  .smwb-chat-shell_floating {
+    width: min(@chatFloatingWidth, calc(100% - @chatTriggerOffset * 2));
+    height: min(@chatFloatingHeight, calc(100% - 120px));
+  }
+
+  .smwb-chat__trigger.smwb-fab {
+    position: absolute;
+    z-index: @chatShellZ;
+  }
+}
+
+.smwb-chat-layout {
+  display: flex;
+  min-height: 0;
+  height: 100%;
+  width: 100%;
+
+  &_collapsed {
+    position: relative;
+  }
+
+  &__panel {
+    flex: 0 0 var(--smwb-chat-layout-w, @chatLayoutWidth);
+    width: var(--smwb-chat-layout-w, @chatLayoutWidth);
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--smui-surfaceBackground);
+    border-inline-end: 1px solid var(--smui-dividerColor);
+  }
+
+  &_right &__panel {
+    border-inline-end: 0;
+    border-inline-start: 1px solid var(--smui-dividerColor);
+  }
+
+  &__content {
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+  }
+}
+
+.smui-media-down(sm; {
+  .smwb-chat-shell {
+    &_floating {
+      width: calc(100vw - @smui-space-md * 2);
+      inset-inline: @smui-space-md;
+      height: min(@chatFloatingHeight, calc(100vh - 96px));
+    }
+
+    &_fullHeight {
+      width: min(@chatDockedWidth, 100vw);
+      inset-block: 0;
+      height: auto;
+      border-radius: 0;
+      box-shadow: none;
+    }
+
+    &_fullHeight&_bottom-right,
+    &_fullHeight&_top-right {
+      inset-inline-end: 0;
+      inset-inline-start: auto;
+      border-inline-end: 0;
+    }
+
+    &_fullHeight&_bottom-left,
+    &_fullHeight&_top-left {
+      inset-inline-start: 0;
+      inset-inline-end: auto;
+      border-inline-start: 0;
+    }
+  }
+
+  .smwb-chat {
+    &_bottom-right &__trigger.smwb-fab,
+    &_bottom-left &__trigger.smwb-fab,
+    &_top-right &__trigger.smwb-fab,
+    &_top-left &__trigger.smwb-fab {
+      inset-inline: auto;
+      inset-block: auto;
+    }
+
+    &_bottom-right &__trigger.smwb-fab {
+      inset-inline-end: @smui-space-md;
+      inset-block-end: @smui-space-md;
+    }
+
+    &_bottom-left &__trigger.smwb-fab {
+      inset-inline-start: @smui-space-md;
+      inset-block-end: @smui-space-md;
+    }
+
+    &_top-right &__trigger.smwb-fab {
+      inset-inline-end: @smui-space-md;
+      inset-block-start: @smui-space-md;
+    }
+
+    &_top-left &__trigger.smwb-fab {
+      inset-inline-start: @smui-space-md;
+      inset-block-start: @smui-space-md;
+    }
+  }
+});
+
+.smui-media-down(md; {
+  .smwb-chat-shell_fullscreen {
+    padding-top: env(safe-area-inset-top, 0px);
+    padding-right: env(safe-area-inset-right, 0px);
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    padding-left: env(safe-area-inset-left, 0px);
+  }
+});

package/less/components/chat/chat.variables.less

@@ -0,0 +1,9 @@
+@chatGap: @smui-space-sm;
+@chatPadding: @smui-space-md;
+@chatRadius: @smui-radius-lg;
+@chatFloatingWidth: 380px;
+@chatFloatingHeight: 520px;
+@chatDockedWidth: 400px;
+@chatShellZ: 1002;
+@chatTriggerOffset: @smui-space-lg;
+@chatLayoutWidth: 400px;

package/less/components/checkbox/checkbox.entry.less

@@ -0,0 +1,2 @@
+@import (reference) "../../_prelude.less";
+@import "./checkbox.less";