le-kit 0.5.3 → 0.6.0

package/dist/collection/components/le-collapse/le-collapse.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-collapse.js","sourceRoot":"","sources":["../../../src/components/le-collapse/le-collapse.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAIxF;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,UAAU;IALvB;QAQE;;;WAGG;QACqC,WAAM,GAAY,KAAK,CAAC;QAEhE,qEAAqE;QAClB,eAAU,GAAY,KAAK,CAAC;QAE/E,yDAAyD;QACR,aAAQ,GAAY,KAAK,CAAC;QAE3E,yEAAyE;QACR,2BAAsB,GACrF,KAAK,CAAC;QAYS,iBAAY,GAAY,KAAK,CAAC;KAsChD;IAhDC;;;OAGG;IAEH,kBAAkB,CAAC,EAAS;QAC1B,MAAM,CAAC,GAAG,EAAsC,CAAC;QACjD,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC;IACzC,CAAC;IAID,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAGS,YAAY;QACpB,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAGS,mBAAmB;QAC3B,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,YAAY;QAClB,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO,KAAK,CAAC;QAC9B,IAAI,IAAI,CAAC,sBAAsB,IAAI,IAAI,CAAC,YAAY;YAAE,OAAO,KAAK,CAAC;QACnE,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,cAAc;QACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACrC,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IACjD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,kEAAY,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YACrD,qEAAc,SAAS,EAAC,aAAa;gBACnC,4DAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAC,QAAQ;oBAC3E,8DAAa,CACT,CACO,CACV,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\n\nexport type LeCollapseAnimation = 'fade' | 'collapse' | 'fade-collapse';\n\n/**\n * Animated show/hide wrapper.\n *\n * Supports height collapse (auto->0) and/or fading.\n * Can optionally listen to the nearest `le-header` shrink events.\n *\n * @slot - Content to animate\n *\n * @cssprop --le-collapse-duration - Transition duration\n *\n * @csspart region - Collapsible region\n * @csspart content - Inner content\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-collapse',\n  styleUrl: 'le-collapse.css',\n  shadow: true,\n})\nexport class LeCollapse {\n  @Element() el: HTMLElement;\n\n  /**\n   * Since Stencil boolean props default to `false` when the attribute is missing.\n   * instead of `open` defaulting to `true`, using a `closed` prop.\n   */\n  @Prop({ mutable: true, reflect: true }) closed: boolean = false;\n\n  /** Whether the content should scroll down from the top when open. */\n  @Prop({ attribute: 'scroll-down', reflect: true }) scrollDown: boolean = false;\n\n  /** Stop fading the content when collapsing/expanding. */\n  @Prop({ attribute: 'no-fading', reflect: true }) noFading: boolean = false;\n\n  /** If true, collapse/expand based on the nearest header shrink event. */\n  @Prop({ attribute: 'collapse-on-header-shrink', reflect: true }) collapseOnHeaderShrink: boolean =\n    false;\n\n  /**\n   * Handles `leHeaderShrinkChange` events from the `le-header`.\n   * In case multiple headers are present, only the nearest one in the DOM tree is used.\n   */\n  @Listen('leHeaderShrinkChange', { target: 'window' })\n  handleHeaderShrink(ev: Event) {\n    const e = ev as CustomEvent<{ shrunk: boolean }>;\n    this.headerShrunk = !!e.detail?.shrunk;\n  }\n\n  @State() private headerShrunk: boolean = false;\n\n  componentDidLoad() {\n    this.applyOpenState();\n  }\n\n  @Watch('open')\n  protected onOpenChange() {\n    this.applyOpenState();\n  }\n\n  @Watch('headerShrunk')\n  protected onDrivenStateChange() {\n    this.applyOpenState();\n  }\n\n  private shouldBeOpen() {\n    if (this.closed) return false;\n    if (this.collapseOnHeaderShrink && this.headerShrunk) return false;\n    return true;\n  }\n\n  private applyOpenState() {\n    const nextOpen = this.shouldBeOpen();\n    this.el.toggleAttribute('data-open', nextOpen);\n  }\n\n  render() {\n    return (\n      <Host data-open={this.shouldBeOpen() ? 'true' : 'false'}>\n        <le-component component=\"le-collapse\">\n          <div class={{ 'region': true, 'scroll-down': this.scrollDown }} part=\"region\">\n            <slot></slot>\n          </div>\n        </le-component>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/le-combobox/le-combobox.css

@@ -1,144 +0,0 @@
-/**
- * le-combobox component styles
- *
- * CSS Custom Properties:
- * --le-combobox-padding-x
- * --le-combobox-font-size
- * --le-combobox-border-radius
- * --le-combobox-border-color
- * --le-combobox-bg
- * --le-combobox-color
- */
-
-:host {
-  display: inline-block;
-  min-width: 200px;
-  --le-combobox-border-color: var(--le-color-primary, #3b82f6);
-}
-
-:host([disabled]) {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-:host([full-width]) {
-  width: 100%;
-}
-
-/* Trigger wrapper */
-.combobox-trigger {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  background: var(--le-combobox-bg, var(--le-color-surface, #fff));
-  border: 1px solid color-mix(in srgb, var(--le-combobox-border-color) 33%, transparent);
-  border-radius: var(--le-combobox-border-radius, 0.375rem);
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.combobox-trigger:hover:not(.is-disabled),
-:host(:focus-within) .combobox-trigger:not(.is-disabled) {
-  border-color: var(--le-combobox-border-color);
-}
-
-.combobox-trigger:focus-within {
-  outline: 2px solid var(--le-color-focus);
-  outline-offset: 2px;
-}
-
-.combobox-trigger.is-open {
-  border-color: var(--le-color-primary, #3b82f6);
-}
-
-/* Input */
-.combobox-input {
-  flex: 1;
-  border: none;
-  outline: none;
-}
-.combobox-input::part(container) {
-  border: none;
-}
-.combobox-input::part(container):focus-within {
-  outline: none !important;
-}
-
-.combobox-input::placeholder {
-  color: color-mix(in srgb, var(--le-color-text-secondary) 66%, transparent);
-}
-
-.combobox-trigger.is-disabled {
-  cursor: not-allowed;
-  background: var(--le-color-surface-disabled, #f9fafb);
-}
-.combobox-input:disabled {
-  cursor: not-allowed;
-}
-
-/* Clear button */
-.combobox-clear {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  padding: 0;
-  margin-right: 0.25rem;
-  color: var(--le-color-primary, #3b82f6);
-  background: transparent;
-  border: none;
-  border-radius: 0.25rem;
-  cursor: pointer;
-  opacity: 0.6;
-  transition: opacity 0.15s ease, background-color 0.15s ease;
-}
-
-.combobox-clear:hover {
-  opacity: 1;
-  background: var(--le-color-surface-hover, #f3f4f6);
-}
-
-.combobox-clear svg {
-  width: 0.875rem;
-  height: 0.875rem;
-}
-
-/* Arrow icon */
-.combobox-arrow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 2rem;
-  height: 100%;
-  color: var(--le-color-primary, #3b82f6);
-  transition: transform 0.2s ease;
-}
-
-.combobox-arrow svg {
-  width: 1rem;
-  height: 1rem;
-}
-
-.combobox-trigger.is-open .combobox-arrow {
-  transform: rotate(180deg);
-}
-
-/* Size variants */
-:host([size='small']) .combobox-trigger {
-  --le-combobox-height: 2rem;
-}
-
-:host([size='small']) .combobox-input {
-  --le-combobox-padding-x: 0.5rem;
-  --le-combobox-font-size: 0.75rem;
-}
-
-:host([size='large']) .combobox-trigger {
-  --le-combobox-height: 3rem;
-}
-
-:host([size='large']) .combobox-input {
-  --le-combobox-padding-x: 1rem;
-  --le-combobox-font-size: 1rem;
-}