@kdcloudjs/shoelace 1.0.29 → 1.0.31

package/cdn/chunks/chunk.5DSHVTBU.js

@@ -0,0 +1,338 @@
+import {
+  i
+} from "./chunk.VKO6US6U.js";
+
+// src/components/sender/sender.styles.ts
+var sender_styles_default = i`
+  :host {
+    display: block;
+    width: 100%;
+    --sl-input-placeholder-color: var(--sl-sender-input-placeholder-color);
+    --color-bg-slot: color-mix(in srgb, var(--sl-color-primary-600) 6%, transparent);
+    --color-text-slot: var(--sl-color-primary-600);
+    --color-text-slot-placeholder: color-mix(in srgb, var(--sl-color-primary-600) 25%, transparent);
+    --color-border-slot: color-mix(in srgb, var(--sl-color-primary-600) 6%, transparent);
+    --color-border-slot-hover: color-mix(in srgb, var(--sl-color-primary-600) 10%, transparent);
+    --color-bg-skill: color-mix(in srgb, var(--sl-color-primary-600) 8%, transparent);
+    --color-bg-skill-hover: color-mix(in srgb, var(--sl-color-primary-600) 15%, transparent);
+  }
+
+  .sender {
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--sl-spacing-small);
+    border: var(--sl-sender-border-width) solid var(--sl-sender-border-color);
+    border-radius: 28px;
+    background-color: var(--sl-sender-background-color);
+    transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) box-shadow;
+    box-shadow: var(--sl-sender-shadow);
+  }
+
+  .sender:not(.sender--disabled):hover {
+    border-color: var(--sl-sender-border-color-hover);
+  }
+
+  .sender:not(.sender--disabled):focus {
+    border-color: var(--sl-sender-border-color-focus);
+  }
+
+  .sender.sender--disabled {
+    --sl-input-placeholder-color: var(--sl-sender-input-placeholder-color-disabled);
+    border-color: var(--sl-sender-border-color-disabled);
+    background-color: var(--sl-sender-background-color-disabled);
+  }
+
+  .sender.sender--disabled .sender__input-area {
+    color: var(--sl-sender-input-color-disabled);
+  }
+
+  .sender:focus-within {
+    border-color: var(--focus-ring-color);
+    box-shadow: var(--sl-sender-shadow-focus);
+  }
+
+  .sender__header {
+    display: none;
+  }
+    
+  .sender__header_content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: var(--sl-spacing-small);
+    border-bottom: 1px solid var(--color-border-slot);
+  }
+
+  .sender__content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sl-spacing-2x-small);
+  }
+
+  .sender__input-area {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--sl-spacing-small);
+    color: var(--sl-sender-input-color);
+  }
+
+  .sender__slot-area {
+    outline: none;
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--sl-spacing-x-small);
+    min-height: var(--sl-input-height-medium);
+  }
+
+  .sender__slot-text {
+    white-space: pre-wrap;
+  }
+
+  .sender__slot-content {
+    display: inline-block;
+    padding: var(--sl-spacing-3x-small) var(--sl-spacing-2x-small);
+    border-radius: var(--sl-border-radius-small);
+    border: 1px solid var(--color-border-slot);
+    outline: none;
+    font-family: var(--sl-font-sans);
+    font-size: var(--sl-font-size-small);
+    line-height: var(--sl-line-height-normal);
+    color: var(--color-text-slot);
+    background-color: var(--color-bg-slot);
+    white-space: pre-wrap;
+    word-break: break-word;
+    cursor: text;
+  }
+
+  .sender__slot-content:focus {
+    border-color: var(--color-border-slot-hover);
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
+  }
+
+  .sender__slot-content:empty::before {
+    content: attr(data-placeholder);
+    color: var(--color-text-slot-placeholder);
+    pointer-events: none;
+  }
+
+  .sender__slot-content[contenteditable='false'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .sender__slot-input,
+  .sender__slot-select {
+    min-width: 6rem;
+  }
+
+  .sender__slot-tag {
+    background: var(--color-bg-slot);
+    border: 1px solid var(--color-border-slot);
+    outline: none;
+    color: var(--color-text-slot);
+    border-radius: var(--sl-border-radius-medium);
+    padding-inline: 2px;
+    font-size: var(--sl-font-size-medium);
+    line-height: var(--sl-line-height-normal);
+    box-sizing: border-box;
+    cursor: default;
+  }
+
+  /* Skill tag */
+  .sender__skill {
+    display: inline-block;
+    vertical-align: baseline;
+    align-items: center;
+    margin-block: 1px;
+    height: calc(var(--sl-font-size-medium) * var(--sl-line-height-normal) + 2px);
+    word-break: break-all;
+    padding-inline-end: 0;
+    padding-inline-start: 0;
+    margin-inline-end: 0;
+    margin-inline-start: -1px;
+  }
+
+  .sender__skill-tag {
+    padding-inline: var(--sl-spacing-x-small);
+    height: 100%;
+    background-color: var(--color-bg-skill);
+    border-radius: var(--sl-border-radius-medium);
+    color: var(--sl-color-primary-600);
+    align-items: center;
+    font-weight: 500;
+    display: inline-flex;
+    cursor: pointer;
+    gap: 2px;
+    transition: background-color var(--sl-transition-fast);
+    font-size: var(--sl-font-size-small);
+    line-height: var(--sl-line-height-normal);
+    white-space: nowrap;
+  }
+
+  .sender__skill-tag:hover {
+    background-color: var(--color-bg-skill-hover);
+  }
+
+  .sender__skill-text {
+    user-select: none;
+  }
+
+  .sender__skill-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: var(--sl-color-primary-600);
+    font-size: var(--sl-font-size-x-small);
+    border-radius: var(--sl-border-radius-small);
+    padding: 1px;
+    transition: color var(--sl-transition-fast);
+  }
+
+  .sender__skill-close:hover {
+    color: var(--sl-color-primary-800);
+  }
+
+  .sender__skill-close--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  sl-textarea {
+    flex: 1;
+    --border-width: 0;
+    --focus-ring-width: 0;
+    --input-padding: 0;
+  }
+
+  /* Remove default border/focus from sl-textarea since we handle it on the container */
+  sl-textarea::part(base) {
+    border: none;
+    box-shadow: none;
+    background: transparent;
+  }
+
+  /* Speech button */
+  .sender__speech-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .sender__speech-btn--recording {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    color: var(--sl-color-primary-600);
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+
+  .sender__speech-btn--recording:hover {
+    color: var(--sl-color-primary-700);
+  }
+
+  .sender__speech-btn--recording:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .sender__recording-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    width: 1.2em;
+    height: 1.2em;
+    vertical-align: top;
+    color: currentColor;
+  }
+
+  .sender__recording-bar {
+    display: inline-block;
+    width: 3px;
+    height: 25%;
+    min-height: 4px;
+    border-radius: 1.5px;
+    background-color: currentColor;
+    animation: sender-recording-bounce 0.8s ease-in-out infinite;
+  }
+
+  .sender__recording-bar:nth-child(1) { animation-delay: 0s; }
+  .sender__recording-bar:nth-child(2) { animation-delay: 0.2s; }
+  .sender__recording-bar:nth-child(3) { animation-delay: 0.4s; }
+  .sender__recording-bar:nth-child(4) { animation-delay: 0.6s; }
+
+  @keyframes sender-recording-bounce {
+    0%, 100% { height: 25%; }
+    50% { height: 50%; }
+  }
+
+  .sender__actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--sl-spacing-2x-small);
+    padding-top: var(--sl-spacing-2x-small);
+  }
+  
+  .sender sl-icon-button {
+    color: var(--sl-sender-action-color);
+    font-size: 20px;
+  }
+
+  .sender__actions sl-icon-button:hover::part(base) {
+    color: var(--sl-sender-action-color-hover);
+    background-color: var(--sl-sender-action-background-hover);
+  }
+
+  .sender__actions sl-icon-button:active::part(base) {
+    color: var(--sl-sender-action-color-active);
+    background-color: var(--sl-sender-action-background-active);
+  }
+
+  .sender__actions sl-icon-button[disabled]::part(base) {
+    color: var(--sl-sender-action-color-disabled);
+  }
+
+
+    
+  .sender__actions .send-button::part(base) {
+    border-radius: var(--sl-sender-submit-border-radius);
+    color: var(--sl-sender-submit-color);
+    background-color: var(--sl-sender-submit-background);
+  }
+
+  .sender__actions .send-button:hover::part(base) {
+    color: var(--sl-sender-action-color-hover);
+    background-color: var(--sl-sender-action-background-hover);
+  }
+
+  .sender__actions .send-button:active::part(base) {
+    color: var(--sl-sender-action-color-active);
+    background-color: var(--sl-sender-action-background-active);
+  }
+
+  .sender__actions .send-button[disabled]::part(base) {
+    background-color: var(--sl-sender-submit-background-disabled);
+  }
+
+  .sender__footer {
+    display: none;
+  }
+
+  .sender__footer_content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: var(--sl-spacing-small);
+  }
+`;
+
+export {
+  sender_styles_default
+};

package/cdn/chunks/{chunk.BN5EFUPY.js → chunk.5RGUSMA7.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.ZLKEMKLZ.js";
 import {
   SlIcon
-} from "./chunk.ZNCN2NE6.js";
+} from "./chunk.2AP733KC.js";
 import {
   watch
 } from "./chunk.WID3TCT6.js";

package/cdn/chunks/{chunk.VU4ZS5DE.js → chunk.6MAGFWEV.js}

@@ -1,6 +1,6 @@
 import {
   SlDropdown
-} from "./chunk.XLNV2YNC.js";
+} from "./chunk.WUFUS2OW.js";
 
 // src/components/dropdown/dropdown.ts
 var dropdown_default = SlDropdown;

package/cdn/chunks/{chunk.P7TUEL7V.js → chunk.6XAK4BE3.js}

@@ -1,6 +1,6 @@
 import {
   SlSelect
-} from "./chunk.BUTJ2U7V.js";
+} from "./chunk.YNIOT4PI.js";
 
 // src/components/select/select.ts
 var select_default = SlSelect;

package/cdn/chunks/{chunk.24RHFOSL.js → chunk.74D4HZDZ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.3QRIFYGG.js";
 import {
   SlCheckbox
-} from "./chunk.VCCYYUGH.js";
+} from "./chunk.XTB2EMPO.js";
 import {
   l
 } from "./chunk.TWOCTPT4.js";
@@ -27,7 +27,7 @@ import {
 } from "./chunk.ZLKEMKLZ.js";
 import {
   SlIcon
-} from "./chunk.ZNCN2NE6.js";
+} from "./chunk.2AP733KC.js";
 import {
   watch
 } from "./chunk.WID3TCT6.js";

package/cdn/chunks/{chunk.6VJJVWDV.js → chunk.77NGAFFB.js}

@@ -1,6 +1,6 @@
 import {
   SlAvatar
-} from "./chunk.CUQWZ7IO.js";
+} from "./chunk.GAP3NMP6.js";
 
 // src/react/avatar/index.ts
 import * as React from "react";

package/cdn/chunks/chunk.7FDLKXHH.js

@@ -0,0 +1,45 @@
+import {
+  i
+} from "./chunk.VKO6US6U.js";
+
+// src/components/sender-header/sender-header.styles.ts
+var sender_header_styles_default = i`
+  :host {
+    display: block;
+  }
+
+  .sender-header {
+    overflow: hidden;
+    transition: height var(--sl-transition-medium) ease-in-out;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--sl-spacing-small);
+    margin-bottom: var(--sl-spacing-small);
+  }
+
+  .header__title {
+    font-weight: var(--sl-font-weight-bold);
+    flex: 1;
+  }
+
+  .content {
+    overflow: hidden;
+    transition: max-height var(--sl-transition-medium) ease-in-out, opacity var(--sl-transition-medium) ease-in-out;
+    max-height: 1000px;
+    opacity: 1;
+  }
+
+  .content--closed {
+    max-height: 0;
+    opacity: 0;
+    margin-bottom: 0;
+  }
+`;
+
+export {
+  sender_header_styles_default
+};

package/cdn/chunks/{chunk.S2ZNUNYX.js → chunk.AIWRCLGO.js}

@@ -1,6 +1,6 @@
 import {
   SlRange
-} from "./chunk.TGZRAX7P.js";
+} from "./chunk.JUHP7VBG.js";
 
 // src/components/range/range.ts
 var range_default = SlRange;

package/cdn/chunks/{chunk.L27ZP5M3.js → chunk.AQCX7OCI.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.RWUUFNUL.js";
 import {
   SlIconButton
-} from "./chunk.ZNIGUQLJ.js";
+} from "./chunk.SXN43BZH.js";
 import {
   LocalizeController
 } from "./chunk.2SU6QBUU.js";

package/cdn/chunks/chunk.B5NTZCHJ.js

@@ -0,0 +1,29 @@
+import {
+  SlSender
+} from "./chunk.M22RVKD5.js";
+
+// src/react/sender/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-sender";
+SlSender.define("sl-sender");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlSender,
+  react: React,
+  events: {
+    onSlChange: "sl-change",
+    onSlSubmit: "sl-submit",
+    onSlClear: "sl-clear",
+    onSlSpeechToggle: "sl-speech-toggle",
+    onSlFocus: "sl-focus",
+    onSlBlur: "sl-blur"
+  },
+  displayName: "SlSender"
+});
+var sender_default = reactWrapper;
+
+export {
+  sender_default
+};

package/cdn/chunks/{chunk.W5B22CS4.js → chunk.BXCHFN5R.js}

@@ -1,6 +1,6 @@
 import {
   SlDrawer
-} from "./chunk.JNFUW4AH.js";
+} from "./chunk.VQ4QS2IG.js";
 
 // src/components/drawer/drawer.ts
 var drawer_default = SlDrawer;

package/cdn/chunks/{chunk.FEYPR3WK.js → chunk.C4N3GUEY.js}

@@ -21,7 +21,7 @@ import {
 } from "./chunk.ZLKEMKLZ.js";
 import {
   SlIcon
-} from "./chunk.ZNCN2NE6.js";
+} from "./chunk.2AP733KC.js";
 import {
   watch
 } from "./chunk.WID3TCT6.js";

package/cdn/chunks/chunk.CNMRVXFY.js

@@ -0,0 +1,158 @@
+import {
+  float_button_group_styles_default
+} from "./chunk.K3MR62NZ.js";
+import {
+  e
+} from "./chunk.ZLKEMKLZ.js";
+import {
+  SlIcon
+} from "./chunk.2AP733KC.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement,
+  n,
+  r
+} from "./chunk.J5EDZ3U4.js";
+import {
+  b
+} from "./chunk.7Z2GKZ7U.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/float-button-group/float-button-group.component.ts
+var SlFloatButtonGroup = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.isOpen = false;
+    this.shape = "circle";
+    this.trigger = "";
+    this.open = false;
+    this.placement = "top";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleDocumentClick = this.handleDocumentClick.bind(this);
+    document.addEventListener("click", this.handleDocumentClick);
+    this.syncChildAttributes();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this.handleDocumentClick);
+  }
+  handleOpenPropChange() {
+    if (this.trigger) {
+      this.isOpen = this.open;
+    }
+  }
+  syncChildAttributes() {
+    requestAnimationFrame(() => {
+      this.querySelectorAll("sl-float-button").forEach((btn) => {
+        btn.setAttribute("ingroup", "");
+        btn.setAttribute("shape", this.shape);
+      });
+    });
+  }
+  handleDocumentClick(event) {
+    if (!this.trigger || !this.isOpen) return;
+    const path = event.composedPath();
+    if (!path.includes(this)) {
+      this.setOpen(false);
+    }
+  }
+  handleTriggerClick() {
+    if (this.trigger === "click") {
+      this.setOpen(!this.isOpen);
+    }
+  }
+  handleTriggerMouseEnter() {
+    if (this.trigger === "hover") {
+      this.setOpen(true);
+    }
+  }
+  handleGroupMouseLeave() {
+    if (this.trigger === "hover") {
+      this.setOpen(false);
+    }
+  }
+  setOpen(value) {
+    if (this.isOpen === value) return;
+    this.isOpen = value;
+    this.open = value;
+    this.emit(value ? "sl-show" : "sl-hide");
+  }
+  handleSlotChange() {
+    this.syncChildAttributes();
+  }
+  render() {
+    const isMenu = !!this.trigger;
+    return b`
+      <div
+        part="base"
+        class=${e({
+      "float-button-group": true,
+      "float-button-group--menu": isMenu,
+      "float-button-group--open": this.isOpen,
+      "float-button-group--top": this.placement === "top",
+      "float-button-group--bottom": this.placement === "bottom",
+      "float-button-group--left": this.placement === "left",
+      "float-button-group--right": this.placement === "right"
+    })}
+        @mouseleave=${this.handleGroupMouseLeave}
+      >
+        <div part="list" class="float-button-group__list">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+
+        ${isMenu ? b`
+              <button
+                part="trigger"
+                class="float-button-group__trigger"
+                @click=${this.handleTriggerClick}
+                @mouseenter=${this.handleTriggerMouseEnter}
+                aria-expanded=${this.isOpen ? "true" : "false"}
+                aria-label=${this.isOpen ? "Close menu" : "Open menu"}
+              >
+                <span part="trigger-icon" class="float-button-group__trigger-icon">
+                  ${this.isOpen ? b`<slot name="close-icon"><sl-icon name="x-lg" library="system"></sl-icon></slot>` : b`<slot name="trigger-icon"><sl-icon name="plus-lg" library="system"></sl-icon></slot>`}
+                </span>
+              </button>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+SlFloatButtonGroup.styles = [component_styles_default, float_button_group_styles_default];
+SlFloatButtonGroup.dependencies = {
+  "sl-icon": SlIcon
+};
+__decorateClass([
+  r()
+], SlFloatButtonGroup.prototype, "isOpen", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlFloatButtonGroup.prototype, "shape", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlFloatButtonGroup.prototype, "trigger", 2);
+__decorateClass([
+  n({ type: Boolean })
+], SlFloatButtonGroup.prototype, "open", 2);
+__decorateClass([
+  n()
+], SlFloatButtonGroup.prototype, "placement", 2);
+__decorateClass([
+  watch("open")
+], SlFloatButtonGroup.prototype, "handleOpenPropChange", 1);
+__decorateClass([
+  watch("shape", { waitUntilFirstUpdate: true })
+], SlFloatButtonGroup.prototype, "syncChildAttributes", 1);
+
+export {
+  SlFloatButtonGroup
+};

package/cdn/chunks/{chunk.AK3CJEZE.js → chunk.D2DVKNXX.js}

@@ -1,6 +1,6 @@
 import {
   SlTag
-} from "./chunk.BQ5RKZFW.js";
+} from "./chunk.F4WJ35X3.js";
 
 // src/components/tag/tag.ts
 var tag_default = SlTag;

package/cdn/chunks/{chunk.K72KXZIJ.js → chunk.DAIAFYJT.js}

@@ -1,6 +1,6 @@
 import {
   SlInclude
-} from "./chunk.CFBUJD3D.js";
+} from "./chunk.RQQ7FUGE.js";
 
 // src/components/include/include.ts
 var include_default = SlInclude;

package/{dist/chunks/chunk.RS5RBPPC.js → cdn/chunks/chunk.DMM3PKQP.js}

@@ -1,6 +1,6 @@
 import {
   SlTag
-} from "./chunk.VFO6XX4A.js";
+} from "./chunk.F4WJ35X3.js";
 
 // src/react/tag/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.SJFD3WIY.js → cdn/chunks/chunk.DPTOAIBI.js}

@@ -1,6 +1,6 @@
 import {
   SlDialog
-} from "./chunk.UH4QRZF2.js";
+} from "./chunk.ZX24V6F5.js";
 
 // src/components/dialog/dialog.ts
 var dialog_default = SlDialog;